Découverte de Qt 4

Qt 4 est actuellement à sa version 4.3, ça évolue rapidement, mieux vaut tard que jamais. Cet article a pour but de faire découvrir aux lecteurs les nouvelles caractéristiques générales de Qt 4 mais aussi de l'aborder avec quelques exemples

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   
Logo de Qt

Vous pouvez me contacter par message privé pour en savoir plus.

I. Présentation générale de Qt

Qt est une bibliothèque logicielle offrant essentiellement des composants d'interface graphique (widgets). Qt ne se limite pas seulement à des composants graphiques mais il offre des composants pour la programmation réseau, la gestion des fils d'exécution ainsi que l'accès aux données.
Qt a été développé en C++ donc il est essentiellement destiné pour le développement C++ mais il faut remarquer que des " bindings " existent afin de pouvoir l'utiliser à partir d'autres langages.

Qt étend également C++ avec les signaux et les slots en utilisant moc, le compilateur de méta-objet (meta object compiler). Le système de signaux/slots est une caractéristique spécifique de Qt qui le diffère des autres frameworks. Un signal est émis quand un évènement se produit (ex: clic de souris). Qt possède de nombreux signaux prédéfinis, mais nous pouvons toujours écrire nos propres signaux. Un slot est une fonction qui est appelée en réponse à un signal. Comme les signaux, Qt propose de nombreux slots prédéfinis.

Rem : Qt, la bibliothèque logicielle pour interface graphique de Trolltech s'écrit Qt non pas QT ni qt. Il se prononce en anglais " cute " qui peut signifier mignon dans la langue de Molière. Découvrons cet outil de développement cross-platform dans cet article !

II. La version 4 de la bibliothèque Qt

Qt 4 est la dernière génération de Qt le kit de développement d'application cross-platform. Qt 4, la dernière version de Qt a été lancé en Juin 2005 contient une nouvelle gamme de traits et de capacités qui accentue encore plus la productivité des développeurs. Le framework Qt se dote ainsi de nombreuses nouvelles fonctionnalités.

La première version Qt 4 est donc 4.0.0. Chaque nouvelle parution de la version mineure de Qt inclut de nouvelles fonctionnalités ou des améliorations sur les fonctions existantes. Les dernières versions en cours sont Qt 4.2 et Qt 4.3. Il faut remarquer que quelques traits de Qt 3 aussi bien que la méthode d'utilisation recommandée de cette version 3 ont changé considérablement dans Qt 4; il faudra donc faire attention lors du portage d'un code Qt 3 vers Qt 4.

Une différence qui frappe les yeux au premier abord c'est la syntaxe d'inclusion. Autrefois on faisait:

 
Sélectionnez
#include <qclassname.h>

Actuellement,

 
Sélectionnez
#include <QClassName>

suffit.
Pour inclure les définitions pour toutes les classes contenues dan une bibliothèque, il suffit de spécifier le nom de cette bibliothèque. Par exemple,

 
Sélectionnez
#include <QtCore> 

II-A. Les outils de Qt 4

Qt est fourni avec plusieurs commandes et outils graphiques pour faciliter et accélérer la programmation. Voici quelques uns de ces outils qui existaient déja dans les versions antérieures :

Qt Designer : pour la création de formes (ou fiches ou frames)

Qt Assistant : aide Qt

Qt Linguist, lupdate, lrelease : Qt fournit le support excellent pour traduire les applications dans les langues locales.

qmake : pour la création de fichier projet Qt .pro, ce fichier est indépendant de la plate-forme

Meta-Object Compiler (moc) : génère l'information méta-objet pour les sous-classes de QObject (Qt est basé autour du modèle d'objet de Qt. Elle est entièrement basée autour de la classe QObject et de l'outil moc)

User Interface Compiler (uic) : génère le code C++ correspondant à un fichier interface .ui

Resource Compiler (rcc) : insère les ressources dans l'application durant la compilation.

QtDBus XML compiler (qdbusxml2cpp) : Un outil pour la conversion de descriptions d'interface D-Bus en code source C++

D-Bus Viewer

