JOT Servlets - JOT Templates

JOT Templates > JOT Tiles

JOT Tiles

Tiled Page Layouts:

A tiled design has a master template that arranges the layout of a page in sections called "tiles". One such tiled layout sets the look-and-feel for many pages or an entire site. For instance, the master template can layout a header tile and a menu navigation tile for every page. The completed pages are rendered with dynamic content in the body tile position. This allows a change in one place to change many pages and reduces copy-and-paste repetition. Tiled layouts are also useful for portal designs where the content of the tiles is composed dynamically.

A JOT Template tiled page layout renders JOT Web Component content into the tile positions. In the following example the MyAppLayout.html master template has header, body, and footer tiles. The JOT.Body token renders dynamic content into the body tile.

<html>
<!-- - - - - - -  MyAppLayout.html  - - - - - - -->
<head>
<title>JOT.Title</title>
</head>
<body bgcolor="#CCCCFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- header tile -->
<tr><td>JOT.Content(/webpages/MyAppHeader.html)</td></td>
<!-- body tile -->
<tr><td>JOT.Body</td></td>
<!-- footer tile -->
<tr><td>JOT.Content(/webpages/MyAppFooter.html)</td></td>
</table>
</body>
</html>

The following CustomerPage template sets the title and body properties before rendering the above tiled layout. The CustomerInfo component is the content of the body tile. The JOT.Title token assigns dynamic content for the header tile.

<!-- - - - - - -  CustomerPage.html  - - - - - - -->

<!-- Include property default settings -->
JOT.Content(/webpages/MyAppLayout.defaults)

<!-- Set properties for the Customer page -->
JOT.Title=("Customer Information for ", JOT.LoginName)
JOT.Body=(JOT.Views.Component(com.myapp.CustomerInfo,/webpages/CustomerInfo.html))

<!-- Render the tiled layout -->
JOT.Content(/webpages/MyAppLayout.html)

More elaborate tiled designs have tiles arranged in columns and rows. With JOT Web Components, tiles can contain sub-layouts to any nesting depth. The JOT.Repeat token can be used for portal designs that have a variable number of content tiles depending on the user.