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

Revision as of 13:19, 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.

The framework provides a "Template" bean which 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. can associate an "attachpoint" with a section within the page. Exploiters can then register a view to a particular attachpoint. When the page template is rendered the COSMOS UI runtime will place the view in the associated section on the page.

Consider the following example:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<jsp:useBean id="template" scope="request" class="org.eclipse.cosmos.provisional.dr.ps.common.Template" /> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>COSMOS Web User Interface</title>

<style type="text/css">
		@import "<%= template.getDojoBaseUrl() %>/dojo/resources/dojo.css";
		@import "<%= template.getDojoBaseUrl() %>/dijit/themes/tundra/tundra.css";
		@import "<%= template.getDojoBaseUrl() %>/dojox/grid/_grid/Grid.css";
		@import "<%= template.getPage() %>/css/style.css";

</style>

<%= template.header() %>
 
</head>
<body class="tundra">

	<table style="background-color:#eee" width="100%">
		<tr><td>
			<div dojoType="cosmos.widget.WidgetContainer" attachPoint="nav"></div> 
		</td></tr>
		<tr><td>
			<div dojoType="cosmos.widget.WidgetContainer" attachPoint="details"></div> 
		</td></tr>
	</table>
				
</body>

Notice that the template file is a regular jsp file. This gives the exploiter alot of flexibility to layout the page. Also notice that attach points are created by declaring a "comos.widget.WidgetContainer" element and setting the "attachPoint" attribute to a tagname. This will identify these section of the page as attach points. As a result any views that are registered to any of these attach points are placed in the particular section within the page. It should be noted that the following lines are always required in a page template:

<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true">
dojo.require("cosmos.widget.*");
dojo.require("cosmos.utility.*");
dojo.require("dojo.parser");
</script>

This will enable the dojo parser and include the COSMOS and dojo javascript files.

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