G Complete XForms Examples (Non-Normative)

This section presents complete XForms examples.

G.1 XForms In XHTML

<!--$Id: sliceG.html,v 1.3 2002/08/21 14:00:58 henri Exp $-->
<html xmlns="http://www.w3.org/2002/06/xhtml2" xmlns:xforms="http://www.w3.org/2002/08/xforms/cr" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:my="http://commerce.example.com/payment">
  
<head>
    
<title xml:lang="fr">XForms en XHTML</title>

    
<xforms:model schema="payschema.xsd">
      
<xforms:instance>
        
<my:payment as="credit">
          
<my:cc />
          
<my:exp />
        
</my:payment>
      
</xforms:instance>
      
<xforms:submission action="http://www.example.com/buy.rb" method="post" id="s00" />
      
<xforms:bind nodeset="my:cc" relevant="../@as='credit'" required="true()" />
      
<xforms:bind nodeset="my:exp" relevant="../@as='credit'" required="true()" />
    
</xforms:model>
  
</head>
  
<body>
    ...
    
<group xmlns="http://www.w3.org/2002/08/xforms/cr">
      
<trigger>
        
<label>Français</label>
        
<toggle case="fr" ev:event="xforms-activate" />
      
</trigger>
      
<trigger>
        
<label>English</label>
        
<toggle case="en" ev:event="xforms-activate" />
      
</trigger>
    
</group>
    
    
<switch xmlns="http://www.w3.org/2002/08/xforms/cr">
      
<case id="fr">
        
<select1 ref="@as">
          
<label xml:lang="fr">Choisissez la méthode de paiement</label>
          
<choices>
            
<item>
              
<label xml:lang="fr">Cash</label>
              
<value>cash</value>
                
<alert xml:lang="fr">Veuillez ne pas expédier l'argent comptant.</alert>
            
</item>
            
<item>
              
<label xml:lang="fr">Carte bancaire</label>
              
<value>credit</value>
            
</item>
          
</choices>
        
</select1>

        
<input ref="my:cc">
          
<label xml:lang="fr">Nombre de Carte de Banque</label>
        
</input>

        
<input ref="my:exp">
          
<label xml:lang="fr">Date d'échéance.</label>
        
</input>

        
<submit submission="s00">
          
<label xml:lang="fr">Achat</label>
        
</submit>
      
</case>
      
<case id="en">
        
<select1 ref="@as">
          
<label xml:lang="en">Select Payment Method</label>
          
<choices>
            
<item>
              
<label xml:lang="en">Cash</label>
              
<value>cash</value>
              
<alert xml:lang="en">Please do not mail cash.</alert>
            
</item>
            
<item>
              
<label xml:lang="en">Credit</label>
              
<value>credit</value>
            
</item>
          
</choices>
        
</select1>

        
<input ref="my:cc">
          
<label xml:lang="en">Credit Card Number</label>
        
</input>

        
<input ref="my:exp">
          
<label xml:lang="en">Expiration Date</label>
        
</input>

        
<submit submission="s00">
          
<label xml:lang="en">Buy</label>
        
</submit>
      
</case>
    
</switch>
    ...
  
</body>
</html>

Schema file payschema.xsd:

<!-- payschema.xsd  -->
<xsd:schema xmlns:my="http://commerce.example.com/payment" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://commerce.example.com/payment" elementFormDefault="qualified">

  
<xsd:element name="payment">
    
<xsd:complexType name="payment">
      
<xsd:sequence minOccurs="0" maxOccurs="unbounded">
        
<xsd:choice>    
          
<xsd:element ref="my:cc" />
          
<xsd:element ref="my:exp" />
        
</xsd:choice>
      
</xsd:sequence>
      
<xsd:attribute name="as" type="my:paymentAs" />
    
</xsd:complexType>
  
</xsd:element>
  
<xsd:element name="cc" type="my:cc" />
  
<xsd:element name="exp" type="xsd:gYearMonth" />

  
<xsd:simpleType name="cc">
    
<xsd:restriction base="xsd:string">
      
<xsd:pattern value="\s*((\d+)[-\s])+([\d]+)\s*" />
    
</xsd:restriction>
  
</xsd:simpleType>

  
<xsd:simpleType name="paymentAs">
    
