@Component

Working with a web designer, you may prefer to provide them a template without the clutter of the Tapestry parameter bindings.
Tapestry provides an alternative. Instead of this...
<t:pagelink page="Index">Home</pagelink>
...you can use invisible instrumentation (explained in the Previewable Templates example) and just the component id, like this...
<a t:id="home" href="#">Home</a>
...and move the parameter bindings into the class, with the @Component annotation, like this...
@Component(id = "home", parameters = {"page=Index"})
private PageLink index;
The component id ties them together. Here it is in action:
Home
Caution: parameter bindings specified in the annotation take precedence over the template. In this example we specified a binding for the page parameter, so we do not specify it in the template too. Bindings specified in the template are ignored if they conflict (case insensitive) with bindings from @Component.

Which is best? Once again, the choice is yours. The first style keeps the component and parameter information together in one place, which programmers may prefer. The second style removes clutter from the template, which web designers may prefer.

In JumpStart we use the first style.

References: Embedded Components, @Component. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">

    <h3>@Component</h3>
    
    Working with a web designer, you may prefer to provide them a template without the clutter of the Tapestry parameter bindings.<br/>
    Tapestry provides an alternative.  Instead of this...
    
    <div class="eg">
        <code>&lt;t:pagelink page="Index"&gt;Home&lt;/pagelink&gt;</code>
    </div>

    ...you can use invisible instrumentation (explained in the Previewable Templates example) and just the component id, like this... 
    
    <div class="eg">
        <code>&lt;a t:id="home" href="#"&gt;Home&lt;/a&gt;</code>
    </div>

    ...and move the parameter bindings into the class, with the <code>@Component</code> annotation, like this...
    
    <div class="eg">
        <code>@Component(id = "home", parameters = {"page=Index"})</code><br/>
        <code>private PageLink index;</code>
    </div>

    The component id ties them together.  Here it is in action:
                
    <div class="eg">
        <a t:id="home" href="#">Home</a>
    </div>
    
    Caution: parameter bindings specified in the annotation take precedence over the template.  In this example we specified 
    a binding for the <code>page</code> parameter, so we do not specify it in the template too. Bindings specified 
    in the template are ignored if they conflict (case insensitive) with bindings from @Component.<br/><br/>

    <strong>Which is best?</strong>  Once again, the choice is yours. The first style keeps the component and parameter 
    information together in one place, which programmers may prefer. The second style removes clutter from the template,
    which web designers may prefer.<br/><br/>

    In JumpStart we use the first style.<br/><br/>
    
    References: 
    <a href="http://tapestry.apache.org/component-classes.html#ComponentClasses-EmbeddedComponents">Embedded Components</a>,
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/Component.html">@Component</a>.
    <br/><br/>
    
    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/lang/AtComponent.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/lang/AtComponent.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/olive.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.lang;

import org.apache.tapestry5.annotations.Component;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.corelib.components.PageLink;

@Import(stylesheet="css/examples/olive.css")
public class AtComponent {

    // This provides parameter bindings for the "home" component.
    
    @Component(id = "home", parameters = {"page=Index"})
    private PageLink index;
    
}



.eg {
                margin: 20px 0;
                padding: 14px;
                color: olive;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}