Chapter 10. Tapestry and JavaScript

Table of Contents

The Body component
Script Specifications and Script Components

Building cutting edge Web applications is not entirely about the server side. A significant amount of work must be done on the client side to support truly dynamic user experiences. Typically, this scripting is done using the JavaScript language embedded into major web browsers such as Internet Explorer and Netscape Navigator.

These effects range from simple effects such as image rollovers (changing the icon used for a link when the cursor is over it) to more involved patterns such as client side validation of forms or even complex animations.

In traditional, static web page development, the HTML producer (the person creating the static HTML page) is completely responsible for this aspect of development, usually aided by a web page authoring tool, such as Dreamweaver. Ultimately, though, the HTML producer assigns unique names or ids to various elements on the page, and attaches JavaScript event handlers to the elements.

Example 10.1. Traditional JavaScript usage


var preload = new Array();
preload[0] = new Image();
preload[0].src = "/images/button.gif";
preload[1] = new Image();
preload[1].src = "/images/button-highlight.gif";

function rollover(image, index)
{
  image.src = preload[index].src;
}

.
.
.
  <a href="..."
    onMouseOver="javascript:rollover(document.button, 1);"
    onMouseOut="javascript:rollover(document.button, 0);">
    <img name="button" src="/images/button.gif">
  </a>

The preloading business is all about forcing the browser to load the image before it is needed, so that it is already in memory when the mouseover event handler needs it.

From here, adding additional rollovers means extending the preload array, providing names for the additional <img> elements and writing the additional event handlers for the <a> elements.

Now, envision a running Tapestry application. With everything so dynamic (especially when you account for things like the Foreach component), it's all but impossible to even know how many links and buttons will be on the page, never mind what they'll all be named. At first glance, it may appear that Tapestry prevents the use of this kind of scripting.

In fact, Tapestry is structured to enhance this kind of scripting. This is faciliated by the Body component, which replaces the <body> element of the page. The next section described the services the Body component povides to facilitate complex client-side scripting.


Component Assets		The Body component