THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
| Wiki Markup |
|---|
{float:right|background=#eee}
{contentbylabel:title=Related Articles|showLabels=false|showSpace=false|space=@self|labels=component-templates,component-classes}
{float} |
...
You may see frequent reference to a Layout Component, but you won't find it in the component reference. The Layout isn't a component, it's a component pattern.A Layout component exists Component is a component that you create to provide common content elements across all of your pages in your application.
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.
Instead, you can create layout a component that acts like a template for your pages.:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
| No Format | ||||||
<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 standard regular component like any other, with a standard an ordinary component template. Like all component templates, it will be stored on the classpath (i.e., under src/main/resources).
The magic is in the <t:body/> element in the center; this will be replaced by the page's content, whatever that is.
The In a real-world example, the two <div> elements above and below the <t:body> are, in this example , placeholders for might contain the typical content you'll see in a web application: banners (and banner ads!), menus, login forms and so forth.
Often these get very complex ... in fact, in most applications, the Layout component grows to be more complex than almost any page in the application.
| 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. |
Components must always have a Java class. But in this trivial example, the Layout component doesn't need any logic:
| Code Block | ||
|---|---|---|
|
...
@IncludeStylesheet@Import(stylesheet="context:css/site.css") public class Layout { } |
Components must always have a Java class. In this trivial example, the Layout component does not have much logic. We can save ourselves some typing by using the @IncludeStylesheet @Import annotation (as opposed to directly adding the <link> element to the template.
...
Using the Layout in a Page
| Code Block | ||||||
|---|---|---|---|---|---|---|
|
...
<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>
|
This is an example of using the Layout component in a page (in this case, Welcome.tml. To keep our IndexWelcome.tml template relatively previewablepreview-able, we are using an <html> element and the t:type attribute to specify that it is a component.
The <html> tag will be removed, and replaced with the content from the Layout.tml template (which convieniently conveniently starts with an <html> element). The <t:body> in Layout.tml will be replaced with the page specific content here: the <h1> and <p> tags.
...