XForms/Invoice Manager
Motivation
You want to demonstrate a typical business application such as the creation of an Invoice. The invoice must have date and Boolean data types and use a bind rule to automatically calculate invoice totals. The invoice should have multiple line items, each with an amount.
Method
We will use many of the standard XForms controls and a standard XForms style sheet to style the form.
Sample Invoice Instance
The following is a sample of an invoice document. This document is typically sent by a supplier to a consumer of a product or service after confirmation that the products or services were delivered.
The top portion has items such as an invoice number, the date the invoice was sent to the customer and the from and to information. It is then followed by a set of line items that specify the items delivered and their price. At the end the line items are totaled and an indication made to see if the invoice was paid or not.
<Invoice> <InvoiceID>123</InvoiceID> <InvoiceDate>2008-10-10</InvoiceDate> <From> <OrganizationName>Acme Services</OrganizationName> <OrganizationAddress>123 Main St. Anytown, MN 12345</OrganizationAddress> </From> <To> <OrganizationName>Acme Consumer</OrganizationName> <OrganizationAddress>123 Main St. Anytown, MN 12345</OrganizationAddress> </To> <LineItems> <Item> <Description>Widget 123</Description> <Amount>100.00</Amount> </Item> <Item> <Description>Widget 456</Description> <Amount>200.00</Amount> </Item> <Item> <Description>Widget 789</Description> <Amount>300.00</Amount> </Item> </LineItems> <TotalAmount></TotalAmount> <InvoiceTermsCode>net-30</InvoiceTermsCode> <PaidIndicator>false</PaidIndicator> </Invoice>
XForms User Interface
The interface to the Invoice uses input, textarea and select1 controls. In addition, data types are assigned to the InvoiceDate and InvoicePaid indicator elements.
XForms Application Source
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms"> <head> <title>Invoice</title> <link rel="stylesheet" type="text/css" href="xforms.css"/> <xf:model> <xf:instance xmlns="" id="invoice" src="new-instance.xml"/> <xf:bind nodeset="instance('invoice')/InvoiceDate" type="xs:date"/> <xf:bind nodeset="instance('invoice')/PaidIndicator" type="xs:boolean"/> <xf:bind id="total" nodeset="instance('invoice')/TotalAmount" calculate="sum(instance('invoice')/LineItems/Item/Amount)"/> </xf:model> </head> <body> <h1>Invoice</h1> <xf:input ref="InvoiceID" class="newline"> <xf:label>Invoice Number: </xf:label> </xf:input> <xf:input ref="InvoiceDate" class="newline"> <xf:label>Invoice Date: </xf:label> </xf:input> <xf:group ref="instance('invoice')/From"> <xf:label class="group-label">From: </xf:label> <xf:input ref="OrganizationName" class="newline"> <xf:label>Company: </xf:label> </xf:input> <xf:textarea ref="OrganizationAddress" class="newline"> <xf:label>Address:</xf:label> </xf:textarea> </xf:group> <xf:group ref="instance('invoice')/To"> <xf:label class="group-label">To:</xf:label> <xf:input ref="OrganizationName" class="newline"> <xf:label>Company: </xf:label> </xf:input> <xf:textarea ref="OrganizationAddress" class="newline"> <xf:label>Address:</xf:label> </xf:textarea> </xf:group> <table> <thead> <tr> <th class="Description">Description</th> <th class="Amount">Amount</th> </tr> </thead> </table> <xf:repeat nodeset="instance('invoice')/LineItems/Item"> <xf:input ref="Description" class="Description"/> <xf:input ref="Amount" class="Amount"/> </xf:repeat> <xf:input bind="total" class="Amount"> <xf:label>Total: </xf:label> </xf:input> <xf:select1 ref="InvoiceTermsCode" class="newline"> <xf:label>Terms: </xf:label> <xf:item> <xf:label>Payable on Receipt</xf:label> <xf:value>payable-on-receipt</xf:value> </xf:item> <xf:item> <xf:label>Net 30</xf:label> <xf:value>net-30</xf:value> </xf:item> <xf:item> <xf:label>2% discount if paid withn 10 days, Net 30</xf:label> <xf:value>2-10-net-30</xf:value> </xf:item> <xf:item> <xf:label>Net 60</xf:label> <xf:value>net-60</xf:value> </xf:item> </xf:select1> <xf:input ref="PaidIndicator" class="newline"> <xf:label>Paid:</xf:label> </xf:input> </body> </html>
Sample CSS File
The following CSS file required the input XForms application to add the newline class attribute for each control that appears on a new line. This allows the repeat input items to not automatically flow to a new line.
@namespace xf url("http://www.w3.org/2002/xforms"); body {font-family:Helvetica, sans-serif;} textarea {font-family:Helvetica, sans-serif;} .newline {display:block; margin:5px 0;} xf|input > xf|label, xf|select > xf|label, xf|select1 > xf|label, xf|textarea > xf|label {text-align:right; padding-right:10px; width:20ex; float:left; text-align:right;} xf|group {border: solid black 1px; margin:15px 5px; padding:5px; background-color:lavender;} .group-label {text-align:left; font-weight:bold; font-size:12pt;} /* put each item on a new row */ .xf-repeat-item {padding: 3px; display:block;} .Description, .Description .xf-value {text-align: left;} .Description {width: 50ex; text-align: left;} .Description .xf-value {width: 65ex; text-align: left;} .Amount, .Amount .xf-value{text-align: right;} .Amount {width: 12ex;} .Amount .xf-value {width: 16ex;} /* add to remove spaces between table cells table {border-collapse: collapse;} */ thead tr {background-color: silver;} thead tr th {padding: 2px 5px;}