Facing new challenges everyday

Building Qt based applications with Qt Creator

June 7th, 2009

Qt is a very easy to use cross-platform application and UI framework, you can define application interface in xml and then interact with this interface using Qt facilities. Qt is the library behind the popular KDE Desktop Enviroment, it allows the developer to create rich desktop interfaces, now Qt has a IDE called Qt Creator, I could create a very simple app that can download some text from internet with few lines of code.

Qt Creator is part of Qt SDK and can be downloaded here.

This is the main window of Qt Creator:

qtcreator_mainwindow

In the image above we are design the main window of an application, we have a widget pallete at the left side of window and object inspector and properties panes at right. You can easy design the application interface by just dragging and drop widgets from pallete to application window in the middle pane of Qt Creator.

Each Qt Creator project contains one or more filestypes below:

*.h

Contains the definition of application classes.

*.cpp

Contains the implementation of application classes.

*.ui

Contains the user interface definition (in xml).

*.pro

Contains project definition/settings.

As I previously said, I wrote an application that will download some content from internet to show inside application window, in order to do that you must design the application main window exactly like the image above where I used the following widgets: label, line edit, plain text edit and a push button, just drag then from widget pallete to main window exactly like we have above. You also need create 3 files, one that contains application window definition, and the other two with application window code.

This is the header file containing MainWindow class definition:

mainwindow.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtGui/QMainWindow>
#include <QHttp>

namespace Ui
{
class MainWindow;
}

class MainWindow : public QMainWindow
{
Q_OBJECT

public:
MainWindow(QWidget *parent = 0);
~MainWindow();

private:
//Holds an reference to entire ui
Ui::MainWindow *ui;
//Holds an reference to object that handles http requests
QHttp* http;

private slots:
//Declare the method that will handle button click
void on_pushButton_clicked();
//Declare the method to be called at http request completion.
void showFile();
};

#endif // MAINWINDOW_H

And the file below contains MainWindow class implementation:

mainwindow.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QHttp>
#include <QUrl>

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent), ui(new Ui::MainWindow)
{
/*
Loading UI definition from mainwindow.ui file,
now the ui variable holds a reference to all components
inside designed window.
*/
ui->setupUi(this);
}

MainWindow::~MainWindow()
{
delete http;
delete ui;
}

/*
This is the event handler for clicks on the button placed
in application main window.
*/
void MainWindow::on_pushButton_clicked()
{
http = new QHttp(this);
/*
Call the showFile method inside this class when
data is successfully downloaded.
*/
connect(http, SIGNAL(done(bool)), this, SLOT(showFile()));
QString texto = ui->txtEndereco->text();
if(texto.length() > 0)
{
if(! texto.startsWith("http://"))
texto = QString("http://%1").arg(texto);

QUrl url = QUrl();
url.setUrl(texto);
http->setHost(url.host());
http->get(url.path());
}
}

/*
This method will be called when http request is finished
and the data requested is available to application.
*/
void MainWindow::showFile()
{
QString conteudo = QString(http->readAll());
//Showing the downloaded content into text area.
ui->txtConteudoArquivo->setPlainText(conteudo);
}

You can build and run your application by just clicking on Debug->Start Debugging menu.