Page History

{

Div

Wiki Markup

style

float:right
title	Related Articles
class	aui-label

Content by Label

showLabels	false
showSpace	false
title	Related Articles
cql	label in ("component-templates","component-classes") and space = currentSpace()

|background=#eee} {contentbylabel:title=Related Articles|showLabels=false|showSpace=false|space=@self|labels=component-templates,component-classes} {float}

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.

...

But there's an even better way. Just create a layout component that provides the overall structure and recurring content for your pages:

Code Block

xml

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


<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_34.xsd">
    <head>
        <title>My Nifty Web Application</title>
    </head>
    <body>
        <div class="nav-top">
            Nifty Web Application
        </div>

        <t:body/>

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

...

To use your layout component, just have each page in your application wrap itself in the layout, like this:

Code Block

xml

language	xml
title	Welcome.tml (the template for a page)


<html t:type="layout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_04.xsd">

   <h1>Welcome to the Nifty Web Application!</h1>

   <p>
        Would you like to <t:pagelink page="login">Log In</t:pagelink>?
   </p>
</html>

...

Components must always have a Java class. But in this trivial example, the Layout component doesn't need any logic:

Code Block

language	java
title	Layout.java


@Import(stylesheet="context:css/site.css")
public class Layout
{
}

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.

...

Layouts are really just ordinary components, so they can be nested to any level needed. You can have, for example, a "CommonLayout" component that provides the peripheral elements for all your pages, and then a more specialized "AdminLayout" component that provides the layout only for the administrative pages, and make the AdminLayout component wrap itself in the CommonLayout component. So then the administrative pages would start with <html t:type="adminLayout" ...> and the other pages (and the AdminLayout component itself) would start with <html t:type="commonLayout" ...>.

Code Block

xml

language	xml
title	AdminLayout.tml


<html t:type="commonLayout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_04.xsd">

    <h1>Administrative Functions</h1>

    <t:body/>

</html>

...

Here's an example of a Layout component with a few more features. It has a "title" parameter, so that every page can pass in its own title to be rendered in the <title> tag and in an <h1> tag at the top of the HTML. There is also a "style" parameter that allows each page to pass in a block of CSS rules to be rendered in the <head> section of the page (useful for those few CSS rules that can't be put into a static CSS file). Notice the HTML5-style DOCTYPE declaration at the top, the charset definition as UTF-8, and the addition of an "alerts" component.

Code Block

xml

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


<!DOCTYPE html>
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_34.xsd">
    <head>
        <meta charset="UTF-8" />
        <title>$title<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.

The corresponding component class is still very simple, adding support for the "title" and "style" parameters:

Code Block

language	java
title	Layout.java


@Import(stylesheet="context:css/site.css")
public class Layout
{
    /** The page title, for the <title> element and the <h1>element<h1> element. */
    @Property
    @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
    private String title;

    /** Optional CSS rules to place into the page head */
    @Property
    @Parameter(defaultPrefix = BindingConstants.LITERAL)
    private Block style;
}

Here's how you might use the above layout component for a UserList page:

Code Block

xml

language	xml
title	UserList.tml


<html t:type="layout" title="List of Users"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_34.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 <p:style> element (and its contents) are passed to the layout component as a style parameter (a block parameter, in this case, so you must have the xmlns:p="tapestry:parameter" namespace declared, as above).

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

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>

Scrollbar

Page tree

Versions Compared

Old Version 11

New Version Current

Key