Component tree access

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.

Use the following syntax to assign a variable to a JSF control:
   controlVar = viewRoot.findComponent(controlName);
controlVar
An ExternalType variable representing the JSF component.
viewRoot
A variable of the UIViewRoot type that represents the JSF component tree on the page. This variable must be set as the value of the viewRootVar JSF Handler property.
controlName
A string variable or literal that identifies the control. In most cases, you specify a series of JSF control IDs, starting with the ID of the top-level form in the component tree and continuing to the ID of the specific control, with each ID separated from the next by a colon (:). The following string references a text box named text1 in a top-level form named form1:
  "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.

Example

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

Feedback