Developing GUI programs using the Qt toolkit on Ubutnu based distros

Earlier days, in Linux  machines developers used a single terminal ( command prompt ) to finish the tasks by simply entering the commands. But remembering all the commands leads complexity on linux for new people. So, developers decide to implement Graphical User Interface (GUI) to complete the tasks on Linux machines with echo friendly. Also developers globally build some FOSS tools to develop GUI programs for new developers. All the new developers are loved those FOSS tools and using that tools, they developed GUI programs.

GUI programming is nothing but a X windowing system on Linux machine. This X windowing system provides windows on computer displays and interacts to users by accepting inputs from keyboards, control functions and touch screens etc.

X windowing system uses GUI toolkits to help the development of GUI programs. GUI Tookit is a set of widgets for use in designing applications with GUIs. This toolkit based on different programming languages. C/C++ are the most commonly used in it. There are 2 popular GUI toolkits are used to develop GUI programs. Those are Qt and GTk+. Qt is developed in C++ while GTk+ is developed in C Language.

Let we see about Simple 3 GUI programs to develop using Qt.

Before starting the GUI programming with Qt , you must be install Qt Toolkit.
This package contains Qt 4 qmake (qmake-qt4), a tool that helps simplify the build process for development project across different platforms. qmake automates the generation of Makefiles so that only a few lines of information are needed to create each Makefile. qmake can be used for any software project, whether it is written using Qt or not.



Installing Required Tools :

Step 1 : Open Terminal by Accessories -> Terminal or press CTRL+ALT+T

Step 2 : To install the required tools, copy the command and paste in to the terminal and press enter to install it.

sudo apt-get install qt4-qmake qt4-default qconf

qt4-qmake

Qt 4 qmake requires a platform and compiler description file which contains many default values used to generate appropriate Makefiles.

qt4-default

This package sets Qt 4 to be the default Qt version to be used when using development binaries like qmake. It provides a default configuration for qtchooser, but does not prevent alternative Qt installations from being used.

qconf

It is intended for developers who don’t need (or want) to use the more complex GNU autotools. With qconf/qmake, it is easy to maintain a cross-platform project that uses a familiar configuration interface on unix.

Developing GUI Programs : 

Step 1 : First create the common directory for Qt programs. To create a directory, enter the following command in Terminal

mkdir qtgui

Then change the working path to qtgui as

cd qtgui

Step 2 : Now will see first program of simple hello world program. For this create new directory "qthellopgm" as

mkdir qthellopgm

Change working path to this directory as

cd qthellopgm

Then create hello world program using C++. Call gedit ( Text editor ) to open new program by

gedit qthellopgm.cpp

And then copy the following code and paste into the qthellopgm.cpp file.

#include <QtGui>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget window;
window.resize(320, 240);
window.setWindowTitle("Hello World!");
window.show();
return app.exec();
}

Save the program in gedit and close it.

After using Qt toolkit, first make the qthellopgm.cpp as project by

qmake-qt4 -project

When the project was successfully created , then use qmake-qt4 compiler to compile the code.

qmake-qt4

And use make to create executable file. When you call make, it will create executable file and executes the corresponding result of the program.

make

Check the screen-shot below...

Close the Hello World! window to exit it.

Step 3 : Let we see the second program to create a window with a button:

Move to common directory (qtgui directory) by

cd ..

Create new directory "qtbuttonpgm" as

mkdir qtbuttonpgm

Move to this directory by

cd qtbuttonpgm

Then create qtbuttonpgm.cpp file to create a window with a button by

gedit qtbuttonpgm.cpp

Now copy the following code and paste into it.

#include <QtGui>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget window;
window.resize(320, 240);
window.setWindowTitle("Window with a button");
window.show();
QPushButton *button = new QPushButton("Press me", &window);
button->move(100, 100);
button->show();
return app.exec();
}

Save it and close it. After follow the same steps compiled and executed in first program. Just enter the following commands one-by-one.

qmake-qt4 -project

qmake-qt4

make

when you successfully make it, you will get the window with just press me button.

Clsoe the button window to exit from it.

Step 4 : Finally we will see the third window program with two widgets managed by a layout manager.

Move to common directory (qtgui directory) by

cd ..

Create new directory "qtlayoutpgm" as

mkdir qtlayoutpgm

Move to this directory by

cd qtlayoutpgm

Then create qtlayoutpgm.cpp file to create a window with a button by

gedit qtlayoutpgm.cpp

Now copy the following code and paste into it.

#include <QtGui>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget window;
QLabel *label = new QLabel("Name:");
QLineEdit *lineEdit = new QLineEdit();
QHBoxLayout *layout = new QHBoxLayout();
layout->addWidget(label);
layout->addWidget(lineEdit);
window.setLayout(layout);
window.setWindowTitle("Window layout");
window.show();
return app.exec();
}

Save it and close it. After follow the same steps compiled and executed in first program. Just enter the following commands one-by-one.

qmake-qt4 -project

qmake-qt4

make

when you successfully make it,you will get the following result.