GRIDPLUS - Example 4
Home Reference Manpage Examples Download License Contact

A More Complex Example Using Styles

Window:


Source Code:

package require gridplus 1.0
namespace import gridplus::*

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

option add *Font                 {arial 8}
option add *Entry.borderWidth    1
option add *Entry.relief         solid
option add *Entry.background     white
option add *Entry.foreground     black
option add *highlightThickness   0
option add *Gridplus.borderWidth 0
option add *Gridplus.iconFile    tkIcons.sat

gridplus style title {
   -background dodgerblue
   -labelcolor white
   -labelstyle +8,bold
}

gridplus style action_title {
   -background slategray
   -labelcolor white
   -labelstyle bold
   -linewidth  5
}

gridplus style action {
   -background lightgray
   -icon       right1wbw
   -pad        0
   -space      0
}

gridplus style work_title {
   -background white
   -labelcolor dodgerblue 
   -labelstyle +4,bold
   -pad        0
}

gridplus style work_area {
   -background white
   -borderwidth 10
} 

gridplus style work_text {
   -background white
   -pad        0 
}

gridplus style work {
   -background lightgray
}

#----------------#
# Example Screen #
#----------------#

gridplus grid .title -style title {
   {"Example"} {}
}

gridplus grid .action_title -style action_title {
   {"Actions"} {}
}

gridplus link .action -style action {
   {: "Customer" .customer}
   {: "Order" .order}
   {:right1wrw "Delivery" .delivery}
   {+ "Create Delivery" .delivery_create}
   {+ "Update Delivery" .delivery_update}
   {+ "Cancel Delivery" .delivery_cancel}
   {: "Invoice" .invoice}
   {: "Reports" .reports}
   {: "Log Off" .logoff}
}

gridplus line .action_end -style action_title

gridplus grid .action_bar -style action {
   .action_title:ew
   .action
   .action_end:ew
}

gridplus link .help -style work {
   {:help1wbw "Help" .display}
}

gridplus grid .work_title -style work_title {
   {"Create Delivery Request"}
}

gridplus grid .work_text -style work_text {
   {"^Important: "}
   {"Make sure that the delivery arrangements have been\
    \nagreed with both the Customer and the Transport\
    \nSupervisor before creating a Delivery Request."}
}

gridplus entry .order -style work -size 25 -state disabled {
   {"^Order: "} {}
   {"Order Number " .number 8}
   {"Customer Contact " .contact}
   {"Customer Company " .company}
}

gridplus entry .delivery -style work -size 25 {
   {"^Delivery: "} {}
   {"Date " .date 10 +}
   {"Contact " .contact}
   {"Company " .company}
   {"Building " .building}
   {"Street " .street}
   {"City " .city}
   {"County " .county}
   {"Post Code " .postcode 8}
}

gridplus radiobutton .send_invoice -style work -space 0 {
   {"^Send Invoice: "} {.order "With Order" +withorder} {.post "By Post" -bypost} {}
}

gridplus link .delivery_create -style work {
   {:left1wmw "Cancel" .cancel} {"Proceed" .proceed :right1wmw}
}

gridplus layout .work_area -style work_area {
   .action_bar:n .work_title
   ^             .work_text
   ^             .order:ew
   ^             .delivery:ew
   ^             .send_invoice:ew
   .help:nsew    .delivery_create:ew
}

gridplus layout .main -background white -title "Demo Application" {
   .title:ew
   .work_area
}

pack .main


Comments:

package require gridplus 1.0
namespace import gridplus::*
Loads the GRIDPLUS package and imports the commands.
option add *Font                 {arial 8}
option add *Entry.borderWidth    1
option add *Entry.relief         solid
option add *Entry.background     white
option add *Entry.foreground     black
option add *highlightThickness   0
option add *Gridplus.borderWidth 0
option add *Gridplus.iconFile    tkIcons.sat

gridplus style title {
   -background dodgerblue
   -labelcolor white
   -labelstyle +8,bold
}

gridplus style action_title {
   -background slategray
   -labelcolor white
   -labelstyle bold
   -linewidth  5
}

gridplus style action {
   -background lightgray
   -icon       right1wbw
   -pad        0
   -space      0
}

gridplus style work_title {
   -background white
   -labelcolor dodgerblue 
   -labelstyle +4,bold
   -pad        0
}

gridplus style work_area {
   -background white
   -borderwidth 10
} 

gridplus style work_text {
   -background white
   -pad        0 
}

gridplus style work {
   -background lightgray
}

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.

Note: Setting the font to "{arial 12}" gives a better look on my Linux system.

gridplus grid .title -style title {
   {"Example"} {}
}

