Book Image

Getting Started with Qt 5

By : Benjamin Baka
Book Image

Getting Started with Qt 5

By: Benjamin Baka

Overview of this book

Qt is a cross-platform application framework and widget toolkit that is used to create GUI applications that can run on different hardware and operating systems. The main aim of this book is to introduce Qt to the reader. Through the use of simple examples, we will walk you through building blocks without focusing too much on theory. Qt is a popular tool that can be used for building a variety of applications, such as web browsers, media players such as VLC, and Adobe Photoshop. Following Qt installation and setup, the book dives straight into helping you create your first application. You will be introduced to Widgets, Qt's interface building block, and the many varieties that are available for creating GUIs. Next, Qt's core concept of signals and slots are well illustrated with sufficient examples. The book further teaches you how to create custom widgets, signals and slots, and how to communicate useful information via dialog boxes. To cap everything off, you will be taken through writing applications that can connect to databases in order to persist data. By the end of the book, you should be well equipped to start creating your own Qt applications and confident enough to pick up more advanced Qt techniques and materials to hone your skills.
Table of Contents (8 chapters)

What is Qt?

Now that we have set up our boxes to start development, let's put together a hello world example. First, however, let's take a brief detour.

Qt is a toolkit for creating Graphical User Interfaces (GUI), as well as cross-platform applications. GUI applications are programs that employ the use of the mouse to issue commands to the computer for execution. Though Qt can, in some cases, be used without necessarily making use of this, therein lies its utility.

The difficulty in trying to produce the same look, feel, and functionality across multiple operating systems is one big hurdle you have to deal with when writing GUI applications. Qt completely does away with this impediment by providing a means to write code only once and ensuring that it runs on most operating systems without requiring much or any change.

Qt makes use of some modules. These modules group related functionalities together. The following lists some modules and what they do:

  • QtCore: As the name implies, these modules contains core and important classes for the Qt framework. These include containers, events, and thread management, among others.
  • QtWidgets and QtGui: This module contains classes for calling widgets. Widgets are the components that make up the majority of a graphical interface. These include buttons, textboxes, and labels.
  • QtWebkit: This module makes it possible to use web pages and apps within a Qt application.
  • QtNetwork: This module provides classes to connect to and communicate with network resources.
  • QtXML: For parsing XML documents, this module contains useful classes.
  • QtSQL: This module is feature-rich with classes and drivers that allow for connecting to databases, including My SQL, PostgreSQL, and SQLite.

Hello world in Qt

In this section, we will put together a very simple hello world program. The program will show a simple button within a window. Create a file called hello.cpp in a newly created folder called hello_world. Open the file and insert the code:

#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QLabel label("Hello world !");
label.show();
return app.exec();
}

This looks like a regular C++ program, with the exception of unfamiliar classes being used.

Like any regular program, the int main() function is the entry point of our application.

An instance of the QApplication class is created, called app, and the arguments passed to the main() function. The app object is required because it sets off the Event loop that continues to run until we close the application. Without the QApplication object, you cannot really create a Qt GUI application.

However, it is possible to use certain aspects of Qt without the need to create an instance of QApplication.

Also, the constructor for QApplication requires that we pass the argc and argv to it.

We instantiate an object of the QLabel class, label. We pass the "Hello World!" string to its constructor. A QLabel represents what we call a widget, which is a term used to describe visual elements on the screen. Labels are used to hold text for display.

By default, created widgets are hidden. To display them, a call to the show() function has to be made.

To start the Event loop, the app.exec() line is executed. This passes control of the application to Qt.

The return keyword will pass an integer back to the operating system, indicating the state of the application when it was closed or exited.

To compile and run our program, navigate to the folder where hello.cpp is stored. Type the following command in the Terminal:

% qmake -project

This will create the hello_world.pro file. The name hello_world is the name of the folder where hello.cpp is located. The generated file should change, depending on the location you stored the hello.cpp file.

Open the hello_world.pro file with any text editor of your choice. The following lines deserve some explanation:

TEMPLATE = app

The value, app, here means that the final output of the project will be an application. Alternatively, it could be a library or sub-directory:

TARGET = hello_world

The name, hello_world, here is the name of the application or (library) that will be executed:

SOURCES += hello.cpp

Since hello.cpp is the only source file in our project, it is added to the SOURCES variable.

We need to generate a Makefile that will detail the steps needed to compile our hello world program. The benefit of this autogenerated Makefile is that it takes away the need for us to know the various nuances involved in compiling the program on the different operating systems.

While in the same project directory, issue the following command:

% qmake

This generates a Makefile in the directory.

Now, issue the following command to compile the program:

% make

The following error will be produced (along with further information) as the output from running the make command:

#include <QApplication>
^~~~~~~~~~~~

Earlier on, we mentioned that various components and classes are packaged into modules. The QApplication is being utilized in our application, but the correct module has not been included. During compilation, this omission results in an error.

To fix this issue, open the hello_world.pro file and insert the following lines after the line:

INCLUDEPATH += .
QT += widgets

This will add the QtWidget module, along with the QtCore modules, to the compiled program. With the correct module added, run the make command again on the command line:

% make

A hello_world file will be generated in the same folder. Run this file from the command line as follows:

% ./hello_world

On a macOS, the full path to the executable will be specified with the following path from the command line:

./hello_world.app/Contents/MacOS/hello_world

This should produce the following output:

Well, there is our first GUI program. It displays the Hello world ! in a label. To close the application, click on the Close button of the window.

Let's add a dash of Qt Style Sheet (QSS) to give our label a little effect!

Modify the hello.cpp file as follows:

#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QLabel label("Hello world !");
label.setStyleSheet("QLabel:hover { color: rgb(60, 179, 113)}");
label.show();
return app.exec();
}

The only change here is label.setStyleSheet("QLabel:hover { color: rgb(60, 179, 113)}");.

A QSS rule is passed as an argument to the setStyleSheet method on the label object. The rule sets every label within our application to show the color green when the cursor hovers over it.

Run the following commands to recompile the application and run it:

% make
% ./hello_world

The program should appear as in the following screenshot. The label turns green when the mouse is placed over it: