GRIDPLUS2 - Embedded Widget Grids
Home Reference Manpage Examples Download License Contact

GRIDPLUS Embedded Widget Grids

GRIDPLUS has a facility to create a widget grid inside a cell of another widget grid. Examples 2, 4, 5 and 6 make use of this facility.

A new, much simpler, syntax for creating Embedded Widget Grids has been introduced in GRIDPLUS 2.4. For backwards compatibility the "old" syntax is still supported (Please refer to the GRIDPLUS 2.3 documentation for details of the "old" syntax).

NOTE: For those converting applications from the old syntax to the new please note that it is now not possible to specify the name of the embedded grid. The name of the grid is automatically generated. The names of the "null" array data items and the default names of the invoked procedures are now based on the parent grid. I believe that this makes for a much more sensible/consistant naming.

Syntax

||
Separates label text and embedded grid. Only required if there is to be a text label.

|:
Specifies that the link between the columns either side is fixed (does not stretch).

|>
Specifies that the link between the columns either side can stretch.

|#style
Specifies the style/optionset to be used for the embedded grid. If style is "null" the default style for the theme is used.

|&type
Specifies the default widget type to be used for the embedded grid. Acceptable values are b (Button), c (Checkbutton), d (Dropdown "combobox"), D (Dropdown "date selector"), e (Entry), l (Link), m (Menubutton), r (Radiobutton).

|(options)
Specifies widget options to be applied to all columns.

|:|
Specifies a vertical bar separator with a fixed link on either side.

|>|
Specifies a vertical bar separator with a stretch link on the left and a fixed link on right.

|<|
Specifies a vertical bar separator with a fixed link on the left and a stretch link on right.

|=|
Specifies a vertical bar separator with a stretch link on either side.

Any GRIDPLUS widget grid cell which contains any of the above items will cause an Embedded Grid to be created.

The following rules are applied:

Using Widget Option Substitution

Widget options allows the same set of options to be applied to all columns in the grid.

The options are added to each column before the item begining with "."

Example:

{"^Category " || |(&r *category) . "Business" -business |: . "Personal" -personal |: . "All" +%}

...is equvalent to...

{"^Category " || &r *category . "Business" -business |: &r *category . "Personal" -personal |: &r *category . "All" +%}

Embedded Grid/Widget/Command Naming

The embedded grids have names derived from the name of the Grid in which they are embedded.

The names are in the format:-

.mygrid-number

Where ".mygrid" is the name of the parent grid and "number" is an integer which is incremented for each Embedded Grid.

The names used for Embedded Grid Widgets and the names of commands invoked by Embedded Grid widgets follow the rules of the -basename option. In effect, they are based on the name of the parent Grid.

Examples

Embedded Grid Example 1

Window:

Source Code:

gridplus optionset Toolbutton {
   -padding   0
   -space     0
   -takefocus 0
   -widget    button
} 

