Rich UI tree and treeTooltip

A Rich UI tree widget defines a set of tree nodes. The tree has two properties:
The following rules relate to the behaviors of either a tree or a tree node:

For information about other supported properties and functions, see "Widget properties and functions."

If you use a tree widget, you must use the following statements:
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

The Rich UI tree widget includes a set of tree nodes, each of which is a widget of type TreeNode. The tree-node uses two properties:
  • text is the value displayed for the node.
  • children is a dynamic array that points to the subordinate tree nodes.

TreeToolTip

The tree tooltip is equivalent to the widget that is described in "Rich UI tooltip." In this case, the provider function accepts a tree node.

The example in the next section shows use of a tree tooltip.

Example

You can try this example in your workspace:
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 MyTreeExample 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