XForms/发票管理器
< XForms
您希望演示一个典型的商业应用程序，例如创建发票。发票必须包含日期和布尔数据类型，并使用绑定规则自动计算发票总额。发票应包含多个行项目，每个项目都包含金额。
我们将使用许多标准的 XForms 控件和一个标准的 XForms 样式表来设置表单的样式。
以下是发票文档的示例。此文档通常由供应商在确认产品或服务已交付后发送给消费者。
上半部分包含发票号码、发票发送给客户的日期以及发件人和收件人信息。之后是一组行项目，指定交付的项目及其价格。最后，对行项目进行汇总，并表明发票是否已支付。
<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>
发票的界面使用 input、textarea 和 select1 控件。此外，数据类型被分配给 InvoiceDate 和 InvoicePaid 指示器元素。
<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>
以下 CSS 文件需要输入 XForms 应用程序，为每一行上显示的每个控件添加换行符类属性。这使得重复的输入项不会自动换行。
@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;}