Rich UI Tree および TreeTooltip
Rich UI tree ウィジェットでは、ツリー・ノードのセットを定義します。ツリー自体には、以下の 2 つのプロパティーが含まれています。
- children は、従属ツリー・ノードを指す動的配列です。
- behaviors は、関数参照の配列です。
ノードをツリーに追加すると、参照される関数が配列要素の順に実行され、各関数はノードの特性を更新できます。これらの関数は、スタイルの特性を設定でき、ノードの表示または非表示などのアクションを実行できます。
tree ウィジェットの behaviors フィールドにリストされたそれぞれの関数について、パラメーター・リストは次の委譲パーツと一致する必要があり、関数は値を戻すことはできません。
Delegate TreeNodeBehavior(node TreeNode) endRich UI には、behaviors プロパティーで参照できる関数が多数用意されています。 詳細については、com.ibm.egl.rui プロジェクトの EGLSource フォルダーの com.ibm.egl.rui.widgets パッケージにある以下のファイルを参照してください。- TreeBehaviors.egl
- TreeToolTip.egl
以下の規則は、ツリーまたはツリー・ノード (後述) のいずれかの動作に
関する規則です。
- children プロパティーまたは initialUI プロパティーで参照されるウィジェットを除き、Rich UI では、値の参照に先立ってその値を宣言する必要があります。 behaviors プロパティーでツリー宣言やツリー・ノード宣言の外部にある配列を参照する場合は (例えば、この例)、その配列を宣言より前に指定する必要があります。
- ツリーまたはツリー・ノードを宣言する場合は、必ず behaviors プロパティーを最初にリストしてください。具体的には、children プロパティーの前です。
- 関数でのステートメントの記述時に、behaviors プロパティーの値を変更する場合は、ウィジェットをリセットするために、ツリー固有 (またはツリー・ノード固有) の関数である layouts() を呼び出します。
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