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 andreduce development time. • Write your own widgets to reuse code. • Runs on MS Windows and Unix. Tix Tutorial

3. Outline • Widgets in Tix: • Basic Tix widgets. • Tabular Listbox. • Hierarchical Listbox. • File selection widgets. • Manager widgets. • Writing new megawidgets. • Status of Tix. • Conclusions. 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 Tix Tutorial

5. Event Handling • Two stage interactions: • Browsing • Commitment • Example: • Watch movie previews • Select a movie • How to handle these events effectively? 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. Tix Tutorial

7. Handling User Input • Most Tix widgets use these options to handle user input: • -valuevalue of widget • -variablevariable to store value • -commandproc to call when value changes • -browsecmdproc to call when user is browsing • -validatecmd proc that verifies user input Tix Tutorial

8. 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> ... ... ... High-level Event Handling 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”} Tix Tutorial

10. Details of Events • [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]” } 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. 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 } 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:” Tix Tutorial

14. Subwidgets • Chaining the subwidget command for more than one level of subwidgets: pack forget [$fdialog subwidget btns subwidget help] 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 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} 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. 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 } } Tix Tutorial

19. TixTList • Tabular List Widget. • Displays items in a two dimensional format. • Display text and images in multiple colors and multiple fonts. 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.). 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. Tix Tutorial

22. Display Items • Display styles, items and host widget Tix Tutorial

23. Creating Display Items • Syntax: $tlist insert index-itemtypetype-stylestyle-optionvalue ... • 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 } Tix Tutorial

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 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. Tix Tutorial

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. Tix Tutorial

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

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 Tix Tutorial

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 user’s input: set selected [.h getstatus on] 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 ...] } Tix Tutorial

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

32. File Selection Widgets • Directory Selection Dialog: tixDirSelectDialog .dialog \ -command SelectDir .dialog popup ... proc SelectDir {dirname} { cd $filename ... } 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. 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 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 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 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 ... } 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] 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. 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 } ... } 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} { ... } 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 ... } 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. 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. 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. 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} { upvar #0 $w data $data(w:on) config -relief sunken $data(w:off) config -relief raised } 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] } 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 Tix Tutorial

49. Example: File Viewer • Adjustable panes. • Iconic representation of files and folders. 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 Tix Tutorial