XForms Essentials, from O'Reilly. Chapter 8 Dynamic Forms | 3

XForms Essentials: XForms Building Blocks

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 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>


Created: March 27, 2003
Revised: October 10, 2003

URL: http://webreference.com/programming/xforms/1