The Body component

The Body component provides a number of services to the components it wraps. It handles preloading of images. It provides the ability to add arbitrary JavaScript to the page, to include an external static JavaScript document, or to add JavaScript to the <body> element's onload event handler. Finally, it provides an easy way to generate unique identifiers needed for things like image and function names.

When the Body component renders, it registers itself as an attribute of the IRequestCycle. This allows components wrapped by the Body component, directly or indirectly, to locate it and invoke methods on it. These methods are used to define preloaded images, and add JavaScript code to the response HTML.

Figure 10.1. Body Component Rendering Sequence

Body Component Rendering Sequence

When rendering is complete, the Body component will have produced four distinct portions of the HTML response:

<script language="JavaScript" src="..."></script> 1
<script language="JavaScript"><!-- 2

...

function tapestry_onLoad()  3
{
}

// --> </script>
<body onload="javascript:tapestry_onLoad();"> 4

... 5

</body>

1

Any number of included static scripts may be added to the page.

2

This script block is only emitted when necessary; that is, because some component needed to generate scripting or initialization (or preloaded images). The block is properly "commented" so that older browsers, those that fail to support scripting, will not be confused by the JavaScript code.

3

The onload event handler function is only generated if some component requests some onload initialization.

4

The <body> tag only specfies a onload event handler function if one is needed.

5

The content of the <body> element is defined by the Tapestry components it wraps. Importantly, the rollovers, JavaScript, event handlers and the content are all generated in parallel (the Body component uses buffering so that the JavaScript portion is written out first).