You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by hl...@apache.org on 2007/06/19 03:48:53 UTC
svn commit: r548551 - in /tapestry/tapestry5/trunk/tapestry-tutorial1/src:
main/resources/org/apache/tapestry/tutorial/pages/address/
main/webapp/WEB-INF/address/ site/apt/ site/resources/
Author: hlship
Date: Mon Jun 18 18:48:52 2007
New Revision: 548551
URL: http://svn.apache.org/viewvc?view=rev&rev=548551
Log:
Chapter 4: Forms
Added:
tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v3.png (with props)
tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v4.png (with props)
tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v5.png (with props)
Modified:
tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/resources/org/apache/tapestry/tutorial/pages/address/CreateAddress.properties
tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/webapp/WEB-INF/address/CreateAddress.html
tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/apt/forms.apt
Modified: tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/resources/org/apache/tapestry/tutorial/pages/address/CreateAddress.properties
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/resources/org/apache/tapestry/tutorial/pages/address/CreateAddress.properties?view=diff&rev=548551&r1=548550&r2=548551
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/resources/org/apache/tapestry/tutorial/pages/address/CreateAddress.properties (original)
+++ tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/resources/org/apache/tapestry/tutorial/pages/address/CreateAddress.properties Mon Jun 18 18:48:52 2007
@@ -1 +1,11 @@
-foo=Foo Bar Baz Baby!
+street1-label=Street 1
+street2-label=Street 2
+email-label=E-Mail
+zip-label=Zip Code
+phone-label=Phone Number
+
+MR=Mr.
+MRS=Mrs.
+DR=Dr.
+
+submit-label=Create Address
\ No newline at end of file
Modified: tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/webapp/WEB-INF/address/CreateAddress.html
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/webapp/WEB-INF/address/CreateAddress.html?view=diff&rev=548551&r1=548550&r2=548551
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/webapp/WEB-INF/address/CreateAddress.html (original)
+++ tapestry/tapestry5/trunk/tapestry-tutorial1/src/main/webapp/WEB-INF/address/CreateAddress.html Mon Jun 18 18:48:52 2007
@@ -4,9 +4,15 @@
</head>
<body>
+ <style>
+ DIV.t-beaneditor LABEL {
+ width: 200px;
+ }
+ </style>
+
<h1>Create New Address</h1>
- <t:beaneditform object="address"/>
+ <t:beaneditform submitlabel="message:submit-label" object="address"/>
</body>
</html>
Modified: tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/apt/forms.apt
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/apt/forms.apt?view=diff&rev=548551&r1=548550&r2=548551
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/apt/forms.apt (original)
+++ tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/apt/forms.apt Mon Jun 18 18:48:52 2007
@@ -293,8 +293,99 @@
[address-v2.png] Create address form with fields in proper order
+* Customizing labels
+ Tapestry makes it pretty easy to customize the labels used on the fields. It's just a matter of creating a <message catalog> for the page.
+
+ In Tapestry, every page and component may have its own message catalog. This is a standard Java properties file, and it is named the same
+ as the page or component class, with a ".properties" extension. A message catalog consists of a series of lines, each line is a message key and a message value
+ seperated with an equals sign.
+
+ All it takes is to create a message entry with a particular name: the name of the property suffixed with "-label". As elsewhere, Tapestry is forgiving of case.
+
+ <<src/main/resources/org/apache/tapestry/tutorial/pages/address/CreateAddress.properties:>>
+
+----
+street1-label=Street 1
+street2-label=Street 2
+email-label=E-Mail
+zip-label=Zip Code
+phone-label=Phone Number
+----
+
+ Since this is a <new> file (and not a change to an existing file), you will have to restart Jetty to force Tapestry to pick up the change.
+
+[address-v3.png] Create Address form with field labels corrected
+
+ However, things are getting a little crowded in the form. That too is easy to fix: we can just provide our own overriding
+ Cascading Style Sheet (CSS) rules. Tapestry has automatically injected a built-in CSS style sheet to provide the fonts and colors in the page, we
+ just need to tweak it a bit. Add the following to CreateAddress.html:
+
+----
+<style>
+ DIV.t-beaneditor LABEL {
+ width: 200px;
+ }
+</style>
+----
+
+ The "t-beaneditor" CSS class refers to a \<div\> element around the \<label\> element. Tapestry's style classes are all prefixed with "t-" (for "Tapestry") so that
+ they don't conflict with anything your own web designers may decide to use. In any case, this CSS rule forces the label to be 200 pixels wide (rather than
+ the default, which is 10% of the overall page width).
+
+[address-v4.png] Corrected width on labels
+
+ We can also customize the options in the drop down list. All we have to do is added entries to the message catalog matching the enum names to the desired labels.
+ Update CreateAddress.properties and add:
+----
+MR=Mr.
+MRS=Mrs.
+DR=Dr.
+----
+
+ 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
+ clarity ... the point is, each option label is searched for seperately.
+ 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".
+
+ 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-labelling the button. Simply change the CreateAddress component template:
+----
+ <t:beaneditform submitlabel="Create Address" object="address"/>
+----
+
+ The default for the submitlabel parameter is "Create/Update", but here we're overriding that default to a specific value.
+
+ The final result shows the reformatting and relabeling:
+
+[address-v5.png] Create Address form with proper labels
+
+ 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.
+
+ Instead of putting the label for the submit button directly inside the template, we're going to provide a reference to the label; the actual
+ label will go in the message catalog.
+
+ 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?
+
+ Here we want to reference a message from the catalog, so we use the "message:" prefix:
+
+----
+ <t:beaneditform submitlabel="message:submit-label" object="address"/>
+----
+
+ And then define the submit-label key in the message catalog:
+
+---
+submit-label=Create Address
+----
+
+ 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 chose to internationalize your application.
+
Added: tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v3.png
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v3.png?view=auto&rev=548551
==============================================================================
Binary file - no diff available.
Propchange: tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v3.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v4.png
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v4.png?view=auto&rev=548551
==============================================================================
Binary file - no diff available.
Propchange: tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v4.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v5.png
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v5.png?view=auto&rev=548551
==============================================================================
Binary file - no diff available.
Propchange: tapestry/tapestry5/trunk/tapestry-tutorial1/src/site/resources/address-v5.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream