cocoon-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
Subject [DAISY] Updated: XSLT
Date Mon, 08 May 2006 01:18:50 GMT
A document has been updated:

Document ID: 485
Branch: main
Language: default
Name: XSLT (unchanged)
Document Type: Cocoon Document (unchanged)
Updated on: 5/8/06 1:18:29 AM
Updated by: Simone Gianni

A new version has been created, state: draft

This part has been updated.
Mime type: text/xml (unchanged)
File name:  (unchanged)
Size: 9748 bytes (previous version: 3282 bytes)
Content diff:
(3 equal lines skipped)
    <p>This page contains information on the default XSLT's provided by CForms, and
--- the fi:styling directives they support. Be sure to read first about the
--- <a href="daisy:755">templating mechanism</a>.</p>
+++ the fi:styling directives they support.</p>
--- <p>There are basically 3 XSLTs:</p>
+++ <p>As specified in <a href="daisy:755">templating mechanism</a> (be
sure to read
+++ about it), the form template file is transformed in a form instance xml file.
+++ This file contains all the data needed to properly display a form. An XSLT must
+++ then be used to transform the form instance to an HTML to be displayed in a
+++ browser.</p>
+++ <p>This XSLT does not need to create also all the page layout (that can be added
+++ by other XSLT, or aggregating the form with other markup), it should only format
+++ the forms field and the form layout.</p>
+++ <p>Cocoon forms already a set of XSLTs that does exactly this, they are
+++ "library" stylesheets :</p>
--- <li><tt>forms-samples-styling.xsl</tt>: this stylesheet includes two
--- stylesheets: one for widget styling, one for page styling. You can choose
--- between the basic types of it or advanced stylings. Usually, you will make a
--- clone of this stylesheet for your own project, and use the other stylesheets as
--- is.</li>
    <li><tt>forms-field-styling.xsl</tt>: contains templates that style
    widgets, i.e. templates that translate fi:field, fi:booleanfield fi:action, etc.
    to HTML.</li>
    <li><tt>forms-page-styling.xsl</tt>: contains templates for building
    page layout effects, such as tabbed panes.</li>
--- </ul>
--- <p>Additionally there are 2 XSLTs for advanced widget styling:</p>
--- <ul>
    <li><tt>forms-advanced-field-styling.xsl</tt>: contains templates that
    advanced styling of fields, e.g. the "double-listbox" for a multivaluefield.
    It's indeed an extension of the above basic <tt>forms-field-styling.xsl</tt>.
(2 equal lines skipped)
    type "date" and provides a visual calendar for easy selection of date. So the
    calendar is an advanced styling too, but because it has much specific stuff we
    separated it out of <tt>forms-advanced-styling.xsl</tt>.</li>
+++ <li><tt>forms-htmlarea-styling.xsl</tt>: contains the styling for the
html edit
+++ field.</li>
--- <p>From the sitemap you only need to reference the first one, for example as
--- follows:</p>
+++ <p>If you have a look at samples, you'll see also another XSLT,
+++ <tt>forms-samples-styling.xsl</tt>. This stylesheet includes other two
+++ stylesheets from the default set. Usually, you will make a clone of this
+++ stylesheet for your own project, have it include the library XSLTs, and
+++ customize what you need by writing templates in this XSLT by giving templates
+++ higher priority than those in the library ones.</p>
--- <pre>&lt;map:transform src="context://samples/forms/resources/forms-samples-styling.xsl"/&gt;</pre>
+++ <p>From the sitemap you only need to reference only your custom XSLT, for
+++ example as follows:</p>
+++ <pre>&lt;map:transform src="context://forms/resources/myproject-forms-styling.xsl"/&gt;</pre>
    <h1>fi:styling options</h1>
+++ <p>The fi:styling elements are specified in the template, and offer a way to
+++ customize the way the library XSLTs render widgets. For example :</p>
+++ <pre>&lt;ft:widget id="preferredBeer"&gt;
+++   &lt;fi:styling list-type="radio"/&gt;
+++ &lt;/ft:widget&gt;
+++ </pre>
    <p>The fi:styling options for the different widgets are documented in the
    respective sections about those widgets.</p>
    <h1>High-level styling with fi:group</h1>
