<?xml version="1.0" encoding="ISO-8859-1"?>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:html="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://www.w3.org/1999/xhtml" 
    xmlns:xforms="http://www.w3.org/2002/xforms" 
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:my="test">
	<head>
		<link rel="stylesheet" type="text/css" href="../xformsdemo.css" />
        <style type="text/css">
            input,tree,tree::value,tree label,textarea::value ,input::value{display:block;}
            textarea,input {display:block;}
            input::value {width: 200px;}
            input label {width:200px;}
            tree{background-color:white;border-style:solid;}
            tree {overflow:scroll;height:380px;width:300px;}
            div.editor {padding-left:10px;}
            textarea::value {background-color:white;width:300px;height:300px;}
            group.nodeview label, group.nodeview output {display:inline;font-size:9pt;}
            *:disabled {display:none;visibility:hidden ;}
            </style>
		<xforms:model id="form1">
			<xforms:submission id="submission1" method="put" action="./data.xhtml" replace="none"/>
			<xforms:submission id="submission2" method="post" action="http://sinex.tml.hut.fi:8080/xforms/request"/>
			<xforms:instance id="folderdata" xmlns="" src="data.xhtml"/>
			<xforms:instance id="clip" xmlns="">
				<data>
					<ui><hasdata/></ui>
					<copy></copy>
				</data>
			</xforms:instance>
			<xforms:instance id="quick" xmlns="">
				<data>
					<h1>Header</h1>
					<div><p>Text</p></div>
					<p>Paragraph</p>
					<a href="http://www.google.com">Link text</a>
				</data>
			</xforms:instance>
			<xforms:instance id="prototypes" xmlns="" src="templates.xhtml"/>
			<xforms:bind nodeset="instance('clip')/ui/hasdata" readonly="count(instance('clip')/copy/*)&lt;1"/>
		</xforms:model>
	</head>
<body>

<p class="headline">XHTML editor in XForms using the tree extension widget</p>
<xf:submit submission="submission1">
    <xf:label>Save</xf:label>
    </xf:submit>
    <a href="data.xhtml" target="new">Preview</a>
    <p>Edit folders and files with this xforms extension: tree</p>
<table>
    <tr>
        <td>
<xf:tree ref="/h:html/h:body" prune="true" id="folders">
    <xf:label>The document structure</xf:label>
    <xf:item><xf:label ref="concat(concat(local-name(.),' - '),text())"/></xf:item>
</xf:tree>
</td>
<td>
    <div class="editor">
<xf:group ref="nodeindex('folders')" class="nodeview">
    	<xf:label>Current node:</xf:label> :
    	<xf:output value="local-name(.)"/>
    </xf:group>
<xf:textarea ref="nodeindex('folders')">
    	<xf:label>Edit content</xf:label>
    </xf:textarea>
<xf:input ref="nodeindex('folders')/@href">
    	<xf:label>href</xf:label>
    </xf:input>
    <div class="editor">
    </div>
    </div>
    </td>
    </tr>
    </table>
    <div>ADD - 
    	<xf:trigger>
    		<xf:label>h1</xf:label>
    		<xf:duplicate ref="nodeindex('folders')/.." origin="instance('quick')//h1" before="nodeindex('folders')" ev:event="DOMActivate"/>
    	</xf:trigger>
    	<xf:trigger>
    		<xf:label>p</xf:label>
    		<xf:duplicate ref="nodeindex('folders')/.." origin="instance('quick')//p" before="nodeindex('folders')" ev:event="DOMActivate"/>
    	</xf:trigger>
    	<xf:trigger>
    		<xf:label>link</xf:label>
    		<xf:duplicate ref="nodeindex('folders')/.." origin="instance('quick')//a" before="nodeindex('folders')" ev:event="DOMActivate"/>
    	</xf:trigger>
    	<xf:trigger>
    		<xf:label>div</xf:label>
    		<xf:duplicate ref="nodeindex('folders')/.." origin="instance('quick')//div" before="nodeindex('folders')" ev:event="DOMActivate"/>
    	</xf:trigger>
    </div>
    <div>
    </div>
    <div>
    	<xf:trigger>
    		<xf:label>Cut</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:destroy ref="instance('clip')/copy/*"/>
	    		<xf:duplicate ref="instance('clip')/copy" origin="nodeindex('folders')"/>
	    		<xf:destroy ref="nodeindex('folders')"/>
    		</xf:action>
    	</xf:trigger>
    	<xf:trigger>
    		<xf:label>Copy</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:destroy ref="instance('clip')/copy/*"/>
	    		<xf:duplicate ref="instance('clip')/copy" origin="nodeindex('folders')"/>
    		</xf:action>
    	</xf:trigger>
    	<xf:trigger ref="instance('clip')/ui/hasdata">
    		<xf:label>Paste</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:duplicate origin="instance('clip')/copy/*" ref="nodeindex('folders')/.." before="nodeindex('folders')"  />
	    		<xf:destroy ref="instance('clip')/copy/*"/>
    		</xf:action>
    	</xf:trigger>
    	<xf:trigger>
    		<xf:label>Duplicate</xf:label>
    		<xf:duplicate ref="nodeindex('folders')/.." origin="nodeindex('folders')" before="nodeindex('folders')" ev:event="DOMActivate"/>
    	</xf:trigger>
    </div>
    <div>
    	<xf:trigger id="msgtrigger">
    		<xf:label>Copy From Template</xf:label>
    		<xf:message ev:event="DOMActivate" level="modal" ev:target="msgtrigger">
    			<h1>Select a template</h1>
				<xf:tree ref="instance('prototypes')/h:body" prune="true" id="templatetree">
				    <xf:label>Select a template</xf:label>
				    <xf:item><xf:label ref="concat(concat(local-name(.),' - '),text())"/></xf:item>
				</xf:tree>
	    	<xf:trigger>
	    		<xf:label>Copy</xf:label>
	    		<xf:action ev:event="DOMActivate">
		    		<xf:destroy ref="instance('clip')/copy/*"/>
		    		<xf:duplicate ref="instance('clip')/copy" origin="nodeindex('templatetree')"/>
	    		</xf:action>
	    	</xf:trigger>
    		</xf:message>
    	</xf:trigger>
    </div>
</body>
</html>

