Table of Contents Prev Next Bottom
Quick Table of Contents
G Complete XForms Examples (Non-Normative)
    G.1 XForms in XHTML
    G.2 Editing Hierarchical Bookmarks Using XForms
    G.3 Survey Using XForms and SVG

G Complete XForms Examples (Non-Normative)

This section presents complete XForms examples. These and additional examples are maintained at http://www.w3.org/MarkUp/Forms/2002/Examples.

G.1 XForms in XHTML

<!--$Id: sliceG.html,v 1.1 2002/11/06 16:02:54 tvraman Exp $-->
<html xmlns="http://www.w3.org/2002/06/xhtml2" xmlns:xforms="http://www.w3.org/2002/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/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/xforms/cr">
      <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'argent comptant 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 par un espace ou un trait d'union chaque groupe de chiffres)</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>

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

G.3 Survey Using XForms and SVG

<!-- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd"> -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/01/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:s="http://example.com/survey" 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>Always</s:lemon>
          </s:espressoPrefs>
        </s:survey>
      </xforms:instance>
      <xforms:submission id="submit1" method="post" action="http://www.example.org/surveyhandler" />
    </xforms:model>
  </defs>
  <title>Espresso survey</title>
  <desc>Sample SVG and XForms - espresso customer survey</desc>
  <g>
    <text x="50" y="70" font-size="40" font-family="Arial Black, sans-serif" font-weight="900">Customer Survey: 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>Your usual coffee drink is:</text>
            </g>
          </xforms:label>
          <xforms:item>
            <xforms:label>Rich, dark espresso</xforms:label>
            <xforms:value>espresso</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Creamy cappuccino</xforms:label>
            <xforms:value>cappuccino</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Long, milky latté</xforms:label>
            <xforms:value>latté</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Don't like coffee!</xforms:label>
            <xforms:value>none</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>Shots of espresso per week:</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>Sugar?</text>
            </g>
          </xforms:label>
          <xforms:item>
            <xforms:label>Yes</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>Lemon?</text>
            </g>
          </xforms:label>
          <xforms:item>
            <xforms:label>Required for the full experience</xforms:label>
            <xforms:value>Always</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Whatever</xforms:label>
            <xforms:value>Indifferent</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Keep that citrus to yourself</xforms:label>
            <xforms:value>Never</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>Send survey</xforms:label>
      </xforms:submit>
    </foreignObject>
    <!--- keep the graphics data out of this example listing -->
    <image xlink:href="espresso.svg" x="400" y="230" width="280" height="270" />
  </g>
</svg>
   
Table of Contents Top