< XForms

Motivation

Frequently a form must display the total of a column. This can be accomplished using the bind function in the model.

Screen Image

Calculating the total of a column

Sample Program

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns:xf="http://www.w3.org/2002/xforms"
    >
   <head>
      <style type="text/css">
     @namespace xf url("http://www.w3.org/2002/xforms");

   * { font-family: Ariel, Helvetica, sans-serif }

   .table-header, .table-footer {
      display: table-row;
   }
   
   .column-header, .column-footer {
      display: table-cell;
      text-align: center;
      color: white;
      background-color: gray;
      font-weight: bold;
   }
   
   /* make the "Total:" in the table footer right align */
   .table-footer .item-description,
   .table-footer .item-amount {
      text-align: right;
   }
   
   .item-description {
      width: 300px;
   }
   
   .item-amount {
      width: 112px;
   }
   
   .item-description .xf-value {
      width: 300px;
      text-align: left
    }
   
   .item-amount .xf-value {
      width: 100px;
      text-align: right
    }

    </style>
      <title>Demonstration of table with column total</title>
      <xf:model id="my-model">
         <xf:instance id="my-data" src="my-data.xml" xmlns=""/>
         <xf:bind nodeset="/Data/Total" calculate="sum(../Item/Amount)"/>
         <xf:submission id="update-from-local-file" method="get" action="my-data.xml" 
              replace="instance" instance="my-crv"/>
         <xf:submission id="view-xml-instance" method="get" action="my-data.xml"/>
         <xf:submission id="save-to-local-file" method="put" action="my-data.xml"/>
      </xf:model>
   </head>
   <body>
      <div class="table-header">
         <div class="column-header item-description">Description</div>
         <div class="column-header item-amount">Value</div>
      </div>
      <xf:group ref="/Data">
         <!-- For each Person in the PersonList display the name and phone-->
         <xf:repeat nodeset="Item" id="repeatItem">
            <xf:input id="description-input" ref="Description" class="item-description"/>
            <xf:input ref="Amount" class="item-amount"/>
            <br />
         </xf:repeat>
         <div class="table-footer">
            <div class="column-footer item-description">Total:</div>
            <div class="column-footer item-amount">
               <xf:output ref="/Data/Total" />
            </div>
         </div>
         <xf:trigger id="insertbutton">
            <xf:label>Add Item</xf:label>
            <xf:action ev:event="DOMActivate">
               <xf:insert nodeset="Item[last()]" position="after" at="last()"/>
               <xf:setvalue ref="Item[last()]/Description" value="''"/>
               <xf:setvalue ref="Item[last()]/Amount" value="0"/>
               <!-- put the cursor in the name field -->
               <xf:setfocus control="description-input"/>
            </xf:action>
         </xf:trigger>
         <xf:trigger id="delete">
            <xf:label>Delete Item</xf:label>
            <xf:delete nodeset="Item[index('repeatItem')]"
                at="index('repeatItem')" ev:event="DOMActivate"/>
         </xf:trigger>
         <br />
         <xf:submit submission="update-from-local-file">
            <xf:label>Reload</xf:label>
         </xf:submit>
         <xf:submit submission="save-to-local-file">
            <xf:label>Save</xf:label>
         </xf:submit>
         <xf:submit submission="view-xml-instance">
            <xf:label>View XML Instance</xf:label>
         </xf:submit>
      </xf:group>
   </body>
</html>

Sample my-data.xml instance file

<?xml version="1.0" encoding="UTF-8"?>
<Data>
   <Item>
      <Description>Furniture</Description>
      <Amount>1000</Amount>
   </Item>
   <Item>
      <Description>Dock</Description>
      <Amount>2000</Amount>
   </Item>
   <Item>
      <Description>Boat</Description>
      <Amount>3000</Amount>
   </Item>
   <Item>
      <Description>Lawn equipment</Description>
      <Amount>4000</Amount>
   </Item>
   <Item>
      <Description>Hot tub</Description>
      <Amount>5000</Amount>
   </Item>
   <Total>15000</Total>
</Data>

Discussion

This example uses div blocks for the table header and footer. The total will be updated each time the user tabs out of a field. New items are always added to the end but you can delete an existing item just by selecting it and pressing the "Delete item" button.


This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.