The skinnability feature works only for RichFaces components, so, the same problems for which this feature was created would be found using other framework components (also using the standard JSF ones!).
In order to be able to use the skin parameters also for non-RichFaces components, the framework declares an object called richSkin that permits access to the skin values.
Let's see this code as an example:
#{richSkin.tabBackgroundColor}
Therefore, if we have a seam div component (s:div) and we still want to use the border color defined by the skin, we can use this code:
<s:div
style="border: 10px solid #{richSkin.panelBorderColor}">
<h:outputText value="Example text" />
</s:div>
And the color will be the one selected by our skin, so, for our new custom skin it will be as follows:
Instead, for the japanCherry skin, it will be:
For the standard XHTML controls, we have the options of customizing the style the RichFaces way.
RichFaces, in fact, unifies the application's appearance by skinning the standard HTML elements the same way it does with the other components of the library.
There are two levels of skinning:
- Standard: For customizing only the basic properties (applies to IE 6, IE 7 in BackCompat mode and Safari)
- Extended: For customizing more properties with more styles (it applies to Mozilla Firefox and IE 7 in standards-compliant mode)
In order to activate the Standard controls skinning, it is sufficient to add a new context-param inside the web.xml file, like this:
<context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value> </context-param>
This will enable the feature for our application.
Enabling the parameter in our application will skin the standard controls from this:
If you want to customize the standard controls using the CSS framework, you can also enable the org.richfaces.CONTROL_SKINNING_CLASSES context parameter (inside the web.xml file) by doing so, you will be able to edit a set of CSS classes for skinning the XHTML components (some examples of CSS classes you can redefine are rich-select, rich-input-text, and so on that follow the rich-<elementName>[-<elementType>] pattern).
Tip
Extended skinning in Opera and Safari
In order to resolve some problem with extended skinning in Opera and Safari, you can activate a JavaScript script that detects the browser and enables extended skinning only where supported.
For doing that, just add the following code to the XHTML page (in our case, we would add it to the /view/layout/template.xhtml file):
<script type="text/javascript">
window.RICH_FACES_EXTENDED_SKINNING_ON = true;
</script>
Another way to use skin properties values for CSS classes is the XCSS. It is an XML version of the CSS used to extend the CSS feature and add extra functionalities. It is widely used inside the RichFaces framework, because of its flexibility. In short, it is an XML version of the CSS file that contains skin parameters and dynamic resource generator classes. It is automatically converted in a standard CSS file suitable for all browsers.
In our application, you can open the /view/stylesheet/theme.xcss file and look at the definition created by Seam-gen for the project.
As you can see, you have to use the<u:selector> and<u:style> XML tags to create a CSS selector.
Let's see the following code for example:
<u:selector name=".rich-panel-header"> <u:style name="background-color" skin="headerBackgroundColor" /> <u:style name="color" skin="headerTextColor" /> </u:selector>
This will read the values from the current skin and produce the following CSS code (if mySkin is selected):
.rich-panel-header {
background-color: #005000;
color: #FFFFFF;
}
As you can see, the name attribute of the u:selector tag defines the CSS selector name, and the name attribute of the u:style tag defines the name of the CSS property.
You can also use comma-separated CSS selector names into the u:selector name attribute to specify more selector at a time:
<u:selector name=".rich-panel-header, .rich-panel-body"> ...
Another feature is the possibility to use Java resources inside the CSS to dynamically generate images; in theme.xcss, you can find some examples to generate gradients:
<u:selector name=".rich-table-subheadercell"> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.images.TabGradientB"/> </u:style> </u:selector>
XCSS is very powerful and extends the CSS framework for skinning every component we need to skin!