...
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 |
title |
Layout.tml (a template for a Layout component) |
|
|
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.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 |
title |
Welcome.tml (the template for a page) |
|
|
<html t:type="layout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
<h1>Welcome to the Nifty Web Application!</h1>
<p>
Would you like to <t:pagelink page="login">Log In</t:pagelink>?
</p>
</html>
|
...
![]() Code Block |
|
|
|
@Import(stylesheet="context:css/site.css")
public class Layout
{
}
|
...
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 |
title |
AdminLayout.tml |
|
|
<html t:type="commonLayout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.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 |
title |
Layout.tml (a template for a Layout component) |
|
|
<!DOCTYPE html>
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.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>
|
...
![]() Code Block |
|
|
|
@Import(stylesheet="context:css/site.css")
public class Layout
{
/** The page title, for the <title> element and the <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 |
|
|
|
<html t:type="layout" title="List of Users"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<p:style>
TD.profile { background: url('${backgroundImage}') }
</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 |
| html |
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>
|
Layout Component 