Qt for beginners Hello World: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
[toc align_right= | [toc align_right="yes" depth="3"]<br />[[Category:Qt_for_beginners]]<br />[[Category:Tutorial]]<br />[[Category:HowTo]] | ||
= Qt for beginners — Hello World ! = | = Qt for beginners — Hello World ! = | ||
[[Qt_for_beginners_Introduction| | [[Qt_for_beginners_Introduction|<<< Introduction]] | [[Qt_for_beginners|Summary]] | [[Qt_for_beginners_pretty_button|A pretty button >>>]] | ||
'''''Note:''' See the official | '''''Note:''' See the official "Getting Started with Qt Widgets":http://doc.qt.io/qt-5/gettingstartedqt.html page for an alternative tutorial.'' | ||
We are now ready to create our first window. And it will be as usual, a ''hello world''. | We are now ready to create our first window. And it will be as usual, a ''hello world''. | ||
Line 13: | Line 13: | ||
Before writing our first GUI app, let's discover Qt Creator. | Before writing our first GUI app, let's discover Qt Creator. | ||
Qt Creator is yet another IDE for C+'', but it is very well suited for coding Qt applications. It provides a doc browser and the | Qt Creator is yet another IDE for C+'', but it is very well suited for coding Qt applications. It provides a doc browser and the "designer", which makes creation of windows easier, all wrapped in a well-designed user interface. It's also one of the fastest IDE's available. | ||
<br />Here are some features of Qt Creator : [[Category:Tools::QtCreator|Qt Creator overview]]. | <br />Here are some features of Qt Creator : [[Category:Tools::QtCreator|Qt Creator overview]]. | ||
<br />h2. Our first window | <br />h2. Our first window | ||
<br />Let's start by creating our first project. It will be an empty project, so we have to proceed with:<br />File | <br />Let's start by creating our first project. It will be an empty project, so we have to proceed with:<br />File > New file or project > Other Projects > Empty Qt Project | ||
<br />[[Image:http://i.imgbox.com/ELAMwEHo.jpg|Create new project]] | <br />[[Image:http://i.imgbox.com/ELAMwEHo.jpg|Create new project]] | ||
<br />Follow the wizard, and after selecting the project folder and name, and select the version of Qt to use, you should land on this page | <br />Follow the wizard, and after selecting the project folder and name, and select the version of Qt to use, you should land on this page | ||
<br />[[Image:http://i.imgbox.com/IbEbCNNl.jpg|pro editor]] | <br />[[Image:http://i.imgbox.com/IbEbCNNl.jpg|pro editor]] | ||
<br />This is the project file | <br />This is the project file (extension .pro). Qt uses a command line tool that parses these project files in order to generate "makefiles", files that are used by compilers to build an application. This tool is called '''qmake'''. But, we shouldn't bother too much about qmake, since Qt Creator will do the job for us. | ||
<br />In a project file, there is some minimal code that should always be written : | <br />In a project file, there is some minimal code that should always be written : | ||
<br /><code><br />TEMPLATE = app<br />TARGET = name_of_the_app | <br /><code><br />TEMPLATE = app<br />TARGET = name_of_the_app | ||
Line 30: | Line 30: | ||
* ''QT'' is used to indicate what libraries (Qt modules) are being used in this project. Since our first app is a small GUI, we will need QtCore and QtGui. | * ''QT'' is used to indicate what libraries (Qt modules) are being used in this project. Since our first app is a small GUI, we will need QtCore and QtGui. | ||
Let's now add the entry point of our application. Using File | Let's now add the entry point of our application. Using File > New file or project > C++ > C++ Source file should do the job. | ||
[[Image:http://i.imgbox.com/h25u2z0P.jpg|Create main.cpp]] | [[Image:http://i.imgbox.com/h25u2z0P.jpg|Create main.cpp]] | ||
Follow the wizard once again, naming the file | Follow the wizard once again, naming the file "main", and you are done.<br />You will notice that in the project file, a new line has been added automatically by Qt Creator : | ||
<code><br />TEMPLATE = app<br />TARGET = name_of_the_app | <code><br />TEMPLATE = app<br />TARGET = name_of_the_app | ||
Line 47: | Line 47: | ||
<br />If you use Qt Creator's wizards, this is done automatically. | <br />If you use Qt Creator's wizards, this is done automatically. | ||
<br />The minimal source code of a Qt application is | <br />The minimal source code of a Qt application is | ||
<br /><code><br />#include | <br /><code><br />#include <QApplication> | ||
<br />int main(int argc, char **argv)<br />{<br /> QApplication app (argc, argv);<br /> return app.exec | <br />int main(int argc, char **argv)<br />{<br /> QApplication app (argc, argv);<br /> return app.exec();<br />}<br /></code> | ||
<br />'''QApplication''' is a very important class. It takes care of input arguments, but also a lot of other things, and most notably, the ''event loop''. The event loop is a loop that waits for used input in GUI applications. | <br />'''QApplication''' is a very important class. It takes care of input arguments, but also a lot of other things, and most notably, the ''event loop''. The event loop is a loop that waits for used input in GUI applications. | ||
<br />When calling | <br />When calling <code>app.exec();</code> the event loop is launched. | ||
<br />Let's compile this application. By clicking on the green arrow on the bottom left, Qt Creator will compile and execute it. And what happened ? The application seems to be launched and not responding. That is actually normal. The event loop is running and waiting for events, like mouse clicks on a GUI, but we did not provide any event to be processed, so it will run indefinitely. | <br />Let's compile this application. By clicking on the green arrow on the bottom left, Qt Creator will compile and execute it. And what happened ? The application seems to be launched and not responding. That is actually normal. The event loop is running and waiting for events, like mouse clicks on a GUI, but we did not provide any event to be processed, so it will run indefinitely. | ||
<br />Let's add something to be displayed. | <br />Let's add something to be displayed. | ||
<br /><code><br />#include | <br /><code><br />#include <QApplication><br />#include <QPushButton> | ||
<br />int main(int argc, char **argv)<br />{<br /> QApplication app (argc, argv); | <br />int main(int argc, char **argv)<br />{<br /> QApplication app (argc, argv); | ||
<br /> QPushButton button ( | <br /> QPushButton button ("Hello world !");<br /> button.show(); | ||
<br /> return app.exec | <br /> return app.exec();<br />}<br /></code> | ||
<br />Compile it, and … here it is ! Our first window ! | <br />Compile it, and … here it is ! Our first window ! | ||
<br />[[Image:http://i.imgbox.com/zxM3h2GE.jpg|Our first window]] | <br />[[Image:http://i.imgbox.com/zxM3h2GE.jpg|Our first window]] |
Revision as of 14:09, 24 February 2015
[toc align_right="yes" depth="3"]
Qt for beginners — Hello World !
<<< Introduction | Summary | A pretty button >>>
Note: See the official "Getting Started with Qt Widgets":http://doc.qt.io/qt-5/gettingstartedqt.html page for an alternative tutorial.
We are now ready to create our first window. And it will be as usual, a hello world.
Qt Creator features
Before writing our first GUI app, let's discover Qt Creator.
Qt Creator is yet another IDE for C+, but it is very well suited for coding Qt applications. It provides a doc browser and the "designer", which makes creation of windows easier, all wrapped in a well-designed user interface. It's also one of the fastest IDE's available.
Here are some features of Qt Creator :.
h2. Our first window
Let's start by creating our first project. It will be an empty project, so we have to proceed with:
File > New file or project > Other Projects > Empty Qt Project
Create new project
Follow the wizard, and after selecting the project folder and name, and select the version of Qt to use, you should land on this page
pro editor
This is the project file (extension .pro). Qt uses a command line tool that parses these project files in order to generate "makefiles", files that are used by compilers to build an application. This tool is called qmake. But, we shouldn't bother too much about qmake, since Qt Creator will do the job for us.
In a project file, there is some minimal code that should always be written :
<br />TEMPLATE = app<br />TARGET = name_of_the_app
<br />QT = core gui
<br />greaterThan(QT_MAJOR_VERSION, 4): QT''= widgets<br />
- TEMPLATE describes the type to build. It can be an application, a library, or simply subdirectories.
- TARGET is the name of the app or the library.
- QT is used to indicate what libraries (Qt modules) are being used in this project. Since our first app is a small GUI, we will need QtCore and QtGui.
Let's now add the entry point of our application. Using File > New file or project > C++ > C++ Source file should do the job.
Follow the wizard once again, naming the file "main", and you are done.
You will notice that in the project file, a new line has been added automatically by Qt Creator :
<br />TEMPLATE = app<br />TARGET = name_of_the_app
QT = core gui
SOURCES ''= main.cpp<br />
Headers and sources files can be added manually with
<br />HEADERS''= first_file.h second_file.h<br />SOURCES ''= first_file.cpp second_file.cpp<br />
or
<br />HEADERS''= first_file.h second_file.h<br />SOURCES ''= first_file.cpp second_file.cpp<br />
If you use Qt Creator's wizards, this is done automatically.
The minimal source code of a Qt application is
<br />#include <QApplication>
<br />int main(int argc, char **argv)<br />{<br /> QApplication app (argc, argv);<br /> return app.exec();<br />}<br />
QApplication is a very important class. It takes care of input arguments, but also a lot of other things, and most notably, the event loop. The event loop is a loop that waits for used input in GUI applications.
When calling
app.exec();
the event loop is launched.
Let's compile this application. By clicking on the green arrow on the bottom left, Qt Creator will compile and execute it. And what happened ? The application seems to be launched and not responding. That is actually normal. The event loop is running and waiting for events, like mouse clicks on a GUI, but we did not provide any event to be processed, so it will run indefinitely.
Let's add something to be displayed.
<br />#include <QApplication><br />#include <QPushButton>
<br />int main(int argc, char **argv)<br />{<br /> QApplication app (argc, argv);
<br /> QPushButton button ("Hello world !");<br /> button.show();
<br /> return app.exec();<br />}<br />
Compile it, and … here it is ! Our first window !
Our first window
h2. How is a Qt program compiled
Qt Creator does the job for us, but it might be interesting to know how Qt programs are compiled.
For small programs, it is easy to compile everything by hand, creating objects files, then linking them. But for bigger projects, the command line easily becomes hard to write. If you are familiar with Linux, you may know that all the programs are compiled using a makefile that describes all these command lines to execute. But for some projects, even writing a makefile can become tedious.
qmake generates those makefiles for you. With a simple syntax, it produces the makefile that is used to compile a Qt program. But that is not its only goal. Qt uses meta-objects to extend C+ functionalities, and qmake is responsible to prepare a makefile that contains this meta-object extraction phase. You will see this in another chapter.
So, Qt apps are compiled in 3 steps
# A .pro file is written to describe the project to compile
# A makefile is generated using qmake
# The program is build using make (or nmake or jom on windows)