<h1>The Dream Team</h1>
<p>Now is the time to choose your dream team.</p>
-<div class="legend">
-<table>
-<tr>
-<td>
<img src="resources/forms/img/move_up.gif"/>
</td>
<td>Move this row 1 up</td>
</tr>
-<tr>
-<td>
<img src="resources/forms/img/move_down.gif"/>
</td>
<td>Move this row 1 down</td>
</tr>
-<tr>
-<td>
<img src="resources/forms/img/delete.gif"/>
</td>
<td>Delete this row</td>
</tr>
-<tr>
-<td>
<img src="resources/forms/img/new.gif"/>
</td>
<td>Add a new row below this row</td>
</tr>
</table>
</div>
-<fi:form-template ajax="true" action="3b5d86872e363e18547c61171914393f268f4c5c.continue" method="POST">
-<bu:replace id="teammembers">
-<p>
<strong> There is no team yet. </strong>
<br/>
</p>
</bu:replace>
-<table>
-<tr>
-<td style="border: 0px solid;">
-<bu:replace id="addmember">
-<fi:action id="addmember" state="active">
<fi:label>Add player</fi:label>
</fi:action>
</bu:replace>
</td>
<td style="border: 0px solid;">
</td>
</tr>
-<tr>
-<td style="border: 0px solid;">
<input type="submit" value="Submit"/>
</td>
<td style="border: 0px solid;"/>
</tr>
</table>
</fi:form-template>
<p class="developer-header"> Developer Notes </p>
<h2>Page definition</h2>
-<p class="developer-note">
This page is defined in
-<ul class="developer-note">
-<li>
<b>teamTemplate.jx</b>
, the form template,
</li>
-<li>
<b>teamDef.xml</b>
, the widget definitions and
</li>
-<li>
<b>teamBind.xml</b>
, the widget binding to Java Beans.
</li>
</ul>
-<p class="developer-note">
The pipeline calls the function
<i>prot_buildTeam</i>
in
<b>team.js</b>
. There is no
naming rule for flow functions, but adding a prefix ('prot_') as a simple kind of security measure to prevent
outsiders from directly calling the function. Security by obscurity you might call it.
</p>
<h2>What happens?</h2>
-<p class="developer-note">
In
<i>prot_buildTeam</i>
a list of 'positions' is generated from the information in
the Manager class and passed onto the form.
</p>
-<p class="developer-note">
Below is the definition of the
<i>position</i>
widget.
</p>
-<div class="code">
-<div class="codeIndent">
<fd:field id="position">
<div class="codeIndent">
<fd:label>Position</fd:label> </div>
<div class="codeIndent"> <fd:datatype base="string"/> </div>
<div class="codeIndent"> <fd:selection-list dynamic="true" type="flow-jxpath"
list-path="positionList" value-path="value" label-path="label"/> </div>
-<div class="codeIndent">
<fd:on-value-changed>
-<div class="codeIndent">
<fd:javascript>
-<div class="codeIndent">
// this script can be found in team.js
<br/>
updateNameWidget(event);
</div>
</fd:javascript>
</div>
</fd:on-value-changed>
</div>
</fd:field>
</div>
</div>
-<p class="developer-note">
The widget
<i>position</i>
has a selection-list of type
<i>flow-jxpath</i>
. The other
attributes define the list to use:
</p>
-<ul class="developer-note">
-<li>
<i>list-path</i>
holds the name of the list that is passed in the "viewData" attribute
</li>
-<li>
<i>value-path</i>
holds the name of the variable or method that returns the value to use
</li>
-<li>
<i>label-path</i>
holds the name of the variable or method that returns the label for the value
</li>
</ul>
</p>
<h2>Internationalization</h2>
<p class="developer-note"> The function also shows how to build this list with localized (i.e. i18n) labels. </p>
-<div class="code">
-<div class="codeIndent">
...
<br/>
// key = key code for position
<br/>
// set the label to the localized message
using i18n
<br/>
positionList[i + 1] = {value: key, label: new I18nMessage(key)};
<br/>
...
</div>
</div>
<p class="developer-note"> Adding the appropriate code to switch locale is left as an exercise. :-) </p>
<h2>Dependency between widgets</h2>
-<p class="developer-note">
The section
<i>on-value-changed</i>
holds the javascript that handles the dependency.
When the value of the
<i>positionlist</i>
changes, the
<i>memberId</i>
widget should get a new list of
names.
<br/>
The script that handles this update can be entered directly between the
<i>javascript</i>
tags, but
adding a descriptive function name there and moving the function to a separate javascript file keeps the widget
definition file clearer. Note the
<i>event</i>
parameter.
<br/>
Remember to add the
<i>submit-on-change="true"</i>
attribute to the styling tag!
</p>
<h2>Repeater validation</h2>
-<p class="developer-note">
This repeater also has a repeater validation section, which prevents using duplicate
names. Again, the script can be entered directly in the widget definition file, but it can also be added to a
function that is placed in a separate javascript file.
<b>Note:</b>
this function takes
<i>widget</i>
(the
current repeater) as parameter and
<b>MUST</b>
return a boolean value (true = success).
<br/>
The repeater
validation function is called when the
<i>Submit</i>
button is pressed. If a validation error occurs, the first
invalid row will be marked with a blue
<font style="color: blue">!</font>
.
</p>
<h2>Some observations</h2>
-<p class="developer-note">
The samples provide a great set of XSL files to convert the template and styling tags
of the widgets into HTML. They start with
<b>forms-samples-styling.xsl</b>
and can be found in the
<i>samples/blocks/forms/resources</i>
folders.
</p>
-<p class="developer-note">
<b>Note:</b>
when you use these XSL files, remember to use them as the last transformation in your pipeline, or
make sure they find the appropriate tags to add some scripts to the html
<i><head></i>
and
<i><body></i>
tags. Especially without a reference to the
<b>forms-lib.js</b>
file, the
on-value-changed event will not be sent to the server and therefore no script is executed.
</p>
-<p class="developer-note">
<b>Note:</b>
At this moment (2004/10/20) a bug exists that throws a NullPointerException when the javascript in
the validation section is executed with the Rhino debugger enabled!
</p>
<h2>When everything is valid</h2>
-<p class="developer-note">
When
<i>Submit</i>
is pressed, and all rows validate, the
<i>prot_buildTeam</i>
function takes over and hands the selected team to the Manager class for further processing. Finally the
function passes flow onto the
<i>showteam</i>
pipeline.
</p>
-<p>
<a href="../">Back to Forms samples</a>
</p>
</body>