The Tree (Drill-Down) Widget

The tree widget from the BWidget package is useful for displaying hierarchical information. Because it can be drilled-down or drilled-up it can be a way to save space in a user-interface while still providing the user with all of the information that they need.

In the example below, we create a simple tree with four records (nodes), each containing two child nodes ("Name" and "Age"), each of which contains one child node, (the corresponding value for its parent node).

require(tcltk)
tclRequire("BWidget")

tt <- tktoplevel()
tkwm.title(tt,"Tree (Drill-Down) Widget")

xScr       <- tkscrollbar(tt,command=function(...)tkxview(treeWidget,...),orient="horizontal")
yScr       <- tkscrollbar(tt,command=function(...)tkyview(treeWidget,...))
treeWidget <- tkwidget(tt,"Tree",xscrollcommand=function(...)tkset(xScr,...),
                                 yscrollcommand=function(...)tkset(yScr,...),width=30,height=15)
tkgrid(treeWidget,yScr)
tkgrid.configure(yScr,stick="nsw")
tkgrid(xScr)
tkgrid.configure(xScr,stick="new")

# Insert at the end of the nodes in "root" a new node, called
# "Record1Node", which displays the text "Record 1", etc.
tkinsert(treeWidget,"end","root","Record1Node",text="Record 1")
tkinsert(treeWidget,"end","root","Record2Node",text="Record 2")
tkinsert(treeWidget,"end","root","Record3Node",text="Record 3")
tkinsert(treeWidget,"end","root","Record4Node",text="Record 4")

tkinsert(treeWidget,"end","Record1Node","Name1Node",text="Name")
tkinsert(treeWidget,"end","Record2Node","Name2Node",text="Name")
tkinsert(treeWidget,"end","Record3Node","Name3Node",text="Name")
tkinsert(treeWidget,"end","Record4Node","Name4Node",text="Name")

tkinsert(treeWidget,"end","Record1Node","Age1Node",text="Age")
tkinsert(treeWidget,"end","Record2Node","Age2Node",text="Age")
tkinsert(treeWidget,"end","Record3Node","Age3Node",text="Age")
tkinsert(treeWidget,"end","Record4Node","Age4Node",text="Age")

tkinsert(treeWidget,"end","Name1Node","Name1Val",text="Fred")
tkinsert(treeWidget,"end","Name2Node","Name2Val",text="Jane")
tkinsert(treeWidget,"end","Name3Node","Name3Val",text="Tim")
tkinsert(treeWidget,"end","Name4Node","Name4Val",text="Alex")

tkinsert(treeWidget,"end","Age1Node","Age1Val",text="14")
tkinsert(treeWidget,"end","Age2Node","Age2Val",text="35")
tkinsert(treeWidget,"end","Age3Node","Age3Val",text="63")
tkinsert(treeWidget,"end","Age4Node","Age4Val",text="52")

The tree can be drilled down as follows:

Determining the Currently Selected Node

An item in the tree can be selected by clicking with the mouse:

To find out which node is currently selected, use:

tclvalue(tkcmd(treeWidget,"selection","get"))
[1] "Age2Val"

Deleting A Node

To delete a node (and all of its children), use:

tkdelete(treeWidget,"Age1Node")

Now the age has been deleted from the first record:

Images

The tree widget can also be used to display images, by using the image option in tkinsert instead of the text option (not shown). To learn how to create images from external image files, click here.