Source Code:

package require gridplus 1.0
namespace import gridplus::*

#---------------#
# Style Section #
#---------------#

option add *Entry.borderWidth    1
option add *Entry.relief         solid
option add *Gridplus.borderWidth 0

gridplus style title {
   -background black
   -labelcolor white/black
   -labelstyle 12,bold
}

gridplus style actions {
   -labelstyle bold
   -background lightskyblue
}

gridplus style sections {
   -labelcolor white
   -labelstyle bold
   -linkcolor  white
   -background dodgerblue
}

gridplus style work_area {
   -background   lightblue
   -buttoncolor  /lightblue
   -buttonrelief flat
}

#----------------#
# Example screen #
#----------------#

gridplus grid .title -style title {
   {"Add Customer"} {}
}

gridplus link .actions_customer -style actions {
   {"Actions"}
   {+ "Add Customer" .add}
   {+ "Edit Customer" .edit}
   {+ "Delete Customer" .delete}
   {}
}

gridplus link .sections -style sections {
   {"Sections"}
   {+ "Customer" .customer}
   {+ "Order" .order}
   {+ "Invoice" .invoice}
   {+ "Reports" .reports}
   {} {}
}

gridplus entry .data -style work_area -size 25 {
   {"First Name " .firstname +}
   {"Last Name" .lastname}
   {""}
   {"Building" .building}
   {"Street" .street}
   {"City" .city}
   {"State" .state}
   {"Zip" .zip 8}
}

gridplus line .line -borderwidth 2

gridplus button .add_customer -style work_area -size 60 {
   {.proceed :actitemadd16 "Proceed"} {.cancel :actcross16 "Cancel"} {.help :acthelp16 "Help"}
}

gridplus layout .work_area -style work_area {
   .data
   .line:ew
   .add_customer
}

gridplus layout .main -pad 0 -title "Demo Application" {
   .title:ew              -
   .actions_customer:nsew .work_area:ns
   .sections:nsew         ^
}

pack .main

Comments:

package require gridplus 1.0
namespace import gridplus::*

Loads the GRIDPLUS package and imports the commands.

option add *Entry.borderWidth    1
option add *Entry.relief         solid
option add *Gridplus.borderWidth 0

gridplus style title {
   -background black
   -labelcolor white/black
   -labelstyle 12,bold
}

gridplus style actions {
   -labelstyle bold
   -background lightskyblue
}

gridplus style sections {
   -labelcolor white
   -labelstyle bold
   -linkcolor  white
   -background dodgerblue
}

gridplus style work_area {
   -background   lightblue
   -buttoncolor  /lightblue
   -buttonrelief flat
}

Sets options and styles. These are used to define the "look" of the application.

This section is shown separately as this code need only be executed once (as a part of the application initialisation), regardless of how many screens/windows the application uses.

gridplus grid .title -style title {
   {"Add Customer"} {}
}

Creates a GRIDPLUS Grid with a single label. The "title" style is used. This has white, "12" sized text on a black background. The "null" cell definition allows the Grid to stretch to the right. This has the effect of left justifing the label "Add Customer" and filling the full width of the window with the "black" background.

gridplus link .actions_customer -style actions {
   {"Actions"}
   {+ "Add Customer" .add}
   {+ "Edit Customer" .edit}
   {+ "Delete Customer" .delete}
   {}
}

Creates a grid of GRIDPLUS link widgets named ".actions_customer". The "actions" style is used. This has "bold" text on a "lightskyblue" background. This group of Link widgets is to be used as a menu. The first cell simply contains a label ("Actions"), which is displayed in "bold" text as specified in the style. The next three cells create the Link widgets. The "+" widget option (which must appear is the first item if specified) will cause the Link text to be indented with a "bullet". The "null" cell definition allows the bottom of the Grid to stretch downwards (filling the space with the "lightskyblue" background).

