This is a quick setup guide to develop C++ desktop application with Gtkmm toolkit library using Geany IDE on Ubuntu. In other words, you can start learning how to create cross-platform GUI application. You know, Gtkmm is a C++ binding to the C-based GTK+ library, and this library has been used to create great desktop apps such as Inkscape and MySQL Workbench (also GParted and GNOME System Monitor!). This tutorial is a continuation to Quick Setup of C, C++, and Java on Ubuntu. This works on other Debian-based distros as well such as Mint, Trisquel, and elementary OS (however, I used this last one to write this tutorial). Follow instructions below and happy coding!
Subscribe to UbuntuBuzz Telegram Channel to get article updates directly.
Some Basic Knowledge
- GTK+ is a cross-platform, free library for C language. It's the library that builds GNOME.
- Gtkmm is not GTK+, Gtkmm is a C++ binding to GTK+, meaning, you can code with C++ by using the power of the C-based GTK+.
- Gtkmm is comparable to Qt Framework (library that builds KDE) as both are C++ libraries to create desktop GUI applications.
- gcc compiler is used to compile and build GTK+ application, while g++ compiler is used to build Gtkmm apps.
- Gtkmm uses C++ language so you have C++ benefits over C if you use it instead of GTK+. Read more here.
1. Install Needed Packages
Solve all the dependencies by this command alone:
$ sudo apt-get install libgtkmm-3.0-dev
2. Try First Example
I copied here an example from GNOME.org. You need to write the source code and compile it with g++ while linking it to gtkmm libraries. Just practice this.
1) Write the source code file.
Filename: base.cc
// copied from https://developer.gnome.org/gtkmm-tutorial/stable/sec-helloworld.html.en
// this source code is from GNU FDLv1.2-or-later licensed documentation by Murray Cumming https://developer.gnome.org/gtkmm-tutorial/stable/index-info.html.en
#include <gtkmm.h>
int main(int argc, char *argv[]){
auto app = Gtk::Application::create(argc, argv, "org.gtkmm.examples.base");
Gtk::Window window;
window.set_default_size(200, 200);
return app->run(window);
}
2) Compile the file and link it with gtkmm libraries.
$ g++ base.cc -o base `pkg-config gtkmm-3.0 --cflags --libs`
(This produces a single file named base without extension.)
3) Finally, run the executable file to show the application.
3) Finally, run the executable file to show the application.
$ ./base
See picture below. It's a basic application with a basic window without other items.
3. Try Second Example
(This introduces you how to compile each of multiple files, manually)
You will (1) create three distinct files, and then (2) compile two of them separately, and finally (3) link together the two into one final file. Once you understand this example, you can grasp the concept, and go to next level (using Makefile). Go through all these source code examples I copied from GNOME.org and follow the compiling instruction below.
1) Write these source code files and save them.
1) Write these source code files and save them.
Filename: helloworld.h
// copied from https://developer.gnome.org/gtkmm-tutorial/stable/sec-helloworld.html.en
// this source code is from GNU FDLv1.2-or-later licensed documentation by Murray Cumming https://developer.gnome.org/gtkmm-tutorial/stable/index-info.html.en
#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();
virtual ~HelloWorld();
protected:
//Signal handlers:
void on_button_clicked();
//Member widgets:
Gtk::Button m_button;
};
#endif // GTKMM_EXAMPLE_HELLOWORLD_H
Filename: helloworld.cc
// copied from https://developer.gnome.org/gtkmm-tutorial/stable/sec-helloworld.html.en
// this source code is from GNU FDLv1.2-or-later licensed documentation by Murray Cumming https://developer.gnome.org/gtkmm-tutorial/stable/index-info.html.en
#include "helloworld.h"
#include <iostream>
HelloWorld::HelloWorld()
: m_button("Hello World") // creates a new button with label "Hello World".
{
// Sets the border width of the window.
set_border_width(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).
add(m_button);
// The final step is to display this newly created widget...
m_button.show();
}
HelloWorld::~HelloWorld()
{
}
void HelloWorld::on_button_clicked()
{
std::cout << "Hello World" << std::endl;
}
Filename: main.cc
// copied from https://developer.gnome.org/gtkmm-tutorial/stable/sec-helloworld.html.en
// this source code is from GNU FDLv1.2-or-later licensed documentation by Murray Cumming https://developer.gnome.org/gtkmm-tutorial/stable/index-info.html.en
#include "helloworld.h"
#include <gtkmm/application.h>
int main (int argc, char *argv[])
{
auto app = Gtk::Application::create(argc, argv, "org.gtkmm.example");
HelloWorld helloworld;
//Shows the window and returns when it is closed.
return app->run(helloworld);
}
2) Compile the two .cc files and then link those into one final executable.
Compile commands:
$ g++ -c -Wall helloworld.cc -o helloworld.o `pkg-config gtkmm-3.0 --cflags` $ g++ -c -Wall main.cc -o main.o `pkg-config gtkmm-3.0 --cflags` $ g++ helloworld.o main.o -o helloworld `pkg-config gtkmm-3.0 --libs`
3) Then again, finally, run the final file.
$ ./helloworld
It looks like this. Notice the small application with Hello World button. If I push the button five times, it prints out Hello World phrase five times.
4. Try Third Example (With Makefile)
(This introduces you how to compile multiple files, automatically)
1) Create a file with this name and below lines of code.
Filename: Makefile
# thanks to Dorku, I modified his Makefile from https://stackoverflow.com/a/26995650
CC=g++
CFLAGS=-c -Wall
SOURCES=helloworld.cc main.cc
OBJECTS=$(SOURCES:.cc=.o)
EXECUTABLE=helloworld
all: $(SOURCES) $(EXECUTABLE)
$(EXECUTABLE): $(OBJECTS)
$(CC) $(OBJECTS) -o $@ `pkg-config gtkmm-3.0 --libs`
.cc.o:
$(CC) $(CFLAGS) $< -o $@ `pkg-config gtkmm-3.0 --cflags`
clean:
rm -rf *.o helloworld
(Note that Makefile accepts only one TAB not SPACES in each of three lines starting with a TAB above.)
2) Before building new ones, first, delete previously built files first. This is famous with make clean command.
$ make clean
3) Build your program with this command in the same directory with Makefile.
$ make
The result is the same as the previous example as this only automates the manual steps. Picture below showing the steps with final result after pushing the button ten times. See the command lines called by make command alone, they're the same as previously three commands.
5. Geany Builds
Now, after you have multiple source code files with the Makefile, using Geany is just as easy as pressing one button. Using the same example as Section 3 above, plus a Makefile, here's step by step to do build exactly the same as Section 4.
1) Press Make All (Shift+F9) so it compiles & links based on Makefile.
2) Press Run (F5) so the application runs over the terminal. See picture below, I push the button seven times and the same Hello World text showing seven times on the terminal. It works!
3) If Geany says "make: Nothing to be done for 'all'",
then it needs make clean command. Do that by pressing Make Custom Target (Shift+Ctrl+F9) > type clean > click OK > files removed.
Then simply press Make All (Shift+F9) once again.
1) Press Make All (Shift+F9) so it compiles & links based on Makefile.
(Building, see three command lines on the status bar? They're the same once again.)
2) Press Run (F5) so the application runs over the terminal. See picture below, I push the button seven times and the same Hello World text showing seven times on the terminal. It works!
(Final result, again, it works!)
3) If Geany says "make: Nothing to be done for 'all'",
then it needs make clean command. Do that by pressing Make Custom Target (Shift+Ctrl+F9) > type clean > click OK > files removed.
End Words
That's all. I hope with this small guide you can copy and build many code examples fom the net without problems. So, you can learn. Learn more about gtkmm on the site, tutorials and examples, docs and references, FAQ, and also recommended books to read. Last but not least, as I mentioned in the beginning, you can learn from the source code of really cool GNOME / Gtkmm applications such as GParted, Inkscape, K3D, Ardour 2, and MySQL Workbench. Go ahead, happy learning!