click-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From take...@apache.org
Subject svn commit: r951063 [4/11] - in /click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide: ./ css/ images/ images/best-practices/ images/callouts/ images/colorsvg/ images/configuration/ images/controls/ images/introduction/ images/pa...
Date Thu, 03 Jun 2010 16:43:54 GMT
Added: click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s06.html
URL: http://svn.apache.org/viewvc/click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s06.html?rev=951063&view=auto
==============================================================================
--- click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s06.html (added)
+++ click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s06.html Thu Jun  3 16:43:50 2010
@@ -0,0 +1,93 @@
+<html><head>
+      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+   <title>3.6.&nbsp;Container</title><link rel="stylesheet" href="css/stylesheet.css" type="text/css"><meta name="generator" content="DocBook XSL Stylesheets V1.75.0"><link rel="home" href="index.html" title="Apache Click"><link rel="up" href="ch03.html" title="Chapter&nbsp;3.&nbsp;Controls"><link rel="prev" href="ch03s05.html" title="3.5.&nbsp;Control HEAD Elements"><link rel="next" href="ch03s07.html" title="3.7.&nbsp;Layouts"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">3.6.&nbsp;Container</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s05.html">Prev</a>&nbsp;</td><th width="60%" align="center">Chapter&nbsp;3.&nbsp;Controls</th><td width="20%" align="right">&nbsp;<a accesskey="n" href="ch03s07.html">Next</a></td></tr></table><hr></div><div class="sect1" title="3.6.&nbsp;Container"><div class="titlepage"
 ><div><div><h2 class="title" style="clear: both"><a name="container"></a>3.6.&nbsp;Container</h2></div></div></div><p><a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Container.html" target="_blank">Container</a>
+    is a Control that can contain other Controls, thus forming a hierarchy
+    of components. Container enables components to add, remove and retrieve other
+    controls. Listed below are example Containers:
+    </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>
+          <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Form.html" target="_blank">Form</a>
+          - an HTML form which provides default layout of fields and error feedback.
+        </p></li><li class="listitem"><p>
+          <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Panel.html" target="_blank">Panel</a>
+          - similar to
+          <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/Page.html" target="_blank">Page</a>, this
+          Container provides its own template and model.
+        </p></li><li class="listitem"><p>
+          <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/FieldSet.html" target="_blank">FieldSet</a>
+          - draws a legend (border) around its child Controls.
+        </p></li></ul></div><p>These Containers are depicted in the figure below.
+    </p><div class="figure"><a name="container-package-class-diagram"></a><div class="figure-contents"><span class="inlinemediaobject"><img src="images/controls/container-package-class-diagram.png" alt="Container Class Diagram"></span></div><p xmlns:fo="http://www.w3.org/1999/XSL/Format" class="title"><i>Figure&nbsp;3.4.&nbsp;Container Class Diagram</i></p></div><br class="figure-break"><p>The following classes provides convenient extension points for creating
+    custom Containers:
+    </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>
+          <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/AbstractContainer.html" target="_blank">AbstractContainer</a>
+        </p></li><li class="listitem"><p>
+          <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../extras-api/org/apache/click/extras/control/AbstractContainerField.html" target="_blank">AbstractContainerField</a>
+        </p></li></ul></div><p>Lets cover each of them here.
+    </p><div class="sect2" title="3.6.1.&nbsp;AbstractContainer"><div class="titlepage"><div><div><h3 class="title"><a name="abstractcontainer"></a>3.6.1.&nbsp;AbstractContainer</h3></div></div></div><p>Enables easy creation of custom Containers, for example an html
+      <span class="emphasis"><em>div</em></span> or <span class="emphasis"><em>span</em></span> element:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> Div <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> AbstractContainer {
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> Div(String name) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">super</span>(name);
+    }
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> String getTag() {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Return the control's HTML tag.</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"div"</span>;
+    }
+}</pre><p>Lets try out the newly created <code class="classname">Container</code>
+      above: (note the <code class="classname">MockContext</code> used in this test is
+      described in the <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../mock-api/overview-summary.html" target="_blank">Mock Test Support</a>
+      documentation)
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> Test {
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">static</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> main (String args[]) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create mock context in which to test the container.</span>
+        MockContext.initContext();
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create a div instance called "mydiv"</span>
+        String containerName = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"mydiv"</span>;
+        Div mydiv = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Div(containerName);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add a control to the container</span>
+        mydiv.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> TextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"myfield"</span>));
+
+        System.out.println(mydiv);
+    }
+}</pre><p>Executing the above example results in the following output:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;div</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"mydiv"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"mydiv"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"myfield"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"myfield"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">""</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">size</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"20"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"> /&gt;</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/div&gt;</span></pre></div><div class="sect2" title="3.6.2.&nbsp;AbstractContainerField"><div class="titlepage"><div><div><h3 class="title"><a name="abstractcontainerfield"></a>3.6.2.&nbsp;AbstractContainerField</h3></div></div></div><p>AbstractContainerField extends Field and implements the Container
+      interface. This provides a convenient base class in case you run into
+      a situation where you need both a Field and Container.
+      </p><p>Below is an example of how AbstractContainerField might be used:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> FieldAndContainer <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> AbstractContainerField {
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> FieldAndContainer(String name) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">super</span>(name);
+    }
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Return the html tag to render</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> String getTag() {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"div"</span>;
+    }
+}</pre><p>To test the new class we use the following snippet:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> Test {
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">static</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> main (String args[]) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create mock context in which to test the container.</span>
+        MockContext.initContext();
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create a FieldContainer instance called "field_container"</span>
+        String containerName = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"field_container"</span>;
+        FieldAndContainer fieldAndContainer = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> FieldAndContainer(containerName);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add a couple of fields to the container</span>
+        fieldAndContainer.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> TextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"myfield"</span>));
+        fieldAndContainer.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> TextArea(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"myarea"</span>));
+
+        System.out.println(fieldAndContainer);
+    }
+}</pre><p>Executing the snippet produces the output:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;div</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"field_container"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"field_container"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"myfield"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"myfield"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">""</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">size</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"20"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;textarea</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"myarea"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"myarea"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">rows</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"3"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">cols</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"20"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/textarea&gt;</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/div&gt;</span></pre></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch03s05.html">Prev</a>&nbsp;</td><td width="20%" align="center"><a accesskey="u" href="ch03.html">Up</a></td><td width="40%" align="right">&nbsp;<a accesskey="n" href="ch03s07.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.5.&nbsp;Control HEAD Elements&nbsp;</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">&nbsp;3.7.&nbsp;Layouts</td></tr></table></div></body></html>
\ No newline at end of file

