Datatype Aware Controls example from X-Smiles


<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:xfm="http://www.w3.org/2002/xforms" 
      xml:lang="fi">
<meta:meta xmlns:meta="http://www.xsmiles.org/2002/metadata" 
           name="Datatype-Aware Controls" 
           description="Tests datatype awareness of XForms implementation" />
  <head>
    <style type="text/css">
      body {
        background-color: #dddddd;  
      }
      input,output,range {display:block;}
      input::value {
        width: 200px;
        font-weight:bold;
      }
      output::value {
        width: 200px;
        font-weight:bold;
        color:blue;
        background-color: #dddddd;
      }
      label
      {
        color:black;
      }
    </style>
            <link rel="stylesheet" type="text/css" href="../xforms.css" />
        
    <xfm:model id="form1" schema="simple.xsd">
    <xfm:submission id="submit1" method2="postxml" localfile="temp2.xml" 
                    target2="http://www.hut.fi/"/>
    <xfm:instance id="instance1" xmlns="">
      <?xml2-stylesheet type="text/xsl" href="../demo/fo/submit.xsl"?>
      <purchaseOrder>
        <shipTo>
          <volume>2</volume>
          <name>Alice Smith</name>
          <street>123 Maple Street</street>
          <city type="ao">Mill Valley</city>
          <state>CA</state>
          <zip>16</zip>
          <shipped>false</shipped>
          <selection>Ghana</selection>
          <static>
            <data>333</data>
          </static>
          <text>Original</text>
          <date>2002-10-23</date>
        </shipTo>
        <itemlist>xsmiles_personal xsmiles_support</itemlist>
      </purchaseOrder>
    </xfm:instance>
  </xfm:model>
  </head>
  <body>
  <h1>Adaptive inputs</h1>
<p>The inputs in this page adapt to the datatype of the bound instance
item. (Note that there are 2 inputs per item, to show that data flows
in/out between the controls and the instance.</p>

  <h2>&lt;input&gt;</h2>
  <p>
  <xfm:input model="form1" ref="shipTo/street" 
             incremental="true" inputmode="test">
    <xfm:label>xsd:string</xfm:label>
    <xfm:hint>This should be plain text textfield.</xfm:hint>
  </xfm:input>
  <xfm:input model="form1" ref="shipTo/street" 
             incremental="false" inputmode="test">
    <xfm:label>xsd:string</xfm:label>
    <xfm:hint>This should be plain text textfield.</xfm:hint>
  </xfm:input>
  </p>
  
  <p>
  <xfm:input model="form1" ref="shipTo/date" >
    <xfm:label>xsd:date</xfm:label>
    <xfm:hint>This should be a calendar control.</xfm:hint>
  </xfm:input>
  <xfm:input model="form1" ref="shipTo/date" >
    <xfm:label>Ship By:</xfm:label>
    <xfm:hint>This should be a calendar control.</xfm:hint>
  </xfm:input>
  </p>

  <p>
  <xfm:input model="form1" ref="shipTo/shipped">
    <xfm:label>xsd:boolean</xfm:label>
    <xfm:hint>This should be checkbox.</xfm:hint>
  </xfm:input>
  <xfm:input model="form1" ref="shipTo/shipped">
    <xfm:label>Are you married?</xfm:label>
    <xfm:hint>This should be checkbox.</xfm:hint>
  </xfm:input>
  </p>

  <p>
  <xfm:input model="form1" ref="shipTo/zip">
    <xfm:label>xsd:decimal</xfm:label>
    <xfm:hint>This should be decimal inputbox.</xfm:hint>
  </xfm:input>
  <xfm:input model="form1" ref="shipTo/zip">
    <xfm:label>xsd:decimal</xfm:label>
    <xfm:hint>This should be decimal inputbox.</xfm:hint>
  </xfm:input>
  </p>

  <h2>&lt;range&gt;</h2>
  <p>
  <xfm:range model="form1" ref="shipTo/zip" start="-1.5" end="20.5" step="1.5">
    <xfm:label>xsd:decimal</xfm:label>
    <xfm:hint>This should be a slider.</xfm:hint>
  </xfm:range>
  <xfm:range model="form1" ref="shipTo/zip" start="4.0">
    <xfm:label>xsd:decimal</xfm:label>
    <xfm:hint>This should be a slider.</xfm:hint>
  </xfm:range>
  </p>


  <h2>&lt;output&gt;</h2>

  <xfm:output model="form1" ref="shipTo/street"
              incremental="true" inputmode="test">
    <xfm:label>xsd:string</xfm:label>
    <xfm:hint>This should be an output string.</xfm:hint>
  </xfm:output>
  <xfm:output model="form1" ref="shipTo/date" >
    <xfm:label>xsd:date</xfm:label>
    <xfm:hint>This should be an output string.</xfm:hint>
  </xfm:output>
  <xfm:output model="form1" ref="shipTo/shipped">
    <xfm:label>xsd:boolean</xfm:label>
    <xfm:hint>This should be an output string.</xfm:hint>
  </xfm:output>
  <xfm:output model="form1" ref="shipTo/zip">
    <xfm:label>xsd:decimal</xfm:label>
    <xfm:hint>This should be an output string.</xfm:hint>
  </xfm:output>
  <xfm:submit name="Submit" submission="submit1">
    <xfm:hint>Click to submit</xfm:hint>
    <xfm:label>Submit</xfm:label>
  </xfm:submit> 
  
  </body>
</html>

Previous | Next | Top | Cafe con Leche

Copyright 2005, 2008 Elliotte Rusty Harold
elharo@metalab.unc.edu
Last Modified March 11, 2005