Another XForms Example

As you will probably have appreciated from the descriptions of the components of XForms throughout this chapter, XForms is a substantial and potentially complex XML application language. Additionally, many new concepts have been introduced. This section shows some of the functionality of a fairly long piece of working XForms code.

Caution

Because the code shown relates to a namespace that was available to the XForms Working Group editors, note that the namespace URI is not one you should use in your own code. Likely, the XForms Working Group will define a new namespace URI in association with a final version of the XForms specification.


The following code is used with the permission of Mikko Honkala and demonstrates some of the XForms functionality implemented at the time that the December 2001 XForms Working Draft became available.

At first sight, the length of the code might be fairly intimidating. Keep your eyes open for fo:foreign-object elements because the XForms code will be nested within those.

Listing 25.3 shows the XSL-FO document with embedded XForms functionality.

Listing 25.3. An XSL-FO Purchase Form Using XForms to Create an Interface that Responds to User Choices
<?xml version="1.0" encoding="UTF-8"?>
<!-- basic FO page definition stuff -->
<fo:root font-family="Times Roman" font-size="12pt" text-align="justify"
xmlns:fo="http://www.w3.org/1999/XSL/Format"
xmlns:xforms="http://www.w3.org/2001/11/xforms-editors-copy">
 <fo:layout-master-set>
  <fo:simple-page-master master-name="right" page-height="{/*/@height}"
margin-top="5pt" margin-bottom="5pt" margin-left="50pt" margin-right="50pt"
page-width="900pt">
   <fo:region-body margin-bottom="50pt"/>
   <fo:region-after extent="25pt"/>
  </fo:simple-page-master>
  <fo:page-sequence-master master-name="psmOddEven">
   <fo:repeatable-page-master-alternatives>
    <fo:conditional-page-master-reference master-name="right"
page-position="first"/>
   </fo:repeatable-page-master-alternatives>
  </fo:page-sequence-master>
 </fo:layout-master-set>
 <fo:page-sequence id="N2528" master-name="psmOddEven">
  <fo:static-content flow-name="xsl-region-after">
   <fo:block text-align-last="center" font-size="10pt">
    <fo:page-number/>
   </fo:block>
  </fo:static-content>
  <fo:flow flow-name="xsl-region-body">
   <!-- XForms prolog, copy from xml file -->
   <fo:instream-foreign-object>
    <xforms:model>
     <xforms:submitInfo id="submit1" method2="postxml" localfile="temp2.xml"
target2="http://www.hut.fi/"/>
     <xforms:schema/>
     <xforms:instance href="purchaseOrder.xml"/>
     <xforms:bind ref="purchaseOrder/items/item/units" isValid=." &gt; 0"
readOnly=." &gt; 19"/>
     <xforms:bind ref="purchaseOrder/totals/subtotal"
calculate="sum(../../items/item/total)"/>
     <xforms:bind ref="purchaseOrder/totals/tax" calculate="round(../subtotal *
../../info/tax)"/>
     <xforms:bind ref="purchaseOrder/totals/total" calculate=."./subtotal +
../tax"/>
     <xforms:bind ref="purchaseOrder/totals/rowcount"
calculate="count(/purchaseOrder/items/item)"/>
     <xforms:bind ref="purchaseOrder/items/item/total" calculate=."./units *
../price - ((../units * ../price)>1000)*(../units * ../price * 0.1)"
relevant=."./units &gt; 0"/>
     <xforms:bind ref="purchaseOrder/payment/as"
relevant="/purchaseOrder/totals/rowcount &gt; 0"/>
     <xforms:bind ref="purchaseOrder/payment/cc" relevant=."./as='credit'"/>
     <xforms:bind ref="purchaseOrder/payment/exp" relevant=."./as='credit'"/>
    </xforms:model>
   </fo:instream-foreign-object>
   <fo:block font-size="24pt" background-color="blue" color="white"
font-weight="bold">
   XForms constraints and repeating structures.
   </fo:block>
   <fo:block font-size="15pt" space-before="15pt">This example demonstrates the
use of XForms constraints, such as calculate, isValid and readonly. Try moving
the sliders to zero or full. The line items are created using XForms 'repeat'
construct.
   </fo:block>
   <fo:table space-before="10mm">
    <fo:table-column column-width="60mm"/>
    <fo:table-column column-width="60mm"/>
    <fo:table-column column-width="100mm"/>
    <fo:table-body>
     <!-- TABLE HEADER -->
     <fo:table-row space-before="5pt" font-weight="bold">
      <fo:table-cell>
       <!-- SUBTOTAL -->
       <fo:block>
        <fo:instream-foreign-object>
         <xforms:output ref="purchaseOrder/totals/subtotal" cols="8"
