Source

webwork / docs / wikidocs / Templates.html

<html>
    <head>
        <title>WebWork 2 : Templates</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 : Templates
                                                    </span>
				    </div>
				    <div class="pagesubheading">
					    This page last changed on Sep 10, 2004 by <font color="#0050B2">casey</font>.
				    </div>

				    <p class="paragraph"><h3 style="margin: 4px 0px 4px 0px;" class="heading3"><a name="Templates-Overview"> Overview</a></h3></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. Templates can be grouped together and seperated into different <a href="themes.html" title="Themes">themes</a>.  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.
<h4 class="heading4"><a name="Templates-Templates"> Templates</a></h4><p class="paragraph">WebWork uses the Velocity template system to render the actual HTML output for all UI tags (jsp and velocity). 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.</p>The templates can be found in the distribution package in a directory called <tt class="monospaced">template</tt> under the <tt class="monospaced">src/java</tt> directory or in the webwork-x.x.jar file.  For template customization, copy the <tt class="monospaced">template</tt> directory into the root directory of your application or place it in the classpath.  Webwork will attempt to load the templates from those two places first. Otherwise, the templates will be loaded from the webwork jar file.
<div class="code"><div class="codeContent">
<pre>/myApp&#10;      /META&#45;INF&#10;      /WEB&#45;INF&#10;      /template</pre>
</div></div><p class="paragraph">Inside the <tt class="monospaced">template</tt> directory, you will find two template sets called <a href="Themes.html" title="Themes">Themes</a> (xhtml and simple).  The default template set that is used with UI tags is <a href="Themes.html#Themes-xhtml" title="xhtml on Themes">xhtml</a> unless specified by the theme attribute in your UI tag or in the <a href="webwork.properties.html" title="webwork.properties">webwork.properties</a> file with the webwork.ui.theme variable.  You can modify the pre-existing templates or create your own.</p>The AbstractUI class is the base class that other UI tags extend. It provides a set of attributes that are common across UI components. The AbstractUI class defines an abstract method:<br/>

