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 2014/02/25 13:20:38 UTC
svn commit: r899138 - in /websites/production/tapestry/content:
cache/main.pageCache using-beaneditform-to-create-user-forms.html
Author: buildbot
Date: Tue Feb 25 12:20:38 2014
New Revision: 899138
Log:
Production update by buildbot for tapestry
Modified:
websites/production/tapestry/content/cache/main.pageCache
websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
Modified: websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html
==============================================================================
--- websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html (original)
+++ websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html Tue Feb 25 12:20:38 2014
@@ -141,7 +141,7 @@ public class CreateAddress
<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Property
private Address address;
]]></script>
-</div></div><p>When you refresh the page, you'll see the following:</p><p><img class="confluence-embedded-image" width="700" src="https://cwiki.apache.org/confluence/download/attachments/23340431/create-address-initial.png?version=1&modificationDate=1291927518000&api=v2" data-image-src="/confluence/download/attachments/23340431/create-address-initial.png?version=1&modificationDate=1291927518000&api=v2"></p><p>Tapestry's done quite a bit of work here. It has created a form that includes a field for each property. Further, its seen that the honorific property is an enumerated type, and presented that as a drop-down list.</p><p>In addition, Tapestry has converted the property names ("city", "email", "firstName") to user presentable labels ("City", "Email", "First Name"). In fact, these are <label> elements, so clicking a label with the mouse will move the input cursor into the corresponding field.</p><p>This is an awesome start; it's a presentable interface, quite
nice in fact for a few minute's work. But it's far from perfect; let's get started with some customizations.</p><h1 id="UsingBeanEditFormToCreateUserForms-ChangingFieldOrder">Changing Field Order</h1><p>The BeanEditForm must guess at the right order to present the fields; for public fields, they end up in alphabetical order</p><p><style type='text/css'>
+</div></div><p>When you refresh the page, you'll see the following:</p><p><img class="confluence-embedded-image" width="700" src="https://cwiki.apache.org/confluence/download/attachments/23340431/create-address-initial.png?version=1&modificationDate=1291927518000&api=v2" data-image-src="/confluence/download/attachments/23340431/create-address-initial.png?version=1&modificationDate=1291927518000&api=v2"></p><p>Tapestry has done quite a bit of work here. It has created a form that includes a field for each property. Further, it has seen that the honorific property is an enumerated type, and presented that as a drop-down list.</p><p>In addition, Tapestry has converted the property names ("city", "email", "firstName") to user presentable labels ("City", "Email", "First Name"). In fact, these are <label> elements, so clicking a label with the mouse will move the input cursor into the corresponding field.</p><p>This is an awesome start; it's a presentable interface,
quite nice in fact for a few minute's work. But it's far from perfect; let's get started with some customizations.</p><h1 id="UsingBeanEditFormToCreateUserForms-ChangingFieldOrder">Changing Field Order</h1><p>The BeanEditForm must guess at the right order to present the fields; for public fields, they end up in alphabetical order</p><style type='text/css'>
.FootnoteMarker, .FootnoteNum a {
background: transparent url(/confluence/download/resources/com.adaptavist.confluence.footnoteMacros:footnote/gfx/footnote.png) no-repeat top right;
padding: 1px 2px 0px 1px;
@@ -213,7 +213,7 @@ var footnoteMarkerHighlight = function(i
1
</a>
</sup>
-</p><p>.</p><p> </p><p>A better order for these fields is the order in which they are defined in the Address class:</p><ul><li>honorific</li><li>firstName</li><li>lastName</li><li>street1</li><li>street2</li><li>city</li><li>state</li><li>zip</li><li>email</li><li>phone</li></ul><p>We can accomplish this by using the <code>reorder</code> parameter of the BeanEditForm component, which is a comma separated list of property (or public field) names:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>CreateAddress.tml (partial)</b></div><div class="codeContent panelContent pdl">
+<p>.</p><p> </p><p>A better order for these fields is the order in which they are defined in the Address class:</p><ul><li>honorific</li><li>firstName</li><li>lastName</li><li>street1</li><li>street2</li><li>city</li><li>state</li><li>zip</li><li>email</li><li>phone</li></ul><p>We can accomplish this by using the <code>reorder</code> parameter of the BeanEditForm component, which is a comma separated list of property (or public field) names:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>CreateAddress.tml (partial)</b></div><div class="codeContent panelContent pdl">
<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[ <t:beaneditform object="address"
reorder="honorific,firstName,lastName,street1,street2,city,state,zip,email,phone" />
]]></script>
@@ -231,14 +231,14 @@ DR=Dr.
</div></div><p>Notice that we don't have to include an option for MISS, because that is converted to "Miss" anyway. You might just want to include it for sake of consistency ... the point is, each option label is searched for separately.</p><p>Lastly, the default label on the submit button is "Create/Update" (BeanEditForm doesn't know how it is being used). Let's change that to "Create Address".</p><p>That button is a component within the BeanEditForm component. It's not a property, so we can't just put a message into the message catalog, the way we can with the fields. Fortunately, the BeanEditForm component includes a parameter expressly for re-labeling the button. Simply change the CreateAddress component template:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[ <t:beaneditform submitlabel="Create Address" object="address"/>
]]></script>
-</div></div><p>The default for the submitlabel parameter is "Create/Update", but here we're overriding that default to a specific value.</p><p>The final result shows the reformatting and relabeling:</p><p><img class="confluence-embedded-image confluence-content-image-border" width="700" src="https://cwiki.apache.org/confluence/download/attachments/23340431/address-v5.png?version=1&modificationDate=1286782418000&api=v2" data-image-src="/confluence/download/attachments/23340431/address-v5.png?version=1&modificationDate=1286782418000&api=v2"><br clear="none"> Create Address form with proper labels</p><p>Before continuing on to validation, a side note about message catalogs. Message catalogs are not just for re-labeling fields and options; we'll see in later chapters how message catalogs are used in the context of localization and internationalization.</p><p>Instead of putting the label for the submit button directly inside the template, we're going to provide a referenc
e to the label; the actual label will go in the message catalog.</p><p>In Tapestry, when binding a parameter, the value you provide may include a prefix. The prefix guides Tapestry in how to interpret the rest of the the parameter value ... is it the name of a property? The id of a component? A message key? Most fields have a default prefix, usually "prop:", that is used when you fail to provide one (this helps to make the templates as terse as possible).</p><p>Here we want to reference a message from the catalog, so we use the "message:" prefix:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>The default for the submitlabel parameter is "Create/Update", but here we're overriding that default to a specific value.</p><p>The final result shows the reformatting and relabeling:</p><p><img class="confluence-embedded-image confluence-content-image-border" width="700" src="https://cwiki.apache.org/confluence/download/attachments/23340431/address-v5.png?version=1&modificationDate=1286782418000&api=v2" data-image-src="/confluence/download/attachments/23340431/address-v5.png?version=1&modificationDate=1286782418000&api=v2"><br clear="none"> Create Address form with proper labels</p><p>Before continuing on to validation, a side note about message catalogs. Message catalogs are not just for re-labeling fields and options; we'll see in later chapters how message catalogs are used in the context of localization and internationalization.</p><p>Instead of putting the label for the submit button directly inside the template, we're going to provide a referenc
e to the label; the actual label will go in the message catalog.</p><p>In Tapestry, when binding a parameter, the value you provide may include a prefix. The prefix guides Tapestry in how to interpret the rest of the the parameter value ... is it the name of a property? The id of a component? A message key? Most parameters have a default prefix, usually "prop:", that is used when you fail to provide one (this helps to make the templates as terse as possible).</p><p>Here we want to reference a message from the catalog, so we use the "message:" prefix:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[ <t:beaneditform object="address" submitlabel="message:submit-label"
reorder="honorific,firstName,lastName,street1,street2,city,state,zip,email,phone" />
]]></script>
-</div></div><p>And then define the submit-label key in the message catalog:</p><div class="preformatted panel" style="border-width: 1px;"><div class="preformattedContent panelContent">
+</div></div><p>And then we define the submit-label key in the message catalog:</p><div class="preformatted panel" style="border-width: 1px;"><div class="preformattedContent panelContent">
<pre>submit-label=Create Address
</pre>
-</div></div><p>At then end of the day, the exact same HTML is sent to the client, regardless of whether you include the label text directly in the template, or indirectly in the message catalog. In the long term, the latter approach will work better if you later chose to internationalize your application.</p><h3 id="UsingBeanEditFormToCreateUserForms-AddingValidation">Adding Validation</h3><p>Before we worry about storing the Address object, we should make sure that the user provides reasonable values. For example,several of the fields should be required, and phone numbers and email address have specific formats.</p><p>The BeanEditForm checks for a Tapestry-specific annotation, @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/beaneditor/Validate.html">Validate</a>, on the field, the getter method, or the setter method of each property.</p><p>Edit the Address entity, and update the lastName, firstName, street1, city, state a
nd zip fields, adding a @Validate annotation to each:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>At the end of the day, the exact same HTML is sent to the client, regardless of whether you include the label text directly in the template, or indirectly in the message catalog. In the long term, the latter approach will work better if you later chose to internationalize your application.</p><h3 id="UsingBeanEditFormToCreateUserForms-AddingValidation">Adding Validation</h3><p>Before we worry about storing the Address object, we should make sure that the user provides reasonable values. For example, several of the fields should be required, and phone numbers and email address have specific formats.</p><p>The BeanEditForm checks for a Tapestry-specific annotation, @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/beaneditor/Validate.html">Validate</a>, on the field, the getter method, or the setter method of each property.</p><p>Edit the Address entity, and update the lastName, firstName, street1, city, state a
nd zip fields, adding a @Validate annotation to each:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Validate("required")
public String firstName;
]]></script>