XForms/Bind

Motivation

There are three core concepts that you will learn in building XForms applications:

The model is a tree of data elements
The presentation is a tree of data elements
To build your form, these two trees need to be wired together - this is called "binding"

Many of the exercises in this cookbook give examples of this binding. This process is a small example of how this can work. In practice there are many ways to bind the user interface to the model.

Screen Image

The screen image is similar to input programs from a prior example. This example has two input fields for a person's first and last name and two output controls.

Sample Program

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <head>
      <title>Your Title Here</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <PersonGivenName/>
               <PersonSurName/>
            </data>
         </xf:instance>
         <xf:bind id="PersonGivenName" nodeset="/data/PersonGivenName"/>
         <xf:bind id="PersonSurName" nodeset="/data/PersonSurName"/>
      </xf:model>
   </head>
   <body>
       <xf:input bind="PersonGivenName" incremental="true">
          <xf:label>Input First Name:</xf:label>
       </xf:input>
       <br/>
       <xf:input bind="PersonSurName" incremental="true">
          <xf:label>Input Last Name:</xf:label>
       </xf:input>
       <br/>
       <xf:output bind="PersonGivenName">
          <xf:label>Output First Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output bind="PersonSurName">
          <xf:label>Output Last Name:</xf:label>
       </xf:output>
   </body>
</html>

Discussion

Here are the two lines in the model that bind the data element paths to identifiers:

   <xf:bind id="PersonGivenName" nodeset="/data/PersonGivenName"/>
   <xf:bind id="PersonSurName" nodeset="/data/PersonSurName"/>

Note that bind uses nodeset, not ref to specify the path name to the leaf element in the instance document.

After this is done, each user interface element that inputs or outputs the data elements just adds the bind attribute:

  <xf:input <b>bind="PersonGivenName"</b>>

We should also note that in this case there is a single input and a single output for each data element. This does not need to be the case. A single input can be bound to many outputs and an output could also depend on many inputs. An example of this would be using the "calculate" attribute of the bind statement.

Bind attributes

Here are the following attributes of the bind element and a short description of how they are used:

type

Associate an instance variable with a specific XML Schema data type
Extend or restrict schema type definitions

relevant

Enabling or disable controls based on the values of data elements in the model

required

Conditionally make fields required based on the values of data elements in the model

readonly

Disable editing of fields based on model data elements such as role

constraint

Create complex schema constraints between two or more data elements
Set the limits of minimum or maximum values of a node-set

calculate

Creating computational dependency among data elements
Compute the value of new data elements based on other data elements
Enable spread-sheet like calculations within XForms

Next Page: Adder | Previous Page: Spreadsheet like updating
Home: XForms