Dieses Beispiel zeigt die Verwendung der Klasse "node" um einen Baum aufzubauen. Dieses UI kennt keine Baum-Klasse, der einzelne Knoten hinzugefügt würden. Der Baum entsteht allein aus der Verschachtelung der Knoten-Objekte. Hierbei gibt es 2 Möglichkeiten der Darstellung, einmal auf der linken Seite (Textfluss des "Lables" ist von rechts nach links) und auf der rechten Seite (Textfluss des "Lables" ist von links nach rechts). Die Knoten der beiden Bäume können per "Drag und Drop" ausgetauscht werden.
Beispiel:
Skript:
var n=app.newObject("node",{lable:"Nodes left",size:{height:"fit"}})
n.addLastChild("node",{lable:"Subnode 1"})
n.addLastChild("node",{lable:"Subnode 2"})
var n2=n.addLastChild("node",{lable:"Subnode 3",closable:{closed:true}})
n2.addLastChild("node",{lable:"Subnode 3.1"})
n2.addLastChild("node",{lable:"Subnode 3.2"})
n2.addLastChild("node",{lable:"Subnode 3.3"})
n2.addLastChild("node",{lable:"Subnode 3.4"})
n2.addLastChild("node",{lable:"Subnode 3.5"})
n2=n.addLastChild("node",{lable:"Subnode 4"})
n2.addLastChild("node",{lable:"Subnode 4.1"})
n2.addLastChild("node",{lable:"Subnode 4.2"})
n2.addLastChild("node",{lable:"Subnode 4.3"})
n2.addLastChild("node",{lable:"Subnode 4.4"})
n2.addLastChild("node",{lable:"Subnode 4.5"})
n2=n.addLastChild("node",{lable:"Subnode 5"})
n2.addLastChild("node",{lable:"Subnode 5.1"})
n2.addLastChild("node",{lable:"Subnode 5.2"})
n2.addLastChild("node",{lable:"Subnode 5.3"})
n2.addLastChild("node",{lable:"Subnode 5.4"})
var n3=n2.addLastChild("node",{lable:"Subnode 5.5"})
n3.addLastChild("node",{lable:"Subnode 5.5.1"})
n3.addLastChild("node",{lable:"Subnode 5.5.2"})
n3.addLastChild("node",{lable:"Subnode 5.5.3"})
n3.addLastChild("node",{lable:"Subnode 5.5.4"})
n3.addLastChild("node",{lable:"Subnode 5.5.5"})
n.addLastChild("node",{lable:"Subnode 6"})
n.addLastChild("node",{lable:"Subnode 7"})
n.addLastChild("node",{lable:"Subnode 8"})
n=app.newObject("node",{lable:"Nodes right",size:{height:"fit"},treePosition:"right"})
n.addLastChild("node",{lable:"Subnode 1"})
n.addLastChild("node",{lable:"Subnode 2"})
n2=n.addLastChild("node",{lable:"Subnode 3",closable:{closed:true}})
n2.addLastChild("node",{lable:"Subnode 3.1"})
n2.addLastChild("node",{lable:"Subnode 3.2"})
n2.addLastChild("node",{lable:"Subnode 3.3"})
n2.addLastChild("node",{lable:"Subnode 3.4"})
n2.addLastChild("node",{lable:"Subnode 3.5"})
n2=n.addLastChild("node",{lable:"Subnode 4"})
n2.addLastChild("node",{lable:"Subnode 4.1"})
n2.addLastChild("node",{lable:"Subnode 4.2"})
n2.addLastChild("node",{lable:"Subnode 4.3"})
n2.addLastChild("node",{lable:"Subnode 4.4"})
n2.addLastChild("node",{lable:"Subnode 4.5"})
n2=n.addLastChild("node",{lable:"Subnode 5"})
n2.addLastChild("node",{lable:"Subnode 5.1"})
n2.addLastChild("node",{lable:"Subnode 5.2"})
n2.addLastChild("node",{lable:"Subnode 5.3"})
n2.addLastChild("node",{lable:"Subnode 5.4"})
n3=n2.addLastChild("node",{lable:"Subnode 5.5"})
n3.addLastChild("node",{lable:"Subnode 5.5.1"})
n3.addLastChild("node",{lable:"Subnode 5.5.2"})
n3.addLastChild("node",{lable:"Subnode 5.5.3"})
n3.addLastChild("node",{lable:"Subnode 5.5.4"})
n3.addLastChild("node",{lable:"Subnode 5.5.5"})
n.addLastChild("node",{lable:"Subnode 6"})
n.addLastChild("node",{lable:"Subnode 7"})
n.addLastChild("node",{lable:"Subnode 8"})