Home

[Previous: Creating a Project in Qt Creator] [Qt Creator Manual] [Next: Qt Creator and Version Control Systems]

Writing a Simple Program with Qt Creator

In this example, we will describe the steps involve in using Qt Creator to create a small Qt program, Text Finder. Inspired by the QtUiTools' Text Finder example, we will write a similar but simplified version of it, as shown below.

Setting Up Your Environment

Once you have installed Qt Creator, it will automatically detect if Qt's location is in your PATH variable. If Qt's location is not in your PATH, you can set it in one of the following ways, depending on your platform:

• On Windows and Linux: in the Tools menu, under Options.
• On Mac OS X: in Preferences, under Qt4.

Note: If you use Visual Studio to compile Qt, all environment variables set in Visual Studio will be set for Qt Creator as well.

Setting Up The Project

We begin with a Qt4 Gui Application project generated by Qt Creator. The Creating a Project in Qt Creator document describes this process in detail. Remember to select QWidget as the Text Finder's base class. If your project is not yet loaded, you can load it by selecting Open from the File menu.

In your project you will have the following files:

• textfinder.h
• textfinder.cpp
• main.cpp
• textfinder.ui
• textfinder.pro

The .h and .cpp files come with the necessary boiler plate code; the .pro file is also complete.

Filling In The Missing Pieces

We will begin by designing the user interface and then move on to filling in the missing code. Finally, we will add the find functionality.

Designing the User Interface

To begin designing the user interface, double-click on the textfinder.ui file in your Project Explorer. This will launch the integrated Qt Designer.

Design the form above using a QLabel, QLineEdit (named lineEdit), QPushButton (named findButton), and a QTextEdit (named textEdit). We recommend that you use a QGridLayout to lay out the QLabel, QLineEdit and QPushButton. The QTextEdit can then be added to a QVBoxLayout, along with the QGridLayout. If you are new to designing forms with Qt Designer, you can take a look at the Designer Manual.

The Header File

The textfinder.h file already has the necessary includes, a constructor, a destructor, and the Ui object. We need to add a private slot, on_findButton_clicked(), to carry out our find operation. We also need a private function, loadTextFile(), to read and display the contents of our input text file in the QTextEdit. This is done with the following code:

    private slots:
        void on_findButton_clicked();

    private:
        Ui::TextFinder *ui;
        void loadTextFile();

Note: The Ui::TextFinder object is already provided.

The Source File

Now that our header file is complete we move on to our source file, textfinder.cpp. We begin by filling in the functionality to load a text file. The code snippet below describes this:

    void TextFinder::loadTextFile()
    {
        QFile inputFile(":/input.txt");
        inputFile.open(QIODevice::ReadOnly);

        QTextStream in(&inputFile);
        QString line = in.readAll();
        inputFile.close();

        ui->textEdit->setPlainText(line);
        QTextCursor cursor = ui->textEdit->textCursor();
        cursor.movePosition(QTextCursor::Start, QTextCursor::MoveAnchor, 1);
    }

Basically, we load a text file using QFile, read it with QTextStream, and then display it on textEdit with setPlainText() which requires adding the following additional #includes to textfinder.cpp:

    #include <QtCore/QFile>
    #include <QtCore/QTextStream>

For the on_findButton_clicked() slot, we extract the search string and use the find() function to look for the search string within the text file. The code snippet below further describes it:

    void TextFinder::on_findButton_clicked()
    {
        QString searchString = ui->lineEdit->text();
        ui->textEdit->find(searchString, QTextDocument::FindWholeWords);
    }

Once we have both these functions complete, we call loadTextFile() in our constructor.

    TextFinder::TextFinder(QWidget *parent)
        : QWidget(parent), ui(new Ui::TextFinder)
    {
        ui->setupUi(this);
        loadTextFile();
    }

The on_findButton_clicked() slot will be called automatically due to this line of code:

    QMetaObject::connectSlotsByName(TextFinder);

in the uic generated ui_textfinder.h file.

The Resource File

We require a resource file (.qrc) within which we will embed the input text file. This can be any .txt file with a paragraph of text. To add a resource file, right click on Resource Files in the Project Explorer and select Add New File.... You will see the wizard dialog displayed below.

Enter "textfinder" in the Name field and use the given Path. Then, click Continue.

On this page you can choose to which project you want to add the new file. Make sure that Add to Project is checked and "TextFinder" is selected as the Project, and click Done.

Your resource file will now be displayed with the Resource Editor. Click on the Add drop down box and select Add Prefix. The prefix we require is just a slash (/). Click Add again but this time, select Add File. Locate the text file you are going to use, we use input.txt.

The screenshot above shows what you can expect to see once you have added the resource file successfully.

Compiling and Running Your Program

Now that you have all the necessary files, you can compile your program by clicking on the button.

[Previous: Creating a Project in Qt Creator] [Qt Creator Manual] [Next: Qt Creator and Version Control Systems]