An introduction to tix l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 57

An Introduction to Tix PowerPoint PPT Presentation


  • 185 Views
  • Uploaded on
  • Presentation posted in: General

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:

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.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 l.jpg

An Introduction to Tix

Ioi Lam

Expert Interface Technologies

http://tix.sourceforge.net


Introduction l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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

    • -validatecmdproc that verifies user input

Tix Tutorial


High level event handling8 l.jpg

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


Handling user input example l.jpg

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 l.jpg

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


Subwidgets l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Subwidgets

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

    pack forget [$fdialog subwidget btns subwidget help]

Tix Tutorial


Combobox l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Display Items

  • Display styles, items and host widget

Tix Tutorial


Creating display items l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Variants of TixHList

  • TixDirList: displays directory in an indented list format.

  • TixDirTree: displays directory in a collapsible tree format.

Tix Tutorial


Variants of tixhlist28 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

File Selection Widgets

  • Directory Selection Dialog:

    tixDirSelectDialog .dialog \

    -command SelectDir

    .dialog popup

    ...

    proc SelectDir {dirname} {

    cd $filename

    ...

    }

Tix Tutorial


Geometry manager widgets l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Example: File Viewer

  • Adjustable panes.

  • Iconic representation of files and folders.

Tix Tutorial


Example file viewer 1 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Conclusions

  • Rapid application development.

  • Code reuse.

  • Professional look-and-feel.

  • Tix = Must-have extension for Tcl/Tk.

Tix Tutorial


  • Login