1. Ioi Lam Expert Interface Technologies http://tix.sourceforge.net
An Introduction to Tix
Ioi Lam
Expert Interface Technologies

2. Introduction The Tix extension for Tcl/Tk: Advantages:
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.
9/17/2018
Tix Tutorial

3. Outline Widgets in Tix: Writing new megawidgets. Status of Tix.
Basic Tix widgets.
Tabular Listbox.
Hierarchical Listbox.
File selection widgets.
Manager widgets.
Writing new megawidgets.
Status of Tix.
Conclusions.
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

5. Event Handling Two stage interactions: Browsing Commitment Example:
Watch movie previews
Select a movie
How to handle these events effectively?
9/17/2018
Tix Tutorial

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.
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

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 <1> ...
bind .list <Double-1> ...
bind .list <Up> ...
bind .list <Down> ...
bind .list <B1-Motion> ...
...
9/17/2018
Tix Tutorial

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”}
9/17/2018
Tix Tutorial

10. Details of Events Example: “my browsecmd gets called twice”
[tixEvent type]: the event that triggers the binding, e.g., <1>, <Double-1> or <Application>.
[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] != “<ButtonRelease-1”>} {
puts “browsing [tixEvent value]” }
9/17/2018
Tix Tutorial

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.
9/17/2018
Tix Tutorial

12. Configuring Subwidgets
Use the subwidget command:
.foo subwidget entry configure -borderwidth 6
Use the TK options database:
option add *foo*entry.borderWidth 6
tixControl .foo
Use the -options switch during widget creation:
tixControl .foo -options {
entry.borderWidth 6 }
9/17/2018
Tix Tutorial

13. Lining up TixControl Widgets
option add *TixControl*label.width 7
option add *TixControl*label.anchor e
option add *TixControl*entry.width 8
tixControl .c1 -label “Height:”
tixControl .c2 -label “Width:”
tixControl .c3 -label “Depth:”
9/17/2018
Tix Tutorial

14. Subwidgets
Chaining the subwidget command for more than one level of subwidgets:
pack forget [$fdialog subwidget btns subwidget help]
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

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}
9/17/2018
Tix Tutorial

17. Scrolled Widgets TixScrolledText: Similar to TixScrolledListBox.
“auto” scrollbar doesn’t 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.
9/17/2018
Tix Tutorial

18. TixScrolledWindow Cheap spreadsheet example:
tixScrolledWindow .swin -scrollbar auto
set w [.swin subwidget window]
for {set x 0} {$x < 10} {incr x} {
pack [frame $w.f$x] -side left -fill y -expand yes
for {set y 0} {$y < 10} {incr y} {
pack [entry $w.f$x.e$y] -fill x -expand yes }
9/17/2018
Tix Tutorial

19. TixTList Tabular List Widget.
Displays items in a two dimensional format.
Display text and images in multiple colors and multiple fonts.
9/17/2018
Tix Tutorial

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.).
9/17/2018
Tix Tutorial

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.
9/17/2018
Tix Tutorial

22. Display Items Display styles, items and host widget 9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

24. Using Display Styles Create a TixDisplayStyle object:
set style1 [tixDisplayStyle imagetext -refwindow $tlist \
-foreground #a 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
9/17/2018
Tix Tutorial

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 doesn’t contain the separator character.
whose pathname is the separator character.
9/17/2018
Tix Tutorial

26. Hierarchical Listbox Creating entries in a TixHList widget:
tixScrolledHList .h -options {
hlist.separator /
hlist.drawBranch 1
hlist.indent }
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.
9/17/2018
Tix Tutorial

27. Variants of TixHList
TixDirList: displays directory in an indented list format.
TixDirTree: displays directory in a collapsible tree format.
9/17/2018
Tix Tutorial

28. Variants of TixHList TixTree: general purpose collapsible tree.
tixTree .h -options {
hlist.separator /
hlist.drawBranch 1
hlist.indent }
set hlist [.h subwidget hlist]
foreach dir {/ /dev /usr /usr/local /var} {
$hlist add $dir -itemtype imagetext \
-image $folder -text $dir
.h autosetmode
9/17/2018
Tix Tutorial

29. Variants of TixHList TixCheckList: To get user’s input:
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 user’s input:
set selected [.h getstatus on]
9/17/2018
Tix Tutorial

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 ...] }
9/17/2018
Tix Tutorial

