| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| <!-- $Id$ --> |
| <html> |
| <head> |
| <title>Script</title> |
| <link rel="stylesheet" type="text/css" href="Tapestry.css" title="style"> |
| </head> |
| |
| <body> |
| <table border="0" cellpadding="0" cellspacing="0" width="100%"> |
| <tr> |
| <td align="left"><A href="Rollover.html"><IMG alt=Rollover src="common-images/prev.png"></a></td> |
| <td align="middle"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td> |
| <td align="right"><A href="Select.html"><IMG alt=Select src="common-images/next.png"></a></td> |
| <tr> |
| <tr> |
| <td colspan="3"><hr></td> |
| </tr> |
| <tr> |
| <td colspan="3"> |
| <table border="0" cellpadding="4" cellspacing="4" width="100%"> |
| |
| <tr valign="top"> |
| <td> |
| <table> |
| <tr> |
| <td><font size="+2"><b>Script</b></font></td> |
| </tr> |
| <tr> |
| <td> |
| <A href="../api/org/apache/tapestry/html/Script.html"> |
| org.apache.tapestry.html.Script</a> |
| </td> |
| </tr> |
| </table> |
| </td> |
| <td> |
| <table align="right" valign="middle" bgcolor="#c0c0c0" cellpadding="8"> |
| <tr> |
| <td>Non Visual Component</td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| |
| <tr valign="center"> |
| <td colspan="2"> </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Description</b> |
| <br> |
| 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> |
| Components within a Script's body may access the input and <emphasis>output</emphasis> |
| parameters of the Script via the OGNL expression |
| <code>components.<i>scriptId</i>.symbols.<i>name</i></code>. |
| <p> |
| Note a <A href="Body.html">Body</a> 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. |
| <p> |
| See the Developers Guide |
| <A href="../DevelopersGuide/script.html">Tapestry and JavaScript</a> for a complete description of Tapestry's JavaScript |
| integration.</p> |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>See Also</b> |
| <br> |
| <A href="Body.html">Body</a> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Parameters</b> |
| <br> |
| <table border="1" cellpadding="4" cellspacing="4" class="parameters"> |
| <tr> |
| <th>Name</th> |
| <th>Type</th> |
| <th>Direction</th> |
| <th>Required</th> |
| <th>Default</th> |
| <th>Description</th> |
| </tr> |
| <tr> |
| <td>script</td> |
| <td>String</td> |
| <td>in</td> |
| <td>yes</td> |
| <td> </td> |
| <td>The path of a resource (on the classpath) containing the script.</td> |
| </tr> |
| <tr> |
| <td>symbols</td> |
| <td> |
| <a href="http://java.sun.com/products/jdk/1.2/docs/api/java/util/Map.html"> |
| <tt>Map</tt></a> |
| </td> |
| <td>in</td> |
| <td>no</td> |
| <td> </td> |
| <td> |
| The base set of symbols to be provided to the |
| <A href="../api/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><BR> |
| Informal parameters: |
| <STRONG>allowed</STRONG> |
| <br> |
| Reserved |
| parameters: <EM>none</EM> </P> |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Examples</b> |
| <p> |
| See the <A href="PropertySelection.html#Example2">PropertySelection</a> |
| example use of SelectSubmit script to submit a <A href="Form.html">form</a> |
| when a user selects a drop down list item. |
| <p> |
| In this example a Script is used set the focus to the first text field of the |
| login form. In the script file <b><![CDATA[</b> .. <b>]]></b> tags are |
| used to wrap the JavaScript code to prevent '<tt><</tt>' and |
| '<tt>&&</tt>' character XML parsing errors. |
| <p> |
| Note Tapestry will not perform property substitutions in CDATA blocks when |
| using the <tt><expression></tt> style syntax, instead use the |
| <tt>${expression}</tt> syntax. |
| <p> |
| |
| <table class="tapestry-examples" cellpadding="4"> |
| <form> |
| |
| <tr> |
| <td>Username:</td><td><input size="12" |
| ></td> |
| </tr> |
| <tr> |
| <td>Password:</td><td><input type="password" size="12"></td> |
| </tr> |
| <tr align="right"> |
| <td> </td><td><input type="submit" value="Login"></td> |
| </tr> |
| </form></table> |
| |
| <pre> |
| <body jwcid="@<a href="Body.html">Body</a>"> |
| <span jwcid="<span class="jwcid">@<a href="Script.html">Script</a></span>" script="/com/mycorp/scripts/FormFocus.script"/> |
| <form jwcid="@<a href="Form.html">Form</a>" listener="ognl:listener.formSubmit"> |
| <table cellpadding= |
| "4"> |
| <tr><td>Username:</td><td><input jwcid="@<a href="TextField.html">TextField</a>" value="ognl:visit.username" size="12"/></td> |
| </tr> |
| <tr><td>Password:</td><td><input jwcid="@<a href="TextField.html">TextField</a>" 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> |
| |
| |
| <!-- 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<br> |
| "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN"<br> |
| "http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd"><br> |
| <script> |
| <body> |
| <b><![CDATA[</b> |
| 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; |
| } |
| } |
| } |
| } |
| <b>]]></b> |
| </body> |
| <initialization> |
| setFocus(); |
| </initialization> |
| </script> |
| </pre> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"><hr></td> |
| </tr> |
| <tr> |
| <td colspan="2"> |
| <p> |
| This alternative <tt>InputFocus.script</tt> specifies the actual input field |
| to give the focus to. The target input field is identified by an informal |
| parameter named <b>component</b>. The script then uses |
| <tt>${expression}</tt> element name insertions to complete the JavaScript. |
| <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 |
| <A href="Form.html">Form</a> block, so that the target field component can be |
| resolved by the <A href="Script.html">Script</a> component. |
| <p> |
| |
| <pre> |
| <body jwcid="@<a href="Body.html">Body</a>"> |
| <form jwcid="@<a href="Form.html">Form</a>" listener="ognl:listener.formSubmit"> |
| <table cellpadding= |
| "4"> |
| <tr><td>Username:</td><td><input jwcid="usernameTextField@<a href="TextField.html">TextField</a>" value="ognl:visit.username" size="12"/></td> |
| </tr> |
| <tr><td>Password:</td><td><input jwcid="@<a href="TextField.html">TextField</a>" 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="<span class="jwcid">@<a href="Script.html">Script</a></span>" script="/com/mycorp/scripts/FormFocus.script" <b>component</b>="ognl:components.usernameTextField"/> |
| </form> |
| </body> |
| |
| |
| <!-- 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<br> |
| "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN"<br> |
| "http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd"><br> |
| <!-- |
| 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 |
| --> |
| |
| <input-symbol key="<b>component</b>" class="org.apache.tapestry.form.AbstractFormComponent" required="yes"/><br> |
| <let key="formObject"><br> document.${<b>component</b>.form.name}<br></let></pre> |
| <pre> |
| <let key="componentObject"><br> ${formObject}.${<b>component</b>.name}<br></let></pre> |
| <pre></pre> |
| <pre> |
| <script> |
| |
| <body> |
| function setFocus() { |
| var inputField = ${componentObject.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> |
| </pre> |
| </td> |
| </tr> |
| </table></TD></TR> |
| <tr> |
| <td colspan="3"><hr></td> |
| </tr> |
| <tr> |
| <td align="left"><A href="Rollover.html"><IMG alt=Rollover src="common-images/prev.png"></a></td> |
| <td align="middle"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td> |
| <td align="right"><A href="Select.html"><IMG alt=Select src="common-images/next.png"></a></td> |
| </tr></TABLE> |
| |
| </body> |
| </html> |
