# COSMOS Developer's Guide

### Pages Templates

This topic explains the purpose of the pages template component of the COSMOS Web User Interface framework.

A page template is a concept introduced by the COSMOS UI infrastructure. These templates are JSP files that create the structure of the page. You have the freedom to create the layout of the page and import style sheets to change the look and feel of the page. As a result, the COSMOS 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 causes the COSMOS UI infrastructure to 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 operations.

- 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.

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 style sheets 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 generates the bootstrapping code that is needed to initialize and load the COSMOS and Dojo widget components.

    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>

Once the header is constructed you can now construct the body of the template file. 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 identifies these sections 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.

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