THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
You may see frequent reference to a Layout Component, but you won't find it in the component reference. The Layout Component is a component that you create to provide common elements across all of your pages.
In traditional servlet development, you may be familiar with the use of a JSP include to include a banner across the top of your page and a copyright message across the bottom. Tapestry doesn't have a mechanism for such includes , – nor does it have the need one.
Instead, you create a layout component that acts like as a template for your pages:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.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) 2008 NiftyWebCo, Inc.
</div>
</body>
</html>
|
Layout is a regular component like any other, with an ordinary component template. Like all component templates, it will be stored on the classpath (i.e., under src/main/resources)and then each page in your application can wrap itself in that template.
The magic is in the <t:body/> element in the center; this will be replaced by the each page's content, whatever that is.
In a real-world example, the two <div> elements in this example might contain the typical repeating content you'll see in across the pages of a web application: banners (and banner ads!), menus, login forms and so forth. Often these components get very complex ... in fact, in most many applications , the Layout component grows to be more complex than almost any page in the applicationother component.
| 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. |
Layout is a regular component like other, with an ordinary component template. Like all component templates, it will be stored on the classpath (typically under src/main/resources).
Components must always have a Java class. But in this trivial example, the Layout component doesn't need any logic:
| Code Block | ||
|---|---|---|
| ||
@Import(stylesheet="context:css/site.css")
public class Layout
{
}
|
We save ourselves some typing by using 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 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 layout components (using any names you choose) and using those different layout types for different pages.
Nested Layouts
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 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<html t:type="commonLayout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
<h1>Administrative Functions</h1>
<t:body/>
</html>
|