GRIDPLUS: Grid/Layout
Home Reference Manpage Examples Download License Contact

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 must be 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, entries, links and radiobuttons.

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

.name
The name of widget (Example: .b1).

:icon
The name of the icon to be used (Example: :navback16). The icon name can also be null, in which case the icon specified by the -icon option is used.

|
Specifies that a vertical bar separator be created.

Note: If the label text beings with "^" the label will be displayed with bold text.

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 commands. This is to demonstrate the use of the GRIDPLUS Grid. However, GRIDPLUS commands exist to simplify creation of Grids of common TK widgets.

Note: All examples assume that the GRIDPLUS package has already been "required" and the commands imported.


Grid Example 1

Window:

Source Code:

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 -title "Grid Example" {
   .mygrid1 .mygrid2
   .mygrid3 -
}

pack .main

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 "groove" style labelled border - unless (as in the examples here) the Layout name ends with ".main", in which case the title of the window is set and the Layout retains its "flat" style 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 (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...


Grid Example 2

Window:

Source Code:

The code for this example is the same as above except for a couple of changes to the ".main" Layout...

gridplus layout .main -title "Grid Example" {
   .mygrid1    .mygrid2:ns
   .mygrid3:ew -
}

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.


Grid Example 3

Window:

Source Code:

button .b1 -text "Button 1"
button .b2 -text "Button 2"

entry .e1 -width 5
entry .e2 -width 5
entry .e3 -width 5
entry .e4 -width 5
entry .e5 -width 5
entry .e6 -width 5
entry .e7 -width 5
entry .e8 -width 5
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 -title "Grid Example" {
   .mygrid1    .mygrid2:ns
   .mygrid3:ew -
}

pack .main

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).


Grid Example 4

The code for this example is the same as above except for two additional labels in ".mygrid2"...

gridplus grid .mygrid2 -title "My Grid 2" {
  {"Label1"}
  {"Label2"}
  {"Label3"}
  {"Label4"}
}

...and a couple of changes to the ".main" Layout...

gridplus layout .main -title "Grid Example" {
   .mygrid1:ns .mygrid2
   .mygrid3:ew -
}

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.


Grid Example 5

Window:

Source Code:

for {set entry 1} {$entry <= 36} {incr entry} {
   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 -title "Grid Example" {
   .mygrid1 .mygrid2
   .mygrid3 .mygrid4
}

pack .main

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.


Grid Example 6

Window:

Source Code:

button .b1 -text "Button 1"
button .b2 -text "Button 2"

entry .e1 -width 5
entry .e2 -width 5
entry .e3 -width 5
entry .e4 -width 5
entry .e5 -width 5
entry .e6 -width 5
entry .e7 -width 5
entry .e8 -width 5
entry .e9 -width 5

gridplus grid .mygrid1 -relief solid {
  {"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 sunken {
  {.b1} {.b2}
}

gridplus layout .main -title "Grid Example" {
   .mygrid1:ns .mygrid2
   .mygrid3:ew -
}

pack .main

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 "groove", though this can be overriden using the option database.


Grid Example 7

Window:

Source Code:

button .b1 -text "Button 1"
button .b2 -text "Button 2"

entry .e1 -width 5
entry .e2 -width 5
entry .e3 -width 5
entry .e4 -width 5
entry .e5 -width 5
entry .e6 -width 5
entry .e7 -width 5
entry .e8 -width 5
entry .e9 -width 5

gridplus grid .mygrid1 -borderwidth 0 {
  {"Label1" .e1} {"Label2" .e2} {"Label3" .e3}
  {"Label4" .e4} {"Label5" .e5} {"Label6" .e6}
  {"Label7" .e7} {"Label8" .e8} {"Label9" .e9}
}

gridplus grid .mygrid2 -labelstyle bold/ -borderwidth 0 {
  {"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 -title "Grid Example" {
   .mylayout
   .mygrid3:ew
}

pack .main

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, but in this case -borderwidth 0 is also set so that Grids fit closer to the edge of the container (".mylayout"). The labels in ".mygrid2" have the -labelstyle bold option set (See Grid Example 8) for clarity.


Grid Example 8

Window:

Source Code:

button .b1 -text "Button 1"
button .b2 -text "Button 2"

entry .e1 -width 5
entry .e2 -width 5
entry .e3 -width 5
entry .e4 -width 5
entry .e5 -width 5
entry .e6 -width 5
entry .e7 -width 5
entry .e8 -width 5
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 -title "Grid Example" {
   .mygrid1    .mygrid2:ns
   .mygrid3:ew ^
   .mygrid4:ew -
}

pack .main

Comments:

This example demontrates a number of other GRIDPLUS Grid/Layout options:-


Copyright © 2004 Adrian Davis.