tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Tapestry > Layout Component
Date Wed, 16 Jun 2010 12:08:00 GMT
<html>
<head>
    <base href="https://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/1810/9/8/_/styles/combined.css?spaceKey=TAPESTRY&amp;forWysiwyg=true"
type="text/css">
    </head>
<body style="background: white;" bgcolor="white" class="email-body">
<div id="pageContent">
<div id="notificationFormat">
<div class="wiki-content">
<div class="email">
    <h2><a href="https://cwiki.apache.org/confluence/display/TAPESTRY/Layout+Component">Layout
Component</a></h2>
    <h4>Page  <b>added</b> by             <a href="https://cwiki.apache.org/confluence/display/~uli">Ulrich
Stärk</a>
    </h4>
         <br/>
    <div class="notificationGreySide">
         <h1><a name="LayoutComponent-LayoutComponent"></a>Layout Component</h1>

<p>You may see frequent reference to a Layout Component, but you won't find it in the
<span class="error">&#91;component reference|../tapestry-core/ref/index.html&#93;</span>.
Layout isn't a component, it's a component <em>pattern</em>.</p>

<p>A Layout component exists to provide common content across all 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.</p>

<p>Tapestry doesn't have a mechanism for such includes, nor does it have the need.</p>

<p>Instead, you can create a component that acts like a template for your pages.</p>

<h2><a name="LayoutComponent-Layout.tml"></a>Layout.tml</h2>

<div class="preformatted panel" style="border-width: 1px;"><div class="preformattedContent
panelContent">
<pre>&lt;html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"&gt;
    &lt;head&gt;
        &lt;title&gt;My Nifty Web Application&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="nav-top"&gt;
            Nifty Web Application
        &lt;/div&gt;
    
        &lt;t:body/&gt;

        &lt;div class="nav-bottom"&gt;
            (C) 2008 NiftyWebCo, Inc.
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
</div></div>

<p>Layout is a standard component, with a standard component template. Like all component
templates, it will be stored on the classpath (i.e., under src/main/resources).</p>

<p>The magic is in the &lt;t:body/&gt; element in the center; this will be replaced
by the <em>page's content</em>, whatever that is.</p>

<p>The two &lt;div&gt; elements above and below the &lt;t:body&gt; are,
in this example, placeholders for the typical content you'll see in a web application: banners
(and banner ads!), menus, login forms and so forth.</p>

<p>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.</p>

<p>Remember that if you include 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, meaning that relative URLs are not only
different for different pages, but may shift unexpectedly.</p>

<h2><a name="LayoutComponent-Layout.java"></a>Layout.java</h2>

<div class="preformatted panel" style="border-width: 1px;"><div class="preformattedContent
panelContent">
<pre>@IncludeStylesheet("context:css/site.css")
public class Layout
{
}
</pre>
</div></div>

<p>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 using the <span class="error">&#91;@IncludeStylesheet|../apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html&#93;</span>
annotation (as opposed to directly adding the &lt;link&gt; element to the template.</p>

<h2><a name="LayoutComponent-Index.tml"></a>Index.tml</h2>

<div class="preformatted panel" style="border-width: 1px;"><div class="preformattedContent
panelContent">
<pre>&lt;html t:type="layout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"&gt;

   &lt;h1&gt;Welcome to the Nifty Web Application!&lt;/h1&gt;

   &lt;p&gt;
        Would you like to &lt;t:pagelink page="login"&gt;Log In&lt;/t:pagelink&gt;?
   &lt;/p&gt;
&lt;/html&gt;
</pre>
</div></div>

<p>This is an example of using the Layout component. To keep our Index.tml template
relatively previewable, we are using an &lt;html&gt; element and the t:type attribute
to specify that it is a component.</p>

<p>The &lt;html&gt; tag will be removed, and replaced with the content from
the Layout.tml template (which convieniently starts with an &lt;html&gt; element).
The &lt;t:body&gt; in Layout.tml will be replaced with the page specific content here:
the &lt;h1&gt; and &lt;p&gt; tags.</p>

<p>Any page in the application that follows this pattern, using the Layout component,
will have the same look and feel.</p>

<p>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 and using different layout types for different pages.</p>

    </div>
    <div id="commentsSection" class="wiki-content pageSection">
       <div style="float: right;">
            <a href="https://cwiki.apache.org/confluence/users/viewnotifications.action"
class="grey">Change Notification Preferences</a>
       </div>
       <a href="https://cwiki.apache.org/confluence/display/TAPESTRY/Layout+Component">View
Online</a>
           </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message