XForms/Bind
Motivation
[edit | edit source]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
[edit | edit source]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
[edit | edit source]<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
[edit | edit source]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
[edit | edit source]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