Binding data to controls

Introduction tutorial - Binding data to controls - Declaring data bindings

SUMMARY XUI makes it very easy for the developer to gather and store data from the pages of a XUI application. This step introduces the basic concepts of data binding. As you develop more complex applications with XUI you will probably end up writing some custom data binding classes.

FURTHER READING Dynamic binding allows the same page to address different sections of the XModel and is illustrated in the 'Dynamic Bindings' step of this tutorial. Data binding can also be taken care of for you by the kalideoscope editor.

Now that we have our pages created and our navigation working we want to be able to capture information which has been entered into the application. We can do this by binding screen components to the data model.

Open the personal.xml file which held the inputs we created earlier. Insert a name attribute for each of the edit controls and the ComboBox control as in listing 1.

Listing 1 - personal.xml

    ...
  <Edit name="firstnameText" x="238" y="78" w="178" h="20" alignment="Leading"/>
  <Edit name="surnameText" x="238" y="106" w="178" h="20" alignment="Leading"/>
  <Edit name="dobText" x="238" y="133" w="100" h="20" alignment="Leading"/>
  <ComboBox name="titleList" x="238" y="51" w="100" h="20"/>
    ...

Now the controls can have elements of the datamodel bound to them. Create the binding nodes within the personal.xml page as follows...

Listing 2 - personal.xml

    ...
<Data>
  <Bind target="firstnameText" source="/mortapp/customer/firstname" /> 
  <Bind target="surnameText" source="/mortapp/customer/surname" /> 
  <Bind target="dobText" source="/mortapp/customer/dob" /> 
</Data>
    ...

Each binding node has three basic attributes. The target attribute specifies the component to which the data will be bound. The source attribute is the part of the model from which the control will be populated initially. The output attribute is the path to the part of the model where the control data will be stored.

In order to make the example more complete a new page can be added. The new page, finance.xml, Is used to store some simple financial information.

Listing 3 - finance.xml

<XPage>
  <Components>
    <Label x="72" y="106" w="176" h="20" style="prompt" 
	content="Amount of mortgage required:" opaque="true" /> 
    <Edit name="propValueText" x="263" y="77" w="178" h="20" alignment="Leading" /> 
    <Edit name="mortAmtText" x="263" y="105" w="178" h="20" alignment="Leading" /> 
    <Label x="71" y="79" w="171" h="20" style="prompt" 
	content="Value of property:" opaque="true" /> 
  </Components>
  <Data>
    <Bind target="propValueText" source="/mortapp/finance/propvalue" /> 
    <Bind target="mortAmtText" source="/mortapp/finance/mortamt" /> 
  </Data>
</XPage>

In order to navigate to the new page, the personal.xml file needs to have the next attribute specified

Listing 4 - personal.xml

<XPage next="finance">
    ...