An Introduction to Tix

1
An Introduction to Tix

• Ioi Lam
• Expert Interface Technologies
• http//tix.sourceforge.net

2
Introduction

• The Tix extension for Tcl/Tk
• OOP framework for megawidget development.
• 40 new widget classes, mostly written in TCL.
• utility procedures new geometry managers.
• Advantages
• More widgets more interesting ways to interact
  with user.
• Use pre-packaged megawidgets and reduce
  development time.
• Write your own widgets to reuse code.
• Runs on MS Windows and Unix.

3
Outline

• Widgets in Tix
• Basic Tix widgets.
• Tabular Listbox.
• Hierarchical Listbox.
• File selection widgets.
• Manager widgets.
• Writing new megawidgets.
• Status of Tix.
• Conclusions.

4
Creating Tix Widgets

• Same syntax as the TK widgets
• tixControl .c -label Number -integer true \
• -min 0 -max 100
• pack .c
• .c configure -value 50

5
Event Handling

• Two stage interactions
• Browsing
• Commitment
• Example
• Watch movie previews
• Select a movie
• How to handle these events effectively?

6
High-level Event Handling

• The TK bind command deals with low level events.
• Tix provides a high level interface for handling
  user events
• Less coding
• Portable
• There is usually no need to creating low level
  bindings for Tix widgets.

7
Handling User Input

• Most Tix widgets use these options to handle user
  input
• -value value of widget
• -variable variable to store value
• -command proc to call when value changes
• -browsecmd proc to call when user is browsing
• -validatecmd proc that verifies user input

8
High-level Event Handling

• Tix
• tixScrolledListBox .list \
• -browsecmd Browse \
• -command Invoke
• proc Browse
• puts browsing \
• tixEvent value

• Low-level binding
• listbox .list
• bind .list lt1gt ...
• bind .list ltDouble-1gt ...
• bind .list ltUpgt ...
• bind .list ltDowngt ...
• bind .list ltB1-Motiongt ...
• ...
• ...

9
Handling User Input Example

• Creating a TixControl widget that accepts
  value
• tixControl .c -variable pcnt -value 100 \
• -validatecmd Validate -command Cmd
• proc Validate v
• regsub v v
• if catch set v expr int(v)
• set v 100
• return v
• proc Cmd v puts you have selected v

10
Details of Events

• tixEvent type the event that triggers the
  binding, e.g., lt1gt, ltDouble-1gt or ltApplicationgt.
• tixEvent value the value associated with an
  event, usually the value currently selected by
  the user.
• Example my browsecmd gets called twice
• tixScrolledListBox .list -browsecmd Browse
• proc Browse
• if tixEvent type ! ltButtonRelease-1gt
• puts browsing tixEvent value

11
Subwidgets

• Tix megawidgets are composed of subwidgets.

incr
decr
label
entry

• Each subwidget is identified by a subwidget name,
  e.g., label or entry.
• The subwidget command accesses subwidgets by name
• w subwidget entry Returns pathname of
  subwidget.
• w subwidget entry insert ... Calls widget
  command of subwidget.

12
Configuring Subwidgets

• Use the subwidget command
• .foo subwidget entry configure -borderwidth 6
• Use the TK options database
• option add fooentry.borderWidth 6
• tixControl .foo
• Use the -options switch during widget creation
• tixControl .foo -options
• entry.borderWidth 6

13
Lining up TixControl Widgets

• option add TixControllabel.width 7
• option add TixControllabel.anchor e
• option add TixControlentry.width 8
• tixControl .c1 -label Height
• tixControl .c2 -label Width
• tixControl .c3 -label Depth

14
Subwidgets

• Chaining the subwidget command for more than one
  level of subwidgets
• pack forget fdialog subwidget btns subwidget
  help

15
ComboBox

• TixComboBox entry listbox.
• The -dropdown option
• Inserting elements
• tixComboBox .c -dropdown false
• .c subwidget listbox insert end Item 1
• .c subwidget listbox insert end Item 2
• .c pick 1

16
Scrolled Widgets

• Automatic creation and placement of the
  scrollbars.
• TixScrolledListBox
• tixScrolledListBox .list -scrollbar auto
• .list subwidget listbox insert end Item 1
• .list subwidget listbox insert end Item 2

