Rich UI Tree and TreeTooltip

A Rich UI tree widget defines a set of tree nodes. The tree itself has two properties:

children is a dynamic array that points to the subordinate tree nodes.
behaviors is an array of function references. When a node is added to the tree, the referenced functions run in array-element order, Each function can update node characteristics. Those functions can set style characteristics and can perform actions such as showing or hiding the node.
For each function listed in the behaviors fields of a tree widget, the parameter list must match the following Delegate part, and the function must not return a value:
```
Delegate TreeNodeBehavior(node TreeNode) end
```
Rich UI provides a number of functions that can be referenced in the behaviors property. For details, see the following files in the com.ibm.egl.rui project, EGLSource folder, com.ibm.egl.rui.widgets package:
- TreeBehaviors.egl
- TreeToolTip.egl

The following rules relate to the behaviors of either a tree or (as noted later) a tree node:

Except in the case of the referenced widgets in children or initialUI properties, Rich UI requires that you declare a value before you reference it. If the behaviors property refers to an array external to the tree or tree node declaration (as in our example), that array must be specified before the declaration.
When you declare a tree or tree node, ensure that you list the behaviors property first; in particular, before the children property.
If, when writing statements in functions, you change the value of the behaviors property, invoke the tree-specific (or tree-node-specific) function layouts() to reset the widget.

In relation to the types Tree and TreeNode (but not TreeTooltip), other supported properties and functions are described in “Widget properties and functions.”

Use of a tree requires 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. Here are the tree-node 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 described in Rich UI tooltip. However, in this case, the provider function accepts a tree node.

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

Example

Here is an example that you can try 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 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