The following screenshot shows what you will see when you launch Qt Creator for the first time. Let's take a closer look at each portion of the screen, shown as follows:

The main window, which currently shows the buttons for New Project and Open Project, is your workspace. The workspace also includes links to the Qt projects, examples, and tutorials as well as Qt's developer documentation, such as its online community and blogs. Under normal conditions, this will be located where you'll see the source code for your application. Along the left-hand side of the screen are a series of icons that let you select various views in your application. They are as follows:

Let's create a new project using C++.

In Qt Creator, select New File or Project… from the File menu. Qt Creator will present you with the New Project wizard, which lets you choose the kind of project you want to create, give it a name, and so forth. To create your first application, perform the following steps:

Qt Creator creates your project and switches to the Edit view. In the source code editor for the main.cpp file, enter the following code:

#include <QCoreApplication>
#include <iostream>

using namespace std;

int main(int argc, char *argv[])
{
QCoreApplication a(argc, argv);
    
    cout << "Hello world!";

  return a.exec();
}

The QCoreApplication task handles the entire system startup for an application, and every Qt Console app needs to create one and call its exec method as part of your main method. It sets up Qt's event handler and provides a bunch of porting helpers to determine things such as your application directory, library paths, and other details.

For a console application, that's all you need; you can freely mix and match Qt classes with the C++ standard library and Standard Template Library (although once you master Qt's foundation classes, many STL constructs might feel somewhat limiting).

Next, let's compile and run the application. There are several ways to do this. You can:

When you choose one of these options, Qt Creator invokes the compiler and the linker to build your application. If you choose the Debug option, Qt Creator switches to the Debug view (which we will discuss in detail in the next chapter) as it starts your application.

Once the application starts, you'll see the Hello world! message in a console view.

One of Qt's strengths is its rich collection of GUI elements that you can use to create windowed applications. Making a GUI application is similar in principle to making a console application; instead of choosing Qt Console Application, select Qt Widgets Application from the New dialog presented when you choose New File or Project. Try it now:

Qt Creator creates a default subclass of the class that provides the platform's basic window in the mainform.h and mainform.cpp files, and creates a form that will contain the widgets for your application's window.

The following screenshot shows a default form as you're editing it in Qt Designer. If you run the application at this point, you'll see an empty window. Instead, double-click on the Forms folder in the project tree (the second pane) of Qt Creator and then double-click on the mainwindow.ui file. Qt Creator switches to the Design view, and you'll see something similar to the next screenshot:

On the left-hand side is a list of the layouts that you can choose to organize widgets, such as spacers, views, containers, buttons, and other widgets; on top of this, there are various edit and layout options. In the middle is a view of the layout of your application's main window, and to the right are panes with a hierarchy of objects in your main window and the properties of any item that you click on in the main window.

While we will explore Qt Designer more in Chapter 3, Designing Your Application with Qt Designer, you can get a feel of using it to build a simple UI. Begin by ensuring that you're in the Designer mode:

Before running your application, let's be sure that you understand the implementation of the MainWindow class. The constructor of the MainWindow class loads the description of the user interface for the main window and sets it up using the Qt Creator-generated class Ui::MainWindow. The destructor deletes the implementation of the code layout, and the on_exitButton_clicked method simply terminates the application by calling the exit static method implemented by the QApplication class.

Finally, we have to add the on_exitButton_clicked method declaration to mainwindow.h if it's not already added. Double-click on this file in the browser on the left and make sure that it reads as follows:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespaceUi {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT
    
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    
private slots:
    void on_exitButton_clicked();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

The key lines you need to add are highlighted in the previous listing.

We'll learn more about signals and slots in the next chapter; for now, it's enough for you to know that you're declaring a private function to be triggered when you click on the button.

Run the application. It should open a single window with the text Hello World!; clicking on the Exit button in the window (or on the close box in the upper-right corner) should close the application. At this point, if you think you want to learn more about Qt Widget applications, go ahead and try dragging other GUI items to the window, or explore the help documentation for Qt Widget applications by switching to the Help view and clicking on Qt GUI from the list of help items.

