GTK 3 C Code Hello World Tutorial using Glade 3

In this easy tutorial for beginners, a simple “Hello World” program is created using GTK+ 3 and programmed in the C programming language. Glade 3 is used to create the GUI window, button and text label in this GTK 3 C code hello world tutorial.

The image below shows the windowed Hello World application made in this tutorial. When the button in the window is clicked for the first time, the text “Hello, world!” is displayed in the window. Each time the button is clicked, the total number of button clicks is updated and displayed in the window.

Application Created in the GTK 3 C Code Hello World Tutorial
Application Created in the GTK 3 C Code Hello World Tutorial

The tutorial demonstrates the use of a button and text label and how to get a handle or pointer to the text label in order to change its text.

Before continuing with the tutorial, install the GTK+ 3 and Glade 3 development tools on your computer.

You may also want to see the very basics of creating a GTK+ 3 program using Glade 3 and C code.

1. Starting a New GTK+ 3 Glade C Project

It is easiest to start with a set of GTK+ 3 Glade C programming template files which add a nice structure to the program by separating the C source code files and Glade files into their own folders. The template files include:

  • A main.c file containing the function main() in the src folder
  • A main glade window called window_main.glade in the glade folder
  • A make file called makefile in the main folder of the project for building the project
  • Some skeleton source code in the main.c file that creates the main window of the project using the Glade file

1.1 Create a Set of Template Files

Create a set of template files as described in the article on creating a GTK+ 3 Glade C programming template. Keep this set of template files to use as a base for starting new GTK Glade C projects.

1.2 Start a New Project using the Template Files

Make a copy of the template files folder and rename it to hello.

Open the make file and and change the TARGET name at the top of the file to hello. When the project is built the executable file name will now be named hello.

You should now have a project that looks as follows:

GTK+ 3 Project Template Files
GTK+ 3 Project Template Files

2. Edit the Glade File

Open the glade folder and open window_main.glade in the Glade editor. If the main window does not appear in the Glade editor, click window_main in the right pane.

2.1 Add a Fixed Grid

Although GTK has a method of packing widgets in a window, we will use a fixed grid in this tutorial. Users of MS Visual development tools will be familiar with placing widgets on a grid in a window.

Click the fixed grid icon in the left pane of the Glade window under Containers and then click the main window to place the grid.

Placing a Fixed Grid in Glade
Placing a Fixed Grid in Glade

Without the fixed grid, buttons and text labels could not be placed.

2.2 Place Text Labels

This project uses two text labels — one to display the hello world text and a second label to display the number of times the button is clicked.

2.2.1 Placing a Label

Click the Label item in the left pane of Glade under the Control and Display section. Click the main window on the grid to place the label. Use the drag / resize tool to move the label to the desired position.

Placing a label in Glade
Placing a label in Glade

2.2.2 Sizing a Label

Size the label by changing Height request under the Common tab in the right pane of glade to 30.

Changing Glade Label Height
Changing Glade Label Height

2.2.3 Changing Label ID and Text

In the right pane, with the label selected, click the General tab. Change the ID of the label to lbl_hello in the ID box and the text of the label to in the Label box.

Changing Glade Label ID and Text
Changing Glade Label ID and Text

2.2.4 Adding a Second Label

Create a second label with the same height and text as the first label, but give it an ID of lbl_count and place it under the first label.

Second Glade Label
Second Glade Label

2.3 Placing and Editing a Button

In the left pane of Glade, click the Button icon under the Control and Display section. Click on the main window grid to place the button. Change the height of the button to 30 in the same place that the height of the text was changed (right pane, Common tab, Height request field).

Place the Button in Glade
Place the Button in Glade

In the right pane under the General tab, change the button ID to btn_hello and the text of the button to Hello under the Button Content section near the bottom of the right pane. Place the button under the second label.

Placing a Glade Button
Placing a Glade Button

2.4 Changing the Window Size and Title

Click window_main at the top of the right pane in Glade to select the main window. Under the General tab in the right pane change the window width and height  both to 200 in the Default Width and Default Height fields. Change the window title in the Title field to Hello World.

Click the preview snapshot cog icon to see  a preview of the window to make sure that the widgets fit in the window properly.

Changing Glade Window Settings
Changing Glade Window Settings

2.5 Button Callback Function Signal

When the button is clicked, it will emit a signal. We need to attach a function to the signal so that the function will be called when the button is clicked.

