GTK+ 3 Glade C Programming Template Files

A set of template files for starting new GTK+ 3 C programming language projects using Glade for the GUI. The structure of the template directory separates the C source code and Glade files into their own sub-directories with a makefile in the main directory.

These template files make it easier to manage a project by separating the C source code and the Glade files. The makefile allows source code files to be added to the project easily as the project grows.

This article extends simple GTK+ 3 C programming using Glade and compiling by entering compile commands manually, to a better structured project and using a makefile.

Structure of the GTK+ 3 Glade Template Directory

The template has a src directory that contains the C source files for the project, and a glade directory that contains the Glade files. The makefile is found in the root directory of the template as shown in the image below.

GTK+ 3 and Glade Template Source Code

The template directory contains the following source code that can be copied to create a set of template files for your own projects.

The Makefile

Below is the contents of the file called makefile which must be placed in the root directory of the project.

# change application name here (executable output name)
TARGET=template_app

# compiler
CC=gcc
# debug
DEBUG=-g
# optimisation
OPT=-O0
# warnings
WARN=-Wall

PTHREAD=-pthread

CCFLAGS=$(DEBUG) $(OPT) $(WARN) $(PTHREAD) -pipe

GTKLIB=`pkg-config --cflags --libs gtk+-3.0`

# linker
LD=gcc
LDFLAGS=$(PTHREAD) $(GTKLIB) -export-dynamic

OBJS=    main.o

all: $(OBJS)
    $(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)
    
main.o: src/main.c
    $(CC) -c $(CCFLAGS) src/main.c $(GTKLIB) -o main.o
    
clean:
    rm -f *.o $(TARGET)

# change application name here (executable output name)

TARGET=template_app

# compiler

CC=gcc

# debug

DEBUG=-g

# optimisation

OPT=-O0

# warnings

WARN=-Wall

PTHREAD=-pthread

CCFLAGS=$(DEBUG) $(OPT) $(WARN) $(PTHREAD) -pipe

GTKLIB=`pkg-config --cflags --libs gtk+-3.0`

# linker

LD=gcc

LDFLAGS=$(PTHREAD) $(GTKLIB) -export-dynamic

OBJS= main.o

all: $(OBJS)

$(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)

main.o: src/main.c

$(CC) -c $(CCFLAGS) src/main.c $(GTKLIB) -o main.o

clean:

rm -f *.o $(TARGET)

Change the name template_app at the top of the file to the name of your project. This will be the name of the executable file that is generated after compiling.

Modify the makefile when new C source code files are added to the project so that the new files are compiled and linked.

Main C Source Code File

In the src directory, create a file called main.c and copy the following code to it.

#include <gtk/gtk.h>

int main(int argc, char *argv[])
{
    GtkBuilder      *builder; 
    GtkWidget       *window;

    gtk_init(&argc, &argv);

    builder = gtk_builder_new();
    gtk_builder_add_from_file (builder, "glade/window_main.glade", NULL);

    window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));
    gtk_builder_connect_signals(builder, NULL);

    g_object_unref(builder);

    gtk_widget_show(window);                
    gtk_main();

    return 0;
}

// called when window is closed
void on_window_main_destroy()
{
    gtk_main_quit();
}

#include <gtk/gtk.h>

int main(int argc, char *argv[])

{

GtkBuilder *builder;

GtkWidget *window;

gtk_init(&argc, &argv);

builder = gtk_builder_new();

gtk_builder_add_from_file (builder, "glade/window_main.glade", NULL);

window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));

gtk_builder_connect_signals(builder, NULL);

g_object_unref(builder);

gtk_widget_show(window);

gtk_main();

return 0;

}

// called when window is closed

void on_window_main_destroy()

{

gtk_main_quit();

}

All C source code files that are added to the project can be placed in the src directory. Glade files that are used in the project are placed in the glade directory and accessed as such in the C source code as the following line of code from above shows.

 gtk_builder_add_from_file (builder, "glade/window_main.glade", NULL);

1	gtk_builder_add_from_file (builder, "glade/window_main.glade", NULL);

Glade File

A new glade file can be created in the Glade editor or the code below can be copied to a file called window_main.glade in the glade directory.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.16.1 -->
<interface>
  <requires lib="gtk+" version="3.10"/>
  <object class="GtkWindow" id="window_main">
    <property name="can_focus">False</property>
    <property name="title" translatable="yes">Template Window</property>
    <property name="default_width">640</property>
    <property name="default_height">480</property>
    <signal name="destroy" handler="on_window_main_destroy" swapped="no"/>
    <child>
      <placeholder/>
    </child>
  </object>
</interface>

<?xml version="1.0" encoding="UTF-8"?>

<property name="can_focus">False</property>

<property name="title" translatable="yes">Template Window</property>

<child>

</child>

</object>

</interface>

All new Glade files added to the project are to be put into the glade directory.

