| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| <!-- $Id$ --> |
| <html> |
| <head> |
| <title>Select</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="Script.html"><IMG alt=Script 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="ServiceLink.html"><IMG alt=ServiceLink 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>Select</b></font></td> |
| </tr> |
| <tr> |
| <td> |
| <A href="../api/org/apache/tapestry/form/Select.html">org.apache.tapestry.form.Select</a> |
| </td> |
| </tr> |
| </table> |
| </td> |
| <td> |
| <table align="right" valign="middle" bgcolor="#c0c0c0" cellpadding="8"> |
| <tr> |
| <td>Multiple Select:</td> |
| <td> |
| <select multiple size="3"> |
| <option>Apple</option> |
| <option>Orange</option> |
| <option>Banana</option> |
| <option>Pear</option> |
| <option>Lemon</option> |
| <option>Kiwi Fruit</option> |
| <option>Grape Fruit</option> |
| </select> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| |
| <tr valign="center"> |
| <td colspan="2"> </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Description</b> |
| <br> |
| Implements a component that manages an HTML <select> form element. The |
| Select component can take the form of a drop down list (default) or a list |
| selection box if the "multiple" parameter is set to true. The Select component |
| must wrap around <A href="Option.html">Option</a> components within a |
| <A href="Form.html">Form</a>. |
| <p> |
| Unless multiple selections are required it is generally easier to use the |
| <A href="PropertySelection.html">PropertySelection</a> |
| component.</p> |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>See Also</b> |
| <br> |
| <A href="Form.html">Form</a>, |
| <A href="Option.html">Option</a>, |
| <A href="RadioGroup.html">RadioGroup</a>, |
| <A href="Radio.html">Radio</a>, |
| <A href="PropertySelection.html">PropertySelection</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>multiple</td> |
| <td>boolean</td> |
| <td>in</td> |
| <td>no</td> |
| <td>false</td> |
| <td>If true, the component allows multiple selection.</td> |
| </tr> |
| <tr> |
| <td>disabled</td> |
| <td>boolean</td> |
| <td>in</td> |
| <td>no</td> |
| <td>false</td> |
| <td>Controls whether the select is active or not. Corresponds to the |
| "disabled" HTML attribute. |
| </td> |
| </tr> |
| </table> |
| <P>Body: <STRONG>rendered</STRONG><BR>Informal parameters: |
| <STRONG>allowed</STRONG> |
| <br> |
| Reserved |
| parameters: "name" </P> |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Examples</b> |
| <p> |
| This examples shows how to setup a standard Select and <A href="Option.html">Option</a> component. |
| Note that Select and <A href="Option.html">Option</a> are typically only used like this when a |
| <A href="PropertySelection.html">PropertySelection</a> |
| component is unable to fulfil the required need. Normally, most users will want to use |
| the <A href="PropertySelection.html">PropertySelection</a>, since it requires less work, and can express similar semantics |
| with only a single component (instead of three, as will be shown below). |
| <p> |
| |
| <table class="examples" cellpadding="4"> |
| <tr> |
| <td>Select a color |
| <select name="selection" multiple> |
| <option value="0">Green |
| <option value="1">Blue |
| <option value="2">Red |
| <option value="3">White |
| <option value="4">Purple |
| <option value="5">Dark Black |
| <option value="6">Fiji Blue</option> |
| </select> |
| </td> |
| </tr> |
| </table> |
| |
| <pre> |
| <form jwcid="@<a href="Form.html">Form</a>" listener="ognl:listeners.formSubmit"> |
| Select a color |
| <select jwcid="<span class="jwcid">@<a href="Select.html">Select</a></span>" multiple="ognl:true"> |
| <span jwcid="@<a href="Foreach.html">Foreach</a>" source="ognl:visit.colorList" value="ognl:visit.currentColor"> |
| <option jwcid="@<a href="Option.html">Option</a>" selected="ognl:visit.currentColor.selected" label="ognl:visit.currentColor.label"/> |
| </span> |
| </select> |
| </form> |
| </pre> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| This example uses a pre-existing collection as the source of the <A href="Option.html">Option</a> list. The |
| <A href="Foreach.html">Foreach</a> is used to iterate through the list, rendering multiple HTML option |
| elements on the way. |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| When the form is submitted, Tapestry will take care of setting the |
| <b>selected</b> attribute on any item that has been selected by |
| the user. For this example, that means that a Color object will |
| have it's selected property set to true (see below)<p> |
| |
| Which produces the following HTML:<p> |
| <pre><form method="post" name="Form0" action="/componentref"><br> <input type="hidden" name="service" value="direct/0/SelectPage/$Form"/><br> <input type="hidden" name="sp" value="S0"/><br> <input type="hidden" name="Form0" value="$Select"/><br> Select a color<br> <select name="$Select" multiple="multiple"> |
| <option value="0">Green</option> |
| <option value="1">Blue</option> |
| <option value="2">Red</option> |
| <option value="3">White</option> |
| <option value="4">Purple</option> |
| <option value="5">Dark Black</option> |
| <option value="6">Fiji Blue</option> |
| </select> |
| </form> |
| </pre> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| In this example, the page object (the .java file) is not important, since it contains nothing. |
| The example has purposely tied both the option list, and the currently selected value (the |
| <A href="Foreach.html">Foreach</a> component's <b>value</b> field) to a property of |
| the Visit object.<p>> |
| The Visit object is defined as follows: |
| <pre> |
| |
| public class Visit implements Serializable { |
| private transient List colorList; |
| private Color currentColor; |
| |
| public Collection getColorList() { |
| if (colorList == null) { |
| colorList = new ArrayList(); |
| colorList.add(new Color("Green")); |
| colorList.add(new Color("Blue")); |
| colorList.add(new Color("Red")); |
| colorList.add(new Color("White")); |
| colorList.add(new Color("Purple")); |
| colorList.add(new Color("Dark Black")); |
| colorList.add(new Color("Fiji Blue")); |
| } |
| return colorList; |
| } |
| |
| public Color getCurrentColor() { return currentColor; } |
| |
| public void setCurrentColor(Color value) { |
| currentColor = value; |
| } |
| } |
| |
| public class Color implements Serializable { |
| private String label; |
| private boolean selected; |
| |
| public Color(String label) { |
| setLabel(label); |
| } |
| |
| public String getLabel() { return label; } |
| |
| public void setLabel(String value) { |
| label = value; |
| } |
| |
| public boolean getSelected() { return selected; } |
| |
| public void setSelected(boolean value) { |
| selected = value; |
| } |
| }</pre> |
| |
| </td></tr></table> |
| </td></tr> |
| <tr> |
| <td colspan="3"><hr></td> |
| </tr> |
| <tr> |
| <td align="left"><A href="Script.html"><IMG alt=Script 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="ServiceLink.html"><IMG alt=ServiceLink src="common-images/next.png"></a></td> |
| </tr> |
| </table> |
| |
| </body> |
| </html> |