Changing the style class of a JSF component

Like many elements on a Web page, JSF components can be assigned a style class with the class attribute. A style class, not to be confused with a Java™ class, is a group of zero to many commands that describes the appearance of an element on a Web page. Style classes are defined with the Cascading Style Sheets language, a language that can control many different aspects of the appearance of a Web page.

You can change the style class of a JSF component on a Faces JSP file from one class to another. To make smaller changes to a JSF component's style, such as changing the text color, see Changing the style of a JSF component. For more information about styles and style classes, see Defining page styles for a Web site - overview.

This task has the following prerequisites. For more information, see Accessing a JSF component from a pageHandler.
Follow these steps to change the style class of a JSF component from an EGL pageHandler:
  1. On a blank line inside a function in the pageHandler, press Ctrl+Shift+Z. The EGL Source Assistant window opens, displaying the JSF components on the page.
  2. In the EGL Source Assistant window, select the JSF component you want to access.
  3. Click OK.
    The EGL source assistant adds two lines of EGL code to the pageHandler. The first line defines an EGL variable of the type that matches the JSF component that you selected. The second line associates that variable with the JSF component. For example, the code to access a JSF input text component might look like this:
    text1 HtmlInputText;
    text1 = myViewRoot.findComponent("form1:text1");
  4. Using the EGL variable created by the source assistant, set the style class of the JSF component with the setStyleClass function. For example, to set a text field to a style class named errorField, add this code:
    text1.setStyleClass("errorField");
    When this code runs, the style class of the input field is changed. In this example, the HTML code displayed by the browser looks like this:
    <input id="form1:text1" type="text" name="form1:text1" class="errorField" />

Related concepts
JSF component tree
viewRootVar property

Related tasks
Adding JSF component interface support to an EGL Web project
Accessing a JSF component from a pageHandler
Changing the style of a JSF component
Changing the target of a JSF link
Enabling or disabling JSF components
Setting the size of a JSF image
Setting event handlers for a JSF component
Setting JSF data table propertiesDefining page styles for a Web site - overview

Related reference
Component tree access parts

Feedback
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.