style="font-weight:bold;width:80px">
          <xforms:caption style="font-weight:bold;">Subtotal</xforms:caption>
          <xforms:hint>Subtotal</xforms:hint>
         </xforms:output>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <!-- PURCHASE ORDER TOTALS-->
       <fo:block>
        <fo:instream-foreign-object>
         <xforms:output ref="purchaseOrder/totals/tax"
 cols="18" style="font-weight:bold;width:80px">
          <xforms:caption style="font-weight:bold;">Tax</xforms:caption>
          <xforms:hint>Tax</xforms:hint>
         </xforms:output>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <!-- PURCHASE ORDER TOTALS-->
       <fo:block>
        <fo:instream-foreign-object>
         <xforms:output ref="purchaseOrder/totals/total"
 cols="10" style="font-weight:bold;color:red;font-size:18px;width:180px">
          <xforms:caption style="font-weight:bold;">Total</xforms:caption>
          <xforms:hint>Total</xforms:hint>
         </xforms:output>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
     </fo:table-row>
     <fo:table-row>
      <fo:table-cell>
       <fo:block>
        <!-- INSERT BUTTON -->
        <fo:instream-foreign-object>
         <xforms:button id="insertbutton">
          <xforms:caption>Insert</xforms:caption>
          <xforms:action>
           <xforms:insert repeat="repeat1"/>
          </xforms:action>
         </xforms:button>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <fo:block>
        <!-- DELETE BUTTON -->
        <fo:instream-foreign-object>
         <xforms:button id="delete">
         <xforms:caption>Delete</xforms:caption>
          <xforms:action>
           <xforms:delete repeat="repeat1"/>
          </xforms:action>
         </xforms:button>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <fo:block>
        <fo:instream-foreign-object>
         <xforms:output ref="/purchaseOrder/totals/rowcount">
          <xforms:caption>Item count:</xforms:caption>
         </xforms:output>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
     </fo:table-row>
    </fo:table-body>
   </fo:table>
   <!-- TABLE -->
   <fo:table space-before="10mm">
    <fo:table-column column-width="90mm"/>
    <fo:table-column column-width="80mm"/>
    <fo:table-column column-width="20mm"/>
    <fo:table-column column-width="40mm"/>
    <fo:table-body>
     <!-- TABLE HEADER -->
     <fo:table-row space-before="5pt" font-weight="bold">
      <fo:table-cell>
       <fo:block>Units</fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <fo:block>Name</fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <fo:block>Price</fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <fo:block>Total</fo:block>
      </fo:table-cell>
     </fo:table-row>
     <!-- TABLE ROW USING REPEAT-->
     <xforms:repeat ref="purchaseOrder/items/item"
 id="repeat1" x-number="4" x-startIndex="1">
      <!-- REPEAT START -->
      <fo:table-row space-before="5pt">
       <fo:table-cell>
        <fo:instream-foreign-object>
         <xforms:range start="0" end="20" stepsize="1" ref="units">
          <xforms:hint>The units of this item</xforms:hint>
         </xforms:range>
        </fo:instream-foreign-object>
       </fo:table-cell>
       <fo:table-cell>
        <fo:instream-foreign-object>
         <xforms:input ref="name" style="width:150px">
          <!--<xforms:caption style="caption-side:left"></xforms:caption>-->
          <xforms:hint>The name of this item</xforms:hint>
         </xforms:input>
        </fo:instream-foreign-object>
       </fo:table-cell>
       <fo:table-cell>
        <fo:instream-foreign-object>
         <xforms:input cols="3" ref="price" style="width:40px">
          <xforms:hint>The price of this item</xforms:hint>
         </xforms:input>
        </fo:instream-foreign-object>
       </fo:table-cell>
       <fo:table-cell>
        <fo:instream-foreign-object>
         <xforms:output cols="6" ref="total" style="width:40px">
          <xforms:hint>The total value of this item</xforms:hint>
         </xforms:output>
        </fo:instream-foreign-object>
       </fo:table-cell>
      </fo:table-row>
     </xforms:repeat>
     <!-- REPEAT END -->
    </fo:table-body>
   </fo:table>
   <!-- Payment method -->
   <fo:table space-before="10mm">
    <fo:table-column column-width="60mm"/>
    <fo:table-column column-width="65mm"/>
    <fo:table-column column-width="80mm"/>
    <fo:table-body>
     <!-- TABLE HEADER -->
     <fo:table-row space-before="5pt" font-weight="bold">
      <fo:table-cell>
       <fo:block>
        <fo:instream-foreign-object>
         <xforms:selectOne ref="purchaseOrder/payment/as"
 style="list-ui:checkbox">
          <xforms:caption style="font-weight:bold;">
