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:
sudo apt-get install glade
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.
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.
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.
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.
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.
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:
int main(int argc, char *argv)
builder = gtk_builder_new();
gtk_builder_add_from_file (builder, "window_main.glade", NULL);
window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));
// called when window is closed
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:
sudo apt-get install libgtk-3-dev
The following line will compile the above code.
gcc -o gladewin main.c -Wall `pkg-config --cflags --libs gtk+-3.0` -export-dynamic
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.
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