Rich-UI-Widget 'Tree' und 'TreeTooltip'
Ein Rich-UI-Widget 'Tree' (Baumstruktur) definiert eine Gruppe von Baumknoten. Die Baumstruktur selbst
hat zwei Eigenschaften:
- children: Diese Eigenschaft ist eine dynamische Feldgruppe, die auf die untergeordneten Baumknoten verweist.
- behaviors: Diese Eigenschaft ist eine Feldgruppe von Funktionsreferenzen.
Wenn ein Knoten der Baumstruktur hinzugefügt wird, werden die referenzierten Funktionen in der Reihenfolge
der Feldgruppenelemente ausgeführt. Jede Funktion kann Knotenmerkmale aktualisieren.
Diese Funktionen können Stilmerkmale festlegen und Aktionen wie zum Beispiel das Einblenden oder
Ausblenden eines Knotens ausführen.
Für jede in den Feldern behaviors eines Baumstrukturwidgets aufgeführte Funktion muss die Parameterliste dem folgenden Stellvertreterabschnitt ('Delegate') entsprechen und die Funktion darf keinen Wert zurückgeben:
Delegate TreeNodeBehavior(node TreeNode) endRich-UI stellt eine Reihe von Funktionen bereit, auf die in der Eigenschaft behaviors verwiesen werden kann. Details finden Sie in den folgenden Dateien im Paket 'com.ibm.egl.rui.widgets' im Ordner 'EGLSource' des Projekts 'com.ibm.egl.rui':- TreeBehaviors.egl
- TreeToolTip.egl
Die folgenden Regeln beziehen sich auf die Verhalten einer Baumstruktur oder (wie später erläutert)
eines Baumknotens:
- Mit Ausnahme der Widgets, auf die in den Eigenschaften children oder initialUI verwiesen wird, erfordert Rich-UI, dass ein Wert deklariert wird, bevor auf ihn verwiesen wird. Wenn sich die Eigenschaft behaviors auf eine Feldgruppe außerhalb der Baumstruktur- oder Baumknotendeklaration (wie im vorliegenden Beispiel) bezieht, muss diese Feldgruppe vor der Deklaration angegeben werden.
- Stellen Sie beim Deklarieren einer Baumstruktur oder eines Baumknotens sicher, dass Sie die Eigenschaft behaviors zuerst, das heißt insbesondere, vor der Eigenschaft children, aufführen.
- Wenn Sie beim Schreiben von Anweisungen in Funktionen den Wert der Eigenschaft behaviors ändern, rufen Sie die baumstrukturspezifische (bzw. baumknotenspezifische) Funktion layouts() auf, um das Widget zurückzusetzen.
In Bezug auf die Typen 'Tree' und 'TreeNode' (jedoch nicht 'TreeTooltip') werden weitere unterstützte Eigenschaften und Funktionen im Abschnitt “Widgeteigenschaften und Widgetfunktionen” beschrieben.
Zur Verwendung des Widgets 'Tree' sind die folgenden Anweisungen erforderlich:
import com.ibm.egl.rui.widgets.Tree;
import com.ibm.egl.rui.widgets.TreeBehaviors;
import com.ibm.egl.rui.widgets.TreeNode;
import com.ibm.egl.rui.widgets.TreeToolTip;
TreeNode
Das Rich-UI-Widget 'Tree' enthält eine Gruppe von Baumknoten,
bei denen es sich jeweils um ein Widget vom Typ 'TreeNode' handelt. Ein Baumknoten hat die folgenden Eigenschaften:
- text: Diese Eigenschaft enthält den Wert, der für den Knoten angezeigt wird.
- children: Diese Eigenschaft ist eine dynamische Feldgruppe, die auf die untergeordneten Baumknoten verweist.
TreeToolTip
Das Widget 'TreeTooltip' ist äquivalent zu dem Widget, das in Rich-UI-Widget 'Tooltip' beschrieben wird. Allerdings akzeptiert hier die Providerfunktion einen Baumknoten.
Das Beispiel im nächsten Abschnitt zeigt die Verwendung eines Widgets 'TreeTooltip'.
Beispiel
Das folgende Beispiel können Sie in Ihrem Arbeitsbereich ausprobieren:
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextArea;
import com.ibm.egl.rui.widgets.TextLabel;
import com.ibm.egl.rui.widgets.TreeNode;
import com.ibm.egl.rui.widgets.TreeNodeBehavior;
import com.ibm.egl.rui.widgets.TreeTooltip;
import egl.ui.rui.Event;
handler MyHandler type RUIhandler {initialUI = [ myBox1 ]}
myBox1 Box{ backgroundColor = "yellow", padding=8, columns = 1,
children = [ myTextArea, myTree ] };
myTextArea TextArea {numRows = 5, numColumns = 50,
text = " This tree shows 2 children, each with 2 children."};
myTreeNodeA TreeNode{backgroundColor = "cyan",text="Child 1",
children =[myTreeNode1, myTreeNode2] };
myTreeNode1 TreeNode{backgroundColor = "lightblue",text="Gchild 1-1" };
myTreeNode2 TreeNode{backgroundColor = "lightgreen",text="Gchild 1-2" };
myTreeNodeB TreeNode{backgroundColor = "orange", text="Child 2",
children =[myTreeNode3,
new TreeNode{backgroundColor = "burlywood", text = "Gchild 2-2"}] };
myTreeNode3 TreeNode{backgroundColor = "lightpink", text="Gchild 2-1" };
myBehaviors TreeNodeBehavior[] = [ click, tooltip.setTooltips ];
myTree Tree{backgroundColor = "lavender", behaviors = myBehaviors,
children =[myTreeNodeA, myTreenodeB]};
tooltip TreeTooltip { provider = showTooltip, tooltip.delay = 1000 };
function click(node TreeNode in)
node.span.cursor = "pointer";
node.onClick ::= handleNodeClick;
node.onMouseOver ::= showFeedback;
node.onMouseOut ::= hideFeedback;
end
function showTooltip(node TreeNode) returns(Box)
tooltipText TextLabel { };
tooltipResponse Box { children = [ tooltipText ] };
tooltipText.text = "Tooltip for " + node.text;
return (tooltipResponse);
end
function showFeedback(e Event in)
node TreeNode = e.widget;
color any = node.backgroundColor;
node.setAttribute("originalBG", color);
node.span.backgroundColor = "yellow";
end
function hideFeedback(e Event in)
node TreeNode = e.widget;
node.span.backgroundColor = node.getAttribute("originalBG");
end
function handleNodeClick(e Event in)
node TreeNode = e.widget;
if (node.span.color == "red")
node.span.color = "black";
node.span.fontWeight = "normal";
else
node.span.color = "red";
node.span.fontWeight = "bold";
end
end
end