Changing the style class of a JSF control

Like many elements on a web page, JSF controls 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 control on a Faces JSP file from one class to another. To make smaller changes to a JSF control's style, such as changing the text color, see Changing the style of a JSF control.

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

Feedback