cocoon-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From da...@cocoon.zones.apache.org
Subject [DAISY] Created: Improving the simple sample
Date Sun, 23 Oct 2005 13:40:23 GMT
A new document has been created.

http://cocoon.zones.apache.org/daisy/documentation/752.html

Document ID: 752
Branch: main
Language: default
Name: Improving the simple sample
Document Type: Cocoon Document
Created: 10/23/05 1:40:12 PM
Creator (owner): Bruno Dumon
State: publish

Parts
=====

Content
-------
Mime type: text/xml
Size: 6259 bytes
Content:
<html>
<body>

<p>This section describes some possible improvements to the simple sample.</p>

<h1>Automatic layouting</h1>

<p>A very common way of layouting a form is in a table with two columns: the
left column contains the labels, the right column the input fields. The CForms
XSL stylesheets support some tags to do this automatically for you. Here is the
template for the simple sample, using automatic two-column styling:</p>

<pre>&lt;html xmlns:ft="http://apache.org/cocoon/forms/1.0#template"
  xmlns:fi="http://apache.org/cocoon/forms/1.0#instance"
  xmlns:jx="http://apache.org/cocoon/templates/jx/1.0"&gt;

  &lt;jx:import uri="resource://org/apache/cocoon/forms/generation/jx-macros.xml"/&gt;

  &lt;head&gt;
    &lt;title&gt;Registration form&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Registration&lt;/h1&gt;
    &lt;ft:form-template action="#{$continuation/id}.continue" method="POST"&gt;
<strong>      &lt;fi:group&gt;
        &lt;fi:styling layout="columns"/&gt;
        &lt;fi:items&gt;</strong>
          &lt;ft:widget id="name"/&gt;
          &lt;ft:widget id="email"/&gt;
          &lt;ft:widget id="age"/&gt;
          &lt;ft:widget id="password"&gt;
            &lt;fi:styling type="password"/&gt;
          &lt;/ft:widget&gt;
          &lt;ft:widget id="confirmPassword"&gt;
            &lt;fi:styling type="password"/&gt;
          &lt;/ft:widget&gt;
          &lt;ft:widget id="spam"/&gt;
<strong>        &lt;/fi:items&gt;
      &lt;/fi:group&gt;</strong>
      &lt;input type="submit"/&gt;
    &lt;/ft:form-template&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>As you see, it is no longer needed to use the <tt>ft:widget-label</tt>
tags.
Furthermore, the stylesheets will properly use the HTML <tt>label</tt> tag to
associate the label with the input field.</p>

<p>Other supported stylings include "tabs" (for tabbed panes), "choice" (similar
to tabs but with a dropdown to switch), "fieldset" (groups the fields in a frame
with a label). See the CForms samples for examples of how to use them.</p>

<h1>Using i18n</h1>

<p>As mentioned before, you can internationalize the form labels by embedding
<tt>i18n</tt> tags that will be handled by the i18n transformer. Let's look at
the concrete steps to achieve this.</p>

<p>First, the form definition. Here we need to add the declaration of the i18n
namespace, and for now we'll just apply i18n for the name field. This is done as
follows:</p>

<pre>&lt;fd:form
  xmlns:fd="http://apache.org/cocoon/forms/1.0#definition"
  <strong>xmlns:i18n="http://apache.org/cocoon/i18n/2.1"</strong>&gt;

  &lt;fd:widgets&gt;
    &lt;fd:field id="name" required="true"&gt;
      &lt;fd:label&gt;<strong>&lt;i18n:text key="name"/&gt;</strong>:&lt;/fd:label&gt;
      &lt;fd:datatype base="string"/&gt;
      &lt;fd:validation&gt;
        &lt;fd:length min="2"/&gt;
      &lt;/fd:validation&gt;
    &lt;/fd:field&gt;
[...]
</pre>

<p>Then, the resource bundle. Resource bundles for the i18n transformer are in
an XML format. Create a subdirectory called i18n and put a file called
messages.xml in it, containing the following:</p>

<pre>&lt;?xml version="1.0"?&gt;
&lt;catalogue&gt;
  &lt;message key="name"&gt;Name&lt;/message&gt;
&lt;/catalogue&gt;
</pre>

<p>The only thing left now is to change the configuration of the i18n
transformer to make it aware of this resource bundle. Change the configuration
of the i18n transformer in the sitemap as follows:</p>

<pre>      &lt;map:transformer name="i18n"
        src="org.apache.cocoon.transformation.I18nTransformer"&gt;
        &lt;catalogues <strong>default="mymessages"</strong>&gt;
          <strong>&lt;catalogue id="mymessages" name="messages" location="i18n"/&gt;</strong>
          &lt;catalogue id="forms" name="messages"
            location="resource://org/apache/cocoon/forms/system/i18n"/&gt;
        &lt;/catalogues&gt;
        &lt;cache-at-startup&gt;true&lt;/cache-at-startup&gt;
      &lt;/map:transformer&gt;
</pre>

<p>The location attribute of the catalogue is relative to the location of the
sitemap, so the value i18n refers to the subdirectory you created in the
previous step. As we did not mention the catalogue explicitely on the
<tt>i18n:text</tt> element, we need to make it the default (the forms catalogue
does not need to be the default). For more information on this see the i18n
transformer documentation.</p>

<p>If you now try the sample again, everything should work as before; you should
still see the "Name" label.</p>

<p>But now we still need to tell the i18n transformer what locale to use. To
make our explanation more complete, we should not only tell the i18n transformer
what locale to use, but the same locale should typically also be used when
parsing form data and formatting form data for output (this does not matter for
string fields, but important for dates and numbers). This can be done as
follows. In the flowscript (registration.js), specify a locale property on the
form. Let us take french as an example:</p>

<pre>[...]
    var form = new Form("registration.xml");
    form.locale = "fr";
[...]
</pre>

<p>The locale you specify here will also be automatically added to the viewData
for the pipeline when calling showForm.</p>

<p>In the sitemap, we need to pass the locale to the template generator and the
i18n transformer:</p>

<pre>     &lt;map:match pattern="registration-display-pipeline"&gt;
       &lt;map:generate type="jx" src="registration_template.xml"&gt;
<strong>         &lt;map:parameter name="locale" value="{flow-attr:locale}"/&gt;</strong>
       &lt;/map:generate&gt;
       &lt;map:transform type="i18n"&gt;
         &lt;map:parameter name="locale" value="<strong>{flow-attr:locale}</strong>"/&gt;
       &lt;/map:transform&gt;
       &lt;map:transform src="forms-samples-styling.xsl"/&gt;
       &lt;map:serialize/&gt;
     &lt;/map:match&gt;
</pre>

<p>The "flow-attr" <em>input module</em> is used to retrieve values from
the
viewData.</p>

<p>Finally, create a french resource bundle: i18n/messages_fr.xml:</p>

<pre>&lt;?xml version="1.0"?&gt;
&lt;catalogue&gt;
  &lt;message key="name"&gt;Nom&lt;/message&gt;
&lt;/catalogue&gt;
</pre>

<p>If you now try the registration sample again, "Name" should be replaced by
"Nom".</p>

</body>
</html>

Collections
===========
The document belongs to the following collections: documentation

Mime
View raw message