GRIDPLUS2: Grid/Layout | ![]() |
||||||
|
GRIDPLUS: Grid/Layout |
The GRIDPLUS Grid and Layout build on, simplify and extend the existing grid manager. GRIDPLUS screen layouts are defined as a hierarchy of Grids and Layouts. Each cell in a grid consists of two elements. These will usually be a text label and some other widget such as an entry. It is also allowed to have just one element in a cell, or a cell which is empty. GRIDPLUS Grids can also be stretched to neatly fill the Layout cells in which they are positioned. The GRIDPLUS grid and layout commands are documented together on this page as they usually are used together in order to create a GRIDPLUS screen. While the GRIDPLUS Grid can be used "native", GRIDPLUS command modes exist to create grids of buttons, checkbuttons, date selectors, dropdowns (comboboxes), entries, menubuttons, links and radiobuttons. These command modes are all based on the GRIDPLUS widget grid.
GRIDPLUS is based on the GRIDPLUS Grid and the GRIDPLUS Layout, which are in turn built on the Tk grid geometry manager, but have the following properties/facilities:-
A Pictorial Representation |
+-Frame-------------------------+ |+-------+ +-------+ +-------+| ||L/W L/W|==|L/W L/W|==|L/W L/W|| |+-------+ +-------+ +-------+| | ! ! ! | | ! ! ! | L/W Label or Widget |+-------+ +-------+ +-------+| ||L/W L/W|==|L/W L/W|==|L/W L/W|| == Horizontal stretchy link |+-------+ +-------+ +-------+| | ! ! ! | ! Vertical stretchy link | ! ! ! | ! |+-------+ +-------+ +-------+| ||L/W L/W|==|L/W L/W|==|L/W L/W|| |+-------+ +-------+ +-------+| | ! ! ! | | ! ! ! | |+-------+ +-------+ +-------+| ||L/W L/W|==|L/W L/W|==|L/W L/W|| |+-------+ +-------+ +-------+| +-------------------------------+
Note: The cells at the edges of the grid are "attatched" to the frame. The padding options are used to control the space between the frame and the edge widgets. The minimum space between columns is set using the -space option (The default is 20 pixels).
GRIDPLUS Grid Item Options |
Notes:
Examples |
This section contains a number of examples which illustrate the main features of the GRIDPLUS grid and layout commands.
Most of these examples use widgets created using the standard Tk and Tile (ttk) commands. This is to demonstrate the use of the GRIDPLUS Grid. However, GRIDPLUS commands exist to simplify creation of Grids of common Tk/ttk widgets.
Note: All examples assume that the GRIDPLUS package has already been "required" and the commands imported.
Window:
Source Code:
Comments:
This example creates three Grids containing labels. Each Grid has a title. The title option
will, by default, set the Grid to have a "groove" style labelled border (The default border
style is "flat"). The arrangement of the labels within the Grids matches the arrangement in the
source code.
Note: By default label text is attached to the west (lefthand) side of the label
part of the cell. The label text may also be centred or attached to any of the cardinal points
by using a colon delimlited suffix (See the GRIDPLUS man page
for details).
The three Grids are arranged on the screen using a Layout. The Layout also has a title.
As for the Grid, the title option will, by default, set the Layout to have a "themed"
style labelled border. The Grids are arranged with ".mygrid1" and ".mygrid2"
side by side in the first row, with ".mygrid3" taking up the full width of the second
row. The "-" causes the span of the cell to the left to extend into another column.
This syntax is copied from the relative placement feature of the standard TK grid widget (See
the GRIDPLUS man page for details).
The -wtitle option is used to set the window title.
The (minimum) distance between columns in a Grid is set using the -space
option (The default is 20 pixels).
So far this doesn't look very neat, but we have something on the screen...
Window:
Source Code:
The code for this example is the same as above except for a couple of changes to the
".main" Layout...
Comments:
In this example suffixes have been added to ".mygrid2" and ".mygrid3".
The suffixes are used to define cardinal points to which the item will be attached:
".mygrid2:ns" (north south) attaches the border of ".mygrid2"
to the top and bottom of the Layout cell, ".mygrid3:ew" (east west)
attaches the border of ".mygrid3" to the left and right of the Layout cell. This has
the effect of "stretching" to contents of the Grids to fill the cell in the specified direction.
The default is to attach to the west (lefthand side) of the cell.
See the GRIDPLUS man page for details.
Note: There is also an -attach option which can
be used to attach the contents of a grid to the top (north) and/or left (west)
of the grid. This is not the same as (in the above) attaching the grid itself to the cardinal points
of the containing cell.
For Example:
If -attach options are added to ".mygrid2" and
".mygrid3"...
...The following is displayed...
Window:
Source Code:
Comments:
This example builds upon the previous example. It contains nine entry widgets (".e1"
to ".e9" )and two button widgets (".b1" and ".b2"). The entry
widgets are added into ".mygrid1", and the buttons replace the labels in
".mygrid3".
An item in a cell beginning with a dot is considered to be the name of a widget. Each cell
can contain zero, one or two labels/widgets. The relative positions of the labels/widgets
within the cell is taken from the order in which they are specified in the source code. In
this example the label text in each cell of ".mygrid1" is to the left of the widget
name, therefore the label text will be displayed to the left of the widget. If a widget with
the specified name does not exist a label widget with an associated textvariable is created
(See Grid Example 6).
The code for this example is the same as above except for two additional labels in
".mygrid2"...
...and a couple of changes to the ".main" Layout...
Comments:
The additional labels in ".mygrid2" make it take up more vertical space
than ".mygrid1". In the ".main" layout ".mygrid1" is now
attatched to the north and south instead of ".mygrid2. This
demonstrates that the Grid containing the entry widgets can stretch.
Window:
Source Code:
Comments:
This example demontrates using the -taborder
option to control the order in which widgets get keyboard focus when navigating the screen using
the TAB key.
By default the TabOrder is set to "column". This means that for a particular Grid/Layout
the TAB key will, if possible, cause focus to move to the next widget in the same column
as the currently focused widget. If there are no more widgets in the same column, focus
will move to the first widget in the next column. If there are no more widgets in the current
Grid/Layout, focus will move the the first widget in the next Grid/Layout as defined by
the TabOrder set for the Grid/Layout in which they are contained.
If the default TabOrder were to be used for all Grids/Layout in this example the TAB key
would cause the entry widgets to get focus in the following order:-
1,4,7,2,5,8,3,6,9,19,22,25,20,23,26,21,24,27,10,13,16,11,14,17,12,15,18,28,31,34,29,32,35,30,33,36
However, the example code above sets "-taborder row" for ".mygrid3" and
".main". This results in the entry widgets getting focus in the following order:-
1,4,7,2,5,8,3,6,9,10,13,16,11,14,17,12,15,18,19,20,21,22,23,24,25,26,27,28,31,34,29,32,35,30,33,36
Note: The "-taborder" option only effects the focus order between the widgets/Grids/Layouts
it contains. As can be seen from this example, setting "-taborder row" for the ".main"
Layout only effects the order in which the contained Grids get focus, not the order of the widgets
contained by the Grids. This results in a very simple and flexible method to control TAB key
widget traversal order. The GRIDPLUS button, checkbutton,
entry and radiobutton commands also
have a -takefocus 0 option, which can be
used to prevent any of the contained widgets from getting focus when using the TAB key to navigate
the screen.
Window:
Source Code:
Comments:
This example demontrates that Grid (and Layout) borders can have any of the normal
-relief options.
Note: If the -title option is used the border
relief will be set to "theme", though this can be overriden using the option database.
Window:
Source Code:
Comments:
This example demontrates Grids contained within a Layout, which is in turn contained
within a cell of another Layout. In this case ".mygrid1" and ".mygrid2"
are contained within the Layout ".mylayout". By default the Grids have a "flat"
border relief. The labels in ".mygrid2" have the
-labelstyle bold
option set (See Grid Example 8) for clarity.
Window:
Source Code:
Comments:
This example demontrates a number of other GRIDPLUS Grid/Layout options:-
Window:
Source Code:
Comments:
This example demontrates the GRIDPLUS -columnformat option. Two
sets of identical GRIDPLUS widgets - Showing how this option can be used to line-up wigets in separate Grids.
For Example:
Creates an entry grid called ".g8" with three columns of entry/radiobutton widgets. The
-columnformat option specifies the widths of each element
for each of the columns. The first column "6/14" specifies that the left element of the column, in
this case the label, will be set to 6 characters. The right element, in this case the entry fields, is set
to 14 characters. The second column is set the same as the first. The third column "7" specifies
that the left element (The label) is set to 7 characters. As the width of the right element is not specified
the width is based on the size of the largest widget in the column (as it is when the -columnformat
option is not used).
Note: The -columnformat specifies the width within
the Grid allocated to the widget - not the size of the widget itself.
Grid Example 1
gridplus grid .mygrid1 -title "My Grid 1" {
{"Label1"} {"Label2"} {"Label3"}
{"Label4"} {"Label5"} {"Label6"}
{"Label7"} {"Label8"} {"Label9"}
}
gridplus grid .mygrid2 -title "My Grid 2" {
{"Label1"}
{"Label2"}
}
gridplus grid .mygrid3 -title "My Grid 3" {
{"Label1"} {"Label2"}
}
gridplus layout .main -wtitle "Grid Example" {
.mygrid1 .mygrid2
.mygrid3 -
}
pack .main
Grid Example 2
gridplus layout .main -wtitle "Grid Example" {
.mygrid1 .mygrid2:ns
.mygrid3:ew -
}
gridplus grid .mygrid2 -attach n -title "My Grid 2" {
{"Label1"}
{"Label2"}
}
gridplus grid .mygrid3 -attach w -title "My Grid 3" {
{"Label1"} {"Label2"}
}
Grid Example 3
::ttk::button .b1 -text "Button 1"
::ttk::button .b2 -text "Button 2"
::ttk::entry .e1 -width 5
::ttk::entry .e2 -width 5
::ttk::entry .e3 -width 5
::ttk::entry .e4 -width 5
::ttk::entry .e5 -width 5
::ttk::entry .e6 -width 5
::ttk::entry .e7 -width 5
::ttk::entry .e8 -width 5
::ttk::entry .e9 -width 5
gridplus grid .mygrid1 -title "My Grid 1" {
{"Label1" .e1} {"Label2" .e2} {"Label3" .e3}
{"Label4" .e4} {"Label5" .e5} {"Label6" .e6}
{"Label7" .e7} {"Label8" .e8} {"Label9" .e9}
}
gridplus grid .mygrid2 -title "My Grid 2" {
{"Label1"}
{"Label2"}
}
gridplus grid .mygrid3 -title "My Grid 3" {
{.b1} {.b2}
}
gridplus layout .main -wtitle "Grid Example" {
.mygrid1 .mygrid2:ns
.mygrid3:ew -
}
pack .main
Grid Example 4
gridplus grid .mygrid2 -title "My Grid 2" {
{"Label1"}
{"Label2"}
{"Label3"}
{"Label4"}
}
gridplus layout .main -wtitle "Grid Example" {
.mygrid1:ns .mygrid2
.mygrid3:ew -
}
Grid Example 5
for {set entry 1} {$entry <= 36} {incr entry} {
::ttk::entry .e$entry -width 5
}
gridplus grid .mygrid1 -title "My Grid 1" {
{"Entry01" .e1} {"Entry02" .e2} {"Entry03" .e3}
{"Entry04" .e4} {"Entry05" .e5} {"Entry06" .e6}
{"Entry07" .e7} {"Entry08" .e8} {"Entry09" .e9}
}
gridplus grid .mygrid2 -title "My Grid 2" {
{"Entry10" .e10} {"Entry11" .e11} {"Entry12" .e12}
{"Entry13" .e13} {"Entry14" .e14} {"Entry15" .e15}
{"Entry16" .e16} {"Entry17" .e17} {"Entry18" .e18}
}
gridplus grid .mygrid3 -taborder row -title "My Grid 3" {
{"Entry19" .e19} {"Entry20" .e20} {"Entry21" .e21}
{"Entry22" .e22} {"Entry23" .e23} {"Entry24" .e24}
{"Entry25" .e25} {"Entry26" .e26} {"Entry27" .e27}
}
gridplus grid .mygrid4 -title "My Grid 4" {
{"Entry28" .e28} {"Entry29" .e29} {"Entry30" .e30}
{"Entry31" .e31} {"Entry32" .e32} {"Entry33" .e33}
{"Entry34" .e34} {"Entry35" .e35} {"Entry36" .e36}
}
gridplus layout .main -taborder row -wtitle "Grid Example" {
.mygrid1 .mygrid2
.mygrid3 .mygrid4
}
pack .main
Grid Example 6
::ttk::button .b1 -text "Button 1"
::ttk::button .b2 -text "Button 2"
::ttk::entry .e1 -width 5
::ttk::entry .e2 -width 5
::ttk::entry .e3 -width 5
::ttk::entry .e4 -width 5
::ttk::entry .e5 -width 5
::ttk::entry .e6 -width 5
::ttk::entry .e7 -width 5
::ttk::entry .e8 -width 5
::ttk::entry .e9 -width 5
gridplus grid .mygrid1 -relief sunken {
{"Label1" .e1} {"Label2" .e2} {"Label3" .e3}
{"Label4" .e4} {"Label5" .e5} {"Label6" .e6}
{"Label7" .e7} {"Label8" .e8} {"Label9" .e9}
}
gridplus grid .mygrid2 -relief raised {
{"Label1"}
{"Label2"}
{"Label3"}
{"Label4"}
}
gridplus grid .mygrid3 -relief theme {
{.b1} {.b2}
}
gridplus layout .main -wtitle "Grid Example" {
.mygrid1:ns .mygrid2
.mygrid3:ew -
}
pack .main
Grid Example 7
::ttk::button .b1 -text "Button 1"
::ttk::button .b2 -text "Button 2"
::ttk::entry .e1 -width 5
::ttk::entry .e2 -width 5
::ttk::entry .e3 -width 5
::ttk::entry .e4 -width 5
::ttk::entry .e5 -width 5
::ttk::entry .e6 -width 5
::ttk::entry .e7 -width 5
::ttk::entry .e8 -width 5
::ttk::entry .e9 -width 5
gridplus grid .mygrid1 {
{"Label1" .e1} {"Label2" .e2} {"Label3" .e3}
{"Label4" .e4} {"Label5" .e5} {"Label6" .e6}
{"Label7" .e7} {"Label8" .e8} {"Label9" .e9}
}
gridplus grid .mygrid2 -labelstyle bold/ {
{"Label1"}
{"Label2"}
{"Label3"}
{"Label4"}
}
gridplus layout .mylayout -title "My Layout" {
.mygrid1:ns .mygrid2
}
gridplus grid .mygrid3 -title "My Grid 3" {
{.b1} {.b2}
}
gridplus layout .main -wtitle "Grid Example" {
.mylayout
.mygrid3:ew
}
pack .main
Grid Example 8
::ttk::button .b1 -text "Button 1"
::ttk::button .b2 -text "Button 2"
::ttk::entry .e1 -width 5
::ttk::entry .e2 -width 5
::ttk::entry .e3 -width 5
::ttk::entry .e4 -width 5
::ttk::entry .e5 -width 5
::ttk::entry .e6 -width 5
::ttk::entry .e7 -width 5
::ttk::entry .e8 -width 5
::ttk::entry .e9 -width 5
gridplus grid .mygrid1 -labelcolor blue/darkgreen -title "My Grid 1" {
{"Label1" .e1} {"Label2" .e2} {"Label3" .e3}
{"Label4" .e4} {} {"Label6" .e6}
{.e7 "Label7"} {"Label8" .e8} {"Label9" .e9}
}
gridplus grid .mygrid2 -labelstyle bold/ -labelcolor /red -title "My Grid 2" {
{"Label1" "Text One"}
{"Label2" .t2}
{"Label3" "Text three"}
{"Label4" "Text four"}
}
gridplus grid .mygrid3 -title "My Grid 3" {
{.b1} {.b2}
}
gridplus grid .mygrid4 -title "My Grid 4" {
{"Normal Text"} {"^Bold Text"} {"More Normal Text"}
}
gridplus layout .main -wtitle "Grid Example" {
.mygrid1 .mygrid2:ns
.mygrid3:ew ^
.mygrid4:ew -
}
pack .main
Grid Example 9
gridplus entry .g1 -width 20 {
{"Field one" .f1} {"Field two" .f2} {"Field three" .f3}
{"Field four" .f4} {"Field five" .f5} {"Field six" .f6}
}
gridplus entry .g2 {
{"Field 1" .f1} {"Field 2" .f2} {"Field 3" .f3}
{"Field 4" .f4} {"Field 5" .f5 15} {"Field 6" .f6}
}
gridplus entry .g3 {
{"Field I" .f1} {"Field II" .f2} {"Field III" .f3}
{"Field IV" .f4} {"Field V" .f5 20} {"Field VI" .f6}
}
gridplus entry .g4 {
{"Field 1" .f1} {&r "Button 1" .b1 +b1} {"Field 2" .f2}
{"Field 3" .f3} {&r "Button 2" .b2 -b2} {"Field 4" .f4}
}
gridplus entry .g5 -cfmt {6/14 6/14 7} -width 20 {
{"Field one" .f1} {"Field two" .f2} {"Field three" .f3}
{"Field four" .f4} {"Field five" .f5} {"Field six" .f6}
}
gridplus entry .g6 -columnformat {6/14 6/14 7} {
{"Field 1" .f1} {"Field 2" .f2} {"Field 3" .f3}
{"Field 4" .f4} {"Field 5" .f5 15} {"Field 6" .f6}
}
gridplus entry .g7 -columnformat {6/14 6/14 7} {
{"Field I" .f1} {"Field II" .f2} {"Field III" .f3}
{"Field IV" .f4} {"Field V" .f5 20} {"Field VI" .f6}
}
gridplus entry .g8 -columnformat {6/14 6/14 7} {
{"Field 1" .f1} {&r "Button 1" .b1 +b1} {"Field 2" .f2}
{"Field 3" .f3} {&r "Button 2" .b2 -b2} {"Field 4" .f4}
}
gridplus layout .without-cfmt -title "Without Column Format" {
.g1
=
.g2
=
.g3
=
.g4
}
gridplus layout .with-cfmt -title "With Column Format" {
.g5
=
.g6
=
.g7
=
.g8
}
gridplus layout .main -wtitle "Column Format Example" {
.without-cfmt:ew
.with-cfmt:ew
}
pack .main
gridplus entry .g8 -columnformat {6/14 6/14 7} {
{"Field 1" .f1} {&r "Button 1" .b1 +b1} {"Field 2" .f2}
{"Field 3" .f3} {&r "Button 2" .b2 -b2} {"Field 4" .f4}
}
Copyright © 2012 Adrian Davis.