<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms"
	 xmlns:xs="http://www.w3.org/2001/XMLSchema"
 xmlns:ps="http://www.web21.com/schemas"
	 >
 <head>
  <title>Boxes</title>
  <style type="text/css">
   .input300px {width:300px; border-color:red; }
   .input20px {width:20px; font-size:10px; }
   .textarea { background-color:#F7CE0D; color:Black; font-family:Courier; font-size:20px; }
  </style>
  <link rel="stylesheet" href="../web21thhome.css" />
  <link rel="stylesheet href" href="xsltforms/samples.css"/>
  <xf:model>
   <xf:instance>
    <ps:data>
     <ps:textarea>textarea cols="80" rows="20" class="xsltfDisplayV extarea"</ps:textarea>
     <!-- <![CDATA[truncated <t>Hello everybody & others</t>]]> -->
     <!-- <![CDATA[Textarea. &lt;a&gt;]]> lead to exception-->
     <!-- <ps:MyTextValue >Textarea &lt;a&gt;</ps:MyTextValue>-->
     <!-- uncaught exception: XML parser exception: endTag /ps:data not valid. MyTextValue -->
     <!-- Textarea data binding restriction to xs:string -->
     <ps:checkbox>true</ps:checkbox>
     <ps:selection type="xs:decimal"/>
     <ps:option type="xs:decimal"/>
     <ps:px300>three hundreds of pixels with red border</ps:px300>
     <ps:px20>20</ps:px20>
    </ps:data>
   </xf:instance>
   <xf:bind nodeset="ps:checkbox" type="xs:boolean"/>
  </xf:model>
  <script type="text/javascript">
  function displayElapse(){var p; if (p = document.getElementById('probeElapse')) {p.appendChild(document.createTextNode(probeElapse));}}
 </script>
 </head>
 <body onload="displayElapse();">
  <p style="display:none"><![CDATA[<Hidden>]]></p>
  <h1>Boxes &lt;boxes&gt;</h1>
  <p class="white">Elapsed time in js init: <span id="probeElapse"></span>
 </p>
  <div id="xformControl">
   <span>
    <input type="checkbox" onclick="$('console').style.display = this.checked? 'block' : 'none';"  checked="checked"/> Debug
   </span>
  </div>
  <xf:textarea ref="ps:textarea" cols="80" rows="20" class="xsltfDisplayV textarea">
   <xf:label>Label:</xf:label>
   <xf:hint>It is a textarea</xf:hint>
   <xf:help>
    Within a textarea
    You can enter
    several lines
    and also type chars as &lt; or &amp;
    nevermind W3C restriction of textarea content to type xs:string
    ...
   </xf:help>
  </xf:textarea>
  <xf:input ref="ps:checkbox" class="xsltfDisplayV">
   <xf:label>Boolean</xf:label>
  </xf:input>
  
  <xf:input class="xsltfDisplayV input300px" ref="ps:px300">
   <xf:label>px300</xf:label>
  </xf:input>
  <xf:input class="xsltfDisplayV input20px" ref="ps:px20">
   <xf:label>px20</xf:label>
  </xf:input>
  <fieldset>
   <legend>
    <b>Select clones</b>
   </legend>
   <table>
    <tr>
     <td>
      <xf:select ref="ps:selection" selection="closed" appearance="compact" incremental="true" class="xsltfDisplayV">
       <xf:label>Compact</xf:label>
       <xf:item>
        <xf:label>Arial</xf:label>
        <xf:value>0</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Verdana</xf:label>
        <xf:value>1</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Tahoma</xf:label>
        <xf:value>2</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Helvetica</xf:label>
        <xf:value>3</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Courier</xf:label>
        <xf:value>4</xf:value>
       </xf:item>
      </xf:select>
     </td>
     <td>
      <xf:select ref="ps:selection" selection="closed" appearance="minimal" incremental="true" class="xsltfDisplayV">
       <xf:label>Minimal</xf:label>
       <xf:item>
        <xf:label>Arial</xf:label>
        <xf:value>0</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Verdana</xf:label>
        <xf:value>1</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Tahoma</xf:label>
        <xf:value>2</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Helvetica</xf:label>
        <xf:value>3</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Courier</xf:label>
        <xf:value>4</xf:value>
       </xf:item>
      </xf:select>
     </td>
     <td>
      <xf:select ref="ps:selection" selection="closed" appearance="full" incremental="true" class="xsltfDisplayV" >
       <xf:label>Full</xf:label>
       <xf:item>
        <xf:label>Arial</xf:label>
        <xf:value>Arial</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Verdana</xf:label>
        <xf:value>Verdana</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Tahoma</xf:label>
        <xf:value>Tahoma</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Helvetica</xf:label>
        <xf:value>Helvetica</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Courier</xf:label>
        <xf:value>Courier</xf:value>
       </xf:item>
      </xf:select>
     </td>
     <td>
      <p>Font family: <xf:output ref="ps:selection"/></p>
     
     </td>
    </tr>
   </table>
  </fieldset>
  <fieldset>
   <legend><b>Select1 clones</b>
   </legend>
   <table>
    <tr>
     <td>
      <xf:select1 class="xsltfDisplayV" ref="ps:option" selection="closed" appearance="compact" incremental="true">
       <xf:label>Compact</xf:label>
       <xf:item>
        <xf:label>Arial</xf:label>
        <xf:value>0</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Verdana</xf:label>
        <xf:value>1</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Tahoma</xf:label>
        <xf:value>2</xf:value>
       </xf:item>
      </xf:select1>
     </td>
     <td>
      <xf:select1 class="xsltfDisplayV" ref="ps:option" selection="closed" appearance="minimal" incremental="true">
       <xf:label>Minimal</xf:label>
       <xf:item>
        <xf:label>Arial</xf:label>
        <xf:value>0</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Verdana</xf:label>
        <xf:value>1</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Tahoma</xf:label>
        <xf:value>2</xf:value>
       </xf:item>
      </xf:select1>
     </td>
     <td>
      <xf:select1 class="xsltfDisplayV" ref="ps:option" selection="open" appearance="full" incremental="true">
       <xf:label>Full</xf:label>
       <xf:item>
        <xf:label>Arial</xf:label>
        <xf:value>0</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Verdana</xf:label>
        <xf:value>1</xf:value>
       </xf:item>
       <xf:item>
        <xf:label>Tahoma</xf:label>
        <xf:value>2</xf:value>
       </xf:item>
      </xf:select1>
     </td>
     <td>
      <p>Font: <xf:output ref="ps:option"/></p>
     </td>
    </tr>
   </table>
  </fieldset>
  <fieldset>
   <legend>
    <b>Output</b>
   </legend>
   <!--<input type="text" class="input300px" value="300 pixels input with red border ?"/>
   <xf:input class="input300px">300 pixels input with red border ?</xf:input>-->
   <xf:output ref="ps:textarea">
    <xf:label><b>Textarea output: </b></xf:label>
   </xf:output>
   <xf:output ref="ps:checkbox">
    <xf:label><b>Boolean output: </b></xf:label>
   </xf:output>
  </fieldset>
  <div id="console" class="console"></div>
  <script type="text/javascript">
   var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
   document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
   try {
   var pageTracker = _gat._getTracker("UA-8805678-1");
   pageTracker._trackPageview();
   } catch(err) {}
  </script>
 </body>
</html>