You can bind a variable in the JSF Handler to an input
or output control on the web page. When a variable is bound to a control
on the page and the user changes the value in the control, the value
of the variable changes to match, and if the logic in the JSF Handler
changes the value of the variable, the value on the page changes to
match.
There are several ways to bind web page controls to EGL variables:
- Create the controls automatically from existing EGL variables.
- Create the controls yourself and explicitly bind variables to
those controls.
- Create both the controls and the variables at the same time.
Creating JSF controls automatically from EGL variables
With this method, you create variables in the JSF Handler
and then allow EGL to create appropriate representations on the page.
- Open the JSF Handler that is associated with the web page. If
you are looking at the JSP file in the editor, you can open its JSF
Handler by right-clicking the page and then clicking Edit
page code.
- In the JSF Handler, define one or more EGL primitives, data items,
or record variables, and save the file. To be used on the web page,
the variables must be directly within the JSF Handler part and not
within any function in the part.
- Open the JSP file.
- In the Page Data view, expand JSF Handler.
The variables that are defined in the JSF Handler are listed here.
- Drag the variable from the Page Data view directly onto the web
page. Depending on the type of variable that you drag, the Insert
Control or Insert List Control window opens.
- Click a radio button under Create controls for:
- If you want read-only output controls, select Displaying
an existing record.
- If you want editable input controls, select Updating
an existing record or Creating a new record.
In this context, the two options are equivalent.
This wizard treats all EGL variables as if they were records.
- If you selected a record variable or more than one variable, select
the check boxes next to the controls or variables that you want to
display. You can also choose a type of control to represent the controls
or variables from the Control type column.
- Click Finish.
The controls are added to the page, and they are automatically
bound to the variables that you dragged onto the page. You can check
to see which variable a JSF control is bound to by clicking the control
to select it and then opening the Properties view. The Value field
tells you which variable the selected control is bound to.
Creating JSF controls and binding them manually
You
can create your own controls and bind them manually to EGL variables.
This method is useful if you want to design the look of your page
first and then add data.
- Open the JSF Handler associated with the web page. If you are
looking at the JSP file in the editor, you can open its JSF Handler
by right-clicking the page and then clicking Edit page
code.
- In the JSF Handler, define one or more EGL primitive, data item,
or record variables and save the file. To be used on the web page,
the variables must be directly within the JSF Handler part and not
within any function in the part.
- Open the JSP file.
- From the Palette view, expand the Enhanced Faces Components drawer
and drag a control onto the web page.
If you want the control to
be read-only, use an output control, such as an Output text
control. If you want to make the control editable for input and output,
use an Input control. For records, use a Data
Table control and create a column in the data table for
each field in the record.
- In the Page Data view, expand JSF Handler.
The variables defined in the JSF Handler are listed here.
- Drag the variable from the Page Data view directly onto the control
on the web page, making sure to use appropriate controls for the EGL
variable types. For example, single primitive variables or data items
can be bound to single input or output controls. Arrays and records
need to be bound to columns within a data table.
Creating controls and variables at the same time
You
can create controls and variables that are bound together at the same
time with the New Variable item in the EGL
drawer of the Palette view.
- In the Palette view, expand the EGL drawer.
- Drag a New Variable onto the page. The
Create a New EGL Data Variable window opens.
- Under Type Selection, select whether you
want a primitive, data item, or record variable. The rest of the options
on the page differ depending on the type of variable you choose.
- Select the type of variable. For data items and records, choose
a part from your project. For primitive variables, choose a primitive
type and specify a dimension if appropriate.
- Name the variable in the Enter the name of the field field.
- If you want the variable to be an array, select the Array check
box and specify a starting length in the Size field.
- Select Add controls to display the EGL element on the
page.
- Click OK. Depending on the type of variable,
the Insert Control or Insert List Control window opens.
- Click a radio button under Create controls for:
- If you want read-only output controls, select Displaying
an existing record.
- If you want editable input controls, select Updating
an existing record or Creating a new record.
In this context, the two options are equivalent.
This wizard treats all EGL variables as though they were records.
- If you selected a record variable with more than one field, select
the check boxes next to the fields that you want to display. You can
also choose a type of control to represent the fields or variables
from the Control type column.
- Click Finish.
Limitations
Binding controls to variables
has limitations because of the way web pages behave. One major limitation
is that the JSF Handler receives only the changed variables from the
form that is submitted on the web page.
For example, assume
the following JSF Handler with two variables and one function:
handler formTestPage type JSFHandler
{view = "formTestPage.jsp"}
stringOne string;
stringTwo string;
function doSomething()
SysLib.writeStderr("stringOne = " + stringOne);
SysLib.writeStderr("stringTwo = " + stringTwo);
end
end
If you bind the function to a button and the variables
to two input controls, you can type values into the controls, press
the button, and see the values that you typed written to the console.
This
example assumes that you have placed the button and controls in the
same HTML form. The code of the body of the web page might look like
this:
<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{formTestPage._preRender}"
postRender="#{formTestPage._postRender}">
<h:form id="form1" styleClass="form">
<h:inputText id="text1" styleClass="inputText"
value="#{formTestPage.stringOne}"
binding="#{formTestPage.stringOne_Ref}"></h:inputText>
<br>
<h:inputText id="text2" styleClass="inputText"
value="#{formTestPage.stringTwo}"
binding="#{formTestPage.stringTwo_Ref}"></h:inputText>
<br>
<hx:commandExButton id="buttonDoSomething1"
styleClass="commandExButton" type="submit" value="doSomething"
action="#{formTestPage.doSomething}"
actionListener="#{formTestPage._commandActionListener}">
</hx:commandExButton>
</h:form>
</hx:scriptCollector>
</body>
Note that the
<h:form> tag
surrounds both the button (represented on the page as a
commandExButton tag)
and the two input controls (represented on the page as
inputText tags).
This way, when you click the button, both input controls are made
available to the JSF Handler; that is, the values typed into the input
controls are assigned to the variables in the handler.
However,
if you put the controls on the page far apart, they might not be within
the same form tag:
<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{formTestPage._preRender}"
postRender="#{formTestPage._postRender}">
<h:inputText id="text1" styleClass="inputText"
value="#{formTestPage.stringOne}"
binding="#{formTestPage.stringOne_Ref}"></h:inputText>
<br>
<h:form id="form1" styleClass="form">
<h:inputText id="text2" styleClass="inputText"
value="#{formTestPage.stringTwo}"
binding="#{formTestPage.stringTwo_Ref}"></h:inputText>
<br>
<hx:commandExButton id="buttonDoSomething1"
styleClass="commandExButton" type="submit" value="doSomething"
action="#{formTestPage.doSomething}"
actionListener="#{formTestPage._commandActionListener}">
</hx:commandExButton>
</h:form>
</hx:scriptCollector>
</body>
In this case, the first input control is outside
the form, but the second input control and the button are within the
form. When you click the button now, the JSF Handler receives only
the second control, and the variable bound to the first control is
not changed.