[HJG] 2014-03 - How to do a grid-like GUI-layout. <
>
A grid of buttons, done with [pack]
First, a somewhat verbose version:
======
# http://wiki.tcl.tk/39578
# gridDemo-Pack1.tcl
package require Tk
global Prg
set Prg(Title) "Grid-Demo 01"
set Prg(Version) "v0.02"
set Prg(Date) "2014-03-13"
set Prg(Author) "Hans-Joachim Gurt"
set Prg(Contact) [string map -nocase {: @ ! .} gurt:gmx!de]
set Prg(About) "Grid-Demo - Pack"
set Prg(Msg) "using frames and pack\nwith labels and buttons"
proc start {} {
set ::Prg(Msg) "Starting..."
after 1000 { .b11 invoke }
after 1500 { .b22 invoke }
after 2000 { .b33 invoke }
}
proc Button { b } {
set ::Prg(Msg) "Button pressed: $b"
}
#: Main
wm title . "$Prg(Title) $Prg(Version)"
puts "$Prg(Title) $Prg(Version)"
frame .f0 -background grey ;# Outer frame
pack .f0 -padx 10 -pady 10
label .lb_1 -text "GridDemo" -width 12 -bg white
# rows:
frame .f1 -background red
frame .f2 -background yellow
frame .f3 -background green
frame .f4 -background blue
frame .fB -background cyan ;# Start/Quit-Buttons
label .lb_2 -textvariable Prg(Msg)
pack .lb_1 -in .f0 -pady 5
pack .f1 .f2 .f3 .f4 -in .f0
pack .lb_2 -in .f0 -pady 5
pack .fB
;# size of buttons depends on text:
button .b11 -text "1" -command { Button "11" }
button .b12 -text "02" -command { Button "12" }
button .b13 -text "003" -command { Button "13" }
button .b14 -text "0004" -command { Button "14" }
# different height, centered in frame:
button .b21 -text "b" -width 2 -height 1 -command { Button "21" }
button .b22 -text "12" -width 3 -height 2 -command { Button "22" }
button .b23 -text "103" -width 4 -height 3 -command { Button "23" }
button .b24 -text "1004" -width 5 -height 4 -command { Button "24" }
set wid 4
set hig 2
button .b31 -text "c" -width $wid -height $hig -command { Button "31" }
button .b32 -text "22" -width $wid -height $hig -command { Button "32" }
button .b33 -text "203" -width $wid -height $hig -command { Button "33" }
button .b34 -text "2004" -width $wid -height $hig -command { Button "34" }
option add *Button.Width 4
option add *Button.height 2
button .b41 -text "d" -command { Button "41" }
button .b42 -text "32" -command { Button "42" }
button .b43 -text "303" -command { Button "43" }
button .b44 -text "3004" -command { Button "44" }
option add *Button.Width 6
option add *Button.height 1
button .bt_start -text "Start" -command { start }
button .bt_quit -text "Quit" -command { exit }
pack .b11 .b12 .b13 .b14 -in .f1 -side left -padx 2
pack .b21 .b22 .b23 .b24 -in .f2 -side left -padx 2
pack .b31 .b32 .b33 .b34 -in .f3 -side left -padx 2
pack .b41 .b42 .b43 .b44 -in .f4 -side left -padx 2
pack .bt_start .bt_quit -in .fB -side left -padx 4 -pady 4
#.
======
Now, the shorter "production-version":
======
# http://wiki.tcl.tk/39578
# gridDemo-Pack2.tcl
package require Tk
global Prg
set Prg(Title) "Grid-Demo_02"
set Prg(Version) "v0.02"
set Prg(Date) "2014-03-14"
set Prg(Author) "Hans-Joachim Gurt"
set Prg(Contact) [string map -nocase {: @ ! .} gurt:gmx!de]
set Prg(About) "Grid-Demo - Pack"
set Prg(Msg) "using frames and pack\nwith labels and buttons"
proc start {} {
set ::Prg(Msg) "Starting..."
after 1000 { .b11 invoke } ;# Sorry, no animated button-press here...
after 1500 { .b22 invoke }
after 2000 { .b33 invoke }
}
proc ButtonProc { b } {
set ::Prg(Msg) "Button pressed: $b"
}
#: Main
wm title . "$Prg(Title) $Prg(Version)"
puts "$Prg(Title) $Prg(Version)"
frame .f0 -background grey ;# Outer frame
pack .f0 -padx 10 -pady 10
label .lb_1 -text "GridDemo" -width 12 -bg white
# rows:
frame .f1 -background red
frame .f2 -background yellow
frame .f3 -background green
frame .f4 -background blue
label .lb_2 -textvariable Prg(Msg)
frame .fB -background cyan ;# Start/Quit-Buttons
pack .lb_1 -in .f0 -pady 5
pack .f1 .f2 .f3 .f4 -in .f0
pack .lb_2 -in .f0 -pady 5
pack .fB
option add *Button.width 4
option add *Button.height 2
# button .b11 -text "11" -command { ButtonProc "11" }
for {set i 11} {$i<=14} {incr i} {
button .b$i -text "$i" -command "ButtonProc $i"
}
for {set r 2} {$r<=4} {incr r} {
for {set c 1} {$c<=4} {incr c} {
button .b$r$c -text "$r$c" -command "ButtonProc $r$c"
}
}
option add *Button.width 6
option add *Button.height 1
button .bt_start -text "Start" -command { start }
button .bt_quit -text "Quit" -command { exit }
pack .b11 .b12 .b13 .b14 -in .f1 -side left -padx 2
pack .b21 .b22 .b23 .b24 -in .f2 -side left -padx 2
pack .b31 .b32 .b33 .b34 -in .f3 -side left -padx 2
pack .b41 .b42 .b43 .b44 -in .f4 -side left -padx 2
pack .bt_start .bt_quit -in .fB -side left -padx 4 -pady 4
#.
======
Some added colors, to better show the layout.
<>Example | GUI