Return-Path: Delivered-To: apmail-cocoon-docs-archive@www.apache.org Received: (qmail 61629 invoked from network); 8 May 2006 01:20:28 -0000 Received: from hermes.apache.org (HELO mail.apache.org) (209.237.227.199) by minotaur.apache.org with SMTP; 8 May 2006 01:20:28 -0000 Received: (qmail 64671 invoked by uid 500); 8 May 2006 01:20:28 -0000 Delivered-To: apmail-cocoon-docs-archive@cocoon.apache.org Received: (qmail 64634 invoked by uid 500); 8 May 2006 01:20:27 -0000 Mailing-List: contact docs-help@cocoon.apache.org; run by ezmlm Precedence: bulk list-help: list-unsubscribe: List-Post: Reply-To: docs@cocoon.apache.org List-Id: Delivered-To: mailing list docs@cocoon.apache.org Received: (qmail 64620 invoked by uid 99); 8 May 2006 01:20:27 -0000 X-ASF-Spam-Status: No, hits=0.6 required=10.0 tests=NO_REAL_NAME X-Spam-Check-By: apache.org Received: from [207.7.158.203] (HELO cocoon.zones.apache.org) (207.7.158.203) by apache.org (qpsmtpd/0.29) with ESMTP; Sun, 07 May 2006 18:20:26 -0700 Message-ID: <23211638.1147051130312.JavaMail.daisy@cocoon.zones.apache.org> Date: Mon, 8 May 2006 01:18:50 +0000 (GMT+00:00) From: daisy@cocoon.zones.apache.org To: docs@cocoon.apache.org Subject: [DAISY] Updated: XSLT Mime-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: quoted-printable X-Virus-Checked: Checked by ClamAV on apache.org X-Spam-Rating: minotaur.apache.org 1.6.2 0/1000/N 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 =3D=3D=3D=3D=3D 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)

Intro

=20

This page contains information on the default XSLT's provided by CFo= rms, and --- the fi:styling directives they support. Be sure to read first about the --- templating mechanism.

+++ the fi:styling directives they support.

=20 ---

There are basically 3 XSLTs:

+++