Propchange: click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s06.html
------------------------------------------------------------------------------
    svn:mime-type = text/plain

Added: click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s07.html
URL: http://svn.apache.org/viewvc/click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s07.html?rev=951063&view=auto
==============================================================================
--- click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s07.html (added)
+++ click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s07.html Thu Jun  3 16:43:50 2010
@@ -0,0 +1,260 @@
+<html><head>
+      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+   <title>3.7.&nbsp;Layouts</title><link rel="stylesheet" href="css/stylesheet.css" type="text/css"><meta name="generator" content="DocBook XSL Stylesheets V1.75.0"><link rel="home" href="index.html" title="Apache Click"><link rel="up" href="ch03.html" title="Chapter&nbsp;3.&nbsp;Controls"><link rel="prev" href="ch03s06.html" title="3.6.&nbsp;Container"><link rel="next" href="ch04.html" title="Chapter&nbsp;4.&nbsp;Configuration"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">3.7.&nbsp;Layouts</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s06.html">Prev</a>&nbsp;</td><th width="60%" align="center">Chapter&nbsp;3.&nbsp;Controls</th><td width="20%" align="right">&nbsp;<a accesskey="n" href="ch04.html">Next</a></td></tr></table><hr></div><div class="sect1" title="3.7.&nbsp;Layouts"><div class="titlepage"><div><
 div><h2 class="title" style="clear: both"><a name="layout"></a>3.7.&nbsp;Layouts</h2></div></div></div><p>Controls such as <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Form.html" target="_blank">Form</a>
