You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wicket.apache.org by ad...@apache.org on 2014/04/24 21:41:18 UTC
svn commit: r1589849 [2/6] - in /wicket/common/site/trunk/_site/guide/guide:
./ pages/ src/docs/guide/ src/docs/guide/forms2/ src/docs/guide/helloWorld/
src/docs/img/
Modified: wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_5.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_5.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_5.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_5.html Thu Apr 24 19:41:13 2014
@@ -205,7 +205,7 @@ add(loginBox);</pre></div><p class="para
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_6.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_6.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_6.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_6.html Thu Apr 24 19:41:13 2014
@@ -194,7 +194,7 @@ function addJsClass() {
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_7.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_7.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_7.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_7.html Thu Apr 24 19:41:13 2014
@@ -195,7 +195,7 @@ function addJsClass() {
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_8.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_8.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_8.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_8.html Thu Apr 24 19:41:13 2014
@@ -194,7 +194,7 @@ function addJsClass() {
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_9.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_9.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_9.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/bestpractices_9.html Thu Apr 24 19:41:13 2014
@@ -189,7 +189,7 @@ function addJsClass() {
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_1.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_1.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_1.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_1.html Thu Apr 24 19:41:13 2014
@@ -197,7 +197,7 @@ However this description introduces some
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_2.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_2.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_2.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_2.html Thu Apr 24 19:41:13 2014
@@ -190,7 +190,7 @@ In the following table these methods are
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_3.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_3.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_3.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_3.html Thu Apr 24 19:41:13 2014
@@ -189,7 +189,7 @@ function addJsClass() {
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_4.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_4.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_4.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_4.html Thu Apr 24 19:41:13 2014
@@ -243,7 +243,7 @@ If we forget to call superclass version
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_5.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_5.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_5.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_5.html Thu Apr 24 19:41:13 2014
@@ -189,7 +189,7 @@ function addJsClass() {
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_6.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_6.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_6.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/componentLifecycle_6.html Thu Apr 24 19:41:13 2014
@@ -190,7 +190,7 @@ function addJsClass() {
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/forms2_1.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/forms2_1.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/forms2_1.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/forms2_1.html Thu Apr 24 19:41:13 2014
@@ -196,7 +196,7 @@ Please note that the model of form compo
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/forms2_10.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/forms2_10.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/forms2_10.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/forms2_10.html Thu Apr 24 19:41:13 2014
@@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
- <title>12.10 Working with radio buttons and checkboxes 6.x</title>
+ <title>12.10 Stateless form 6.x</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, print" title="Style" charset="utf-8"/>
<link rel="stylesheet" href="../css/pdf.css" type="text/css" media="print" title="PDF" charset="utf-8"/>
@@ -146,7 +146,7 @@ function addJsClass() {
<div class="project">
- <h1>12.10 Working with radio buttons and checkboxes - Reference Documentation</h1>
+ <h1>12.10 Stateless form - Reference Documentation</h1>
<p><strong>Authors:</strong> Andrea Del Bene, Martin Grigorov, Carsten Hufe, Christian Kroemer, Daniel Bartl, Paul BorÈ</p>
@@ -159,74 +159,49 @@ function addJsClass() {
-<h2 id="forms2_10">12.10 Working with radio buttons and checkboxes</h2>
-<p class="paragraph"/>In this paragraph we will see which components can be used to handle HTML radio buttons and checkboxes. Both these input elements are usually grouped together to display a list of possible choices:<p class="paragraph"/><img border="0" class="center" src="../img/choice-form-screenshot.png"></img><p class="paragraph"/>A check box can be used as single component to set a boolean property. For this purpose Wicket provides the <code>org.apache.wicket.markup.html.form.CheckBox</code> component which must be attached to <input type="checkbox".../> tag. In the next example (project SingleCheckBox) we will consider a form similar to the one used in paragraph 9.5 to edit a Person object, but with an additional checkbox to let the user decide if she wants to subscribe to our mailing list or not. The form uses the following bean as backing object:<p class="paragraph"/><div class="code"><pre><span class="java-keyword">public</span> class RegistrationInfo <span c
lass="java-keyword">implements</span> Serializable {<p class="paragraph"/> <span class="java-keyword">private</span> <span class="java-object">String</span> name;
- <span class="java-keyword">private</span> <span class="java-object">String</span> surname;
- <span class="java-keyword">private</span> <span class="java-object">String</span> address;
- <span class="java-keyword">private</span> <span class="java-object">String</span> email;
- <span class="java-keyword">private</span> <span class="java-object">boolean</span> subscribeList;<p class="paragraph"/> /*Getters and setters*/
-}</pre></div><p class="paragraph"/>The markup and the code for this example are the following:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><form wicket:id=<span class="java-quote">"form"</span>>
- <div style=<span class="java-quote">"display: table;"</span>>
- <div style=<span class="java-quote">"display: table-row;"</span>>
- <div style=<span class="java-quote">"display: table-cell;"</span>>Name: </div>
- <div style=<span class="java-quote">"display: table-cell;"</span>>
- <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"name"</span>/>
- </div>
- </div>
- <div style=<span class="java-quote">"display: table-row;"</span>>
- <div style=<span class="java-quote">"display: table-cell;"</span>>Surname: </div>
- <div style=<span class="java-quote">"display: table-cell;"</span>>
- <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"surname"</span>/>
- </div>
- </div>
- <div style=<span class="java-quote">"display: table-row;"</span>>
- <div style=<span class="java-quote">"display: table-cell;"</span>>Address: </div>
- <div style=<span class="java-quote">"display: table-cell;"</span>>
- <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"address"</span>/>
- </div>
- </div>
- <div style=<span class="java-quote">"display: table-row;"</span>>
- <div style=<span class="java-quote">"display: table-cell;"</span>>Email: </div>
- <div style=<span class="java-quote">"display: table-cell;"</span>>
- <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"email"</span>/>
- </div>
- </div>
- <div style=<span class="java-quote">"display: table-row;"</span>>
- <div style=<span class="java-quote">"display: table-cell;"</span>>Subscribe list:</div>
- <div style=<span class="java-quote">"display: table-cell;"</span>>
- <input type=<span class="java-quote">"checkbox"</span> wicket:id=<span class="java-quote">"subscribeList"</span>/>
- </div>
- </div>
- </div>
- <input type=<span class="java-quote">"submit"</span> value=<span class="java-quote">"Save"</span>/>
-</form></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre><span class="java-keyword">public</span> HomePage(<span class="java-keyword">final</span> PageParameters parameters) {
- RegistrationInfo registrtionInfo = <span class="java-keyword">new</span> RegistrationInfo();
- registrtionInfo.setSubscribeList(<span class="java-keyword">true</span>);<p class="paragraph"/> Form form = <span class="java-keyword">new</span> Form(<span class="java-quote">"form"</span>,
- <span class="java-keyword">new</span> CompoundPropertyModel<RegistrationInfo>(registrtionInfo));<p class="paragraph"/> form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"name"</span>));
- form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"surname"</span>));
- form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"address"</span>));
- form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"email"</span>));
- form.add(<span class="java-keyword">new</span> CheckBox(<span class="java-quote">"subscribeList"</span>));<p class="paragraph"/> add(form);
-}</pre></div><p class="paragraph"/>Please note that the checkbox will be initially selected because we have set to true the subscribe flag during the model object creation (with instruction registrtionInfo.setSubscribeList(true)):<p class="paragraph"/><img border="0" class="center" src="../img/subscribe-checkbox-set.png"></img><p class="paragraph"/><h3>Working with grouped checkboxes</h3><p class="paragraph"/>When we need to display a given number of options with checkboxes, we can use the <code>org.apache.wicket.markup.html.form.CheckBoxMultipleChoice</code> component. For example, If our options are a list of strings, we can display them in this way:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quote">"checkGroup"</span>>
- <input type=<span class="java-quote">"checkbox"</span>/>It will be replaced by the actual checkboxes…
-</div></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>List<<span class="java-object">String</span>> fruits = Arrays.asList(<span class="java-quote">"apple"</span>, <span class="java-quote">"strawberry"</span>, <span class="java-quote">"watermelon"</span>);
-form.add(<span class="java-keyword">new</span> CheckBoxMultipleChoice(<span class="java-quote">"checkGroup"</span>, <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>>(<span class="java-keyword">new</span>
- ArrayList<<span class="java-object">String</span>>()), fruits));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/grouped-checkbox.png"></img><p class="paragraph"/>This component can be attached to a <div> tag or to a <span> tag. No specific content is required for this tag as it will be populated with the actual checkboxes. Since this component allows multiple selection, its model object is a list. In the example above we have used model class <code>org.apache.wicket.model.util.ListModel</code> which is specifically designed to wrap a List object.<p class="paragraph"/>By default CheckBoxMultipleChoice inserts a <br/> tag as suffix after each option. We can configure both the suffix and the prefix used by the component with the setPrefix and setSuffix methods.<p class="paragraph"/>When our options are more complex objects than simple strings, we can
render them using an IChoiceRender, as we did for DropDownChoice in paragraph 9.4:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quote">"checkGroup"</span>>
- <input type=<span class="java-quote">"checkbox"</span>/>It will be replaced by actual checkboxes…
-</div></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>Person john = <span class="java-keyword">new</span> Person(<span class="java-quote">"John"</span>, <span class="java-quote">"Smith"</span>);
-Person bob = <span class="java-keyword">new</span> Person(<span class="java-quote">"Bob"</span>, <span class="java-quote">"Smith"</span>);
-Person jill = <span class="java-keyword">new</span> Person(<span class="java-quote">"Jill"</span>, <span class="java-quote">"Smith"</span>);
-List<Person> theSmiths = Arrays.asList(john, bob, jill);
-ChoiceRenderer render = <span class="java-keyword">new</span> ChoiceRenderer(<span class="java-quote">"name"</span>);
- form.add(<span class="java-keyword">new</span> CheckBoxMultipleChoice(<span class="java-quote">"checkGroup"</span>, <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>>(<span class="java-keyword">new</span> ArrayList<<span class="java-object">String</span>>()),
- theSmiths, render));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/grouped-checkbox2.png"></img><p class="paragraph"/><h3>How to implement a "Select all" checkbox</h3><p class="paragraph"/>A nice feature we can offer to users when we have a group of checkboxes is a âspecialâ checkbox which selects/unselects all the other options of the group:<p class="paragraph"/><img border="0" class="center" src="../img/select-all-checkbox.png"></img><p class="paragraph"/>Wicket comes with a couple of utility components that make it easy to implement such a feature. They are CheckboxMultipleChoiceSelector and CheckBoxSelector classes, both inside package <code>org.apache.wicket.markup.html.form</code>. The difference between these two components is that the first works with an instance of CheckBoxMultipleChoice while the second takes in input a list of CheckBox
objects:<p class="paragraph"/><div class="code"><pre>/* CheckboxMultipleChoiceSelector usage: */<p class="paragraph"/>CheckBoxMultipleChoice checkGroup;
-//checkGroup initialization…
-CheckboxMultipleChoiceSelector cbmcs = <span class="java-keyword">new</span> CheckboxMultipleChoiceSelector(<span class="java-quote">"id"</span>, checkGroup);<p class="paragraph"/>/* CheckBoxSelector usage: */<p class="paragraph"/>CheckBox checkBox1, checkBox2, checkBox3;
-//checks initialization…
-CheckBoxSelector cbmcs = <span class="java-keyword">new</span> CheckBoxSelector(<span class="java-quote">"id"</span>, checkBox1, checkBox2, checkBox3);</pre></div><p class="paragraph"/><h3>Working with grouped radio buttons</h3><p class="paragraph"/>For groups of radio buttons we can use the <code>org.apache.wicket.markup.html.form.RadioChoice</code> component which works in much the same way as CheckBoxMultipleChoice:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quote">"radioGroup"</span>>
- <input type=<span class="java-quote">"radio"</span>/>It will be replaced by actual radio buttons…
-</div></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>List<<span class="java-object">String</span>> fruits = Arrays.asList(<span class="java-quote">"apple"</span>, <span class="java-quote">"strawberry"</span>, <span class="java-quote">"watermelon"</span>);
-form.add(<span class="java-keyword">new</span> RadioChoice(<span class="java-quote">"radioGroup"</span>, Model.of(<span class="java-quote">""</span>), fruits));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/grouped-radiobutton.png"></img><p class="paragraph"/>Just like CheckBoxMultipleChoice, this component provides the setPrefix and setSuffix methods to configure the prefix and suffix for our options and it supports IChoiceRender as well. In addition, RadioChoice provides the wantOnSelectionChangedNotifications() method to notify the web server when the selected option changes (this is the same method seen for DropDownChoice in paragraph 9.4).
+<h2 id="forms2_10">12.10 Stateless form</h2>
+<p class="paragraph"/>In chapter 6 we have seen how Wicket pages can be divided into two categories: stateful and stateless. Pages that are stateless don't need to be stored in the user session and they should be used when we don't need to save any user data in the user session (for example in the public area of a site).<p class="paragraph"/>Besides saving resources on server-side, stateless pages can be adopted to improve user experience and to avoid security weaknesses. A typical situation where a stateless page can bring these benefits is when we have to implement a login page.<p class="paragraph"/>For this kind of page we might encounter two potential problems if we chose to use a stateful page. The first problem occurs when the user tries to login without a valid session assigned to him. This could happen if the user leaves the login page opened for a period of time bigger than the session's timeout and then he decides to log in. Under these conditions the user will be redirec
ted to a 'Page expired' error page, which is not exactly a nice thing for user experience.<p class="paragraph"/>The second problem occurs when a malicious user or a web crawler program attempts to login into our web application, generating a huge number of page versions and consequently increasing the size of the user session.<p class="paragraph"/>To avoid these kinds of problems we should build a stateless login page which does not depend on a user session. Wicket provides a special version of the Form component called StatelessForm which is stateless by default (i.e its method getStatelessHint() returns true), hence it's an ideal solution when we want to build a stateless page with a form. A possible implementation of our login form is the following (example project StatelessLoginForm):<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><html>
+ <head>
+ <meta charset=<span class="java-quote">"utf-8"</span> />
+ </head>
+ <body>
+ <div>Session is <b wicket:id=<span class="java-quote">"sessionType"</span>></b></div>
+ <br/>
+ <div>Type 'user' as correct credentials</div>
+ <form wicket:id=<span class="java-quote">"form"</span>>
+ <fieldset>
+ Username: <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"username"</span>/> <br/>
+ Password: <input type=<span class="java-quote">"password"</span> wicket:id=<span class="java-quote">"password"</span>/><br/>
+ <input type=<span class="java-quote">"submit"</span>/>
+ </fieldset>
+ </form>
+ <br/>
+ <div wicket:id=<span class="java-quote">"feedbackPanel"</span>></div>
+ </body>
+</html></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre><span class="java-keyword">public</span> class HomePage <span class="java-keyword">extends</span> WebPage {
+ <span class="java-keyword">private</span> Label sessionType;
+ <span class="java-keyword">private</span> <span class="java-object">String</span> password;
+ <span class="java-keyword">private</span> <span class="java-object">String</span> username;<p class="paragraph"/> <span class="java-keyword">public</span> HomePage(<span class="java-keyword">final</span> PageParameters parameters) {
+ StatelessForm form = <span class="java-keyword">new</span> StatelessForm(<span class="java-quote">"form"</span>){
+ @Override
+ <span class="java-keyword">protected</span> void onSubmit() {
+ //sign in <span class="java-keyword">if</span> username and password are âuserâ
+ <span class="java-keyword">if</span>(<span class="java-quote">"user"</span>.equals(username) && username.equals(password))
+ info(<span class="java-quote">"Username and password are correct!"</span>);
+ <span class="java-keyword">else</span>
+ error(<span class="java-quote">"Wrong username or password"</span>);
+ }
+ };<p class="paragraph"/> form.add(<span class="java-keyword">new</span> PasswordTextField(<span class="java-quote">"password"</span>));
+ form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"username"</span>));<p class="paragraph"/> add(form.setDefaultModel(<span class="java-keyword">new</span> CompoundPropertyModel(<span class="java-keyword">this</span>)));<p class="paragraph"/> add(sessionType = <span class="java-keyword">new</span> Label(<span class="java-quote">"sessionType"</span>, Model.of(<span class="java-quote">""</span>)));
+ add(<span class="java-keyword">new</span> FeedbackPanel(<span class="java-quote">"feedbackPanel"</span>));
+ }<p class="paragraph"/> @Override
+ <span class="java-keyword">protected</span> void onBeforeRender() {
+ <span class="java-keyword">super</span>.onBeforeRender();<p class="paragraph"/> <span class="java-keyword">if</span>(getSession().isTemporary())
+ sessionType.setDefaultModelObject(<span class="java-quote">"temporary"</span>);
+ <span class="java-keyword">else</span>
+ sessionType.setDefaultModelObject(<span class="java-quote">"permanent"</span>);
+ }
+}</pre></div><p class="paragraph"/>Label sessionType shows if current session is temporary or not and is set inside onBeforeRender(): if our page is really stateless the session will be always temporary. We have also inserted a feedback panel in the home page that shows if the credentials are correct. This was done to make the example form more interactive.
<div style="clear:both;margin-top:15px;"></div>
@@ -255,7 +230,7 @@ form.add(<span class="java-keyword">
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/forms2_11.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/forms2_11.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/forms2_11.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/forms2_11.html Thu Apr 24 19:41:13 2014
@@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
- <title>12.11 Selecting multiple values with ListMultipleChoices and Palette 6.x</title>
+ <title>12.11 Working with radio buttons and checkboxes 6.x</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, print" title="Style" charset="utf-8"/>
<link rel="stylesheet" href="../css/pdf.css" type="text/css" media="print" title="PDF" charset="utf-8"/>
@@ -146,7 +146,7 @@ function addJsClass() {
<div class="project">
- <h1>12.11 Selecting multiple values with ListMultipleChoices and Palette - Reference Documentation</h1>
+ <h1>12.11 Working with radio buttons and checkboxes - Reference Documentation</h1>
<p><strong>Authors:</strong> Andrea Del Bene, Martin Grigorov, Carsten Hufe, Christian Kroemer, Daniel Bartl, Paul BorÈ</p>
@@ -159,47 +159,74 @@ function addJsClass() {
-<h2 id="forms2_11">12.11 Selecting multiple values with ListMultipleChoices and Palette</h2>
-<p class="paragraph"/>Checkboxes work well when we have a small amount of options to display, but they quickly become chaotic as the number of options increases. To overcome this limit we can use the <select> tag switching it to multiple-choice mode with attribute multiple="multiple":<p class="paragraph"/><img border="0" class="center" src="../img/list-multiple-choices.png"></img><p class="paragraph"/>Now the user can select multiple options by holding down Ctrl key (or Command key for Mac) and selecting them.<p class="paragraph"/>To work with multiple choice list Wicket provides the <code>org.apache.wicket.markup.html.form.ListMultipleChoice</code> component:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><select wicket:id=<span class="java-quote">"fruits"</span>>
- <option>choice 1</option>
- <option>choice 2</option>
-</select></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>List<<span class="java-object">String</span>> fruits = Arrays.asList(<span class="java-quote">"apple"</span>, <span class="java-quote">"strawberry"</span>, <span class="java-quote">"watermelon"</span>);
-form.add(<span class="java-keyword">new</span> ListMultipleChoice(<span class="java-quote">"fruits"</span>, <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>>(<span class="java-keyword">new</span> ArrayList<<span class="java-object">String</span>>()), fruits));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/list-multiple-choices2.png"></img><p class="paragraph"/>This component must be bound to a <select> tag but the attribute multiple="multiple" is not required as it will automatically be added by the component.<p class="paragraph"/>The number of visible rows can be set with the setMaxRows(int maxRows) method.<p class="paragraph"/><h3>Component Palette</h3><p class="paragraph"/>While multiple choice list solves the problem of handling a big number of multiple choices, it is not much intuitive for end users.
That's why desktop GUIs have introduced a more complex component which can be generally referred to as multi select transfer component (it doesn't have an actual official name):<p class="paragraph"/><img border="0" class="center" src="../img/multi-select-transfer-component.png"></img><p class="paragraph"/>This kind of component is composed by two multiple-choice lists, one on the left displaying the available options and the other one on the right displaying the selected options. User can move options from a list to another by double clicking on them or using the buttons placed between the two list.<p class="paragraph"/>Built-in <code>org.apache.wicket.extensions.markup.html.form.palette.Palette</code> component provides an out-of-the-box implementation of a multi select transfer component. It works in a similar way to ListMultipleChoice:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quot
e">"palette"</span>>
- Select will be replaced by the actual content…
- <select multiple=<span class="java-quote">"multiple"</span>>
- <option>option1</option>
- <option>option2</option>
- <option>option3</option>
+<h2 id="forms2_11">12.11 Working with radio buttons and checkboxes</h2>
+<p class="paragraph"/>In this paragraph we will see which components can be used to handle HTML radio buttons and checkboxes. Both these input elements are usually grouped together to display a list of possible choices:<p class="paragraph"/><img border="0" class="center" src="../img/choice-form-screenshot.png"></img><p class="paragraph"/>A check box can be used as single component to set a boolean property. For this purpose Wicket provides the <code>org.apache.wicket.markup.html.form.CheckBox</code> component which must be attached to <input type="checkbox".../> tag. In the next example (project SingleCheckBox) we will consider a form similar to the one used in paragraph 9.5 to edit a Person object, but with an additional checkbox to let the user decide if she wants to subscribe to our mailing list or not. The form uses the following bean as backing object:<p class="paragraph"/><div class="code"><pre><span class="java-keyword">public</span> class RegistrationInfo <span c
lass="java-keyword">implements</span> Serializable {<p class="paragraph"/> <span class="java-keyword">private</span> <span class="java-object">String</span> name;
+ <span class="java-keyword">private</span> <span class="java-object">String</span> surname;
+ <span class="java-keyword">private</span> <span class="java-object">String</span> address;
+ <span class="java-keyword">private</span> <span class="java-object">String</span> email;
+ <span class="java-keyword">private</span> <span class="java-object">boolean</span> subscribeList;<p class="paragraph"/> /*Getters and setters*/
+}</pre></div><p class="paragraph"/>The markup and the code for this example are the following:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><form wicket:id=<span class="java-quote">"form"</span>>
+ <div style=<span class="java-quote">"display: table;"</span>>
+ <div style=<span class="java-quote">"display: table-row;"</span>>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>Name: </div>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>
+ <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"name"</span>/>
+ </div>
+ </div>
+ <div style=<span class="java-quote">"display: table-row;"</span>>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>Surname: </div>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>
+ <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"surname"</span>/>
+ </div>
+ </div>
+ <div style=<span class="java-quote">"display: table-row;"</span>>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>Address: </div>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>
+ <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"address"</span>/>
+ </div>
+ </div>
+ <div style=<span class="java-quote">"display: table-row;"</span>>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>Email: </div>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>
+ <input type=<span class="java-quote">"text"</span> wicket:id=<span class="java-quote">"email"</span>/>
+ </div>
+ </div>
+ <div style=<span class="java-quote">"display: table-row;"</span>>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>Subscribe list:</div>
+ <div style=<span class="java-quote">"display: table-cell;"</span>>
+ <input type=<span class="java-quote">"checkbox"</span> wicket:id=<span class="java-quote">"subscribeList"</span>/>
+ </div>
+ </div>
+ </div>
+ <input type=<span class="java-quote">"submit"</span> value=<span class="java-quote">"Save"</span>/>
+</form></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre><span class="java-keyword">public</span> HomePage(<span class="java-keyword">final</span> PageParameters parameters) {
+ RegistrationInfo registrtionInfo = <span class="java-keyword">new</span> RegistrationInfo();
+ registrtionInfo.setSubscribeList(<span class="java-keyword">true</span>);<p class="paragraph"/> Form form = <span class="java-keyword">new</span> Form(<span class="java-quote">"form"</span>,
+ <span class="java-keyword">new</span> CompoundPropertyModel<RegistrationInfo>(registrtionInfo));<p class="paragraph"/> form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"name"</span>));
+ form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"surname"</span>));
+ form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"address"</span>));
+ form.add(<span class="java-keyword">new</span> TextField(<span class="java-quote">"email"</span>));
+ form.add(<span class="java-keyword">new</span> CheckBox(<span class="java-quote">"subscribeList"</span>));<p class="paragraph"/> add(form);
+}</pre></div><p class="paragraph"/>Please note that the checkbox will be initially selected because we have set to true the subscribe flag during the model object creation (with instruction registrtionInfo.setSubscribeList(true)):<p class="paragraph"/><img border="0" class="center" src="../img/subscribe-checkbox-set.png"></img><p class="paragraph"/><h3>Working with grouped checkboxes</h3><p class="paragraph"/>When we need to display a given number of options with checkboxes, we can use the <code>org.apache.wicket.markup.html.form.CheckBoxMultipleChoice</code> component. For example, If our options are a list of strings, we can display them in this way:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quote">"checkGroup"</span>>
+ <input type=<span class="java-quote">"checkbox"</span>/>It will be replaced by the actual checkboxes…
+</div></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>List<<span class="java-object">String</span>> fruits = Arrays.asList(<span class="java-quote">"apple"</span>, <span class="java-quote">"strawberry"</span>, <span class="java-quote">"watermelon"</span>);
+form.add(<span class="java-keyword">new</span> CheckBoxMultipleChoice(<span class="java-quote">"checkGroup"</span>, <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>>(<span class="java-keyword">new</span>
+ ArrayList<<span class="java-object">String</span>>()), fruits));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/grouped-checkbox.png"></img><p class="paragraph"/>This component can be attached to a <div> tag or to a <span> tag. No specific content is required for this tag as it will be populated with the actual checkboxes. Since this component allows multiple selection, its model object is a list. In the example above we have used model class <code>org.apache.wicket.model.util.ListModel</code> which is specifically designed to wrap a List object.<p class="paragraph"/>By default CheckBoxMultipleChoice inserts a <br/> tag as suffix after each option. We can configure both the suffix and the prefix used by the component with the setPrefix and setSuffix methods.<p class="paragraph"/>When our options are more complex objects than simple strings, we can
render them using an IChoiceRender, as we did for DropDownChoice in paragraph 9.4:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quote">"checkGroup"</span>>
+ <input type=<span class="java-quote">"checkbox"</span>/>It will be replaced by actual checkboxes…
</div></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>Person john = <span class="java-keyword">new</span> Person(<span class="java-quote">"John"</span>, <span class="java-quote">"Smith"</span>);
Person bob = <span class="java-keyword">new</span> Person(<span class="java-quote">"Bob"</span>, <span class="java-quote">"Smith"</span>);
Person jill = <span class="java-keyword">new</span> Person(<span class="java-quote">"Jill"</span>, <span class="java-quote">"Smith"</span>);
-Person andrea = <span class="java-keyword">new</span> Person(<span class="java-quote">"Andrea"</span>, <span class="java-quote">"Smith"</span>);<p class="paragraph"/>List<Person> theSmiths = Arrays.asList(john, bob, jill, andrea);
-ChoiceRenderer render = <span class="java-keyword">new</span> ChoiceRenderer(<span class="java-quote">"name"</span>);<p class="paragraph"/>form.add(<span class="java-keyword">new</span> Palette(<span class="java-quote">"palette"</span>, Model.of(<span class="java-keyword">new</span> ArrayList<<span class="java-object">String</span>>()), <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>> (theSmiths), render, 5, <span class="java-keyword">true</span>));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/multi-select-transfer-component-wicket.png"></img><p class="paragraph"/>The last two parameters of the Palette's constructor (an integer value and a boolean value) are, respectively, the number of visible rows for the two lists and a flag to choose if we want to display the two optional buttons which move selec
ted options up and down. The descriptions of the two lists (âAvailableâ and âSelectedâ) can be customized providing two resources with keys palette.available and palette.selected.<p class="paragraph"/>The markup of this component uses a number of CSS classes which can be extended/overriden to customize the style of the component. We can find these classes and see which tags they decorate in the default markup file of the component:<p class="paragraph"/><div class="code"><pre><table cellspacing=<span class="java-quote">"0"</span> cellpadding=<span class="java-quote">"2"</span> class=<span class="java-quote">"palette"</span>>
-<tr>
- <td class=<span class="java-quote">"header headerAvailable"</span>><span wicket:id=<span class="java-quote">"availableHeader"</span>>[available header]</span></td>
- <td>&#160;</td>
- <td class=<span class="java-quote">"header headerSelected"</span>><span wicket:id=<span class="java-quote">"selectedHeader"</span>>[selected header]</span>
- </td>
-</tr>
-<tr>
- <td class=<span class="java-quote">"pane choices"</span>>
- <select wicket:id=<span class="java-quote">"choices"</span> class=<span class="java-quote">"choicesSelect"</span>>[choices]</select>
- </td>
- <td class=<span class="java-quote">"buttons"</span>>
- <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"addButton"</span> class=<span class="java-quote">"button add"</span>><div/>
- </button><br/>
- <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"removeButton"</span> class=<span class="java-quote">"button remove"</span>><div/>
- </button><br/>
- <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"moveUpButton"</span> class=<span class="java-quote">"button up"</span>><div/>
- </button><br/>
- <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"moveDownButton"</span> class=<span class="java-quote">"button down"</span>><div/>
- </button><br/>
- </td>
- <td class=<span class="java-quote">"pane selection"</span>>
- <select class=<span class="java-quote">"selectionSelect"</span> wicket:id=<span class="java-quote">"selection"</span>>[selection]</select>
- </td>
-</tr>
-</table></pre></div>
+List<Person> theSmiths = Arrays.asList(john, bob, jill);
+ChoiceRenderer render = <span class="java-keyword">new</span> ChoiceRenderer(<span class="java-quote">"name"</span>);
+ form.add(<span class="java-keyword">new</span> CheckBoxMultipleChoice(<span class="java-quote">"checkGroup"</span>, <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>>(<span class="java-keyword">new</span> ArrayList<<span class="java-object">String</span>>()),
+ theSmiths, render));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/grouped-checkbox2.png"></img><p class="paragraph"/><h3>How to implement a "Select all" checkbox</h3><p class="paragraph"/>A nice feature we can offer to users when we have a group of checkboxes is a âspecialâ checkbox which selects/unselects all the other options of the group:<p class="paragraph"/><img border="0" class="center" src="../img/select-all-checkbox.png"></img><p class="paragraph"/>Wicket comes with a couple of utility components that make it easy to implement such a feature. They are CheckboxMultipleChoiceSelector and CheckBoxSelector classes, both inside package <code>org.apache.wicket.markup.html.form</code>. The difference between these two components is that the first works with an instance of CheckBoxMultipleChoice while the second takes in input a list of CheckBox
objects:<p class="paragraph"/><div class="code"><pre>/* CheckboxMultipleChoiceSelector usage: */<p class="paragraph"/>CheckBoxMultipleChoice checkGroup;
+//checkGroup initialization…
+CheckboxMultipleChoiceSelector cbmcs = <span class="java-keyword">new</span> CheckboxMultipleChoiceSelector(<span class="java-quote">"id"</span>, checkGroup);<p class="paragraph"/>/* CheckBoxSelector usage: */<p class="paragraph"/>CheckBox checkBox1, checkBox2, checkBox3;
+//checks initialization…
+CheckBoxSelector cbmcs = <span class="java-keyword">new</span> CheckBoxSelector(<span class="java-quote">"id"</span>, checkBox1, checkBox2, checkBox3);</pre></div><p class="paragraph"/><h3>Working with grouped radio buttons</h3><p class="paragraph"/>For groups of radio buttons we can use the <code>org.apache.wicket.markup.html.form.RadioChoice</code> component which works in much the same way as CheckBoxMultipleChoice:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quote">"radioGroup"</span>>
+ <input type=<span class="java-quote">"radio"</span>/>It will be replaced by actual radio buttons…
+</div></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>List<<span class="java-object">String</span>> fruits = Arrays.asList(<span class="java-quote">"apple"</span>, <span class="java-quote">"strawberry"</span>, <span class="java-quote">"watermelon"</span>);
+form.add(<span class="java-keyword">new</span> RadioChoice(<span class="java-quote">"radioGroup"</span>, Model.of(<span class="java-quote">""</span>), fruits));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/grouped-radiobutton.png"></img><p class="paragraph"/>Just like CheckBoxMultipleChoice, this component provides the setPrefix and setSuffix methods to configure the prefix and suffix for our options and it supports IChoiceRender as well. In addition, RadioChoice provides the wantOnSelectionChangedNotifications() method to notify the web server when the selected option changes (this is the same method seen for DropDownChoice in paragraph 9.4).
<div style="clear:both;margin-top:15px;"></div>
@@ -228,7 +255,7 @@ ChoiceRenderer render = <span class="jav
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/forms2_12.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/forms2_12.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/forms2_12.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/forms2_12.html Thu Apr 24 19:41:13 2014
@@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
- <title>12.12 Summary 6.x</title>
+ <title>12.12 Selecting multiple values with ListMultipleChoices and Palette 6.x</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, print" title="Style" charset="utf-8"/>
<link rel="stylesheet" href="../css/pdf.css" type="text/css" media="print" title="PDF" charset="utf-8"/>
@@ -146,7 +146,7 @@ function addJsClass() {
<div class="project">
- <h1>12.12 Summary - Reference Documentation</h1>
+ <h1>12.12 Selecting multiple values with ListMultipleChoices and Palette - Reference Documentation</h1>
<p><strong>Authors:</strong> Andrea Del Bene, Martin Grigorov, Carsten Hufe, Christian Kroemer, Daniel Bartl, Paul BorÈ</p>
@@ -159,10 +159,47 @@ function addJsClass() {
-<h2 id="forms2_12">12.12 Summary</h2>
-
-Forms are the standard solution to let users interact with our web applications. In this chapter we have seen the three steps involved with the form processing workflow in Wicket. We have started looking at form validation and feedback messages generation, then we have seen how Wicket converts input values into Java objects and vice versa.<p class="paragraph"/>In the second part of the chapter we learnt how to build reusable form components and how to implement a stateless form. We have ended the chapter with an overview of the built-in form components needed to handle standard input form elements like checkboxes, radio buttons and multiple selections lists.<p class="paragraph"/>
-
+<h2 id="forms2_12">12.12 Selecting multiple values with ListMultipleChoices and Palette</h2>
+<p class="paragraph"/>Checkboxes work well when we have a small amount of options to display, but they quickly become chaotic as the number of options increases. To overcome this limit we can use the <select> tag switching it to multiple-choice mode with attribute multiple="multiple":<p class="paragraph"/><img border="0" class="center" src="../img/list-multiple-choices.png"></img><p class="paragraph"/>Now the user can select multiple options by holding down Ctrl key (or Command key for Mac) and selecting them.<p class="paragraph"/>To work with multiple choice list Wicket provides the <code>org.apache.wicket.markup.html.form.ListMultipleChoice</code> component:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><select wicket:id=<span class="java-quote">"fruits"</span>>
+ <option>choice 1</option>
+ <option>choice 2</option>
+</select></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>List<<span class="java-object">String</span>> fruits = Arrays.asList(<span class="java-quote">"apple"</span>, <span class="java-quote">"strawberry"</span>, <span class="java-quote">"watermelon"</span>);
+form.add(<span class="java-keyword">new</span> ListMultipleChoice(<span class="java-quote">"fruits"</span>, <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>>(<span class="java-keyword">new</span> ArrayList<<span class="java-object">String</span>>()), fruits));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/list-multiple-choices2.png"></img><p class="paragraph"/>This component must be bound to a <select> tag but the attribute multiple="multiple" is not required as it will automatically be added by the component.<p class="paragraph"/>The number of visible rows can be set with the setMaxRows(int maxRows) method.<p class="paragraph"/><h3>Component Palette</h3><p class="paragraph"/>While multiple choice list solves the problem of handling a big number of multiple choices, it is not much intuitive for end users.
That's why desktop GUIs have introduced a more complex component which can be generally referred to as multi select transfer component (it doesn't have an actual official name):<p class="paragraph"/><img border="0" class="center" src="../img/multi-select-transfer-component.png"></img><p class="paragraph"/>This kind of component is composed by two multiple-choice lists, one on the left displaying the available options and the other one on the right displaying the selected options. User can move options from a list to another by double clicking on them or using the buttons placed between the two list.<p class="paragraph"/>Built-in <code>org.apache.wicket.extensions.markup.html.form.palette.Palette</code> component provides an out-of-the-box implementation of a multi select transfer component. It works in a similar way to ListMultipleChoice:<p class="paragraph"/><strong class="bold">HTML:</strong><p class="paragraph"/><div class="code"><pre><div wicket:id=<span class="java-quot
e">"palette"</span>>
+ Select will be replaced by the actual content…
+ <select multiple=<span class="java-quote">"multiple"</span>>
+ <option>option1</option>
+ <option>option2</option>
+ <option>option3</option>
+</div></pre></div><p class="paragraph"/><strong class="bold">Java code:</strong><p class="paragraph"/><div class="code"><pre>Person john = <span class="java-keyword">new</span> Person(<span class="java-quote">"John"</span>, <span class="java-quote">"Smith"</span>);
+Person bob = <span class="java-keyword">new</span> Person(<span class="java-quote">"Bob"</span>, <span class="java-quote">"Smith"</span>);
+Person jill = <span class="java-keyword">new</span> Person(<span class="java-quote">"Jill"</span>, <span class="java-quote">"Smith"</span>);
+Person andrea = <span class="java-keyword">new</span> Person(<span class="java-quote">"Andrea"</span>, <span class="java-quote">"Smith"</span>);<p class="paragraph"/>List<Person> theSmiths = Arrays.asList(john, bob, jill, andrea);
+ChoiceRenderer render = <span class="java-keyword">new</span> ChoiceRenderer(<span class="java-quote">"name"</span>);<p class="paragraph"/>form.add(<span class="java-keyword">new</span> Palette(<span class="java-quote">"palette"</span>, Model.of(<span class="java-keyword">new</span> ArrayList<<span class="java-object">String</span>>()), <span class="java-keyword">new</span> ListModel<<span class="java-object">String</span>> (theSmiths), render, 5, <span class="java-keyword">true</span>));</pre></div><p class="paragraph"/><strong class="bold">Screenshot:</strong><p class="paragraph"/><img border="0" class="center" src="../img/multi-select-transfer-component-wicket.png"></img><p class="paragraph"/>The last two parameters of the Palette's constructor (an integer value and a boolean value) are, respectively, the number of visible rows for the two lists and a flag to choose if we want to display the two optional buttons which move selec
ted options up and down. The descriptions of the two lists (âAvailableâ and âSelectedâ) can be customized providing two resources with keys palette.available and palette.selected.<p class="paragraph"/>The markup of this component uses a number of CSS classes which can be extended/overriden to customize the style of the component. We can find these classes and see which tags they decorate in the default markup file of the component:<p class="paragraph"/><div class="code"><pre><table cellspacing=<span class="java-quote">"0"</span> cellpadding=<span class="java-quote">"2"</span> class=<span class="java-quote">"palette"</span>>
+<tr>
+ <td class=<span class="java-quote">"header headerAvailable"</span>><span wicket:id=<span class="java-quote">"availableHeader"</span>>[available header]</span></td>
+ <td>&#160;</td>
+ <td class=<span class="java-quote">"header headerSelected"</span>><span wicket:id=<span class="java-quote">"selectedHeader"</span>>[selected header]</span>
+ </td>
+</tr>
+<tr>
+ <td class=<span class="java-quote">"pane choices"</span>>
+ <select wicket:id=<span class="java-quote">"choices"</span> class=<span class="java-quote">"choicesSelect"</span>>[choices]</select>
+ </td>
+ <td class=<span class="java-quote">"buttons"</span>>
+ <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"addButton"</span> class=<span class="java-quote">"button add"</span>><div/>
+ </button><br/>
+ <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"removeButton"</span> class=<span class="java-quote">"button remove"</span>><div/>
+ </button><br/>
+ <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"moveUpButton"</span> class=<span class="java-quote">"button up"</span>><div/>
+ </button><br/>
+ <button type=<span class="java-quote">"button"</span> wicket:id=<span class="java-quote">"moveDownButton"</span> class=<span class="java-quote">"button down"</span>><div/>
+ </button><br/>
+ </td>
+ <td class=<span class="java-quote">"pane selection"</span>>
+ <select class=<span class="java-quote">"selectionSelect"</span> wicket:id=<span class="java-quote">"selection"</span>>[selection]</select>
+ </td>
+</tr>
+</table></pre></div>
<div style="clear:both;margin-top:15px;"></div>
@@ -191,7 +228,7 @@ Forms are the standard solution to let u
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Added: wicket/common/site/trunk/_site/guide/guide/pages/forms2_13.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/forms2_13.html?rev=1589849&view=auto
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/forms2_13.html (added)
+++ wicket/common/site/trunk/_site/guide/guide/pages/forms2_13.html Thu Apr 24 19:41:13 2014
@@ -0,0 +1,202 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+ <title>12.13 Summary 6.x</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, print" title="Style" charset="utf-8"/>
+ <link rel="stylesheet" href="../css/pdf.css" type="text/css" media="print" title="PDF" charset="utf-8"/>
+ <script type="text/javascript">
+function addJsClass() {
+ var classes = document.body.className.split(" ");
+ classes.push("js");
+ document.body.className = classes.join(" ");
+}
+ </script>
+</head>
+
+<body class="body" onload="addJsClass();">
+<div id="navigation">
+ <ul>
+ <li>
+ <div id="nav-summary" onmouseover="toggleNavSummary(false)" onmouseout="toggleNavSummary(true)">
+ <a href="../../guide/index.html" class="button">Table of contents</a>
+
+ <div id="nav-summary-childs" style="display:none;">
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/introduction.html"><strong>1</strong><span>Introduction</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/howToSource.html"><strong>2</strong><span>How to use the example code</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/whyLearn.html"><strong>3</strong><span>Why should I learn Wicket?</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/helloWorld.html"><strong>4</strong><span>Wicket says “Hello world!”</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/layout.html"><strong>5</strong><span>Wicket as page layout manager</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/keepControl.html"><strong>6</strong><span>Keeping control over HTML</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/componentLifecycle.html"><strong>7</strong><span>Components lifecycle</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/versioningCaching.html"><strong>8</strong><span>Page versioning and caching</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/requestProcessing.html"><strong>9</strong><span>Under the hood of the request processing</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/urls.html"><strong>10</strong><span>Wicket Links and URL generation</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/modelsforms.html"><strong>11</strong><span>Wicket models and forms</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/forms2.html"><strong>12</strong><span>Wicket forms in detail</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/repeaters.html"><strong>13</strong><span>Displaying multiple items with repeaters</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/i18n.html"><strong>14</strong><span>Internationalization with Wicket</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/resources.html"><strong>15</strong><span>Resource management with Wicket</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/jsintegration.html"><strong>16</strong><span>An example of integration with JavaScript</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/advanced.html"><strong>17</strong><span>Wicket advanced topics</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/ajax.html"><strong>18</strong><span>Working with AJAX</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/jee.html"><strong>19</strong><span>Integration with enterprise containers</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/nativewebsockets.html"><strong>20</strong><span>Native WebSockets</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/security.html"><strong>21</strong><span>Security with Wicket</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/testing.html"><strong>22</strong><span>Test Driven Development with Wicket</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/testingspring.html"><strong>23</strong><span>Test Driven Development with Wicket and Spring</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/bestpractices.html"><strong>24</strong><span>Wicket Best Practices</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/maven.html"><strong>25</strong><span>Working with Maven (Appendix)</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/wicketstuff.html"><strong>26</strong><span>Project WicketStuff (Appendix)</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/redirects.html"><strong>27</strong><span>Lost In Redirection With Apache Wicket (Appendix)</span></a>
+ </div>
+
+ <div class="toc-item" style="margin-left:0"><a href="../../guide/contributing.html"><strong>28</strong><span>Contributing to this guide (Appendix)</span></a>
+ </div>
+
+ </div>
+ </div>
+ </li>
+ <li class="separator selected">
+ <a id="ref-button" onclick="localToggle(); return false;" href="#">Quick Reference</a>
+ </li>
+ </ul>
+</div>
+<div id="header">
+ <div class="images clearfix">
+
+ <span id="logo"><a href="/" target="_blank"><img height="80px" src="http://wicket.apache.org/guide/img/apache-wicket.png"/></a></span>
+
+
+ <span id="sponsor"><a href="http://www.apache.org/" target="_blank"><img height="60px" src="http://wicket.apache.org/guide/img/asf_logo.gif"/></a></span>
+
+ </div>
+ <p>Free Online Guide for Apache Wicket framework</p>
+</div>
+
+
+<table id="colset" border="0" cellpadding="0" cellspacing="0">
+ <tr>
+ <td id="col1">
+ <div id="main" class="corner-all">
+
+
+ <div class="toc-item prev-left"><a href="../../guide/modelsforms.html"><< <strong>11</strong><span>Wicket models and forms</span></a></div>
+
+
+ <span id='toggle-col1' class="toggle">(<a href="#" onclick="localToggle(); return false;">Quick Reference</a>)</span>
+
+
+ <div class="toc-item next-right"><a href="../../guide/repeaters.html"><strong>13</strong><span>Displaying multiple items with repeaters</span> >></a></div>
+
+
+
+ <div class="project">
+ <h1>12.13 Summary - Reference Documentation</h1>
+
+ <p><strong>Authors:</strong> Andrea Del Bene, Martin Grigorov, Carsten Hufe, Christian Kroemer, Daniel Bartl, Paul BorÈ</p>
+
+ <p><strong>Version:</strong> 6.x</p>
+
+
+ </div>
+
+
+
+
+
+<h2 id="forms2_13">12.13 Summary</h2>
+
+Forms are the standard solution to let users interact with our web applications. In this chapter we have seen the three steps involved with the form processing workflow in Wicket. We have started looking at form validation and feedback messages generation, then we have seen how Wicket converts input values into Java objects and vice versa.<p class="paragraph"/>In the second part of the chapter we learnt how to build reusable form components and how to implement a stateless form. We have ended the chapter with an overview of the built-in form components needed to handle standard input form elements like checkboxes, radio buttons and multiple selections lists.<p class="paragraph"/>
+
+
+
+ <div style="clear:both;margin-top:15px;"></div>
+
+ <div class="toc-item prev-left"><a href="../../guide/modelsforms.html"><< <strong>11</strong><span>Wicket models and forms</span></a></div>
+
+ <div class="toc-item next-right"><a href="../../guide/repeaters.html"><strong>13</strong><span>Displaying multiple items with repeaters</span> >></a></div>
+
+ <div style="clear:both"></div>
+ </div>
+ </td>
+ <td id="col2">
+ <div class="local clearfix">
+ <div class="local-title">
+ <a href="../../guide/index.html" target="mainFrame">Quick Reference</a>
+ <span class="toggle">(<a href="#" onclick="localToggle(); return false;">hide</a>)</span>
+ </div>
+ <div class="menu">
+
+ </div>
+ </div>
+ </td>
+ </tr>
+</table>
+
+<div id="footer">
+
+Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
+
+
+</div>
+
+<script type="text/javascript" src="../js/docs.js"></script>
+
+</body>
+</html>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/forms2_2.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/forms2_2.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/forms2_2.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/forms2_2.html Thu Apr 24 19:41:13 2014
@@ -250,7 +250,7 @@ Remember that component model is updated
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>
Modified: wicket/common/site/trunk/_site/guide/guide/pages/forms2_3.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/guide/guide/pages/forms2_3.html?rev=1589849&r1=1589848&r2=1589849&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/guide/guide/pages/forms2_3.html (original)
+++ wicket/common/site/trunk/_site/guide/guide/pages/forms2_3.html Thu Apr 24 19:41:13 2014
@@ -249,7 +249,7 @@ If the user input can not be converted t
<div id="footer">
Copyright © 2013-2014 â <a href="http://www.apache.org/" target="_blank">The Apache Software Foundation</a>
- â <b style="color:#E8590A !important;">(Generated on: 2014-04-10)</b>
+ â <b style="color:#E8590A !important;">(Generated on: 2014-04-24)</b>
</div>