| GRIDPLUS2 - Example 4 | ![]() |
||||||
|
| An Example Using Notebook, Images and Nested Widget Grids |
Windows:
Source Code:
option add *Gridplus.widgetWidth 16
gridplus widget .preferences -space 0 {
{"^E-mail"} {=}
{:mail16} {"Change the apperence of messages and the way they are handled."}
{} {{&wb {"Junk E-mail..." .junk} {"E-mail Options..." .options}} .email:e}
{"^Calendar"} {=}
{:caltoday16} {"Customize the appearance of the Calendar."}
{} {{&w {&c .reminder "Default Reminder: "} {&d .reminder-time} {&b "Calendar Options..." .options}} .calendar:ew}
{"^Tasks"} {=}
{:caltodo16} {"Change the appearance of tasks."}
{} {{&w {"Reminder time: " ""} {{&w {&d .reminder-time} {&b "Task Options..." .options}} .task:e}} .:ew}
}
gridplus widget .security -space 0 {
{"^Encrypted E-mail"} {=}
{:actlock16} {&c .encrypt "Encrypt contents and attachments for outgoing messages"}
{} {&c .digital-signature "Add digital signature to outgoing messages"}
{} {&c .send-clear-text "Send clear text signed message when sending signed messages"}
{} {&c .request-receipt "Request S/MIME receipt for all S/MIME signed messages"}
{} {{&w {"Default setting: "} {&d .default-setting} {&b "Settings..." .settings}} .encrypted}
{"^Security Zones"} {=}
{:appbrowser16} {"Security zones allow you to customize whether scripts and active<n>content can be run in HTML messages"}
{} {{&w {"Zone: "} {{&w {&d .type} {&b "Zone Settings..." .settings}} .zone:e}} .:ew}
}
gridplus notebook .user {
"Preferences" .preferences
"Security" .security
}
gridplus button .action -width 12 {
{"Ok" .ok} {"Cancel" .cancel}
}
gridplus layout .main -wtitle "Options" {
.user
.action:e
}
pack .main
Comments:
package require gridplus 2.0 namespace import gridplus::*
option add *Gridplus.widgetWidth 16
gridplus widget .preferences -space 0 {
{"^E-mail"} {=}
{:mail16} {"Change the apperence of messages and the way they are handled."}
{} {{&wb {"Junk E-mail..." .junk} {"E-mail Options..." .options}} .email:e}
{"^Calendar"} {=}
{:caltoday16} {"Customize the appearance of the Calendar."}
{} {{&w {&c .reminder "Default Reminder: "} {&d .reminder-time} {&b "Calendar Options..." .options}} .calendar:ew}
{"^Tasks"} {=}
{:caltodo16} {"Change the appearance of tasks."}
{} {{&w {"Reminder time: " ""} {{&w {&d .reminder-time} {&b "Task Options..." .options}} .task:e}} .:ew}
}
The "^" prefix used on "^E-mail", "^Calendar" and "^Tasks" causes the labels to be printed in a bold font. "=" creates a horizontal line. The ":" prefix used on ":mail16", ":caltoday16" and ":caltodo16" causes the the specified ICONS images to be displayed.
The "{{&wb {"Junk E-mail..." .junk} {"E-mail Options..." .options}} .email:e}" column creates an embedded button widget grid ("&wb") named ".email" which is anchored to the the east (right) side of the column (":e"). Two buttons are created; ".junk" and ".options".
>> The buttons invoke procedures named email,junk and email,options.
The "{{&w {&c .reminder "Default Reminder: "} {&d .reminder-time} {&b "Calendar Options..." .options}} .calendar:ew}" column creates an embedded widget grid named ".calendar" which is anchored to both the east (right) and west (left) sides of the column (":ew"). The grid contains three widgets; A checkbutton ("&c") named ".reminder", a dropdown list ("&d") named ".reminder-time" and a button ("&b") named ".options".
>> The checkbutton value is referenced as $(.calendar,reminder) and the dropdown as $(.calendar,reminder-time). The button invokes a procedure named calendar,options.
The "{{&w {"Reminder time: " ""} {{&w {&d .reminder-time} {&b "Task Options..." .options}} .task:e}} .:ew}" column creates embedded and nested widget grids. The "outer" embedded grid is named ".". This is shorthand that specifies that the default (system generated) named should be used. Normally not specifying a name will cause this to happen, but in this case we also want to be able to specify the east/west anchor option (":ew") - a name is required when using an anchor suffix, otherwise it will look like an icon/image is required. An explicitly specified name could be used, but as it is not necessary to reference the widgets in this grid this would just be extra typing! The "inner" embedded grid is named ".task" which is anchored to the east (right) side of the column (":e").
The nested embedded grids are required to allow the "Reminder time:" label to be aligned to the left of the column, while The dropdown and the button are aligned to the right of the column directly under those in an above row.
>> The dropdown value is referenced as $(.task,reminder-time). The button invokes a procedure named task,options.
Note: When it is required that a label terminates with a colon (":"), the colon must be followed by a space otherwise it will be treated as an anchor specification delimeter.
gridplus widget .security -space 0 {
{"^Encrypted E-mail"} {=}
{:actlock16} {&c .encrypt "Encrypt contents and attachments for outgoing messages"}
{} {&c .digital-signature "Add digital signature to outgoing messages"}
{} {&c .send-clear-text "Send clear text signed message when sending signed messages"}
{} {&c .request-receipt "Request S/MIME receipt for all S/MIME signed messages"}
{} {{&w {"Default setting: "} {&d .default-setting} {&b "Settings..." .settings}} .encrypted}
{"^Security Zones"} {=}
{:appbrowser16} {"Security zones allow you to customize whether scripts and active<n>content can be run in HTML messages"}
{} {{&w {"Zone: "} {{&w {&d .type} {&b "Zone Settings..." .settings}} .zone:e}} .:ew}
}
The "^" prefix used on "^Encrypted E-mail" and "^Security Zones" causes the labels to be printed in a bold font. "=" creates a horizontal line. The ":" prefix used on ":actlock16" and ":appbrowser16" causes the the specified ICONS images to be displayed.
Four checkbuttons are created named ".encrypt", "digital-signature", ".send-clear-text" and ".request-receipt".
The "{{&w {"Default setting: "} {&d .default-setting} {&b "Settings..." .settings}} .encrypted}" column creates an embedded widget grid named ".encrypted". The grid contains two widgets; a dropdown list ("&d") named ".default-setting" and a button ("&b") named ".settings".
>> The dropdown list value is referenced as $(.encrypted,default-setting). The button invokes a procedure named encrypted,settings.
The "<n>" in the "{"Security zones allow you to customize whether scripts and active<n>content can be run in HTML messages"} column causes the following text to be on a new line.
The "{{&w {"Zone: "} {{&w {&d .type} {&b "Zone Settings..." .settings}} .zone:e}} .:ew} column creates embedded and nested widget grids. The "outer" embedded grid is named ".". This is shorthand that specifies that the default (system generated) named should be used. Normally not specifying a name will cause this to happen, but in this case we also want to be able to specify the east/west anchor option (":ew") - a name is required when using an anchor suffix, otherwise it will look like an icon/image is required. An explicitly specified name could be used, but as it is not necessary to reference the widgets in this grid this would just be extra typing! The "inner" embedded grid is named ".zone" which is anchored to the east (right) side of the column (":e").
The nested embedded grids are required to allow the "Zone:" label to be aligned to the left of the column, while The dropdown and the button are aligned to the right of the column directly under those in an above row.
>> The dropdown value is referenced as $(.zone,type). The button invokes a procedure named zone,settings.
gridplus notebook .user {
"Preferences" .preferences
"Security" .security
}
gridplus button .action -width 12 {
{"Ok" .ok} {"Cancel" .cancel}
}
>> The buttons invoke procedures called action,ok and action,cancel.
gridplus layout .main -wtitle "Options" {
.user
.action:e
}
The "-wtitle" option sets the name of the window to "Options". The ".user" notebook is above the ".action" buttons. The buttons are anchored to the east (right) side of the layout (":e").
pack .main