Chapter 5: Glade and Libglade | The Official GNOME 2 Developers Guide

In the previous chapters, you saw how graphical user interface development usually works: You define a system of containers, pack widgets into the containers, and configure the widget properties. If the final result is not quite what you had in mind, you have to go back and forth between your source code and testing environment when tweaking parameters.

However, you can also interactively create and customize your interface with Glade. This chapter shows you how to use Glade by way of a small example. In Section 5.1, you will create a temperature converter interface with Glade. In Section 5.2, you'll see how to attach your new interface to a program.

5.1 Glade

To start Glade, select its entry in GNOME's Applications > Programming menu, or run glade-2 from the command line. The windows in Figure 5.1 on the next page should appear.

Figure 5.1: Glade ” widget palette (left), main window (upper right), and property editor (lower right).

5.1.1 Create a Project

Aside from a toolbar, menu bar, and status bar, the main Glade window contains a list, initially empty. Every window that you create has an entry here. To create a new interface, follow these steps:

Choose Project > New in the main window. A New dialog appears.
Click the New GNOME Project button.
Check the status bar. "New project created" should appear.

Note	If you choose New GTK+ Project instead, you can use only GTK+ widgets. Furthermore, you cannot convert a GTK+ project into a GNOME project.

5.1.2 The Widget Palette

To create widgets, use the widget palette. The top of the palette has a selector tool, the center contains widget category buttons , and the lower part holds symbols representing the widgets in the current category. Figure 5.2 illustrates the three most important categories: GTK+ Basic , GTK+ Additional , and Gnome .

Figure 5.2: Glade widget palette with GTK+ Basic, GTK+ Additional, and GNOME widgets.

To get started with the temperature scale converter, you need a main window. In this case, a dialog window will do:

Choose the GTK+ Basic widget category.
Click the symbol for dialog (leftmost column, fourth from bottom). A New dialog window appears.
Leave the settings on Standard Button Layout , but choose Close from the options on the right; then click OK .

A new window named dialog1 appears; this is a preview window. It looks like a regular dialog box with a Close button, but the top portion has a gray, crosshatched texture. In addition, the new dialog shows up inside the main window. If you accidentally lose track of where the dialog window is, double-click this entry; Glade brings the window to the top.

Note	Feel free to explore the widgets for other window types (all three categories contain window widgets). If you don't recognize the symbols, use the tooltips to figure them out: Let the mouse hover for a short time.

5.1.3 Property Editor

When you click a widget or free space inside the preview, a frame pops up around the widget, and the property editor window displays the widget settings.

Note	To select a container that you can't see because its widgets fill all of its space, right-click one of these widgets. A context menu appears, and you should see submenus for the widget's containers below the Delete button. Choose Select inside one of those submenus to select a container.

You will work with the property editor more than any other part of Glade. It consists of five notebook pages (from left to right):

Widget (Figure 5.3). You can edit all of the widget's specific properties here. Because each widget class has different properties, the elements on this page change accordingly when you switch to a different class. The Name property is important; this is the name to use inside your program to talk to the widget.

Figure 5.3: Property editor (widget settings).

Note

Even though Glade picks a unique name for every widget, you should try to select your own names so that you don't have to spend time trying to figure out what widgets correspond to names such as button1 and dialog5 . Naming isn't a big deal for widgets that you never access in your program code (labels, in particular), but it can be important with certain containers.

Packing (Figure 5.4). If a widget has any packing options, they appear here. Remember that these settings depend on the widget's container; if there are are no applicable packing options, this page is empty.

Figure 5.4: Property editor (packing settings).

Note
Experimenting with these options is a great way to figure out how GTK+ packing options work.
Common (Figure 5.5). Properties that all widgets have (that is, the GtkWidget superclass properties).

Figure 5.5: Property editor (common settings).
Signals (see Section 5.2.3). You can add signal handlers to a widget here.
Accessibility . These settings are not covered in this book.

Continuing with the temperature converter:

Select the main dialog window.
Click the Widget tab in the property editor.
Change the widget name to "window."
Change the title to "Temperature Converter."
Increase the border width so that the window looks like Figure 5.6.

Figure 5.6: The empty dialog window.

Now you're ready fill in the empty space in the window with five spin buttons (and labels) for the temperatures :

Click the table symbol in the GTK+ Basic widget palette category.
Click the empty space in the preview window. A New table window appears.
Change the number of rows to 5 and the columns to 2 and click OK . Several lines should now divide the empty space.
Create a label: Click the big "A" button in the GTK+ Basic widget palette; then click the upper-left part of the empty space in the preview window.
In the property editor, change the Label property to "_Kelvin (K):" and change the use underline setting to Yes .
Repeat the previous two steps for the rest of the rows so that the preview looks like Figure 5.7.

Figure 5.7: Preview with table and labels.

Now create five spin buttons for each label:

Select the spin button symbol in the GTK+ Basic widget palette; then click a free space in the preview window.
In the property editor, change the name as appropriate (for example, enter "kelvin-spin" for the spin button next to the Kelvin label).
Set Digits to 2.
Set Numeric to Yes.
Set Value to 0.
Pick an appropriate minimum value for the button (Kelvin and Rankine, 0; Celsius, -273.15; Fahrenheit, -459.67; Reaumur, -341.44). Set the maximum value to a fairly high number.

The interface now looks reasonable, but there are still some loose ends to tie up:

Select the table.
In the property editor, set the column and row spacings to 6 so that the cells aren't mashed against one another.
For each label, change the X Align property setting to 1.0. After performing this step for each label, the preview should look like Figure 5.8.

Figure 5.8: Preview with spin buttons.
For each label, change the Focus Target property setting to the spin button next to the label. This makes the accelerator keys work properly.

This looks nice, but something's still missing. You forgot to tell the user how to use the application. Now you have a problem: Where do you put that message? It would be nice to put it above the table, but there is no empty space left.

As it turns out, a GtkDialog widget uses a GtkVBox container to store its main contents. Right now, that box (the table) appears full, but you can insert another slot to fill with a label:

Right-click the table. A context menu appears; one of the items should be a dialog-vbox1 submenu for the dialog's VBox.
Choose dialog-vbox1 > Insert Before from that menu. A new empty slot appears above the table, as shown in Figure 5.9.

Figure 5.9: Preview with empty slot above table.
Enter a label in the empty slot. You will fill this with left-justified text in the next few steps.
Change the label's Wrap Text property to Yes.
Set the X alignment to 0.
Change the label text to a descriptive message, such as the one in Figure 5.10.

Figure 5.10: Preview with instruction label.
Set Use Markup to Yes; then add <b> </b> around your message.
As a final step, select the Close button widget and change its name to "closebutton."

5.1.4 The Widget Tree

So you're finished with the interface definition. Now choose View > Show Widget Tree in the main window to see the entire widget hierarchy as a tree. A fully expanded tree resembles Figure 5.11.

Figure 5.11: Temperature converter widget tree.

Note	When you click a widget in the tree, Glade selects the widget in the preview window.

5.1.5 Clipboard

Another handy window is the clipboard, shown in Figure 5.12, accessed with the View > Show Clipboard main menu item.

Figure 5.12: Glade clipboard.

Cutting or copying a widget with an Edit or context menu item causes the widget to appear in the clipboard list. You can copy a clipboard widget back to the preview by right-clicking a slot and selecting Paste from the context menu. The clipboard is handy for making several copies of the same widget, because Glade duplicates initial widget property values (except for the name).

Warning

There is no undo feature, so be careful where you paste widgets. Glade unscrupulously writes over anything in the paste target slot.