Creates a GRIDPLUS grid named ".title with a single label. The "title" style is used. This has "white", "+8" sized, "bold" text on a "dodgerblue" background. The "+8" size means that the font size to be used is "8" points larger than the default size. The "null" cell definition allows the Grid to stretch to the right. This has the effect of left justifing the label "Example" and filling the full width of the window with the "dodgerblue" background.

gridplus grid .action_title -style action_title {
   {"Actions"} {}
}
Creates a title bar for the "actions" menu named ".action_title" using the "action_title" style. This has "white", "bold" text on a "slategray" background.

gridplus link .action -style action {
   {: "Customer" .customer}
   {: "Order" .order}
   {:right1wrw "Delivery" .delivery}
   {+ "Create Delivery" .delivery_create}
   {+ "Update Delivery" .delivery_update}
   {+ "Cancel Delivery" .delivery_cancel}
   {: "Invoice" .invoice}
   {: "Reports" .reports}
   {: "Log Off" .logoff}
}

Creates a grid of GRIDPLUS link widgets named ".action". The "action" style is used. This has black text on a "lightgray" background. This group of Link widgets is to be used as a menu. The items begining with a ":" only will have the link text preceeded by the default icon. The default icon is set in the "action" style as "right1wbw" ("right arrow, type 1, white arrow, blue background, white border). This is an icon from the "tkIcons.sat" icon library file as defined by the "*Gridplus.iconFile" option database setting in the style section of this example.

The item begining ":right1wrw" uses the specified icon instead of the default. In this case the arrow has a red background instead of blue.

The "+" widget option (which must appear is the first item if specified) will cause the Link text to be indented with a "bullet".

gridplus line .action_end -style action_title

Creates a GRIDPLUS line named ".action_end" using the "action_title" style. This style has a "slategray" background, and has the "-linewidth 5" option set.

gridplus grid .action_bar -style action {
   .action_title:ew
   .action
   .action_end:ew
}

Creates a GRIDPLUS grid to layout the action menu components using the "action" style.
gridplus link .help -style work {
   {:help1wbw "Help" .display}
}

Creates a grid of GRIDPLUS link widgets named ".help", with an associated icon ("help1wbw") using the "work" style.
gridplus grid .work_title -style work_title {
   {"Create Delivery Request"}
}
Creates a GRIDPLUS grid named ".work_title" using the "work_title" style. This style has a "dodgerblue" foreground and "-labelstyle +4,bold" set. The "+4" size means that the font size to be used is "4" points larger than the default size.

gridplus grid .work_text -style work_text {
   {"^Important: "}
   {"Make sure that the delivery arrangements have been\
    \nagreed with both the Customer and the Transport\
    \nSupervisor before creating a Delivery Request."}
}
Creates a GRIDPLUS grid named ".work_text" using the "work_text" style. The "^" prefix in "{"^Important: "}" indicates that the text in this grid cell is to be displayed with a bold attribute. The text in the other cell shows the recommended way to include newlines in GRIDPLUS labels.
gridplus entry .order -style work -size 25 -state disabled {
   {"^Order: "} {}
   {"Order Number " .number 8}
   {"Customer Contact " .contact}
   {"Customer Company " .company}
}

gridplus entry .delivery -style work -size 25 {
   {"^Delivery: "} {}
   {"Date " .date 10 +}
   {"Contact " .contact}
   {"Company " .company}
   {"Building " .building}
   {"Street " .street}
   {"City " .city}
   {"County " .county}
   {"Post Code " .postcode 8}
}

gridplus radiobutton .send_invoice -style work -space 0 {
   {"^Send Invoice: "} {.order "With Order" +withorder} {.post "By Post" -bypost} {}
}
Creates two grids of GRIDPLUS entry widgets named ".order" and ".delivery", and a grid of GRIDPLUS radiobutton widgets named ".send_invoice" all using the "work" style. This style has a "lightgray" background. The ".order" widgets are "disabled". The null cell item at the end of the first row of each grid allows the grid to be stretched horizontally so that the background color fills the cell.

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 link .delivery_create -style work {
   {:left1wmw "Cancel" .cancel} {"Proceed" .proceed :right1wmw}
}
Creates a grid of GRIDPLUS link widgets named ".delivery_create" using the "work" style. Each of the links has an associated icon image.

Note: The position of the icon names indicates the relative position of the text and the icon.

gridplus layout .work_area -style work_area {
   .action_bar:n .work_title
   ^             .work_text
   ^             .order:ew
   ^             .delivery:ew
   ^             .send_invoice:ew
   .help:nsew    .delivery_create:ew
}

gridplus layout .main -background white -title "Demo Application" {
   .title:ew
   .work_area
}

pack .main
Lays out and displays the previously created GRIDPLUS items/grids.


Copyright © 2004
Adrian Davis.