<div class="code"><div class="codeContent">
<pre><span class="java&#45;keyword">protected</span>&#160;<span class="java&#45;keyword">abstract</span>&#160;<span class="java&#45;object">String</span> getTemplateName();</pre>
</div></div><p class="paragraph">The AbstractUI class will load the template specified by the subclass or optionally, a template specified by the user using the template attribute.  The following will load myOwnTextTemplate.vm for the textfield UI tag instead of the built in template text.vm</p><ins class="inserted">NOTE:</ins> You have to create a template file called myOwnTextTemplate.vm and store it in xhtml for this to work.
<div class="code"><div class="codeContent">
<pre>&lt;&#33;&#45;&#45; loads /template/xhtml/myOwnTextTemplate.vm &#45;&#45;&gt;&#10;&#10;&lt;ww:ui textfield label=&#148;&#146;mylabel&#146;&#148; name=&#148;&#146;myname&#146;&#148; template=&#148;&#146;myOwnTextTemplate.vm&#146;&#148; /&gt;</pre>
</div></div><br/>
otherwise
<div class="code"><div class="codeContent">
<pre>&lt;&#33;&#45;&#45; loads <span class="java&#45;keyword">default</span> /template/xhtml/text.vm &#45;&#45;&gt;&#10;&lt;ww:ui textfield label=&#148;&#146;mylabel&#146;&#148; name=&#148;&#146;myname&#146;&#148; /&gt;</pre>
</div></div><p class="paragraph"><h4 class="heading4"><a name="Templates-Builtintemplates%3Caname%3D%22TemplatesdefaultTemplates%22%3E%3C%2Fa%3E"> Built in templates <a name="Templates-defaultTemplates"></a></a></h4></p>The default templates that correspond to each UI tag are as follows:
<table class="wikitable">
<tr>
<th> UI tag  </th><th> default template </th>
</tr><tr>
<td> checkboxList </td><td> checkboxlist.vm </td>
</tr><tr>
<td> checkbox </td><td> checbox.vm </td>
</tr><tr>
<td> combobox </td><td> combobox.vm </td>
</tr><tr>
<td> component </td><td> empty.vm </td>
</tr><tr>
<td> doubleSelect </td><td> doubleselect.vm </td>
</tr><tr>
<td> file </td><td> file.vm </td>
</tr><tr>
<td> form </td><td>	form.vm(to open) <br clear="all" />
form-close.vm(to close) </td>
</tr><tr>
<td> hidden </td><td> hidden.vm </td>
</tr><tr>
<td> label </td><td> label.vm </td>
</tr><tr>
<td> password </td><td> password.vm </td>
</tr><tr>
<td> radio </td><td> radiomap.vm </td>
</tr><tr>
<td> select </td><td> select.vm </td>
</tr><tr>
<td> submit </td><td> submit.vm </td>
</tr><tr>
<td> tabbedpane </td><td> tabbedpane.vm </td>
</tr><tr>
<td> textarea </td><td> textarea.vm </td>
</tr><tr>
<td> textfield </td><td> text.vm </td>
</tr><tr>
<td> token </td><td> token.vm </td>
</tr>
</table>
<h4 class="heading4"><a name="Templates-Accessingvariables"> Accessing variables</a></h4><p class="paragraph">A VelocityContext object is created and used by all WW velocity views with the following context parameters:</p><ul class="star">
<li> tag - a reference to the tag object</li>
<li> stack - the current OgnlValueStack</li>
<li> ognl - a reference to the utility class OgnlTool</li>
<li> req - a reference to the HttpServletRequest object</li>
<li> res - a reference to the HttpServletResponse</li>
<li> webwork - instance of WebWorkUtil</li>
<li> action - the current Webwork action</li>
<li> parameters - map of the current parameters</li>
</ul><br/>
These variables can be accessed in the template by using $TAG_NAME where TAG_NAME is one of tag, stack, ognl, req, ...). The template file is then processed.  A few examples:<br/>
<ins class="inserted">NOTE:</ins> The bang (&#33;) will print the value if its defined and &quot;&quot; if its not
<div class="code"><div class="codeContent">
<pre>$&#33;req.requestURI&#10;$&#33;req.method</pre>
</div></div><br/>

<div class="code"><div class="codeContent">
<pre>$&#33;tag.templateDir&#10;$&#33;tag.theme</pre>
</div></div><br/>

<div class="code"><div class="codeContent">
<pre>$&#33;parameters.name&#10;$&#33;parameters</pre>
</div></div><p class="paragraph"><h4 class="heading4"><a name="Templates-UnderstandingtheWebworkTemplateSystem%3Caname%3D%22Templateswebworktemplatesystem%22%3E%3C%2Fa%3E"> Understanding the Webwork Template System <a name="Templates-webworktemplatesystem"></a></a></h4></p>Look at how the template is found and loaded.  A peek into AbstractUITag shows us the string used to build the template:
<div class="code"><div class="codeContent">
<pre><span class="java&#45;keyword">protected</span>&#160;<span class="java&#45;object">String</span> buildTemplateName(<span class="java&#45;object">String</span> myTemplate, <span class="java&#45;object">String</span> myDefaultTemplate) &#123;&#10;        ...&#10;        <span class="java&#45;keyword">return</span>&#160;<span class="java&#45;quote">&quot;/&quot;</span> &#43; getTemplateDir() &#43; <span class="java&#45;quote">&quot;/&quot;</span> &#43; getTheme() &#43; <span class="java&#45;quote">&quot;/&quot;</span> &#43; template;&#10;&#125;</pre>
</div></div><br/>
With the defaults, this will return the string for the textfield UI tag
<div class="code"><div class="codeContent">
<pre>/template/xhtml/text.vm</pre>
</div></div><br/>
Webwork will attempt to find these values before it uses the default ones.  You don&#039;t have to override any values and can modify the built in templates if you so desire(your choice).  Webwork searches for these values in the order they are listed:
<ul class="star">
<li> getTemplateDir()<ul class="star">
<li> webwork.ui.templateDir value in webwork.properties</li>
<li> otherwise, &quot;template&quot; is returned</li>
</ul></li>
<li> getTheme()<ul class="star">
<li> in UI tag theme attribute</li>
<li> webwork.ui.theme value in webwork.properties</li>
<li> otherwise, &quot;xhtml&quot; is returned</li>
</ul></li>
<li> template<ul class="star">
<li> in UI tag template attribute</li>
<li> otherwise, defaults to specified template(see <a href="#Templates-defaultTemplates" title="defaultTemplates on Templates">defaults</a>)</li>
</ul></li>
</ul><p class="paragraph"><h4 class="heading4"><a name="Templates-TemplateswithCSS"> Templates with CSS</a></h4></p>The default templates define several properties for use with CSS when HTML is generated from webwork tags.   These properties can be found in a stylesheet located in the /template/xhtml directory called <tt class="monospaced">styles.css</tt>.  You can use this stylesheet as a skeleton for your application and build on it or create your own, but remember you must include a link to the stylesheet within your jsp or velocity page.<br/>
styles.css:
<div class="code"><div class="codeContent">
<pre>.label &#123;font&#45;style:italic; &#125;&#10;.errorLabel &#123;font&#45;style:italic; color:red; &#125;&#10;.errorMessage &#123;font&#45;weight:bold; text&#45;align: center; color:red; &#125;&#10;.checkboxLabel &#123;&#125;&#10;.checkboxErrorLabel &#123;color:red; &#125;&#10;.required &#123;color:red;&#125;&#10;.requiredLabel &#123;font&#45;weight:bold; font&#45;style:italic; &#125;</pre>
</div></div><br/>
referencing the stylesheet with a link inside your webpage (relative path or you can specify it from the root of your container):
<div class="code"><div class="codeContent">
<pre>&lt;link rel =<span class="java&#45;quote">&quot;stylesheet&quot;</span> type=<span class="java&#45;quote">&quot;text/css&quot;</span> href=<span class="java&#45;quote">&quot;/webwork&#45;example/template/xhtml/styles.css&quot;</span> title=<span class="java&#45;quote">&quot;Style&quot;</span>&gt;</pre>
</div></div><p class="paragraph"><ins class="inserted">Note:</ins> Webwork now has new attributes in the UI tags for more generic support of HTML styles and classes to make the look and feel even more flexible to implement.  These are defined respectively as cssStyle and cssClass.
<div class="code"><div class="codeContent">
<pre>&lt;ui:textfield label=<span class="java&#45;quote">&quot;&#039;lebal&#039;&quot;</span> name=<span class="java&#45;quote">&quot;&#039;nmae&#039;&quot;</span> cssStyle=<span class="java&#45;quote">&quot;&#039;<span class="java&#45;object">float</span>:left; color:red&#039;&quot;</span> cssClass=<span class="java&#45;quote">&quot;&#039;myclass&#039;&quot;</span>   /&gt;</pre>
</div></div></p><h4 class="heading4"><a name="Templates-CreatingCustomComponents"> Creating Custom Components</a></h4><p class="paragraph">At first glance the component tag doesn&#039;t look that impressive. The ability to specify a single template and use a number of predetermined attributes looks rather lacking. But the supplied tag offers a number of benefits to developers.</p>Before diving right into the custom component, first I will identify some advantages to using the component tag to create your components. Then I will detail the two types of error messages in WebWork 2 and how our custom component (for displaying one of these types) fits into the equation. Finally, I will present a sample Action class, Jsp file and template file for our component. When we are finished, you will be able to incorporate the new component into your application.<p class="paragraph">Why use the component tag?
<ul class="star">
<li> removes the need to develop your own Jsp tag library</li>
<li> provides integrated support for accessing the ValueStack</li>
<li> leverages XWork&#039;s support for internationalization, localization and error handling</li>
<li> faster prototyping using templates (editable text files) instead of compiled code</li>
<li> re-use and combine existing templates</li>
</ul><br/>
More on error message support:</p>In WebWork 2, there are two types of error messages: field error messages and action error messages. Field error messages are used to indicate a problem with a specific control and are displayed inline with the control. A number of tags provide built-in support for displaying these types of messages. Action error messages on the other hand, indicate a problem with executing an action. Many things can go wrong in a web application, especially an application that relies on external resources such as a database, remote web service, or other resource that might not be accessible during the execution of an action. Handling an error gracefully and presenting the user with a useful message can often be the difference in a positive user/customer experience and a bad one. <p class="paragraph">When these types of errors occur, it is more appropriate to display these messages separate from individual controls on the form. In the example below, we will create a custom component that can be used to display action error messages in a bulletted list. This component can then be used on all your forms to display these error messages.</p>The action class below was created to handle a promotion on the website: a free e-certificate. It will try to email the certificate, but an exception will be thrown.<p class="paragraph">Action class:</p><div class="code"><div class="codeContent">
<pre><span class="java&#45;keyword">package</span> example;&#10;&#10;<span class="java&#45;keyword">import</span> com.opensymphony.xwork.ActionSupport;&#10;&#10;<span class="java&#45;keyword">public</span> class AddUser <span class="java&#45;keyword">extends</span> ActionSupport &#123;&#10;&#10;    <span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> fullname;&#10;    <span class="java&#45;keyword">private</span>&#160;<span class="java&#45;object">String</span> email;&#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;comment">// we are ignoring field validation in <span class="java&#45;keyword">this</span> example</span>&#10;&#10;        <span class="java&#45;keyword">try</span> &#123;&#10;            MailUtil.sendCertificate(email, fullname);&#10;        &#125; <span class="java&#45;keyword">catch</span> (Exception ex) &#123;&#10;            <span class="java&#45;comment">// there was a problem sending the email</span>&#10;            <span class="java&#45;comment">// in a real application, we would also</span>&#10;            <span class="java&#45;comment">// log the exception</span>&#10;            addActionError(<span class="java&#45;quote">&quot;We are experiencing a technical problem and have contacted our support staff. &quot;</span> &#43;&#10;                           <span class="java&#45;quote">&quot;Please <span class="java&#45;keyword">try</span> again later.&quot;</span>);&#10;        &#125;&#10;&#10;        <span class="java&#45;keyword">if</span> (hasErrors()) &#123;&#10;            <span class="java&#45;keyword">return</span> ERROR;&#10;        &#125; <span class="java&#45;keyword">else</span> &#123;&#10;            <span class="java&#45;keyword">return</span> SUCCESS;&#10;        &#125;&#10;    &#125;&#10;&#10;    <span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getFullname() &#123;&#10;        <span class="java&#45;keyword">return</span> fullname;&#10;    &#125;&#10;&#10;    <span class="java&#45;keyword">public</span> void setFullname(<span class="java&#45;object">String</span> fullname) &#123;&#10;        <span class="java&#45;keyword">this</span>.fullname = fullname;&#10;    &#125;&#10;&#10;    <span class="java&#45;keyword">public</span>&#160;<span class="java&#45;object">String</span> getEmail() &#123;&#10;        <span class="java&#45;keyword">return</span> email;&#10;    &#125;&#10;&#10;    <span class="java&#45;keyword">public</span> void setEmail(<span class="java&#45;object">String</span> email) &#123;&#10;        <span class="java&#45;keyword">this</span>.email = email;&#10;    &#125;&#10;&#10;&#125;</pre>
</div></div><p class="paragraph">Jsp page:</p><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;ui&quot;</span> &#37;&gt;&#10;&#10;&lt;html&gt;&#10;&lt;head&gt;&lt;title&gt;custom component example&lt;/title&gt;&lt;/head&gt;&#10;&#10;&lt;&#33;&#45;&#45; don&#039;t forget <span class="java&#45;keyword">this</span> &#45;&#45;&gt;&#10;&lt;link rel =<span class="java&#45;quote">&quot;stylesheet&quot;</span> type=<span class="java&#45;quote">&quot;text/css&quot;</span> href=<span class="java&#45;quote">&quot;/webwork&#45;example/template/xhtml/styles.css&quot;</span> title=<span class="java&#45;quote">&quot;Style&quot;</span>&gt;&#10;&#10;&lt;body&gt;&#10;&#10;&lt;ui:form action=<span class="java&#45;quote">&quot;AddUser.action&quot;</span> method=<span class="java&#45;quote">&quot;POST&quot;</span>&gt;&#10;&lt;table&gt;&#10;    &lt;ui:component template=<span class="java&#45;quote">&quot;action&#45;errors.vm&quot;</span> /&gt;&#10;    &lt;ui:textfield label=<span class="java&#45;quote">&quot;Full Name&quot;</span> name=<span class="java&#45;quote">&quot;fullname&quot;</span> /&gt;&#10;    &lt;ui:textfield label=<span class="java&#45;quote">&quot;Email&quot;</span> name=<span class="java&#45;quote">&quot;email&quot;</span> /&gt;&#10;    &lt;ui:submit name=<span class="java&#45;quote">&quot;submit&quot;</span> value=<span class="java&#45;quote">&quot;Send me a free E&#45;Certificate&#33;&quot;</span> /&gt;&#10;&lt;/table&gt;&#10;&lt;/ui:form&gt;&#10;&#10;&lt;/body&gt;&#10;&lt;/html&gt;</pre>
</div></div><p class="paragraph">HTML output (before submitting):</p><div class="code"><div class="codeContent">
<pre>&lt;html&gt;&#10;&lt;head&gt;&lt;title&gt;custom component example&lt;/title&gt;&lt;/head&gt;&#10;&lt;link rel =<span class="java&#45;quote">&quot;stylesheet&quot;</span> type=<span class="java&#45;quote">&quot;text/css&quot;</span> href=<span class="java&#45;quote">&quot;/webwork&#45;example/template/xhtml/styles.css&quot;</span> title=<span class="java&#45;quote">&quot;Style&quot;</span>&gt;&#10;&#10;&lt;body&gt;&#10;&#10;&lt;form  action=<span class="java&#45;quote">&quot;AddUser.action&quot;</span> method=<span class="java&#45;quote">&quot;POST&quot;</span> /&gt;&#10;&#10;&lt;table&gt;&#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;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt;Full Name:&lt;/span&gt;&lt;/td&gt;&#10;  &lt;td&gt;&#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;fullname&quot;</span> value=<span class="java&#45;quote">&quot;&quot; /&gt;&#10;  &lt;/td&gt;&#10;&lt;/tr&gt;&#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;&lt;span class=&quot;</span>label<span class="java&#45;quote">&quot;&gt;Email:&lt;/span&gt;&lt;/td&gt;&#10;  &lt;td&gt;&#10;&lt;input type=&quot;</span>text<span class="java&#45;quote">&quot; name=&quot;</span>email<span class="java&#45;quote">&quot; value=&quot;</span><span class="java&#45;quote">&quot; /&gt;&#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;&#10;    &lt;div align=&quot;</span>right<span class="java&#45;quote">&quot;&gt;&#10;      &lt;input type=&quot;</span>submit<span class="java&#45;quote">&quot; name=&quot;</span>submit<span class="java&#45;quote">&quot; value=&quot;</span>Send me a free E&#45;Certificate&#33;&quot;/&gt;&#10;    &lt;/div&gt;&#10;  &lt;/td&gt;&#10;&lt;/tr&gt;&#10;&#10;&#10;&lt;/table&gt;&#10;&lt;/form&gt;&#10;&#10;&lt;/body&gt;&#10;&lt;/html&gt;</pre>
</div></div><p class="paragraph">The template below will loop through any action errors and display them to the user in a bulletted list.</p>Template (action-errors.vm)<br/>

<div class="code"><div class="codeContent">
<pre>#set ($actionErrors = $stack.findValue(<span class="java&#45;quote">&quot;actionErrors&quot;</span>))&#10;&#10;#<span class="java&#45;keyword">if</span> ($actionErrors)&#10;&lt;tr&gt;&#10;    &lt;td colspan=<span class="java&#45;quote">&quot;2&quot;</span>&gt;&#10;        &lt;span class=<span class="java&#45;quote">&quot;errorMessage&quot;</span>&gt;The following errors occurred:&lt;/span&gt;&#10;        &lt;ul&gt;&#10;            #foreach ($actionError in $actionErrors)&#10;            &lt;li&gt;&lt;span class=<span class="java&#45;quote">&quot;errorMessage&quot;</span>&gt;$actionError&lt;/span&gt;&lt;/li&gt;&#10;            #end&#10;        &lt;/ul&gt;&#10;    &lt;/td&gt;&#10;&lt;/tr&gt;&#10;#end</pre>
</div></div><p class="paragraph">HTML output (after submitting):</p><div class="code"><div class="codeContent">
<pre>&lt;html&gt;&#10;&lt;head&gt;&lt;title&gt;custom component example&lt;/title&gt;&lt;/head&gt;&#10;&lt;link rel =<span class="java&#45;quote">&quot;stylesheet&quot;</span> type=<span class="java&#45;quote">&quot;text/css&quot;</span> href=<span class="java&#45;quote">&quot;/webwork&#45;example/template/xhtml/styles.css&quot;</span> title=<span class="java&#45;quote">&quot;Style&quot;</span>&gt;&#10;&#10;&lt;body&gt;&#10;&#10;&lt;form  action=<span class="java&#45;quote">&quot;AddUser.action&quot;</span> method=<span class="java&#45;quote">&quot;POST&quot;</span> /&gt;&#10;&#10;&lt;table&gt;&#10;    &#10;&lt;tr&gt;&#10;    &lt;td colspan=<span class="java&#45;quote">&quot;2&quot;</span>&gt;&#10;        &lt;span class=<span class="java&#45;quote">&quot;errorMessage&quot;</span>&gt;The following errors occurred:&lt;/span&gt;&#10;        &lt;ul&gt;&#10;            &lt;li class=<span class="java&#45;quote">&quot;errorMessage&quot;</span>&gt;&#10;                We are experiencing a technical problem and have contacted our &#10;                support staff. Please <span class="java&#45;keyword">try</span> again later.&#10;            &lt;/li&gt;&#10;        &lt;/ul&gt;&#10;    &lt;/td&gt;&#10;&lt;/tr&gt;&#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;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt;Full Name:&lt;/span&gt;&lt;/td&gt;&#10;  &lt;td&gt;&#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;fullname&quot;</span> value=<span class="java&#45;quote">&quot;Sample User&quot;</span> /&gt;&#10;  &lt;/td&gt;&#10;&lt;/tr&gt;&#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;&lt;span class=<span class="java&#45;quote">&quot;label&quot;</span>&gt;Email:&lt;/span&gt;&lt;/td&gt;&#10;  &lt;td&gt;&#10;&lt;input type=<span class="java&#45;quote">&quot;text&quot;</span> name=<span class="java&#45;quote">&quot;email&quot;</span> value=<span class="java&#45;quote">&quot;user&#64;example.com&quot;</span> /&gt;&#10;  &lt;/td&gt;&#10;&lt;/tr&gt;&#10;    &#10;&lt;tr&gt;&#10;  &lt;td colspan=<span class="java&#45;quote">&quot;2&quot;</span>&gt;&#10;    &lt;div align=<span class="java&#45;quote">&quot;right&quot;</span>&gt;&#10;      &lt;input type=<span class="java&#45;quote">&quot;submit&quot;</span> name=<span class="java&#45;quote">&quot;submit&quot;</span> value=<span class="java&#45;quote">&quot;Send me a free E&#45;Certificate&#33;&quot;</span>/&gt;&#10;    &lt;/div&gt;&#10;  &lt;/td&gt;&#10;&lt;/tr&gt;&#10;&#10;&#10;&lt;/table&gt;&#10;&lt;/form&gt;&#10;&#10;&lt;/body&gt;&#10;&lt;/html&gt;</pre>
</div></div><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 15, 2004 02:03</font></td>
		    </tr>
	    </table>
    </body>
</html>