<?xml-stylesheet href="../xsltforms/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="textarea"</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</ps:px300>
     <ps:px20>20px</ps:px20>
    </ps:data>
   </xf:instance>
   <xf:bind nodeset="ps:checkbox" type="xs:boolean"/>
  </xf:model>
 </head>
 <body>
  <p style="display:none"><![CDATA[<Hidden>]]></p>
  <h1>Boxes &lt;boxes&gt;</h1>
  <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="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">
   <xf:label>Boolean</xf:label>
  </xf:input>
  
  <xf:input class="input300px" ref="ps:px300">
   <xf:label>px300</xf:label>
  </xf:input>
  <xf:input class="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">
       <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:select>
     </td>
     <td>
      <xf:select ref="ps:selection" 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:select>
     </td>
     <td>
      <xf:select ref="ps:selection" selection="closed" 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:select>
     </td>
    </tr>
   </table>
  </fieldset>
  <fieldset>
   <legend>
    <b>Select1 clones</b>
   </legend>
   <table>
    <tr>
     <td>
      <xf:select1 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 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 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>
    </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:MyTextValueForTextarea">
    <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>
 </body>
</html>