doc/src/ComponentReference/Select.html - tapestry3 - Git at Google

 <!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">&nbsp;</td>
 </tr>

 <tr>
  <td colspan="2">
   <b>Description</b>
 	<br>
   Implements a component that manages an HTML &lt;select&gt; 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="tapestry-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>
 &lt;form jwcid="@<a href="Form.html">Form</a>" listener="ognl:listeners.formSubmit"&gt;
  Select a color
  &lt;select jwcid="<span class="jwcid">@<a href="Select.html">Select</a></span>" multiple=&quot;ognl:true&quot;&gt;
   &lt;span jwcid="@<a href="Foreach.html">Foreach</a>" source="ognl:visit.colorList" value="ognl:visit.currentColor"&gt;
    &lt;option jwcid="@<a href="Option.html">Option</a>" selected="ognl:visit.currentColor.selected" label="ognl:visit.currentColor.label"/&gt;
   &lt;/span&gt;
  &lt;/select&gt;
 &lt;/form&gt;
 </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>&lt;form method=&quot;post&quot; name=&quot;Form0&quot; action=&quot;/componentref&quot;&gt;<br>   &lt;input type=&quot;hidden&quot; name=&quot;service&quot; value=&quot;direct/0/SelectPage/$Form&quot;/&gt;<br>   &lt;input type=&quot;hidden&quot; name=&quot;sp&quot; value=&quot;S0&quot;/&gt;<br>   &lt;input type=&quot;hidden&quot; name=&quot;Form0&quot; value=&quot;$Select&quot;/&gt;<br>   Select a color<br>   &lt;select name=&quot;$Select&quot; multiple=&quot;multiple&quot;&gt;
       &lt;option value=&quot;0&quot;&gt;Green&lt;/option&gt;
       &lt;option value=&quot;1&quot;&gt;Blue&lt;/option&gt;
       &lt;option value=&quot;2&quot;&gt;Red&lt;/option&gt;
       &lt;option value=&quot;3&quot;&gt;White&lt;/option&gt;
       &lt;option value=&quot;4&quot;&gt;Purple&lt;/option&gt;
       &lt;option value=&quot;5&quot;&gt;Dark Black&lt;/option&gt;
       &lt;option value=&quot;6&quot;&gt;Fiji Blue&lt;/option&gt;
    &lt;/select&gt;
 &lt;/form&gt;
 			</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>
	<!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="tapestry-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>