Glade Packing Tutorial

Learn how to use the Glade box container to pack widgets into a window in this Glade packing tutorial. Use widget packing instead of a fixed grid.

Glade Fixed Grid Window vs. Glade Packing Window

The images below show a comparison between two windows. One of the windows was created using a fixed grid, and the other window was created using packing. When the windows are resized the packed window automatically positions the widgets, whereas the fixed grid window leaves the widgets in the same place.

Glade Fixed Grid Window (left) vs. Glade Packing Window (right) Windows Enlarged in Size
Glade Fixed Grid Window (left) vs. Glade Packing Window (right) Windows Enlarged in Size
Glade Fixed Grid (left) vs. Glade Packing (right) Windows Reduced to Minimum Size
Glade Fixed Grid (left) vs. Glade Packing (right) Windows Reduced to Minimum Size

In both images the window on the left is the window created in the GTK 3 C code ‘hello world’ tutorial using Glade 3 which uses a fixed grid. The window on the right is the window that will be created in this tutorial.

What is Packing in GTK?

Packing is a method of placing widgets in GTK and is used to position widgets in a window. Packing is usually done by creating boxes to place widgets in. Boxes are invisible widgets that can contain other widgets. They can be vertical or horizontal. Boxes can be placed inside other boxes to make the required number of areas available for placing widgets.

By default a new GTK window can only contain one widget. A container widget such as a fixed grid or box must be placed in the window in order to place other widgets onto the window.

In Glade, boxes are placed by selecting the Box widget under the Containers menu of the left widget pane. When a box is placed in a window, the number of items, corresponding to the number of widgets to be placed in the box, can be selected. The Orientation of the box can then be selected, either Vertical or Horizontal under the General tab of the Box Properties. Orientation determines whether widgets will be placed one above the other or next to each other.

Packing in GTK is a concept that needs some getting used to. Follow the tutorial below to see how to place a box  to pack widgets into. Compare it to the fixed grid example. Run the fixed grid window application and the application from this tutorial and then try resizing the application windows to see the difference.

With more advanced applications and widgets the advantages of packing will become more obvious. Packing has some built in intelligence which is easy to see when placing more advanced widgets such as menu bars, scrolled windows and status bars. These widgets will be covered in later tutorials.

Tutorial Prerequisites

This tutorial follows the same format as the GTK+ 3 C code “hello world” tutorial using Glade 3 on this website. The project is created from the GTK+ 3 Glade 3 template files. Be familiar with the articles and tutorials listed below before continuing with this tutorial.

Glade Packing Example

Follow these tutorial steps to create a Glade window that uses the Glade box container for packing widgets instead of a fixed grid.

1. Start a New Project

Start a new project by making a copy of the GTK+ 3 Glade C programming template files.

Rename the template folder to packing. Open the makefile and rename the project to packing at the top of the make file as shown below.

Your project folder should now look as follows.

Glade Packing Project Structure
Glade Packing Project Structure

2. Edit the Glade File

Open the window_main.glade file in the glade folder using the Glade 3 editor.

2.1 Add the Box Container to the Window

Click Box under Containers in the left pane of Glade and then click the main window in Glade. A dialog box pops up asking for the number of items. Leave the value at the default of 3 and then click the Create button.

Inserting a Glade Box Container
Inserting a Glade Box Container

The main window will now appear to be divided into three horizontal parts.

2.2 Add Two Text Labels

Drag and drop two Label widgets from the left pane in Glade under Control and Display into the first and second box areas of the main window.

Change the label IDs and text to the same names used in the GTK+ 3 C code Hello World tutorial using Glade 3 (as described below). This is so that we can use the same C code with this project, but see how Glade packing works.

Change the ID of the first label to lbl_hello and the label text to as done in the above mentioned project.

Change the ID of the second label to lbl_count and the text to

Your main window in the Glade editor should now look as follows.

Glade Window After Adding Labels
Glade Window After Adding Labels

2.3 Add a Button

Drag and drop a Button widget from the left pane in Glade (under Control and Display) into the last (bottom) area of the box widget in the main window.

Change the button ID to btn_hello and the button text to Hello.

The button now spans the width of the window. To center the button, click the Common tab under Button Properties in the right bottom pane of Glade. Scroll down to find the Widget Spacing heading and change Horizontal: from Fill to Center as shown in the image below.

Changing Widget Spacing in Glade
Changing Widget Spacing in Glade

The main window should now look as follows.

Widgets in Main Window
Widgets in Main Window

2.4 Change the Main Window Width and Title

If the main window is clicked in the Glade editor, the GtkBox that we inserted will be selected because is was placed on top of the main window. To select the main window, use the top right pane and click window_main GtkWindow.

Select the General tab on the bottom right pane in Glade. Scroll down to find the default width and height. Change the default width to 180. Uncheck the default height box.

Change the window title from Template Window to Packing under Title (above the width and height settings).

Changing the Glade Main Window Width and Title
Changing the Glade Main Window Width and Title

2.5 Connect the Button Signal

Select the button by clicking it. Click the Signals tab in the bottom right pane of Glade. Under GtkButton, find clicked. Click the text next to clicked under the Handler heading that says <Type here>.  Click it again to edit it and start typing on. Press the down arrow to select the name suggested by Glade which should be on_btn_hello_clicked. Press enter to select the text. Press enter again to set the text.

Connecting the Glade Button Clicked Signal
Connecting the Glade Button Clicked Signal

Save the changes and preview the window by clicking the cog icon on the top Glade toolbar.

3. Application C Code

Copy and paste the same code from the GTK+ 3 C code Hello World tutorial using Glade 3 project into main.c in the src folder. The code is included below.

4. Build and Run the Project

Open a terminal window and change to the directory that your project is in. Build the project by entering make in the terminal window.

Run the project by entering ./packing into the terminal window or by double-clicking the packing application icon in the project folder from the file manager.

Clicking the Hello button should display “Hello, world!” in the first text label and increment a count in the second text label. The window can be resized and the widgets will now stay in the middle of the window horizontally.

Packing Application Window
Packing Application Window

4 thoughts on “Glade Packing Tutorial”

  1. Hey!
    This blog is a lifesaver for me!
    I was wondering if you could do a quick tutorial on combo boxes.
    I have managed to create it and give it a list using glade, however, I can not seem to read the selected text from it.

    Thanks a lot!

  2. I’m working through these tutorials.
    They’re a great way to come up to speed!
    Please keep them coming.

  3. As I noted in a previous comment, you have made clear a topic I’ve had trouble with for quite some time. Your tutorials are clear and simple, taking steps that are easy to follow. If I encounter any doubts, your screen shots with numbers make obvious what it is I’m supposed to be doing. All of this is very helpful.

    I have one comment/question. This tutorial was to be on packing, but we never actually discussed it. Evidently adding a box somehow involves packing, but the connection isn’t clear to me. Perhaps you could spell it out for me?

    But either way, you have greatly helped me learn this stuff. Thanks.

    1. Baruch, I have updated the packing tutorial with a section called What is Packing in GTK? (near the top of the page) which hopefully explains packing a bit better. Thanks again for the feedback, it has helped to improve the tutorial for everyone.

Leave a Reply

Your email address will not be published. Required fields are marked *