Thursday, September 24, 2009

Tix and the Tree Widget

So I'm using Tix for my GUI work and have been exploring the wonderful world of Tix with an introduction to the Tix.Tree

It really is quite simple:


tree = Tix.Tree(master, options='seperator "."')
tree.pack(expand=1, fill=Tix.BOTH, padx=10, pady=10, side=Tix.LEFT)

#fill the tree with our values
tree.hlist.add('one', text='one')
tree.hlist.add('two', text='two')
tree.hlist.add('two.three',text='three')
tree.hlist.add('two.four',text='four')


which will give us this:



Great first pass, lets deconstruct the code:

tree = Tix.Tree(master, options='seperator "."')


The first parameter is the parent window just like all the Tk widgets but options has the seperator keyword which is what is used to parse the strings and create the hierarchical style we are looking for. The following lines are self-explanatory; we are merely creating a list of items where the item 'two' has two other children; two.three and two.four

You tell me, "Pretty simple, dude! But what about the rest of the candy?"
How do we define columns and how do you collapse and expand nodes just like we do in all the file explorers?

First question, how do we set up the columns and headers?

The columns and header information gets passed to the Tree control like so:
Tix.Tree(rootWindow, options='hlist.columns 5 hlist.header 1 seperator "."')

To define them properly we need to digress a little and talk about styles;
styles are a Tix construct that allows you to define a tag which you can impose on any widget's text. This can be defined to include the color, font, padding and other display attributes.
tree.tk.call('tix', 'configure', '-fontset', 'WmDefault')
boldfont=tree.tk.call('tix','option','get','bold_font')
style={}
style['header'] = Tix.DisplayStyle(Tix.TEXT,refwindow=tree.hlist, anchor=Tix.CENTER,padx=8,pady=2,font=boldfont)
The first line is to fix the bug with the windows port of Tix, the subsequent lines are the real meat and potatoes of the style mechanism; we create a dictionary of styles, define a header style with a bold font.

Once this is completed we can define our headers to have the 'header' style; like so:
tree.hlist.header_create(0,itemtype=Tix.TEXT, text='Position',style=style['header'])
tree.hlist.header_create(1,itemtype=Tix.TEXT, text='HostName',style=style['header'])


This takes care of the headers,defining the column width is done like so:
tree.hlist.column_width(0, chars=10)
tree.hlist.column_width(1, chars=20)


The last thing we are interested in is the means to collapse and expand the nodes.This is relatively simple in that the individual nodes and can be defined to have that functionality by calling the setmode on the node entry; if that entry has children, the node will be able to be collapsed or expanded. If the setmode command has not been run on a node with children, it will not have the box icon that controls the expansion/collapse mechanism.

tree.setmode(nodeElement, 'open')


So in the end you can get this:

1 comment:

  1. Thanks for tut.. I really didn't wanted to RTFM..
    But i am still pretty much confused with expanding and collapsing

    ReplyDelete