+    takes care of layout and error reporting automatically, and for many use
+    cases the auto-layout approach is good enough. It is certainly very productive.
+    </p><p>However for custom or complex layouts, auto-layout is not always the best
+    choice. There are two approaches for creating custom layouts.
+    </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>Template approach - use a template engine such as Velocity,
+        Freemarker or JSP to declare the layout as HTML markup.
+        </p></li><li class="listitem"><p> Programmatic approach - build custom layout components using Java.
+        This option is very similar to building components using Swing.
+        </p></li></ul></div><div class="sect2" title="3.7.1.&nbsp;Template layout"><div class="titlepage"><div><div><h3 class="title"><a name="template-layout"></a>3.7.1.&nbsp;Template layout</h3></div></div></div><p>The <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Form.html#manual-layout" target="_blank">Template</a>
+      approach separates the Page and layout logic. The Page is used to implement
+      the presentation logic such as creating controls, registering listeners
+      and copying data to domain objects, while the template is used to layout
+      the Page controls.
+      </p><p>Lets walk through an example using the template approach. Below
+      we create an EmployeePage which contains a Form and a bunch of fields
+      and submit button.
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// EmployeePage.java</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> EmployeePage <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> Page {
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">private</span> Form form;
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> onInit() {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create form</span>
+        Form form = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Form(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"form"</span>);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add a couple of fields to the form</span>
+        form.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> TextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"firstname"</span>));
+        form.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> TextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"lastname"</span>));
+        form.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> IntegerField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"age"</span>));
+        form.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> DoubleField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"salary"</span>));
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add a submit button to form</span>
+        form.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Submit(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"submit"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Add Employee"</span>));
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add form the page</span>
+        addControl(form);
+    }
+}</pre><p>Lets imagine we want to create a layout using the HTML tags,
+      &lt;div&gt; and &lt;ol&gt;.
+      </p><p>We would then provide the markup for the <code class="varname">employee.htm</code>
+      template as shown below, using a template engine such as Velocity:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">&lt;!-- employee.htm --&gt;</span>
+${form.startTag()}
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;div</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">style</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"margin: 1em;"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;ol&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+                <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"firstname"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Firstname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+                ${form.fields.firstname}
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+                <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"lastname"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Lastname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+                ${form.fields.lastname}
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+                <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"age"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Age:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+                ${form.fields.age}
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+                <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"salary"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Salary:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+                ${form.fields.salary}
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/ol&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/div&gt;</span>
+    ${form.fields.submit}
+${form.endTag()}</pre><p>Using CSS the markup above can further be styled and transformed
+      into a nice looking form.
+      </p><p>There are pros and cons to using the template approach.
+      </p><p>One of the advantages is that the layout is explicit and one can
+      easily tweak it if needed. For example instead of using divs and ordered
+      lists, one can change the template to leverage a table layout.
+      </p><p>A disadvantage is added redundancy. In the example above we created
+      the fields in Java, and laid them out using markup in the template. If the
+      requirements should change to add a new field for example, one will have to
+      add the field in the Page as well as the template.
+      </p><p>However it is possible to "generify" the layout using template
+      engines such as Velocity, Freemarker and JSP.
+      <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Form.html#velocity-macros" target="_blank">Macro.vm</a>
+      is an example of a generic form layout using Velocity.
+      </p></div><div class="sect2" title="3.7.2.&nbsp;Programmatic layout"><div class="titlepage"><div><div><h3 class="title"><a name="programmatic-layout"></a>3.7.2.&nbsp;Programmatic layout</h3></div></div></div><p>To combat the redundancy introduced by the Template approach, you can
+      take a programmatic approach and use normal Java and some Click classes to
+      build custom layouts.
+      </p><p>Click extras provides two useful classes in this situation namely,
+      <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../extras-api/org/apache/click/extras/control/HtmlForm.html" target="_blank">HtmlForm</a>
+      and <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../extras-api/org/apache/click/extras/control/HtmlFieldSet.html" target="_blank">HtmlFieldSet</a>.
+      </p><p>Unlike Form and FieldSet which renders its controls using a Table
+      layout, HtmlForm and HtmlFieldSet renders its controls in the order they
+      were added and does not add any extra markup. HtmlForm will be used in the
+      examples below.
+      </p><p>To make it easy to compare the two layout approaches we will recreate
+      the example from the template layout section, but using the programmatic
+      approach.
+      </p><p>When creating custom layouts, the HTML construct List &lt;ul&gt; is
+      pretty useful. Since Click does not provide this component, we will create
+      it as shown below. First we create the HTML list element &lt;ol&gt;, to
+      which list item elements &lt;li&gt; can be added:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// HtmlList.java</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> HtmlList <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> AbstractContainer {
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> String getTag() {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"ol"</span>;
+    }
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Can only add ListItems: &lt;li&gt; tags</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> Control add(Control control) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">if</span> (!(control <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">instanceof</span> ListItem)) {
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">throw</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> IllegalArgumentException(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Only list items can be added."</span>);
+        }
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">super</span>.add(control);
+    }
+}</pre><p>Next we create the HTML list item element &lt;li&gt;:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// ListItem.java</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> ListItem <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> AbstractContainer {
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> String getTag() {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"li"</span>;
+    }
+}</pre><p>Another component that will be used in the example is a FieldLabel
+      which renders an HTML label element for a target Field.
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// FieldLabel.java</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> FieldLabel <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> AbstractControl {
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">private</span> Field target;
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">private</span> String label;
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> FieldLabel(Field target, String label) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">this</span>.target = target;
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">this</span>.label = label;
+    }
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> String getTag() {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"label"</span>;
+    }
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Override render to produce an html label for the specified field.</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> render(HtmlStringBuffer buffer) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Open tag: &lt;label</span>
+        buffer.elementStart(getTag());
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Set attribute to target field's id</span>
+        setAttribute(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"for"</span>, target.getId());
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Render the labels attributes</span>
+        appendAttributes(buffer);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Close tag: &lt;label for="firstname"&gt;</span>
+        buffer.closeTag();
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add label text: &lt;label for="firstname"&gt;Firstname:</span>
+        buffer.append(label);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Close tag: &lt;label for="firstname"&gt;Firstname:&lt;/label&gt;</span>
+        buffer.elementEnd(getTag());
+    }
+
+}</pre><p>Now the form can be assembled. Continuing with the employee example
+      from the <a class="link" href="ch03s07.html#template-layout" title="3.7.1.&nbsp;Template layout">template approach</a>, we again
+      create an <code class="classname">EmployeePage</code>, but this time an
+      <code class="classname">HtmlForm</code> and <code class="classname">HtmlList</code> is used
+      to create the custom layout:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// EmployeePage.java</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> EmployeePage <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> Page {
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// A form instance variable</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">private</span> HtmlForm form;
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Build the form when the page is initialized</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> onInit() {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create an HtmlForm which is ideal for composing manual layouts</span>
+        form = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> HtmlForm(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"form"</span>);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create a list and add it to the form.</span>
+        HtmlList list = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> HtmlList();
+        form.add(list);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add firstname field and pass in its name, label and the list to add the field to</span>
+        addTextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"firstname"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Firstname:"</span>, list);
+        addTextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"lastname"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Lastname:"</span>, list);
+        addTextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"age"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Age:"</span>, list);
+        addTextField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"salary"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Salary:"</span>, list);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add a submit button to form</span>
+        form.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Submit(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"submit"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Add Employee"</span>));
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add the form to the page</span>
+        addControl(form);
+    }
+
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Provide a helper method to add fields to the form</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">private</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> addTextField(String nameStr, String labelStr, List list) {
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create a new ListItem &lt;li&gt; and add it to the List</span>
+        ListItem item = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> ListItem();
+        list.add(item);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create a textfield with the specified name</span>
+        Field field = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> TextField(nameStr);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Create a field label, which associates the label with the field id.</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// label.toString would output: &lt;label for="firstname"&gt;Firstname:&lt;/name&gt;</span>
+        FieldLabel label = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> FieldLabel(field, labelStr);
+
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Next add the label and field to the list item.</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// item.toString would then produce:</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// &lt;li&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">//   &lt;label for="firstname"&gt;Firstname:&lt;/name&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">//   &lt;input type="text" name="firstname" id="form_firstname" value="" size="20"/&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// &lt;/li&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">//</span>
+        item.add(label);
+        item.add(field);
+    }
+}</pre><p>And lastly the <code class="filename">employee.htm</code> template would only
+      need to specify the name of the top level component, in this case
+      <code class="varname">form</code>.
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">&lt;!--employee.htm--&gt;</span>
+<code class="varname">${form}</code></pre><p>which produces the following markup:
+      </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;form</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">method</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"post"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">action</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"/myapp/employee.htm"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"hidden"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form_name"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form_form_name"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;ol&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"firstname"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Firstname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"firstname"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form_firstname"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">""</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">size</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"20"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"lastname"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Lastname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"lastname"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form_lastname"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">""</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">size</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"20"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"age"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Age:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"age"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form_age"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">""</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">size</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"20"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;li&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;label</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">for</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"salary"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>Salary:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/label&gt;</span>
+            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"salary"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form_salary"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">""</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">size</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"20"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/&gt;</span>
+        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/li&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/ol&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;input</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"submit"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">name</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"submit"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"form_submit"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">value</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"Add Employee"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/&gt;</span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/form&gt;</span></pre><p>Again using a CSS stylesheet, the markup above can be styled and
+      transformed into a fancy looking form.
+      </p><p>There is a <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.avoka.com/click-examples/form/contact-details.htm" target="_blank">live demo</a>
+      showing the programmatic approach.
+      </p><p>The advantage of the programmatic approach is that there is no
+      redundancy. Each Field is created and added using normal Java. There is no
+      need to specify where the Field must reside in the markup.
+      </p><p>If new requirements arrive and more fields added, only the Page needs
+      to change. There is no need to change the template as the layout is taken
+      care of by CSS and the markup produced by the components.
+      </p><p>Disadvantages are that more upfront work is needed to write the
+      components and it is more difficult to
+      <span class="emphasis"><em>visualize</em></span> what output would be rendered by the
+      components.
+      </p><p>However once your custom layout components are in place, it can be
+      reused across your project and boost productivity.
+      </p><p>Whether you use the <a class="link" href="ch03s07.html#template-layout" title="3.7.1.&nbsp;Template layout">template</a>
+      or <a class="link" href="ch03s07.html#programmatic-layout" title="3.7.2.&nbsp;Programmatic layout">programmatic</a> layout approach,
+      is up to you. Both work well and have advantages and disadvantages over the
+      other.
+      </p></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch03s06.html">Prev</a>&nbsp;</td><td width="20%" align="center"><a accesskey="u" href="ch03.html">Up</a></td><td width="40%" align="right">&nbsp;<a accesskey="n" href="ch04.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.6.&nbsp;Container&nbsp;</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">&nbsp;Chapter&nbsp;4.&nbsp;Configuration</td></tr></table></div></body></html>
\ No newline at end of file

