The script framework is an effective means to bundle scripts in components. It provides scripts with the advantages of components. It can now be reused like a component and not have to worry about renaming field names or the wiring between the fields and the scripts. You just declare the component and you are good to go. It certainly is another layer of abstraction that one will have to learn but once you have learned it, it is very powerful. And honestly there is not much to it.
The script framework is mandated by the fact that form element/field names are automatically generated by the framework. And so you write your script in XML and use variables for these names and let the framework provide the correct names during runtime. Going further, you may also ask the framework to provide other objects that would help in creating your script. For example:
<input-symbol key="select"
class="org.apache.tapestry.form.PropertySelection"
required="yes"/>
This defines an input variable 'select' of type 'org.apache.tapestry.form.PropertySelection'. All such variables/symbols passed in to the script is stored in a symbol map. And now you can use the form select list name by using an ant style syntax like ${select.name}. The expression within ${} is an OGNL expression and is evaluated with respect to the symbol map. You may also define your own symbols/variables using <let> like:
<let key="formObj">
document.${select.form.name}
</let>
<let key="selectObj">
${formObj}.${select.name}
</let>
These variables/symbols are stored in the symbol map also. So now if you want to set the value of the form select list all you do is say ${formObj}.${selectObj}.value = whatever; this would be equivalent to document.myForm.mySelect.value = whatever; where myForm is the form name and mySelect is the select list name.
<input-symbol...>s are like method parameters and <let...>s are like instance variables. Typically you would pass values to the <input-symbol...>s via the Script component like...
<component id="myScript" type="Script">
<static-binding name="script" value="ScriptSpecificationName.script"/>
<binding name="select" expression="components.somePropertySelection"/>
</component>
The actual scripts are defined in one of the two sections of the script specification, <body> or <initialization>, depending on when you want the script to execute. If you want the script to execute on load of the page, then you define it in the <initialization>, if you want it to execute on any other event, define it in the <body> section of the specification. For example:
<body>
function onChangeList(listObj)
{
alert(listObj.value);
}
</body>
<initialization>
${selectObj}.onchange = function(e)
{
onChangeList(${selectObj});
}
</initialization>
As you can see in the rendered page all scripts are aggregated at the top of the page body, there are no more scripts all over the page. Even event handlers are attached to form objects in the initialization block.
One more thing to remember, scripts being components, and components by nature being independent of its environment, will render the script in the page once for every ocurrance of the component. If you want the body of the script to be rendered only once no matter how many times the component is used, just wrap the body in a <unique> tag like:
<body>
<unique>
function onChangeList(listObj)
{
alert(listObj.value);
}
</unique>
</body>