Remarque : D-Bus est un mécanisme IPC (Inter-Process Communication) et RPC (Remote Procedure Call) développé au départ pour Linux pour remplacer les solutions IPC existants afin de créer un protocole unifié. Il est utile par exemple lors de la communication entre un processus système (imprimante et les pilotes de périphériques) et des processus utilisateurs normaux. Ce mécanisme se base sur le lancement d'une application serveur central assurant la gestion des applications connectées au bus ainsi que le bon acheminement des messages de la source à la destination.

L'outil de portage de code Qt 3 vers Qt 4 : qt3to4

L'outil qt3to4 permet de migrer un code écrit sous Qt 3 vers Qt 4.

Cet outil peut être utilisé sur un fichier individuel .cpp ou un en-tête .h ; on peut également l'appliquer sur un projet entier désigné par le fichier .pro .

 
Sélectionnez

C:\Qt\4.3.0\bin > qt3to4 monfichier.cpp
C:\Qt\4.3.0\bin > qt3to4 MyQtProject.pro

Si on utilise comme paramètre un projet, qt3to4 traduit tous les fichiers indiqués dans le fichier .pro. L'outil modifie alors tous les fichiers sur place. Donc, il faut faire une copie de ces fichiers avant de lancer le portage.

II-B. Portage d'un code Qt 3 vers Qt 4

Des programmes compilés pour Qt 3 doivent être recompilés pour fonctionner avec Qt 4. Qt4 inclut de nouvelles fonctionnalités supplémentaires et abandonne les fonctionnalités obsolètes des versions antérieures d'où son incompatibilité binaire avec Qt 3.

Beaucoup de choses ont en effet changé dans la version 4 par rapport à la version précédente 3. Par exemple, Qt Designer a changé considérablement dans Qt 4. Il existe alors un outil uic3 afin de pouvoir migrer un fichier .ui de Qt 3 en un fichier .ui valide pour Qt 4.
Voici quelques uns des changements principaux de Qt Designer :

  1. Designer travaille uniquement avec le fichier .ui
  2. On n'édite plus le code source dans Designer
  3. La structure du code généré par l'uic a changé
  4. Les icônes ne sont plus stockés dans le fichier .ui mais dans un nouveau type de fichier ressource (*.qrc)
  5. etc.

II-C. La version Qt 4.2

Qt 4.2 contient plus de fonctionnalités que jamais avant, il permet alors de créer des applications plus puissantes avec moins de travail pour le programmeur. Ces nouvelles capacités ajoutées à 4.2 sont :

  • QGraphicsView vous permet d'écrire des applications interactives qui manient sensiblement jusqu'à des millions d'objets graphiques 2D, avec détection de collisions, vues multiples, transformations coordonnées et individuelles d'article ainsi que la capacité de grouper des articles intégrés.
  • Si vous voulez déployer votre application Qt sur le nouveau système d'exploitation de Microsoft (Windows Vista), cette version 4.2 nous permet (c'est la version 4.3 qui est la plus adaptée pour Vista). De célèbres applications comme Google Earth s'adaptent déjà en "look and feel" de Vista grâce à l'utilisation de Qt 4.2.
  • Un nouveau style de widget permet de développer rapidement et facilement l'interface de votre application. Cette nouveauté s'inspire du style CSS (en HTML). Quelques lignes de code suffisent pour obtenir une belle interface.
  • Comme dans toutes nouvelles versions, une nouvelle apparence avec plus d'outils.
  • Les améliorations sont plus visibles sous Macintosh (Mac OS X)

II-D. La version Qt 4.3

Qt 4.3 dévoile beaucoup de nouvelles fonctionnalités pour le développement d'une interface utilisateur avancée. Les innovations dans cette version sont surtout destinées pour le développement sur Windows Vista ainsi que des optimisations dans le moteur Qt OpenGL. Qt 4.3, la dernière gamme actuellement, est la version qui contient le plus de changement dans les séries Qt 4.

  • - Qt 4.3 permet alors de créer une application plus au " look and feel " de Vista que Qt 4.2. La classe QWindowsVistaStyle fut alors créée. Qt Linguist 4.3 est maintenant " Certified for Windows Vista ".
  • - Il introduira le moteur de script standard ECMA qui sera intégré complètement dans Qt, similaire aux autres moteurs célèbres à savoir Mozilla Spider Monkey et WebKit.
  • - Le moteur OpenGL de Qt est amélioré
  • - QMainWindow, l'architecture de la fenêtre principale de Qt devient plus flexible. La fenêtre principale supporte maintenant des paradigmes du style différents (onglets et barres de titres verticaux, barre d'outils animée, etc.)
  • - QSvgGenerator : possibilité de sauver les opérations de rendu de Qt selon la forme de la sortie SVG.
  • - Le module QtNetwork a été amélioré en introduisant l'utilisation des communications SSL.

