A document has been updated:
http://cocoon.zones.apache.org/daisy/documentation/485.html
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
Parts
=====
Content
-------
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)
<h1>Intro</h1>
<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>
+++
<ul>
--- <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
individual
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
high-level
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
provide
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>
</ul>
--- <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><map:transform
src="context://samples/forms/resources/forms-samples-styling.xsl"/></pre>
+++ <p>From the sitemap you only need to reference only your custom XSLT, for
+++ example as follows:</p>
+++ <pre><map:transform
src="context://forms/resources/myproject-forms-styling.xsl"/></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><ft:widget id="preferredBeer">
+++ <fi:styling list-type="radio"/>
+++ </ft:widget>
+++ </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><fd:field id="state">
+++ <pre><ft:form-template .... >
+++ <fi:group>
+++ <fi:styling layout="columns">
+++ <fi:items>
+++ <ft:widget id="name"/>
+++ <ft:widget id="surname"/>
+++ <ft:widget id="birthday"/>
+++ </fi:items>
+++ </fi:group>
+++ </ft:form-template>
+++ </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.
This
+++ 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><fi:group layout="column"></tt> will format its items in a
single
+++ column. One row will contain the label, the following row the input
field.</p>
+++
+++ <p><tt><fi:group layout="columns"></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><fi:group layout="row"></tt> will format its items in a single
row.
+++ One cell will contain the label, the following cell the input field.</p>
+++
+++ <p><tt><fi:group layout="rows"></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>
layout</li>
+++ <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> between
+++ 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><fi:group>
+++ <fi:styling type="tabs"/>
+++ <fi:items>
+++ <fi:group>
+++ <fi:label>Personal info</fi:label>
+++ <fi:styling layout="columns"/>
+++ <fi:items>
+++ <ft:widget id="name"/>
+++ <ft:widget id="surname"/>
+++ </fi:items>
+++ </fi:group>
+++ <fi:group>
+++ <fi:label>Iternet data</fi:label>
+++ <fi:styling layout="columns"/>
+++ <fi:items>
+++ <ft:widget id="email"/>
+++ <ft:widget id="icqaccount"/>
+++ </fi:items>
+++ </fi:group>
+++ </fi:items>
+++ </fi:group></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><fi:group>
+++ <fi:styling type="tabs"/>
+++ <fi:state>
+++ <ft:widget id="activetab"/>
+++ </fi:state>
+++ ....
+++ </fi:group></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><fd:field id="activetab">
<fd:datatype base="integer"/>
</fd:field></pre>
--- <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>
group,
+++ 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 is
+++ done simply adding an attribute to the items of the group, for example :</p>
+++
<pre><fi:group>
--- <fi:styling type="choice"/>
--- <fi:state>
--- <ft:widget id="state"/> <!-- refering to the above defined
field -->
--- </fi:state>
--- <fi:items>
--- ...
--- </fi:items>
+++ <fi:styling type="tabs"/>
+++ <fi:items>
+++ <fi:group formsOnShow="personalSelected()">
+++ <fi:label>Personal info</fi:label>
+++ ...
+++ </fi:group>
+++ <fi:group formsOnShow="internetSelected()">
+++ <fi:label>Iternet data</fi:label>
+++ ...
+++ </fi:group>
+++ </fi:items>
</fi:group></pre>
+++ <p>Have a look at <tt>forms-page-styling.xsl</tt> , all <tt>fi:groups</tt>
are
+++ formatted there.</p>
+++
<h1>Miscellaneous</h1>
<h2>fi:validation-errors</h2>
(17 equal lines skipped)
Fields
======
no changes
Links
=====
no changes
Custom Fields
=============
no changes
Collections
===========
no changes