• Values for -scrollbar
• none, x, y, both, auto, auto x, auto y,
• auto -x auto -x

17
Scrolled Widgets

• TixScrolledText
• Similar to TixScrolledListBox.
• auto scrollbar doesnt work because of TK bug.
• TixScrolledWindow
• Scrolls all the widgets packed inside its window
  subwidget.
• Works like a geometry manager automatically
  responds to size changes.

18
TixScrolledWindow

• Cheap spreadsheet example
• tixScrolledWindow .swin -scrollbar auto
• set w .swin subwidget window
• for set x 0 x lt 10 incr x
• pack frame w.fx -side left -fill y
  -expand yes
• for set y 0 y lt 10 incr y
• pack entry w.fx.ey -fill x -expand
  yes

19
TixTList

• Tabular List Widget.
• Displays items in a two dimensional format.
• Display text and images in multiple colors and
  multiple fonts.

20
Display Items

• Display items four types -- text, image,
  imagetext and window.
• The display items are managed by host widgets
  TixTList, TixHList and TixGrid.
• Display styles control the appearance of the
  display items (font, color, padding, etc.).

21
Display Items

• Display items define the individual attributes
  e.g., text string, image.
• Display styles define the collective attributes
  font, color, padding.
• Common attributes are stored in a single style
  object
• Saves storage.
• Easy to modify the same attribute for many items.

22
Display Items

• Display styles, items and host widget

23
Creating Display Items

• Syntax
• tlist insert index -itemtype type -style style
  -option value ...
• Example
• tixScrolledTList .t -scrollbar auto -options
• tlist.orientation vertical
• set tlist .t subwidget tlist
• foreach name ioi jay keith lars
• tlist insert end -itemtype imagetext -image
  folder
• -text name

24
Using Display Styles

• Create a TixDisplayStyle object
• set style1 tixDisplayStyle imagetext -refwindow
  tlist \
• -foreground a04040 -font bold_font
• Use this style for display items of a matching
  type
• tlist insert end -itemtype imagetext -image
  folder
• -text name -style style1
• tlist entryconfigure 10 -style style1
• Modify a style on-the-fly
• style1 configure -foreground white
• update idletasks
• style1 configure -foreground black

25
Hierarchical Listbox

• TixHList displays hierarchical data in a tree
  format.
• Supports Tix display items.
• Each entry is identified by a unique pathname.
  E.g.,
• foo
• foo.bar
• foo.bar.blah
• The separator is configurable via the -separator
  option.
• Toplevel entries are entries
• whose pathname doesnt contain the separator
  character.
• whose pathname is the separator character.

26
Hierarchical Listbox

• Creating entries in a TixHList widget
• tixScrolledHList .h -options
• hlist.separator /
• hlist.drawBranch 1
• hlist.indent 20
• set hlist .h subwidget hlist
• foreach dir / /dev /usr /usr/local /var
• hlist add dir -itemtype imagetext \
• -image folder -text dir
• Other operations entryconfigure, hide, show and
  delete.

27
Variants of TixHList

• TixDirList displays directory in an indented
  list format.
• TixDirTree displays directory in a collapsible
  tree format.

28
Variants of TixHList

• TixTree general purpose collapsible tree.
• tixTree .h -options
• hlist.separator /
• hlist.drawBranch 1
• hlist.indent 20
• set hlist .h subwidget hlist
• foreach dir / /dev /usr /usr/local /var
• hlist add dir -itemtype imagetext \
• -image folder -text dir
• .h autosetmode

29
Variants of TixHList

• TixCheckList
• tixCheckList .h -options
• set hlist .h subwidget hlist
• foreach dir / /dev /usr /usr/local /var
• hlist add dir -itemtype imagetext \
• -text dir
• .h setstauts / off
• .h setstauts /dev on
• .h setstauts /var default
• ...
• To get users input
• set selected .h getstatus on

30
File Selection Widgets

• Widgets for selecting files and directories.
• Motif and MS Windows look and feel.
• Motif style file selection dialog
• tixFileSelectDialog .dialog \
• -command LoadFile
• .dialog popup
• ...
• proc LoadFile filename
• set fd open filename ...

31
File Selection Widgets