II-E. Quelques différences par rapport aux versions antérieures

III. Installation

Il n'y a qu'un seul endroit pour télécharger Qt : c'est sur le site web de l'éditeur et à la fois développeur Trolltech. Vous allez être conduit à une page où remplir un formulaire habituel qui est nécessaire pour obtenir le couple nom de validation plus numéro de série. Afin de valider l'installation de Qt, il faut aussi préciser l'utilisation (Commercial, Teaching, etc.) et le système d'exploitation sur lequel on va installer Qt. Remarquons aussi que la Qt version 4 (Qt/Windows Open Source Edition) est disponible en open source (licence GPL) mais il faut MingW pour pouvoir le compiler. Ces sources sont disponibles sur le site web de Trolltech : http://www.trolltech.com/products/qt/downloads.

L'installation de Qt sous Visual C++ est très facile, il suffit juste de suivre les directives du setup d'installation.

MingW est uniquement le compilateur officiellement supporté par la version OpenSource de Qt sous windows.
The Qt/Windows Open Source Edition only supports the MingW compiler.

Les liens de téléchargement que vous recevrez par mails après avoir rempli le formulaire seront des liens de addin pour Visual C++ (Windows), un lien unique pour Linux/Unix et un lien pour Mac. Donc, pour les IDE autres que Visual C++, l'idéal est donc de télécharger la version Qt/Windows Open Source Edition. De plus, la plupart de ces IDE emploient le compilateur MingW citons Code::Blocks et Dev C++.
Il suffit de lancer le fichier récupéré après le téléchargement, lui indiqué le répertoire de MingW (c'est C:\Program Files\CodeBlocks\mingw32 pour Code::Blocks) puis cliquer sur next. Les étapes suivantes sont faciles, cliquez sur Install à la fin et l'installation commence.

Compiler Qt4 Open Source sous Visual C++

Je vais vous conduire vers un article de Aurélien Regat-Barrel qui vous expliquera avec détails comment compiler Qt/Windows Open Source Edition sous Visual C++ 2005 plus exactement :

Compiler Qt 4 avec VC++ 2005

IV. Initiation au développement d'application avec Qt

Exemples et démos accompagnant Qt

Bien, maintenant que Qt est bien installé, nous allons pouvoir commencer à rentrer dans le vif du sujet : création d'une application Qt. Admirez un peu la puissance de cette bibliothèque, de quoi elle est capable : génial non ! ( tiré de l'exemple OverPainting )

Animation géniale

Je pense que Qt est un moyen de fournir une puissance graphique aux IDE non RAD comme Visual C++, Dev C++, Code::Blocks, etc. voire même jusqu'à battre les puissants RAD C++. Les super utilisateurs de C++ Builder déja doté des outils gratuits comme GLScene, Indy, Jedi ... à savoir moi-même peuvent voir en Qt un moyen d'aborder les autres EDI non "rapid aid application".

Divers AddIn sont mis à notre disposition par Trolltech pour utiliser aisément Qt avec un IDE spécifique ou une plate-forme.

IV-A. Intégration de Qt pour Visual C++

Ce paragraphe s'adresse aux utilisateurs de cet éditeur de Microsoft.
Une nouvelle barre d'outils doit automatiquement apparaître dans Visual Studio après l'installation de l'addin.

Barre d'outils dans Visual C++

Microsoft distribue gratuitement Visual C++ 2005 en version limitée mais je pense que les fonctionnalités offertes dans cette version limitée sont largement meilleures que celles des certains IDE C++ gratuits.
On peut aussi l'installer manuellement: voir le menu Tools>Customize>Add-ins and Macro Files puis cocher la case correspondante à Qt 4 Integration.
Le plugin lancera Qt Designer lorsque vous ouvrez un fichier .ui qui est en fait un document XML et lancera Qt Linguist à chaque fois qu'on ouvre un fichier .ts. Les fichiers .ui sont des fichiers XML qui décrivent une interface graphique.

 
Sélectionnez

			<ui version="4.0" >
 				<class>TetrixWindow</class>
 					<widget class="QWidget" name="TetrixWindow" >
  					<property name="geometry" >
   					<rect>
    				<x>0</x>
    				<y>0</y>
    				<width>537</width>
    				<height>475</height>
   					</rect>
  					</property>
				..................................
			</ui>
			

