Accessing the JSF component tree with the source assistant

You can use EGL code to call Java™ functions that are recognized by JavaServer Faces (JSF) controls. In this way, you can change the appearance and behavior of these controls from a JSF Handler. The following example includes EGL code to access a JSF control:
package jsfhandlers;

import com.ibm.egl.jsf.*;

handler myPage type JSFHandler
   {view = "myPage.jsp",
    viewRootVar = myViewRoot}

    myViewRoot UIViewRoot;
    myInputVar string = "Hello";

  function changeColor()
    myInputField HtmlInputText;
    myInputField = myViewRoot.findComponent("form1:text1");
    myInputField.setStyle("color : red");
  end

end
This example assumes an input control on the JSP named text1 that is bound to the myInputVar variable and a command button on the JSP that is bound to the changeColor function.
To access a JSF control from a JSF Handler:
  1. Make sure that your EGL web project has support for the JSF component interface. See Adding JSF component interface support to an EGL web project.
  2. Create a web page and add one or more JSF controls to it.
  3. Optionally, you might want to change the ID attribute of the JSF controls so they will be easier to identify. You can change the ID attribute by selecting the control and typing a meaningful mnemonic that is unique within the page in the ID field in the Properties view.
  4. In the JSF Handler of the page, add the following code. If you create the Faces JSP file after you add support for the JSF component interface to the project, this code is added to the JSF Handler's file automatically.
    • Add the following import statement:
      import com.ibm.egl.jsf.*

      The packages that are imported by this statement contain a group of ExternalType parts which provide access to Java code in the JSF controls. You do not need to edit these parts.

    • Within the JSF Handler of the page, declare a variable of the type UIViewRoot, as in this example:
      myViewRoot UIViewRoot;
    • Specify the name of the UIViewRoot variable in the viewRootVar JSF Handler property:
      handler myPage type JSFHandler
         {view = "myPage.jsp",
          viewRootVar = myViewRoot}
  5. 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.
  6. In the EGL Source Assistant window, select the JSF control you want to access. You can use the IDs or control types to find the control you want, or you can hover the mouse over the controls to see their attributes.
  7. Click OK.
    The EGL source assistant adds two lines of EGL code to the JSF Handler:
    • The first line of code defines an EGL variable of the ExternalType part that matches the JSF control that you selected. In the previous example, a variable of the type HtmlInputText is defined to access a JSF input text control, using this code:
      myInputField HtmlInputText;
    • The second line of code associates that variable with the JSF control. In the above example, the variable is associated with a JSF input text control named text1, which is located within a form named form1, using this code:
      myInputField = myViewRoot.findComponent("form1:text1");
  8. Use the variable to change the JSF control. For example, the following code uses the setStyle function to change the text in an input control to the color red:
    myInputField.setStyle("color : red");
    When this code runs, the style 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 related topics in this section give some other examples of operations that you can perform on JSF controls in this way. To see the full list of operations you can call on a given control, refer to the functions of the ExternalType parts in the com.ibm.egl.jsf package.

Following are some notes about accessing JSF controls with EGL code:

There are many different changes that you can make to JSF controls. See the related tasks for some examples.


Feedback