• WindowsTM style file selection dialog
• tixExFileSelectDialog .dialog \
• -command LoadFile
• .dialog popup
• ...
• proc LoadFile filename
• set fd open filename ...

32
File Selection Widgets

• Directory Selection Dialog
• tixDirSelectDialog .dialog \
• -command SelectDir
• .dialog popup
• ...
• proc SelectDir dirname
• cd filename
• ...

33
Geometry Manager Widgets

• Implement new geometry management policies.
• TixPanedWindow arranges child windows in
  horizontal or vertical panes.
• TixNoteBook, TixListNoteBook arranges child
  windows in a notebook metaphor.

34
TixPanedWindow

• Creating a PanedWindow and its panes
• tixPanedWindow .p -orientation horizontal
• set p1 .p add left -expand 1 -size 200
• set p2 .p add right -expand 4
• tixDirTree p1.d pack p1.d -expand yes -fill
  both
• tixScrolledTList p2.t pack p2.t -expand yes
  -fill both

35
TixPanedWindow

• -expand how much a pane should grow/shrink
  relative to other panes.
• Other flags to the add command -size, -min,
  -max, -allowresize.
• Each pane becomes a subwidget, e.g.
• .p subwidget left configure -bd 0
• Other operations
• .p paneconfigure left -expand 2
• .p delete right

36
TixNoteBook

• Creating a TixNoteBook and adding pages
• tixNoteBook .n
• set p1 .n add tree -label Tree -underline 0
• set p2 .n add list -label List -underline 0
• tixDirTree p1.d pack p1.d -expand yes -fill
  both
• tixScrolledTList p2.t pack p2.t -expand yes
  -fill both

37
TixNoteBook

• Automatically generates Alt-key bindings.
• Delaying page creation for better performance
• tixNoteBook .n
• set p1 .n add tree -label Tree -underline 0 \
• -createcmd CreateTree
• set p2 .n add list -label List -underline 0 \
• -createcmd CreateList
• ...
• proc CreateTree
• set p1 .p subwidget tree
• tixDirTree p1.d pack p1.d -expand yes
  -fill both
• ...

38
TixListNoteBook

• Supports a large number of pages.
• Uses a TixHList widget to display the page
  tabs.
• tixListNoteBook .n
• .n subwidget hlist add tree -text Tree ...
• .n subwidget hlist add list -text List ...
• set p1 .n add tree
• set p2 .n add list

39
Writing New Tix Widgets

• OOP framework for writing megawidget in TCL.
• Support for
• Configuration options.
• Methods (widget commands).
• Subwidgets.
• All megawidgets classes must be a descendant of
  TixPrimitive.

40
Declaring a Widget Class

• tixWidgetClass tixOnOff
• -classname TixOnOff
• -superclass tixPrimitive
• -flag
• -text -value
• -configspec
• -text text Text On Off
• -value value Value off
• -method
• toggle
• ...

41
Methods

• First argument must be w the pathname of the
  widget instance.
• Public method all lower case.
• proc tixOnOfftoggle w
• ...
• Private method individual words capitalized.
• proc tixOnOffFlashButtons w
• ...

42
Instance Data

• All the variables of an instance are stored in a
  global associative array with the same name as
  the widget.
• tixOnOff .onoff -text Yes No -value on
• .onoff(-text) Yes No
• .onoff(-value) on
• Accessing the instance data in a method
• proc tixOnOfftoggle w
• upvar 0 w data
• if data(-value) on
• set data(-value) off
• ...

43
Instance Data

• Public variables
• Can be accessed via the configure and cget
  methods.
• Are declared in -flag section in the class
  declaration.
• Name must start with - and use all lower case
  characters.
• Private variables
• Subwidget tags name must start with w.
• Other private variables can have any name.

44
Widget Instantiation

• All widget classes should define three methods to
  for widget instantiation InitWidgetRec,
  ConstructWidget and SetBindings.
• InitWidgetRec initializes the private variables.
• proc tixOnOffInitWidgetRec w
• upvar 0 w data
• tixChainMethod w InitWidgetRec
• set data(count) 0
• tixChainMethod calls the method in a
  superclass.

45
Widget Instantiation