--- <p>No documentation yet, checkout the samples and the source of
--- forms-page-styling.xsl.</p>
+++ <p>It's quite common to want to layout the form. For example, have part of the
+++ form displayed in a table with two columns, one with labels the other one with
+++ actual fields, while in another part have a single colum with labels followed by
+++ fields, and in another part some tabs to group together fields.</p>
--- <p>For storing the state of a tab or choice selection server-side just add a
--- field to the form definition that shall hold this value:</p>
+++ <p>We could do this simply writing HTML in the template file, but this is
+++ verbose, non reusable, and not easy to style. That's why fi:groups are there.
+++ You can layout your form with fi:groups in a simple, efficient, extensible and
+++ easy to style way. For example :</p>
--- <pre>&lt;fd:field id="state"&gt;
+++ <pre>&lt;ft:form-template .... &gt;
+++   &lt;fi:group&gt;
+++     &lt;fi:styling layout="columns"&gt;
+++     &lt;fi:items&gt;
+++       &lt;ft:widget id="name"/&gt;
+++       &lt;ft:widget id="surname"/&gt;
+++       &lt;ft:widget id="birthday"/&gt;
+++     &lt;/fi:items&gt;
+++   &lt;/fi:group&gt;
+++ &lt;/ft:form-template&gt;
+++ </pre>
+++ <p>Will produce a table with two columns, like the following :</p>
+++ <table>
+++ <tbody>
+++ <tr>
+++ <td>
+++ <p>Name</p>
+++ </td>
+++ <td>
+++ <p>[_______]</p>
+++ </td>
+++ </tr>
+++ <tr>
+++ <td>
+++ <p>Surname</p>
+++ </td>
+++ <td>
+++ <p>[_______]</p>
+++ </td>
+++ </tr>
+++ <tr>
+++ <td>
+++ <p>Birthday</p>
+++ </td>
+++ <td>
+++ <p>[_______]</p>
+++ </td>
+++ </tr>
+++ </tbody>
+++ </table>
+++ <p>The <tt>fi:group</tt> accept either a <tt>layout</tt>
or a <tt>type</tt>
+++ attribute in its <tt>fi:styling</tt> element to specify the layout we want.
+++ difference is because the "layout based" groups are quite lightweight, while the
+++ "type based" groups are more sophisticated and usually contains other groups.
+++ </p>
+++ <h2>Layout groups</h2>
+++ <p><tt>&lt;fi:group layout="column"&gt;</tt> will format its
items in a single
+++ column. One row will contain the label, the following row the input field.</p>
+++ <p><tt>&lt;fi:group layout="columns"&gt;</tt> will format its
items in two
+++ columns. For each item a row is created, the first column will contain the
+++ label, and the second column the input field.</p>
+++ <p><tt>&lt;fi:group layout="row"&gt;</tt> will format its items
in a single row.
+++ One cell will contain the label, the following cell the input field.</p>
+++ <p><tt>&lt;fi:group layout="rows"&gt;</tt> will format its items
in two rows.
+++ The first row will contain all the labels, one each cell, the second row all the
+++ input fields, again one each cell.</p>
+++ <p>Some input fields will have a special layout when inside a certain group :
+++ </p>
+++ <ul>
+++ <li><tt>action</tt>, <tt>submit</tt> and <tt>boolanfield</tt>
widgets does not
+++ have a "label" which can be displayed separated from the button or checkbox
+++ itself, so they will be placed</li>
+++ <ul>
+++ <li>in a single line inside the <tt>column</tt> and <tt>columns</tt>
+++ <li>using only one cell in <tt>row</tt> layout</li>
+++ <li>using an empty cell in the first row of a <tt>rows</tt> layout</li>
+++ </ul>
+++ <li><tt>multivaluefield</tt> with a <tt><tt>list-type="double-listbox"</tt></tt>
+++ will be displayed with a row with a label and another row with the two lists
+++ when in a <tt>columns</tt> group.</li>
+++ <li>every other <tt>fi:group</tt> nested inside a <tt>fi:group</tt>
with layout
+++ <tt>columns</tt> will span on both columns</li>
+++ </ul>
+++ <p>Also layout <tt>fi:group</tt> can contain other <tt>fi:group</tt>
+++ their items, and can be used to create quite complex layouts.</p>
+++ <h2>Type groups</h2>
+++ <p>There are currently two "type" groups : <tt>tabs</tt> and <tt>choice.</tt>
+++ </p>
+++ <p>The tabs group will display some tabs, every tab is (usually) a fi:group. For
+++ example :</p>
+++ <pre>&lt;fi:group&gt;
+++   &lt;fi:styling type="tabs"/&gt;
+++   &lt;fi:items&gt;
+++     &lt;fi:group&gt;
+++       &lt;fi:label&gt;Personal info&lt;/fi:label&gt;
+++       &lt;fi:styling layout="columns"/&gt;
+++       &lt;fi:items&gt;
+++         &lt;ft:widget id="name"/&gt;
+++         &lt;ft:widget id="surname"/&gt;
+++       &lt;/fi:items&gt;
+++     &lt;/fi:group&gt;
+++     &lt;fi:group&gt;
+++       &lt;fi:label&gt;Iternet data&lt;/fi:label&gt;
+++       &lt;fi:styling layout="columns"/&gt;
+++       &lt;fi:items&gt;
+++         &lt;ft:widget id="email"/&gt;
+++         &lt;ft:widget id="icqaccount"/&gt;
+++       &lt;/fi:items&gt;
+++     &lt;/fi:group&gt;
+++   &lt;/fi:items&gt;
+++ &lt;/fi:group&gt;</pre>
+++ <p>Will display two tabs, one called "Personal info" and the other one "Internet
+++ data". When the user clicks on "Personal info" the field name and surname will
+++ be displayed, while when the user clicks on "Internet data" the field email and
+++ icqaccount will be displayed.</p>
+++ <p>You can specify a widget that will be used to store and retrieve which tab is
+++ curently active. This way you can control from the flow which tab will be active
+++ when the form will be displayed, or check which tab was active when the user
+++ submitted the form. To specify this special field use :</p>
+++ <pre>&lt;fi:group&gt;
+++   &lt;fi:styling type="tabs"/&gt;
+++   &lt;fi:state&gt;
+++     &lt;ft:widget id="activetab"/&gt;
+++   &lt;/fi:state&gt;
+++   ....
+++ &lt;/fi:group&gt;</pre>
+++ <p>Obviously you can call the widget whatever you want, and the suggested
+++ datatype is integer, since the field will contain a number indicating the active
+++ tab, the field must be declared in the definition, and can be used in binding if
+++ needed. For example :</p>
+++ <pre>&lt;fd:field id="activetab"&gt;
      &lt;fd:datatype base="integer"/&gt;
