Developer's Guide

Widget Configuration files

Each web component exposes configuration properties that are stored in configuration files For example, a configuration file may store the table definition for a grid widget, the background color of a button widget, or the URL location that contains the contents of a tree widget.

Structure

The COSMOS UI provides a registry that associates a configuration file with a tag value. Page templates and some widget components will utilize the register to get configuration information. For example a page template will define a section within in a page that is associated with a specific tag value. The page template will use this tag value to lookup the web component that is associated with the tag from the registry.

The registry reads a directory made up of configuration files to populate its content. Each entry in the registry is composed of a tag value and a configuration set. The tag value is constructed from the path location of the configuration file. For example, if a configuration file was stored under a detail directory the tag value associated with the configuration file would be detail. Similarly, if the configuration file was stored under the detail\nav directory the tag value would be named detail nav. Notice that the tag value reflects the location of the configuration file and replaces that path separator character with a space.

The registry is located under the views directory of a web application. To get an idea what a typical registry structure would look like, let us consider the following directory structure

COSMOSUI\views\_cosmos_context_
COSMOSUI\views\nav
COSMOSUI\views\properties
COSMOSUI\views\detail
COSMOSUI\views\detail\datasource
COSMOSUI\views\detail\nav
COSMOSUI\views\detail\statdatasource
COSMOSUI\views\detail\nav\queryCMDBf
COSMOSUI\views\attributeTable
COSMOSUI\views\attributeTable\cmdbfQueryDetail
COSMOSUI\views\attributeTable\cmdbfQueryDetail\any
COSMOSUI\views\attributeTable\cmdbfQueryDetail\contentSelector
COSMOSUI\views\attributeTable\cmdbfQueryDetail\depthLimit
COSMOSUI\views\attributeTable\cmdbfQueryDetail\expression
COSMOSUI\views\attributeTable\cmdbfQueryDetail\instanceId
COSMOSUI\views\attributeTable\cmdbfQueryDetail\itemTemplate
COSMOSUI\views\attributeTable\cmdbfQueryDetail\prefixMapping
COSMOSUI\views\attributeTable\cmdbfQueryDetail\propertyValue
COSMOSUI\views\attributeTable\cmdbfQueryDetail\recordType
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relany
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relationshipTemplate
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relexpression
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relinstanceId
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relontentSelector
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relprefixMapping
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relpropertyValue
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relrecordType
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relselectedProperty
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relselectedRecordType
COSMOSUI\views\attributeTable\cmdbfQueryDetail\relxpathExpression
COSMOSUI\views\attributeTable\cmdbfQueryDetail\selectedProperty
COSMOSUI\views\attributeTable\cmdbfQueryDetail\selectedRecordType
COSMOSUI\views\attributeTable\cmdbfQueryDetail\sourceTemplate
COSMOSUI\views\attributeTable\cmdbfQueryDetail\targetTemplate
COSMOSUI\views\attributeTable\cmdbfQueryDetail\xpathExpression
COSMOSUI\views\cmdbfQueryDetail
COSMOSUI\views\cmdbfQueryDetail\cmdbfQueryOverview
COSMOSUI\views\cmdbfQueryDetail\cmdbfQueryOverview\item
COSMOSUI\views\cmdbfQueryDetail\cmdbfQueryOverview\relationship
COSMOSUI\views\cmdbfQueryOverview

The above directory structure defines a views directory under a web application named COSMOSUI. The resulting registry would have the following keys.

