Getting Started with Quickly

In every program, you can use buttons, scrollbars and other interactive things to click on to construct your program interfaces. These building blocks for creating interfaces are called widgets, and they are part of the GTK toolkit.

First, let's make some changes to the user interface to remove some unneeded widgets. You also will want to add a text box widget. To edit your user interface, use a program called Glade, which lets you visually construct your interface by pointing and clicking. Later, you can hook different widgets up to code that do interesting things. First, load Glade with:

quickly glade

When Glade pops up, it should look eerily similar to Figure 2. (Note: in Quickly 0.4, the command is quickly design.)

Figure 2. Glade

Glade has a few components to its interface. In the middle, you can see the current interface on which you are working. There, you can click on widgets to highlight them, move them around, delete them and more. The collection of icons on the left of the main Glade interface is called the Tool Palette, and it provides a wide range of widgets you can use in your application. Simply click on a widget, and then click in your application window to add it.

To the right of the Glade interface are two main areas. At the top, you can see the widget hierarchy. This shows that widgets are part of other widgets. Many widgets act as containers for others. As an example, a button typically has a label on it with some text and the label (a gtk.Label) sits inside the button (a gtk.Button).

Below the widget hierarchy is a collection of tabs that all reflect settings for the currently selected widget. As an example, if you click on the image of the circle of friends (the Ubuntu logo) in your application interface in Glade, you can see the contents of the widget settings area adjust to show the available settings for a GTK image widget. If you click on the text above the image (which is called a GTK Label), you will see the settings reflect that widget too.

Now, let's adjust the interface to reflect this simple application. Having clicked on the label, change the text that is displayed by looking at the widget settings on the right of the main Glade window, and look for the label option. In there, delete the existing text, and enter the following text: “Type in a search term below:”. You should see the label in your user interface change.

With the label complete, you don't really need the circle of friends image, so click it and press the delete key. When the image is deleted, you will see a gray space open up behind it. This is an empty part of your interface where you can put another widget. It's also rather convenient, because you will want to fill this space with a text entry widget where your users can type in their search terms.

To add a widget, use the tool palette area on the left side of the main Glade interface window. In the Control and Display section, hover over the icons until you find the Text Entry item (typically, it's the third icon down on the left). Click it, and then click in the gray space that opened up when you deleted the image. You now should see the text entry appear, and your user interface should look like Figure 3.

Figure 3. Text Entry

With the widget there, you should name it. All widgets in your interface can be referenced throughout your code, and you often will use this name to reference them. To do this, go to the widget settings area on the right of the Glade interface, and in the Name option, enter “search_box” as the name. You can call the widget whatever you like, but I usually refer to what it does (for example, search) and then use an underscore and add the description of the widget (for example, “box” for a text box). This makes it easy to determine what the widgets do when reading your code.

Before continuing, let's take a brief break from the tools to discuss a key aspect of how graphical programs work—a technique known as Event Driven Programming. It's a fairly simple idea. When users interact with one of the widgets in your program, it will trigger behavior that you want. For instance, in this example program, you want users to enter a search term into the text box, and when they press the Enter key, the program will search for the term in a Web browser.

When you interact with a widget in a certain way, it generates a signal to indicate what you did to the widget. In this case, you are interacting with a text box widget, and there are a range of signals for different ways of interacting with it, such as copying text to the clipboard, pasting text in there, moving the cursor with the arrow keys, typing in a letter and more. This example application is specifically intended to search Google when users press the Enter key (pressing Enter typically indicates they have finished typing), so it's a good time to trigger the desired behavior.

The way this works is you will use Glade to specify which handler in your program code you want to call when a particular signal is generated. In this case, the signal that is generated when you press the Enter key is called activated, and soon you are going to create a handler called search_for_term in your code to respond to the signal.

To make this connection, ensure that the text box currently is highlighted in Glade, and in the widget settings, click the Signals tab. There you will see a list of signals in the Signal column. Now, click in the space to the right of the activated signal, and in the Handler column, enter “search_for_term” as your handler. Now, click File→Save to save your work in Glade.