XForms, Tree Menus

Motivation

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

Source Code

xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms">;

Hierarchial Tree Menu
href="tree.css" type="text/css" rel="stylesheet"/>
id="modelOI">
xmlns="" id="instanceData">

code="">
code=""/>
code=""/>

code="">
code=""/>
code=""/>
code=""/>

code="">
code=""/>
code=""/>

nodeset="Lot/@code" calculate="position()"/>
nodeset="Lot/Item/@code" calculate="position()"/>
xmlns="" id="instanceTemplate">

code="">
code=""/>

id="divMenu">
ref="/Data/currentLot">
current Lot :

ref="/Data/currentItem">
current Item :

nodeset="/Data/Lot" id="repeatLot">

href="#" id="aLot">
ref="@code">
lot

ev:event="DOMActivate" ev:observer="aLot">
ref="/Data/currentLot" value="/Data/Lot[index('repeatLot')]/@code"/>
ref="/Data/currentItem" value="'?'"/>
case="editCode"/>

nodeset="Item" id="repeatItem">

href="#" id="aItem">
ref="@code">
item

ref="."/>

ev:event="DOMActivate" ev:observer="aItem">
ref="/Data/currentLot" value="/Data/Lot[index('repeatLot')]/@code"/>
ref="/Data/currentItem" value="/Data/Lot[@code=/Data/currentLot]/ Item[position()=index('repeatItem')]/@code"/>
case="editItem"/>

Insert Lot at last
ev:event="DOMActivate">

nodeset="Lot" at="last()" position="after" origin="instance('instanceTemplate')/Lot"/>
ref="/Data/currentLot" value="count(/Data/Lot)"/>
ref="/Data/currentItem" value="/Data/ Lot[count(/Data/Lot)-1]/Item[last()]/@code + 1"/>

Insert Item at selected Lot
ev:event="DOMActivate">

nodeset="/Data/Lot[index('repeatLot')]/Item" at="index('repeatItem')" position="after" origin="instance('instanceTemplate')/Lot/Item"/>

class="divEdition">

id="editCode">
ref="/Data/Lot[@code=/Data/currentLot]">

Lot n° value="@code"/>

ref="@code">
code :

id="editItem">
ref="/Data/Lot[@code=/Data/currentLot]/Item[@code=/Data/currentItem]">

Item n° value="@code"/>

ref="@code">
item :

CSS

#divMenu {
float: left;
width:220px;
margin: 0 20px 0 10px;
}

#divMenu ul {
padding: 0 0 5px 5px;
}

#divMenu li{
color:#000000;
}

#divMenu li .xf-repeat-item {
}

#divMenu .xf-repeat-index {
font-weight: bold;

}

#divEdition {
float: left;
}

Acknowledgments

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

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.