As specified in templating mechanism (be s= ure 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 X= SLT must +++ then be used to transform the form instance to an HTML to be displayed = in a +++ browser.

=20 +++

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 on= ly format +++ the forms field and the form layout.

+++=20 +++

Cocoon forms already a set of XSLTs that does exactly this, they are +++ "library" stylesheets :

+++=20
    ---
  • forms-samples-styling.xsl: this stylesheet includes two --- stylesheets: one for widget styling, one for page styling. You can choo= se --- between the basic types of it or advanced stylings. Usually, you will m= ake a --- clone of this stylesheet for your own project, and use the other styles= heets as --- is.
  • forms-field-styling.xsl: contains templates that style ind= ividual widgets, i.e. templates that translate fi:field, fi:booleanfield fi:act= ion, etc. to HTML.
  • forms-page-styling.xsl: contains templates for building hi= gh-level page layout effects, such as tabbed panes.
    • ---
---=20 ---

Additionally there are 2 XSLTs for advanced widget styling:

---=20 ---
  • forms-advanced-field-styling.xsl: contains templates that = provide advanced styling of fields, e.g. the "double-listbox" for a multivaluef= ield. It's indeed an extension of the above basic forms-field-styling.xsl= . (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 s= tuff we separated it out of forms-advanced-styling.xsl.
    • +++
  • forms-htmlarea-styling.xsl: contains the styling for the h= tml edit +++ field.
=20 ---

From the sitemap you only need to reference the first one, for examp= le as --- follows:

+++

If you have a look at samples, you'll see also another XSLT, +++ forms-samples-styling.xsl. This stylesheet includes other two +++ stylesheets from the default set. Usually, you will make a clone of thi= s +++ stylesheet for your own project, have it include the library XSLTs, and +++ customize what you need by writing templates in this XSLT by giving tem= plates +++ higher priority than those in the library ones.

=20 --- 
<map:transform src=3D"context://samples/forms/resources/forms-s=
amples-styling.xsl"/>
+++

From the sitemap you only need to reference only your custom XSLT, f= or +++ example as follows:

=20 +++ 
<map:transform src=3D"context://forms/resources/myproject-forms=
-styling.xsl"/>
+++=20

fi:styling options

=20 +++

The fi:styling elements are specified in the template, and offer a w= ay to +++ customize the way the library XSLTs render widgets. For example :

+++=20 +++ 
<ft:widget id=3D"preferredBeer">
+++ =C2=A0 <fi:styling list-type=3D"radio"/>
+++ </ft:widget>
+++
+++=20

The fi:styling options for the different widgets are documented in t= he respective sections about those widgets.

=20

High-level styling with fi:group

=20 ---

No documentation yet, checkout the samples and the source of --- forms-page-styling.xsl.

+++

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 o= ne with +++ actual fields, while in another part have a single colum with labels fo= llowed by +++ fields, and in another part some tabs to group together fields.

=20 ---

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:

+++

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, extensi= ble and +++ easy to style way. For example :

=20 --- 
<fd:field id=3D"state">
+++ 
<ft:form-template .... >
+++ =C2=A0 <fi:group>
+++     <fi:styling layout=3D"columns">
+++ =C2=A0=C2=A0=C2=A0 <fi:items>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <ft:widget id=3D"name"/>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <ft:widget id=3D"surname"/>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <ft:widget id=3D"birthday"/>
+++ =C2=A0=C2=A0=C2=A0 </fi:items>
+++ =C2=A0 </fi:group>
+++ </ft:form-template>
+++ 

+++=20
+++ 
Will produce a table with two columns, like the following :

+++=20
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 
+++ 

+++ 
Name

+++ 		
+++ 
[_______]

+++ 

+++ 
Surname

+++ 		
+++ 
[_______]

+++ 

+++ 
Birthday

+++ 		
+++ 
[_______]

+++ 

+++=20
+++ 
The fi:group accept either a layout or a type<=
/tt>
+++ attribute in its fi:styling element to specify the layout we w=
ant. This
+++ difference is because the "layout based" groups are quite lightweight, =
while the
+++ "type based" groups are more sophisticated and usually contains other g=
roups.
+++ 

+++=20
+++ 
Layout groups

+++=20
+++ 
<fi:group layout=3D"column"> will format its items in=
 a single
+++ column. One row will contain the label, the following row the input fie=
ld.

+++=20
+++ 
<fi:group layout=3D"columns"> will format its items i=
n two
+++ columns. For each item a row is created, the first column will contain =
the
+++ label, and the second column the input field.

+++=20
+++ 
<fi:group layout=3D"row"> will format its items in a =
single row.
+++ One cell will contain the label, the following cell the input field.
+++=20
+++ 
<fi:group layout=3D"rows"> will format its items in t=
wo rows.
+++ The first row will contain all the labels, one each cell, the second ro=
w all the
+++ input fields, again one each cell.

+++=20
+++ 
Some input fields will have a special layout when inside a certain g=
roup :
+++ 

+++=20
+++ 
    
+++ 
  • action, submit and boolanfield widgets d=
oes not
+++ have a "label" which can be displayed separated from the button or chec=
kbox
+++ itself, so they will be placed
    • 
+++ 
      
+++ 
    • in a single line inside the column and columns la=
yout
      • 
+++ 
    • using only one cell in row layout
      • 
+++ 
    • using an empty cell in the first row of a rows layout
      • 
+++ 
    
+++=20
+++ 
  • multivaluefield with a list-type=3D"double-listbox=
"
+++ will be displayed with a row with a label and another row with the two =
lists
+++ when in a columns group.
    • 
+++ 
  • every other fi:group nested inside a fi:group wit=
h layout
+++ columns will span on both columns
    • 
+++ 

+++=20
+++ 
Also layout fi:group can contain other fi:group be=
tween
+++ their items, and can be used to create quite complex layouts.

+++=20
+++ 
Type groups

+++=20
+++ 
There are currently two "type" groups : tabs and choice=
.
+++ 

+++=20
+++ 
The tabs group will display some tabs, every tab is (usually) a fi:g=
roup. For
+++ example :

+++=20
+++ 
<fi:group>
+++ =C2=A0 <fi:styling type=3D"tabs"/>
+++ =C2=A0 <fi:items>
+++ =C2=A0=C2=A0=C2=A0 <fi:group>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:label>Personal info</fi:lab=
el>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:styling layout=3D"columns"/>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:items>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <ft:widget id=3D"name"/&g=
t;
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <ft:widget id=3D"surname"=
/>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 </fi:items>
+++ =C2=A0=C2=A0=C2=A0 </fi:group>
+++ =C2=A0=C2=A0=C2=A0 <fi:group>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:label>Iternet data</fi:labe=
l>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:styling layout=3D"columns"/>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:items>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <ft:widget id=3D"email"/&=
gt;
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <ft:widget id=3D"icqaccou=
nt"/>
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 </fi:items>
+++ =C2=A0=C2=A0=C2=A0 </fi:group>
+++ =C2=A0 </fi:items>
+++ </fi:group>

+++=20
+++ 
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 surna=
me will
+++ be displayed, while when the user clicks on "Internet data" the field e=
mail and
+++ icqaccount will be displayed.

+++=20
+++ 
You can specify a widget that will be used to store and retrieve whi=
ch 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 :

+++=20
+++ 
<fi:group>
+++ =C2=A0 <fi:styling type=3D"tabs"/>
+++ =C2=A0 <fi:state>
+++ =C2=A0=C2=A0=C2=A0 <ft:widget id=3D"activetab"/>
+++ =C2=A0 </fi:state>
+++   ....
+++ </fi:group>

+++=20
+++ 
Obviously you can call the widget whatever you want, and the suggest=
ed
+++ datatype is integer, since the field will contain a number indicating t=
he active
+++ tab, the field must be declared in the definition, and can be used in b=
inding if
+++ needed. For example :

+++=20
+++ 
<fd:field id=3D"activetab">
      <fd:datatype base=3D"integer"/>
    </fd:field>

   =20
--- 
Bind this value to whatever you want. In the form template you need =
then
--- following code:

+++ 
The group of type choice is identical to the tabs =
group,
+++ but instead of a row of tabs, a drop down is displayed, and selecting o=
ne
+++ element of the drop down will display the relative group.

   =20
+++ 
You can specify a client side javascript that will be executed when =
a tab is
+++ clicked or when an option of the choice drop down is selected.=
 This is
+++ done simply adding an attribute to the items of the group, for example =
:

+++=20
    
<fi:group>
---   <fi:styling type=3D"choice"/>
---   <fi:state>
---     <ft:widget id=3D"state"/> <!-- refering to the above defin=
ed field -->
---   </fi:state>
---   <fi:items>
---     ...
---   </fi:items>
+++ =C2=A0 <fi:styling type=3D"tabs"/>
+++ =C2=A0 <fi:items>
+++ =C2=A0=C2=A0=C2=A0 <fi:group formsOnShow=3D"personalSelected()">
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:label>Personal info</fi:lab=
el>
+++       ...
+++ =C2=A0=C2=A0=C2=A0 </fi:group>
+++ =C2=A0=C2=A0=C2=A0 <fi:group formsOnShow=3D"internetSelected()">
+++ =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 <fi:label>Iternet data</fi:labe=
l>
+++       ...
+++ =C2=A0=C2=A0=C2=A0 </fi:group>
+++ =C2=A0 </fi:items>
    </fi:group>

   =20
+++ 
Have a look at forms-page-styling.xsl , all fi:groups are
+++ formatted there.

+++=20
    
Miscellaneous

   =20
    
fi:validation-errors

(17 equal lines skipped)


Fields
=3D=3D=3D=3D=3D=3D
no changes

Links
=3D=3D=3D=3D=3D
no changes

Custom Fields
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
no changes

Collections
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
no changes