1 / 57

An Introduction to Tix

An Introduction to Tix. Ioi Lam Expert Interface Technologies http://tix.sourceforge.net. 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:

leighton
Download Presentation

An Introduction to Tix

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related