Left

I am page 1's content.

I surrounded myself with component examples/component/layout. I was rendered when it reached a t:body directive in its template.

References: Layout Component, t:body.

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 t:type="examples/component/layout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">

    <div class="pagetext">
        I am page 1's content.<br/><br/>
        
        I surrounded myself with component <em>examples/component/layout</em>. 
        I was rendered when it reached a <em>t:body</em> directive in its template.<br/><br/>
        
        References: 
        <a href="http://tapestry.apache.org/layout-component.html">Layout Component</a>,
        <a href="http://tapestry.apache.org/component-templates.html#ComponentTemplates-The%3Ct%3Abody%3EElement">t:body</a>.<br/><br/>
        
        <t:pagelink page="Index">Home</t:pagelink>
    </div>
    
    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/TheLayoutComponent1.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/TheLayoutComponent1.java"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/Layout.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/Layout.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/layout.css"/>
    </t:tabgroup>
</html>


package jumpstart.web.pages.examples.component;

public class TheLayoutComponent1 {
}


<!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>

    <div class="header">
        <h1>The Layout Component</h1>

        Page 1 and 2 have the same layout: a colored margin, two PageLinks, and this text, around some content.<br/>  
        We did this by writing a component that outputs all of that <em>and the contents of its body</em>.<br/> 
        We called the component <em>Layout</em>, but we could have used any other name. <br/>
        Then we put <em>Layout</em> in both pages, and moved the rest of their contents into <em>Layout's</em> body.<br/> 
        So on display, their contents are inside Layout!<br/><br/>
        
        <div class="nav">
            <t:pagelink page="examples/component/TheLayoutComponent1">Page 1</t:pagelink>
            <t:pagelink page="examples/component/TheLayoutComponent2">Page 2</t:pagelink>
        </div>

    </div>
    
    <table class="middle">
        <tr>
            <td class="left">
                Left
            </td>
            <td class="content">
                <!-- t:body is a directive that says "output the content that I surround". -->
                <t:body/>
            </td>
            <td class="right">
                Right
            </td>
        </tr>
    </table>
    
    <div class="footer">
        Footer
    </div>

</body>
</html>


package jumpstart.web.components.examples.component;

import org.apache.tapestry5.annotations.Import;

@Import(stylesheet = "css/examples/layout.css")
public class Layout {
}


.header {
                padding: 15px 40px;
                background-color: #f5f5dc;
                text-align: left;
}

.header h1 {
                margin-top: 0;
}

.middle {
                width: 100%;
                border-collapse: collapse;
                border-spacing: 0;
}

.left {
                width: 40px;
                background-color: #f5f5dc;
                text-align: center;
}

.right {
                width: 40px;
                background-color: #f5f5dc;
                text-align: center;
}

.footer {
                padding: 15px;
                background-color: #f5f5dc;
                text-align: center;
}

.content {
                
}

.nav a {
                margin: 0 auto;
}

.pagetext {
                margin: 20px;
}

Right