You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bu...@apache.org on 2015/08/02 00:19:41 UTC
svn commit: r960460 - in /websites/production/tapestry/content:
cache/main.pageCache component-events.html css.html forms-and-validation.html
Author: buildbot
Date: Sat Aug 1 22:19:41 2015
New Revision: 960460
Log:
Production update by buildbot for tapestry
Modified:
websites/production/tapestry/content/cache/main.pageCache
websites/production/tapestry/content/component-events.html
websites/production/tapestry/content/css.html
websites/production/tapestry/content/forms-and-validation.html
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
Modified: websites/production/tapestry/content/component-events.html
==============================================================================
--- websites/production/tapestry/content/component-events.html (original)
+++ websites/production/tapestry/content/component-events.html Sat Aug 1 22:19:41 2015
@@ -133,11 +133,11 @@
</div>
</li></ul>
-</div><p>Let's review a simple example. Here's a portion of the template for a page (let's call it "Chooser") that lets the user choose a number between 1 and 10:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div><p>Let's review a simple example. Here's a portion of the template for a page (let's call it "Chooser") that lets the user choose a number between 1 and 10:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Chooser.tml (partial)</b></div><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"><p> Choose a number from 1 to 10:
<t:count end="10" value="index">
- <a t:id="select" t:type="actionlink" context="index">${index}</t:comp>
+ <a t:id="select" t:type="actionlink" context="index">${index}</a>
</t:count>
</p>
</pre>
Modified: websites/production/tapestry/content/css.html
==============================================================================
--- websites/production/tapestry/content/css.html (original)
+++ websites/production/tapestry/content/css.html Sat Aug 1 22:19:41 2015
@@ -114,7 +114,7 @@
</div>
</li></ul>
-</div><p>Tapestry includes sophisticated support for CSS in the form of annotation-based linking, far-future expire headers, automatic duplicate removal, and other features provided for <a shape="rect" href="assets.html">assets</a>.</p><h2 id="CSS-Defaultstylesheet">Default style sheet</h2><p>Tapestry includes a built-in style sheet, tapestry.css, in all HTML documents (documents that have an outer <html> element and a nested <head> element), as part of the "core" JavaScript stack. The core JavaScript stack also includes the CSS for <a shape="rect" class="external-link" href="http://getbootstrap.com/" >Bootstrap 3.1.1</a>.</p><h2 id="CSS-AddingyourownCSS">Adding your own CSS</h2><p>A page or component (for example, a <a shape="rect" href="layout-component.html">layout component</a>) that is rendering the <head> tag can add a style sheet directly in the markup.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div><p>Tapestry includes sophisticated support for CSS in the form of annotation-based linking, far-future expire headers, automatic duplicate removal, and other features provided for <a shape="rect" href="assets.html">assets</a>.</p><h2 id="CSS-Defaultstylesheet">Default style sheet</h2><p>Tapestry includes a built-in style sheet, tapestry.css, in all HTML documents (documents that have an outer <html> element and a nested <head> element), as part of the "core" JavaScript stack. For Tapestry 5.4 and later, the core JavaScript stack also includes the CSS for <a shape="rect" class="external-link" href="http://getbootstrap.com/" >Bootstrap 3.1.1</a>.</p><h2 id="CSS-AddingyourownCSS">Adding your own CSS</h2><p>A page or component (for example, a <a shape="rect" href="layout-component.html">layout component</a>) that is rendering the <head> tag can add a style sheet directly in the markup.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeCont
ent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"><head>
<link href="/css/site.css" rel="stylesheet" type="text/css"/>
. . .
Modified: websites/production/tapestry/content/forms-and-validation.html
==============================================================================
--- websites/production/tapestry/content/forms-and-validation.html (original)
+++ websites/production/tapestry/content/forms-and-validation.html Sat Aug 1 22:19:41 2015
@@ -107,17 +107,16 @@
</div>
</li></ul>
</div><p> </p><p>Tapestry provides support for creating and rendering forms, populating their fields, and validating user input. For simple cases, input validation is declarative, meaning you simply tell Tapestry what validations to apply to a given field, and it takes care of it on the server and (optionally) on the client as well. In addition, you can provide event handler methods in your page or component classes to handle more complex validation scenarios.</p><p>Finally, Tapestry not only makes it easy to present errors messages to the user, but it can also automatically highlight form fields when validation fails.</p><p><strong>Contents</strong></p><p><style type="text/css">/*<![CDATA[*/
-div.rbtoc1438463978457 {padding: 0px;}
-div.rbtoc1438463978457 ul {list-style: disc;margin-left: 0px;}
-div.rbtoc1438463978457 li {margin-left: 0px;padding-left: 0px;}
+div.rbtoc1438467572974 {padding: 0px;}
+div.rbtoc1438467572974 ul {list-style: disc;margin-left: 0px;}
+div.rbtoc1438467572974 li {margin-left: 0px;padding-left: 0px;}
-/*]]>*/</style></p><div class="toc-macro rbtoc1438463978457">
+/*]]>*/</style></p><div class="toc-macro rbtoc1438467572974">
<ul class="toc-indentation"><li>Related Articles</li></ul>
-<ul><li><a shape="rect" href="#FormsandValidation-TheFormComponent">The Form Component</a>
-<ul class="toc-indentation"><li><a shape="rect" href="#FormsandValidation-FormEvents">Form Events</a></li><li><a shape="rect" href="#FormsandValidation-HandlingEvents">Handling Events</a></li><li><a shape="rect" href="#FormsandValidation-TrackingValidationErrors">Tracking Validation Errors</a></li><li><a shape="rect" href="#FormsandValidation-StoringDataBetweenRequests">Storing Data Between Requests</a></li><li><a shape="rect" href="#FormsandValidation-ConfiguringFieldsandLabels">Configuring Fields and Labels</a></li><li><a shape="rect" href="#FormsandValidation-CentralizingValidationwith@Validate">Centralizing Validation with @Validate</a></li><li><a shape="rect" href="#FormsandValidation-ServerSideValidation">Server Side Validation</a></li><li><a shape="rect" href="#FormsandValidation-CustomizingValidationMessages">Customizing Validation Messages</a>
+<ul><li><a shape="rect" href="#FormsandValidation-TheFormComponent">The Form Component</a></li><li><a shape="rect" href="#FormsandValidation-FormEvents">Form Events</a></li><li><a shape="rect" href="#FormsandValidation-HandlingEvents">Handling Events</a></li><li><a shape="rect" href="#FormsandValidation-TrackingValidationErrors">Tracking Validation Errors</a></li><li><a shape="rect" href="#FormsandValidation-StoringDataBetweenRequests">Storing Data Between Requests</a></li><li><a shape="rect" href="#FormsandValidation-ConfiguringFieldsandLabels">Configuring Fields and Labels</a></li><li><a shape="rect" href="#FormsandValidation-CentralizingValidationwith@Validate">Centralizing Validation with @Validate</a></li><li><a shape="rect" href="#FormsandValidation-ServerSideValidation">Server Side Validation</a></li><li><a shape="rect" href="#FormsandValidation-CustomizingValidationMessages">Customizing Validation Messages</a>
<ul class="toc-indentation"><li><a shape="rect" href="#FormsandValidation-CustomizingValidationMessagesforBeanEditForm">Customizing Validation Messages for BeanEditForm</a></li></ul>
</li><li><a shape="rect" href="#FormsandValidation-ConfiguringValidatorContraintsintheMessageCatalog">Configuring Validator Contraints in the Message Catalog</a></li><li><a shape="rect" href="#FormsandValidation-ValidationMacros">Validation Macros</a></li><li><a shape="rect" href="#FormsandValidation-OverridingtheTranslatorwithEvents">Overriding the Translator with Events</a></li></ul>
-</li></ul></div><h1 id="FormsandValidation-TheFormComponent">The Form Component</h1><p>The core of Tapestry's form support is the <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Form.html">Form</a> component. The Form component encloses (wraps around) all the other <em>field components</em> such as <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/TextField.html">TextField</a>, <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/TextArea.html">TextArea</a>, <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Checkbox.html">Checkbox</a>, etc.</p><h2 id="FormsandValidation-FormEvents">Form Events</h2><p>The Form component emits a number of <a shape="rect" href="component-events.html">
component events</a>. You'll want to provide event handler methods for some of these.</p><p>When rendering, the Form component emits two events: first, "prepareForRender", then "prepare". These allow the Form's container to set up any fields or properties that will be referenced in the form. For example, this is a good place to create a temporary entity object to be rendered, or to load an entity from a database to be edited.</p><p>When user submits the form on the client, a series of steps occur on the server.</p><p>First, the Form emits a "prepareForSubmit" event, then a "prepare" event. These allow the container to ensure that objects are set up and ready to receive information from the form submission.</p><p>Next, all the fields inside the form are <em>activated</em> to pull values out of the incoming request, validate them and (if valid) store the changes.</p><div class="navmenu" style="float:right; width:25%; background:#eee; margin:3px; padding:3px">
+</div><h2 id="FormsandValidation-TheFormComponent">The Form Component</h2><p>The core of Tapestry's form support is the <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Form.html">Form</a> component. The Form component encloses (wraps around) all the other <em>field components</em> such as <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/TextField.html">TextField</a>, <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/TextArea.html">TextArea</a>, <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Checkbox.html">Checkbox</a>, etc.</p><h2 id="FormsandValidation-FormEvents">Form Events</h2><p>The Form component emits a number of <a shape="rect" href="component-events.html">component
events</a>. You'll want to provide event handler methods for some of these.</p><p>When rendering, the Form component emits two events: first, "prepareForRender", then "prepare". These allow the Form's container to set up any fields or properties that will be referenced in the form. For example, this is a good place to create a temporary entity object to be rendered, or to load an entity from a database to be edited.</p><p>When user submits the form on the client, a series of steps occur on the server.</p><p>First, the Form emits a "prepareForSubmit" event, then a "prepare" event. These allow the container to ensure that objects are set up and ready to receive information from the form submission.</p><p>Next, all the fields inside the form are <em>activated</em> to pull values out of the incoming request, validate them and (if valid) store the changes.</p><div class="navmenu" style="float:right; width:25%; background:#eee; margin:3px; padding:3px">
<p><em>For Tapestry 4 Users:</em> Tapestry 5 does not use the fragile "form rewind" approach from Tapestry 4. Instead, a hidden field generated during the render stores the information needed to process the form submission.</p></div> <p>After the fields have done their processing, the Form emits a "validate" event. This is your chance to perform any cross-form validation that can't be described declaratively.</p><p>Next, the Form determines if there have been any validation errors. If there have been, then the submission is considered a failure, and a "failure" event is emitted. If there have been no validation errors, then a "success" event is emitted.</p><p>Finally, the Form emits a "submit" event, for logic that doesn't care about success or failure.</p><div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Form Event (in order)</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Phase</p></th><th colspan
="1" rowspan="1" class="confluenceTh"><p>When emitted (and typical use)</p></th><th colspan="1" rowspan="1" class="confluenceTh">Method Name</th><th colspan="1" rowspan="1" class="confluenceTh">@OnEvent Constant</th></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>prepareForRender</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Render</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Before rendering the form (e.g. load an entity from a database to be edited)</p></td><td colspan="1" rowspan="1" class="confluenceTd">onPrepareForRender()</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.PREPARE_FOR_RENDER</td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>prepare</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Render</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Before rendering the form, but after <em>prepareForRender</em></p></td><td colspan="1" rowspan="1" c
lass="confluenceTd">onPrepare()</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.PREPARE</td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>prepareForSubmit</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Submit</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Before the submitted form is processed</p></td><td colspan="1" rowspan="1" class="confluenceTd">onPrepareForSubmit()</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.PREPARE_FOR_SUBMIT</td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>prepare</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Submit</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Before the submitted form is processed, but after <em>prepareForSubmit</em></p></td><td colspan="1" rowspan="1" class="confluenceTd">onPrepare()</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.PREPARE</td></tr><tr><td cols
pan="1" rowspan="1" class="confluenceTd"><p><strong>validate</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Submit</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>After fields have been populated from submitted values and validated (e.g. perform cross-field validation)</p></td><td colspan="1" rowspan="1" class="confluenceTd">onValidate</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.VALIDATE</td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>validateForm</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Submit</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>same as <em>validate (deprecated – do not use)<br clear="none"></em></p></td><td colspan="1" rowspan="1" class="confluenceTd"><em>onValidateForm</em></td><td colspan="1" rowspan="1" class="confluenceTd"> </td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>failure</strong></p></td><td colspan=
"1" rowspan="1" class="confluenceTd"><p>Submit</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>After one or more validation errors have occurred</p></td><td colspan="1" rowspan="1" class="confluenceTd">onFailure()</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.FAILURE</td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>success</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Submit</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>When validation has completed <em>without</em> any errors (e.g. save changes to the database)</p></td><td colspan="1" rowspan="1" class="confluenceTd">onSuccess()</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.SUCCESS</td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p><strong>submit</strong></p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Submit</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>After all validation (s
uccess or failure) has finished</p></td><td colspan="1" rowspan="1" class="confluenceTd">onSubmit()</td><td colspan="1" rowspan="1" class="confluenceTd">EventConstants.SUBMIT</td></tr></tbody></table></div><p>Note that the "prepare" event is emitted during both form rendering and form submission.</p><h2 id="FormsandValidation-HandlingEvents">Handling Events</h2><p>Main Article: <a shape="rect" href="component-events.html">Component Events</a></p><p>You handle events by providing methods in your page or component class, either following the on<strong><em>Event</em></strong>From<strong><em>Component</em></strong>() naming convention or using the OnEvent annotation. For example:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Event Handler Using Naming Convention</b></div><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> void onValidateFromPassword() { ...}</pre>
</div></div><p>or the equivalent using @OnEvent:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Event Handler Using @OnEvent Annotation</b></div><div class="codeContent panelContent pdl">
@@ -125,7 +124,7 @@ div.rbtoc1438463978457 li {margin-left:
void verifyThePassword() { ...}</pre>
</div></div><h2 id="FormsandValidation-TrackingValidationErrors">Tracking Validation Errors</h2><p>Associated with the Form is a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ValidationTracker.html">ValidationTracker</a> that tracks all the provided user input and validation errors for every field in the form. The tracker can be provided to the Form via the Form's tracker parameter, but this is rarely necessary.</p><p>The Form includes methods <code>isValid()</code> and <code>getHasErrors()</code>, which are used to see if the Form's validation tracker contains any errors.</p><p>In your own logic, it is possible to record your own errors. Form includes two different versions of method <code>recordError()</code>, one of which specifies a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Field.html">Field</a> (an interface implemented by all form element components),
and one of which is for "global" errors, not associated with any particular field. If the error concerns only a single field, you should use the first version so that the field will be highlighted.</p><h2 id="FormsandValidation-StoringDataBetweenRequests">Storing Data Between Requests</h2><p></p><div class="navmenu" style="float:right; width:40%; background:white; margin:3px; padding:3px">
<div class="confluence-information-macro confluence-information-macro-information"><p class="title">New in Tapestry 5.4</p><span class="aui-icon aui-icon-small aui-iconfont-info confluence-information-macro-icon"></span><div class="confluence-information-macro-body">
-<p>Starting in Tapestry 5.4, the default behavior for server-side validation failures is to re-render the page within the same request (rather than emitting a redirect). This removes the need to use a session-persistent field to store the validation tracker when validation failures occur.</p></div></div></div>As with other action requests, the result of a form submission (except when using <a shape="rect" href="ajax-and-zones.html">Zones</a>) is to send a redirect to the client, which results in a second request (to re-render the page). The ValidationTracker must be <a shape="rect" href="persistent-page-data.html">persisted</a> (generally in the HttpSession) across these two requests in order to prevent the loss of validation information. Fortunately, the default ValidationTracker provided by the Form component is persistent, so you don't normally have to worry about it.<p>However, for the same reason, the individual fields updated by the components should also be persisted across r
equests, and this is something you <strong>do</strong> need to do yourself – generally with the @Persist annotation.</p><p>For example, a Login page, which collects a user name and a password, might look like:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<p>Starting in Tapestry 5.4, the default behavior for server-side validation failures is to re-render the page within the same request (rather than emitting a redirect). This removes the need to use a session-persistent field to store the validation tracker when validation failures occur.</p></div></div></div>As with other action requests, the result of a form submission (except when using <a shape="rect" href="ajax-and-zones.html">Zones</a>) is to send a redirect to the client, which results in a second request (to re-render the page). The ValidationTracker must be <a shape="rect" href="persistent-page-data.html">persisted</a> (generally in the HttpSession) across these two requests in order to prevent the loss of validation information. Fortunately, the default ValidationTracker provided by the Form component is persistent, so you don't normally have to worry about it.<p>However, for the same reason, the individual fields updated by the components should also be persisted across r
equests, and this is something you <strong>do</strong> need to do yourself – generally with the @Persist annotation.</p><p>For example, a Login page class, which collects a user name and a password, might look like:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Login.java Example</b></div><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">package com.example.newapp.pages;
@@ -175,7 +174,7 @@ public class Login {
</pre>
</div></div><p></p><div class="navmenu" style="float:right; width:40%; background:white; margin:3px; padding:3px">
<div class="confluence-information-macro confluence-information-macro-information"><span class="aui-icon aui-icon-small aui-iconfont-info confluence-information-macro-icon"></span><div class="confluence-information-macro-body">
-<p>Note that the onValidateFromLoginForm() and onSuccess() methods are not public; event handler methods can have any visibility, even private. Package private (that is, no modifier) is the typical use, as it allows the component to be tested, from a test case class in the same package.</p></div></div></div>Because a form submission is really <em>two</em> requests: the submission itself (which results in a redirect response), then a second request for the page (which results in a re-rendering of the page), it is necessary to persist the userName field between the two requests, by using the @Persist annotation. This would be necessary for the password field as well, except that the <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/PasswordField.html">PasswordField</a> component never renders a value.<div class="confluence-information-macro confluence-information-macro-tip"><span class="aui-icon aui-icon-smal
l aui-iconfont-approve confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>To avoid data loss, fields whose values are stored in the HttpSession (such as userName, above) must be serializable, particularly if you want to be able to cluster your application or preserve sessions across server restarts.</p></div></div><p>The Form only emits a "success" event if the there are no prior validation errors. This means it is not necessary to write <code>if (form.getHasErrors()) return;</code> as the first line of the method.</p><p>Finally, notice how business logic fits into validation. The UserAuthenticator service is responsible for ensuring that the userName and (plaintext) password are valid. When it returns false, we ask the Form component to record an error. We provide the PasswordField instance as the first parameter; this ensures that the password field, and its label, are decorated when the Form is re-rendered, to present the errors to the use
r.</p><h2 id="FormsandValidation-ConfiguringFieldsandLabels">Configuring Fields and Labels</h2><p>The template for the Login page contains a minimal amount of Tapestry instrumentation and references some of the <a shape="rect" class="external-link" href="http://getbootstrap.com" >Bootstrap</a> CSS classes (Bootstrap is automatically integrated into each Tapestry page):</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<p>Note that the onValidateFromLoginForm() and onSuccess() methods are not public; event handler methods can have any visibility, even private. Package private (that is, no modifier) is the typical use, as it allows the component to be tested, from a test case class in the same package.</p></div></div></div>Because a form submission is really <em>two</em> requests: the submission itself (which results in a redirect response), then a second request for the page (which results in a re-rendering of the page), it is necessary to persist the userName field between the two requests, by using the @Persist annotation. This would be necessary for the password field as well, except that the <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/PasswordField.html">PasswordField</a> component never renders a value.<div class="confluence-information-macro confluence-information-macro-tip"><span class="aui-icon aui-icon-smal
l aui-iconfont-approve confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>To avoid data loss, fields whose values are stored in the HttpSession (such as userName, above) must be serializable, particularly if you want to be able to cluster your application or preserve sessions across server restarts.</p></div></div><p>The Form only emits a "success" event if the there are no prior validation errors. This means it is not necessary to write <code>if (form.getHasErrors()) return;</code> as the first line of the method.</p><p>Finally, notice how business logic fits into validation. The UserAuthenticator service is responsible for ensuring that the userName and (plaintext) password are valid. When it returns false, we ask the Form component to record an error. We provide the PasswordField instance as the first parameter; this ensures that the password field, and its label, are decorated when the Form is re-rendered, to present the errors to the use
r.</p><h2 id="FormsandValidation-ConfiguringFieldsandLabels">Configuring Fields and Labels</h2><p>The Login page template below contains a minimal amount of Tapestry instrumentation and references some of the <a shape="rect" class="external-link" href="http://getbootstrap.com" >Bootstrap</a> CSS classes (Bootstrap is automatically integrated into each page by default, starting with Tapestry 5.4).</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Login.tml Example</b></div><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"><html t:type="layout" title="newapp com.example"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
@@ -192,7 +191,7 @@ public class Login {
</html>
</pre>
-</div></div><p>Rendering the page gives a reasonable pleasing first pass:</p><p><span class="confluence-embedded-file-wrapper image-center-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-content-image-border image-center" width="500" src="forms-and-validation.data/newapp_com_example.png"></span></p><p>The Tapestry Form component is responsible for creating the necessary URL for the form submission (this is Tapestry's responsibility, not yours).</p><p><span style="line-height: 1.4285715;">For the TextField, we provide a component id, userName. We could specify the </span><code style="line-height: 1.4285715;">value</code><span style="line-height: 1.4285715;"> parameter, but the default is to match the TextField's id against a property of the container, the Login page, if such a property exists. </span></p><p>As a rule of thumb, you should always give your fields a specific id (this id will be used to generate the <code>name</code> and <co
de>id</code> attributes of the rendered tag). Being allowed to omit the value parameter helps to keep the template from getting too cluttered.</p><p>The FormGroup mixin decorates the field with some additional markup, including a <label> element; this leverages more of Bootstrap.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>userName component as rendered</b></div><div class="codeContent panelContent pdl">
+</div></div><p>Rendering the page gives a reasonably pleasing first pass:</p><p><span class="confluence-embedded-file-wrapper image-center-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-content-image-border image-center" width="500" src="forms-and-validation.data/newapp_com_example.png"></span></p><p>The Tapestry Form component is responsible for creating the necessary URL for the form submission (this is Tapestry's responsibility, not yours).</p><p><span style="line-height: 1.4285715;">For the TextField, we provide a component id, userName. We could specify the </span><code style="line-height: 1.4285715;">value</code><span style="line-height: 1.4285715;"> parameter, but the default is to match the TextField's id against a property of the container, the Login page, if such a property exists. </span></p><p>As a rule of thumb, you should always give your fields a specific id (this id will be used to generate the <code>name</code> and <co
de>id</code> attributes of the rendered tag). Being allowed to omit the value parameter helps to keep the template from getting too cluttered.</p><p>The FormGroup mixin decorates the field with some additional markup, including a <label> element; this leverages more of Bootstrap.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>userName component as rendered</b></div><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"><div class="form-group">
<label for="userName" class="control-label">User Name</label>
<input id="userName" class="form-control" name="userName" type="text">