Qt Quick is Qt's newer declarative framework for the user interface, and with this, it's incredibly easy to create fluid applications with animated transitions and flowing user interfaces. Using Qt Quick, you can describe your user interface using QML, a JavaScript-like language that lets you declare user interface elements and how they relate; the Qt Quick runtime does most of the heavy lifting in the implementation of your application.

By now, you can guess how to create a Qt Quick project. Choose New File or Project from the File menu, click on Qt Quick Application, and then follow the wizard.

The wizard will ask you one additional question: the Qt Quick version to use. You should simply choose the latest version. Once you walk through the wizard, you end up with a simple application that actually displays Hello World in its own window. Here's the code that it supplies:

import QtQuick 2.3

Rectangle {
    visible: true
    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

If you know JavaScript, the syntax of this might look a little familiar, but it's still different. The first two lines are the import statements; they indicate which classes should be available to the QML runtime. At a minimum, all of your Qt Quick applications must import QtQuick, as this one does.

The QML follows. It declares a parent rectangle of 360 × 360 pixels that determines the size of the application window. Inside the rectangle are two objects: a Text object and MouseArea. The Text object is just that: a label with the text Hello World placed in the center of the rectangle. Note that the value of the text property is actually the result of a function call to the qsTr function, which is Qt's built-in localization function. This looks at application resources to return the localized version of Hello World if it has been provided.

MouseArea is an object that takes user input and can execute functions based on this input; it's sized to fit the parent (anchors.fill is set to parent) and responds when clicked by executing the function assigned to the onClicked property. This onClicked function just exits the application by calling the Qt class's quit function.

At this point, you can run the application in the usual way, and you'll see a window with the text Hello World in the center of the window.

While the principles are similar, the Qt Quick designer is very different from the Qt Widgets designer. Take a look at the next screenshot:

There are some obvious similarities: both designers show a list of things that you can add to a view, along with a hierarchy of the objects in the view and the properties of individual objects.

However, there are far fewer Qt Quick widgets than there are Qt widgets, and the widgets in Qt Quick don't match the look and feel of the native platform to nearly the same extent. That's by design; Qt Widgets is for building conventional applications that match the native platform by using native controls and a native look and feel, while Qt Quick is used for creating device-independent applications with their own look and feel. For example, you'd probably write an enterprise data collection application using Qt Widgets, while you'd create a media center application using Qt Quick.

However, the manner of using the designer is the same in both cases. Let's add another MouseArea to the main view and give it something to do:

You can see that most of the changes were made by the Design view; it added a rectangle inside the original MouseArea object and another MouseArea object inside it. You will need to add a line giving the text element an ID of the text and the onClicked handler to the new MouseArea object that you dragged out in the Design view. The id property lets other QML access the text field by name (in this case, its name is simply text), and the onClicked handler changes the contents of the text item's text property to the text Hi there!.

It's worth making a note of qsTr here; you don't have to add any text to the application resources to get basic localization working. This is unlike most other platforms where localization occurs by providing keys to values in local files for strings with a default value for the unlocalized strings.

Run the application. You'll see your rectangle above the text Hello World, and clicking on the rectangle changes the text to read Hi there!.

Getting Qt Creator is easy; it's just a web download away, or on most Linux platforms, it's an optional installation through the native package manager (although the versions delivered by a package manager might be slightly older than those you get from the Qt Project's website).

Qt Creator organizes its source code for you in projects; when you first launch it, you can either create a default project or create a new project to contain the source code and resources for your application. Inside Qt Creator are all the options you need to compile and debug your application. In addition, it supports designer tools for developing both Qt Widgets and Qt Quick applications.

In the next chapter, we'll dig into the details of how to configure Qt Creator for compiling and editing your code, including how to add source files to your project, configure compiler and linker options, add dependencies to third-party libraries, and so on.