2.2 A Real-World Example
| As an example, this section will develop an XForms solution for creating and editing a UBL purchase order. The first step is to define the initial instance data, which is a skeleton XML document that contains the complete structure of the desired final document, but with only initial data. This document serves as a template for newly-created purchase orders, and provides a framework on which to hang the rest of the form.
Example 2-1 shows what a UBL purchase order document looks like. Figure 2-1 shows, in the X-Smiles browser, an XForms document capable of creating such a document. Figure 2-1. An XML purchase order being created with XForms Example 2-1. An XML purchase order using UBL<Order xmlns="urn:oasis:names:tc:ubl:Order:1.0:0.70" xmlns:cat="urn:oasis:names:tc:ubl:CommonAggregateTypes:1.0:0.70"> <cat:ID/> <cat:IssueDate/> <cat:LineExtensionTotalAmount currency/> <cat:BuyerParty> <cat:ID/> <cat:PartyName> <cat:Name/> </cat:PartyName> <cat:Address> <cat:ID/> <cat:Street/> <cat:CityName/> <cat:PostalZone/> <cat:CountrySub-Entity/> </cat:Address> <cat:BuyerContact> <cat:ID/> <cat:Name/> </cat:BuyerContact> </cat:BuyerParty> <cat:SellerParty> <cat:ID/> <cat:PartyName> <cat:Name/> </cat:PartyName> <cat:Address> <cat:ID/> <cat:Street/> <cat:CityName/> <cat:CountrySub-Entity/> </cat:Address> </cat:SellerParty> <cat:DeliveryTerms> <cat:ID/> <cat:SpecialTerms/> </cat:DeliveryTerms> <cat:OrderLine> <cat:BuyersID/> <cat:SellersID/> <cat:LineExtensionAmount currencyID=""/> <cat:Quantity unitCode="">1</cat:Quantity> <cat:Item> <cat:ID/> <cat:Description>Enter description here</cat:Description> <cat:SellersItemIdentification> <cat:ID>Enter part number here</cat:ID> </cat:SellersItemIdentification> <cat:BasePrice> <cat:PriceAmount currencyID="">0.00</cat:PriceAmount> </cat:BasePrice> </cat:Item> </cat:OrderLine> </Order> The markup used by UBL seems slightly verbose, but this is necessary to capture all the small variations that occur in the purchase orders used by different organizations. Note that the cat:OrderLine element can repeat as many times as necessary, though only a single occurrence is needed for the initial instance data. Also note that the root element uses a different XML namespace than the rest of the document. Thanks to the context node rules in XForms, the root element never needs to be directly referred to, and thus form authors can happily ignore this minor detail. The next step is to create an XForms document that will serve to edit the initial instance data. XForms itself does not define a document format. Instead, a host language such as XHTML or SVG, combined with XForms, needs to be used. As of this writing, XHTML 2.0, which natively includes XForms, is progressing through the W3C Recommendation track. This example, however, uses the established XHTML 1.1, with XForms elements inserted in the appropriate places. As a result, this example will not validate against any XHTML DTD. Even so, it is still XML well-formed, and browsers that understand XForms presently do a good job rendering this document. The latter part of this chapter describes complications that occur when combining vocabularies; the opening lines of the XForms document shown in Example 2-2 provide a foregleam, using an arcane XML syntax called an internal DTD subset to declare certain attributes as document-unique IDs. Example 2-2. Opening lines of an XForms document<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style.css" ?> <!-- the following extremely ugly code is necessary to make ID attributes behave as expected --> <!DOCTYPE html [ <!ATTLIST object id ID #IMPLIED> <!ATTLIST model id ID #IMPLIED> <!ATTLIST bind id ID #IMPLIED> <!ATTLIST instance id ID #IMPLIED> <!ATTLIST submission id ID #IMPLIED> <!ATTLIST group id ID #IMPLIED> <!ATTLIST repeat id ID #IMPLIED> <!ATTLIST case id ID #IMPLIED> ]> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:u="urn:oasis:names:tc:ubl:CommonAggregateTypes:1.0:0.70" xmlns:xforms="http://www.w3.org/2002/xforms"> <head> <title>Create a Purchase Order</title> After the usual XML declaration, the document starts out with a reference to a CSS file to provide style information. Next, the DOCTYPE declaration and the several ATTLIST statements are necessary to make sure that the several ID-typed attributes that will be used are actually treated as IDs. Following that is the beginning of a normal html element, with several namespace declarations that will be used later in the document. Last is the standard HTML head element, with a title. The next several lines, in Example 2-3, make up the XForms Model essentially everything there is to know about the form other than how it will look or otherwise be rendered. Example 2-3. Starting the XForms Model<xforms:model > <!-- schema="schema.xsd" --> <xforms:instance src="/books/2/308/1/html/2/ubl_samp.xml"/> <xforms:submission action="file://tmp/ubl.xml" method="put" /> <!-- a few things are always required --> <xforms:bind nodeset="u:IssueDate" required="true( )" type="xs:date"/> <xforms:bind nodeset="u:OrderLine/u:Quantity" required="true( )" type="xs:nonNegativeInteger"/> <xforms:bind nodeset="u:OrderLine/u:Item/u:BasePrice/u:PriceAmount" required="true( )" type="xs:decimal"/> <xforms:bind nodeset="u:OrderLine/u:Item/u:SellersItemIdentification/u:ID" required="true( )"/> <!-- a few basic calculations --> <xforms:bind nodeset="u:OrderLine/u:LineExtensionAmount" type="xs:decimal" calculate="../u:Quantity * ../u:Item/u:BasePrice/u:PriceAmount"/> <xforms:bind nodeset="u:LineExtensionTotalAmount" type="xs:decimal" calculate="sum(../u:OrderLine/u:LineExtensionAmount)"/> The xforms:model element is the container for the entire XForms Model. In a document with only one such element, an id attribute isn't strictly needed, though it is good practice to always include one. With the addition of the attribute schema="UBL_Library_0p70_Order.xsd" it would be possible to associate a pre-existing XMLSchema with this form, though that option is commented out here. XML Schema processing would add significant overhead, and the few places that require additional datatype information can be easily specified separately. The xforms:instance element, with the src attribute, points to the initial instance data that was listed earlier. The xforms:submission element indicates that activating submit on this form will write XML to the local file system. The next several lines contain xforms:bind elements, each of which selects a specific part or parts of the instance data, applying various XForms properties to the selection. The language used to select the XML parts, or nodes, is called XPath, which is perhaps better known as the selection language used in XSLT, XPointer, and XML Signature. The next chapter describes XPath in detail. XForms includes defaulting rules that simplify most of the XPath selection expressions, declared on the nodeset attribute, and called model binding expressions. The first model binding expression selects the one-and-only u:IssueDate instance data node, marking it as required and of the XML Schema datatype date, which provides the hint that this particular data should be entered with a date-optimized form control, such as a calendar picker. The second model binding expression applies to however many u:Quantity elements happen to exist at any given time, and marks all of them as requiring user entry, along with the XML Schema datatype xs:nonNegativeInteger. The next few model binding expressions set up the two calculations that are fundamental to a purchase order: calculating the total amount for a line item (price times quantity), and the total for the whole order (sum of all line items). The calculate attribute holds an XPath expression that gets evaluated to determine a new value for the node to which it is attached. The calculation for line items is ../u:Quantity * ../u:Item/u:BasePrice/u:PriceAmount, where the asterisk means multiply, and the operands on either side of it are path expressions, relative to the u:LineExtensionAmount element. In turn, the calculation for the grand total is sum(../u:OrderLine/u:LineExtensionAmount), which uses the function sum( ) to add up all the values from individual u:LineExtensionAmount nodes. Like a spreadsheet, recalculations will occur whenever needed, and dependencies among calculations will automatically be handled in the correct order. For example, individual line items will always be multiplied out before the overall total is summed up. The definition of the XForms Model continues with the lines in Example 2-4. Example 2-4. The rest of the XForms Model<!-- a second instance, temporary data not to be submitted --> <xforms:instance > <temp xmlns=""> <currencyOptions> <option value="EUR">Euro</option> <option value="GBP">Pound</option> <option value="USD">Dollar</option> </currencyOptions> </temp> </xforms:instance> <!-- global setting of currencyID --> <xforms:bind nodeset="u:OrderLine/u:LineExtensionAmount/@currencyID" calculate="../../u:LineExtensionTotalAmount/@currencyID"/> <xforms:bind nodeset="u:OrderLine/u:Item/u:BasePrice/u:PriceAmount/ calculate="../../../../u:LineExtensionTotalAmount/@currencyID"/> </xforms:model> </head> An XForms Model can have more than one xforms:instance element. The usual reason for this is to hold temporary, non-submittable data that is used in the form. In this example, various currency codes, and the longer descriptions of each, are kept in a separate location for maintainability. This is also a good example of initial instance data occurring inline in the XForms Model, though it could easily also be another external XML document. The instance data XML itself is not defined in any namespace, so the xmlns="" declaration is essential to turn off the default XHTML namespace that would otherwise be in effect at this point. The last two xforms:bind elements set up a mapping across the several currencyID attributes that can occur in a UBL document. The form is set up to include a form control that selects the current currency, placing it in the node at u:LineExtensionTotalAmount/@currencyID. The two bind elements in this section then copy the value to the appropriate two places in each line item. In theory, each line item could use a different currency type but, for simplicity, this example sets up two calculations that copy the main selection, which is kept on the u:LineExtensionTotalAmount element, to every other currencyID attribute (the number of which will depend on how many line items are in the order). With this, the XForms Model and the head section of the XHTML document come to a close. From here on out, the rest of the code is the visible user interface to construct an UBL purchase order. Example 2-5 continues with the definition. Figure 2-2 shows the user interface that results from this portion of the XForms code. Example 2-5. XForms markup for date, currency type, and total amount<body> <xforms:group> <xforms:input ref="u:IssueDate"> <xforms:label>Order Date</xforms:label> </xforms:input> <xforms:select1 ref="u:LineExtensionTotalAmount/@currencyID" appearance="minimal" selection="open"> <xforms:label>Currency to use throughout this form</xforms:label> <xforms:itemset nodeset="instance('scratchpad')/currencyOptions/option"> <xforms:label ref="."/> <xforms:value ref="@value"/> </xforms:itemset> </xforms:select1> <xforms:output ref="u:LineExtensionTotalAmount"> <xforms:label>Order Total: </xforms:label> </xforms:output> </xforms:group> Figure 2-2. The user interface rendered for date, currency type, and total amount The opening of the XHTML body element marks the start of the content that is intended to be rendered. The rest of the content in this section is organized inside an xforms:group element. The first form control is a basic input control, though due to the XML Schema datatype set up in the XForms Model, most implementations will provide a date-specific entry control, such as a pop-up calendar. The second form control is a single select control, with a hint attribute appearance="minimal" to suggest that this part of the interface should be given minimal screen estate when not activated in other words, a pop-up list. Another attribute selection="open" indicates that the user should be able to enter arbitrary values not on the list, in which case the entered value would have to be a three-letter currency code, not the friendlier text description that comes with the built-in choices. The xforms:itemset element pulls the choices from the instance data, in this case from the secondary instance data, as can be seen by the instance( ) function in the XPath, which is needed any time the non-default instance data is referenced. A kind of repetition is going on here; despite the single xforms:itemset element, the list will have one choice for each node matched in the secondary instance data. The output control displays data but doesn't provide any interface for changing it. Example 2-6 is lengthier, but not difficult to understand. Example 2-6. XForms markup for addresses<xforms:switch > <xforms:case > <xforms:trigger> <xforms:label>Show Details</xforms:label> <xforms:toggle ev:event="DOMActivate" case="detail_show"/> </xforms:trigger> </xforms:case> <xforms:case > <xforms:group ref="u:SellerParty"> <xforms:label>Seller Information:</xforms:label> <xforms:input ref="u:PartyName/u:Name"> <xforms:label>Name</xforms:label> </xforms:input> <xforms:group ref="u:Address"> <xforms:input ref="u:Street"> <xforms:label>Street</xforms:label> </xforms:input> <xforms:input ref="u:CityName"> <xforms:label>City</xforms:label> </xforms:input> <xforms:input ref="u:PostalZone"> <xforms:label>Postal Code</xforms:label> </xforms:input> <xforms:input ref="u:CountrySub-Entity"> <xforms:label>State or Province</xforms:label> </xforms:input> </xforms:group> </xforms:group> <xforms:group ref="u:BuyerParty"> <xforms:label>Buyer Information:</xforms:label> <xforms:input ref="u:PartyName/u:Name"> <xforms:label>Name</xforms:label> </xforms:input> <xforms:group ref="u:Address"> <xforms:input ref="u:Street"> <xforms:label>Street</xforms:label> </xforms:input> <xforms:input ref="u:CityName"> <xforms:label>City</xforms:label> </xforms:input> <xforms:input ref="u:PostalZone"> <xforms:label>Postal Code</xforms:label> </xforms:input> <xforms:input ref="u:CountrySub-Entity"> <xforms:label>State or Province</xforms:label> </xforms:input> </xforms:group> </xforms:group> <xforms:trigger> <xforms:label>Hide Details</xforms:label> <xforms:toggle ev:event="DOMActivate" case="detail_hide"/> </xforms:trigger> </xforms:case> </xforms:switch> Figure 2-3 shows the initial state of the user interface produced by this portion of the XForms code. Figure 2-4 shows the result of toggling the switch, revealing the form controls for entering the buyer and seller information. Figure 2-3. The user interface for the XForms switch element, collapsed Figure 2-4. The user interface for the XForms switch element, expanded The xforms:switch element is a useful tool to show different portions of the user interface on command. In this case, the form controls for seller and buyer information are either entirely shown or entirely hidden. A declarative element, xforms:toggle, changes which of the xforms:case elements get to have its contents rendered, with all others suppressed. The first case, which is the default, displays only an xforms:trigger that toggles itself away, showing all the form controls in the next case in its place. Within another group for organizational purposes, the form controls in the next section capture all the information needed about the seller referenced by the purchase order. In this case, the overall group has a label, in addition to labels on the individual form controls. The next group, for the buyer information, is nearly identical to the one that precedes it. While earlier drafts of XForms had a technique to combine this duplicated code in a single place, that feature was dropped in favor of concentrating on getting the underlying framework correct. (One proposal involves combining XSLT with XForms, using the element template to define a template that can be instantiated multiple times throughout the document.) The last part of this section is another xforms:toggle displayed along with the buyer and shipper information. Upon activation, it causes the contents of the first case to be displayed, which has the effect of hiding all the buyer and shipper interface. The XML instance data, however, continues to exist even when the means of viewing or changing are hidden from view. Example 2-7 creates a dynamically expandable list of line items. Example 2-7. Using XForms to create an expandable list.<!-- repeating sequence for line items --> <xforms:repeat nodeset="u:OrderLine"> <xforms:group> <xforms:range ref="u:Quantity" start="1" end="9" step="1" incremental="true"> <xforms:label>Quantity <xforms:output ref="."/></xforms:label> </xforms:range> <xforms:input ref="u:Item/u:Description" > <xforms:label>Description</xforms:label> </xforms:input> <xforms:input ref="u:Item/u:SellersItemIdentification/u:ID" > <xforms:label>Part Number</xforms:label> </xforms:input> <xforms:input ref="u:Item/u:BasePrice/u:PriceAmount" > <xforms:label>Price</xforms:label> </xforms:input> </xforms:group> </xforms:repeat> <xforms:group > <xforms:trigger> <xforms:label>Insert new line</xforms:label> <xforms:insert ev:event="DOMActivate" position="after" nodeset="u:OrderLine" at="index('lineitems')"/> </xforms:trigger> <xforms:trigger> <xforms:label>Remove current line</xforms:label> <xforms:delete ev:event="DOMActivate" nodeset="u:OrderLine" at="index('lineitems')"/> </xforms:trigger> </xforms:group> Figure 2-5 shows the user interface that results from this portion of the XForms code, with the first line item highlighted. Figure 2-5. The user interface for repeating line items Like xforms:itemset seen earlier, xforms:repeat causes a repetition of content, once for each node in a given set of nodes exactly the behavior needed to populate the u:OrderLine elements from UBL. All the content of xforms:repeat is effectively duplicated as many times as there are line items, which can be dynamically added and removed. The first form control on each line item is xforms:range, which allows a smoother way to select a value than typing a number; for example, a sliding indicator. The range here is from 1 to 9. The rest of the repeating form controls are similar to ones already used in this example. One difference is the class attribute on the final xforms:input, which is used by the associated CSS to style the form control. Outside of the repeat, a few interesting things are happening. Inside another group, an xforms:trigger is configured to insert a new line item. Another declarative action, xforms:insert, accomplishes this feat. The location of the inserted line item is either just before or just after a specific location (from the at attribute) within a particular node-set (from the nodeset attribute). The xforms:delete action works similarly. Any repeating set keeps track of the currently active item, called the index. Both the insert and delete actions make use of the index, as obtained through the index( ) function. The concluding part of the sample document, in Example 2-8, allows the completed document to be written to disk. Example 2-8. XForms markup to submit the data<xforms:submit submission="submit"> <xforms:label>Write to disk</xforms:label> </xforms:submit> </body> </html> Figure 2-6 shows the rendering for this piece of XForms code. Figure 2-6. The user interface to finalize the purchase order The xforms:submit element is another form control, like xforms:trigger, but able to invoke the submission procedure without any additional coding needed. It contains a reference to the xforms:submission element contained in the XForms Model, which ultimately determines what happens when this control is activated. After the last form control, the XHTML document comes to its usual conclusion. |
