Rollover Component Index Select
Script
net.sf.tapestry.html.Script
Non Visual Component
 
Description
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 before the HTML <body> section and attach any initialization code to the body's "onload" event handler.

See the Developers Guide Tapestry and JavaScript for a complete description of Tapestry's JavaScript integration.
See Also
Body
Parameters
Name Type Direction Required Default Description
script String in yes   The path of a resource (on the classpath) containing the script.
symbols 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 <![CDATA[ .. ]]> 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.

Username:
Password:
  

<body jwcid="body">
<span jwcid="formFocusScript"/>
<form jwcid="loginForm">
 <table cellpadding=
  "4">
   <tr><td>Username:</td><td><input jwcid="usernameTextField" size=
  "12"/></td>
  </tr>
   <tr><td>Password:</td><td><input jwcid="passwordTextField" size="12"/></td>
  </tr>
  <tr align="right">
   <td colspan="2"><input type="submit" value="Login"/></td>
  </tr>
 </table>
</form>
</body>


<component id="body" type="Body"/>

<component id="loginForm" type="Form">
    <binding name="listener" expression="listener.formSubmit"/>
</component>

<component id="usernameTextField" type="TextField">
    <binding name="value" expression="visit.username"/>
</component>

<component id="passwordTextField" type="TextField">
    <binding name="value" expression="visit.password"/>
    <field-binding name="hidden" field-name="Boolean.TRUE"/>
</component>

<component id="formFocusScript" type="Script">
    <static-binding name="script">/com/mycorp/scripts/FormFocus.script</static-binding>
</component>


<!-- Sets the focus to the first form element which is not hidden and not disabled. --> 
<!-- /com/mycorp/scripts/FormFocus.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">
<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 InputFocus.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. 

<body jwcid="body">
<form jwcid="loginForm">
 <table cellpadding=
  "4">
   <tr><td>Username:</td><td><input jwcid="usernameTextField" size=
  "12"/></td>
  </tr>
   <tr><td>Password:</td><td><input jwcid="passwordTextField" size="12"/></td>
  </tr>
  <tr align="right">
   <td colspan="2"><input type="submit" value="Login"/></td>
  </tr>
 </table>
 <span jwcid="inputFocusScript"/>
</form>
</body>


<component id="inputFocusScript" type="Script">
    <binding name="component" expression="components.usernameTextField"/>
    <static-binding name="script">/com/mycorp/scripts/InputFocus.script</static-binding>
</component>


<!-- Sets the focus to the specified input field if not hidden and not disabled. --> 
<!-- /com/mycorp/scripts/InputFocus.script --> 
<?xml version="1.0"?>
<!DOCTYPE script PUBLIC 
	"-//Howard Ship//Tapestry Script 1.1//EN"
	"http://tapestry.sf.net/dtd/Script_1_1.dtd">

<!--
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>

<body>
function setFocus() {
    var inputField = document.${component.form.name}.${component.name};

    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>
Rollover Component Index Select