[ http://issues.apache.org/jira/browse/COCOON-1782?page=all ]
Simone Gianni reassigned COCOON-1782:
-------------------------------------
Assign To: Simone Gianni
> [PATCH] Support for CSS classes in cocoon forms XSL
> ---------------------------------------------------
>
> Key: COCOON-1782
> URL: http://issues.apache.org/jira/browse/COCOON-1782
> Project: Cocoon
> Type: Improvement
> Components: Blocks: Forms
> Reporter: Simone Gianni
> Assignee: Simone Gianni
> Attachments: xsl-css-2.diff, xsl-css-trunk.diff, xsl-css.diff
>
> Added CSS classes to key elements in default cocoon forms XSL. Here is a
> brief explanation of how it works :
> -----------------------
> Common fields styling
> The general rule for common fields (styled by forms-field-styling.xsl) is to
> apply the following classes :
> - "forms" : is placed always, to avoid name clashes with already present
> site-specific classes.
> - <widget name> : can be "field", "action", "output", "booleanfield",
> "multivaluefield", "upload", "repeater", "imagemap", "aggregatefield",
> "form", "messages".
> - <state> : the state of the widget, can be empty, "active", "disbled",
> "output".
> - "required" : if the widget is required.
> - "with-errors" : if there are some fi:validation-messages associated with
> the widget.
> - <class> : an optional, user defined, fi:styling/@class that can be
> specified on a field to fine tune widget styling.
> This technique makes it easy to write very specific CSS rules, as much as
> very general ones. For example :
> input.required {
> color: blue;
> }
> Will make all required inputs have a blue text color, while
> input.upload.required {
> color: red;
> }
> will make only the required upload widgets have a red text color.
> The HTML elements to which this classes will be applied varies depending on
> the widget type and special fi:styling attributes (like list-type for
> selection lists, fi:styling/@type etc..).
> There are also other classes, placed to correctly style other elements, these
> are :
> - "captcha" : applied to the img element of a captcha field.
> - "required-mark" : applied to the span containing the "*" near the required
> fields.
> - "validation-message" : applied to the anchor element containing the "!"
> near the fields with errors.
> - "vertical-list" and "horizontal-list" : applied to the tables used to
> layout these kind of lists.
> - "upload-change-button" : applied to the button that appears next to the
> upload widget when a file has been uploaded.
> For the validation-errors element (which outputs a list of all validation
> errors found in the form) there are other special classes :
> - "validation-errors" : applied to the div that contains the errors recap
> block.
> - "validation-errors-header" and "validation-errors-footer" : applied to the
> paragraphs that contains the header and footer of the errors recap.
> - "validation-errors-content" : applied to the "li" element of the errors
> list.
> Page styling
> Another set of classes is used for page styling (forms-page-styling.xsl). The
> general rule for fi:group is to apply the following classes :
> - "forms" : as always placed to mark a cocoon forms CSS class.
> - "group" : identify a group class
> - <layout> or <type> : the fi:styling/@layout or fi:styling/@type of the
> fi:group
> - <class> : an optional, user defined, fi:styling/@class that can be
> specified on a group to fine tune styling.
> As for the widgets, these classes are applied to different HTML elements
> depèending on the group type and layout.
> For those layouts which uses tables, special classes are used to mark
> specific cells :
> - "label" : applied to the "td" containing the label
> - "content" : applied to the "td" containing the form input
> - "action" : applied to the "td" containing an action widget, for those
> layouts that creates special cells for this widgets.
> - "booleanfield" : applied to the "td" containing a booleanfield widget, for
> those layouts that creates special cells for this widgets.
> - "other" : applied to the "td" containing other content, like another nested
> fi:group or non cocoon forms elements.
> Consider this CSS snippet :
> table.group.columns {
> border: 1px solid blue;
> }
> table.group.columns td {
> background: yellow;
> }
> table.group.columns td.label {
> background: blue;
> color: white;
> width: 20%;
> }
> This will style every fi:group with layout "columns" placing a blue border on
> the table, then using a yello background for every cell in the table, while a
> blue blackground, a while text color and a width of 20% will be used for
> cells containing labels.
> A special case of layout is handled directly in the basic xsl
> (forms-field-styling.xsl), which format with a "columns" similar layout a
> "fi:form". In this case the same classes (label, content etc..) applies.
> Some special classes are used for the tab layout. These are :
> - "tabArea" : applied to the div containing the tabs.
> - "tabContent" : applied to the div containing the tabs contents.
> - "tab" : applied to every span representing a single tab
> - "active" : marks the currently active tab.
> - "validation-message" : applied to the span placed in a tab when there are
> validation-messages in any control inside that tab.
> Compatibility with old classes
> The cocoon forms XSLs prior to this patch used a few CSS classes for tabs,
> required marks, validation messages and another few elements. These classes
> have been mantained to grant backward compatibilty, but should not be used
> anymore.
> -----------------------
> Thanks to Derek Hohls and Helma for sharing with me their work on this
> subject.
--
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators:
http://issues.apache.org/jira/secure/Administrators.jspa
-
For more information on JIRA, see:
http://www.atlassian.com/software/jira
