Lecture 26



Log into Linux. Copy directory
/home/hwang/cs375/lecture26
Final Project posted. Due no later than
Tuesday, May 3, 11:00am (the end of the
regularly scheduled final exam period for this
class). NO LATE PROJECTS will be accepted.
Questions?
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
1
Outline

GTK packages

Introduction to GTK toolkit

GTK "Hello World" example

Layout containers
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
2
GTK Packages



The currently installed GTK development toolkit
package is libgtk2.0-dev. For the full GNOME
development package that includes the GTK
packages, you can install the gnome-devel
package.
The supplemental reference page has links to
the GTK Home Page (GTKH), Reference
Manual (GTKR), FAQ (GTKF) and Tutorial
(GTKT) as well as a Beginner's Tutorial (GTKB)
You can find complete documentation at
http://developer.gnome.org/
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
3
Introduction to GTK


GTK+ is a multi-platform toolkit for creating
graphical user interfaces. It was initially
developed for and used by the GIMP (the GNU
Image Manipulation Program), but is now used
by several applications. It is the toolkit used by
the GNOME desktop.
You can write GTK+ applications under X on
Linux, Windows (Cygwin) and Mac. There also
is a native Windows version available.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
4
Introduction to GTK

GTK+ consists (primarily) of 3 libraries:



GLib is the low-level core library that forms the
basis of GTK+ and GNOME.
Pango is a library for layout and rendering of text,
with an emphasis on internationalization.
The ATK library provides a set of interfaces for
accessibility. By supporting the ATK interfaces, an
application or toolkit can be used with such tools as
screen readers, magnifiers, and alternative input
devices.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
5
Introduction to GTK



Under X Windows GLib depends upon the GDK
(GTK+ Drawing Kit) library which is a wrapper
around corresponding Xlib routines.
GTK+ is an object-oriented library written in C.
There are bindings for many other languages
including: C++, Perl, Python, Guile, Java, and
C#. Only the C interface will be discussed.
We will start with an example from the GTK
Tutorial.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
6
Windows and Widgets


Every GUI consists of one or more widgets
(i.e., GUI elements). There is at least one main
widget that is a window. Other widgets are
contained in or controlled by the main window
widget.
The simplest widget is a button. Today all the
examples will use buttons. Next class we will
look at other common input widgets.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
7
GTK – An Example

A minimal GTK program in first.cpp:
#include <gtk/gtk.h>
int main(int argc, char *argv[])
{
GtkWidget *window;
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtk_widget_show(window);
gtk_main ();
return 0;
}
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
8
GTK – An Example

To compile the program use:
$ gtkflags=\
`pkg­config ­­cflags ­­libs gtk+­2.0`
$ g++ ­o first first.cpp $gtkflags

pkg-config returns information about libraries.
It is used to get compiler and linker arguments:
$ pkg­config ­­cflags ­­libs gtk+­2.0
­I/usr/include/gtk­2.0 ­I/usr/lib/gtk­2.0/include ... ­lgtk­x11­2.0 ... ­ldl ­lglib­2.0
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
9
GTK – An Example


See Makefile for use of a macro for the
compilation command using pkg-config.
When we run this program, we see:
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
10
GTK – An Example


All programs must include <gtk/gtk.h> and call
gtk_init( ). gtk_init( ) does initialization and
looks for (and removes) standard GTK
arguments from the argument list.
gtk_window_new( ) creates a new
window/widget. (All GTK objects are known as
widgets.) GTK_WINDOW_TOPLEVEL
indicates that the window should undergo
window manager decoration and placement. A
default 200x200 window is created.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
11
GTK – An Example


The window is not displayed until the
gtk_widget_show( ) routine is called.
gtk_main( ) causes the program to enter the
main GTK processing loop. This call also is in
every GTK application. When control reaches
this point, GTK will sleep waiting for X events
(button or key presses), timeouts, or file IO
notifications to occur. In this example,
however, events are ignored. As a result,
killing the window does not kill the program,
which must be killed from the shell.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
12
GTK – Signals and Callbacks


