Changing the widget does not require changing the markup.
<?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><input></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><range></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><output></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>