Le fichier ressource de Qt a pour extension QRC dont voici un exemple

 
Sélectionnez

			<RCC>
    			<qresource prefix="/" >
        			<file>tetrixwindow.js</file>
        			<file>tetrixwindow.ui</file>
        			<file>tetrixboard.js</file>
        			<file>tetrixpiece.js</file>
    			</qresource>
			</RCC>
			

On peut éditer manuellement ce fichier lors d'un ajout d'autres ressources à un projet Qt comme une image par exemple mais vaut mieux laisser à Qt l'édition de ce fichier.

Pour apprendre à manipuler Visual C++ 2005 et ses nouvelles fonctions, visitez ce tutorial d'un des rédacteurs: démarrer avec VC++ Express 2005.

La difficulté de compiler une application Qt 4 sous MsDev Visual C++ porte essentiellement sur le processus de compilation et non sur les sources de la bibliothèque en elle-même. Il manque ainsi les fichiers de configuration pour les différentes versions de Visual C++.

IV-B. Application Hello World à la Qt

Ce premier programme est l'application " Hello World " standard sur l'utilisation de cette vaste bibliothèque logicielle. Voici la source complète correspondante :

 
Sélectionnez

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QPushButton hello("Salut le monde");
    hello.resize(100, 30);

    hello.show();
    return app.exec();
}
				

Ce code crée une fenêtre contenant un bouton qui a comme caption : Salut le monde !. Voici une capture d'écran:

Fenêtre de l'application Hello World

La fonction main( ) est le point d'entrée de l'application. En "programmation Qt", cette fonction est passée avec 2 paramètres lesquels disent alors au programme sur les actions de l'utilisateur par évènements. app est une instance de l'objet QApplication à qui on passe les paramètres de main comme paramètres de son constructeur (argc et argv). hello est le bouton poussoir de type QPushButton qu'on redéfinit à une taille de 100x30 après sa création. Un " widget " n'est jamais visible à sa création, il faut faire appel à show( ) pour l'afficher.

IV-C. Comment créer une windows application Qt

Il faut, avant de commencer à créer une application avec Qt, finir l'installation du plugin pour l'IDE que vous désirez.

Parmi les commandes disponibles sur la barre d'outils Qt choisir New Qt Project et dans la boîte de dialogue qui suit, nous allons choisir Qt Windows Application. Deux fichiers unités sont alors visibles dans l'arborescence des fichiers : main.cpp et mywidget.cpp (plus le header mywidget.h) sauf si on l'a renommé dès la création du nouveau projet. Une fiche (mywidget) dérivée de QMainWindow est créée par défaut. Vous avez sûrement vécu ces nuits interminables seulement pour créer une fiche avec quelques composants dessus avec une IDE non RAD comme Visual C++. Avec Qt, pour placer des composants sur une fiche ou une forme, ouvrir le fichier .ui avec Qt Designer et il suffira de faire un drag & drop des composants qu'on a besoin, de plus avec Qt la version 4, nous avons l'avantage de disposer de composants de très belle apparence.

Qt Designer est un outil de disposition (layout) GUI puissante et création de formes, ce qui permet de créer une interface utilisateur plus rapidement mais de bonne qualité. Grâce à Qt Designer, Qt possède un design largement meilleur que celui des MFC de Microsoft et des UI de Borland. Sous Qt 4, Qt Designer est intégré dans le kit et utilisable dans l'EDI directement.

Designer fournit différents types de " form " selon votre utilisation. Vous pouvez choisir un de ces gabarits ou ouvrir une forme qui a été sauvée plus tôt.

Image non disponible

Designer n'est qu'un créateur et éditeur de fichier UI. Quand un projet Qt est construit, l'UIC (User Interface Compiler) créera le fichier d'en-tête (*.h) qui nous laisse la construction de la " form ". Pour accéder à la forme et ses contenus, nous avons besoin d'inclure le fichier H créé par l'UIC :

 
Sélectionnez

