Creating Components

Components must reside under the components package.

This page shows how simple it can be to create a component.

Components have a lot in common with pages:

Instead of rendering from a template, a page or component can render a DOM directly with Tapestry's MarkupWriter. For more, see the MarkupWriter example.

Components have some differences to pages:

An example

We have created a simple component called BoldItalicDisplay. Its job is to receive a String parameter and render it in bold and italics within a border.
server time: Tue Apr 23 16:18:11 UTC 2024.
Refresh

You can see from the source code below that BoldItalicDisplay consists of a class and a template.
The BoldItalicDisplay class declares a parameter and a getter. The BoldItalicDisplay template describes how to render it.

Home


<!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>Creating Components</h3>

    Components must reside under the <code>components</code> package.<br/><br/>

    This page shows how simple it can be to create a component.<br/><br/>
    
    <p>Components have a lot in common with pages:</p>
    <ul>
        <li>A component <em>must</em> have a 
        <a href="http://tapestry.apache.org/component-classes.html">Class</a>.</li>
        <li>A component <em>may</em> have a 
        <a href="http://tapestry.apache.org/component-templates.html">Template</a>.</li>
        <li>A component has the same 
        <a href="http://tapestry.apache.org/component-rendering.html">Rendering phases</a>
        as a page.</li>
        <li>A component can have embedded components.</li>
    </ul>
    
    Instead of rendering from a <em>template</em>, a page or component can render a DOM directly with 
    Tapestry's <em>MarkupWriter</em>. For more, see the MarkupWriter example.<br/><br/> 
        
    <p>Components have some differences to pages:</p>
    <ul>
        <li>They reside under the <code>components</code> package, not the <code>pages</code> package.</li>
        <li>They can receive 
        <a href="http://tapestry.apache.org/component-parameters.html">Parameters</a>. 
        Actually, parameters are bi-directional - they are shared with the container and changes made by one are visible to the other.</li>
        <li>They don't receive <em>activate</em> and <em>passivate</em> events.</li>
    </ul>

    <h3>An example</h3>
          
    We have created a simple component called <strong>BoldItalicDisplay</strong>. Its job is to receive 
    a String parameter and render it in bold and italics within a border.

    <div class="eg">
        <t:examples.component.bolditalicdisplay value="message"/>
    </div>
    
    <t:pagelink t:page="examples/component/CreatingComponents" href="#">Refresh</t:pagelink><br/><br/>
    
    You can see from the source code below that BoldItalicDisplay consists of a class and a template.<br/>
    The BoldItalicDisplay class declares a parameter and a getter.  
    The BoldItalicDisplay template describes how to render it.<br/><br/>

    <t:pagelink page="Index">Home</t:pagelink><br/><br/>
    
    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/CreatingComponents.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/CreatingComponents.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/plain.css"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/BoldItalicDisplay.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/BoldItalicDisplay.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/bolditalicdisplay.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.component;

import org.apache.tapestry5.annotations.Import;

@Import(stylesheet = "css/examples/plain.css")
public class CreatingComponents {

    public String getMessage() {
        return "server time: " + new java.util.Date() + ".";
    }

}



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



<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<t:content>
    <div class="bold-etc">
        <strong><em>${value}</em></strong>
    </div>
</t:content>
</html>



package jumpstart.web.components.examples.component;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Property;

@Import(stylesheet = "css/examples/bolditalicdisplay.css")
public class BoldItalicDisplay {
    
    // Parameters

    @Parameter(required = true)
    @Property
    private String value;

}



.bold-etc {
                border: 20px solid #f5f5dc;
}