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) end
    Rich-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