Home » Skinning and Theming

Skinning and Theming

by Online Tutorials Library

RichFaces Skinning and Theming


Skinning

Skinning is a feature of RichFaces which is used to provide look and feel for the application.

Skin is used with the RichFaces framework to change the appearance of an application through setting the colors and decoration of controls and components.

Generaly the appearance of web pages is handled through the CSS (Cascading Style Sheet) files. Skinning allows us the tools that makes it high-level extension of CSS. It is a collection of small set of font and color parameters that can be applied to multiple different styles. It prevents repetitive tasks and duplicacy in CSS files.

Each skin has a set of skin-parameters which are used to define the theme palette and other elements of the user interface. These parameters work together with regular CSS declarations, and can be referred to from within CSS using JavaServer Faces Expression Language (EL).

Available Skins

RichFaces provides number of predefined skins that can be used in the application. We can use that by the specifing skin name in the context parameter of the web.xml file. Following are the predefined skins:

  • DEFAULT
  • plain, which contains no skin parameters and is intended for embedding RichFaces components into existing projects with their own styles.
  • emeraldTown
  • blueSky
  • wine
  • japanCherry
  • ruby
  • classic
  • deepMarine

How to add skin ?

We can use skin by adding the following line in the web.xml file of our JSF application.

To understand, how to implement skin in the JSF application? Here, we have created a JSF page and we will apply skin to this page.

JSF file

// index.xhtml


1. Ruby

In this example, we are using ruby skin in our application.

// web.xml

After runing the index.xhtml file, it produces the following output.

Output:

RichFaces Skinning and theming 1


2) Wine

In this example, we are using wine skin in our application.

// web.xml

After runing the index.xhtml file, it produces the following output.

Output:

RichFaces Skinning and theming 2

3) DEFAULT

// web.xml

After runing the index.xhtml file, it produces the following output.

Output:

RichFaces Skinning and theming 3

We can notice that each skin provides new look and feel to our index page.


Skin parameters

The following table contains the parameter settings for the blueSky skin.

Parameter name Default value
headerBackgroundColor #BED6F8
headerGradientColor #F2F7FF
headTextColor #000000
headerWeightFont bold
generalBackgroundColor #FFFFFF
generalTextColor #000000
generalSizeFont 11px
generalFamilyFont Arial, Verdana, sans-serif
controlTextColor #000000
controlBackgroundColor #FFFFFF
additionalBackgroundColor #ECF4FE
shadowBackgroundColor #000000
shadowOpacity 1
panelBorderColor #BED6F8
subBorderColor #FFFFFF
calendarWeekBackgroundColor #F5F5F5
calendarHolidaysBackgroundColor #FFEBDA
calendarHolidaysTextColor #FF7800
calendarCurrentBackgroundColor #FF7800
calendarCurrentTextColor #FFEBDA
calendarSpecBackgroundColor #E4F5E2
calendarSpecTextColor #000000
editorBackgroundColor #F1F1F1
editBackgroundColor #FEFFDA
errorColor #FF0000
gradientType plain
tabBackgroundColor #C6DEFF
tabDisabledTextColor #8DB7F3
tableHeaderBackgroundColor #D6E6FB

ECSSFile

ECSS file is used to add extra functionality to the skining process. ECSS files are CSS files which use Expression Language (EL) to connect styles with skin properties.

Following example contains styles for the panel and its body.


You may also like