apache > cocoon
 

XSLT

Intro

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 templating mechanism.

There are basically 3 XSLTs:

  • forms-samples-styling.xsl: 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.
  • forms-field-styling.xsl: contains templates that style individual widgets, i.e. templates that translate fi:field, fi:booleanfield fi:action, etc. to HTML.
  • forms-page-styling.xsl: contains templates for building high-level page layout effects, such as tabbed panes.

Additionally there are 2 XSLTs for advanced widget styling:

  • forms-advanced-field-styling.xsl: 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 forms-field-styling.xsl. Furthermore it includes the next stylesheet.
  • forms-calendar-styling.xsl: contains the styling of a field with 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 forms-advanced-styling.xsl.

From the sitemap you only need to reference the first one, for example as follows:

<map:transform src="context://samples/forms/resources/forms-samples-styling.xsl"/>

fi:styling options

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

High-level styling with fi:group

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

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:

<fd:field id="state">
  <fd:datatype base="integer"/>
</fd:field>

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

<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:group>

Miscellaneous

fi:validation-errors

The fi:validation-errors tag is used to display all validation errors of all widgets in a form at one location, i.e. a the top of the form.

The fi:validation-errors tag must be a child of a ft:form-template element.

You can customise a message to be shown before and after the errors by adding a child header and/or footer element:

<fi:validation-errors>
  <header><p>Correct these errors please:</p></header>
  <footer><p>And then resubmit the form.</p></footer>
</fi:validation-errors>