Propchange: click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch03s07.html
------------------------------------------------------------------------------
    svn:mime-type = text/plain

Added: click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch04.html
URL: http://svn.apache.org/viewvc/click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch04.html?rev=951063&view=auto
==============================================================================
--- click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch04.html (added)
+++ click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch04.html Thu Jun  3 16:43:50 2010
@@ -0,0 +1,86 @@
+<html><head>
+      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+   <title>Chapter&nbsp;4.&nbsp;Configuration</title><link rel="stylesheet" href="css/stylesheet.css" type="text/css"><meta name="generator" content="DocBook XSL Stylesheets V1.75.0"><link rel="home" href="index.html" title="Apache Click"><link rel="up" href="index.html" title="Apache Click"><link rel="prev" href="ch03s07.html" title="3.7.&nbsp;Layouts"><link rel="next" href="ch04s02.html" title="4.2.&nbsp;Application Configuration"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Chapter&nbsp;4.&nbsp;Configuration</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s07.html">Prev</a>&nbsp;</td><th width="60%" align="center">&nbsp;</th><td width="20%" align="right">&nbsp;<a accesskey="n" href="ch04s02.html">Next</a></td></tr></table><hr></div><div class="chapter" title="Chapter&nbsp;4.&nbsp;Configuration"><div class
 ="titlepage"><div><div><h2 class="title"><a name="chapter-configuration"></a>Chapter&nbsp;4.&nbsp;Configuration</h2></div></div></div><div class="toc"><dl><dt><span class="sect1"><a href="ch04.html#servlet-configuration">4.1. Servlet Configuration</a></span></dt><dd><dl><dt><span class="sect2"><a href="ch04.html#servlet-mapping">4.1.1. Servlet Mapping</a></span></dt><dt><span class="sect2"><a href="ch04.html#load-on-startup">4.1.2. Load On Startup</a></span></dt><dt><span class="sect2"><a href="ch04.html#type-converter-class">4.1.3. Type Converter Class</a></span></dt><dt><span class="sect2"><a href="ch04.html#config-service-class">4.1.4. Config Service Class</a></span></dt></dl></dd><dt><span class="sect1"><a href="ch04s02.html">4.2. Application Configuration</a></span></dt><dd><dl><dt><span class="sect2"><a href="ch04s02.html#click-app">4.2.1. Click App</a></span></dt><dt><span class="sect2"><a href="ch04s02.html#application-pages">4.2.2. Pages</a></span></dt><dd><dl><dt><
 span class="sect3"><a href="ch04s02.html#application-multiple-packages">4.2.2.1. Multiple Pages Packages</a></span></dt></dl></dd><dt><span class="sect2"><a href="ch04s02.html#application-page">4.2.3. Page</a></span></dt><dd><dl><dt><span class="sect3"><a href="ch04s02.html#application-automapping">4.2.3.1. Page Automapping</a></span></dt><dt><span class="sect3"><a href="ch04s02.html#application-excludes">4.2.3.2. Automapping Excludes</a></span></dt><dt><span class="sect3"><a href="ch04s02.html#application-autobinding">4.2.3.3. Page Autobinding</a></span></dt><dt><span class="sect3"><a href="ch04s02.html#application-autobinding-annotation">4.2.3.4. Page Autobinding - Using Annotations</a></span></dt></dl></dd><dt><span class="sect2"><a href="ch04s02.html#application-headers">4.2.4. Headers</a></span></dt><dd><dl><dt><span class="sect3"><a href="ch04s02.html#browser-caching">4.2.4.1. Browser Caching</a></span></dt></dl></dd><dt><span class="sect2"><a href="ch04s02.html#applic
 ation-format">4.2.5. Format</a></span></dt><dt><span class="sect2"><a href="ch04s02.html#application-mode">4.2.6. Mode</a></span></dt><dd><dl><dt><span class="sect3"><a href="ch04s02.html#page-auto-loading">4.2.6.1. Page Auto Loading</a></span></dt><dt><span class="sect3"><a href="ch04s02.html#click-logging">4.2.6.2. Click and Velocity Logging</a></span></dt></dl></dd><dt><span class="sect2"><a href="ch04s02.html#application-controls">4.2.7. Controls</a></span></dt></dl></dd><dt><span class="sect1"><a href="ch04s03.html">4.3. Auto Deployed Files</a></span></dt><dd><dl><dt><span class="sect2"><a href="ch04s03.html#deploying-restricted-env">4.3.1. Deploying resources in a restricted environment</a></span></dt><dt><span class="sect2"><a href="ch04s03.html#deploying-custom-resources">4.3.2. Deploying Custom Resources</a></span></dt></dl></dd></dl></div><p>This section discusses how to setup and configure an Apache Click web
