Rich UI Tree および TreeTooltip

Rich UI tree ウィジェットでは、ツリー・ノードのセットを定義します。ツリー自体には、以下の 2 つのプロパティーが含まれています。
以下の規則は、ツリーまたはツリー・ノード (後述) のいずれかの動作に 関する規則です。

Tree 型および TreeNode 型 (ただし TreeTooltip は除く) との関連で、サポートされる他のプロパティーおよび関数は、『ウィジェットのプロパティーと関数』で説明されています。

ツリーを使用するには、次のステートメントが必要です。
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

Rich UI tree ウィジェットには、それぞれがタイプ TreeNode のウィジェットであるツリー・ノードのセットが含まれています。以下に、ツリー・ノード・プロパティーを示します。
  • text は、ノードについて表示される値です。
  • children は、従属ツリー・ノードを指す動的配列です。

TreeToolTip

ツリー・ツールチップは、『Rich UI ツールチップ』で説明されているウィジェットと同等です。ただし、この場合、プロバイダー関数はツリー・ノードを受け入れます。

次のセクションに示す例では、 ツリー・ツールチップを使用しています。

次に、ご使用のワークスペースで試すことができる例を示します。
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

フィードバック