Before looking at the next example, we need to
discuss signals and callbacks. GTK is an
event-driven toolkit. It sleeps in gtk_main( )
until an event occurs. Control is then passed to
the appropriate function.
When an event occurs, e.g., a mouse button
press, the widget that was pressed emits a
signal (not a UNIX process signal, but the
same terminology is used.)
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
13
GTK – Signals and Callbacks

g_signal_connect( ) is used to connect an
event (signal) to a function (signal handler):
gulong g_signal_connect(
gpointer *object, const gchar *name,
GCallback func, gpointer func_dat
);

The first argument is a pointer to the widget that
will emit the signal. The second is the signal
name. The third is the handler (a callback) to
call, the fourth is used to pass data to the
handler.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
14
GTK – Signals and Callbacks



g_signal_connect_swapped( ) is similar to
g_signal_connect( ) but is used to set up a
callback to a standard GTK function that takes
a single widget as an argument.
The signals that each widget can emit are
described in the GTK Reference Manual
(GTKR). (Don't program in GTK without it!)
Examine the helloworld.cpp program. Note
the macros used to cast objects to the correct
type.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
15
In-class Exercise

Modify the code in helloworld.cpp so that the
application does not exit when the button is
pressed, but does exit upon getting a
delete_event signal.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
16
In-class Exercise

Modify the code in helloworld.cpp so that the
button label changes to “Ouch!” when the
button is pressed and changes back to “Hello
World!” when the button is released. (See the
description of the GtkButton widget in the GTK
reference manual for a list of button related
signals and functions.) Can you make the label
changes using only a single callback routine?
(Hint: you can pass data to the handler
function.)
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
17
Layout Containers


Positioning widgets within a window can be
difficult to do right. Different users will have
different screen resolutions, fonts and colors.
We also want to allow the user to change the
size of the window and have the widgets inside
the window resize and reposition.
Modern GUI toolkits provide layout containers
(box widgets in GTK) to simplify and automate
many of these chores.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
18
Layout Containers


Boxes are invisible widget containers. The
process of putting widgets into boxes is termed
widget packing.
Horizontal and vertical boxes are available.
Widgets are packed horizontally into a
horizontal box and vertically into a vertical box.
Boxes can be (and often are) packed into other
boxes to create different layouts.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
19
Layout Containers
hbox
hbox
vbox
vbox
vbox
hbox
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
20
Layout Containers

gtk_hbox_new( ) and gtk_vbox_new( ) are
used to create layout containers (boxes):
GtkWidget *gtk_hbox_new
(gboolean homogeneous, gint spacing);

If homogeneous is TRUE each element in the
box will be given equal space. spacing is the
spacing (in pixels) between elements.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
21
Layout Containers

Objects can be added into boxes with
gtk_box_pack_start( ). This will add objects
starting at the left (hbox) or top (vbox).
gtk_box_pack_end( ) will add objects starting
at the right or bottom side.
GtkWidget *gtk_box_pack_start
(GtkBox *box, GtkWidget *child,
gboolean expand, gboolean fill,
guint padding);
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
22
Layout Containers



box is the box to be packed and child is the
object we are packing into the box.
If expand is TRUE the child is given extra
space allocated to the box. The extra space is
split among all objects with expand TRUE. fill
determines whether the objects or the space
around them expand.
padding is extra space (in pixels) to put around
the object (above the global amount (spacing)
specified in the box struct).
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
23
Layout Containers



The layout.cpp program provides a simple
example of some of these concepts.
The packbox.cpp program illustrates using
gtk_hbox_new and gtk_box_pack_start with
different arguments.
The result of running packbox with arguments
1, 2 and 3 are shown on the following slides.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
24
Layout Containers
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
25
Layout Containers
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
26
Layout Containers




For more advanced layout, GTK provides
tables and notebooks.
Tables allow widgets to be laid out in a 2D grid.
Single widgets can span multiple rows or
columns of the grid.
Notebooks are tabbed window display objects.
Refer to the “Layout Containers” section of the
reference manual for further information.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
27
In-class Exercise

Modify layout.cpp to include a “Quit” button at
the bottom of the window. Try adding the
button into an hbox and adding that into the
provided vbox. Compare to adding the button
directly into the vbox.
Tuesday, April 22
CS 375 UNIX System Programming - Lecture 26
28