31. File Selection Widgets
WindowsTM style file selection dialog:
tixExFileSelectDialog .dialog \
-command LoadFile
.dialog popup
...
proc LoadFile {filename} {
set fd [open $filename ...] }
9/17/2018
Tix Tutorial

32. File Selection Widgets
Directory Selection Dialog:
tixDirSelectDialog .dialog \
-command SelectDir
.dialog popup
...
proc SelectDir {dirname} {
cd $filename }
9/17/2018
Tix Tutorial

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.
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

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 }
9/17/2018
Tix Tutorial

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]
9/17/2018
Tix Tutorial

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.
9/17/2018
Tix Tutorial

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
...
9/17/2018
Tix Tutorial

41. Methods First argument must be w: the pathname of the widget instance.
Public method: all lower case.
proc tixOnOff:toggle {w} {
... }
Private method: individual words capitalized.
proc tixOnOff:FlashButtons {w} {
9/17/2018
Tix Tutorial

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 tixOnOff:toggle {w} {
upvar #0 $w data
if {$data(-value) == “on”} {
set data(-value) off
... }
9/17/2018
Tix Tutorial

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.
9/17/2018
Tix Tutorial

44. Widget Instantiation
All widget classes should define three methods to for widget instantiation: InitWidgetRec, ConstructWidget and SetBindings.
InitWidgetRec: initializes the private variables.
proc tixOnOff:InitWidgetRec {w} {
upvar #0 $w data
tixChainMethod $w InitWidgetRec
set data(count) 0 }
tixChainMethod: calls the method in a superclass.
9/17/2018
Tix Tutorial

45. Widget Instantiation ConstructWidget: creates the subwidgets.
proc tixOnOff:ConstructWidget {w} {
upvar #0 $w data
tixChainMethod $w ConstructWidget
set data(w:on) [button $w.on -text On]
set data(w:off) [button $w.off -text Off]
pack $data(w:on) $data(w:off) -side left }
A variable with name data(w:xxx) is assumed to be subwidget tags: it stores the pathname of a subwidget, which can be accessed by the “$w subwidget xxx” call.
9/17/2018
Tix Tutorial

46. Widget Instantiation SetBindings: defines behavior of subwidgets.
proc tixOnOff:SetBindings {w} {
upvar #0 $w data
tixChainMethod $w SetBindings
$data(w:on) config -command “tixOnOff:OnCmd $w”
$data(w:off) config -command “tixOnOff:OffCmd $w” }
proc tixOnOff:OnCmd {w} {
$data(w:on) config -relief sunken
$data(w:off) config -relief raised
9/17/2018
Tix Tutorial

47. Configuration Handler
Gets called whenever user executes $w configure -option value.
proc tixOnOff:config-text {w value} {
upvar #0 $w data
$data(w:on) config -text [lindex $value 0]
$data(w:off) config -text [lindex $value 1] }
9/17/2018
Tix Tutorial

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 > tclIndex
9/17/2018
Tix Tutorial

49. Example: File Viewer Adjustable panes.
Iconic representation of files and folders.
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

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
9/17/2018
Tix Tutorial

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 }
9/17/2018
Tix Tutorial

53. Example: File Viewer (4)
foreach file $files {
if ![file isdirectory $file] {
$tlist insert end -itemtype imagetext \
-image [tix getimage textfile] -text $file }
9/17/2018
Tix Tutorial

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 }
9/17/2018
Tix Tutorial

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 ... }
9/17/2018
Tix Tutorial

56. Status Runs on UNIX/X and MS Windows.
One of the most popular Tcl/Tk extension.
Home page:
Download: ftp://download.sourceforge.net/tix
Mailing lists:
9/17/2018
Tix Tutorial

57. Conclusions Rapid application development. Code reuse.
Professional look-and-feel.
Tix = Must-have extension for Tcl/Tk.
9/17/2018
Tix Tutorial