Rich UI 트리 및 TreeTooltip
Rich UI 트리 위젯은 트리 노드 세트를 정의합니다. 트리에는 두 개의 특성이 있습니다.
- children은 종속 트리 노드를 가리키는 동적 배열입니다.
- behaviors는 함수 참조의 배열입니다.
노드가 트리에 추가되면 참조된 함수가 배열 요소 순서로 실행됩니다. 각 함수는 노드 특성을 업데이트할 수 있습니다.
해당 함수는 스타일 특성을 설정할 수 있으며, 노드 표시 또는 숨기기와 같은 조치를 수행할 수 있습니다.
트리 위젯의 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()를 호출하여 위젯을 재설정하십시오.
트리와 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 트리 위젯에는 트리 노드 세트가 필요합니다. 각 트리 노드는
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 endend