Styling the ICEfaces Component Suite

Styling the ICEfaces Component Suite

The ICEfaces Component Suite fully supports consistent component styling via a set of predefined CSS style classes and associated images. Changing the component styles for a web application developed with the ICEfaces Component Suite is as simple as changing the CSS used.

A set of predefined style sheets are available to be used as-is, or customized to meet the specific requirements of the application. There are two predefined ICEfaces style sheets included:

xp.css
royale.css

Both of these style sheets provide definitions for all style classes used in the ICEfaces Component Suite. The ICEfaces Component Suite renderers will render default style class attributes based on the style classes defined in the active style sheets. In order to use these style classes, page developers must specify a style sheet in their page.

Developers may also create their own custom style sheet based on a predefined ICEfaces style sheet. If the style class names match those defined in the ICEfaces style sheets, the ICEfaces components will use the specified styles by default, without the need to specify the style class names explicitly on each component.

Note: The default CSS class names associated with each component are listed in the component's TLD (taglib) description.

The two predefined themes included with ICEfaces each consist of a style sheet and an image directory. Figure 11 shows an example of the CSS directory structure.

Figure 11 CSS Directory Structure

To use a predefined theme style sheet with an ICEfaces application, all the page developer needs to do is add the desired CSS link to the page. This can be accomplished in one of two ways:

1. Add a standard HTML link tag to the document:

XP
    <link rel="stylesheet" type="text/css" href="./xmlhttp/css/xp/xp.css" />
 
  
     Royale
  
    <link rel="stylesheet" type="text/css" href="./xmlhttp/css/xp/royale.css" />
 
2. Use the ICEfaces ice:outputStyle component (recommended).

XP
    <ice:outputStyle href="./xmlhttp/css/xp/xp.css" rel="stylesheet"
 
                                                    type="text/css" /
 
  
     Royale
  
    <ice:outputStyle href="./xmlhttp/css/royale/royale.css" rel="stylesheet" 
 
                                                            type="text/css" /> 
 
The ice:outputStyle component has the following advantages over the HTML link tag:

Automatically includes browser-specific variants of the main style sheet in the page to adapt the theme styling to account for differences in each browsers' CSS support. See the TLD (taglib) documentation for the ice:outputStyle component for details.
Provides the ability to dynamically change the theme style sheet at runtime via a value binding on the component's href attribute.
    <ice:outputStyle href="#{styleBean.activeTheme}" rel="stylesheet"
 
                                                     type="text/css" />
 
Note: In the examples above, the xmlhttp/css/xp/ path is automatically resolved by ICEfaces and all needed resources are loaded from the ICEfaces.jar.

The XP and Royale styles source code can be found in the "resources" directory of the ICEfaces bundle.