EGL allows you to dynamically update aspects of JSF controls that are displayed in a web browser. For example, you can change the color of a text box if the user enters information that is not valid in the field.
To access a JSF component on a Faces JSP page, you first define an EGL variable with the type of that component. EGL provides ExternalType parts in the package com.ibm.egl.jsf to represent the JSF components. Then, you create a variable to represent the complete hierarchy of JSF components on the page, also called the component tree. Next, you assign the variable representing the JSF component to the actual JSF component using the findComponent() function of the component tree.
controlVar = viewRoot.findComponent(controlName);
"form1:text1"
After you assign the variable to the JSF control, you can use functions on that variable to make changes to the JSF component. Different types of JSF controls accept different functions; the functions each type of component can accept are included in the component's matching ExternalType part.
You can access JSF components through these ExternalType parts in any function in a JSF Handler except the functions specified in the onConstructionFunction and onPreRenderFunction properties, or in any functions called by those functions. When these functions run, the component tree has not yet been rendered, so any attempt to access the JSF components in this way will fail. The function specified in the onPostRenderFunction property can access the JSF component tree. However, because the postrender function is called after the page is rendered and sent to the browser, the changes to the page will not be visible to the user until the page is refreshed.
The following code identifies a UIViewRoot variable, creates the variable, and links it to a text input field:
import com.ibm.egl.jsf.HtmlInputText;
import com.ibm.egl.jsf.UIViewRoot;
Handler handler01 type JSFHandler
{ viewRootVar=myViewRoot }
myViewRoot UIViewRoot;
function changeFieldColor()
inputVar HtmlInputText;
inputVar = myViewRoot.findComponent("form1:text1");
inputVar.setStyle("color : red");
end
end