<xsd:restriction base="xsd:string">
      
<xsd:enumeration value="cash" />
      
<xsd:enumeration value="credit" />
    
</xsd:restriction>
  
</xsd:simpleType>
</xsd:schema>

G.2 Editing Hierarchical Bookmarks Using XForms

<html xmlns="http://www.w3.org/2002/06/xhtml2" xmlns:xforms="http://www.w3.org/2002/08/xforms/cr" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:my="http://commerce.example.com/payment" xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en">
  
<head>
<style type="text/css">
xforms:input.editField {
 font-weight:bold; font-size:20px; width:500px
}
xforms:label.sectionLabel {
  font-weight:bold; color:white; background-color:blue
}
xforms:submit {
  font-family: Arial; font-size: 20px; font-style: bold; color: red
}
</style>
    
<title>Editing Hierarchical Bookmarks In X-Smiles  </title>
    
<xforms:model id="bookmarks">
      
<xforms:instance src="bookmarks.xml" />
      
<xforms:submission id="s01" method="post" action="http://examples.com/" />
    
</xforms:model>
  
</head>
  
<body>
    
<xforms:repeat nodeset="section" id="repeatSections">
      
<xforms:input ref="@name" class="editField">
        
<xforms:label class="sectionLabel">Section</xforms:label>
      
</xforms:input>
<!-- BOOKMARK REPEAT START  -->
      
<xforms:repeat nodeset="bookmark" id="repeatBookmarks">
        
<xforms:input ref="@name">
          
<xforms:label>Bookmark name</xforms:label>
        
</xforms:input>
        
<xforms:input ref="@href">
          
<xforms:label>URL</xforms:label>
        
</xforms:input>
      
</xforms:repeat>
    
</xforms:repeat>
    
<p>
<!-- INSERT BOOKMARK BUTTON  -->
      
<xforms:trigger id="insertbutton">
        
<xforms:label>Insert bookmark</xforms:label>
        
<xforms:insert nodeset="section[index('repeatSections')]/bookmark" at="index('repeatBookmarks')" position="after" ev:event="xforms-activate" />
      
</xforms:trigger>
<!-- DELETE BOOKMARK BUTTON  -->
      
<xforms:trigger id="delete">
        
<xforms:label>Delete bookmark</xforms:label>
        
<xforms:delete nodeset="section[index('repeatSections')]/bookmark" at="index('repeatBookmarks')" ev:event="xforms-activate" />
      
</xforms:trigger>
    
</p>
    
<p>
<!-- INSERT SECTION BUTTON  -->
      
<xforms:trigger id="insertsectionbutton">
        
<xforms:label>Insert section</xforms:label>
        
<xforms:insert nodeset="section" at="index('repeatSections')" position="after" ev:event="xforms-activate" />
      
</xforms:trigger>
<!-- DELETE SECTION BUTTON  -->
      
<xforms:trigger id="deletesectionbutton">
        
<xforms:label>Delete section</xforms:label>
        
<xforms:delete nodeset="section" at="index('repeatSections')" ev:event="xforms-activate" />
      
</xforms:trigger>
    
</p>
<!-- SUBMIT BUTTON  -->
    
<xforms:submit submission="s01">
      
<xforms:label>Save</xforms:label>
      
<xforms:hint>Click to submit</xforms:hint>
    
</xforms:submit>
  
</body>
</html>

Initial instance file bookmarks.xml:

<!--This is the bookmarks.xml file  -->
<bookmarks>
  
<section name="main">
    
<bookmark href="http://www.example.com/xforms.xml" name="Main page" />
  
</section>
  
<section name="demos">
    
<bookmark href="http://www.example.com/demo/images.fo" name="images" />
    
<bookmark href="http://www.example.com/demo/xf-ecma.xml" name="ecma" />
    
<bookmark href="http://www.example.com/demo/sip.fo" name="sip" />
  
</section>
  
<section name="XForms">
    
<bookmark href="file:///C/source/xmlevents.xml" name="XML events" />
    
<bookmark href="file:///C/source/model3.xml" name="model3" />
    
<bookmark href="file:///C/source/repeat.fo" name="repeat" />
  
</section>
</bookmarks>