Accessing a JSF component from a pageHandler

You can use EGL code to call Java™ functions recognized by JSF components In this way, you can change the appearance and behavior of these components from an EGL pageHandler. The following is an example of a page code file that includes EGL code to access a JSF component:
package pagehandlers;

import com.ibm.egl.jsf.*;

pageHandler myPageHandler
  {onPageLoadFunction = onPageLoad,
  view = "myPage.jsp",
  viewRootVar = "myViewRoot"}

  myViewRoot UIViewRoot;

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

end
Follow these steps to access a JSF component from a pageHandler:
  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 Faces JSP file and add one or more JSF components to it.
  3. Optionally, you may want to change the ID attribute of the JSF components so they will be easier to find from the EGL code. You can change the ID attribute by selecting the component and entering a meaningful mnemonic in the ID field in the Properties view.
  4. In the page's page code file, add the following code. If you created the Faces JSP file after you added support for the JSF component interface to the project, this code is added to the page code file automatically.
    • Add the following import statement:
      import com.ibm.egl.jsf.*

      The packages imported by this statement contain a series of interface parts, each of which provides access to Java code. You do not need to understand the interface mechanism, though an explanation is provided in EGL interface technology.

    • Within the page's pageHandler, declare a variable of type UIViewRoot.
    • Specify the name of the UIViewRoot variable in the pageHandler property viewRootVar.
  5. 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.
  6. In the EGL Source Assistant window, select the JSF component you want to access.
  7. Click OK.
    The EGL source assistant adds two lines of EGL code to the pageHandler:
    • The first line of code defines an EGL variable of the type that matches the JSF component that you selected. In the above example, a variable of type HtmlInputText is defined to access a JSF input text field, using this code:
      myInputField HtmlInputText;
    • The second line of code associates that variable with the JSF component. In the above example, the variable is associated with a JSF input text field named text1 that is located within a form named form1, using this code:
      myInputField = myViewRoot.findComponent("form1:text1");
  8. Use the variable to change the JSF component. For example, the following code uses the setStyle function to change the text in an input field to the color red:
    myInputField.setStyle("color : red");
    When this code runs, the style 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" />
Following are some notes about accessing JSF components with EGL code:

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

Related concepts
JSF component tree
viewRootVar property

Related tasks
Adding JSF component interface support to an EGL Web project
Changing the style class of a JSF component
Changing the style of a JSF component
Changing the target of a JSF link
Enabling or disabling JSF components
Setting the size of a JSF image
Setting event handlers for a JSF component
Setting JSF data table properties

Related reference
Component tree access parts

Feedback
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.