4.4. Skinnability

If you look at any CSS (Cascading Style Sheets) file in an enterprise application, you will notice how often the same color is noted. Standard CSS cannot define a particular color abstractly as a panel header color, the background color of an active pop-up menu item, a separator color, etc. To define common interface styles, you must copy the same value multiple times, and the more interfaces you have, the more repetition is required.

Therefore, if you want to change the palette of an application, you must change all interrelating values, or your interface can appear clumsy. If a customer wants to be able to adjust their interface's look and feel in real time, you must be able to alter several CSS files, each of which will contain the same value multiple times.

You can solve these problems with the skins that are built into and fully implemented in RichFaces. Every named skin has skin parameters that define a palette and other attributes of the user interface. By changing a few skin parameters, you can alter the appearance of dozens of components simultaneously, without interfering with interface consistency.

The skinnability feature cannot completely replace standard CSS, and does not eliminate its usage. Instead, it is a high-level extension of standard CSS that can be used in combination with regular CSS declarations. You can also refer to skin parameters in CSS through the JSF Expression Language. This lets you completely synchronize the appearance of all elements in your pages.