<?xml version="1.0" encoding="ISO-8859-1"?>
<?xbl href="xforms_xbl.xml" ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xbl="http://www.w3.org/ns/xbl"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:my="test" 
xmlns:xforms="http://www.w3.org/2002/xforms">
   <head>   
   
   <title>XBL 2.0 demo: Using XBL with XForms</title>
      	  
      <link href="xformsdemo.css" rel="stylesheet" type="text/css"/>
      <xforms:model id="form1">
         <xforms:submission id="submit1" localfile="temp2.xml" method2="postxml" target2="http://www.hut.fi/"/>
         <xforms:instance xmlns="" id="instance1">
            <sms xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:my="test" xmlns:xforms="http://www.w3.org/2002/xforms">
               <number>555-556</number>
			   <name/>
               <text/>
               <length>
                  <current>0</current>
                  <left/>
                  <maximum>160</maximum>
               </length>
            </sms>
         </xforms:instance>
         <xforms:bind calculate="string-length(/sms/text)" ref="/sms/length/current"/>
         <xforms:bind calculate="../maximum - ../current" constraint="/sms/length/left &gt; -1" ref="/sms/length/left"/>
      </xforms:model>
	  
   </head>
<body>
    <!--
<h1 class="xformsdemos">XForms demos</h1>
-->

<p class="headline">SMS Message</p>
<p id="description">This example is based on the XForms demo <a href="http://www.xsmiles.org/demo/xforms/sms.xhtml">SMS Editor</a>, but added with some XBL 2.0 code that adds icons to fields, border to the form and highlights the fields when user selects them.</p>
<p>
<xforms:input ref="/sms/number" image="images/phone.gif">
  <xforms:label>Telephone number</xforms:label>
</xforms:input>
</p>
<p>
<xforms:input ref="/sms/name" image="images/name.gif">
  <xforms:label>Your name</xforms:label>
</xforms:input>
</p>
<p>
<xforms:output ref="/sms/length/left">
  <xforms:label>Characters left</xforms:label>
  <xforms:alert ev:event="xforms-invalid" level="ephemeral">SMS message must be smaller than 160 characters.</xforms:alert>
</xforms:output>
</p>
<p>
<xforms:textarea incremental="true" ref="/sms/text" image="images/msg.gif" id="message">
  <xforms:label>Message</xforms:label>
</xforms:textarea>
</p>
<p>
<xforms:trigger>
   <xforms:label>Duplicate</xforms:label>
        <xforms:setvalue ev:event="DOMActivate" ref="/sms/text" value="concat(.,.)"/>
</xforms:trigger>

</p>
<p>
<xforms:submit submission="submit1">
   <xforms:label>Send</xforms:label>
</xforms:submit>
</p>
</body>
</html>