Getting Started on the Commandline/fr

[toc align_right="yes" depth="3"]

Commencer à programmer avec Qt

Bienvenue dans le monde de Qt - la librairie GUI multiplateforme. Dans ce guide d'introduction, nous apprendrons les bases de Qt en créant un simple Bloc-Notes. Après avoir lu ce guide, vous devrez être prêt à chercher dans nos comptes-rendus et dans la documentation afin de trouver les informations nécessaires à l'application que vous développer.

Bonjour Bloc-Notes

Dans ce premier exemple, nous créons et affichons un simple champ d'édition de texte dans une fenêtre sur le bureau. C'est le programme le plus simple que l'on puisse faire avec une interface graphique.

p=. http://doc.qt.nokia.com/4.7/images/gs1.png

Voici le code :

#include <QApplication>
#include <QTextEdit>

int main(int argv, char **args)
{
 QApplication app(argv, args);

QTextEdit textEdit;
 textEdit.show();

return app.exec();
}

Analysons le code ligne par ligne. Dans les deux premières lignes, nous incluons les fichiers en-têtes "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html et "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html, qui sont les classes dont nous avons besoin dans cet exemple. Toutes les classes de Qt ont des en-têtes respectifs.

À la ligne 6, nous créons un objet "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html. Cet objet gère les ressources de l'application et est requis pour n'importe quel programme Qt qui a une interface graphique. Il prend les paramètres argv et args car Qt accepte les paramètres en ligne de commande.

La ligne 8 crée un objet "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html. Un champ d'édition de texte est un élément graphique dans une interface graphique. Dans Qt, nous les appelons des widgets. Des exemples de widgets sont les barres de défilement, les étiquettes, ou les cases d'options. Un widget peut aussi contenir d'autres widgets; une fenêtre par exemple, est un widget qui en contient d'autres.

