| home / programming / xforms / |    [previous] [next] |
|
|
|
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>
|
|
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 id="DetailHider"><xforms:case id="detail_hide"><xforms:trigger><xforms:label>Show Details</xforms:label><xforms:toggle ev:event="DOMActivate" case="detail_show"/></xforms:trigger></xforms:case><xforms:case id="detail_show"><xforms:group id="SellerParty" 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 id="BuyerParty" 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>
| home / programming / xforms / | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: October 10, 2003
URL: http://webreference.com/programming/xforms/1
