| <html><head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <title>1.6. Simple Form Example</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="ch01.html" title="Chapter 1. Introduction to Apache Click"><link rel="prev" href="ch01s05.html" title="1.5. Advanced Table Example"><link rel="next" href="ch01s07.html" title="1.7. Advanced Form Example"></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">1.6. Simple Form Example</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch01s05.html">Prev</a> </td><th width="60%" align="center">Chapter 1. Introduction to Apache Click</th><td width="20%" align="right"> <a accesskey="n" href="ch01s07.html">Next</a></td></tr></table><hr></div><div class="sect1" title="1.6. Simple Form Example"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="simple-form"></a>1.6. Simple Form Example</h2></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" target="_blank">Form</a> |
| and <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Field.html" target="_blank">Field</a> |
| controls are also some of the most commonly used controls in the Click Framework. |
| </p><p>The SimpleForm page below provides a demonstration of using these |
| controls. |
| </p><p>In our example code we have the page's constructor adding a |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/TextField.html" target="_blank">TextField</a> |
| field and a <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Submit.html" target="_blank">Submit</a> |
| button to the form. A page method is also set as a control listener on the |
| form. Also note in this example the page's public <code class="varname">form</code> |
| field is automatically added to its list of controls. |
| </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> SimpleForm <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">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">// Constructor ------------------------------------------------------------</span> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> SimpleForm() { |
| addControl(form); |
| |
| 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">"name"</span>, true)); |
| 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">"OK"</span>)); |
| |
| form.setListener(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">this</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"onSubmit"</span>); |
| } |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Event Handlers ---------------------------------------------------------</span> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">/** |
| * Handle the form submit event. |
| */</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">boolean</span> onSubmit() { |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">if</span> (form.isValid()) { |
| msg = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Your name is "</span> + form.getFieldValue(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"name"</span>); |
| } |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> true; |
| } |
| }</pre><p>Next we have the SimpleForm template <code class="varname">simple-form.htm</code>. |
| The Click application automatically associates the |
| <code class="varname">simple-form.htm</code> template with the |
| <code class="classname">SimpleForm</code> class. |
| </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><html></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><head></span> |
| <code class="varname">$headElements</code> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></head></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><body></span> |
| |
| <code class="varname">$form</code> |
| |
| <span class="command"><strong>#if</strong></span> (<code class="varname">$msg</code>) |
| <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">id</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"msgDiv"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">></span> <code class="varname">$msg</code> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></div></span> |
| <span class="command"><strong>#end</strong></span> |
| |
| <code class="varname">$jsElements</code> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></body></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></html></span></pre><p>When the SimpleForm page is first requested the <code class="varname">$form</code> |
| object will automatically render itself as: |
| </p><div class="figure"><a name="simple-form-image"></a><div class="figure-contents"><div class="mediaobject"><img src="images/introduction/simple-form.png" alt="Simple Form"></div></div><p xmlns:fo="http://www.w3.org/1999/XSL/Format" class="title"><i>Figure 1.4. Simple Form</i></p></div><br class="figure-break"><p>Say the user does not enter their name and presses the OK button to |
| submit the form. The <code class="classname">ClickServlet</code> creates a new |
| SimpleForm page and processes the form control. |
| </p><p>The form control processes its fields and determines that it is |
| invalid. The form then invokes the listener method |
| <code class="methodname">onSubmit()</code>. As the form is not valid this method |
| simply returns true and the form renders the field validation errors. |
| </p><div class="figure"><a name="simple-form-error-image"></a><div class="figure-contents"><div class="mediaobject"><img src="images/introduction/simple-form-error.png" alt="Form after an invalid request"></div></div><p xmlns:fo="http://www.w3.org/1999/XSL/Format" class="title"><i>Figure 1.5. Form after an invalid request</i></p></div><br class="figure-break"><p>Note the form will automatically maintain the entered state during the |
| post and validate cycle. |
| </p><p>Now if the user enters their name and clicks the OK button, the form |
| will be valid and the <code class="methodname">onSubmit()</code> add a |
| <code class="varname">msg</code> to the Pages model. This will be rendered as: |
| </p><div class="figure"><a name="simple-form-success-image"></a><div class="figure-contents"><div class="mediaobject"><img src="images/introduction/simple-form-success.png" alt="Form after a valid request"></div></div><p xmlns:fo="http://www.w3.org/1999/XSL/Format" class="title"><i>Figure 1.6. Form after a valid request</i></p></div><br class="figure-break"></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch01s05.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="ch01.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch01s07.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">1.5. Advanced Table Example </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 1.7. Advanced Form Example</td></tr></table></div></body></html> |
