Tapestry includes the script.aculo.us JavaScript library. Here we have taken the JavaScript Mixin example and added a "grow" effect.

References: Tapestry JavaScript, script.aculo.us, Prototype 1.7 API.

Home

Scriptaculous.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/js.css}"/>
</head>
<body>
    <h1>Scriptaculous</h1>

    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     
        
    <div id="expando" style="display: none;">
        <div style="padding: 14px; background-color: #eeeeee; margin-bottom: 14px;">
            Tapestry includes the <a href="http://script.aculo.us">script.aculo.us</a> JavaScript library. 
            Here we have taken the JavaScript Mixin example and added a "grow" effect.<br/>

            <div class="eg">
                <form t:type="form" t:autofocus="false">
                    <input t:type="TextField" t:id="firstName" t:mixins="TextboxHint" t:hintText="Enter First Name" t:hintColor="#808080"/>
                    <input t:type="TextField" t:id="lastName" t:mixins="TextboxHint" t:hintText="Enter Last Name" t:hintColor="#808080"/><br/>
                </form>
            </div>
                
            References: 
            <a href="http://tapestry.apache.org/javascript.html">Tapestry JavaScript</a>, 
            <a href="http://script.aculo.us/">script.aculo.us</a>, 
            <a href="http://api.prototypejs.org/">Prototype 1.7 API</a>. <br/><br/>
        
            <a t:type="pagelink" t:page="Index" href="#">Home</a><br/>
        </div>

        <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/javascript/Scriptaculous.tml"/>
        <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/javascript/Scriptaculous.java"/>
        <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/js.css"/>
    </div>

</body>
</html>

Scriptaculous.java


package jumpstart.web.pages.examples.javascript;

import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.javascript.InitializationPriority;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

public class Scriptaculous {

    // Screen fields

    @Property
    private String firstName;

    @Property
    private String lastName;

    // Generally useful bits and pieces

    @Inject
    private JavaScriptSupport javaScriptSupport;

    // The code

    public void setupRender() {

        // Add some JavaScript to the page to "grow" the element called "expando". It will run when the DOM has been
        // fully loaded.

        javaScriptSupport.addScript(InitializationPriority.LATE, String.format("Effect.Grow('%s');", "expando"));
    }

}

js.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 javascript examples. */
.js-required    { color: red; display: block; margin-bottom: 14px; }
.js-recommended { color: red; display: block; margin-bottom: 14px; }

.grid           { border-collapse: collapse; border-spacing: 0; border: 1px solid #dddddd; font-size: 13px; }
.grid tr.odd        { background-color: #f8f8f8; }
.grid tr:hover      { background-color: #eeeeee; }
.grid th        { padding: 3px 5px; text-align: left; width: 130px; border: 1px solid #dddddd; 
                    font-weight: normal; background-color: #eeeeee; 
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e4e4e4'); /* for IE */
                    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e4e4e4)); /* for webkit browsers */
                    background: -moz-linear-gradient(top, #fbfbfb, #e4e4e4); /* for firefox 3.6+ */ }
.grid td        { padding: 3px 5px; text-align:left; }