Découverte 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 .

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.

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.

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)

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.

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.

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.

			<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

			<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++.

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

#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:

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.

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.

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 :

#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.

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 :

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

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é.

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

#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 :

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:

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 .

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 :

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 :

    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:

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 :

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 .

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:

#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

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().

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:

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().

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.

    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