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:
- 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 web page and add one or more JSF controls to it.
- 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.
- 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}
- 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.
- 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.
- Click OK.
The EGL source assistant adds
two lines of EGL code to the JSF Handler:
- 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:
- For the complete list of JSF functions that are 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 controls.
- 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 as 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 control
in pixels, or in a percentage of its original size if the percent
(%) symbol is appended. Because this parameter is a measurement, it
might seem to take a numeric data type as a parameter. However, this
function must receive a string. To set the width of a control 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 that are connected
to the functions that you are using. You might change an HTML attribute
that is needed for the page to work correctly. For example, if you
change the style class of a control as in Changing the style class
of a JSF control, that new style class of the control must be
available to the page in a CSS file or style tag, or else the control
might not display properly. Be sure to test any changes that you make
to web pages. The comments in the FacesHtmlComponent.egl file note
the functions that change HTML attributes directly.
- In most cases, the changes that you make to the JSF controls are
not cumulative. For example, if you set a control's text to red with
the code myComponent.setStyle("color: red"); and
then set the same control'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 control, retrieve the current state of the control and append
the new data, paying attention to how the list of changes is delimited.
For example, use the following code to change a control's text to
bold and red, without overwriting any previous changes to that control's
style:
myStyleString string;
myStyleString = myComponent.getStyle() + "; color: red; font-weight: bold";
myComponent.setStyle(myStyleString);
- You cannot access JSF controls in this way in the onConstructionFunction and onPreRenderFunction functions
in the Handler. The function specified in the onPostRenderFunction property
can access the JSF component tree. However, because this 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.
There are many different changes that you can make to JSF controls.
See the related tasks for some examples.