<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="en_US"xml:lang="en_US"><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><title>OpenSymphony Wiki (Offline Version) :: WebWork2 Documentation</title><linktype="text/css"href="main.css"rel="STYLESHEET"/></head><body><divid="page-logo"><ahref="index.html">WebWork2 Documentation</a></div><divclass="snip-title"><h1class="snip-name">WW2 UI Tags
</h1></div><divid="snip-content"class="snip-content"><divclass="snip-attachments"></div><h3class="heading-1">WebWork 2 UI Tags <aname="top"/><ahref="uitags.html#top"title="Permalink to top"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a></h3><pclass="paragraph"/>Click on a tag to find more information on the tag.<pclass="paragraph"/><tableclass="wiki-table"cellpadding="0"cellspacing="0"border="0"><tr><th>Tag Name</th><th>Description</th></tr><trclass="table-odd"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#checkbox">checkbox</a></span></td><td>render a checkbox input field</td></tr><trclass="table-even"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#component">component</a></span></td><td>render a custom ui widget</td></tr><trclass="table-odd"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#doubleselect">doubleselect</a></span></td><td>renders a nested select</td></tr><trclass="table-even"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#file">file</a></span></td><td>renders a file select input field</td></tr><trclass="table-odd"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#form">form</a></span></td><td>defines an input form</td></tr><trclass="table-even"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#hidden">hidden</a></span></td><td>render a hidden field</td></tr><trclass="table-odd"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#label">label</a></span></td><td>render a label that displays read-only information</td></tr><trclass="table-even"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#password">password</a></span></td><td>render a password input field</td></tr><trclass="table-odd"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#radio">radio</a></span></td><td>renders a radio button input field</td></tr><trclass="table-even"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#select">select</a></span></td><td>renders a select element</td></tr><trclass="table-odd"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#submit">submit</a></span></td><td>renders a submit button</td></tr><trclass="table-even"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#textfield">textfield</a></span></td><td>renders an input field of type text</td></tr><trclass="table-odd"><td><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#textarea">textarea</a></span></td><td>renders a text area input field</td></tr></table><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">checkbox tag</b><aname="checkbox"/><ahref="uitags.html#checkbox"title="Permalink to checkbox"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/>Renders an HTML &#60;input&#62; element of type checkbox, populated by the specified property from the OgnlValueStack.<pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre>JSP
&#60;ww:checkbox label=<spanclass="java&#45;quote">"checkbox test"</span> name=<spanclass="java&#45;quote">"checkboxField1"</span>/&#62;<pclass="paragraph"/>Velocity
#tag( Checkbox <spanclass="java&#45;quote">"label=checkbox test"</span><spanclass="java&#45;quote">"name=checkboxField1"</span> )</pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><ulclass="star"><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#label">label</a></span> - <bclass="bold">required</b></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#name">name</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#value">value</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#onchange">onchange</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#template">template</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#theme">theme</a></span></li></ul><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">component tag</b><aname="component"/><ahref="uitags.html#component"title="Permalink to component"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/>Renders an custom UI widget using the specified templates. Additional objects can be passed in to the template using the param tags. Objects provided can be retrieve from within the template via $tag.Param.<bclass="bold">paramname</b>.<pclass="paragraph"/>In the bottom JSP and Velocity samples, two parameters are being passed in to the component. From within the component, they can be accessed as $tag.getParams().get('key1') and $tags.getParams().get('key2'). Velocity also allows you reference them as $tag.Params.key1 and $tag.Params.key2.<pclass="paragraph"/>Currently, your custom UI components <bclass="bold">must</b> be written in Velocity.<pclass="paragraph"/><bclass="bold">Remember:</b> the value params will always be resolved against the OgnlValueStack so if you mean to pass a string literal to your component, make sure to wrap it in quotes i.e. value="'value1'" otherwise, the the value stack will search for an Object on the stack with a method of getValue1(). (now that i've written this, i'm not entirely sure this is the case. i should verify this manana)<pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre>JSP
&#60;ww:component template=<spanclass="java&#45;quote">"/my/custom/component.vm"</span>/&#62; or<pclass="paragraph"/>&#60;ww:component template=<spanclass="java&#45;quote">"/my/custom/component.vm"</span>&#62;&#60;ww:param name=<spanclass="java&#45;quote">"key1"</span> value=<spanclass="java&#45;quote">"value1"</span>/&#62;&#60;ww:param name=<spanclass="java&#45;quote">"key2"</span> value=<spanclass="java&#45;quote">"value2"</span>/&#62;&#60;/ww:component&#62;<pclass="paragraph"/>Velocity
#tag( Component <spanclass="java&#45;quote">"template=/my/custom/component.vm"</span> )<pclass="paragraph"/> or<pclass="paragraph"/> #bodytag( Component <spanclass="java&#45;quote">"template=/my/custom/component.vm"</span> )
#param( <spanclass="java&#45;quote">"key1"</span><spanclass="java&#45;quote">"value1"</span> )
#param( <spanclass="java&#45;quote">"key2"</span><spanclass="java&#45;quote">"value2"</span> )
#end</pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><ulclass="star"><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#label">label</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#name">name</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#value">value</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#required">required</a></span></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#template">template</a></span> - <bclass="bold">required</b></li><li><spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#theme">theme</a></span></li></ul><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">doubleselect tag</b><aname="doubleselect"/><ahref="uitags.html#doubleselect"title="Permalink to doubleselect"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">file tag</b><aname="file"/><ahref="uitags.html#file"title="Permalink to file"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">form tag</b><aname="form"/><ahref="uitags.html#form"title="Permalink to form"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">hidden tag</b><aname="hidden"/><ahref="uitags.html#hidden"title="Permalink to hidden"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">label tag</b><aname="label"/><ahref="uitags.html#label"title="Permalink to label"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">password tag</b><aname="password"/><ahref="uitags.html#password"title="Permalink to password"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">radio tag</b><aname="radio"/><ahref="uitags.html#radio"title="Permalink to radio"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">select tag</b><aname="select"/><ahref="uitags.html#select"title="Permalink to select"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">submit tag</b><aname="submit"/><ahref="uitags.html#submit"title="Permalink to submit"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">textfield tag</b><aname="textfield"/><ahref="uitags.html#textfield"title="Permalink to textfield"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/><h3class="heading-1"><bclass="bold">textarea tag</b><aname="textarea"/><ahref="uitags.html#textarea"title="Permalink to textarea"><imgsrc="http://wiki.opensymphony.com/images/permalink.png"alt=""border="0"/></a> (<spanclass="nobr"><imgsrc="http://wiki.opensymphony.com/images/external-link.png"alt="&gt;&gt;"border="0"/><ahref="#top">back to the top</a></span>)
</h3><pclass="paragraph"/><bclass="bold">Sample Usages</b><divclass="code"><pre></pre></div><pclass="paragraph"/><bclass="bold">Attributes</b><pclass="paragraph"/><hrclass="line"/>To be completed ...<pclass="paragraph"/><hrclass="line"/><h3class="heading-1">Glossary
</h3><pclass="paragraph"/><tableclass="wiki-table"cellpadding="0"cellspacing="0"border="0"><tr><th>property</th><th>description</th><th>&#160;</th></tr><trclass="table-odd"><td>action</td><td>the name of the action to execute (should this value include the namespace? or can you only execute actions in the same namespace?)</td></tr><trclass="table-even"><td>label</td><td>the text label to be associated with the ui widget.</td></tr><trclass="table-odd"><td>name</td><td>the name of the input field associated with this ui widget. <br/>For example, <divclass="code"><pre>&#60;ui:textfield label=<spanclass="java&#45;quote">"'Member ID'"</span> name=<spanclass="java&#45;quote">"'username'"</span>/&#62;</pre></div> would generate HTML that contained &#60;input &#8230; name="username" ...</td></tr></table></div></body></html>