PhotoAlbum Application Download Support Developer Guide
Skins:
Resources/Beans Handling
Ajax Miscellaneous

This section overviews main principles of standard components skinning with the Rich Faces framework.

This feature provides styling for standard HTML form elements in order to be highly compilant with RichFaces common look'n'feel. There should be two ways of applying skins to elements:

  • Skinning style classes are applied to elements by element name and type attribute (where applicable). No additional steps are required from an application developer. Application initialization parameter serves for enabling/disabling the feature.
  • Several style classes are provided for different types of elements. That style classes have predefined names. Application developer should manually assign classes to controls that need skinning or assign a class to an element that contains controls.

Standard controls skinning feature provides 2 levels of skinning:

  1. Standard - customization of only basic style properties.
  2. Extended - extends basic level introducing customizations of a broader number of style properties

Skinning level is calculated automatically at server side depending on user agent info.

Extended skinning is not applied to browsers with rich visual styling for controls (e.g. Opera and Safari). Also advanced level of skinning requires support of CSS 2 attribute selectors either as implicit type attributes for button/textarea elements (e.g. IE7 in standards compilant mode) or CSS 3 draft namespace selectors (e.g. Mozilla Firefox).

Click here to call modal with an example.

There three ways of applying skinning to application:

  • By default org.richfaces.CONTROL_SKINNING context param is set to enable and it means that all standard elements on the page will be skinned. (CSS style classes for elements based on their names and type attribute values will be applied). You may redefine it to disable in order to turn it off.
  • By default org.richfaces.CONTROL_SKINNING_CLASSES context param is set to enable and it means that basic elements nested to element having rich-container class will be skinned. It could be also turned off using disable value.
  • RichFaces also provides predefined classes which can be applied by an end developer to elements need to be skinned separately. This classes added to the page also according to org.richfaces.CONTROL_SKINNING_CLASSES context-param.

Using first way CSS with the next definitions will be automatically added to pages:

CSS for standard elements snippet
...

select {
    //class content
}

hr {
    //class content
}

...

And using the second way the next CSS will influence corresponding elements:

CSS for standard elements inside rich container snippet
...
.rich-container select {
      //class content
}

.rich-container hr {
    //class content
}
...

And the last one means that classes with names corresponding to elements names will be added to the application pages and possible to set manually:

Predefined rich classes
...
.rich-select {
    //class content
}

.rich-input-text {
    //class content
}
...

Important Exception: a elements have classes based on "link" and pseudo class name. (e.g.: rich-link, rich-link-hover, rich-link-visited)

One additional note. In the predefined rich classes css we provide not only classes for basic HTML elements but also classes for some complex elements creation. There is a snippet with some of them for example:

Additional predefined rich classes
//backgrouns
...
<u:selector name=".rich-box-bgcolor-header">
    <u:style name="background-color" skin="headerBackgroundColor" />
</u:selector>

<u:selector name=".rich-box-bgcolor-general">
    <u:style name="background-color" skin="generalBackgroundColor" />
</u:selector>
...

//gradient elements
...
<u:selector name=".rich-gradient-menu">
    <u:style name="background-image">
        <f:resource f:key="org.richfaces.renderkit.html.gradientimages.MenuGradientImage"/>
    </u:style>
    <u:style name="background-repeat" value="repeat-x" />
</u:selector>

<u:selector name=".rich-gradient-tab">
    <u:style name="background-image">
        <f:resource f:key="org.richfaces.renderkit.html.gradientimages.TabGradientImage"/>
    </u:style>
    <u:style name="background-repeat" value="repeat-x" />
</u:selector>
...

To get a better idea of standard component skinning we recommend to explore CSS files located in ui/core/src/main/resources/org/richfaces/ folder of RichFaces svn.

RichFaces Wiki RichFaces Project Site