gridplus entry .example -width 50 -wtitle "Example" {
   {|#Toolbutton :navback16 .back |: :navforward16 .forward}
   =
   {"Field One"                  .field-one}
   {"Field Two"                  .field-two}
   {"Radio Buttons"       || |&r . "Button One" +rb1 *rbutton |: . "Button Two" -rb2 *rbutton}
   {"Mixed Widgets"       ||  &c .cbutton-1 "Check Button"    |> |&b "Button One" .button-1    |: "Button Two" .button-2}
   {"More Mixed Widgets " ||  &d .dropdown1                   |> &b "Button Three"  .button-3}
   {"Two Buttons "        || |&b "Button Four" .button-4      |: "Button Five" .button-5 |:}
   =
   {|&e "This is a Much Longer Label Text " .field-three 35}
}

pack .example

Comments:

NOTE: In this example, additional spaces have been used to layout the elements of the entry/widget grid into aligned columns. This is not neccessary for the functioning of this facility - it is simply for clarity. It is also assumed that the reader is already familiar with the GRIDPLUS2 grid, widget, button, dropdown, entry and radiobutton.

gridplus optionset Toolbutton {
   -padding   0
   -space     0
   -takefocus 0
   -widget    button
} 

Creates an optionset called "Toolbutton". This is used later in the example.
gridplus entry .example -width 50 -wtitle "Example" {
Creates a grid of GRIDPLUS entry widgets named ".example". The default for entry width is set to "50" characters. The title of the window is set to "Example".
{|#Toolbutton :navback16 .back |: :navforward16 .forward}

The "|#Toolbutton" element specifies that an Embedded Grid, using the "Toolbutton" optionset, is created. In this case the optionset specifies that the defaiult widget type is "button" and the ttk style "Toolbutton". The "|:" item specifies that the link between the buttons will not stretch and implies that the content of the Embedded Grid will be attached to the left of the containing cell. The procudres invoked by the buttons are "example,back" and "example,forward".
{"Field One" .field-one}
{"Field Two" .field-two}

Creates two entry widgets with text labels "Field One" and "Field Two" identifiers ".field-one and "field-two" consecutively.
{"Radio Buttons" || |&r . "Button One" +rb1 *rbutton |: . "Button Two" -rb2 *rbutton}

The "||" item splits the cell into two components - The left component a text label ("Radio Buttons") the right and Embedded Grid. The "|&r" specifies that the Embedded Grid default widget is radiobutton. The "|:" item specifies that the link between the radiobuttons will not stretch and implies that the content of the Embedded Grid will be attached to the left of the containing cell. The radiobuttons are separated from each other by the default space.
{"Mixed Widgets" || &c .cbutton-1 "Check Button" |> |&b "Button One" .button-1 |: "Button Two" .button-2}

The "||" item splits the cell into two components - The left component a text label ("Mixed Widgets") the right and Embedded Grid. The "|&b" specifies that the Embedded Grid default widget is button. This demonstrates that the default widget specifier can be anywhere in the Embedded Widget definition.

This Embedded Grid contains three widgets: A checkbutton and two buttons. The "|>" item specifies that the link between the checkbutton and the first button will stretch and implies that the content of the Embedded Grid will be attached to the left -and- right of the containing cell.

The "|:" item specifies that the link between the buttons will not stretch. The buttons are separated from each other by the default space.

{"More Mixed Widgets " || &d .dropdown1 |> &b "Button Three" .button-3}

The "||" item splits the cell into two components - The left component a text label ("More Mixed Widgets") the right and Embedded Grid.

This Embedded Grid contains two widgets: A dropdown and a button. The "|>" item specifies that the link between the dropdown and the button will stretch and implies that the content of the Embedded Grid will be attached to the left -and- right of the containing cell.

{"Two Buttons " || |&b "Button Four" .button-4 |: "Button Five" .button-5 |:}

The "||" item splits the cell into two components - The left component a text label ("Two Buttons") the right and Embedded Grid. The "|&b" specifies that the Embedded Grid default widget is button.

This Embedded Grid contains two button widgets. The first "|:" item specifies that the link between the buttons will not stretch. The buttons are separated from each other by the default space. The final "|:" item specifies that the righthand button will be attached the right of the containing cell.

{|&e "This is a Much Longer Label Text " .field-three 35}

As there is no "||" the "|&e" item specifies that this is an Embedded Grid which can fill the whole of its containing cell and that the default widget is entry.


Embedded Grid Example 2

Window:

Source Code:

gridplus widget .example -wtitle "Vertical Bar Example" {
 {"^This is an example of the various Embedded Grid vertical bar options."}
 {"Column1" |:| "Column2"}
 {"Column1" |>| "Column2"}
 {"Column1" |<| "Column2"}
 {"Column1" |=| "Column2"}
}

pack .example

Comments:

This example demonstrates the various Embedded Grid vertical bar separator options.


Embedded Grid Example 3

Window:

Source Code:

proc example,folder-select {} {
   gpset .example,folder [tk_chooseDirectory]
}

gridplus entry .example -wtitle "Example" {
   {"Field One" .field-one:ew}
   {"Folder"    || |#. &e .folder 30 |: &b " ... " .folder-select 3}
   {"Field Two" .field-two:ew}
}

pack .example

Comments:

{"Folder"    || |#. &e .folder 30 |: &b " ... " .folder-select 3}
The "|#." element in this line sets the style to "." which applies the
pre-defined optionset with the same name, in this case to create a "folder selection field". Pressing the "..." button will invoke the "example,folder-select" procedure to display a tk_chooseDirectory dialog. The selected directory will set the value of the ".example,folder" field.


Copyright © 2014 Adrian Davis.