JavaScript

You can write JavaScript in the template (the .tml file) of your pages and components. However, Tapestry encourages you to put your JavaScript in a file instead. It reduces template clutter. Here we show how to do it with some page-specific JavaScript to switch the color of the firstName field.
First name:
References: Tapestry JavaScript, @Import, JavaScriptSupport, Prototype 1.7 API.

Home

JavaScript.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>JavaScript</h1>

    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    You can write <a href="http://en.wikipedia.org/wiki/JavaScript">JavaScript</a> in the template (the .tml file) of your pages and components. 
    However, Tapestry encourages you to put your JavaScript in a file instead. It reduces template clutter. 
    Here we show how to do it with some page-specific JavaScript to switch the color of the firstName field.
    
    <div class="eg">
        <form t:type="form">
            First name: <input t:type="TextField" t:id="firstName"/><br/>
        </form>
     </div>
    
    References: 
    <a href="http://tapestry.apache.org/javascript.html">Tapestry JavaScript</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/annotations/Import.html">@Import</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</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/><br/>
    
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/javascript/JavaScript.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/javascript/JavaScript.js"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/javascript/JavaScript.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/js.css"/>
</body>
</html>

JavaScript.js


// ColorSwitcher observes the 'firstName' element, switching its color on every keystroke.
// Written in Protoype style because Tapestry includes the Protoype library (http://www.prototypejs.org/).

ColorSwitcher = Class.create( {

    initialize : function() {
        this.element = $('firstName');
        Event.observe(this.element, 'keyup', this.doSwitchColor.bindAsEventListener(this));
        this.element.setStyle({color: 'red'});
    },
    
    doSwitchColor : function(e) {
        if (this.element.getStyle('color') == 'red') {
            this.element.setStyle({color: 'green'});
        }
        else {
            this.element.setStyle({color: 'red'});
        }
    }

} )

JavaScript.java


package jumpstart.web.pages.examples.javascript;

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

// The @Import tells Tapestry to put a link to the file in the head of the page so that the browser will pull it in.
@Import(library = "JavaScript.js")
public class JavaScript {

    // Screen fields

    @Property
    private String firstName;

    @Property
    private String lastName;

    // Generally useful bits and pieces

    @Inject
    private JavaScriptSupport javaScriptSupport;

    // The code

    public void afterRender() {

        // Add some JavaScript to the page to instantiate a ColorSwitcher. It will run when the DOM has been fully
        // loaded.

        javaScriptSupport.addScript("new ColorSwitcher();");
    }

}

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; }