XForms/Tree Menus

Motivation
You want to have a menu that allows you to navigate a tree hierarchy of editable items.

Source Code
       current Lot :    current Item :     <li> <a href="#" id="aLot"> <xf:output ref="@code"> <xf:label>lot </xf:label> </xf:output> </a> <xf:action ev:event="DOMActivate" ev:observer="aLot"> <xf:setvalue ref="/Data/currentLot" value="/Data/Lot[index('repeatLot')]/@code"/> <xf:setvalue ref="/Data/currentItem" value="'?'"/> <xf:toggle case="editCode"/> </xf:action> <ul> <xf:repeat nodeset="Item" id="repeatItem"> <li> <a href="#" id="aItem"> <xf:output ref="@code"> <xf:label>item </xf:label> </xf:output> <xf:output ref="."/> </a> <xf:action ev:event="DOMActivate" ev:observer="aItem"> <xf:setvalue ref="/Data/currentLot" value="/Data/Lot[index('repeatLot')]/@code"/> <xf:setvalue ref="/Data/currentItem" value="/Data/Lot[@code=/Data/currentLot]/ Item[position=index('repeatItem')]/@code"/> <xf:toggle case="editItem"/> </xf:action> </li> </xf:repeat> </ul> </li> </xf:repeat> </ul> <xf:trigger> <xf:label>Insert Lot at last</xf:label> <xf:action ev:event="DOMActivate"> <xf:rebuild/> <xf:recalculate/> <xf:refresh/> <xf:insert nodeset="Lot" at="last" position="after" origin="instance('instanceTemplate')/Lot"/> <xf:setvalue ref="/Data/currentLot" value="count(/Data/Lot)"/> <xf:setvalue ref="/Data/currentItem" value="/Data/ Lot[count(/Data/Lot)-1]/Item[last]/@code + 1"/> <xf:rebuild/> <xf:recalculate/> <xf:refresh/> </xf:action> </xf:trigger> <xf:trigger> <xf:label>Insert Item at selected Lot</xf:label> <xf:action ev:event="DOMActivate"> <xf:rebuild/> <xf:recalculate/> <xf:refresh/> <xf:insert nodeset="/Data/Lot[index('repeatLot')]/Item" at="index('repeatItem')" position="after" origin="instance('instanceTemplate')/Lot/Item"/> <xf:rebuild/> <xf:recalculate/> <xf:refresh/> </xf:action> </xf:trigger> <xf:switch> <xf:case id="editCode"> <xf:group ref="/Data/Lot[@code=/Data/currentLot]"> Lot n°<xf:output value="@code"/> <xf:input ref="@code"> <xf:label>code : </xf:label> </xf:input> </xf:group> </xf:case> <xf:case id="editItem"> <xf:group ref="/Data/Lot[@code=/Data/currentLot]/Item[@code=/Data/currentItem]"> Item n°<xf:output value="@code"/> <xf:input ref="@code"> <xf:label>item : </xf:label> </xf:input> </xf:group> </xf:case> </xf:switch>

Acknowledgments
This example was contributed to the Mozilla XForms Newsgroup by Andy Bailey on Apr 24 2008.