| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- |
| Copyright 2004, 2005 The Apache Software Foundation |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <document> |
| <properties> |
| <title>Script</title> |
| </properties> |
| <body> |
| |
| <section name="Script"> |
| |
| <p> |
| 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. |
| </p> |
| <p> |
| Components within a Script's body may access the input and output parameters of the |
| Script via the OGNL expression components.scriptId.symbols.name. |
| </p> |
| <p> |
| Note a Body component is required when using the Script element. The Body component |
| is used to write out the JavaScript after the HTML <code><body></code> section and attach |
| any initialization code to the body's "onload" event handler. |
| </p> |
| |
| <p> |
| <strong> |
| See also: |
| <a href="body.html">Body</a> |
| </strong> |
| </p> |
| |
| <section name="Parameters"> |
| |
| |
| <table> |
| <tr> |
| <th>Name</th> |
| <th>Type</th> |
| <th>Required</th> |
| <th>Default</th> |
| <th>Description</th> |
| </tr> |
| <tr> |
| <td>script</td> |
| <td>String</td> |
| <td>no</td> |
| <td> </td> |
| <td> |
| The path of a resource (on the classpath) containing the script. One of |
| either <code>script</code> or <code>scriptAsset</code> must be specified. |
| </td> |
| </tr> |
| <tr> |
| <td>scriptAsset</td> |
| <td> |
| <a href="../../apidocs/org/apache/tapestry/IAsset.html"> |
| IAsset |
| </a> |
| </td> |
| <td>no</td> |
| <td> </td> |
| <td> |
| A reference to a script as an |
| <a href="../../apidocs/org/apache/tapestry/IAsset.html"> |
| IAsset |
| </a> |
| parameter. One of either script or scriptAsset must be specified. |
| </td> |
| </tr> |
| <tr> |
| <td>symbols</td> |
| <td>java.util.Map</td> |
| <td>no</td> |
| <td> </td> |
| <td> |
| The base set of symbols to be provided to the |
| <a href="../../apidocs/org/apache/tapestry/IScript.html"> |
| IScript |
| </a> |
| . To this is added (in a copy of the Map) any informal parameters. |
| </td> |
| </tr> |
| |
| </table> |
| |
| <p> |
| Body: |
| <strong>allowed</strong> |
| </p> |
| |
| <p> |
| Informal parameters: |
| <strong>allowed</strong> |
| </p> |
| |
| <p> |
| Reserved parameters: |
| <em>none</em> |
| </p> |
| |
| </section> |
| |
| <section name="Examples"> |
| |
| <p> |
| See the |
| <a href="../form/propertyselection.html">PropertySelection</a> |
| example use of SelectSubmit script to submit a |
| <a href="../form/form.html">Form</a> |
| when a user selects a drop down list item. |
| </p> |
| <p> |
| 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. |
| </p> |
| <p> |
| Note Tapestry will not perform property substitutions in CDATA blocks when using |
| the <code><expression></code> style syntax, instead use the ${expression} syntax. |
| </p> |
| <img src="../../images/ComponentReference/Script.png" |
| alt="Script Screen Shot" /> |
| <p> |
| <strong>HTML Template</strong> |
| </p> |
| |
| <source><![CDATA[<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>]]></source> |
| <p> |
| <strong>Script File (FormFocus.script)</strong> |
| </p> |
| <source><![CDATA[<!DOCTYPE script PUBLIC |
| "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN" |
| "http://jakarta.apache.org/tapestry/dtd/Script_3_0.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>]]></source> |
| <p> |
| 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. |
| </p> |
| <p> |
| 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. |
| </p> |
| <p> |
| <strong>HTML Template</strong> |
| </p> |
| <source xml:space="preserve"> |
| <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> |
| </source> |
| |
| <p> |
| <strong>Script File (FormFocus.script)</strong> |
| </p> |
| <source><![CDATA[<!DOCTYPE script PUBLIC |
| "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN" |
| "http://jakarta.apache.org/tapestry/dtd/Script_3_0.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> |
| |
| <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>]]></source> |
| </section> |
| |
| </section> |
| |
| </body> |
| </document> |