À la ligne 9, nous affichons le champ d'édition de texte à l'écran dans la propre fenêtre. Puisque les widgets sont aussi des conteneurs (par exemple un objet "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html qui a des barres d'outils, des menus, une barre de status, et d'autres widgets), il est possible de les afficher dans leur propre fenêtre. Les widgets de sont pas visibles par défaut; la fonction "show()":http://doc.qt.nokia.com/4.7/qwidget.html#show le rend visible.

La ligne 11 fait entrer le "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html dans un boucle d'évènements. Quand une application Qt est lancée, des évènements sont générés et envoyés aux widgets de l'application. Des exemples d'évènements sont les clics de souris ou les touches de clavier. Quand vous écrivez dans le champ de texte, il reçoit des évènements de touches de claviers appuyées et réagit en écrivant le texte tapé.

Pour lancer l'application, lancez une console, allez dans le répertoire où est situé le .cpp du programme. Les commandes suivantes compile le programme.

qmake -project
qmake
make

Cela créera un exécutable dans le dossier part1 (notez que sous Windows, il faudra peut-être utilisez nmake au lieu de make. L'exécutable créé sera placé dans part1/debug ou part1/release). qmake est l'outil de Qt, qui à partir d'un fichier de configuration .pro, créé avec le paramètre -project, génère un make file qui compilera le programme pour vous. Nous étudierons la création de nos propres .pro plus tard.

h3. Plus d'informations

|À propos de|Ici| |Les widgets et la géométrie des fenêtres|"Fenêtres et boites de dialogue":http://doc.qt.nokia.com/4.7/application-windows.html%7C |Les évènements et leur gestion|"Le système d'évènement":http://doc.qt.nokia.com/4.7/eventsandfilters.html%7C

h2. Ajouter un bouton Quitter

Dans une application normale, vous aurez normalement plus d'un widget. Nous ajouterons un objet "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html en dessous du champ de texte. Ce bouton quittera le Bloc-Notes lorsqu'il sera cliqué.

p=. http://doc.qt.nokia.com/4.7/images/gs2.png

Regardons le code.

#include <QtGui>

int main(int argv, char **args)
{
 QApplication app(argv, args);

 QTextEdit textEdit;
 QPushButton quitButton("Quit");

 QObject::connect(&amp;quitButton, SIGNAL (clicked()), qApp, SLOT (quit()));

 QVBoxLayout layout;
 layout.addWidget(&amp;textEdit);
 layout.addWidget(&amp;quitButton);

 QWidget window;
 window.setLayout(&amp;layout);

 window.show();

 return app.exec();
}

À la ligne 1, nous incluons "QtGui":http://doc.qt.nokia.com/4.7/qtgui.html, qui contient toutes les classes graphiques de Qt.

À la ligne 10, nous utilisons le système de signaux et de slots de Qt pour quitter l'application quand le bouton Quit est cliqué. Un slot est une fonction qui peut être appelée à l'exécution grâce à son nom. Un signal est une fonction qui lorsqu'elle est appelée appelle les slots qui lui sont connectés. On dit qu'on connecte un slot à un signal et qu'on émet un signal.

"quit()":http://doc.qt.nokia.com/4.7/qcoreapplication.html#quit est un slot de "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html. "clicked()":http://doc.qt.nokia.com/4.7/qabstractbutton.html#clicked est un signal qu'un "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html émet lorsqu'il est cliqué. La focntion statique "QObject::connect()":http://doc.qt.nokia.com/4.7/qobject.html#connect permet de connecter le slot au signal. SIGNAL ()_ et _SLOT() sont deux macros qui prennent la signature du signal et du slot à connecter. Il faut aussi donner des pointeurs vers les objets qui envoient et reçoivent le signal.

La ligne 12 crée un objet "QVBoxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html. Nous avons dit que les widgets peuvent en contenir d'autres. Il est possible de stipuler les bords de chaque widgets (position et taille), mais il est souvent plus simple d'utiliser un layout. Un layout s'occupe de définir les bords de chaque widget fils. "QVBoxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html par exemple, met les widgets fils en rang vertical.

Les lignes 13 et 14 ajoute le champ de texte et le bouton au layout. À la ligne 17, nous assignons le layout à un widget, ici la fenêtre.

h3. Plus d'informations

|À propos de|Ici| |Les signaux et les slots|"Signaux & slots":http://doc.qt.nokia.com/4.7/signalsandslots.html%7C |Les layouts|"Gestion des layouts":http://doc.qt.nokia.com/4.7/layout.html, "Widgets et layouts":http://doc.qt.nokia.com/4.7/widgets-and-layouts.html, "Exemples de layout":http://doc.qt.nokia.com/4.7/examples-layouts.html%7C |Les différents widgets de Qt|"Gallerie de widgets Qt":http://doc.qt.nokia.com/4.7/gallery.html, "Exemples de widgets":http://doc.qt.nokia.com/4.7/examples-widgets.html%7C

h2. Hériter QWidget

Quand l'utilisateur quitte une application, on peut vouloir ajouter une boite de dialogue pour demander de confirmer avant de quitter. Dans cet exemple, nous créons une classe qui hérite de "QWidget":http://doc.qt.nokia.com/4.7/qwidget.html, et nous ajoutons un slot à connecter au bouton pour quitter.

p=. http://doc.qt.nokia.com/4.7/images/gs3.png

Regardons le code :

class Notepad : public QWidget
{
 Q_OBJECT

 public:
 Notepad();

 private slots:
 void quit();

 private:
 QTextEdit *textEdit;
 QPushButton '''quitButton;
};

La macro Q_OBJECT doit être située en premier dans la classe, et déclare notre classe comme un "QObject":http://doc.qt.nokia.com/4.7/qobject.html (Bien sûr, elle doit aussi héritée de "QObject":http://doc.qt.nokia.com/4.7/qobject.html). Un objet "QObject":http://doc.qt.nokia.com/4.7/qobject.html ajoute quelques possibilités supplémentaires par rapport à une classe normale de C+. Par exemple, le nom de la classe et de ses slots peut être récupéré à l'exécution, ainsi que les paramètres d'un slot.

La ligne 13 déclare le slot quit(), avec la macro slots. Le slot quit() peut maintenant être connecter à n'importe quel signal avec la même signature, c'est-à-dire aucuns paramètres.

Au lieu de créer l'interface et de connecter le slot dans la fonction main(), nous le faisons dans le constructeur de la classe Notepad.

Notepad::Notepad()
{
 textEdit = new QTextEdit;
 quitButton = new QPushButton(tr("Quit"));

 connect(quitButton, SIGNAL (clicked()), this, SLOT (quit()));

 QVBoxLayout '''layout = new QVBoxLayout;
 layout->addWidget(textEdit);
 layout->addWidget(quitButton);

 setLayout(layout);

 setWindowTitle(tr("Notepad"));
}

Comme vu dans la déclaration de la classe, nous utilisons des pointeurs vers nos "QObject":http://doc.qt.nokia.com/4.7/qobject.html (textEdit et quitButton). Vous devriez toujours allouez des "QObject":http://doc.qt.nokia.com/4.7/qobject.html dynamiquement et ne jamais les copier.

Nous utilisons maintenant les fonction tr() pour nos variables textes. Cette fonction est nécessaire pour fournir une traduction à votre application. Nous n'entrerons pas dans les détails, mais vous pouvez vous renseignez avec le lien Qt Linguist dans Plus d'informations

h3. Plus d'informations

|À propos de|Ici| |tr() et la traduction|"Documentation de Qt Linguist":http://doc.qt.nokia.com/4.7/linguist-manual.html, "Écrire du code source pour traduire":http://doc.qt.nokia.com/4.7/i18n-source-translation.html, "Exemples de tr() avec Hello World":http://doc.qt.nokia.com/4.7/linguist-hellotr.html, "Internationalisation avec Qt":http://doc.qt.nokia.com/4.7/internationalization.html%7C |"QObjects":http://doc.qt.nokia.com/4.7/qtwebkit-bridge.html#qobjects et la programmation orientée objet avec Qt (Essentiel pour comprendre Qt)|"La programmation orientée objet":http://doc.qt.nokia.com/4.7/object.html%7C |qmake et la compilation avec Qt|"Documentation de qmake":http://doc.qt.nokia.com/4.7/qmake-manual.html%7C

h2. Créer un fichier .pro

Pour cet exemple, nous créons notre propre fichier .pro au lieu d'utiliser l'option -project de qmake.

HEADERS = notepad.h
SOURCES = notepad.cpp main.cpp

Les commandes suivantes compile alors l'exemple.

qmake
make

h2. Utiliser QMainWindow

Pleins d'applications profiterons de l'utilisation de "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, qui a son propre layout qui permet d'ajouter une barre de menu, des barres d'outils, des docks, et une barre de statut. "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html a une partie centrale qui peut être occuper par n'importe quel widget. Pour notre Bloc-Notes, nous placerons notre champ de texte ici.

p=. http://doc.qt.nokia.com/4.7/images/gs4.png

Regardons la nouvelle déclaration de Notepad

#include <QtGui>

class Notepad : public QMainWindow
{
 Q_OBJECT

 public:
 Notepad();

 private slots:
 void open();
 void save();
 void quit();

 private:
 QTextEdit *textEdit;

 QAction *openAction;
 QAction *saveAction;
 QAction *exitAction;

 QMenu '''fileMenu;
};

Nous ajoutons deux slots supplémentaires pour sauvegarder et ouvrir un document. Nous les implémenterons après.

Souvent, dans une fenêtre, le même slot peut être appelé par plusieurs widgets. Par exemple dans la barre de menus et dans une barre d'outils. Pour rendre ceci plus facile, Qt propose "QAction":http://doc.qt.nokia.com/4.7/qaction.html qui peut être donné à plusieurs widgets et être connecté à un slot. Par exemple, "QMenu":http://doc.qt.nokia.com/4.7/qmenu.html et "QToolBar":http://doc.qt.nokia.com/4.7/qtoolbar.html permettent de créer des menus et des boutons à partir d'une même "QAction":http://doc.qt.nokia.com/4.7/qaction.html. Nous verrons comment cela fonctionne.

Comme précédemment, nous utilisons le constructeur pour mettre en place l'interface graphique.

Notepad::Notepad()
{
 saveAction = new QAction(tr("&Open"), this);
 saveAction = new QAction(tr("&Save"), this);
 exitAction = new QAction(tr("E&xit"), this);

 connect(openAction, SIGNAL (triggered()), this, SLOT (open()));
 connect(saveAction, SIGNAL (triggered()), this, SLOT (save()));
 connect(exitAction, SIGNAL (triggered()), qApp, SLOT (quit()));

 fileMenu = menuBar()->addMenu(tr("&File"));
 fileMenu->addAction(openAction);
 fileMenu->addAction(saveAction);
 fileMenu->addSeparator();
 fileMenu->addAction(exitAction);

 textEdit = new QTextEdit;
 setCentralWidget(textEdit);

 setWindowTitle(tr("Notepad"));
}

Les "QAction":http://doc.qt.nokia.com/4.7/qaction.html sont créés à partir du texte à afficher sur les widgets auxquels nous les ajoutons (ici, des éléments de menu ). Si nous voulions les ajoutez à une barre d'outils, nous aurions aussi pu définir des icones.

Lorsqu'un élément du menu est cliqué, l'élément déclenchera l'action, et le slot connecté sera appelé.

h3. Plus d'informations

|À propos de|Ici| |Les fenêtres principales et leurs sous classes|"Fenêtres principales":http://doc.qt.nokia.com/4.7/mainwindow.html, "Exemples de fenêtre principales":http://doc.qt.nokia.com/4.7/examples-mainwindow.html%7C |Interfaces à plusieurs documents (MDI)|"QMdiArea":http://doc.qt.nokia.com/4.7/qmdiarea.html, "Exemples de MDI":http://doc.qt.nokia.com/4.7/mainwindows-mdi.html%7C

h2. Sauvegarder et charger

Dans cet exemple, nous implémenterons les fonctionnalités des slots open() et save() que nous avions ajoutés précédemment.

p=. http://doc.qt.nokia.com/4.7/images/gs5.png

Commencons avec le slot open().

 QString fileName = QFileDialog::getOpenFileName(this, tr("Open File"), "",
 tr("Text Files ('''.txt);;C++ Files ('''.cpp'''.h)"));

 if (fileName != "") {
 QFile file(fileName);
 if (!file.open(QIODevice::ReadOnly)) {
 QMessageBox::critical(this, tr("Error"),
 tr("Could not open file"));
 return;
 }
 QString contents = file.readAll().constData();
 textEdit->setPlainText(contents);
 file.close();
 }

La première étape est de demander à l'utilisateur le nom du fichier à ouvrir. Qt propose "QFileDialog":http://doc.qt.nokia.com/4.7/qfiledialog.html, qui est une boite de dialogue pour sélectionner un fichier (Ici sous Kubuntu). La fonction statique "getOpenFileName()":http://doc.qt.nokia.com/4.7/qfiledialog.html#getOpenFileName permet d'en afficher une, et ne se termine pas tant qu'un fichier n'a pas été sélectionné. Elle retourne le chemin vers le fichier sélectionné, ou une chaine vide si l'utilisateur annule l'action.

Si nous obtenons un nom de fichier, nous essayons de l'ouvrir avec "open()":http://doc.qt.nokia.com/4.7/qiodevice.html#open, qui retourne true si le fichier a pu être ouvert. Nous ne traiterons pas de la gestion d'erreurs ici, mais des liens sont disponibles dans la section Plus d'informations. Si le fichier ne peut pas être ouvert, nous utilisons un "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html pour afficher une boite de dialogue avec l'erreur (en anglais, voir la documentation sur "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox).

Lire les données est simple avec la fonction "readAll()":http://doc.qt.nokia.com/4.7/qiodevice.html#readAll, qui retourne toutes les données dans un "QByteArray":http://doc.qt.nokia.com/4.7/qbytearray.html. La fonction "constData()":http://doc.qt.nokia.com/4.7/qbytearray.html#constData retourne ces données dans une chaine en tant que const char*, dont "QString":http://doc.qt.nokia.com/4.7/qstring.html possède un constructeur pour. Le contenu est ensuite affiché dans le champ de texte. Enfin, nous fermons le fichier avec la fonction "close()":http://doc.qt.nokia.com/4.7/qiodevice.html#close

Maintenant, occupons-nous du slot save().

 QString fileName = QFileDialog::getSaveFileName(this, tr("Save File"), "",
 tr("Text Files ('''.txt);;C''+ Files ('''.cpp *.h)"));

 if (fileName != "") {
 QFile file(fileName);
 if (!file.open(QIODevice::WriteOnly)) {
 // сообщение об ошибке
 } else {
 QTextStream stream(&file);
 stream << textEdit->toPlainText();
 stream.flush();
 file.close();
 }
 }

Lorsque nous écrivons le contenu du champ de texte dans le fichier, nous utilisons la classe "QTextStream":http://doc.qt.nokia.com/4.7/qtextstream.html, qui englobe la classe "QFile":http://doc.qt.nokia.com/4.7/qfile.html. Le flux textuel peut écrire des "QString":http://doc.qt.nokia.com/4.7.qstring.html directement dans le fichier, alors que "QFile":http://doc.qt.nokia.com/4.7/qfile.html n'accepte que les données sous forme de char* avec la méthode "write()":http://doc.qt.nokia.com/4.7/qiodevice.html#write de "QIODevice":http://doc.qt.nokia.com/4.7/qiodevice.html.

Plus d'informations

À propos de

Ici