Question

In this part of the Tcl/Tk tutorial, we will introduce the Tk toolkit and create our first programs.

The purpose of this tutorial is to get you started with the Tk toolkit with the Tcl language. Images used in this tutorial can be downloaded here . I used some icons from the Tango icons pack of the Gnome project.

Tk

Tk is an open source, cross-platform widget toolkit that provides a library of basic elements for building a graphical user interface (GUI). The first public release of Tk was in 1991. Tk is an extension for the Tcl language. This means that Tk extends the Tcl language with additional commands for building user interfaces. There are bindings for several other languages including Ada, Perl, Ruby, Python, or Common Lisp. The Tk library is often referred with its main language as Tcl/Tk.

Tcl

Tcl is a string based scripting language. The source code is compiled into bytecode, which is later interpreted by the Tcl interpreter. It was created by John Osterhout in 1988. The purpose was to create a language which is easily embeddable into applications. But it is often used outside its original area. The language is commonly used for rapid prototyping, scripted applications, GUIs, or testing. The Tcl stands for tool command language, where the source code of a Tcl script consists of commands.

Tcl is a procedural language. It has some functional features. OOP support is planned for the next official release.

The official web site for both Tcl and Tk is tcl.tk

Simple example

In our first example, we will show a basic window on the screen.

#!/usr/bin/wish

frame .fr

wm title . Simple
wm geometry . 250x150+300+300

While this code is very small, the application window can do quite a lot. It can be resized, maximised, or minimised. All the complexity that comes with it has been hidden from the application programmer.

#!/usr/bin/wish

The wish is a Tcl/Tk interpreter. It understands both Tcl and Tk commands.

frame .fr   

The frame widget is created. The frame is a Tk command to create a frame widget. The argument to the command is the widget path name. The widget path name begins with a dot character. This character stands for the main application window. In Tk widgets form a hierarchy. The .fr means that the frame widget is placed inside the main application window. Widget path is a string starting with a dot and consisting of several names separated by dots. These names are widget names that comprise widget's hierarchy.

wm title . Simple

The wm command is used to interact with a window manager. This code line sets a window title.

wm geometry . 250x150+300+300

Here we set the size for the window and place it on the screen. The first two numbers specify the width and height of the window. The third and fourth parameters are the x, y coordinates on the monitor screen.

Figure: Simple window

Centering window

This script centers a window on the screen.

#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we center a window
# on the screen.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


set width 250
set height 150
set x [expr { ( [winfo vrootwidth  .] - $width  ) / 2 }]
set y [expr { ( [winfo vrootheight .] - $height ) / 2 }]


wm title . "Center" 
wm geometry . ${width}x${height}+${x}+${y}

We need to have the size of the window and the size of the screen to position the window in the center of the monitor screen.

set width 250
set height 150

These are the width and height values of the application window.

set x [expr { ( [winfo vrootwidth  .] - $width  ) / 2 }]
set y [expr { ( [winfo vrootheight .] - $height ) / 2 }]

Given its width and height, we determine the x , y coordinates for a centered window.

wm geometry . ${width}x${height}+${x}+${y}

The window is placed on the screen.

Quit button

In the last example of this section, we will create a quit button. When we press this button, the application terminates.

#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# This program creates a quit
# button. When we press the button,
# the application terminates. 
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


button .hello -text "Quit" -command { exit }
place .hello -x 50 -y 50 


wm title . "Quit button" 
wm geometry . 250x150+300+300

We position a button on the window. Clicking on the button will terminate the application.

button .hello -text "Quit" -command { exit }

The button widget is created. The label for the button is provided with the -text option. The -command option specifies the procedure to be executed, when the button is pressed. In our case the application is terminated with the built-in exit command.

place .hello -x 50 -y 50 

We use the place geometry manager to position the button in absolute coordinates. 50x50px from the top-left corner of the root window.

Figure: Quit button

Reference

The wikipedia.org and tcl.tk were used to create this tutorial.

This section was an introduction to the Tcl/Tk.