Binding a control on a web page to a variable

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:

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.
  1. 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.
  2. 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.
  3. Open the JSP file.
  4. In the Page Data view, expand JSF Handler. The variables that are defined in the JSF Handler are listed here.
  5. 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.
  6. 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.
  7. 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.
  8. 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.

  1. 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.
  2. 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.
  3. Open the JSP file.
  4. 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.

  5. In the Page Data view, expand JSF Handler. The variables defined in the JSF Handler are listed here.
  6. 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.

  1. In the Palette view, expand the EGL drawer.
  2. Drag a New Variable onto the page. The Create a New EGL Data Variable window opens.
  3. 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.
  4. 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.
  5. Name the variable in the Enter the name of the field field.
  6. If you want the variable to be an array, select the Array check box and specify a starting length in the Size field.
  7. Select Add controls to display the EGL element on the page.
  8. Click OK. Depending on the type of variable, the Insert Control or Insert List Control window opens.
  9. 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.
  10. 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.
  11. 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.

Feedback