Changing the style of a JSF control

You can change the appearance of a JavaServer Faces (JSF) control with EGL code, such as changing the text color. To make a larger change in the control's appearance by changing its style class, see Changing the style class 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.
Follow these steps to change the style of a JSF control from an EGL JSF Handler:
  1. On a blank line inside a function in the JSF 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 that 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, change the style of the JSF control with the setStyle function. For example, to change the text in a text control to red, add this code:
    text1.setStyle("color : red");
    When this code runs, the style attribute 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" style="color : red" />
    The new style attribute overwrites any previous style attribute. To make more than one change to the style of a control, 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");
Some examples of other changes you can make to the style of a control follow. Not all styles are compatible with all JSF controls.
text1.setStyle("font-size : 20pt");
Sets the size of the font in the control to 20 points.
text1.setStyle("text-align: center");
Centers the text within the control.
text1.setStyle("border-style : solid; border-color : red");
Adds a red border composed of a solid line around the control.
text1.setStyle("font-weight : bold");
Makes the text within the control bold.
text1.setStyle("height : 50px");
Makes the control 50 pixels tall.

Feedback