Third Party Components

It's easy to use third-party components.

In this example we use the SlidingPanel component from the ChenilleKit open-source project.

The components were added to JumpStart simply by putting chenillekit-core.jar in web/src/main/lib-compile/ and chenillekit-tapestry.jar in web/src/main/lib-runtime/ .
Actually, they were put there by Ant by running the get-dependant-jars target of build.xml during installation.
In the development environment, JumpStart's collapser deploys them into collapsed/jumpstart.war/WEB-INF/lib/.
This is a sliding panel
For more third-party components see Tapestry Stitch, Third Party Modules, and Components on Tapestry 5 How Tos.

References: Component Classes, Component Templates, Component Parameters, SlidingPanel, ChenilleKit.

Home

ThirdPartyComponents.tml 

<!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_3.xsd">
<head>
    <link rel="stylesheet" type="text/css" href="${context:css/examples/examples.css}"/>
</head>
<body>
    <h1>Third Party Components</h1>

    It's easy to use third-party components.<br/><br/>

    In this example we use the <a href="http://www.chenillekit.org/demo/tapcomp/slidingpaneldemo">SlidingPanel</a> component 
    from the <a href="http://chenillekit.codehaus.org/">ChenilleKit</a> open-source project.<br/><br/>
    
    The components were added to JumpStart simply by putting chenillekit-core.jar in web/src/main/lib-compile/ and chenillekit-tapestry.jar in web/src/main/lib-runtime/ .<br/>
    Actually, they were put there by Ant by running the <em>get-dependant-jars</em> target of <em>build.xml</em> during installation.<br/>
    In the development environment, JumpStart's collapser deploys them into <code>collapsed/jumpstart.war/WEB-INF/lib/</code>.

    <div class="eg">
        <t:chenillekit.SlidingPanel t:subject="literal:This is a sliding panel" t:closed="true" style="width: 50%;">
            Hello World.<br/>
            Hello World.<br/>
            Hello World.
        </t:chenillekit.SlidingPanel>
    </div>

    For more third-party components see <a href="http://tapestry-stitch.uklance.cloudbees.net">Tapestry Stitch</a>, 
    <a href="http://tapestry.apache.org/third-party-modules.html">Third Party Modules</a>, 
    and <em>Components</em> on <a href="http://wiki.apache.org/tapestry/Tapestry5HowTos#Components">Tapestry 5 How Tos</a>.<br/><br/>
    
    References: 
    <a href="http://tapestry.apache.org/component-classes.html">Component Classes</a>,
    <a href="http://tapestry.apache.org/component-templates.html">Component Templates</a>,
    <a href="http://tapestry.apache.org/component-parameters.html">Component Parameters</a>, 
    <a href="http://www.chenillekit.org/demo/tapcomp/slidingpaneldemo">SlidingPanel</a>, 
    <a href="http://chenillekit.codehaus.org/">ChenilleKit</a>.<br/><br/>

    <a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
    
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/component/ThirdPartyComponents.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/component/ThirdPartyComponents.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/examples.css"/>
</body>
</html>
ThirdPartyComponents.java 

package jumpstart.web.pages.examples.component;

public class ThirdPartyComponents {
}
examples.css 

body            { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #333; line-height: 17px; }
h1              { font-size: 26px; line-height: 20px; } /* For IE 7 */
form            { margin: 0; }                  

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

a               { text-decoration: none; color: #3D69B6; }
a:hover         { text-decoration: underline; }

/* For BeanDisplay */
.eg dl          { margin: 0; color: #333; }
.eg dl.t-beandisplay dd.id  { display: inline; margin-left: 0px; }  /* IE 7 hack */