<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<!--
-->

<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:xsd="http://www.w3.org/2001/XMLSchema"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xi="http://www.w3.org/2001/XInclude"
  xmlns:soap="http://www.w3.org/2001/06/soap-envelope" xml:lang="en">

  <head>

    <link rel="stylesheet" href="eua1.css" type="text/css"/>
    <script type="text/javascript" src="formfaces.js"/>
    <title>My first real form</title>

    <xf:model>
      <xf:instance xmlns="">
        <person>
          <fname>Mary</fname>
          <lname>Smith</lname>
          <number1>1</number1>
          <number2>2</number2>
          <total/>
          <houses>
            <house street="Malton" number="37"/>
            <house street="Smith" number="37"/>
            <house street="Bob" number="37"/>
            <house street="Mascot" number="37"/>
          </houses>
    
        </person>
      </xf:instance>
      <xf:submission id="form1" method="get" action="submit.asp"/>

      <xf:bind id="fname" nodeset="/person/fname" type="xsd:string"/>
      <xf:bind id="lname" nodeset="/person/lname" type="xsd:string"/>
      <xf:bind id="number1" nodeset="/person/number1" type="xsd:integer"/>
      <xf:bind id="number2" nodeset="/person/number2" type="xsd:integer"/>
      <xf:bind id="total" nodeset="/person/total" calculate="/person/number1 + 2*/person/number2"/>
      <xf:bind id="housename" nodeset="/person//houses/house/@street" type="xsd:string"/>
      <xf:bind id="housenumber" nodeset="/person/houses/house/@number" type="xsd:integer"/>

    </xf:model>

  </head>

  <body>

    
    <div class="content">
      
      <!-- Code below works in FormFaces and in Orbeon  -->
      
      <div class="section">
        <h1>Sample code DIV #1</h1>
        <h2>This is an example of the use of XForms.</h2>

        <xf:input bind="fname">
          <xf:label>First Name</xf:label>
        </xf:input>
        <br/>
        <xf:input bind="lname">
          <xf:label>Last Name</xf:label>
        </xf:input>
        <br/>
        <xf:input bind="number1">
          <xf:label>Number 1</xf:label>
        </xf:input>
        <br/>
        <xf:input bind="number2">
          <xf:label>Number 2</xf:label>
        </xf:input>
        <br/>
        <xf:output ref="total">
          <xf:label>Total:</xf:label>
        </xf:output>
        <br/>
        <xf:submit submission="form1">
          <xf:label>Submit</xf:label>
        </xf:submit>

      </div>

      <div class="section">

        <!-- Code below works in FormFaces and in Orbeon  -->
        
        <h2>Test repeated entries</h2>

        <xf:repeat nodeset="/person/houses/house" id="repeat">
          <xf:input ref="@street">
            <xf:label>Street</xf:label>
          </xf:input>
          <xf:input ref="@number">
            <xf:label>Number</xf:label>
          </xf:input>
          <br/>
        </xf:repeat>

        <br/>

        <xf:output value="sum(/person/houses/house/@number)">
          <xf:label>Total:</xf:label>
        </xf:output>

        <br/>

        <xf:trigger>
          <xf:label>Insert</xf:label>
          <xf:action ev:event="DOMActivate">
            <xf:insert nodeset="/person/houses/house" at="index('repeat')" position="after"/>
            <xf:setvalue ref="/person/houses/house[index('repeat') + 1]/@street" value="0"/>
            <xf:setvalue ref="/person/houses/house[index('repeat') + 1]/@number" value="0"/>
          </xf:action>
        </xf:trigger>

        <xf:trigger>
          <xf:label>Delete</xf:label>
          <xf:delete ev:event="DOMActivate" nodeset="/person/houses/house" at="index('repeat')"/>
        </xf:trigger>

        <xf:trigger>
          <xf:label>Delete Last</xf:label>
          <xf:delete ev:event="DOMActivate" nodeset="/person/houses/house" at="last()"/>
        </xf:trigger>

      </div>
      <div class="section">

        <!-- Code below works in FormFaces BUT NOT IN Orbeon  -->
        
        <h2>Test 3</h2>
        <br/>

        <table border="1" xf:repeat-nodeset="/person/houses/house" id="r2">
          <tr>
            <td>
              <xf:output ref="@street"/>
            </td>
            <td>
              <xf:output ref="@number"/>
            </td>
          </tr>
        </table>
      </div>


      <div class="section">
        
        <!-- Code below works in FormFaces BUT NOT IN Orbeon  -->
        
        <h2>Test 4</h2>
        <br/>

        <table border="1" xf:repeat-nodeset="/person/houses/house" id="r2">
          <tr>
            <td>
              <xf:output ref="@street"/>
            </td>
            <td>
              <xf:output ref="@number"/>
            </td>
            <td>
              <xf:input ref="@street">
                <xf:label/>
              </xf:input>
            </td>
          </tr>
        </table>

        <xf:trigger>
          <xf:label>Insert</xf:label>
          <xf:action ev:event="DOMActivate">
            <xf:insert nodeset="/person/houses/house" at="index('r2')" position="after"/>
            <xf:setvalue ref="/person/houses/house[index('r2') + 1]/@street" value="0"/>
            <xf:setvalue ref="/person/houses/house[index('r2') + 1]/@number" value="0"/>
          </xf:action>
        </xf:trigger>

        <xf:trigger>
          <xf:label>Delete</xf:label>
          <xf:delete ev:event="DOMActivate" nodeset="/person/houses/house" at="index('r2')"/>
        </xf:trigger>

        <xf:trigger>
          <xf:label>Delete Last</xf:label>
          <xf:delete ev:event="DOMActivate" nodeset="/person/houses/house" at="last()"/>
        </xf:trigger>

      </div>

    </div>
  </body>
</html>