Click the button in Glade to select it and then click the Signals tab in the right pane of the Glade editor. Click the text under the Handler heading next to clicked to select it and then a second time to start editing it. Type on and then a name suggested by Glade will pop up (on_btn_hello_clicked). Press the down arrow key to select it and then press the Enter key twice to make the change.

Glade Button Signal Handler
Glade Button Signal Handler

Save the Glade file, we will now edit the C source code.

3. Write the C Code

Open the main.c C template file for editing found in the src folder of the project.

We need a pointer to each of the labels in the project so that we can get hold of the labels to change their text. In this simple project, two global pointers will be defined at the top of the C file.

After connecting the signals in the code, get pointers to the two labels:

Finally we must add a function that writes text to the first label and increments a count in the second label when it is clicked. This function must have the same name as the signal handler function set for the button in Glade.

The final code should look as follows:

4. Build and Run the Project

Open the template directory in a terminal window and build the project using the make file by entering the make command.

The project can be run by either double-clicking the hello icon after navigating to the project folder using a file manager or from within the terminal window by entering:

The Hello World window should open. Clicking on the Hello button should display the “Hello, world!” text in the first label and increment the count in the second label.

5. Tutorial Development Environment

This tutorial was developed on a Linux Mint 17.3 Cinnamon 64-bit computer with Glade 3.16.1 and GTK+ development library 3.10.8~8+qiana (libgtk-3-dev).

Update 25 October 2016
This tutorial was tested on a Linux Mint 18 Mate 64-bit computer with Glade 3.18.3 and GTK+ development library 3.18.9-1ubuntu3.1 (libgtk-3-dev).

13 thoughts on “GTK 3 C Code Hello World Tutorial using Glade 3”

  1. After a lot of researching in google about Glade and GTK+ with C, I found your site and I’m absolute in love. This is a extreme useful tutorial for begginers, thanks a lot for doing it.

    My system: Ubuntu 16.04 LTS, Glade 3.18.3 and GTK+ 3.18.9.

    Thanks again, and if can, please post more! =)

  2. I have spent many hours trying to learn how to connect a UI with a C program, with no success until I found your tutorials. I have learned more in the past few days, than I did over the past few months with other tutorials. Thank you.

  3. Hi, thanks. But why are we using Glade here? Can we not just use gtk?
    Do bigger gtk application developers also use glade with gtk?

    Thanks

    1. Also the preview snapshot doesn’t give the accurate picture:

      || image links cut by moderator due to spammy looking image host site ||

      Also in the glade interface designer, I find it tough to place the widgets because I do not see the boundaries of other widgets. Is there any solution for this?

      1. Also the editor in the glade interface designer is not an accurate representation of how the window looks like. I mean when we change the window size, the editor’s measurements do not change accordingly.

        1. I think that this also has to do with packing. The designers of Glade probably assume that most users are going to use boxes to pack widgets. It then does not matter what size the window is during design, as long as the widgets are in the correct positions. In case you missed it here is the tutorial on packing: https://prognotes.net/2016/06/glade-packing-tutorial/
          I updated the explanation of GTK packing in the tutorial as requested in a comment by another user.

      2. The answer is in GTK packing which takes some getting used to. I will explain more on this and update the packing tutorial.

    2. You are free to use plain GTK function calls in your code or use Glade. I wanted to use Glade for my own small applications to get away from the tedious work of trying to place widgets within C code. I could not find many tutorials on using Glade with GTK C code, so I started doing my own research and publishing the results here. I am not sure whether Glade is being used with bigger GTK applications and am trying to get a feel for this myself. Of the few smaller projects that I have looked at, some used Glade, but in all of them the Glade file would not even open in newer versions of Glade.

  4. Well, I have found your tutorials really useful, as I’ve never been able to conceptualized these things before. I’m a total C novice, as it turns out, but I’ve been trying anyway. At one point I had it running without segmentation faults, but it wasn’t updating the label. I’ve tried a few different ways to do what I want (output epoch time to label), but after about 8 hours I’ll call it a day for now. If you get a free second to tell me the probably obvious mistake I’ve got going on, it’d be awesome: https://github.com/paulmadore/epoch-time-widget

    The list of topics on this site, which I discovered after much search as regards Glade, got it immediately on my subscription feed. Ads are disabled, too, if you decide to start getting revenue here.

    Thanks.

Leave a Reply

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