#include <ui_MyWidget.h>

La forme créée ici est un descendant de QMainWindow mais créer une fenêtre descendant de QWidget se fait de la même manière en choisissant "Widget" à la création de la forme.

 
Sélectionnez

class MyWidget : public QMainWindow
{
    Q_OBJECT
public:
    MyWidget(QWidget *parent = 0);
private slots:
    void on_aboutQtButton_clicked();
private:
    Ui_MyWidget ui;
};

Q_OBJECT:

C'est une macro spécifique de Qt. Il y a beaucoup de type de macros en Qt, citons entre autre: Q_PROPERTY ( ... ), Q_CLASSINFO ( Name, Value ), Q_ENUMS ( ... ), Q_FLAGS ( ... ), Q_INTERFACES ( ... ).

Outre le constructeur, la classe contient des méthodes private slots qui sont nommées ainsi selon la convention de naming d'auto-connexion requise par uic.

Voici la définition du constructeur :

 
Sélectionnez

MyWidget::MyWidget(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
}

La méthode setupUi() est déclarée dans le fichier créé par uic : ici, Ui_MyWidget.h . L'interface utilisateur est configurée avec cette méthode. Nous mettons comme argument de cette méthode this pour utiliser la forme elle-même comme le conteneur de l'interface utilisateur

IV-D. Exemple 1 : Hello World d'une autre manière

Démarrons par cette application de découverte de Qt. Il s'agit du traditionnel Hello World sur la création d'une application fenêtrée que j'ai concocté.

Application Hello World à la randriano

Expliquons tout de suite le code correspondant à la fenêtre :

 
Sélectionnez

#include "ui_MyHelloWorld.h"

class MyHelloWorld : public QMainWindow
{
    Q_OBJECT

public:
    MyHelloWorld(QWidget *parent = 0);

private slots:
	void afficherBoite();
	void afficherBoite2();

private:
    Ui_MyHelloWorld ui;
};

La première ligne indique l'inclusion du fichier compilé à partir du fichier UI correspondant à la fenêtre créée avec Qt Designer.

C'est seulement le constructeur qui sera encapsulé dans la section publique dont la définition est la suivante :

 
Sélectionnez