_cosmos_context_
nav
properties
detail
detail datasource
detail nav
detail statdatasource
detail nav queryCMDBf
attributeTable
attributeTable cmdbfQueryDetail
attributeTable cmdbfQueryDetail any
attributeTable cmdbfQueryDetail contentSelector
attributeTable cmdbfQueryDetail depthLimit
attributeTable cmdbfQueryDetail expression
attributeTable cmdbfQueryDetail instanceId
attributeTable cmdbfQueryDetail itemTemplate
attributeTable cmdbfQueryDetail prefixMapping
attributeTable cmdbfQueryDetail propertyValue
attributeTable cmdbfQueryDetail recordType
attributeTable cmdbfQueryDetail relany
attributeTable cmdbfQueryDetail relationshipTemplate
attributeTable cmdbfQueryDetail relexpression
attributeTable cmdbfQueryDetail relinstanceId
attributeTable cmdbfQueryDetail relontentSelector
attributeTable cmdbfQueryDetail relprefixMapping
attributeTable cmdbfQueryDetail relpropertyValue
attributeTable cmdbfQueryDetail relrecordType
attributeTable cmdbfQueryDetail relselectedProperty
attributeTable cmdbfQueryDetail relselectedRecordType
attributeTable cmdbfQueryDetail relxpathExpression
attributeTable cmdbfQueryDetail selectedProperty
attributeTable cmdbfQueryDetail selectedRecordType
attributeTable cmdbfQueryDetail sourceTemplate
attributeTable cmdbfQueryDetail targetTemplate
attributeTable cmdbfQueryDetail xpathExpression
cmdbfQueryDetail
cmdbfQueryDetail cmdbfQueryOverview
cmdbfQueryDetail cmdbfQueryOverview item
cmdbfQueryDetail cmdbfQueryOverview relationship
cmdbfQueryOverview

As a result, widget components or page templates can lookup the configuration options based on one of the above tag values. Configuration options are defined in two separate files.

view.jprop

The view.jprop file defines a JSON object that associates a widget to a tag value. The COSMOS UI infrastructure processes the view.jprop file to determine which web components are rendered within a page template. Let us go back and revisit how page templates are created. Consider the following page template.

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>

Remember that the page template uses the org.eclipse.cosmos.provisional.dr.ps.components.widget.WidgetContainer to define attachPoints. The values of these attachPoints are used to lookup the configuration options from the registry. Therefore, the above page template defines two attachPoints (i.e. nav, and detail). When the page template is processed the configuration files associated with the two keys are found from the registry. The web components specified in the configuration files are rendered in the appropriate sections within the page. Consider the following view.jprop file.

1 {
2   clazz: "org.eclipse.cosmos.provisional.dr.ps.components.widget.QueryNavigator",
3   query: {nodeClass:'*'},
4   id:"myTree",
5   initQueryHandler: "json?service=org/eclipse/cosmos/internal/dr/drs/service/outputter/DomainOutputter&query=initDM&nodeDecorator=org.eclipse.cosmos.examples.dr.drs.service.outputter.NodeDecorator",
6   queriesHandler: "json?service=org/eclipse/cosmos/internal/dr/drs/service/handler/common/QueriesOutputter",
7   cmdbfQueryHandler:"json?service=org/eclipse/cosmos/internal/dr/drs/service/outputter/CMDBfQuery",
8   progressDescription: "Loading Data Managers",
9   publish: ['properties', 'detail']
10 }

The clazz property defined on line 2 is a special property used by the COSMOS UI to indicate the web component class. The following properties on lines 3-9 are configuration options used to configure the web component. Therefore, the above view.jprop file configures a org.eclipse.cosmos.provisional.dr.ps.components.widget.QueryNavigator web component.

datamap.jprop

A datamap.jprop file is also defined in the same folder as the view.jprop file. The datamap.jprop file defines a small registry used by the web component. Consider the following datamap.jprop file.

{
   mdrcbe:{   		 
	    icon: "mdrcbeIcon",
            expandQuery:{clazz:"org.eclipse.cosmos.provisional.dr.ps.components.utility.BasicQuery", queryHandler:"json?service=org/eclipse/cosmos/examples/dr/drs/service/outputter/CBEDataManager"}
	   },
   element:{
	    icon: "elementIcon"
	   },
   rootElement:{
	    icon: "elementIcon"
	   }
}

The above file defines a registry that contains three tags(i.e. mdrcbe, element and rootElement). A set of configuration options are associated with each key. A widget component would use this registry to configure itself. For example, the org.eclipse.cosmos.provisional.dr.ps.components.widget.QueryNavigator web component would use the above registry to determine which icons should be used when rendering particular node data within its tree widget.


[ Top of Page | Previous Page | Next Page | Table of Contents | Index ]