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.
- Your EGL Web project must have support for the JSF component interface.
See Adding JSF component interface support to an EGL Web project.
- The Faces JSP's page code file must have the following import statement:
import com.ibm.egl.jsf.*
- You must declare a variable of type UIViewRoot within the pageHandler.
- You must specify the name of the of the UIViewRoot variable in the pageHandler
property viewRootVar.
Follow these steps to change the style of a JSF component from an EGL pageHandler:
- 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.
- In the EGL Source Assistant window, select the JSF component you want
to access.
- 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");
- 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.