GTK+ 3 C Program using Glade 3

This article shows how to create a C program that uses the GIMP Toolkit (GTK+)  version 3 to display a window that is created using the Glade 3 user interface designer.

A window is designed using Glade 3 which is saved as a .glade XML file. A C program then opens the glade file when the compiled C program is run and uses it to display the designed window. This avoids having to lay out the window programmatically in the C code itself.

The GTK+ 3 C program using Glade 3 example shows the minimum code needed to display a GUI window with Glade and GTK+.

Creating a Window in Glade

Glade can be installed on a Debian based system such as Ubuntu or Linux Mint with the following command:

To create a window in Glade, start the Glade application and follow the steps below.

1. Create a Top Level Window

Click the Window icon in the Toplevels section of the left palette.

Creating a Top Level Window in Glade for the GTK+ 3 C Program using Glade 3
Creating a Top Level Window in Glade

A new window will appear in Glade with its properties displayed in a pane at the right of the Glade editor window.

2. Change the Window ID

We can now optionally change the window ID. This is the name that the window will be referred to in the C code. In the image below it is changed from the default name of window1 to window_main. The change is made in the Window Properties pane at the right of the Glade window.

Change Glade Window ID
Change Glade Window ID

3. Change the Default Window Size

The default size of the window can optionally be changed. This will be the size of the window when it is created by the C program.

The default window size is changed by scrolling down the General tab of the Window Properties pane and then checking the two checkboxes Default Width and Default Height. The width and height values next to the checkboxes can then be changed. The image below shows the window size being changed to 640 pixels wide by 480 pixels high.

Changing the Default Window Size in Glade
Changing the Default Window Size in Glade

 4. Connect a Callback Function to the destroy Signal

When the window that is currently being designed in Glade is displayed by the C program, it will emit a destroy signal when the window is closed. A callback function needs to be connected to the destroy signal that will run when the window is closed.

To add a callback function, click the Signals tab in the Window Properties pane of Glade. Click the arrow next to GtkWidget to expand the list and then scroll down to destroy. Click the text that says Type here twice under the Handler heading. Text can now be typed into this field. Start by typing on — Glade will now suggest a name for the callback function that can be selected by pressing the keyboard down arrow and then the Enter key twice. The suggested name is on_window_main_destroy as shown in the image below.

Connecting a Callback Function to the destroy Signal
Connecting a Callback Function to the destroy Signal

5. Change the Window Title

To change the title that will appear at the top of the window, click the General tab in the Window Properties pane and scroll down to find the box labelled Title under Appearance. The image below shows the title of the window changed to Template Window.

Changing the Window Title in Glade
Changing the Window Title in Glade

6. Save the Glade File

After making changes to the Glade file, save it by clicking the Save icon or File and then Save from the top menu. Save the file as window_main.glade which gives the file name the same name as the window ID.

Now that the Glade file has been created, the C application program can be created that will use the Glade file to display the window.

The C Program Code

The code below is based on code from a tutorial by Micah Carrick which has since disappeared along with his website.

The main.c code listing:

The code creates the window from the window_main.glade file and connects the on_window_main_destroy() callback function to the destroy signal as specified in the Glade file. The on_window_main_destroy() callback function calls gtk_main_quit() which will close the window.

Create a file called main.c and copy the above code to it. Save this file to the same directory or folder that contains the glade file that you already created.

Compiling the Code

Before compiling the code, make sure that the GTK+3 development library is installed. It can be installed on a Debian based system such as Ubuntu or Linux Mint with the following command:

The following line will compile the above code.

Where main.c is the name of the file that the above C code is saved to and gladewin is the name of the executable output file.

Make sure that the main_window.glade file is in the same directory as the gladewin application when running the application.

When the application is run it displays the window that was created in Glade, as shown in the image below. The window can be resized and closed.

Window Application Created with GTK+ 3 and Glade 3
Window Application Created with GTK+ 3 and Glade 3

GTK+ 3 C Program using Glade 3 Development System Details

The code and Glade file for this GTK+ 3 C Program using Glade 3 example was developed on Linux Mint 17 with:

  • Glade version 3.16.1
  • GTK library (libgtk-3-dev) version 3.10.8

Update 25 October 2016
This tutorial was tested on a Linux Mint 18 computer with:

  • Glade version 3.18.3
  • GTK library (libgtk-3-dev) version 3.18.9-1ubuntu3.1

25 thoughts on “GTK+ 3 C Program using Glade 3”

  1. thats kinda useful for keeping things fast running; wish they had something like this on their project page

  2. Thank you. This was exactly what is needed to get started. Many other tutorial on the net have lots of information but it gets outdated quickly with all of the glade updates.

  3. Thank you ! I have spent the last 2 days creating a working gtk development environment; there have been so many glade / gtk changes and versions, that I kept finding out-of-date tutorials. Good work, well done.

  4. Howdy,
    Thanks for, info given. Simplicity sees picture, tell more that 10^2 words.

    Br
    far2belastinfront

  5. Wow, thank you. I had spent hours on a tutorial that was so complex with so many steps that I gave up several times because I kept making tiny insignificant mistakes and couldn’t seem to fix them. It was all pointless busywork, trying to demonstrate too many things at once. This is exactly what I need, short and to the point.

  6. hello when i am compiling after all of them, it gave me this error;
    gcc: error: pkg-config –cflags –libs gtk+-3.0: No such file or directory

    1. Which Linux distribution are you using? Is pkg-config installed? Did you install the GTK+ 3 development library?

  7. Worked Good. Needed these changes for FreeBSD

    main.c GTK Header file needs full path
    #include

    cc pkgconf --cflags gtk+-3.0 main.c -o gladewin pkgconf --libs gtk+-3.0 -rdynamic -Wall

    Thanks for the help.

  8. Copy/pasted code from here into main.c … compiled without one squeak. Very good.

    I’m using Ubuntu 16.04 . Left-clicking on the ‘x’ closes the window… but the command prompt does not appear. Typing ^C terminates the program.

    I’ve used gdb and set a breakpoint on the callback on_window_main_destroy(). Closing the window does not call the callback.

    Looking forward to working more tutorials… Thanks for creating this one.

  9. OOOPS!

    Never mind. Typo on my part. The handler didn’t get entered into the signals section.

    Mea Culpa.

    Sorry.

    Mark

  10. And how to compile it to create single binary with embeded glade xml code inside this binary? So the binary is standalone and doesnt require any extarnal glade file.

    1. The idea of using an external Glade file is so that changes to the application’s GUI can be made without having to recompile the application code, so I don’t know if including the Glade file in the C source code is possible. There is the gtk_builder_new_from_string() function that allows XML to be included in an application, but I am not sure if you can include the Glade file as-is. You would have to test to see if it will work with a Glade file. I have not done this myself.

  11. This was exactly what I needed to get jump started. It answered a number of questions all at once. I am new to GTK and Glade, but not to programming. This was great!!

    I see you have new entries covering input/output. I am headed there now. Thanks.

Leave a Reply

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