+  application.
+  </p><p>The Click configuration files include:
+  </p><div class="informaltable"><table style="border: none;"><colgroup><col><col></colgroup><tbody><tr><td style="border-right: 0.5pt solid ; ">
+            <span class="inlinemediaobject"><img src="images/configuration/config-files.png"></span>
+          </td><td style="">
+            <div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p> WEB-INF/
+                  <a class="link" href="ch04s02.html" title="4.2.&nbsp;Application Configuration">click.xml</a>
+                    &nbsp; - &nbsp; Application Configuration (
+                  <span class="bold"><strong>required</strong></span>)
+                </p></li><li class="listitem"><p> WEB-INF/
+                  <a class="link" href="ch04.html#servlet-configuration" title="4.1.&nbsp;Servlet Configuration">web.xml</a>
+                    &nbsp; - &nbsp; Servlet Configuration (
+                  <span class="bold"><strong>required</strong></span>)
+                </p></li></ul></div>
+          </td></tr></tbody></table></div><div class="sect1" title="4.1.&nbsp;Servlet Configuration"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="servlet-configuration"></a>4.1.&nbsp;Servlet Configuration</h2></div></div></div><p>For a Click web application to function the
+    <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/ClickServlet.html" target="_blank">ClickServlet</a>
+    must be configured in the web application's <code class="filename">/WEB-INF/web.xml</code>
+    file. A basic web application which maps all <code class="literal">*.htm</code> requests
+    to a ClickServlet is provided below.
+    </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;web-app&gt;</span>
+
+  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet-name&gt;</span>ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet-name&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet-class&gt;</span>org.apache.click.ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet-class&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;load-on-startup&gt;</span>0<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/load-on-startup&gt;</span>
+  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet&gt;</span>
+
+  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet-mapping&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet-name&gt;</span>ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet-name&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;url-pattern&gt;</span>*.htm<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/url-pattern&gt;</span>
+  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet-mapping&gt;</span>
+
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/web-app&gt;</span></pre><div class="sect2" title="4.1.1.&nbsp;Servlet Mapping"><div class="titlepage"><div><div><h3 class="title"><a name="servlet-mapping"></a>4.1.1.&nbsp;Servlet Mapping</h3></div></div></div><p>By convention all Click page templates should have an .htm extension,
+      and the ClickServlet should be mapped to process all *.htm URL requests.
+      With this convention you have all the static HTML pages use an .html extension
+      and they will not be processed as Click pages.
+      </p></div><div class="sect2" title="4.1.2.&nbsp;Load On Startup"><div class="titlepage"><div><div><h3 class="title"><a name="load-on-startup"></a>4.1.2.&nbsp;Load On Startup</h3></div></div></div><p>Note you should always set <code class="literal">load-on-startup</code> element
+      to be 0 so the servlet is initialized when the server is started. This will
+      prevent any delay for the first client which uses the application.
+      </p><p>The <code class="classname">ClickServlet</code> performs as much work as possible
+      at startup to improve performance later on. The Click start up and caching
+      strategy is configured with the Click application mode element in the
+      "<code class="filename">click.xml</code>" config file, covered next.
+      </p></div><div class="sect2" title="4.1.3.&nbsp;Type Converter Class"><div class="titlepage"><div><div><h3 class="title"><a name="type-converter-class"></a>4.1.3.&nbsp;Type Converter Class</h3></div></div></div><p>The ClickServlet uses the OGNL library for type coercion when binding
+      request parameters to bindable fields. The default type converter class 
+      used is <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="click-api/org/apache/click/util/RequestTypeConverter.html" target="_blank">RequestTypeConverter</a>.
+      To specify your own type converter configure a <code class="literal">type-converter-class</code>
+      init parameter with the ClickServlet. For example:
+      </p><pre class="programlisting">
+  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet-name&gt;</span>ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet-name&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;servlet-class&gt;</span>org.apache.click.ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet-class&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;load-on-startup&gt;</span>0<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/load-on-startup&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;init-param&gt;</span>
+	    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;param-name&gt;</span>type-converter-class<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/param-name&gt;</span>
+	    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;param-value&gt;</span>com.mycorp.util.CustomTypeConverter<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/param-value&gt;</span>
+    <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/init-param&gt;</span>
+  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/servlet&gt;</span></pre></div><div class="sect2" title="4.1.4.&nbsp;Config Service Class"><div class="titlepage"><div><div><h3 class="title"><a name="config-service-class"></a>4.1.4.&nbsp;Config Service Class</h3></div></div></div><p>Click uses a single application configuration service which is
+      instantiated by the ClickServlet at startup. This service defines the 
+      application configuration and is used by the ClickServlet to map requests
+      to pages amongst other things.
+      </p><p>Once the ConfigService has been initialized it is stored in the
+      ServletContext using the key  <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="click-api/org/apache/click/service/ConfigService.html" target="_blank">ConfigService</a>
+      The default ConfigService is <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="click-api/org/apache/click/service/XmlConfigService.html" target="_blank">XmlConfigService</a>,
+      which configuration is discussed in detail in the next section.
+ 	    </p><p>To use an alternative configuration service specify a
+      <code class="literal">config-service-class</code> context parameter. For example:
+ 	    </p><pre class="programlisting">
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;web-app</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">xmlns</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"http://java.sun.com/xml/ns/j2ee"</span>
+   <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">xmlns:xsi</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"http://www.w3.org/2001/XMLSchema-instance"</span>
+   <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">xsi:schemaLocation</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"</span>
+   <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">version</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"2.4"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&gt;</span>
+
+ ...
+
+     <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;context-param&gt;</span>
+         <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;param-name&gt;</span>config-service-class<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/param-name&gt;</span>
+          <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;param-value&gt;</span>com.mycorp.service.CustomConfigSerivce<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/param-value&gt;</span>
+      <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/context-param&gt;</span>
+ 
+  ...
+ 
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/web-app&gt;</span></pre></div></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch03s07.html">Prev</a>&nbsp;</td><td width="20%" align="center">&nbsp;</td><td width="40%" align="right">&nbsp;<a accesskey="n" href="ch04s02.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.7.&nbsp;Layouts&nbsp;</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">&nbsp;4.2.&nbsp;Application Configuration</td></tr></table></div></body></html>
\ No newline at end of file

Propchange: click/trunk/tools/eclipse/org.apache.click.eclipse/documentation/user-guide/ch04.html
------------------------------------------------------------------------------
    svn:mime-type = text/plain



Mime
View raw message