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 can set 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 all pages. 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 above tiled layout is rendered by the following CustomerPage template. First the title and body properties are assigned. The CustomerInfo component is the content in the body tile rendered with the current customer's information. The JOT.Title token dynamically renders the login name of the current user.

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

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