Skinnability
Every RichFaces component gives the support for skinnability and it means that just by changing the skin, we change the look for all of the components. That’s very good for giving our application a consistent look and not repeating the same CSS values for each component every time.
RichFaces still uses CSS, but it also enhances it in order to make it simpler to manage and maintain.
Customize skin parameters
A skin file contains the basic settings (such as font, colors, and so on) that we’ll use for all the components—just by changing those settings, we can customize the basic look and feel for the RichFaces framework.
As you might know, RichFaces comes with some built-in skins (and other external plug ‘n’ skin ones)—you can start with those skins in order to create your own custom skin.
The built-in skins are:
- Plain
- emeraldTown
- blueSky
- wine
- japanCherry
- ruby
- classic
- deepMarine
The plug ‘n’ skin ones are:
- laguna
- darkX
- glassX
The plug ‘n’ skin skins are packaged in external jar files (that you can download from the same location as that of the RichFaces framework) that must be added into the project in order to be able to use them.
Remember that the skin used by the application can be set as context-param in the web.xml file:
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>emeraldTown</param-value>
</context-param>
This is an example with the emeralTown skin set:
If we change the skin to japanCherry, we have the following screenshot:
That’s without changing a single line of CSS or XHTML!
Edit a basic skin
Now let’s start creating our own basic skin. In order to do that, we are going to reuse one of the built-in skin files and change it. You can find the skin files in the richfaces-impl-3.x.x.jar file inside the META-INF/skins directory.
Let’s open the file and then open, for example, the emeraldTown.skin.properties file that looks like this (yes, the skin file is a .properties file!):
#Colors
headerBackgroundColor=#005000
headerGradientColor=#70BA70
headerTextColor=#FFFFFF
headerWeightFont=bold
generalBackgroundColor=#f1f1f1
generalTextColor=#000000
generalSizeFont=18px
generalFamilyFont=Arial, Verdana, sans-serif
controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#E2F6E2
shadowBackgroundColor=#000000
shadowOpacity=1
panelBorderColor=#C0C0C0
subBorderColor=#ffffff
tabBackgroundColor=#ADCDAD
tabDisabledTextColor=#67AA67
trimColor=#BBECBB
tipBackgroundColor=#FAE6B0
tipBorderColor=#E5973E
selectControlColor=#FF9409
generalLinkColor=#43BD43
hoverLinkColor=#FF9409
visitedLinkColor=#43BD43
# Fonts
headerSizeFont=18px
headerFamilyFont=Arial, Verdana, sans-serif
tabSizeFont=11
tabFamilyFont=Arial, Verdana, sans-serif
buttonSizeFont=18
buttonFamilyFont=Arial, Verdana, sans-serif
tableBackgroundColor=#FFFFFF
tableFooterBackgroundColor=#cccccc
tableSubfooterBackgroundColor=#f1f1f1
tableBorderColor=#C0C0C0
tableBorderWidth=2px
#Calendar colors
calendarWeekBackgroundColor=#f5f5f5
calendarHolidaysBackgroundColor=#FFEBDA
calendarHolidaysTextColor=#FF7800
calendarCurrentBackgroundColor=#FF7800
calendarCurrentTextColor=#FFEBDA
calendarSpecBackgroundColor=#E2F6E2
calendarSpecTextColor=#000000
warningColor=#FFE6E6
warningBackgroundColor=#FF0000
editorBackgroundColor=#F1F1F1
editBackgroundColor=#FEFFDA
#Gradients
gradientType=plain
In order to test it, let’s open our application project, create a file called mySkin.skin.properties inside the directory /resources/WEB-INF/, and add the above text.
Then, let’s open the build.xml file and edit it, and add the following code into the war target:
<copy
tofile="${war.dir}/WEB-INF/classes/mySkin.skin.properties"
file="${basedir}/resources/WEB-INF/mySkin.skin.properties"
overwrite="true"/>
Also, as our application supports multiple skins, let’s open the components.xml file and add support to it:
<property name="defaultSkin">mySkin</property>
<property name="availableSkins">
<value>mySkin</value>
<value>laguna</value>
<value>darkX</value>
<value>glassX</value>
<value>blueSky</value>
<value>classic</value>
<value>ruby</value>
<value>wine</value>
<value>deepMarine</value>
<value>emeraldTown</value>
<value>japanCherry</value>
</property>
If you just want to select the new skin as the fixed skin, you would just edit the web.xml file and select the new skin by inserting the name into the context parameter (as explained before).
Just to make an (bad looking, but understandable) example, let’s change some parameters in the skin file:
#Colors
headerBackgroundColor=#005000
headerGradientColor=#70BA70
headerTextColor=#FFFFFF
headerWeightFont=bold
generalBackgroundColor=#f1f1f1
generalTextColor=#000000
generalSizeFont=18px
generalFamilyFont=Arial, Verdana, sans-serif
controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#E2F6E2
shadowBackgroundColor=#000000
shadowOpacity=1
panelBorderColor=#C0C0C0
subBorderColor=#ffffff
tabBackgroundColor=#ADCDAD
tabDisabledTextColor=#67AA67
trimColor=#BBECBB
tipBackgroundColor=#FAE6B0
tipBorderColor=#E5973E
selectControlColor=#FF9409
generalLinkColor=#43BD43
hoverLinkColor=#FF9409
visitedLinkColor=#43BD43
# Fonts
headerSizeFont=18px
headerFamilyFont=Arial, Verdana, sans-serif
tabSizeFont=11
tabFamilyFont=Arial, Verdana, sans-serif
buttonSizeFont=18
buttonFamilyFont=Arial, Verdana, sans-serif
tableBackgroundColor=#FFFFFF
tableFooterBackgroundColor=#cccccc
tableSubfooterBackgroundColor=#f1f1f1
tableBorderColor=#C0C0C0
tableBorderWidth=2px
#Calendar colors
calendarWeekBackgroundColor=#f5f5f5
calendarHolidaysBackgroundColor=#FFEBDA
calendarHolidaysTextColor=#FF7800
calendarCurrentBackgroundColor=#FF7800
calendarCurrentTextColor=#FFEBDA
calendarSpecBackgroundColor=#E2F6E2
calendarSpecTextColor=#000000
warningColor=#FFE6E6
warningBackgroundColor=#FF0000
editorBackgroundColor=#F1F1F1
editBackgroundColor=#FEFFDA
#Gradients
gradientType=plain
Here is the screenshot of what happened with the new skin:
How do I know which parameters to change? The official RichFaces Developer Guide contains, for every component, a table with the correspondences between the skin parameters and the CSS properties they are connected to.
