an introduction to tix
Download
Skip this Video
Download Presentation
An Introduction to Tix

Loading in 2 Seconds...

play fullscreen
1 / 57

An Introduction to Tix - PowerPoint PPT Presentation


  • 231 Views
  • Uploaded on

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:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'An Introduction to Tix' - leighton


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
an introduction to tix

An Introduction to Tix

Ioi Lam

Expert Interface Technologies

http://tix.sourceforge.net

introduction
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

outline
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

creating tix widgets
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

event handling
Event Handling
  • Two stage interactions:
    • Browsing
    • Commitment
  • Example:
    • Watch movie previews
    • Select a movie
  • How to handle these events effectively?

Tix Tutorial

high level event handling
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

handling user input
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

high level event handling8
Tix:

tixScrolledListBox .list \

-browsecmd Browse \

-command Invoke

proc Browse {} {

puts “browsing \

[tixEvent value]”

}

Low-level binding:

listbox .list

bind .list <1> ...

bind .list ...

bind .list ...

bind .list ...

bind .list ...

...

...

High-level Event Handling

Tix Tutorial

handling user input example
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

details of events
Details of Events
  • [tixEvent type]: the event that triggers the binding, e.g., <1>, or .
  • [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] != “} {

puts “browsing [tixEvent value]”

}

Tix Tutorial

subwidgets
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

configuring subwidgets
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

lining up tixcontrol widgets
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

subwidgets14
Subwidgets
  • Chaining the subwidget command for more than one level of subwidgets:

pack forget [$fdialog subwidget btns subwidget help]

Tix Tutorial

combobox
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

scrolled widgets
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

scrolled widgets17
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

tixscrolledwindow
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

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

Tix Tutorial

display items
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

display items21
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

display items22
Display Items
  • Display styles, items and host widget

Tix Tutorial

creating display items
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

using display styles
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

hierarchical listbox
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

hierarchical listbox26
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

variants of tixhlist
Variants of TixHList
  • TixDirList: displays directory in an indented list format.
  • TixDirTree: displays directory in a collapsible tree format.

Tix Tutorial

variants of tixhlist28
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

variants of tixhlist29
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

file selection widgets
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

file selection widgets31
File Selection Widgets
  • WindowsTM style file selection dialog:

tixExFileSelectDialog .dialog \

-command LoadFile

.dialog popup

...

proc LoadFile {filename} {

set fd [open $filename ...]

}

Tix Tutorial

file selection widgets32
File Selection Widgets
  • Directory Selection Dialog:

tixDirSelectDialog .dialog \

-command SelectDir

.dialog popup

...

proc SelectDir {dirname} {

cd $filename

...

}

Tix Tutorial

geometry manager widgets
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

tixpanedwindow
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

tixpanedwindow35
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

tixnotebook
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

tixnotebook37
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

tixlistnotebook
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

writing new tix widgets
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

declaring a widget class
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

methods
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

instance data
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

instance data43
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

widget instantiation
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

widget instantiation45
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

widget instantiation46
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

configuration handler
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

auto loading widget classes
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

example file viewer
Example: File Viewer
  • Adjustable panes.
  • Iconic representation of files and folders.

Tix Tutorial

example file viewer 1
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

example file viewer 2
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

Tix Tutorial

example file viewer 3
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

}

}

Tix Tutorial

example file viewer 4
Example: File Viewer (4)

foreach file $files {

if ![file isdirectory $file] {

$tlist insert end -itemtype imagetext \

-image [tix getimage textfile] -text $file

}

}

}

Tix Tutorial

example file viewer 5
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

}

}

Tix Tutorial

example file viewer 6
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 ...

}

}

Tix Tutorial

status
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

Tix Tutorial

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

Tix Tutorial

ad