G Exemples XForms complets (non normatif)

Cette section présente des exemples XForms complets. Ceux-ci et d'autres sont conservés à http://www.w3.org/MarkUp/Forms/2002/Examples.

G.1 XForms en XHTML

<!--$Id: sliceG.html,v 1.240 2003/10/03 14:35:42 tvraman Exp $-->
<html xmlns:my="http://commerce.example.com/payment" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns="http://www.w3.org/2002/06/xhtml2">
  
<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/xforms">
      
<trigger>
        
<label>Français</label>
        
<toggle case="fr" ev:event="DOMActivate" />
      
</trigger>
      
<trigger>
        
<label>English</label>
        
<toggle case="en" ev:event="DOMActivate" />
      
</trigger>
    
</group>
    
    
<switch xmlns="http://www.w3.org/2002/xforms">
      
<case id="fr">
        
<select1 ref="@as">
          
<label xml:lang="fr">Choisissez un mode de paiement</label>
          
<choices>
            
<item>
              
<label xml:lang="fr">Comptant</label>
              
<value>cash</value>
              
<message level="modeless" ev:event="xforms-select" xml:lang="fr">
                         Ne pas envoyer d'espèces par la poste.
</message>
            
</item>
            
<item>
              
<label xml:lang="fr">Carte bancaire</label>
              
<value>credit</value>
            
</item>
          
</choices>
        
</select1>

        
<input ref="my:cc">
          
<label xml:lang="fr">Numéro de carte bancaire</label>
          
