This tutorial will help ypu installing software required to develop desktop Ubuntu applications with C++ language and GTKmm library version 4. You might want to do so following examples of the excellent programs created with GTKmm like Ardour, Inkscape, GParted, Rawtherapee and even VisualBoyAdvance. This is an alternative to programming with C/GTK as we published back in 2018. We will show you how to prepare the tools, write your first program, compile it and repeat it.
Subscribe to UbuntuBuzz Telegram Channel to get article updates.
Info
This tutorial is written using the following specification:
- OS version: Ubuntu 22.10 Kinetic Kudu
- G++ version: 12.2
- GTK version: 4.0
- GTKmm version: 4.0
- Geany version: 1.38 "Sulamar"
Install Required Tools
You need to install the following tools:
- g++
- gtkmm
- geany
1) Install g++ compiler:
$ sudo apt-get install g++
2) Install geany integrated development environment (IDE):
$ sudo apt-get install geany
3) Install gtkmm:
According to Official Documentation, gtkmm version 4 requires several dependencies:
sigc++-3.0
gtk4
glibmm-2.68
cairomm-1.16
pangomm-2.48
According to the same documentation, one can install gtkmm version 4 with the following Ubuntu command line:
$ sudo apt-get install libgtkmm-4.0-dev
Once installed, you can start programming.
Checking your installation
Command line below will help you verify your installation:
$ dpkg -l | grep -i gtkmm
If installed properly, your Terminal will show similar result to this picture:
Write Basic Program
According to the documentation again, we can start programming C++/gtkmm with the example source code.
1. Run Geany.
2. Create new file.
3. Save it as program1.cc in ~/Public/gtkmm/ directory.
4. Copy and paste the following source code.
5. Save file.
A program's source code will look like picture below:
(Geany showing program1.cc file)
Compile and Run Code
For your first experience, let's compile the code using Terminal.
1. Run Terminal.
2. Go to ~/Public/gtkmm/ directory.
3. Check for files available in this directory. It should show program1.cc file.
4. Run command line below:
$ g++ program1.cc -o program1 `pkg-config --cflags --libs gtkmm-4.0` -std=c++17
5. Check for files once again. It should now show a new file named program1 without extension.
6. Run the program:
$ ./program1
7. Program will show as an empty window and a title.
You managed to compile your first program.
(Terminal showing a process of compilation with the program window showing floating over it saying on its titlebar Basic application, hello from Ubuntu Buzz!)
Explanation:
g++ is your compiler program for C++ language.
program1.cc is your source code file.
program is the executable file as a result of compilation. Notice that on Ubuntu it does not have extension if you compare it to .exe in windows.
pkg-config is another command line program that is smart enough to help us in many things about compiling C++ code with GTKmm or other libraries.
c++17 is a sign that we deliberately tell the compiler to use the relatively new 2017 standard rather than the older ones.
More explanation can be read on the official documentation.
Compile and Run Code with Geany
At default configuration, Geany cannot compile, build and run C++/GTKmm source codes correctly. For that purpose, one should configure Geany build commands manually. You can do this following the example above.
Configuration:
1. Run Geany.
2. Open menu Build > Set Build Commands.
3. Change Compile command from the default to the custom as the following:
Default command:
g++ -Wall -c "%f"
Custom compile command:
g++ -Wall -c "%f" `pkg-config --cflags --libs gtkmm-4.0` -std=c++17
4. Change Build command from the default to the custom below:
Default command:
g++ -Wall -o "%e" "%f"
Custom build command:
g++ -Wall -o "%e" "%f" `pkg-config --cflags --libs gtkmm-4.0` -std=c++17
5. Click OK. Configuration finished.
Picture below shows clearly how you should write the configuration above:
Compiling, building and running:
1. Open program1.cc file.
2. Click Compile button.
Geany will process it and show compilation command as well as compilation message at the bottom section. It should say "Compilation finished successfully."
3. Click Build button.
Geany will process it too the same way. It should also say "Compilation finished successfully."
4. Click Run button.
Geany will launch Terminal to launch the program1 executable file on screen. Your program window should be running now.
And picture below shows the result, that is, an example of conveniently compiling, building, and running program with Geany:
(Geany showing the C++ source code, compilation message at the bottom, and running the resulting program as a new window launched via a Terminal)
To this point, now you will be able to learn single file C++/gtkmm examples. To learn more, see below.
Compiling Program with Multiple Source File
You should be able to compile any gtkmm example programs that consisted of multiple source file each. For example, let's practice with Hello World example from https://gnome.pages.gitlab.gnome.org/gtkmm-documentation/sec-helloworld.html. It consisted of two .cc files and one .h file. We will write the source files using Geany and then compile them all using Terminal.
1. Run Geany. We will save everything in ~/Public/gtkmm directory again.
2. Copy, paste and save the first source file as helloworld.h
3. Copy, paste and save the second source file as helloworld.cc
4. Copy, paste and save the third source file as main.cc
5. Run Terminal and go to ~/Public/gtkmm directory.
6. Check available files in current directory. You should be able to see helloworld.h, helloworld.cc, and main.cc.
7. Compile the program with command line below:
$ g++ helloworld.cc main.cc -o main `pkg-config --cflags --libs gtkmm-4.0` -std=c++17
8. Compilation process should be finished without error.
Notice that now we call both .cc files before the option -o.
9. Check available files once again. Now you should find a new file named main without extension.
10. Run the program:
$ ./main
You should see the same program as presented in the official documentation. Every time you click the button, a message will be printed on Terminal. See picture below.
First source code:
File: helloworld.h (For use with gtkmm 4)
#ifndef GTKMM_EXAMPLE_HELLOWORLD_H
#define GTKMM_EXAMPLE_HELLOWORLD_H
#include <gtkmm/button.h>
#include <gtkmm/window.h>
class HelloWorld : public Gtk::Window
{
public:
HelloWorld();
~HelloWorld() override;
protected:
//Signal handlers:
void on_button_clicked();
//Member widgets:
Gtk::Button m_button;
};
#endif // GTKMM_EXAMPLE_HELLOWORLD_H
Second source code:
File: helloworld.cc (For use with gtkmm 4)
#include "helloworld.h"
#include <iostream>
HelloWorld::HelloWorld()
: m_button("Hello World") // creates a new button with label "Hello World".
{
// Sets the margin around the button.
m_button.set_margin(10);
// When the button receives the "clicked" signal, it will call the
// on_button_clicked() method defined below.
m_button.signal_clicked().connect(sigc::mem_fun(*this,
&HelloWorld::on_button_clicked));
// This packs the button into the Window (a container).
set_child(m_button);
}
HelloWorld::~HelloWorld()
{
}
void HelloWorld::on_button_clicked()
{
std::cout << "Hello World" << std::endl;
}
Third source code:
File: main.cc (For use with gtkmm 4)
#include "helloworld.h"
#include <gtkmm/application.h>
int main(int argc, char* argv[])
{
auto app = Gtk::Application::create("org.gtkmm.example");
//Shows the window and returns when it is closed.
return app->make_window_and_run<HelloWorld>(argc, argv);
}
More Examples
GNOME Project maintains a lot of C++/GTKmm examples for you to study at their website https://gitlab.gnome.org/GNOME/gtkmm-documentation/tree/master/examples. See for example, helloworld, buttons, combobox, and dialogs among others.
See Further Reading section for even more examples.
Setup GTKmm Documentation
Do you know that you can have a full GTKmm documentation included with examples and user guides inside a nice application you can read offline? Yes, that is DevHelp. Let's install the viewer devhelp and the documentation package gtkmm-documentation as the following:
$ sudo apt-get install devhelp gtkmm-documentationAnd the result is as the following:
(DevHelp, a nice programming book application that helps you learning gtkmm)
Further Readings
GTKmm Examples by gammasoft
GTKmm Examples by Prof. Rice
This article is licensed under CC BY-SA 3.0.