E Complete XForms Examples

This section presents complete XForms examples.

E.1 XForms In XHTML


<!--$Id: sliceE.html,v 1.1 2002/01/17 00:08:14 tvraman Exp $-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xforms="http://www.w3.org/2002/01/xforms"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
      xmlns:my="http://commerce.example.com/payment"
      xml:lang="en">
  <head>
    <title>XForms in XHTML</title>

    <xforms:model>
      <xforms:instance>
        <payment as="credit" xmlns="http://commerce.example.com/payment">
          <cc/>
          <exp/>
        </payment>
      </xforms:instance>
      <xforms:schema xlink:href="payschema.xsd"/>
      <xforms:submitInfo action="http://example.com/submit" method="post" id="s00"/>
      <xforms:bind ref="my:payment/my:cc"
                   relevant="../my:payment/@as = 'credit'"
                   required="true" type="my:cc"/>
      <xforms:bind ref="my:payment/my:exp"
                   relevant="../my:payment/@as = 'credit'"
                   required="true" type="xsd:gYearMonth"/>
    </xforms:model>
  </head>
  <body>
    ...
    <group xmlns="http://www.w3.org/2002/01/xforms" ref="my:payment">
      <selectOne ref="@as">
        <caption>Select Payment Method</caption>
        <choices>
          <item>
            <caption>Cash</caption>
            <value>cash</value>
          </item>
          <item>
            <caption>Credit</caption>
            <value>credit</value>
          </item>
        </choices>
      </selectOne>

      <input ref="my:cc">
        <caption>Credit Card Number</caption>
      </input>

      <input ref="my:exp">
        <caption>Expiration Date</caption>
      </input>

      <submit submitInfo="s00">
        <caption>Submit Form</caption>
      </submit>
    </group>
    ...
  </body>
</html>

E.2 Editing Hierarchical Bookmarks Using XForms


<?xml version="1.0"?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xforms="http://www.w3.org/2002/01/xforms"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  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:caption.sectionCaption {
      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 Using In An XML Browser</title>
    <xforms:model id="bookmarks">
<!--The bookmarks instance tree is shown inline for
      the sake of this example.
XML browser XSmiles would use
 <xforms:instance xlink:href="bookmarks.xml"/>.
-->
      <xforms:instance xmlns="">
        <bookmarks>
          <section name="main">
            <bookmark href="http://www.xsmiles.org/demo/demos.xml" name="Main page"/>
          </section>
          <section name="demos">
            <bookmark href="http://www.xsmiles.org/demo/fo/images.fo" name="images"/>
            <bookmark href="http://www.xsmiles.org/demo/fo/xforms-ecma.xml" name="xforms-ecma"/>
            <bookmark href="http://www.xsmiles.org/demo/fo/sip.fo" name="sip"/>
          </section>
          <section name="misc">
            <bookmark href="sip:mhonkala@xdemo.tml.hut.fi" name="call: mhonkala"/>
            <bookmark href="sip:tvraman@examples.com" name="call: tvraman"/>
            <bookmark href="http://www.xsmiles.org/demo/links.xml" name="Links"/>
          </section>
          <section name="XForms">
            <bookmark href="file:/C:/source/xsmiles/demo/xforms/xforms-xmlevents.xml" name="XML events"/>
            <bookmark href="file:/C:/source/xsmiles/demo/xforms/model3.xml" name="model3"/>
            <bookmark href="file:/C:/source/xsmiles/demo/xforms/repeat.fo" name="repeat + constraints"/>
          </section>
        </bookmarks>
      </xforms:instance>
      <xforms:submitInfo id="s01" method="post" action="http://www.examples.com/"/>
    </xforms:model>
  </head>
  <body>
    <xforms:repeat nodeset="bookmarks/section" id="repeatSections">
      <xforms:input ref="@name" class="editField">
        <xforms:caption class="sectionCaption">Section</xforms:caption>
      </xforms:input>
<!-- BOOKMARK REPEAT START -->
      <xforms:repeat nodeset="bookmark" id="repeatBookmarks">
        <xforms:input ref="@name">
          <xforms:caption>Bookmark name</xforms:caption>
        </xforms:input>
        <xforms:input ref="@href">
          <xforms:caption>URL</xforms:caption>
        </xforms:input>
      </xforms:repeat>
    </xforms:repeat>
    <p>
<!-- INSERT BOOKMARK BUTTON -->
      <xforms:button id="insertbutton">
        <xforms:caption>Insert bookmark</xforms:caption>
        <xforms:insert nodeset="/bookmarks/section[xforms:cursor('repeatSections')]/bookmark" at="xforms:cursor('repeatBookmarks')" position="after" ev:event="xforms:activate"/>
      </xforms:button>
<!-- DELETE BOOKMARK BUTTON -->
      <xforms:button id="delete">
        <xforms:caption>Delete bookmark</xforms:caption>
        <xforms:delete nodeset="/bookmarks/section[xforms:cursor('repeatSections')]/bookmark" at="xforms:cursor('repeatBookmarks')" ev:event="xforms:activate"/>
      </xforms:button>
    </p>
    <p>
<!-- INSERT SECTION BUTTON -->
      <xforms:button id="insertsectionbutton">
        <xforms:caption>Insert section</xforms:caption>
        <xforms:insert nodeset="/bookmarks/section" at="xforms:cursor('repeatSections')" position="after" ev:event="xforms:activate"/>
      </xforms:button>
<!-- DELETE SECTION BUTTON -->
      <xforms:button id="deletesectionbutton">
        <xforms:caption>Delete section</xforms:caption>
        <xforms:delete nodeset="/bookmarks/section" at="xforms:cursor('repeatSections')" ev:event="xforms:activate"/>
      </xforms:button>
    </p>
<!-- SUBMIT BUTTON -->
    <xforms:submit submitInfo="s01">
      <xforms:caption>Save</xforms:caption>
      <xforms:hint>Click to submit</xforms:hint>
    </xforms:submit>
  </body>
</html>