Source

webwork / docs / wikidocs / TutorialLesson04-01-01.html

<html>
    <head>
        <title>WebWork 2 : TutorialLesson04-01-01</title>
	    <link rel="stylesheet" href="styles/site.css" type="text/css" />
        <META http-equiv="Content-Type" content="text/html; charset=UTF-8">	    
    </head>

    <body>
	    <table class="pagecontent" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
		    <tr>
			    <td valign="top" class="pagebody">
				    <div class="pageheader">
					    <span class="pagetitle">
                            WebWork 2 : TutorialLesson04-01-01
                                                    </span>
				    </div>
				    <div class="pagesubheading">
					    This page last changed on Sep 16, 2004 by <font color="#0050B2">vitorsouza</font>.
				    </div>

				    <p class="paragraph"><h1 style="margin: 4px 0px 4px 0px;" class="heading1"><a name="TutorialLesson04-01-01-Lesson4.1.1%3AWebWorkUITags"> Lesson 4.1.1: WebWork UI Tags</a></h1></p>In WebWork, the UI tags wrap generic HTML controls while providing tight integration with the core framework. The tags have been designed to minimize the amount of logic in compiled code and delegate the actual rendering of HTML to a template system. The UI tags attempt to cover the most common scenarios, while providing a Component Tag for creating custom components. The UI tags also provide built-in support for displaying inline error messages.<p class="paragraph">This lesson tries to explain how to take advantage of the UI tags to build forms and other graphical controls and, by explaining how the template system works, teaches you how to change the look of existing components and create your own UI components.</p><h2 class="heading2"><a name="TutorialLesson04-01-01-Buildingforms%3A"> Building forms:</a></h2><p class="paragraph">WebWork comes with ready-to-use tags to construct forms. Some of these tags relate directly to HTML tags that are used to make forms and you probably can figure them out by their names: <tt class="monospaced">&lt;ww:checkbox /&gt;</tt>, <tt class="monospaced">&lt;ww:file /&gt;</tt>, <tt class="monospaced">&lt;ww:form /&gt;</tt>, <tt class="monospaced">&lt;ww:hidden /&gt;</tt>, <tt class="monospaced">&lt;ww:label /&gt;</tt>, <tt class="monospaced">&lt;ww:password /&gt;</tt>, <tt class="monospaced">&lt;ww:radio /&gt;</tt>, <tt class="monospaced">&lt;ww:select /&gt;</tt>, <tt class="monospaced">&lt;ww:submit /&gt;</tt>, <tt class="monospaced">&lt;ww:textarea /&gt;</tt> and <tt class="monospaced">&lt;ww:textfield /&gt;</tt>.</p>To build forms with these tags, place them in your page as you would do with the HTML tags. The only difference is that the parameters should be enclosed in double quotes and single quotes (<tt class="monospaced">key=&quot;&#039;value&#039;&quot;</tt>). That&#039;s because names that are not single-quoted are evaluated against the Value Stack.<p class="paragraph">Let&#039;s check out an example:</p><h3 class="heading3"><a name="TutorialLesson04-01-01-ex01index.jsp%3A"> ex01-index.jsp:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;&#37;&#64; taglib uri=<span class="java&#45;quote">&quot;webwork&quot;</span> prefix=<span class="java&#45;quote">&quot;ww&quot;</span> &#37;&gt;&#10;&lt;html&gt;&#10;&lt;head&gt;&#10;&lt;title&gt;WebWork Tutorial &#45; Lesson 4.1.1 &#45; Example 1&lt;/title&gt;&#10;&lt;meta http&#45;equiv=<span class="java&#45;quote">&quot;Content&#45;Type&quot;</span> content=<span class="java&#45;quote">&quot;text/html; charset=iso&#45;8859&#45;1&quot;</span>&gt;&#10;&lt;style type=<span class="java&#45;quote">&quot;text/css&quot;</span>&gt;&#10;	.errorMessage &#123; color: red; &#125;&#10;&lt;/style&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;&#10;&lt;p&gt;UI Form Tags Example:&lt;/p&gt;&#10;&#10;&lt;ww:form action=<span class="java&#45;quote">&quot;&#039;formProcessing.action&#039;&quot;</span> method=<span class="java&#45;quote">&quot;&#039;post&#039;&quot;</span>&gt;&#10;	&lt;ww:checkbox name=<span class="java&#45;quote">&quot;&#039;checkbox&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A checkbox&#039;&quot;</span> fieldValue=<span class="java&#45;quote">&quot;&#039;checkbox&#95;value&#039;&quot;</span> /&gt;&#10;	&lt;ww:file name=<span class="java&#45;quote">&quot;&#039;file&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A file field&#039;&quot;</span> /&gt;&#10;	&lt;ww:hidden name=<span class="java&#45;quote">&quot;&#039;hidden&#039;&quot;</span> value=<span class="java&#45;quote">&quot;&#039;hidden&#95;value&#039;&quot;</span> /&gt;&#10;	&lt;ww:label label=<span class="java&#45;quote">&quot;&#039;A label&#039;&quot;</span> /&gt;&#10;	&lt;ww:password name=<span class="java&#45;quote">&quot;&#039;password&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A password field&#039;&quot;</span> /&gt;&#10;	&lt;ww:radio name=<span class="java&#45;quote">&quot;&#039;radio&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;Radio buttons&#039;&quot;</span> list=<span class="java&#45;quote">&quot;&#123;&#039;One&#039;, &#039;Two&#039;, &#039;Three&#039;&#125;&quot;</span> /&gt;&#10;	&lt;ww:select name=<span class="java&#45;quote">&quot;&#039;select&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A select list&#039;&quot;</span> list=<span class="java&#45;quote">&quot;&#123;&#039;One&#039;, &#039;Two&#039;, &#039;Three&#039;&#125;&quot;</span> &#10;		emptyOption=<span class="java&#45;quote">&quot;<span class="java&#45;keyword">true</span>&quot;</span> /&gt;&#10;	&lt;ww:textarea name=<span class="java&#45;quote">&quot;&#039;textarea&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A text area&#039;&quot;</span> rows=<span class="java&#45;quote">&quot;&#039;3&#039;&quot;</span> cols=<span class="java&#45;quote">&quot;&#039;40&#039;&quot;</span> /&gt;&#10;	&lt;ww:textfield name=<span class="java&#45;quote">&quot;&#039;textfield&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A text field&#039;&quot;</span> /&gt;&#10;	&lt;ww:submit value=<span class="java&#45;quote">&quot;&#039;Send Form&#039;&quot;</span> /&gt;&#10;&lt;/ww:form&gt;&#10;&#10;&lt;/body&gt;&#10;&lt;/html&gt;</pre>
</div></div><p class="paragraph"><h3 class="heading3"><a name="TutorialLesson04-01-01-HTMLresultafterprocessingex01index.jsp%3A"> HTML result after processing ex01-index.jsp:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;html&gt; &#10;&lt;head&gt; &#10;&lt;title&gt;WebWork Tutorial &#45; Lesson 4.1.1 &#45; Example 1&lt;/title&gt;&#10;&lt;style type=<span class="java&#45;quote">&quot;text/css&quot;</span>&gt; &#10;  .errorMessage &#123; color: red; &#125; &#10;&lt;/style&gt;   &#10;&lt;/head&gt; &#10;&#10;&lt;body&gt; &#10;&#10;&lt;p&gt;UI Form Tags Example:&lt;/p&gt; &#10;&#10;&lt;table&gt; &#10;&lt;form &#10;action=<span class="java&#45;quote">&quot;formProcessing.action&quot;</span> method=<span class="java&#45;quote">&quot;post&quot;</span> &gt; &#10;&#10;   &#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td valign=<span class="java&#45;quote">&quot;top&quot;</span> colspan=<span class="java&#45;quote">&quot;2&quot;</span>&gt; &#10;&#10;&lt;table width=<span class="java&#45;quote">&quot;100&#37;&quot;</span> border=<span class="java&#45;quote">&quot;0&quot;</span> cellpadding=<span class="java&#45;quote">&quot;0&quot;</span> cellspacing=<span class="java&#45;quote">&quot;0&quot;</span>&gt; &#10;&lt;tr&gt;&lt;td valign=<span class="java&#45;quote">&quot;top&quot;</span>&gt; &#10;&lt;input type=<span class="java&#45;quote">&quot;checkbox&quot;</span> &#10;name=<span class="java&#45;quote">&quot;checkbox&quot;</span> &#10;value=<span class="java&#45;quote">&quot;checkbox&#95;value&quot;</span> &#10;/&gt; &#10;&lt;/td&gt; &#10;&lt;td width=<span class="java&#45;quote">&quot;100&#37;&quot;</span> valign=<span class="java&#45;quote">&quot;top&quot;</span>&gt; &#10;&lt;span class=<span class="java&#45;quote">&quot;checkboxLabel&quot;</span>&gt; &#10;A checkbox &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&lt;/table&gt; &#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;   &#10;&#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td align=<span class="java&#45;quote">&quot;right&quot;</span> valign=<span class="java&#45;quote">&quot;top&quot;</span>&gt; &#10;&#10;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt; &#10;&#10;A file field: &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&#10;&lt;td&gt; &#10;&#10;&lt;input type=<span class="java&#45;quote">&quot;file&quot;</span> &#10;name=<span class="java&#45;quote">&quot;file&quot;</span> &#10;/&gt; &#10;&#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;  &lt;input &#10;type=<span class="java&#45;quote">&quot;hidden&quot;</span> &#10;name=<span class="java&#45;quote">&quot;hidden&quot;</span> value=<span class="java&#45;quote">&quot;hidden&#95;value&quot;</span> /&gt; &#10;   &#10;&#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td align=<span class="java&#45;quote">&quot;right&quot;</span> valign=<span class="java&#45;quote">&quot;top&quot;</span>&gt; &#10;&#10;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt; &#10;&#10;A label: &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&#10;&lt;td&gt; &#10;&lt;label&gt; &lt;/label&gt; &#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;   &#10;&#10;&#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td align=<span class="java&#45;quote">&quot;right&quot;</span> valign=<span class="java&#45;quote">&quot;top&quot;</span>&gt; &#10;&#10;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt; &#10;&#10;A password field: &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&#10;&lt;td&gt; &#10;&#10;&lt;input type=<span class="java&#45;quote">&quot;password&quot;</span> &#10;name=<span class="java&#45;quote">&quot;password&quot;</span> &#10;&#10;&#10;/&gt; &#10;&#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;   &#10;&#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td align=<span class="java&#45;quote">&quot;right&quot;</span> valign=<span class="java&#45;quote">&quot;top&quot;</span>&gt; &#10;&#10;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt; &#10;&#10;Radio buttons: &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&#10;&lt;td&gt; &#10;&#10;&#10;&#10;&#10;&#10;&lt;input &#10;type=<span class="java&#45;quote">&quot;radio&quot;</span> &#10;name=<span class="java&#45;quote">&quot;radio&quot;</span> &#10;id=<span class="java&#45;quote">&quot;radioOne&quot;</span> &#10;value=<span class="java&#45;quote">&quot;One&quot;</span> /&gt; &#10;&lt;label <span class="java&#45;keyword">for</span>=<span class="java&#45;quote">&quot;radioOne&quot;</span>&gt;One&lt;/label&gt; &#10;&#10;&#10;&#10;&#10;&#10;&lt;input &#10;type=<span class="java&#45;quote">&quot;radio&quot;</span> &#10;name=<span class="java&#45;quote">&quot;radio&quot;</span> &#10;id=<span class="java&#45;quote">&quot;radioTwo&quot;</span> &#10;value=<span class="java&#45;quote">&quot;Two&quot;</span> /&gt; &#10;&lt;label <span class="java&#45;keyword">for</span>=<span class="java&#45;quote">&quot;radioTwo&quot;</span>&gt;Two&lt;/label&gt; &#10;&#10;&#10;&#10;&#10;&#10;&lt;input &#10;type=<span class="java&#45;quote">&quot;radio&quot;</span> &#10;name=<span class="java&#45;quote">&quot;radio&quot;</span> &#10;id=<span class="java&#45;quote">&quot;radioThree&quot;</span> &#10;value=<span class="java&#45;quote">&quot;Three&quot;</span> /&gt; &#10;&lt;label <span class="java&#45;keyword">for</span>=<span class="java&#45;quote">&quot;radioThree&quot;</span>&gt;Three&lt;/label&gt; &#10;&#10;&#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;   &#10;&#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td align=<span class="java&#45;quote">&quot;right&quot;</span> valign=<span class="java&#45;quote">&quot;top&quot;</span>&gt; &#10;&#10;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt; &#10;&#10;A select list: &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&#10;&lt;td&gt; &#10;&#10;&lt;select name=<span class="java&#45;quote">&quot;select&quot;</span> &#10;&gt; &#10;&#10;&#10;&lt;option value=<span class="java&#45;quote">&quot;&quot;&gt;&lt;/option&gt; &#10;&#10;&#10;&#10;&#10;&#10;&lt;option value=&quot;</span>One<span class="java&#45;quote">&quot; &#10;&gt;One&lt;/option&gt; &#10;&#10;&#10;&#10;&#10;&#10;&lt;option value=&quot;</span>Two<span class="java&#45;quote">&quot; &#10;&gt;Two&lt;/option&gt; &#10;&#10;&#10;&#10;&#10;&#10;&lt;option value=&quot;</span>Three<span class="java&#45;quote">&quot; &#10;&gt;Three&lt;/option&gt; &#10;&#10;&#10;&lt;/select&gt; &#10;&#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;   &#10;&#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td align=&quot;</span>right<span class="java&#45;quote">&quot; valign=&quot;</span>top<span class="java&#45;quote">&quot;&gt; &#10;&#10;&lt;span class=&quot;</span>label<span class="java&#45;quote">&quot;&gt; &#10;&#10;A text area: &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&#10;&lt;td&gt; &#10;&#10;&lt;textarea name=&quot;</span>textarea<span class="java&#45;quote">&quot; &#10;cols=&quot;</span>40<span class="java&#45;quote">&quot; &#10;rows=&quot;</span>3<span class="java&#45;quote">&quot; &#10;&gt;&lt;/textarea&gt; &#10;&#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;   &#10;&#10;&#10;&#10;&lt;tr&gt; &#10;&lt;td align=&quot;</span>right<span class="java&#45;quote">&quot; valign=&quot;</span>top<span class="java&#45;quote">&quot;&gt; &#10;&#10;&lt;span class=&quot;</span>label<span class="java&#45;quote">&quot;&gt; &#10;&#10;A text field: &#10;&lt;/span&gt; &#10;&lt;/td&gt; &#10;&#10;&lt;td&gt; &#10;&#10;&lt;input type=&quot;</span>text<span class="java&#45;quote">&quot; &#10;name=&quot;</span>textfield<span class="java&#45;quote">&quot; &#10;/&gt; &#10;&#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;  &lt;tr&gt; &#10;&lt;td colspan=&quot;</span>2<span class="java&#45;quote">&quot;&gt;&lt;div &#10;align=&quot;</span>right<span class="java&#45;quote">&quot; &gt;&lt;input &#10;type=&quot;</span>submit<span class="java&#45;quote">&quot; &#10;value=&quot;</span>Send Form&quot; /&gt;&lt;/div&gt; &#10;&lt;/td&gt; &#10;&lt;/tr&gt; &#10;&#10;&lt;/form&gt; &#10;&lt;/table&gt; &#10;&#10;&#10;&lt;/body&gt; &#10;&lt;/html&gt;</pre>
</div></div></p><h3 class="heading3"><a name="TutorialLesson04-01-01-xwork.xml%3A"> xwork.xml:</a></h3>
<div class="code"><div class="codeContent">
<pre><span class="xml&#45;tag">&lt;&#33;DOCTYPE xwork PUBLIC <span class="xml&#45;quote">&quot;&#45;//OpenSymphony Group//XWork 1.0//EN&quot;</span> &#10;<span class="xml&#45;quote">&quot;&#104;ttp://www.opensymphony.com/xwork/xwork&#45;1.0.dtd&quot;</span>&gt;</span>&#10;&#10;<span class="xml&#45;tag">&lt;xwork&gt;</span>&#10;	<span class="xml&#45;tag"><span class="xml&#45;comment">&lt;&#33;&#45;&#45; Include webwork defaults (from WebWork JAR). &#45;&#45;&gt;</span></span>&#10;	<span class="xml&#45;tag">&lt;include file=<span class="xml&#45;quote">&quot;webwork&#45;default.xml&quot;</span> /&gt;</span>&#10;	&#10;	<span class="xml&#45;tag"><span class="xml&#45;comment">&lt;&#33;&#45;&#45; Configuration for the default package. &#45;&#45;&gt;</span></span>&#10;	<span class="xml&#45;tag">&lt;package name=<span class="xml&#45;quote">&quot;default&quot;</span> extends=<span class="xml&#45;quote">&quot;webwork&#45;default&quot;</span>&gt;</span>&#10;		<span class="xml&#45;tag">&lt;action name=<span class="xml&#45;quote">&quot;formProcessing&quot;</span> class=<span class="xml&#45;quote">&quot;lesson04&#95;01&#95;01.FormProcessingAction&quot;</span>&gt;</span>&#10;			<span class="xml&#45;tag">&lt;result name=<span class="xml&#45;quote">&quot;input&quot;</span> type=<span class="xml&#45;quote">&quot;dispatcher&quot;</span>&gt;</span>ex01&#45;index.jsp<span class="xml&#45;tag">&lt;/result&gt;</span>&#10;			<span class="xml&#45;tag">&lt;result name=<span class="xml&#45;quote">&quot;success&quot;</span> type=<span class="xml&#45;quote">&quot;dispatcher&quot;</span>&gt;</span>ex01&#45;success.jsp<span class="xml&#45;tag">&lt;/result&gt;</span>&#10;			<span class="xml&#45;tag">&lt;interceptor&#45;ref name=<span class="xml&#45;quote">&quot;validationWorkflowStack&quot;</span> /&gt;</span>&#10;		<span class="xml&#45;tag">&lt;/action&gt;</span>&#10;	<span class="xml&#45;tag">&lt;/package&gt;</span>&#10;<span class="xml&#45;tag">&lt;/xwork&gt;</span></pre>
</div></div><p class="paragraph"><h3 class="heading3"><a name="TutorialLesson04-01-01-FormProcessingAction.java%3A"> FormProcessingAction.java:</a></h3>
<div class="code"><div class="codeContent">
<pre><span class="java&#45;keyword">package</span> lesson04&#95;01&#95;01;&#10;&#10;<span class="java&#45;keyword">import</span> com.opensymphony.xwork.ActionSupport;&#10;&#10;<span class="java&#45;keyword">public</span> class FormProcessingAction <span class="java&#45;keyword">extends</span> ActionSupport &#123;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> checkbox;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> file;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> hidden;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> password;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> radio;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> select;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> textarea;&#10;	<span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> textfield;&#10;	&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getCheckbox() &#123; <span class="java&#45;keyword">return</span> checkbox; &#125;&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getFile() &#123; <span class="java&#45;keyword">return</span> file; &#125;&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getHidden() &#123; <span class="java&#45;keyword">return</span> hidden; &#125;&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getPassword() &#123; <span class="java&#45;keyword">return</span> password; &#125;&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getRadio() &#123; <span class="java&#45;keyword">return</span> radio; &#125;&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getSelect() &#123; <span class="java&#45;keyword">return</span> select; &#125;&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getTextarea() &#123; <span class="java&#45;keyword">return</span> textarea; &#125;&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getTextfield() &#123; <span class="java&#45;keyword">return</span> textfield; &#125;&#10;	&#10;	<span class="java&#45;keyword">public</span> void setCheckbox(<span class="java&#45;object">String</span> checkbox) &#123; <span class="java&#45;keyword">this</span>.checkbox = checkbox; &#125;&#10;	<span class="java&#45;keyword">public</span> void setFile(<span class="java&#45;object">String</span> file) &#123; <span class="java&#45;keyword">this</span>.file = file; &#125;&#10;	<span class="java&#45;keyword">public</span> void setHidden(<span class="java&#45;object">String</span> hidden) &#123; <span class="java&#45;keyword">this</span>.hidden = hidden; &#125;&#10;	<span class="java&#45;keyword">public</span> void setPassword(<span class="java&#45;object">String</span> password) &#123; <span class="java&#45;keyword">this</span>.password = password; &#125;&#10;	<span class="java&#45;keyword">public</span> void setRadio(<span class="java&#45;object">String</span> radio) &#123; <span class="java&#45;keyword">this</span>.radio = radio; &#125;&#10;	<span class="java&#45;keyword">public</span> void setSelect(<span class="java&#45;object">String</span> select) &#123; <span class="java&#45;keyword">this</span>.select = select; &#125;&#10;	<span class="java&#45;keyword">public</span> void setTextarea(<span class="java&#45;object">String</span> textarea) &#123; <span class="java&#45;keyword">this</span>.textarea = textarea; &#125;&#10;	<span class="java&#45;keyword">public</span> void setTextfield(<span class="java&#45;object">String</span> textfield) &#123; <span class="java&#45;keyword">this</span>.textfield = textfield; &#125;&#10;	&#10;	<span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> execute() <span class="java&#45;keyword">throws</span> Exception &#123;&#10;		<span class="java&#45;keyword">return</span> SUCCESS;&#10;	&#125;&#10;&#125;</pre>
</div></div></p><h3 class="heading3"><a name="TutorialLesson04-01-01-FormProcessingActionvalidation.xml%3A"> FormProcessingAction-validation.xml:</a></h3>
<div class="code"><div class="codeContent">
<pre><span class="xml&#45;tag">&lt;&#33;DOCTYPE validators PUBLIC <span class="xml&#45;quote">&quot;&#45;//OpenSymphony Group//XWork Validator 1.0//EN&quot;</span>&#10;<span class="xml&#45;quote">&quot;&#104;ttp://www.opensymphony.com/xwork/xwork&#45;validator&#45;1.0.dtd&quot;</span>&gt;</span>&#10;&#10;<span class="xml&#45;tag">&lt;validators&gt;</span>&#10;  <span class="xml&#45;tag">&lt;field name=<span class="xml&#45;quote">&quot;checkbox&quot;</span>&gt;</span>&#10;    <span class="xml&#45;tag">&lt;field&#45;validator type=<span class="xml&#45;quote">&quot;requiredstring&quot;</span>&gt;</span>&#10;      <span class="xml&#45;tag">&lt;message&gt;</span>Please, check the checkbox.<span class="xml&#45;tag">&lt;/message&gt;</span>&#10;    <span class="xml&#45;tag">&lt;/field&#45;validator&gt;</span>&#10;  <span class="xml&#45;tag">&lt;/field&gt;</span>&#10;&#10;  <span class="xml&#45;tag">&lt;field name=<span class="xml&#45;quote">&quot;file&quot;</span>&gt;</span>&#10;    <span class="xml&#45;tag">&lt;field&#45;validator type=<span class="xml&#45;quote">&quot;requiredstring&quot;</span>&gt;</span>&#10;      <span class="xml&#45;tag">&lt;message&gt;</span>Please select a file.<span class="xml&#45;tag">&lt;/message&gt;</span>&#10;    <span class="xml&#45;tag">&lt;/field&#45;validator&gt;</span>&#10;  <span class="xml&#45;tag">&lt;/field&gt;</span>&#10;&#10;  <span class="xml&#45;tag">&lt;field name=<span class="xml&#45;quote">&quot;password&quot;</span>&gt;</span>&#10;    <span class="xml&#45;tag">&lt;field&#45;validator type=<span class="xml&#45;quote">&quot;requiredstring&quot;</span>&gt;</span>&#10;      <span class="xml&#45;tag">&lt;message&gt;</span>Please type something in the password field.<span class="xml&#45;tag">&lt;/message&gt;</span>&#10;    <span class="xml&#45;tag">&lt;/field&#45;validator&gt;</span>&#10;  <span class="xml&#45;tag">&lt;/field&gt;</span>&#10;&#10;  <span class="xml&#45;tag">&lt;field name=<span class="xml&#45;quote">&quot;radio&quot;</span>&gt;</span>&#10;    <span class="xml&#45;tag">&lt;field&#45;validator type=<span class="xml&#45;quote">&quot;requiredstring&quot;</span>&gt;</span>&#10;      <span class="xml&#45;tag">&lt;message&gt;</span>Please select a radio button.<span class="xml&#45;tag">&lt;/message&gt;</span>&#10;    <span class="xml&#45;tag">&lt;/field&#45;validator&gt;</span>&#10;  <span class="xml&#45;tag">&lt;/field&gt;</span>&#10;&#10;  <span class="xml&#45;tag">&lt;field name=<span class="xml&#45;quote">&quot;select&quot;</span>&gt;</span>&#10;    <span class="xml&#45;tag">&lt;field&#45;validator type=<span class="xml&#45;quote">&quot;requiredstring&quot;</span>&gt;</span>&#10;      <span class="xml&#45;tag">&lt;message&gt;</span>Please select an option from the list.<span class="xml&#45;tag">&lt;/message&gt;</span>&#10;    <span class="xml&#45;tag">&lt;/field&#45;validator&gt;</span>&#10;  <span class="xml&#45;tag">&lt;/field&gt;</span>&#10;&#10;  <span class="xml&#45;tag">&lt;field name=<span class="xml&#45;quote">&quot;textarea&quot;</span>&gt;</span>&#10;    <span class="xml&#45;tag">&lt;field&#45;validator type=<span class="xml&#45;quote">&quot;requiredstring&quot;</span>&gt;</span>&#10;      <span class="xml&#45;tag">&lt;message&gt;</span>Please type something in the text area.<span class="xml&#45;tag">&lt;/message&gt;</span>&#10;    <span class="xml&#45;tag">&lt;/field&#45;validator&gt;</span>&#10;  <span class="xml&#45;tag">&lt;/field&gt;</span>&#10;&#10;  <span class="xml&#45;tag">&lt;field name=<span class="xml&#45;quote">&quot;textfield&quot;</span>&gt;</span>&#10;    <span class="xml&#45;tag">&lt;field&#45;validator type=<span class="xml&#45;quote">&quot;requiredstring&quot;</span>&gt;</span>&#10;      <span class="xml&#45;tag">&lt;message&gt;</span>Please type something in the text field.<span class="xml&#45;tag">&lt;/message&gt;</span>&#10;    <span class="xml&#45;tag">&lt;/field&#45;validator&gt;</span>&#10;  <span class="xml&#45;tag">&lt;/field&gt;</span>&#10;<span class="xml&#45;tag">&lt;/validators&gt;</span></pre>
</div></div><p class="paragraph"><h3 class="heading3"><a name="TutorialLesson04-01-01-ex01success.jsp%3A"> ex01-success.jsp:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;&#37;&#64; taglib uri=<span class="java&#45;quote">&quot;webwork&quot;</span> prefix=<span class="java&#45;quote">&quot;ww&quot;</span> &#37;&gt;&#10;&lt;html&gt;&#10;&lt;head&gt;&#10;&lt;title&gt;WebWork Tutorial &#45; Lesson 4.1.1 &#45; Example 1&lt;/title&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;&#10;&lt;p&gt;UI Form Tags Example result:&lt;/p&gt;&#10;&#10;&lt;ul&gt;&#10;  &lt;li&gt;checkbox: &lt;ww:property value=<span class="java&#45;quote">&quot;checkbox&quot;</span> /&gt;&lt;/li&gt;&#10;  &lt;li&gt;&#102;ile: &lt;ww:property value=<span class="java&#45;quote">&quot;file&quot;</span> /&gt;&lt;/li&gt;&#10;  &lt;li&gt;hidden: &lt;ww:property value=<span class="java&#45;quote">&quot;hidden&quot;</span> /&gt;&lt;/li&gt;&#10;  &lt;li&gt;password: &lt;ww:property value=<span class="java&#45;quote">&quot;password&quot;</span> /&gt;&lt;/li&gt;&#10;  &lt;li&gt;radio: &lt;ww:property value=<span class="java&#45;quote">&quot;radio&quot;</span> /&gt;&lt;/li&gt;&#10;  &lt;li&gt;select: &lt;ww:property value=<span class="java&#45;quote">&quot;select&quot;</span> /&gt;&lt;/li&gt;&#10;  &lt;li&gt;textarea: &lt;ww:property value=<span class="java&#45;quote">&quot;textarea&quot;</span> /&gt;&lt;/li&gt;&#10;  &lt;li&gt;textfield: &lt;ww:property value=<span class="java&#45;quote">&quot;textfield&quot;</span> /&gt;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&#10;&lt;/body&gt;&#10;&lt;/html&gt;</pre>
</div></div></p>Notice how much cleaner <tt class="monospaced">ex01-index.jsp</tt> is, compared to its HTML result. The default layout of the form components is a table layout, with the label on the left column and the field to the right. You can learn how to create your own layouts when we explain the template system, below.<p class="paragraph">Another thing to notice is the reference to the <tt class="monospaced">validationWorkflowStack</tt> in the action&#039;s configuration. This makes WebWork validate the parameters that are sent to our actions according to a configuration file we place in the same location as the action class &#8211; in our case, <tt class="monospaced">FormProcessingAction-validation.xml</tt> (see <a href="Validation.html" title="Validation">Validation</a>). In case something is not valid, it prevents the action from executing and dispatches the request to the input result with error messages attached to each field (using the method <tt class="monospaced">addFieldError(String fieldName, String errorMessage)</tt>).</p>But don&#039;t worry about how the validation framework works for now. Run the example and try leaving some fields blank. You will see that the UI tags provide error messages that integrate with the validation framework and that&#039;s what we want do demonstrate here. This separation of concerns can help programmers and designers concentrate more on their part of the work.<br/>

<blockquote class="blockquote"> Read more: <a href="UI Tags.html" title="UI Tags">UI Tags</a></blockquote><br/>

<blockquote class="blockquote"> <a href="TutorialExamples.html" title="TutorialExamples">Try the example!</a></blockquote>
<p class="paragraph"><h2 class="heading2"><a name="TutorialLesson04-01-01-OtherUIControls%3A"> Other UI Controls:</a></h2></p>Besides the standard form controls that HTML designers are already familiar with, WebWork provides some other controls and also the ability to create a custom control. Let&#039;s take a look at the custom controls that are already provided by WebWork: <br/>

<table class="wikitable">
<tr>
<td><b class="strong"><tt class="monospaced">&lt;ww:checkboxlist /&gt;</tt></b></td><td>Works just like the <tt class="monospaced">&lt;ww:radio /&gt;</tt> tag, but with check boxes instead of radio buttons. It gets the keys and values from a collection and creates a list of checkboxes, all with the same name.</td>
</tr><tr>
<td><b class="strong"><tt class="monospaced">&lt;ww:combobox /&gt;</tt></b></td><td>Simulates a combo box, which is a control that mixes a selection list with a text field. It does this by placing a text field with a <tt class="monospaced">&lt;select /&gt;</tt> list right below it and a JavaScript code that fills the text field with the selection of the list every time it changes.</td>
</tr><tr>
<td><b class="strong"><tt class="monospaced">&lt;ww:tabbedpane /&gt;</tt></b></td><td><em class="emphasis">Help needed here.</em></td>
</tr><tr>
<td><b class="strong"><tt class="monospaced">&lt;ww:token /&gt;</tt></b></td><td><em class="emphasis">Help needed here.</em></td>
</tr>
</table><br/>
<blockquote class="blockquote"> Read more: <a href="UI Tags.html" title="UI Tags">UI Tags</a></blockquote>
<p class="paragraph"><h2 class="heading2"><a name="TutorialLesson04-01-01-TheTemplateSystem%3A"> The Template System:</a></h2></p>WebWork uses the Velocity template system to render the actual HTML output for all UI tags. A default implementation of all templates has been included with the core distribution allowing users to use WebWork&#039;s UI tags &quot;out of the box&quot;. Templates can be edited individually or replaced entirely allowing for complete customization of the resulting HTML output. In addition, the default template can be overridden on a per tag basis allowing for a very fine level of control. The default templates are located in the <tt class="monospaced">webwork-2.1.1.jar</tt> file under <tt class="monospaced">/template/xhtml</tt>.<p class="paragraph">If you unpack <tt class="monospaced">webwork-2.1.1.jar</tt> and look under the <tt class="monospaced">/template/xhtml</tt> directory you will see a bunch of velocity templates. Most of them correspond to a specific UI Tag, and those have the name of the tag they render. If you&#039;re familiar with Velocity, I recommend you analyse the template files to see what you&#039;re capable of doing with them. Since version 2.1, there&#039;s also a <tt class="monospaced">/template/simple</tt> directory, which is a simpler version of the HTML form controls (just the control, no table or label).</p>If you want do display your UI components in a different layout than the one that comes with WebWork, you can:<br/>

<ul class="star">
<li> Edit and replace the files in <tt class="monospaced">/template/xhtml</tt> (repack the JAR or create the same directory structure somewhere else and make sure your container looks that path before the JAR);</li>
</ul>
<ul class="star">
<li> Change the location of the templates by editing the <tt class="monospaced">webwork.ui.theme</tt> property in <tt class="monospaced">webwork.properties</tt> (file that should be placed in the root of your classpath);</li>
</ul>
<ul class="star">
<li> Specifying the location of the templates for each tag individually using the theme or the template property. The former allows you to specify the directory where all templates are (thus, WebWork looks for templates with the same name as the ones in <tt class="monospaced">/template/xhtml</tt>), while the latter allows you to indicate the exact template to be used for that component.</li>
</ul><br/>
<blockquote class="blockquote"> Read more: <a href="Templates.html" title="Templates">Templates</a>, <a href="Themes.html" title="Themes">Themes</a></blockquote><p class="paragraph">The third approach is demonstrated in the example below. Note that, by default, the specified theme directory should be under <tt class="monospaced">/template</tt> and the specified template file should be under <tt class="monospaced">/template/xhtml</tt>.</p><h3 class="heading3"><a name="TutorialLesson04-01-01-ex02.jsp%3A"> ex02.jsp:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;&#37;&#64; taglib uri=<span class="java&#45;quote">&quot;webwork&quot;</span> prefix=<span class="java&#45;quote">&quot;ww&quot;</span> &#37;&gt; &#10;&lt;html&gt; &#10;&lt;head&gt; &#10;&lt;title&gt;WebWork Tutorial &#45; Lesson 4.1.1 &#45; Example 2&lt;/title&gt; &#10;&lt;/head&gt; &#10;&#10;&lt;body&gt; &#10;&#10;&lt;p&gt;Template Change Example:&lt;/p&gt; &#10;&#10;&lt;p&gt;&lt;ww:checkbox name=<span class="java&#45;quote">&quot;&#039;checkbox&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A checkbox&#039;&quot;</span> fieldValue=<span class="java&#45;quote">&quot;&#039;checkbox&#95;value&#039;&quot;</span> theme=<span class="java&#45;quote">&quot;&#039;mytheme&#039;&quot;</span> /&gt;&lt;/p&gt; &#10;&#10;&lt;p&gt;&lt;ww:textfield name=<span class="java&#45;quote">&quot;&#039;textfield&#039;&quot;</span> label=<span class="java&#45;quote">&quot;&#039;A text field&#039;&quot;</span> template=<span class="java&#45;quote">&quot;mytextfield.vm&quot;</span> /&gt;&lt;/p&gt; &#10;&#10;&lt;/body&gt; &#10;&lt;/html&gt;</pre>
</div></div><p class="paragraph"><h3 class="heading3"><a name="TutorialLesson04-01-01-%2Ftemplate%2Fmytheme%2Fcheckbox.vm%3A"> /template/mytheme/checkbox.vm:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;div align=<span class="java&#45;quote">&quot;center&quot;</span>&gt; &#10;	&lt;input type=<span class="java&#45;quote">&quot;checkbox&quot;</span> &#10;		name=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.name)&quot;</span> &#10;		value=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.fieldValue)&quot;</span> &#10;	#<span class="java&#45;keyword">if</span> ($parameters.nameValue) checked=<span class="java&#45;quote">&quot;checked&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.disabled == <span class="java&#45;keyword">true</span>) disabled=<span class="java&#45;quote">&quot;disabled&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.tabindex) tabindex=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.tabindex)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.onchange) onchange=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.onchange)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.id) id=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.id)&quot;</span> #end &#10;	/&gt;&lt;br /&gt; &#10;	$&#33;webwork.htmlEncode($parameters.label) &#10;&lt;/div&gt;</pre>
</div></div></p><h3 class="heading3"><a name="TutorialLesson04-01-01-%2Ftemplate%2Fxhtml%2Fmytextfield.vm%3A"> /template/xhtml/mytextfield.vm:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;div align=<span class="java&#45;quote">&quot;center&quot;</span>&gt; &#10;	&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> &#10;		name=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.name)&quot;</span> &#10;	#<span class="java&#45;keyword">if</span> ($parameters.size) size=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.size)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.maxlength) maxlength=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.maxlength)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.nameValue) value=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.nameValue)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.disabled == <span class="java&#45;keyword">true</span>) disabled=<span class="java&#45;quote">&quot;disabled&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.readonly) readonly=<span class="java&#45;quote">&quot;readonly&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.onkeyup) onkeyup=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.onkeyup)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.tabindex) tabindex=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.tabindex)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.onchange) onchange=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.onchange)&quot;</span> #end &#10;	#<span class="java&#45;keyword">if</span> ($parameters.id) id=<span class="java&#45;quote">&quot;$&#33;webwork.htmlEncode($parameters.id)&quot;</span> #end &#10;	/&gt;&lt;br /&gt; &#10;	$&#33;webwork.htmlEncode($parameters.label) &#10;&lt;/div&gt;</pre>
</div></div><p class="paragraph"><h3 class="heading3"><a name="TutorialLesson04-01-01-HTMLresultafterprocessingex02.jsp%3A"> HTML result after processing ex02.jsp:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;html&gt; &#10;&lt;head&gt; &#10;&lt;title&gt;WebWork Tutorial &#45; Lesson 4.1.1 &#45; Example 2&lt;/title&gt; &#10;&lt;/head&gt; &#10;&#10;&lt;body&gt; &#10;&#10;&lt;p&gt;Template Change Example:&lt;/p&gt; &#10;&#10;&lt;p&gt;&lt;div align=<span class="java&#45;quote">&quot;center&quot;</span>&gt; &#10;  &lt;input type=<span class="java&#45;quote">&quot;checkbox&quot;</span> &#10;         name=<span class="java&#45;quote">&quot;checkbox&quot;</span> &#10;         value=<span class="java&#45;quote">&quot;checkbox&#95;value&quot;</span> &#10;            /&gt;&lt;br /&gt; &#10;  A checkbox &#10;&lt;/div&gt;&lt;/p&gt; &#10;&#10;&lt;p&gt;&lt;div align=<span class="java&#45;quote">&quot;center&quot;</span>&gt; &#10;  &lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> &#10;                                     name=<span class="java&#45;quote">&quot;textfield&quot;</span> &#10;                    /&gt;&lt;br /&gt; &#10;  A text field &#10;&lt;/div&gt;&lt;/p&gt; &#10;&#10;&lt;/body&gt; &#10;&lt;/html&gt;</pre>
</div></div></p><blockquote class="blockquote"> <a href="TutorialExamples.html" title="TutorialExamples">Try the example!</a></blockquote>
<p class="paragraph"><h2 class="heading2"><a name="TutorialLesson04-01-01-BuildingCustomizedUIComponents%3A"> Building Customized UI Components:</a></h2></p>There are some situations in which none of the UI Components that come bundled with WebWork fit your requirements. In this case, the recommended approach would be to create your own custom component. In this way, you keep your web page clean of layout and error-checking issues and also promote component reuse.<p class="paragraph">To create a custom component, just create a Velocity template for it, just like the ones that already exist. To place it in a web page, use the <tt class="monospaced">&lt;ww:component /&gt;</tt> tag and specify the location of the template in its <tt class="monospaced">template</tt> parameter.</p>To pass parameters to be used by your template, use the <tt class="monospaced">&lt;ww:param /&gt;</tt> tag (see <a href="TutorialLesson04-01.html" title="TutorialLesson04-01">lesson 4.1</a>). The example below demonstrates the creation of a custom date field.<br/>

<blockquote class="blockquote"> Read more: <a href="UI Tags.html" title="UI Tags">UI Tags</a></blockquote>
<p class="paragraph"><h3 class="heading3"><a name="TutorialLesson04-01-01-ex03.jsp%3A"> ex03.jsp:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;&#37;&#64; taglib uri=<span class="java&#45;quote">&quot;webwork&quot;</span> prefix=<span class="java&#45;quote">&quot;ww&quot;</span> &#37;&gt; &#10;&lt;html&gt; &#10;&lt;head&gt; &#10;&lt;title&gt;WebWork Tutorial &#45; Lesson 4.1.1 &#45; Example 3&lt;/title&gt; &#10;&lt;/head&gt; &#10;&#10;&lt;body&gt; &#10;&lt;p&gt;Custom Component Example:&lt;/p&gt; &#10;&#10;&lt;p&gt; &#10;&lt;ww:component template=<span class="java&#45;quote">&quot;datefield.vm&quot;</span>&gt; &#10;	&lt;ww:param name=<span class="java&#45;quote">&quot;&#039;label&#039;&quot;</span> value=<span class="java&#45;quote">&quot;&#039;Date&#039;&quot;</span> /&gt; &#10;	&lt;ww:param name=<span class="java&#45;quote">&quot;&#039;name&#039;&quot;</span> value=<span class="java&#45;quote">&quot;&#039;mydatefield&#039;&quot;</span> /&gt; &#10;	&lt;ww:param name=<span class="java&#45;quote">&quot;&#039;size&#039;&quot;</span> value=<span class="java&#45;quote">&quot;3&quot;</span> /&gt; &#10;&lt;/ww:component&gt; &#10;&lt;/p&gt; &#10;&#10;&lt;/body&gt; &#10;&lt;/html&gt;</pre>
</div></div></p><h3 class="heading3"><a name="TutorialLesson04-01-01-%2Ftemplate%2Fxhtml%2Fdatefield.vm%3A"> /template/xhtml/datefield.vm:</a></h3>
<div class="code"><div class="codeContent">
<pre>#set ($name = $parameters.get(&#039;name&#039;)) &#10;#set ($size = $parameters.get(&#039;size&#039;)) &#10;#set ($yearSize = $size &#42; 2) &#10;&#10;$parameters.get(&#039;label&#039;): &#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;$&#123;name&#125;.day&quot;</span> size=<span class="java&#45;quote">&quot;$size&quot;</span> /&gt; / &#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;$&#123;name&#125;.month&quot;</span> size=<span class="java&#45;quote">&quot;$size&quot;</span> /&gt; / &#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;$&#123;name&#125;.year&quot;</span> size=<span class="java&#45;quote">&quot;$yearSize&quot;</span> /&gt; (dd/mm/yyyy)</pre>
</div></div><p class="paragraph"><h3 class="heading3"><a name="TutorialLesson04-01-01-HTMLresultafterprocessingex03.jsp%3A"> HTML result after processing ex03.jsp:</a></h3>
<div class="code"><div class="codeContent">
<pre>&lt;html&gt; &#10;&lt;head&gt; &#10;&lt;title&gt;WebWork Tutorial &#45; Lesson 4.1.1 &#45; Example 3&lt;/title&gt; &#10;&lt;/head&gt; &#10;&lt;body&gt; &#10;&lt;p&gt;Custom Component Example:&lt;/p&gt; &#10;&#10;&lt;p&gt; &#10;Date: &#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;mydatefield.day&quot;</span> size=<span class="java&#45;quote">&quot;3&quot;</span> /&gt; / &#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;mydatefield.month&quot;</span> size=<span class="java&#45;quote">&quot;3&quot;</span> /&gt; / &#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;mydatefield.year&quot;</span> size=<span class="java&#45;quote">&quot;6&quot;</span> /&gt; (dd/mm/yyyy) &#10;&lt;/p&gt; &#10;&#10;&lt;/body&gt; &#10;&lt;/html&gt;</pre>
</div></div></p><blockquote class="blockquote"> <a href="TutorialExamples.html" title="TutorialExamples">Try the example!</a></blockquote><p class="paragraph"><hr class="line"/></p><a href="TutorialLesson04-01.html" title="TutorialLesson04-01">Previous Lesson</a> | <a href="TutorialLesson04-02.html" title="TutorialLesson04-02">Next Lesson</a><br/>



				    
                    			    </td>
		    </tr>
	    </table>
	    <table border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td height="12" background="border/border_bottom.gif"><img src="border/spacer.gif" width="1" height="1" border="0"/></td>
			</tr>
		    <tr>
			    <td align="center"><font color="grey">Document generated by Confluence on Oct 18, 2004 00:08</font></td>
		    </tr>
	    </table>
    </body>
</html>