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

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

      <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: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 Editing Hierarchical Bookmarks Using 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="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="DOMActivate" />

      </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="DOMActivate" />

      </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="DOMActivate" />

      </xforms:trigger>

<!-- DELETE SECTION BUTTON -->

      <xforms:trigger id="deletesectionbutton">

        <xforms:label>Delete section</xforms:label>

        <xforms:delete nodeset="section" at="index('repeatSections')" ev:event="DOMActivate" />

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

The following example shows one possible way of integrating XForms with [SVG 1.1]. Note that the complete set of rules for integrating XForms and SVG are not fully specified at the time this specification was published. Future versions of the XForms, SVG, or other W3C specifications might define more complete rules for integrating XForms and SVG which might not be compatible with the example below.

Note that the example below does not use SVG's switch and requiredExtensions features, which are commonly used in conjunction with 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>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