Changing the style of a JSF component

You can change the appearance of a JSF component with EGL code, such as changing the text color. To make a larger change in the component's appearance by changing its style class, see Changing the style class 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 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, change the style of the JSF component with the setStyle function. For example, to change a text field's text to red, add this code:
    text1.setStyle("color : red");
    When this code runs, the style attribute 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" style="color : red" />
    The new style attribute overwrites any previous style attribute. To make more than one change to the component's style, separate changes with semicolons (;). For example, to change the color to red and the size to 20 points, use this code:
    text1.setStyle("color : red; font-size: 20pt");
Following are some examples of other changes you can make to the style of a component. Not all styles are compatible with all JSF components.
text1.setStyle("font-size : 20pt");
Sets the size of the font in the component to 20 points.
text1.setStyle("text-align: center");
Centers the text within the component.
text1.setStyle("border-style : solid; border-color : red");
Adds a red border composed of a solid line around the component.
text1.setStyle("font-weight : bold");
Makes the text within the component bold.
text1.setStyle("height : 50px");
Makes the component 50 pixels tall.

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 class 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 properties
Defining page styles for a Web site - overview

Related reference
Component tree access parts

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