Script component

The Script component is one of the more common ways to add scripting to a Tapestry page.

The component has a single required parameter, script that is the path to a Script document within the classpath. The optional symbols parameter allows a Map to be specified as the base set of symbols, to which are added any informal parameters.

A handful of scripts are included with the framework. The following script is used by the Tapestry Inspector to force a Form to submit when a PropertySelection changes value.

Figure 12.11. SelectSubmit.script

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE script PUBLIC 
  "-//Howard Ship//Tapestry Script 1.1//EN"
  "http://tapestry.sf.net/dtd/Script_1_1.dtd">
<!--

Adds a handler that forces the form containing a particular select element
to submit when the select changes its value.

Input symbols:
  component: The PropertySelection component the script is to be attached to.
-->
<script>
<let key="formName"> 1
  <insert property-path="component.form.name"/>
</let>
<let key="selectName">
  <insert property-path="component.name"/>
</let>
<let key="formPath"> 2
  document.<insert property-path="formName"/>
</let>
<let key="selectPath">
  <insert property-path="formPath"/>.<insert property-path="selectName"/>
</let>
<let key="functionName"> 3
  onChange_<insert property-path="formName"/>_<insert property-path="selectName"/>
</let>

<body>

function <insert property-path="functionName"/>()
{
  <insert property-path="formPath"/>.submit();
}

</body>

<initialization>
<insert property-path="selectPath"/>.onchange = <insert property-path="functionName"/>;
</initialization>
</script>
1

The property path makes it easy to find the Form containing the PropertySelection component. Part of the necessity for this script is that form and form element names are assigned by Tapestry.

2

Here, the path refers to how to identify the HTML element in the browser's DOM.

3

The function name is used twice; to define the function and to setup the event handler. Note how the name incorporates the unique form name and element name, this ensures that any number of PropertySelection components, inside any number of Forms can use this script without concern for naming conflicts.

Using the script simply involves declaring it in the component specification and configuring its input parameters. It must also be in the HTML template, before the closing </jwc> tag of the Form component.

Figure 12.12. SubmitScript usage

<component id="submitScript" type="Script">
  <static-binding name="script">/com/primix/tapestry/form/SelectSubmit.script</static-binding>
  <binding name="component" property-path="components.selectPage"/>
</component>