Select payment method</xforms:caption>
          <xforms:item value="credit">Credit card</xforms:item>
          <xforms:item value="cash">Cash</xforms:item>
         </xforms:selectOne>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <fo:block space-before="0mm">
        <fo:instream-foreign-object>
         <xforms:input ref="purchaseOrder/payment/cc" style="width:130px">
          <xforms:caption style="font-weight:bold;">
Credit card number</xforms:caption>
         </xforms:input>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
      <fo:table-cell>
       <fo:block space-after="5mm">
        <fo:instream-foreign-object>
         <xforms:input ref="purchaseOrder/payment/exp" style="width:80px">
          <xforms:caption style="font-weight:bold;">
Expiration date</xforms:caption>
         </xforms:input>
        </fo:instream-foreign-object>
       </fo:block>
      </fo:table-cell>
     </fo:table-row>
    </fo:table-body>
   </fo:table>
   <!-- SUBMIT BUTTON -->
   <fo:instream-foreign-object>
    <xforms:submit name="Submit" ref="test" to="submit1"
 style="font-family: Arial; font-size: 20px; font-style: bold; color: red">
     <xforms:hint>Click to submit</xforms:hint>
     <xforms:caption>Buy!</xforms:caption>
    </xforms:submit>
   </fo:instream-foreign-object>
  </fo:flow>
 </fo:page-sequence>
</fo:root>

The appearance of the form when first loaded is shown in Figure 25.2.

Figure 25.2. The purchase form when first loaded in the X-Smiles browser.


Notice that even before we start entering any data, default values have been provided in several XForms form controls. For example, each of the slide controls has been set to a default value of 1. The name and price for the three available items is loaded from an associated file by means of the ref attribute on the xforms:instance element nested within the xforms:model element.

When we mouse a form control, a ToolTip is displayed as shown in Figure 25.3.

Figure 25.3. The xforms:hint element provides ToolTips when form controls are moused.


Once we have selected a form control by clicking on it, its background color changes to yellow in this example. Also if we move the slide control, the value of the order for that item automatically adjusts. That adjusted value is reflected in an updated total value for the order as you can see in Figure 25.4.

Figure 25.4. Values in the form are automatically updated to reflect the value entered by means of a slide control.


Notice, too, that the ToolTip disappears if the cursor is held over a form control for a lengthy period of time.

If we select to pay by credit card, additional information is needed—the credit card number and the expiration date. This becomes relevant when the credit card option is chosen and is then displayed for user input. Figure 25.5 shows that.

Figure 25.5. Form controls can be selectively displayed only when they are relevant.


Listing 25.4 shows the PurchaseOrder.xml file, which supplies the default instance data.

Listing 25.4. Default Instance Data for Listing 25.3 (PurchaseOrder.xml)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- edited with XML Spy v4.0 beta 2 build Jul 26 2001 (http://www.xmlspy.com)
by Mikko Honkala (W3C XForms Working Group) -->
<purchaseOrder xmlns="">
    <items>
        <item>
            <name>X-Smiles desktop</name>
            <units>1</units>
            <price>50</price>
            <total>0</total>
        </item>
        <item>
            <name>X-Smiles PDA</name>
            <units>1</units>
            <price>500</price>
            <total>0</total>
        </item>
        <item>
            <name>Java debugger</name>
            <units>1</units>
            <price>1500</price>
            <total>0</total>
        </item>
    </items>
    <totals>
        <subtotal>0</subtotal>
        <tax>0</tax>
        <total>0</total>
        <rowcount>0</rowcount>
    </totals>
    <info>
        <tax>0.22</tax>
    </info>
    <payment>
        <as>cash</as>
        <cc/>
        <exp>01/2003</exp>
    </payment>
</purchaseOrder>

In this example, we have seen a snapshot in the development of the XForms technology at a time when the detail of code, and therefore of implementations, have been undergoing rapid change. By the time you read this, XForms will likely have changed at least a little; but you will hopefully have understood the principles on which it is based and will be able to adapt code to any subsequent detailed changes.

Future version of X-Smiles will implement XForms in XHTML. Other tools, likely to include those from Cardiff.com and Mozquito.com, will also implement XForms in XHTML and in other XML-based application languages such as SVG. In addition, there is significant XForms functionality being built into the Mozilla browser. This chapter gives you only a glimpse into a technology that will play an important part in an interactive XML-based Web which will be part of our future.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.22.51.241