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.
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.
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.
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.
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.
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.<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.<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.