MyHelloWorld::MyHelloWorld(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
	connect(ui.pushButton,SIGNAL(clicked()),this,SLOT(afficherBoite()));
	connect(ui.pushButton_2,SIGNAL(clicked()),this,SLOT(afficherBoite2()));

L'élément nouveau est la fonction connect(). Elle crée une connexion du type donné du signal dans l'objet envoyeur (Sender) à la méthode dans l'objet receveur (Receiver). On doit utiliser les macros SIGNAL() et SLOT() pour spécifier le signal et la méthode. Ces deux lignes permettent donc d'affecter respectivement les méthodes afficherBoite() et afficherBoite2() lors d'un clic sur les deux boutons poussoirs du programme.

Les deux fonctions afficherBoite() et afficherBoite2() constituent deux façons d'afficher des boîtes de message en Qt comme le fameux MessageBox() et MsgBox des autres langages et frameworks. Voici leurs sources:

 
Sélectionnez

void MyHelloWorld::afficherBoite()
{
    QMessageBox::about(this, tr("About me"),tr("My complete name is <b>Rija RANDRIANO</b>.<br> This is my website: <b>http://randriano.developpez.com</b> "));
}

void MyHelloWorld::afficherBoite2()
{
    QMessageBox::information(this, tr("A propos de moi"),tr("Je me nomme <b>Rija RANDRIANO</b>.<br> Voici mon site web: <b>http://randriano.developpez.com</b> "));
}

Voici le lien vers le zip de ce programme: Application Hello World .

IV-E. Exemple 2 : Programme de capture d'écran

C'est une simple application pour apprendre à démarrer avec une programmation plus complexe en Qt 4.

Voici le code correspondant à la capture proprement dite :

 
Sélectionnez

void MaFenetre::LancerLaCapture()
{
    if (ui.CaptureSpinBox->value() != 0)
        qApp->beep();
    originalPixmap = QPixmap::grabWindow(QApplication::desktop()->winId());
    updateCaptureEcran();

    ui.nouvBoutonCapture->setDisabled(false);
    if (ui.CaseCacherFenetre->isChecked())
        show();
}

void MaFenetre::updateCaptureEcran()
{
    ui.CaptureEcran->setPixmap(originalPixmap.scaled(ui.CaptureEcran->size(),
                                                     Qt::KeepAspectRatio,
                                                     Qt::SmoothTransformation));
}

Les éléments ui. sont les composants graphiques (faudrait voir le zip pour en savoir plus) comme bouton poussoir, spinbox, case à cocher, etc. L'image capturée sera affichée dans un composant QLabel, le composant label de Qt est différent des autres frameworks car il sert souvent pour supporter une image en Qt 4. Voici un exemple d'insertion d'image dans un QLabel :

 
Sélectionnez

    QLabel *label_1 = new QLabel(this);
    label_1->setPixmap(QPixmap(":/images/logo_developpez.png"));
    label_1->move(20, 20);
    label_1->show();

A propos de:

 
Sélectionnez

private:
    QPixmap originalPixmap;

Qt nous fournit quatre types de classes pour l'imagerie : QImage, QPixmap, QBitmap et QPicture. QImage est le plus adapté la manipulation d'une image et l'accès direct à ses pixels mais QPixmap est optimisé pour l'affichage uniquement d'image.
L'attribut " originalPixmap " sert ici pour contenir l'image capturée qui sera affichée à travers un QLabel. Pour l'enregistrer dans un fichier, il suffit de faire :

 
Sélectionnez

originalPixmap.save(fileName, format.toAscii());

Je vous invite à visionner le zip pour obtenir le code source complet.

Voici le lien vers le zip de ce programme: Shoot screen program .

IV-F. Exemple 3 : L'application exemple Puzzle offert avec Qt

PUZZLE est une partie des exemples fournis avec Qt 4. Ce chapitre ne consiste pas à expliquer le fonctionnement du programme instruction par instruction mais seulement d'un point de vue global.

Ce programme démontre une façon d'utiliser le système drag and drop dans un widget de type itemview.
De plus, puzzle montre surtout qu'on peut faire un drag'n drop d'un contrôle d'une vue (itemview) vers un autre widget.

Voici les fichiers de cet exemple:
draganddrop/puzzle/mainwindow.cpp
draganddrop/puzzle/mainwindow.h
draganddrop/puzzle/pieceslist.cpp
draganddrop/puzzle/pieceslist.h
draganddrop/puzzle/puzzlewidget.cpp
draganddrop/puzzle/puzzlewidget.h
draganddrop/puzzle/main.cpp
draganddrop/puzzle/puzzle.qrc
Le principe de cette application est simple: les éléments du puzzle sont obtenues à partir d'un fichier image qu'on a chargé et que le programme a découpé et désordonné dans la vue de gauche et remettre en place les pièces du puzzle dans la vue de droite.

Le projet n'utilise pas de fichier .ui car l'interface est intégralement créée par code.

Le source du point d'entrée main() est la suivante:

 
Sélectionnez

#include <QApplication>

#include "mainwindow.h"

int main(int argc, char *argv[])
{
    Q_INIT_RESOURCE(puzzle);

    QApplication app(argc, argv);
    MainWindow window;
    window.openImage(":/images/example.jpg");
    window.show();
    return app.exec();
}

Q_INIT_RESOURCE permet de forcer l'initialisation des ressources indiqué par le nom de base du fichier avec l'extension .qrc . Ainsi, il n'y a plus besoin de joindre le fichier example.jpg avec le programme car l'image sera incluse dans l'exécutable ou fichier binaire du programme (c'est ce qu'on appelle "ressource" en fait).
Cette fonction main() est typique de toutes les applications utilisant une seule fenêtre sauf

 
Sélectionnez

window.openImage(":/images/example.jpg");

La classe de la fenêtre principale est définie par mainwindow.cpp et mainwindow.h . Cela nous permet de savoir un peu plus sur cette fonction openImage().

 
Sélectionnez

class PiecesList;
class PuzzleWidget;
class QListWidgetItem;

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);

public slots:
    void openImage(const QString &path = QString());
    void setupPuzzle();

private slots:
    void setCompleted();

private:
    void setupMenus();
    void setupWidgets();

    QPixmap puzzleImage;
    PiecesList *piecesList;
    PuzzleWidget *puzzleWidget;
};

