Difference between revisions of "COSMOS DG Extending the Web User Interface Framework"

Revision as of 14:00, 13 March 2008

COSMOS Wiki > COSMOS Document Plan > COSMOS Manual Guide

COSMOS Development Guide Extending the Web User Interface Framework

Category: Development Guide

Introduction

The COSMOS UI framework is a web based framework that facilitates the assembly of web components into a single web console application. It includes

• A set of out-of-the-box web widgets
• A registration service to discover and share web widget configurations
• A page template processor

A web widget is a lightweight portable component that can be installed and run within any separate HTML-based web page without requiring a separate compilation.

The main the focus of the COSMOS UI framework is to provide reusable web widgets to help facilitate the development and validation of Management Data Repositories (MDRs) as defined by the Configuration Management Database Specification Federation specification (CMDBf). An MDR is a CMDBf term that represents a component that contains data about managed resources (e.g. computer systems, application software and building) and/or process artifacts (e.g. incident records and requests for change forms) and the relationships between them.

The secondary goal is to provide a web container that manages and assembles these web widgets in a unified web console.

About this Document

This document will first cover the overall architecture of the COSMOS UI framework followed by a set of tutorials that help the user understand basic concepts and extension mechanisms.

Before reading this document the reader should be aware that the COSMOS UI framework uses web methodologies such as AJAX and web technologies such as HTTP, JSON, XML, and Javascript. The reader should be quite familiar with these technologies and methodologies. In addition the framework heavily relies on the DOJO toolkit. The reader should have a good understanding of the following DOJO toolkit concepts.

• JavaScript Programming With Dojo and Dijit
• Dijit - The Dojo Widget Library

Design Overview

Before going into the design details of the framework let us consider the various configuration scenarios that is possible with the framework. This will give us an understanding of the kinds of problems the framework tries to solve.

Scenario 1: Provide a web console for users to query a Data Manager

In this scenario, a developer would like to assemble a web console made of a set of widget components provided by COSMOS. The developer wants to create a whole new look and feel of the COSMOS UI console in terms of how the widget components are laid out and how they interact with each other. Furthermore, the developer wants to change certain cosmetic attributes like fonts, background color ,etc.

Scenario 2: Develop a web widget to manage a Data Manager

In this scenario, the existing out-of-the-box web components can not be utilized to interact with the data manager. The developer wants to create their own web widget to visualize the contents of their data manager and submit queries to their data manager. These new custom web widgets are better suited to interact with their data manager.

Scenario 3: Develop a report to visualize the contents of a Data Manager

A developer wants to develop a report that will visualize the data from a particular data manager. These new reports provide a way to visualize the data so that end users can analyze the information more efficiently.

Let us look at the overall component architecture of the COSMOS UI framework and explore how the framework meets these requirements for each scenario.

The COSMOS UI framework is composed of several key components.

• Page templates
• Web Widgets
• Widget Configuration Files
• Data Feeds
• Reporting System
• Report Templates

Pages Templates

A page template is a concept introduced by the COSMOS UI infrastructure. These templates are jsp files that create the structure of the page. The developer has the freedom to create the layout of the page and import stylessheets to change the look and feel of the page. As a result, the COMOS UI framework exploits the capabilities of JSP pages to define page templates.

A "pages" folder should be defined under the web application's root directory. Template files and any associated resource files are deployed as sub-folders under the "pages folder. Let us consider creating and deploying a template file in the COSMOS UI infrastructure. Let us also consider that our web application is named "COSMOSUI". We would have the following file structure under our web application root directory.

COSMOSUI/pages
COSMOSUI/pages/mytemplate/index.jsp
COSMOSUI/pages/mytemplate/css/style.css

Note that we have defined a"mytemplate" sub folder that bundles our template file (i.e. index.jsp) and any other associated files (i.e. styles.css). Users can then load our template file by entering the following url into a browser:

http://localhost:8080/COSMOSUI/?page=mytemplate

This will cause the COSMOS UI infrastructure will load the template file under the COSMOSUI/pages/mytemplate folder.

The framework provides a "Template" bean which is required by each template file to set up bootstrapping code. The bootstrapping code provides the following:

• loads COSMOS web components into the page
• loads DOJO toolkit into the page
• initializes the COSMOS web components

The "Template" bean also provides helper methods that return the url path to the DOJO toolkit. Let us look at the header section of a typical template file.

1   <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
2   <jsp:useBean id="template" scope="request" class="org.eclipse.cosmos.provisional.dr.ps.common.Template" /> 
3  
4   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5   <html>
6   <head>
7   <title>COSMOS Web User Interface</title>
8 
9   <style type="text/css">
10 		@import "<%= template.getDojoBaseUrl() %>/dojo/resources/dojo.css";
11		@import "<%= template.getDojoBaseUrl() %>/dijit/themes/tundra/tundra.css";
12		@import "<%= template.getDojoBaseUrl() %>/dojox/grid/_grid/Grid.css";
13		@import "<%= template.getPage() %>/css/style.css";
14
15 </style>
16 
17 <%= template.header() %>
18 
19 </head>

Notice that the template file uses the "org.eclipse.cosmos.provisional.dr.ps.common.Template" bean on line 2. The template file uses the "getDojoBaseUrl" method, on lines 10-12, to get the url location of the dojo toolkit so that the dojo stylesheets can be referenced. Also note that on line 13 the "getPage" method is used to reference the url location where this template file is deployed. Therefore files can be referenced relative to where this template file is deployed.

On line 17 a call is made to the "header" method. This method will generate the bootstrapping code needed to initialize and load the COSMOS and Dojo widget components.

Once the header is constructed the developer can go ahead and construct the body of the template file. The developer would construct the layout of the page within the body and define "attachpoints" at certain sections in the page. "Attachpoints" are tags that help the COSMOS UI determine which web widgets should be rendered within certain sections within the page. Consider the following body content.

1  <body class="tundra">
2 
3 	 <table style="background-color:#eee" width="100%">
4 		 <tr><td>
5			 <div dojoType="org.eclipse.cosmos.provisional.dr.ps.components.widget.WidgetContainer" attachPoint="nav"></div> 
6		 </td></tr>
7		 <tr><td>
8			<div dojoType="org.eclipse.cosmos.provisional.dr.ps.components.widget.WidgetContainer"" attachPoint="details"></div> 
9		 </td></tr>
10	 </table>
11				
12 </body>

Notice "attachpoints" are created by declaring a "org.eclipse.cosmos.provisional.dr.ps.components.widget.WidgetContainer" element and setting the "attachPoint" attribute to a tag name. This will identify these section of the page as attach points. As a result any views that are registered to any of these tag names are placed in the particular section within the page.

Widgets

Configuration Files

Data Feeds

Data Tagging

Error Handling

Internationalization

Deployment Model

Tutorials

Development Environment

Creating new widgets

Configuring a widget

Navigator

Adding a menu option to a node

Changing the style of a node

CMDBf Query Builder

Testing and Debugging