XForms/Bind to ranges
< XForms
Motivation
[edit | edit source]Your output can be created from calculations from many inputs. The rules behind these calculations (sometimes called business rules) should be stored in the model, not the view.
Screen Image
[edit | edit source]This program has two inputs and one output. The output is calculated by multiplying the two inputs together. As you move the range controls the output should be updated.
![](http://upload.wikimedia.org/wikipedia/commons/9/98/Xforms-bind-range-multiplier.jpg)
Sample Program
[edit | edit source]<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<title>Example of binding to inputs and output ids</title>
<xf:model id="model">
<xf:instance id="input">
<Data xmlns="">
<InputValueOne>3</InputValueOne>
<InputValueTwo>3</InputValueTwo>
</Data>
</xf:instance>
<!-- make the inputs data types be integers -->
<xf:bind id="input-one-bind" nodeset="/Data/InputValueOne" type="xs:integer"/>
<xf:bind id="input-two-bind" nodeset="/Data/InputValueTwo" type="xs:integer"/>
<!-- second instance bound to outputs -->
<xf:instance id="output">
<DataOut xmlns="">
<OutputValue>9</OutputValue>
</DataOut>
</xf:instance>
<!-- Make the output be an integer that is the product of the inputs -->
<xf:bind id="output-bind" nodeset="instance('output')/OutputValue" calculate="instance('input')/InputValueOne * instance('input')/InputValueTwo" type="xs:integer"/>
</xf:model>
</head>
<body>
<p>
<xf:range bind="input-one-bind" start="1" end="5" step="1" incremental="true">
<xf:label>Input: </xf:label>
</xf:range>
<br/>
<xf:range bind="input-two-bind" start="1" end="5" step="1" incremental="true">
<xf:label>Input: </xf:label>
</xf:range>
<br/>
<xf:output bind="input-one-bind"/> * <xf:output bind="input-two-bind"/> =
<xf:output bind="output-bind"/>
</p>
</body>
</html>
Discussion
[edit | edit source]Note that the output is just inputs and outputs. The calculation that multiplies the two inputs together is done in the output bind statement.
<xf:bind id="output-bind" nodeset="instance('output')/OutputValue" calculate="instance('input')/InputValueOne * instance('input')/InputValueTwo" type="xs:integer"/>