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:
- 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.
- Create a Faces JSP file and add one or more JSF components to it.
- 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.
- 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.
- 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:
- 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:
- For the complete list of JSF functions accessible in EGL, open the file
FacesHtmlComponent.egl in the package com.ibm.egl.jsf. This file is added
to your project when you add support for the JSF component interface. The
functions are briefly explained in comments to this file. For more detailed
information, see the documentation for Faces components.
- When passing a parameter to one of these functions, be sure to pass the
correct data type. Because many of the parameters passed to these functions
are inserted into HTML attributes, they must be passed EGL string variables,
even if the name of the function suggests that the parameter is a numerical
or boolean value.
For example, the setWidth function sets the width of
a component in pixels, or in a percentage of its original size if the percent
(%) symbol is appended. Because this function's parameter is a measurement,
it might seem to take an integer data type as a parameter. However, this function
must receive a string. To set the width of a component to 300 pixels, you
must pass a string variable with the value "300".
- Because many of the functions set or return information from HTML attributes,
you should be aware of the HTML attributes connected to the functions you
are using. You may change an HTML attribute that is needed for the page to
work properly. For example, if you change the style class of a component as
in Changing the style class of a JSF component, that new style class
of the component must be available to the page in a CSS file or style tag,
or else the component may not display properly. Be sure to test any changes
you make to Web pages. The comments in the FacesHtmlComponent.egl file note
functions that change HTML attributes directly.
- In most cases, the changes you make to the JSF components are not cumulative.
For example, if you set a component's text to red with the code myComponent.setStyle("color:
red"); and then set the same component's text to bold with the code myComponent.setStyle("font-weight:
bold");, the text will be bold but not red, because the change to
bold overwrites the change to red.
To add several changes to a JSF component,
retrieve the current state of the component and append the new data, paying
attention to how the list of changes is delimited. For example, use the following
code to change a component's text to bold and red, without overwriting any
previous changes to that component's style:
myStyleString string;
myStyleString = myComponent.getStyle() + "; color: red; font-weight: bold";
myComponent.setStyle(myStyleString);
There are many different changes you can make to JSF components. See the
related tasks for some examples.