4.4.6. Built-in Skinnability in RichFaces

RichFaces lets you incorporate skins into your user interface (UI) design. This framework lets you use named skin parameters in your properties files to control skin appearance consistently across a set of components. You can see examples of predefined skins at: http://livedemo.exadel.com/richfaces-demo/
Skins let you define a style in which to render standard JSF components and custom JSF components built with RichFaces. You can experiment with skins by following these steps:
  • Create a custom render kit and register it in the faces-config.xml like so: 
    <render-kit>
     <render-kit-id>NEW_SKIN</render-kit-id>
     <render-kit-class>org.ajax4jsf.framework.renderer.ChameleonRenderKitImpl</render-kit-class>
</render-kit>
  • Next, create and register custom renderers for the component based on the look-and-feel predefined variables: 
    <renderer>
	<component-family>javax.faces.Command</component-family>
    <renderer-type>javax.faces.Link</renderer-type>
    <renderer-class>newskin.HtmlCommandLinkRenderer</renderer-class>
</renderer>
  • Finally, place a properties file with skin parameters into the class path root. There are two requirements for the properties file:
    • The file must be named skinName.skin.properties. In this case, we would call it newskin.skin.properties.
    • The first line in this file should be render.kit=render-kit-id. In this case, we would use render.kit=NEW_SKIN.
More information about creating custom renderers can be found at: http://java.sun.com/javaee/javaserverfaces/reference/docs/index.html.