| home / programming / xforms / | [previous] [next] |
|
|
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.
|
|
|
|
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 id="lineitems" nodeset="u:OrderLine"><xforms:group><xforms:range ref="u:Quantity" class="narrow"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" class="wide"><xforms:label>Description</xforms:label></xforms:input><xforms:input ref="u:Item/u:SellersItemIdentification/u:ID" class="wide"><xforms:label>Part Number</xforms:label></xforms:input><xforms:input ref="u:Item/u:BasePrice/u:PriceAmount" class="narrow"><xforms:label>Price</xforms:label></xforms:input></xforms:group></xforms:repeat><xforms:group id="RepeatDashboard"><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>
| home / programming / xforms / | [previous] [next] |
Created: March 27, 2003
Revised: October 10, 2003
URL: http://webreference.com/programming/xforms/1