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>
Errors and Improvements? If you see any errors or potential improvements in this document please help us: View, Edit or comment on the latest development version (registration required).