A Simple GUI in Linux using GTK+ and C++

Follow the steps below to create a simple graphical user interface (GUI) in C++ using the GTK+ toolkit. GTK+ is a popular open-source toolkit used to create GUIs in Linux. Steps 3-5 of these instructions assume a version of Linux based on Fedora, such as RedHat or CentOS, is being used, but it might be relatively easy to adapt these steps for use on Debian-based Linux distros such as Ubuntu or Linux Mint by changing “yum” to “apt-get” in a few commands.


1. Open a command prompt.

2. Enter the command “su”, then supply the correct password. This will cause subsequent commands to be run as a “superuser”.

3. If you have not already done so, install the Gnu Compiler Collection (GCC) by entering the command “yum install gcc”.

4. Determine the current available version of the GTK package by entering the command “yum list gtkmm*”.

5. Based on the information discovered in the previous step, install both the “normal” and development packages of GTK by running the proper “yum install” commands. Example commands are show below, for a system on which the GTK version is 2.4, and the microprocessor architecture of the system is “x86_64” (that is, the microprocessor that uses the 64-bit version of Intel’s x86 instruction set).

yum install gtkmm-2.4.x86_64
yum install gtkmm-2.4.devel.x86_64

6. In any convenient location, create a new directory named “GTKTest”.

7. In the newly created GTKTest directory, create a new text file named “GTKTest.cpp”, containing the following text.

using namespace std;
using namespace Gtk;

class GTKTest : public Window
	// controls

		VBox vBoxMain;
		Label labelTextToDisplay;
		Entry entryTextToDisplay;
		Label labelDisplayTo;
		ComboBoxText comboBoxDisplayTo;
		CheckButton checkButtonPrependMessage;
		Button buttonDisplay;

	// methods

	public: GTKTest()

		// vBoxMain

		// labelTextToDisplay
		labelTextToDisplay.set_label("Text to Display:");

		// entryTextToDisplay
		entryTextToDisplay.set_text("This is a test!");

		// labelDisplayTo
		labelDisplayTo.set_label("Display to:");

		// comboBoxDisplayTo

		// checkButtonPrependMessage
		checkButtonPrependMessage.set_label("Prepend 'Message: '");

		// buttonDisplay

	// event handlers

	protected: void buttonDisplayClicked()
		string textToDisplay = entryTextToDisplay.get_text();

		bool prependMessage = checkButtonPrependMessage.get_active();
		if (prependMessage == true)
			textToDisplay.insert(0, "Message: ");

		string displayMode = comboBoxDisplayTo.get_active_text();

		if (displayMode == "Console")
			printf("%s\n", textToDisplay.c_str());
		else if (displayMode == "Dialog")
			MessageDialog dialog(textToDisplay);
			throw runtime_error("Unrecognized display mode!");

int main (int argc, char *argv[])
	Main kit(argc, argv);
	GTKTest GTKTest;
	return 0;

8. Still in the GTKTest directory, create a new text file named “GTKTest-CompileLinkRun.sh”, containing the text shown below. Substitute the version of GTK determined in previous steps (for example, 2.4) for the text “[version]” wherever it occurs.

g++ `pkg-config gtkmm-[version] --cflags --libs` -c GTKTest.cpp
g++ `pkg-config gtkmm-[version] --cflags --libs` GTKTest.o -o GTKTest

9. Make the newly created “GTKTest-CompileLinkRun.sh” file executable, perhaps by right-clicking on its icon, selecting “Properties” from the context menu that appears, clicking the “Permissions” tab on the dialog that appears, activating the checkbox labelled “Allow executing file as program”, and then clicking the OK button.

10. Run the newly created “GTKTest-CompileLinkRun.sh” script, perhaps by right-clicking on its icon, selecting the “Open” item from the context menu that appears, and clicking the “Run in Terminal” button on the confirmation dialog. The code will be compiled, linked, and run, and a small window with several controls will appear. Clicking the “Display” button on this window will display the specified message in either the console or in a dialog.

This entry was posted in Uncategorized and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s