gridplus link .sections -style sections {
   {"Sections"}
   {+ "Customer" .customer}
   {+ "Order" .order}
   {+ "Invoice" .invoice}
   {+ "Reports" .reports}
   {} {}
}

Creates a grid of GRIDPLUS link widgets named ".sections". The "sections" style is used. This has "bold", "white" text on a "dodgerblue" background. This group of Link widgets is also to be used as a menu. The first cell simply contains a label ("Sections"), which is displayed in "bold", "white" text as specified in the style. The next three cells create the Link widgets. The "+" widget option (which must appear is the first item if specified) will cause the Link text to be indented with a "bullet". The "null" cell definitions allows the bottom of the Grid to stretch downwards and sideways (filling the space with the "dodgerblue" background).

gridplus entry .data -style work_area -size 25 {
   {"First Name " .firstname +}
   {"Last Name" .lastname}
   {""}
   {"Building" .building}
   {"Street" .street}
   {"City" .city}
   {"State" .state}
   {"Zip" .zip 8}
}

Creates a grid of GRIDPLUS entry widgets named ".data".

Seven entry widgets are created: Generally for GRIDPLUS entry the first two items of each entry detail are the label text and the widget Identifier. The rest of the items are for options specific to the entry.

For Example: "{"First Name" .firstname +}".

"First Name" is the label text to be associated with an entry with Identifier ".firstname". The entry widget is actually created with the name ".data,firstname". The item begining with a dot (".") is considered to be the entry Identifier. In this case the leftmost item is the label and the next the Identifier. This causes the label to be to the left of the associated entry. If the items were reversed the label would be to the right of the entry. The "+" option gives this entry focus.

The number option "8" for widget ".zip", overrides the default size and sets this entry to have a size of 8 characters.

All of the entry widgets will have a "solid", "1" unit width outline as specified by the "option add" commands in the style section of the script.

The layout of the entry widgets in the window matches the layout of the entry details in the code. In this case they are one above the other (vertical) and will appear in the window accordingly as a single column.

gridplus line .line -borderwidth 2

Creates a GRIDPLUS line called ".line". "-borderwidth 2" needs to be set as the default for the border width has been set to zero by the "option add *Gridplus.borderWidth 0" option database setting in the "Style Section".

gridplus button .add_customer -style work_area -size 60 {
   {.proceed :actitemadd16 "Proceed"} {.cancel :actcross16 "Cancel"} {.help :acthelp16 "Help"}
}

Creates a grid of GRIDPLUS button widgets named ".add_customer.

Three button widgets are created: Each of the button widgets is a compound image/text button. To create a compound button it is only neccessary to specify an icon and a text string. In this case the command invoked by the button will be based on the name of the button Grid and the name of the icon.

For example: "{:actitemadd16 "Proceed"}".

In this case the invoked command will be: "add_customer,actitemadd16".

This example however also specifies explicitly the widget ID.

For example: "{.proceed :actitemadd16 "Proceed"}".

In this case the invoked command will be: "add_customer,proceed". The button will have the "actitemadd16" icon to the left (default) with the text "Proceed" to the right.

This method allows for more readable code, but has (just a little) extra typing.

The layout of the button widgets in the window matches the layout of the button details in the code. In this case they are one next to the other (horizontal) and will appear in the window accordingly as a single row.

gridplus layout .work_area -style work_area {
   .data
   .line:ew
   .add_customer
}

Set workarea layout.

gridplus layout .main -pad 0 -title "Demo Application" {
   .title:ew              -
   .actions_customer:nsew .work_area:ns
   .sections:nsew         ^
}

Layout the previously created GRIDPLUS widgets in a Layout called ".main". As with GRIDPLUS grids the title option would normally add a titled border around its contents, but if the name of the Layout ends width ".main" the title option sets the window title instead.

The ":ew" suffix on ".title:ew" causes the space between the widgets in the ".title" Grid to stretch in an east/west (horizontal) direction to full width of the window.

The layout of the Grids in the window matches the layout of the Grid details in the code.

pack .main

Displays the window contents.