XForms/類似電子表格的更新
< XForms
許多傳統基於 JavaScript 的表單開發人員不習慣於變數自動更新。使用 XForms，您可以輕鬆地建立複雜系統，其中 XForms 自動計算出要更新的單元格。這類似於使用電子表格。依賴關係圖會自動為您建立，並且如果依賴於其的輸入發生變化，則會自動更新相應的單元格。
以下是一個演示此功能的示例程式。
以下是應用程式的螢幕截圖。
請注意，頂部的網格實際上只是未標記的輸入單元格。在下方是表格中的示例輸出。您應該能夠更改任何輸入單元格，按 Tab 鍵，然後檢視輸出和頁尾計算發生變化。
<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>XForms Spreadsheat like Update</title>
<style type="text/css">
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
th {
color: white;
background-color: black;
}
.output tr td {
border: solid black 1px;
padding: 2px;
text-align: center;
}
</style>
<xf:model>
<xf:instance>
<Spreadsheet xmlns="">
<Row>
<A>10</A>
<B>20</B>
<C>30</C>
</Row>
<Row>
<A>40</A>
<B>50</B>
<C>60</C>
</Row>
<Row>
<A>70</A>
<B>80</B>
<C>90</C>
</Row>
<Results>
<sum/>
<avg/>
<min/>
</Results>
</Spreadsheet>
</xf:instance>
<xf:bind nodeset="/Spreadsheet/Results/sum" calculate="sum(/Spreadsheet/Row/A)" type="xs:decimal" />
<xf:bind nodeset="/Spreadsheet/Results/avg" calculate="avg(/Spreadsheet/Row/B)" type="xs:decimal" />
<xf:bind nodeset="/Spreadsheet/Results/min" calculate="min(/Spreadsheet/Row/C)" type="xs:decimal" />
</xf:model>
</head>
<body>
<xf:group ref="/Spreadsheet">
<xf:input ref="Row[1]/A">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[1]/B">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[1]/C">
<xf:label></xf:label>
</xf:input>
<br/>
<xf:input ref="Row[2]/A">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[2]/B">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[2]/C">
<xf:label></xf:label>
</xf:input>
<br/>
<xf:input ref="Row[3]/A">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[3]/B">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[3]/C">
<xf:label></xf:label>
</xf:input>
<table class="output">
<thead>
<tr>
<th>#</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<xf:output value="1" />
</td>
<td>
<xf:output ref="Row[1]/A" />
</td>
<td>
<xf:output ref="Row[1]/B" />
</td>
<td>
<xf:output ref="Row[1]/C" />
</td>
</tr>
<tr>
<td>
<xf:output value="2" />
</td>
<td>
<xf:output ref="Row[2]/A" />
</td>
<td>
<xf:output ref="Row[2]/B" />
</td>
<td>
<xf:output ref="Row[2]/C" />
</td>
</tr>
<tr>
<td>
<xf:output value="3" />
</td>
<td>
<xf:output ref="Row[3]/A" />
</td>
<td>
<xf:output ref="Row[3]/B" />
</td>
<td>
<xf:output ref="Row[3]/C" />
</td>
</tr>
<tr>
<td />
<td>Sum=<xf:output ref="Results/sum" />
</td>
<td>Avg=<xf:output ref="Results/avg" />
</td>
<td>Min=<xf:output ref="Results/min" />
</td>
</tr>
</tbody>
</table>
</xf:group>
</body>
</html>
由於某些 XForms 實現的限制，本示例未使用“repeat”命令，而是直接按地址訪問每個單元格。
如果我們在表格中使用 repeat-nodeset 語句，本示例可以更簡單。目前這在使用 FormFaces 的輸入單元格中不可用。