--- <p>Bind this value to whatever you want. In the form template you need then
--- following code:</p>
+++ <p>The group of type <tt>choice </tt>is identical to the <tt>tabs</tt>
+++ but instead of a row of tabs, a drop down is displayed, and selecting one
+++ element of the drop down will display the relative group.</p>
+++ <p>You can specify a client side javascript that will be executed when a tab is
+++ clicked or when an option of the <tt>choice</tt> drop down is selected. This
+++ done simply adding an attribute to the items of the group, for example :</p>
---   &lt;fi:styling type="choice"/&gt;
---   &lt;fi:state&gt;
---     &lt;ft:widget id="state"/&gt; &lt;!-- refering to the above defined field
---   &lt;/fi:state&gt;
---   &lt;fi:items&gt;
---     ...
---   &lt;/fi:items&gt;
+++   &lt;fi:styling type="tabs"/&gt;
+++   &lt;fi:items&gt;
+++     &lt;fi:group formsOnShow="personalSelected()"&gt;
+++       &lt;fi:label&gt;Personal info&lt;/fi:label&gt;
+++       ...
+++     &lt;/fi:group&gt;
+++     &lt;fi:group formsOnShow="internetSelected()"&gt;
+++       &lt;fi:label&gt;Iternet data&lt;/fi:label&gt;
+++       ...
+++     &lt;/fi:group&gt;
+++   &lt;/fi:items&gt;
+++ <p>Have a look at <tt>forms-page-styling.xsl</tt> , all <tt>fi:groups</tt>
+++ formatted there.</p>
(17 equal lines skipped)

no changes

no changes

Custom Fields
no changes

no changes

View raw message