You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@click.apache.org by ta...@apache.org on 2010/02/12 00:36:29 UTC
svn commit: r909177 [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...
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=909177&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 Feb 11 23:36:18 2010
@@ -0,0 +1,93 @@
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+ <title>3.6. 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 3. Controls"><link rel="prev" href="ch03s05.html" title="3.5. Control HEAD Elements"><link rel="next" href="ch03s07.html" title="3.7. 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. Container</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s05.html">Prev</a> </td><th width="60%" align="center">Chapter 3. Controls</th><td width="20%" align="right"> <a accesskey="n" href="ch03s07.html">Next</a></td></tr></table><hr></div><div class="sect1" title="3.6. Container"><div class="titlepage"
><div><div><h2 class="title" style="clear: both"><a name="container"></a>3.6. 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 3.4. 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. AbstractContainer"><div class="titlepage"><div><div><h3 class="title"><a name="abstractcontainer"></a>3.6.1. 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"><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">></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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"> /></span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></div></span></pre></div><div class="sect2" title="3.6.2. AbstractContainerField"><div class="titlepage"><div><div><h3 class="title"><a name="abstractcontainerfield"></a>3.6.2. 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"><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">></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">/></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></textarea></span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></div></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> </td><td width="20%" align="center"><a accesskey="u" href="ch03.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch03s07.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.5. Control HEAD Elements </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 3.7. 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=909177&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 Feb 11 23:36:18 2010
@@ -0,0 +1,260 @@
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+ <title>3.7. 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 3. Controls"><link rel="prev" href="ch03s06.html" title="3.6. Container"><link rel="next" href="ch04.html" title="Chapter 4. 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. Layouts</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s06.html">Prev</a> </td><th width="60%" align="center">Chapter 3. Controls</th><td width="20%" align="right"> <a accesskey="n" href="ch04.html">Next</a></td></tr></table><hr></div><div class="sect1" title="3.7. Layouts"><div class="titlepage"><div><
div><h2 class="title" style="clear: both"><a name="layout"></a>3.7. 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. Template layout"><div class="titlepage"><div><div><h3 class="title"><a name="template-layout"></a>3.7.1. 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,
+ <div> and <ol>.
+ </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"><!-- employee.htm --></span>
+${form.startTag()}
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><ol></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Firstname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ ${form.fields.firstname}
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Lastname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ ${form.fields.lastname}
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Age:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ ${form.fields.age}
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Salary:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ ${form.fields.salary}
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></ol></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></div></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. Programmatic layout"><div class="titlepage"><div><div><h3 class="title"><a name="programmatic-layout"></a>3.7.2. 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 <ul> is
+ pretty useful. Since Click does not provide this component, we will create
+ it as shown below. First we create the HTML list element <ol>, to
+ which list item elements <li> 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: <li> 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 <li>:
+ </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: <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: <label for="firstname"></span>
+ buffer.closeTag();
+
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add label text: <label for="firstname">Firstname:</span>
+ buffer.append(label);
+
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Close tag: <label for="firstname">Firstname:</label></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. 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 <li> 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: <label for="firstname">Firstname:</name></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">// <li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// <label for="firstname">Firstname:</name></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// <input type="text" name="firstname" id="form_firstname" value="" size="20"/></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// </li></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"><!--employee.htm--></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"><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">></span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">/></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><ol></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Firstname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">/></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Lastname:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">/></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Age:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">/></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">></span>Salary:<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></label></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">/></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></li></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></ol></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><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">/></span>
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></form></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. Template layout">template</a>
+ or <a class="link" href="ch03s07.html#programmatic-layout" title="3.7.2. 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> </td><td width="20%" align="center"><a accesskey="u" href="ch03.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch04.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.6. Container </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> Chapter 4. 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=909177&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 Feb 11 23:36:18 2010
@@ -0,0 +1,86 @@
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+ <title>Chapter 4. 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. Layouts"><link rel="next" href="ch04s02.html" title="4.2. 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 4. Configuration</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s07.html">Prev</a> </td><th width="60%" align="center"> </th><td width="20%" align="right"> <a accesskey="n" href="ch04s02.html">Next</a></td></tr></table><hr></div><div class="chapter" title="Chapter 4. Configuration"><div class
="titlepage"><div><div><h2 class="title"><a name="chapter-configuration"></a>Chapter 4. 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. Application Configuration">click.xml</a>
+ - 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. Servlet Configuration">web.xml</a>
+ - Servlet Configuration (
+ <span class="bold"><strong>required</strong></span>)
+ </p></li></ul></div>
+ </td></tr></tbody></table></div><div class="sect1" title="4.1. Servlet Configuration"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="servlet-configuration"></a>4.1. 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"><web-app></span>
+
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><servlet></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><servlet-name></span>ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet-name></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><servlet-class></span>org.apache.click.ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet-class></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><load-on-startup></span>0<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></load-on-startup></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet></span>
+
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><servlet-mapping></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><servlet-name></span>ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet-name></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><url-pattern></span>*.htm<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></url-pattern></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet-mapping></span>
+
+<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></web-app></span></pre><div class="sect2" title="4.1.1. Servlet Mapping"><div class="titlepage"><div><div><h3 class="title"><a name="servlet-mapping"></a>4.1.1. 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. Load On Startup"><div class="titlepage"><div><div><h3 class="title"><a name="load-on-startup"></a>4.1.2. 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. Type Converter Class"><div class="titlepage"><div><div><h3 class="title"><a name="type-converter-class"></a>4.1.3. 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"><servlet></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><servlet-name></span>ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet-name></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><servlet-class></span>org.apache.click.ClickServlet<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet-class></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><load-on-startup></span>0<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></load-on-startup></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><init-param></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><param-name></span>type-converter-class<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></param-name></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><param-value></span>com.mycorp.util.CustomTypeConverter<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></param-value></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></init-param></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></servlet></span></pre></div><div class="sect2" title="4.1.4. Config Service Class"><div class="titlepage"><div><div><h3 class="title"><a name="config-service-class"></a>4.1.4. 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"><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">></span>
+
+ ...
+
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><context-param></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><param-name></span>config-service-class<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></param-name></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><param-value></span>com.mycorp.service.CustomConfigSerivce<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></param-value></span>
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></context-param></span>
+
+ ...
+
+ <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></web-app></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> </td><td width="20%" align="center"> </td><td width="40%" align="right"> <a accesskey="n" href="ch04s02.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.7. Layouts </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 4.2. 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