Script

A component that accesses a script file and adds JavaScript functions and statements to the response page. The specified script file is read and parsed and substitutions are made before the final scripting code is inserted into the page. This allows the JavaScript to be tailored to the ids and names that are generated by Tapestry.

Components within a Script's body may access the input and output parameters of the Script via the OGNL expression components.scriptId.symbols.name.

Note a Body component is required when using the Script element. The Body component is used to write out the JavaScript after the HTML <body> section and attach any initialization code to the body's "onload" event handler.

See also: Body

Parameters

Name Type Direction Required Default Description
script String in no The path of a resource (on the classpath) containing the script. One of either script or scriptAsset must be specified.
scriptAsset IAsset in no A reference to a script as an IAsset parameter. One of either script or scriptAsset must be specified.
symbols java.util.Map in no The base set of symbols to be provided to the IScript . To this is added (in a copy of the Map) any informal parameters.

Body: allowed

Informal parameters: allowed

Reserved parameters: none

Examples

See the PropertySelection example use of SelectSubmit script to submit a Form when a user selects a drop down list item.

In this example a Script is used set the focus to the first text field of the login form. In the script file .. tags are used to wrap the JavaScript code to prevent '<' and '&&' character XML parsing errors.

Note Tapestry will not perform property substitutions in CDATA blocks when using the <expression> style syntax, instead use the ${expression} syntax.

Script Screen Shot

HTML Template 

<body jwcid="@Body">
<span jwcid="@Script" script="/com/mycorp/scripts/FormFocus.script"/>
<form jwcid="@Form" listener="ognl:listener.formSubmit">
 <table cellpadding="4">
   <tr><td>Username:</td><td><input jwcid="@TextField" value="ognl:visit.username" size="12"/></td>
  </tr>
   <tr><td>Password:</td><td><input jwcid="@TextField" value="ognl:visit.password" hidden="ognl:true" size="12"/></td>
  </tr>
  <tr align="right">
   <td colspan="2"><input type="submit" value="Login"/></td>
  </tr>
 </table>
</form>
</body>

Script File (FormFocus.script) 

<script>
  <body>
<![CDATA[
function setFocus() {
    if (document.forms[0]) {
        for (i = 0; i < document.forms[0].elements.length; i++) {
            if (document.forms[0].elements[i].type != "hidden" &&
                document.forms[0].elements[i].disabled != true) {

                document.forms[0].elements[i].focus();
                return;
            }
        }
    }
}
]]>
  </body>
  <initialization>
    setFocus();
  </initialization>
</script>

This alternative FormFocus.script specifies the actual input field to give the focus to. The target input field is identified by an informal parameter named component. The script then uses ${expression} element name insertions to complete the JavaScript.

Note when using this script, the target input field component must be declared before the script component in the HTML template, and within the Form block, so that the target field component can be resolved by the Script component.

HTML Template 

<body jwcid="@Body">
<form jwcid="@Form" listener="ognl:listener.formSubmit">
 <table cellpadding=
  "4">
   <tr><td>Username:</td><td><input jwcid="usernameTextField@TextField" value="ognl:visit.username" size="12"/></td>
  </tr>
   <tr><td>Password:</td><td><input jwcid="@TextField" value="ognl:visit.password" hidden="ognl:true" size="12"/></td>
  </tr>
  <tr align="right">
   <td colspan="2"><input type="submit" value="Login"/></td>
  </tr>
 </table>
 <span jwcid="@Script" script="/com/mycorp/scripts/FormFocus.script" component="ognl:components.usernameTextField"/>
</form>
</body>

Script File (FormFocus.script) 

<!--
Selects the specified form input field on body load if the input type is not
"hidden" and the input field is not disabled.

Input symbols:
  component: the component input field to give focus
-->
	
<script>
	
<input-symbol key="component" class="org.apache.tapestry.form.AbstractFormComponent" required="yes"/>

<let key="formObject">
	document.${component.form.name}
</let>

<let key="componentObject">
	${formObject}.${component.name}
</let>

<body>
function setFocus() {
    var inputField = ${componentObject};

    if (inputField.type != "hidden") {
        if (inputField.disabled != true) {
            inputField.focus();
        }
    } else {
         window.alert('InputFocus.script cannot set focus on a hidden field');
    }
}
</body>

<initialization>
    setFocus();
</initialization>

</script>