Tutorial Pages‎ > ‎

Getting Started

The following code builds a basic main window of an
application with menubar, toolbar, and statusbar:
As we're running under Linux, the opening line of the script needs to instruct the system which interpreter to use for processing the remainder of the script. In this case, the tclsh is required.

Step 1

# the next line restarts using tclsh \
exec tclsh "$0" "$@"

Next, the Gnocl graphics package needs to be loaded.

Step 2

package require Gnocl

Now the process of building the UI can begin. First, build the menuing system. It will consist of a menu bar with two drop down menus, one called File and the other About. The menu itself is created with:

Step 3

set menu [gnocl::menu]

The call gnocl::menu returns a string that contains the name of the created widget. This name will be necessary in order to add various items to the menu bar. To keep this name it has to be assigned to a string variable.

In fact, the Tcl interpreter has produce a command that bears the name of the newly created menu widget. The first item New can be added to the menu using:

Step 4

$menu add [gnocl::menuItem \
    -text "%#New" \
    -tooltip "Make new" \
    -onClicked {puts "That's new!"}]

Again gnocl::menuItem returns a string but rather than storing this for later use, the value is passed directly to the newly made $menu widget, the widget command „add“ then sees to the process of attaching the menu item to the menu itself.

The creation of the menuItem itself is modified by a series of options or switched familiar to user of shell commands. As can be seen even from these three options, a lot of „under the bonnet“ coding is about to be invoked. The option „-text“ reads quite clearly, this is the text to be displauemd but it is prepeded with #%. This denotes a Gnocl „percent-string“. Specifically this meand that as well as displaying the word «new», the stock icon for this operation is also to be included. Custom graphics can also be used, but this process ensures that the new application will be comply with the current systems theme. Run the script as a different use with a different theme, the application will still comply with the users preferences. Additionally, certain processes such as New, Save, Quit and so on, have key board binding, or accelarators which speed up operationd for savvy users. Gnocl will set these up automatically unless instructed to do otherwise. Next, the tooltip option is set for this menu item. A small detail which gives any application a „professionally crafted» feel, Gnocl from the first instance allows the programmer to tap into the subtlties of the Gtk+ libraries in a way Coding in C or some other binding may deter. Finally, there is the -onClicked option followed by a simple script in curly braces. Exc ecuted in the global namespace, this is basically a set of Tcl commands. The string that follows the onClicked option is executed whenever the menu is clicked or its accelerator pressed.

The next line:

Step 5

$menu add [gnocl::menuSeparator]

..adds a separator bar into the menu, so as to cluster related options together. By custom, the quit option is always separate and it is created the same way as the above option.

Step 6

$menu add [gnocl::menuItem \
    -text "%#Quit" \
     -onClicked { exit } \
    -tooltip "Quit program"]

Now that the items for the first menu have been created, these are attached to their root menuitem, which in this instance is the very familiar File.

Step 7

set file [gnocl::menuItem \
    -text "%__File" \
    -submenu $menu]

The option above should now be clearly indicate how the menu is piecing together. The item $menu, composed of three entries, NEW, a separator and Quit are to made the subMenu for the item created and names as $file.

Now tha is menu has been built up and its name saves as $file, the original $menu variable is avialble for recyling. Using the same processes as described above, the About menu is created using the following lines of code:

Step 8

set menu [gnocl::menu]

$menu add [gnocl::menuItem \
     -text "%__About" \
     -tooltip "Show about dialog" \
     -onClicked {puts "Mini example (c) 2001 P.G. Baum"}]

set help [gnocl::menuItem \
    -text "%__Help" \
    -submenu $menu]

Most application also have a toolbar. A one or more rows of buttons or other items arranged either horizontally or vertically to speed up operations. The line:

Step 9

set toolBar [gnocl::toolBar -style both]

produces such a toolbar to which some buttons will be added. The option -style indicates that both icons and text will be show for each of the buttons contained in the toolbar.

The process of adding buttons to the toolbar is like that of building up a menu.Again a percent string is used to select a standard text and icon.

Step 10

$toolBar add item \
     -text "%#Quit" \
     -tooltip "Tooltip Quit" \
     -onClicked exit

$toolBar add space

$toolBar add item \
    -text "%#New" \
     -tooltip "Tooltip new" \
     -onClicked {puts "That's new"}

Notice, however, that the toolbar equivalent of the menu separator is a "space".

The next step is to produce a container, box into which other key elements of the UI can be placed. The name of this widget is store as $box.

Step 11

set box [gnocl::box \
-orientation vertical \
-borderWidth 0 \
-spacing 0]

By default, the box will arrange its items horizontally, but usually elements are stacked vertically, so this item needs configuring. Other defaults include chaning the spacing between any widget later added to the box and any outline drawn around the box itelf.

Now that the key elements have been created, they are ready to be inserted into the main containder. But, toplevel window needs to be first created into which all these items need to be packed before they can be displayed and interacted with.

Step 12

set win [gnocl::window \
     -child $box \
     -title "Test Application"]

The name of the widget is again is stored, this time as $win and the the box set at the window child, finally the name displayed in the window title bar is set (the default would be the name of the calling script).

In the next command, a menubar is created, the two menus $file and $help assigned as its children following which it is added to the box.

Step 13

$box add [gnocl::menuBar \
     -children [list $file $help]]

Then, of course the toolbar is added.

Step 14

$box add $toolBar

Adding the box to the window provides the opportunity to add extra widgets, even during runtime. As this is a simple „hello-world!» type application, all that is required is a label, plus of courses, some Gnocl magick to give formatted text.

Step 15

$box add [gnocl::label -text \
    {%<<span foreground="blue" size="large">Hello</span>\
    <span foreground="red" size="large">World</span>}] \
    -expand 1

Along with the menu and toolbar, another ubiquitous item for any UI is a status bar. Add one of these to the bottom of the box.

Step 16

$box add [gnocl::statusBar]

Ok, that“s the end of the script, so to comply with the rules (though the script will run without this command) the script needs to enter the mainloop.

Step 17


William Giddings,
23 Feb 2010, 14:22