<?xml-stylesheet href="../forms/xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
>
<head>
   <title>Trigger style</title>

   <style type="text/css">
      body { font-family: sans-serif}
      label { display: inline-block; width: 3em; margin: 0 1em; text-align: right }
      .xforms-repeat-item-selected { background: yellow}
   </style> 

   <model xmlns="http://www.w3.org/2002/xforms">
      <instance><data xmlns=""><name>John Smith</name></data></instance>
   </model>
</head>
<body>
   <switch xmlns="http://www.w3.org/2002/xforms">
      <case id="showName">
	 <trigger appearance="minimal">
	    <label>Name: <output ref="name"/></label>
	    <toggle case="editName" ev:event="DOMActivate"/>
	 </trigger>
      </case>
      <case id="editName">
	 <input ref="name">
	    <label>Name:</label>
	    <toggle case="showName" ev:event="DOMFocusOut"/>
	 </input>
      </case>
   </switch>
</body>
</html>
