GRIDPLUS - Example 4 | ![]() |
||||||
|
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::*
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 }
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"} {} }
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} }
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
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} {} }
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} }
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