Rich-UI-Widget 'Tree' und 'TreeTooltip'

Ein Rich-UI-Widget 'Tree' (Baumstruktur) definiert eine Gruppe von Baumknoten. Die Baumstruktur selbst hat zwei Eigenschaften:
Die folgenden Regeln beziehen sich auf die Verhalten einer Baumstruktur oder (wie später erläutert) eines Baumknotens:

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

Feedback