La définition de la méthode openImage de la classe de la fenêtre principale est ainsi:

 
Sélectionnez

void MainWindow::openImage(const QString &path)
{
    QString fileName = path;

    if (fileName.isNull())
        fileName = QFileDialog::getOpenFileName(this,
            tr("Open Image"), "", tr("Image Files (*.png *.jpg *.bmp)"));

    if (!fileName.isEmpty()) {
        QPixmap newImage;
        if (!newImage.load(fileName)) {
            QMessageBox::warning(this, tr("Open Image"),
                                 tr("The image file could not be loaded."),
                                 QMessageBox::Cancel);
            return;
        }
        puzzleImage = newImage;
        setupPuzzle();
    }
}

Tout simplement, ce bout de code permet, tout simplement, de charger l'image en ouvrant la boîte de dialogue de sélection de fichier.
Cela nous amène donc à une autre fonction importante qui découpe l'image chargée en pièces de puzzle: setupPuzzle().

 
Sélectionnez

void MainWindow::setupPuzzle()
{
    int size = qMin(puzzleImage.width(), puzzleImage.height());
    puzzleImage = puzzleImage.copy((puzzleImage.width() - size)/2,
        (puzzleImage.height() - size)/2, size, size).scaled(400,
            400, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);

    qsrand(QCursor::pos().x() ^ QCursor::pos().y());

    model->addPieces(puzzleImage);
    puzzleWidget->clear();
}

Enfin, pour comprendre le système drag and drop, il faut visionner les sources puzzlewidget.h et puzzlewidget.cpp. On manipule alors les évènements souris qui surviennent de la forme PuzzleWidget une classe fille de type QWidget, c'est cela qui permet le drag de la vue de gauche vers la vue de droite.

 
Sélectionnez

    void dragEnterEvent(QDragEnterEvent *event);
    void dragLeaveEvent(QDragLeaveEvent *event);
    void dragMoveEvent(QDragMoveEvent *event);
    void dropEvent(QDropEvent *event);
    void mousePressEvent(QMouseEvent *event);
    void paintEvent(QPaintEvent *event);

Enfin, je vous donne un lien vers le zip de ce programme mais je précise que ce dernier existe dans les exemples de Qt: Télécharger le zip du programme

V. Conclusion

Pour aborder Qt, il faut être capable de comprendre la langue de Shakespeare car la plupart des documents s'y rapportant sont anglais. Mais je pense que cela ne doit pas être un obstacle: c'est le but de mon article de faire découvrir Qt pour les débutants mais passionnés de C++ et de redécouvrir Qt sous un autre angle pour les super utilisateurs.
De quoi Qt est capable? Je crois bien que beaucoup plus que les autres outils C++ existants proposent. Admirez un peu la beauté de l'environnement graphique KDE de Linux pour comprendre son efficacité en matière de look and feel. Nombreux sont les célèbres logiciels qui utilisent actuellement Qt pas seulement pour l'apparence mais également pour ses fonctions réseaux, accès aux bases de données à savoir les logiciels d'Adobe, de Google, la NASA, ... Il existe néanmoins des documentations en français écrites par des tiers pour plonger dans l'univers Qt.

Qt 4 et C++ : Programmation d'interfaces GUI
http://c.developpez.com/livres/

VI. Présentation de Trolltech

Trolltech est une firme informatique basée à Oslo en Norvège. Qt la bibliothèque multi-plateforme est son principal produit, cet outil est développé avec C++. Trolltech développe de nombreux autres produits dérivés comme Qt pour les systèmes embarqués Qtopia, la version Qt pour Java : Qt Jambi, etc.

Aide sur Qt

Personnellement, je vous conseille de feuilleter d'abord la documentation de Qt si vous débutez en Qt : elle est contenue dans le dossier doc du répertoire de Qt. Après, vous pouvez poser vos questions dans le forum Qt:

FORUM C/C++ > Qt

Remerciements

Qu'il me soit permis d'exprimer mes sincères remerciements pour hiko-seijuro pour ses conseils ainsi que gege2061 pour ses corrections apportées à cet article.

Téléchargez : Qt - Développement C++ rapide pour Windows, Mac OS X et Linux à partir d'un seul code source.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © Rija RANDRIANO Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.