• ConstructWidget creates the subwidgets.
• proc tixOnOffConstructWidget w
• upvar 0 w data
• tixChainMethod w ConstructWidget
• set data(won) button w.on -text On
• set data(woff) button w.off -text Off
• pack data(won) data(woff) -side left
• A variable with name data(wxxx) is assumed to be
  subwidget tags it stores the pathname of a
  subwidget, which can be accessed by the w
  subwidget xxx call.

46
Widget Instantiation

• SetBindings defines behavior of subwidgets.
• proc tixOnOffSetBindings w
• upvar 0 w data
• tixChainMethod w SetBindings
• data(won) config -command tixOnOffOnCmd
  w
• data(woff) config -command tixOnOffOffCmd
  w
• proc tixOnOffOnCmd w
• upvar 0 w data
• data(won) config -relief sunken
• data(woff) config -relief raised

47
Configuration Handler

• Gets called whenever user executes w configure
  -option value.
• proc tixOnOffconfig-text w value
• upvar 0 w data
• data(won) config -text lindex value 0
• data(woff) config -text lindex value 1

48
Auto-loading Widget Classes

• Keep each widget class implementation into a
  single Tcl file.
• Use the tixindex program to generate the tclIndex
  file for auto-loading the widget classes into
  wish.
• cd myclasses/
• tixindex .tcl gt tclIndex

49
Example File Viewer

• Adjustable panes.
• Iconic representation of files and folders.

50
Example File Viewer (1)

• Create the panes
• set mainPW tixPanedWindow .p -orient vertical
• pack mainPW -expand yes -fill both -padx 4 -pady
  4
• set top mainPW add top -expand 1 -size 300
• set bot mainPW add bot -expand 1 -size 200
• top config -bd 0 bot config -bd 0
• set topPW tixPanedWindow top.p -orient
  horizontal
• pack topPW -expand yes -fill both
• set left topPW add left -expand 1
• set right topPW add right -expand 3
• left config -bd 0
• right config -bd 0

51
Example File Viewer (2)

• set stext tixScrolledText bot.text
• stext subwidget text config -font tix option
  get \
• fixed_font
• pack stext -expand yes -fill both -padx 4 -pady
  4
• Create the directory tree and tabular list
  widgets
• set dirtree tixDirTree left.dirtree -browsecmd
  \
• TreeBrowse
• pack dirtree -expand yes -fill both -padx 4
  -pady 4
• set stlist tixScrolledTList right.tlist
  -options
• tlist.browseCmd ListBrowse
• tlist.command ListCmd
• pack stlist -expand yes -fill both -padx 4 -pady
  4

52
Example File Viewer (3)

• proc TreeBrowse dir
• global stlist
• set tlist stlist subwidget tlist
• tlist delete 0 end
• cd dir
• set files lsort glob -nocomplain
• foreach file files
• if file isdirectory file
• tlist insert end -itemtype imagetext \
• -image tix getimage folder -text
  file

53
Example File Viewer (4)

• foreach file files
• if !file isdirectory file
• tlist insert end -itemtype imagetext \
• -image tix getimage textfile -text file

54
Example File Viewer (5)

• Gets called on single clicks on an item in the
  tlist
• proc ListBrowse index
• global stlist stext
• set tlist stlist subwidget tlist
• set text stext subwidget text
• set file tlist entrycget index -text
• if !file isdirectory file
• Shows the first 1000 bytes of the file
• set fd open file RDONLY
• text delete 1.0 end
• text insert end read fd 1000
• close fd

55
Example File Viewer (6)

• Gets called on double clicks on an item in the
  tlist
• proc ListCmd index
• global stlist dirtree
• set tlist stlist subwidget tlist
• set file tlist entrycget index -text
• if file isdirectory file
• dirtree chdir file join pwd file
• Update the view in the tlist
• TreeBrowse file join pwd file
• else
• Load the whole file ...

56
Status

• Runs on UNIX/X and MS Windows.
• One of the most popular Tcl/Tk extension.
• Home page http//tix.sourceforge.net
• Download ftp//download.sourceforge.net/tix
• Mailing lists http//www.egroups.com/group/tix

57
Conclusions

• Rapid application development.
• Code reuse.
• Professional look-and-feel.
• Tix Must-have extension for Tcl/Tk.