Building the GTK+ 3 Glade C Programming Template Project

Open a terminal window and change to the project directory. To build the project, enter make in the terminal window. This assumes that the correct software and libraries have been installed.

Build the project:

make

make

Clean the project — delete object and executable files:

make clean

1	make clean

If an error message appears when you try to build the project using make, open the make file in a text editor and be sure to replace the spaces that are used to indent text in the file with tab characters by using the Tab key. A typical error message is:

makefile:26: *** missing separator.  Stop.

1	makefile:26: *** missing separator. Stop.

This indicates that the following indented line in the make file listing is indented with spaces instead of a tab character:

all: $(OBJS)
    $(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)

1 2	all: $(OBJS) $(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)

22 thoughts on “GTK+ 3 Glade C Programming Template Files”

Daryl Fisk says:

2016-04-26 at 9:57 pm

These notes have been very helpful. I did a lot of searching and only found older tutorials that did not apply anymore. “… deprecated” was the most familiar word I would see. Thank you for reconnecting me to Linux development.

1. CodeNerd says:
  
  2016-04-27 at 3:17 pm
  
  Glad to hear that it helped 🙂
  
BillH says:

2016-06-25 at 6:37 pm

Excellent tutorial, I’m just getting started with GTK after years of Visual Studio and the transition is not easy, this just gave me a real jump start, thanks for your help.

1. CodeNerd says:
  
  2016-06-27 at 9:11 am
  
  Thanks BillH. Good to hear that you found the tutorial useful.
  
AST says:

2016-08-18 at 3:04 pm

Thanks a lot!

nograj says:

2016-12-22 at 10:43 am

Bro you have explained it very beautifully.
it was like a piece of cake.
Well done, good job.
Please continue to do in future.

Slobodan says:

2017-04-03 at 2:16 pm

Please can you make tutorial on simple app which use some input and output for ex. add two numbers and display result tnx

Pingback: GTK Display Time in Glade Application | Programmer's Notes
Andre Xavier says:

2017-07-22 at 9:20 pm

Thanks to this tutorial, I was finally able to use Glade with GTK+ 3 and not just with GTK+ 2. Thank you very much. I am very grateful for the help.

1. CodeNerd says:
  
  2017-07-24 at 8:14 am
  
  Awesome! Thanks for your comment.
  
Pingback: GtkSpinButton Glade GTK C Program | Programmer's Notes
Will says:

2017-11-18 at 1:39 am

I still get a Gtk-CRITICAL **: IA__gtk_widget_show: assertion ‘GTK_IS_WIDGET (widget)’ failed

error with an exact copy, paste of the code.

Putting some error checking into it spits out a warning

“required gtk+ version 3.10, current version is 3.4”

Normally you assume the requirement is 3.1 OR HIGHER but in this case if I simply remove

from the .glade file the window pops up and everything works

1. Kris says:
  
  2018-08-29 at 10:32 pm
  
  I had the same issue and mine was the versioning. The file, as direct copy and paste, wants to use 3.10. When you open it up in glade edit the properties and change the version.
  
  THIS WAS THE KICKER FOR ME…fml…
  Save. Close Glade. Reopen Glade.
  
Jorge Garza says:

2018-02-22 at 5:40 pm

im getting missing separator error, any sugestion?

1. Rob McKennon says:
  
  2018-04-16 at 9:53 pm
  
  I got the same error on line 26 and 29. Remove the leading spaces and replace them with a tab.
  
  1. Long Nguyễn says:
    
    2018-04-29 at 4:55 am
    
    I got this error:
    
    make: *** No rule to make target ‘ ‘, needed by ‘all’. Stop.
    How should I do now ?
    
warmateur says:

2018-05-28 at 1:38 am

“error:XDG_RUNTIME_DIR not set in the environment

(template_app:19644): Gtk-WARNING **:cannot open display:”
Do you know a way to fix it ?

Pingback: GtkToggleButton Glade GTK C Program Tutorial | Programmer's Notes
Kris Kizlyk says:

2018-09-05 at 3:26 pm

I have created a template with multiple directories followed off your model and have posted it to stackoverflow. Thank you for the great tutorial!

https://stackoverflow.com/questions/52188654/gtk3-and-glade-makefile-for-a-c-application-on-linux-with-multiple-directories

1. CodeNerd says:
  
  2018-09-08 at 1:24 pm
  
  Something seems to be wrong with you link. I’m getting “Page Not Found”.
  
Jeff says:

2019-03-15 at 6:47 pm

when I run the make file I get the error:

makefile:26: *** missing separator. Stop.
Do you know how to fix this?

1. Jeff says:
  
  2019-03-15 at 7:00 pm
  
  Never mind, I found it.
  
  “This mostly happens if you copy paste the code from Internet. Remove all the spaces from the indented lines by using the delete key. And then press the tab key, only once per line.
  
  Save it and try running the file again. It should work now. This worked for me.”