| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <title>Cocoon Forms: XSLT</title> |
| <link href="http://purl.org/DC/elements/1.0/" rel="schema.DC"> |
| <meta content="The Apache Cocoon Team" name="DC.Creator"> |
| </head> |
| <body> |
| |
| <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="templatetransformer.html">template transformer</a>.</p> |
| |
| |
| <p>There are basically 3 XSLTs:</p> |
| |
| |
| <ul> |
| |
| <li> |
| <span class="codefrag">forms-samples-styling.xsl</span>: 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> |
| <span class="codefrag">forms-field-styling.xsl</span>: contains templates that style |
| individual widgets, i.e. templates that translate fi:field, fi:booleanfield |
| fi:action, etc. to HTML.</li> |
| |
| <li> |
| <span class="codefrag">forms-page-styling.xsl</span>: 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> |
| <span class="codefrag">forms-advanced-field-styling.xsl</span>: 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 <span class="codefrag">forms-field-styling.xsl</span>. |
| Furthermore it includes the next stylesheet.</li> |
| |
| <li> |
| <span class="codefrag">forms-calendar-styling.xsl</span>: 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 <span class="codefrag">forms-advanced-styling.xsl</span>.</li> |
| |
| </ul> |
| |
| |
| <p>From the sitemap you only need to reference the first one, for example as follows:</p> |
| |
| |
| <pre class="code"><map:transform src="context://samples/forms/resources/forms-samples-styling.xsl"/></pre> |
| |
| |
| |
| <h1>fi:styling options</h1> |
| |
| <h2>fi:field (without selection list)</h2> |
| <p>By default all attributes on the fi:styling element will be copied |
| onto the resulting HTML <input> element. Thus you can put e.g. type, |
| class, style and size attributes on it. For example:</p> |
| <pre class="code"><ft:widget id="myfield"> |
| <fi:styling size="50" class="kinky"/> |
| </ft:widget></pre> |
| <p>Some values for the type attribute will cause special effects:</p> |
| <ul> |
| |
| <li> |
| <strong>type="textarea"</strong>: creates a <textarea> instead of an <input> element</li> |
| |
| <li> |
| <strong>type="htmlarea"</strong>: creates a <textarea> instead of an <input> element, |
| adding support for WYSIWYG editing of HTML using HTMLArea (works with IE 5.5+ under Windows |
| and Mozilla 1.3+, any platform)</li> |
| |
| <li> |
| <strong>type="output"</strong>: outputs the field's value as uneditable text</li> |
| |
| </ul> |
| <p>Adding an attribute <strong>submit-on-change="true"</strong> on fi:styling will cause |
| an automatic form submit when the field's value changes.</p> |
| |
| |
| <h2>fi:field (with selection list)</h2> |
| <p>By default, a field with a selection list is rendered as a dropdown box.</p> |
| <p>Adding an attribute <strong>list-type="radio"</strong> on fi:styling |
| produces a vertical list of radio buttons instead. Add list-orientation="horizontal" |
| to have a horizontal list of radio buttons.</p> |
| <p>Adding an attribute <strong>list-type="listbox"</strong> on fi:styling produces a selection list, |
| use the attribute list-size to specify its size (default 5).</p> |
| |
| |
| <h2>fi:action</h2> |
| <p>By default, creates an <input> of type submit, thus showing a standard button. |
| To have an image button instead, try this:</p> |
| <pre class="code"><fi:styling type="image" src="blah.gif"></pre> |
| |
| |
| <h2>Other widgets</h2> |
| <p>Not yet documented here, but don't be afraid to look at the source of the XSLT's.</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>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> |
| |
| |
| <pre class="code"><fd:field id="state"> |
| <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> |
| |
| |
| <pre class="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></pre> |
| |
| |
| |
| <h1>Miscellaneous</h1> |
| |
| <h2>fi:validation-errors</h2> |
| <p>The <span class="codefrag">fi:validation-errors</span> 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.</p> |
| <p>The fi:validation-errors tag must be a child of a ft:form-template element.</p> |
| <p>You can customise a message to be shown before and after the errors by adding |
| a child header and/or footer element:</p> |
| <pre class="code"><fi:validation-errors> |
| <header><p>Correct these errors please:</p></header> |
| <footer><p>And then resubmit the form.</p></footer> |
| </fi:validation-errors></pre> |
| |
| |
| </body> |
| </html> |