<alert xml:lang="fr">Saississez un numéro de carte bancaire en cours
           (séparez chaque groupe de chiffres par un espace ou un trait d'union)
</alert>
        
</input>

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

        
<submit submission="s00">
          
<label xml:lang="fr">Achetez</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>
              
<message level="modeless" ev:event="xforms-select" xml:lang="en">
              Please do not mail cash.
</message>
            
</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>
          
<alert xml:lang="en">Please specify a valid credit card number
            (use spaces or hyphens between digit groups)
</alert>
        
</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>

Fichier de schéma payschema.xsd :

<!-- payschema.xsd -->
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:my="http://commerce.example.com/payment" 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:minLength value="12"/>
      <xsd:maxLength value="19"/>
      <xsd:pattern value="[0-9]+"/>
    
</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 La création de signets hiérarchiques avec XForms

<html xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:my="http://commerce.example.com/payment" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns="http://www.w3.org/2002/06/xhtml2" xml:lang="fr">
  
<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>La création de signets hiérarchiques avec XForms</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>
<!-- DÉBUT RÉPÉTITION BOOKMARK -->
      
<xforms:repeat nodeset="bookmark" id="repeatBookmarks">
        
<xforms:input ref="@name">
          
<xforms:label>Nom du signet</xforms:label>
        
</xforms:input>
        
<xforms:input ref="@href">
          
<xforms:label>URL</xforms:label>
        
</xforms:input>
      
</xforms:repeat>
    
</xforms:repeat>
    
<p>
<!-- INSÉRER BOUTON SIGNET -->
      
<xforms:trigger id="insertbutton">
        
<xforms:label>Insérer signet</xforms:label>
        
<xforms:insert nodeset="section[index('repeatSections')]/bookmark" at="index('repeatBookmarks')" position="after" ev:event="DOMActivate" />
      
</xforms:trigger>
<!-- SUPPRIMER BOUTON SIGNET -->
      
<xforms:trigger id="delete">
        
<xforms:label>Supprimer signet</xforms:label>
        
<xforms:delete nodeset="section[index('repeatSections')]/bookmark" at="index('repeatBookmarks')" ev:event="DOMActivate" />
      
</xforms:trigger>
    
</p>
    
<p>
<!-- INSÉRER BOUTON SECTION -->
      
<xforms:trigger id="insertsectionbutton">
        
<xforms:label>Insérer section</xforms:label>
        
<xforms:insert nodeset="section" at="index('repeatSections')" position="after" ev:event="DOMActivate" />
      
</xforms:trigger>
<!-- SUPPRIMER BOUTON SECTION -->
      
<xforms:trigger id="deletesectionbutton">
        
<xforms:label>Supprimer section</xforms:label>
        
<xforms:delete nodeset="section" at="index('repeatSections')" ev:event="DOMActivate" />
      
</xforms:trigger>
    
</p>
<!-- BOUTON SOUMISSION -->
    
<xforms:submit submission="s01">
      
<xforms:label>Enregistrer</xforms:label>
      
<xforms:hint>Cliquer pour soumettre</xforms:hint>
    
</xforms:submit>
  
</body>
</html>

Le fichier d'instances initial 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>

G.3 Un sondage en utilisant XForms et SVG

L'exemple suivant montre une façon possible d'intégrer XForms à [SVG 1.1]. Remarquez que le jeu de règles complet pour intégrer XForms et SVG n'est pas entièrement défini au moment de la publication de cette spécification. Les versions suivantes de XForms, de SVG, ou d'autres spécifications du W3C pourront définir des règles plus complètes pour intégrer XForms et SVGNote, lesquelles pourraient ne plus être compatibles avec l'exemple ci-dessous.

Remarquez aussi que cet exemple n'utilise pas les fonctionnalités switch et requiredExtensions de SVG, qui s'emploient souvent conjointement avec foreignObject.

<!-- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
-->
<svg xmlns:s="http://example.com/survey" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="700px" height="600px" viewBox="0 0 700 600">
  
<defs>
    
<polygon id="bullet" points="-30,-30, -10,-10, -20,10" fill="#007138" />
    
<xforms:model id="form1" schema="surveyschema.xsd">
      
<xforms:instance id="instance1">
        
<s:survey xmlns="http://example.com/survey">
          
<s:drink>none</s:drink>
          
<s:espressoPrefs>
            
<s:numberPerWeek>0</s:numberPerWeek>
            
<s:sugar>0</s:sugar>
            
<s:lemon>Toujours</s:lemon>
          
</s:espressoPrefs>
        
</s:survey>
      
</xforms:instance>
      
<xforms:submission id="submit1" method="post" action="http://www.example.org/surveyhandler" />
    
</xforms:model>
  
</defs>
  
<title>Enquête espresso</title>
  
<desc>Exemple SVG et XForms - enquête sur le consommateur d'espresso</desc>
  
<g>
    
<text x="50" y="70" font-size="40" font-family="Arial Black, sans-serif" font-weight="900">Enquête de clientèle : Espresso</text>
    
<g font-family="Arial, Helvetica, sans-serif" font-size="18">
      
<foreignObject x="80" y="150" width="250" height="40">
        
<xforms:select1 appearance="minimal" model="form1" ref="s:drink">
          
<xforms:label>
            
<g transform="translate(80, 140)">
              
<use xlink:href="#bullet" />
              
<text>Votre boisson au café habituelle est :</text>
            
</g>
          
</xforms:label>
          
<xforms:item>
            
<xforms:label>Un espresso</xforms:label>
            
<xforms:value>espresso</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Un cappuccino</xforms:label>
            
<xforms:value>cappuccino</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Un latté</xforms:label>
            
<xforms:value>latté</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Pas de café</xforms:label>
            
<xforms:value>aucun</xforms:value>
          
</xforms:item>
        
</xforms:select1>
      
</foreignObject>
      
<foreignObject x="80" y="240" width="250" height="40">
        
<xforms:range model="form1" start="0" end="30" step="5" ref="s:espressoPrefs/s:numberPerWeek">
          
<xforms:label>
            
<g transform="translate(80, 230)">
              
<use xlink:href="#bullet" />
              
<text>Nombre de tasses d'espresso par semaine :</text>
            
</g>
          
</xforms:label>
        
</xforms:range>
      
</foreignObject>
      
<foreignObject x="80" y="350" width="250" height="40">
        
<xforms:select model="form1" ref="s:espressoPrefs/s:sugar">
          
<xforms:label>
            
<g transform="translate(80, 340)">
              
<use xlink:href="#bullet" />
              
<text>Sucre ?</text>
            
</g>
          
</xforms:label>
          
<xforms:item>
            
<xforms:label>Oui</xforms:label>
            
<xforms:value>X</xforms:value>
          
</xforms:item>
        
</xforms:select>
      
</foreignObject>
      
<foreignObject x="80" y="420" width="250" height="90">
        
<xforms:select1 appearance="full" model="form1" ref="s:espressoPrefs/s:lemon">
          
<xforms:label>
            
<g transform="translate(80, 410)">
              
<use xlink:href="#bullet" />
              
<text>Citron ?</text>
            
</g>
          
</xforms:label>
          
<xforms:item>
            
<xforms:label>Indispensable pour une expérience réussie</xforms:label>
            
<xforms:value>Toujours</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Qu'importe</xforms:label>
            
<xforms:value>Indifférent</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Gardez votre citron</xforms:label>
            
<xforms:value>Jamais</xforms:value>
          
</xforms:item>
        
</xforms:select1>
      
</foreignObject>
    
</g>
    
<use xlink:href="#bullet" x="101" y="64" transform="scale(7,3)" />
    
<foreignObject y="150" x="500" height="60" width="100">
      
<xforms:submit model="form1">
        
<xforms:label>Envoyer le questionnaire</xforms:label>
      
</xforms:submit>
    
</foreignObject>
    
<!--- garder les données graphique hors du listing de cet exemple -->
    
<image xlink:href="espresso.svg" x="400" y="230" width="280" height="270" />
  
</g>
</svg>