cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Simone Gianni (JIRA)" <j...@apache.org>
Subject [jira] Created: (COCOON-1782) [PATCH] Support for CSS classes in cocoon forms XSL
Date Mon, 20 Feb 2006 15:36:25 GMT
[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
 Attachments: 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


Mime
View raw message