Page History

...

You'll see frequent reference to a Layout Component in Tapestry documentation, but you won't find such a component in the component reference. The Layout component is a component that you create to provide common elements across all of your pages.

...

Info
Remember that if your layout component includes a link to a resource such as an image or a stylesheet, you must use an absolute URL. The same component will be used for pages in many different folders, or with many different activation contexts, so relative URLs won't work. The best approach is to use the context binding prefix.

To keep our Welcome.tml page template relatively preview-able, we are using an <html> element and the t:type attribute to specify that it is a component. At render time, the page's <html> tag will be removed, and replaced with the content from the Layout.tml template (which conveniently starts with an <html> element). The <t:body> element in Layout.tml will be replaced with the page-specific content here: the <h1> and <p> tags.

...

We use the @Import annotation (in 5.2 or later), as opposed to directly adding the <link> element to the template, for significant performance benefits described elsewhere. (For 5.0 and 5.1, use the deprecated @IncludeStyleSheet @IncludeStyleSheet annotation instead.)

You may find that your application has more than one look and feel: perhaps user registration pages have one look, while administrative pages have another. This can be accomplished by having multiple layout components (using any names you choose) and using those different layout types for different pages.

...

Code Block

language	xml
title	Layout.tml (a template for a Layout component)

<!DOCTYPE html>
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
    <head>
        <meta charset="UTF-8" />
        <title>${title} - NiftyWebCo, Inc</title>
        <style type="text/css">
            <t:delegate to="style" />
        </style>
    </head>
    <body>
        <div class="nav-top">
            Nifty Web Application
        </div>

        <h1>${title}</h1>

        <t:alerts/>
   
        <t:body/>

        <div class="nav-bottom">
            (C) 2012 NiftyWebCo, Inc.
        </div>
    </body>
</html>

The Alerts component above is new in (Tapestry 5.3 ; it and later) allows the application to present alert messages to the client in a consistent way. If you want alerts to always appear in the banner of your web site, it may make sense to put it in the layout component's template, as above.

...

Code Block

language	xml
title	UserList.tml

<html t:type="layout" title="List of Users"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p="tapestry:parameter">
<p:style>
    TD.profile { background: url('${backgroundImageuserPhoto}') }
</p:style>

<div>
    Imagine a table of user account information here.
</div>

</html>

...

The rendered HTML would look like the following (whitespace aside, and assuming UserList.java has a backgroundImage property whose value is the string "http://www.example.com/fuzzy.gif"):

Code Block

language	xml
title	The rendered HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>List of Users - NiftyWebCo, Inc</title>
        <style type="text/css">
            TD.profile { background: url('http://www.example.com/fuzzy.gif') }
        </style>
    </head>
    <body>
        <div class="nav-top">
            Nifty Web Application
        </div>

        <h1>List of Users</h1>

        <div id="alerts"></div>

        <div>
            Imagine a table of user account information here.
        </div>

        <div class="nav-bottom">
            (C) 2012 NiftyWebCo, Inc.
        </div>
    </body>
</html>

Page tree

Versions Compared

Old Version 36

New Version 37

Key