Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:1/30

http://robert.cireddu.free.fr/SNIR/

Extrait du référentiel : BTS Systèmes Numériques option A (Informatique et Réseaux) Niveau(x)

S4. Développement logiciel

S4.6.Programmation orientée objet

S4.9.Programmation événementielle

Mécanisme d’héritage

Classes abstraites, virtualité

Programmation générique : patrons de

développement (design

patterns)

Gestion des événements, signaux et interruptions

4

3

1

3

Objectifs du TP :

- Qt, c’est quoi ? (historique, compatibilité, bibliothèque ou framework, documentation)

- Installer l’IDE (compilateur, plug-ins Qt)

- Intégrer un autre environnement de compilation

- Installation de Qt (offline)

- QtWidgets

- Une première fenêtre

- Un premier bouton

- Mécanisme Signal/Slot

- Layout

Support d’activité :

- Logiciels : Qt 4.7.4, Qt creator, suite bureautique

- Internet

- Ce document au format PDF

Vous rédigerez un compte-rendu numérique.

Pensez aux captures d’écran pour imager votre compte-rendu.

Sauvegardez votre travail régulièrement !

Des modifications peuvent exister selon la version du logiciel utilisée.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:2/30

Si c’est votre première activité sur Qt, vous poursuivez ci-dessous. Dans le cas contraire vous poursuivez en cliquant sur ce lien.

Qt ? Qt se prononce /kju:t/, comme le mot anglais « cute » qui peut être traduit par mignon. C’est un ensemble de bibliothèques de composants C++ réutilisables, ou API (Application Programming Interface). Il a pour slogan : « Codez une fois, déployez partout ». Sa particularité est, en effet, de disposer d’API adaptées à un grand nombre de systèmes d’exploitation pour PC (Windows, GNU/Linux, OS X), mais aussi pour mobiles (Symbian, Android, iOS). Ces API sont organisées en modules, selon la terminologie Qt, possédant chacun une spécialité : le réseau, les bases de données, les graphismes 3D, les interfaces fenêtrées, etc. Le SDK (Software Development Kit) Qt est disponible sous forme de code compilé que vous pourrez lier directement à votre programme, ou sous la forme de code source compilable sur votre plateforme. Il est généralement fourni avec Qt Creator, un EDI (Environnement de Développement Intégré) compatible avec tous les systèmes PC et la plupart des compilateurs.

HISTORIQUE Le projet Qt est né en Norvège en 1991, grâce à Haavard Nord et Eirik Chambe-Eng. En 1988, le premier s’est vu confier par une entreprise suédoise la conception et la réalisation d’une bibliothèque de développement d’interfaces graphiques. Après deux années de réflexion sur le sujet, les deux hommes entament le développement de la bibliothèque, et au terme de plusieurs années d’efforts, le cœur de Qt est créé. Celui-ci repose sur les concepts de signaux et de « slots » qui sont à la base de la programmation événementielle. À partir de ce cœur, les développements des composants graphiques ont débuté et les premiers « widgets » virent le jour. La société Trolltech est créée. La version 1.0 de Qt est publiée à la fin du mois de septembre 1996. L’année suivante, Matthias Ettrich (aussi connu pour avoir créé le logiciel LyX) lança le projet KDE, un environnement de bureau pour les distributions GNU/Linux basé sur la bibliothèque Qt. La version 2.0 fut publiée en juin 1999 et un nouveau projet nommé Qtopia est présenté, celui-ci offre le support des systèmes embarqués sous Linux et X11. La version 3.0, publiée en 2001 introduit le support de Mac OS X en plus de Windows et de X11. Elle améliore aussi le support de l’internationalisation, de la gestion des pages de code pour les chaînes de caractères (Unicode notamment) et un interpréteur d’expressions rationnelles. La version 4.0, arrivée en 2005 apporte un grand nombre d’améliorations, en particulier dans l’affichage, et introduit la séparation des API en modules spécialisés (cœur, affichage, données, OpenGL, etc.). La conception Vue-Modèle est alors introduite pour les composants graphiques du type tableaux et listes. Un interpréteur de scripts ECMA (JavaScript) est ajouté, tout comme l’implémentation du moteur WebKit développé par Apple et Nokia pour le rendu des pages web. La licence open source passe alors de GPL en LGPL, et permet aux entreprises de développer des logiciels avec Qt et de les commercialiser plus librement.

La version 5.0, publiée à la toute fin de l’année 2012 donne une part plus importante au langage QML et à QtQuick, des technologies introduites dans Qt 4.7 dans le but de faciliter la création de

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:3/30

maquettes et prototypes. Ces technologies seront bientôt au centre des développements d’applications sur mobiles notamment. Une réorganisation mineure des API provoque l’apparition de nouveaux modules comme QtWidgets. La version 5.2 introduit le support de nombreuses plateformes mobiles comme Android, iOS et Windows Mobile ; les versions suivantes ajoutent de nombreuses API permettant d’utiliser les fonctionnalités propres à ces plateformes (GPS, NFC, Bluetooth, cartographie entre autres). Enfin, depuis la version 5.9, Qt propose « Qt for devices et Boot to Qt » qui permettent de déployer sur de très nombreuses plateformes embarquées, y compris les mobiles, vos applications Qt ainsi qu’une couche système basée sur Qt. Vous pouvez maintenant créer une sorte de système d’exploitation à déployer sur les systèmes embarqués. Qt a changé de propriétaire à plusieurs reprises, en 2008 un autre groupe norvégien, Nokia, rachète la société Trolltech et le « framework » Qt. Trolltech devient Qt Software et est intégrée au groupe Nokia. C’est Nokia qui permettra l’adoption de Qt par un très grand nombre d’entreprises en facilitant son utilisation grâce à un changement de politique de licence et en ouvrant le projet aux autres développeurs. Depuis août 2012, Qt appartient à la société Digia. Celle-ci a choisi d’orienter le « framework » vers les plateformes mobiles avec le support d’iOS, Windows 8 et Android, tout en renforçant la version pour PC.

COMPATIBILITÉ Aujourd’hui, Qt est disponible directement (ou indirectement) pour les plateformes suivantes : Original : Windows, Universal Windows Platform (UWP), X11, Embedded Linux, macOs, iOS,

Android, VxWorks, Windows CE, QNX/Blackberry 10, Wayland, INTEGRITY. Portages : OpenSolaris, Haiku, OS/2, AmigaOS et Tizen. Des supports expérimentaux existent

aussi pour webOS et Amazon Kindle. Architectures : MIPS, ARMv7 et ARM64, x86 et x86_64.

BIBLIOTHÈQUE OU FRAMEWORK ? Une bibliothèque, oui elle l’est car elle composée de modules contenant des API compilées et regroupées dans des fichiers de bibliothèques statiques ou dynamiques. On considère aussi généralement que c’est un « framework » car il impose une norme dans la façon de concevoir son programme et de le développer. Qt introduit de nouveaux mots-clés et opérateurs, dont certains sont inconnus des compilateurs, ainsi qu’un formalisme dans les fichiers d’en-têtes. Enfin, comme Qt est accompagné de nombreux outils qui vous permettront de dessiner vos interfaces graphiques, de les traduire, de compiler le macrocode, etc., on considère aussi que Qt est un « toolkitgraphique ».

DOCUMENTATION La documentation de Qt est plutôt vaste et relativement bien faite. Elle souffre cependant d’une petite faiblesse du moteur de recherche dont les résultats affichés en premier ne sont pas toujours les plus pertinents. Celle-ci est accessible librement à l’adresse : https://doc.qt.io/ Vous y trouverez un guide de démarrage, des tutoriels, des exemples et bien évidemment la documentation de référence des API et des classes. Cette dernière est accessible directement à l’adresse : https://doc.qt.io/qt-5/classes.html

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:4/30

Vous pourrez naviguer directement dans la liste des classes triées par nom. Vous pourrez aussi choisir de consulter la liste des classes par module en consultant la page : https://doc.qt.io/qt-5/qtmodules.html Enfin, une documentation du logiciel Qt Creator, l’EDI fourni dans le SDK, est disponible à l’adresse : http://doc.qt.io/qtcreator/index.html

INSTALLER L’IDE Avant de commencer à développer avec Qt, il faut installer et configurer l’environnement de développement. Qt ne contient qu’un ensemble de bibliothèques, quelques utilitaires et un EDI. Vous êtes responsable de l’installation du compilateur et du débogueur.

Si vous souhaitez installer Qt chez vous, vous pouvez suivre les indications ci-après permettant une installation « on line ». Pour l’activité nous utiliserons Qt en version 4.7.4 se trouvant dans le dossier « Support/Soft » de l’activité.

LE COMPILATEUR

Après avoir choisi le compilateur que vous souhaitez utiliser, vous en effectuerez l’installation en consultant sa documentation. Voici les cas les plus courants selon les systèmes d’exploitation :

Windows et GNU gcc

Il existe une distribution du SDK intégrant MinGW (environnement POSIX, compilateur, éditeur de liens, débogueur et API).

Windows et Visual C++

GNU/Linux et GNU gcc ou LLVM

Dans la plupart des cas, l’environnement est déjà installé. Dans le cas contraire, sous les environnements de type Debian, la commande « sudo apt-get install build-essentials » vous aidera à installer un environnement de base (pour l’architecture de votre poste de développement).

OS X et clang

Téléchargez gratuitement et installez Xcode depuis l’App Store. En ligne de commande, tapez « gcc –v ». Xcode devrait alors vous proposer d’installer les outils de développement en ligne de commande.

PLUG-INS Qt Qt propose des extensions (plug-ins) qui permettent d’augmenter ses fonctionnalités lors de l’exécution du programme. Ces extensions ne sont pas comparables aux modules de la bibliothèque. Les modules sont simplement des regroupements de classes dans des ensembles cohérents de fichiers qui peuvent être inclus facilement dans le code source. Les extensions Qt sont des bibliothèques compilées que vous pouvez lier facilement à vos programmes pour en étendre les fonctionnalités (formats d’images, de sons, drivers SQL par exemple). La couche d’abstraction introduite dans Qt 5 permet de n’avoir, dans les modules de Qt, que des API de haut niveau indépendantes de la plateforme. Certains des plug-ins servent justement cette logique d’abstraction, à commencer par les extensions de la catégorie « platforms ».

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:5/30

Voici une liste des extensions disponibles en version 5.9 : Accessibilité : composants et fonctionnalités pour les personnes déficientes. Audio : capacités audio de la plateforme. Bearer : accès aux fonctionnalités réseau étendues. GeoServices : positionnement GPS. IconEngines : formats d’icônes. Imageformats : différents formats de fichiers images et icônes. Mediaservice : interaction avec les services audio, caméra, vidéo et radio du système. Platforms : intégration avec le système d’exploitation (obligatoire). PlaylistFormats : formats de playlist musicales ou vidéo. Printsupport : prise en charge de l’impression. Script : capacités de scripting. SensorGestures : capacités de détection des « gestures » pour les plateformes mobiles. Sensors : capacités liées aux capteurs (accéléromètre, orientation dans l’espace). Styles : style des interfaces graphiques. Sqldrivers : interaction avec les drivers clients de votre SGBD ou ODBC.

Pour être utilisé en runtime par une application, une extension doit être installée dans le bundle de l’application s’il s’agit d’OS X ou à côté de l’exécutable dans un dossier nommé plugin pour les autres systèmes d’exploitation.

Vous pouvez créer vous-même des plug-ins pour étendre de manière optionnelle les fonctionnalités de vos applications. Les extensions Qt ne sont ni plus ni moins que des bibliothèques chargées dynamiquement au démarrage de votre programme (.dll sous Windows, .dylib sous OS X et .sosous GNU/Linux).

Pour créer un plug-in Qt, vous devez utiliser le modèle de projet Bibliothèques → Bibliothèque C++ et charger le plug-in au lancement de votre application grâce à la classe QPluginLoader.

Le téléchargement de Qt Creator se fait en même temps que le SDK de Qt. Ce dernier contient toutes les API, les symboles de débogage, les outils tiers, les exemples, etc. Vous trouverez les liens de téléchargement à l’adresse : https://www.qt.io/download/

En réalisant l’installation « On line » de Qt vous pourrez choisir les paquets que vous souhaitez installer avant leur téléchargement. Ainsi, la durée de l’installation sera considérablement diminuée.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:6/30

En cliquant sur « Paramètres », vous avez la possibilité de définir les paramètres d’un serveur de proxy si cela est nécessaire pour accéder à Internet depuis votre ordinateur.

Cliquez sur « Next ». Vous avez la possibilité de renseigner vos identifiants si vous êtes titulaire d’une licence commerciale.

Cliquez sur « Skip » puis « Suivant ».

Vous avez à présent la possibilité de choisir le dossier dans lequel vous souhaitez installer Qt, c’est-à-dire tout le kit de développement et les différentes versions des API.

Choisissez le dossier d’installation puis cliquez sur « Suivant ». Choisissez les composants que vous souhaitez installer. Vous devez choisir ici quelles sont les versions du kit de développement que vous souhaitez installer. Vous pouvez installer côte-à-côte plusieurs versions des API, par exemple si vous devez maintenir un programme déployé avec Qt version 5.1.0 et qu’en même temps vous développez une nouvelle application qui utilise Qt 5.9. Pour chacune des versions que vous allez installer, vous devez choisir une ou plusieurs chaînes de compilation (macOS, iOS, Android x86, Android Armv7, Windows mingw ou Windows MSVC). Si vous souhaitez consulter les sources ou (re)compiler certaines parties, vous pouvez installer le paquet des sources (attention, en version 5.9 ce paquet occupe environ 1,5 Go d’espace disque). L’espace disque nécessaire pour l’installation est calculé automatiquement en fonction des sélections que vous faites. Il est affiché à droite de la liste des composants sélectionnés.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:7/30

Vous pouvez aussi choisir certains paquets d’API supplémentaires, tels que QtCharts et QtData Visualisation. Ces API sont proposées en supplément car elles n’ont pas la même licence que les API intégrées à Qt. Elles sont sous licence GPLv3, là où les autres sont sous licence LGPL. La liste des licences utilisées par les API de Qt est disponible à l’adresse : https://doc.qt.io/qt-5/licenses-used-in-qt.html

Enfin, si vous souhaitez installer Qt Creator, sélectionnez la catégorie « Tools » située à la fin de la liste des versions de Qt.

Sélectionnez la version de Qt la plus récente (non bêta) et « Qt Creator 4.7.1 ».

Cliquez sur « Suivant ». Prenez connaissance des licences de Qt et des produits tiers intégrés et utilisés par Qt.

Cliquez sur « Suivant ».

Sélectionnez éventuellement l’emplacement du raccourci et cliquez sur « Suivant ».

Cliquez sur « Installation ».

Si vos compilateur et débogueur sont correctement installés et compatibles avec Qt, ils seront automatiquement détectés et intégrés à Qt Creator.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:8/30

Un peu de patience !......

INTÉGRER UN AUTRE ENVIRONNEMENT DE COMPILATION Si vous souhaitez utiliser un autre compilateur ou si vous faites de la compilation croisée, il vous sera peut-être indispensable de configurer manuellement la chaîne de compilation et Qt Creator pour l’utiliser, ainsi qu’un débogueur.

Ouvrez Qt Creator.

Cliquez sur « Outils » puis « Options ».

Dans l’onglet « Compiler & Exécuter » vous trouverez la liste des compilateurs détectés par Qt Creator.

Si votre compilateur ne se trouve pas dans cette liste, voici comment l’ajouter manuellement :

Cliquez sur le bouton « Ajouter » situé à droite de la liste.

Sélectionnez l’entrée « Personnalisé » du menu déroulant.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:9/30

Vous devrez alors remplir le formulaire et en particulier les champs Nom, Chemin du

compilateur) et Chemin de make (chemin d’accès à l’utilitaire de construction).

Choisissez les composants permettant de définir l’ABI de compilation. Entrez le nom d’un fichier « mkspecs » compatible avec votre environnement de compilation dans

le champ « mkspecs de Qt » (par exemple linux-g++-32).

Cliquez sur « OK ».

Toujours dans la fenêtre « Options » sélectionnez l’onglet « Kits ».

Un kit est un ensemble de réglages pour la compilation de vos programmes, il permet d’associer un compilateur, un débogueur et une version de Qt. Il est ainsi possible de créer plusieurs kits différents en combinant ces éléments.

Donnez un nom à votre kit, c’est celui que vous choisirez plus tard à la création de nouveaux projets Qt.

Choisissez le Compilateur que vous avez créé précédemment. Définissez aussi le chemin du débogueur que vous utiliserez. Enfin, choisissez la version de Qt que vous souhaitez utiliser avec cet environnement (si vous en avez installé plusieurs).

Cliquez sur OK. Vous avez à présent un nouvel environnement de compilation à votre disposition. Cet environnement s’ajoute aux autres déjà définis vous permettant ainsi de choisir, au moment de la compilation, l’environnement de compilation que vous voulez utiliser. Vous pourrez par exemple compiler certains projets pour des environnements mobiles sur architecture ARM en compilation croisée et d’autres directement avec GNU gcc sur processeur x86.

INSTALLATION DE Qt « OFFLINE » POUR L’ACTIVITÉ

Avant de procéder à l’installation de « Qt SDK », vérifiez qu’il ne soit pas déjà installé sur votre PC.

Double-cliquez sur le fichier nommé « Qt_SDK_Win_offline_v474.exe » se trouvant dans le

dossier « Support/Soft » de l’activité.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:10/30

Cliquez sur Next.

Entrez le lecteur D pour l’installation.

Cliquez sur Next.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:11/30

Cliquez sur Next.

Cliquez sur Install.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:12/30

Cliquez sur Ignore.

Cliquez sur Finish. Un peu de lecture s’affiche à l’écran avec entre autres, les possibilités offertes par cette version de

« Qt SDK ».

Puis il s’affiche la fenêtre de « Qt Creator ».

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:13/30

PRÉSENTATION

Le module QtWidgets contient toutes les classes nécessaires au garnissage des fenêtres et des boîtes de dialogue des applications créées par Qt. Les composants ainsi définis ont un lien très fort avec le module QtGui pour le rendu des fenêtres, des polices de caractères et des images par exemple. Avant la version 5 de Qt, les deux modules ne faisaient qu’un. C’est en particulier dans ce module que s’expriment toutes les qualités de Qt car les interfaces que vous créez sont véritablement multiplateformes et n’ont pas besoin d’être retouchées pour fonctionner selon votre conception initiale sur les systèmes PC compatibles avec Qt. Il introduit cependant un certain nombre de notions et de concepts qu’il est nécessaire de connaître afin de bien maîtriser l’utilisation des différents outils de création et de compilation. La première notion concerne le modèle objet :

Toutes les classes de composants graphiques, des fenêtres aux boutons et libellés, héritent de la

classe QWidget. Celle-ci hérite bien entendu de QObject et possède donc toutes les fonctionnalités permettant d’envoyer et de recevoir des signaux. C’est d’ailleurs la seule manière recommandée pour interagir avec les éléments de l’interface graphique car ceux-ci sont gérés par

un thread spécifique et les interactions entre le flux principal de votre application et le flux de l’interface graphique sont complexes. Nous verrons précisément de quelle nature sont ces interactions.

Grâce à l’adoption du modèle de conception Modèle-Vue-Contrôleur, les composants graphiques sont définis dans une classe et les fonctions de contrôle dans une autre. Ceci permettra en particulier de gérer efficacement les échanges de signaux qui permettront de modifier l’interface graphique en temps réel et de manière fluide. De la même manière, certains composants de Qt

imposent l’utilisation du modèle de conception Vue-Modèle grâce auquel le composant graphique de Qt, qui représente la Vue, s’occupe de l’affichage des éléments qui sont fournis et maintenus par une classe tierce que vous aurez créée, le Modèle. Ensuite, si la création d’interfaces graphiques peut être entièrement effectuée en la codant soi-même, la plupart des développeurs utiliseront l’application Qt Designer ou sa version intégrée dans Qt Creator. Nous étudierons en détail le fonctionnement de cette application et nous verrons

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:14/30

comment les fichiers d’interface graphique sont créés, puis compilés et intégrés dans votre projet. Nous verrons tout particulièrement comment les interfaces doivent être conçues pour s’adapter parfaitement, et surtout automatiquement, à toutes les tailles d’écrans et tous les systèmes

d’exploitation, grâce à l’usage des layouts et des spacers.

UNE 1ÈRE FENÊTRE

Dans Qt Creator, cliquez : Fichier/Nouveau fichier ou Projet.

Sélectionner Projet Qt Widget puis Application graphique Qt.

Cliquez sur Choisir.

Complétez les champs demandés pour votre environnement de travail.

Cliquez sur Suivant.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:15/30

Cochez l’installation de la cible comme ci-dessous.

Cliquez sur Suivant.

Cliquez sur Suivant.

Cliquez sur Terminer.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:16/30

Sélectionnez le fichier « main.cpp ».

Analysons quelques lignes du fichier « main.cpp ». #include <QApplication> Il s’agit ici d’inclure la classe « Qapplication » qui est la classe de base de tout programme sur

Qt. QApplication a(argc, argv); Cette ligne de code crée un objet de type QApplication. Cet objet est ici appelé a.

Le constructeur de QApplication exige que vous lui passiez les arguments du programme, c'est-

à-dire les paramètres argc et argv que reçoit la fonction main.

MainWindow w; w.show();

On a créé ici un objet w de type MainWindow.

Ensuite l’objet w appelle la méthode show().

return a.exec();

Cette ligne de code appelle la méthode exec() pour l’objet a. Cette méthode démarre notre

programme. Si vous ne le faites pas il ne se passera rien. Elle retourne le résultat de a.exec() pour dire si le programme s'est bien déroulé ou pas. Le

return provoque la fin de la fonction main, donc du programme.

Ici, tant que la méthode exec() s’exécute le programme tourne, lorsque la méthode est

terminée, le programme s’arrête.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:17/30

La classe QApplication (qui hérite de QCoreApplication) fournit une boucle principale

d’événements pour les applications Qt : tous les événements du système sont traités et expédiés. Elle gère également l’initialisation et la finalisation de l’application, ainsi que ses paramètres. L'instance de QApplication doit être créée avant tout objet graphique.

Testons ce petit programme.

Cliquez sur (en bas à gauche) Compiler ouis Exécuter.

Vous obtenez une « jolie ou cute » fenêtre « bien vide » !

Diagramme de classes partiel

Les méthodes surlignées sont des méthodes statiques.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:18/30

UN 1ER BOUTON

Avec Qt, les éléments (ou composants) graphiques prédéfinis sont appelés des widgets (pour windows gadgets).

Les widgets sont les éléments principaux de la création d'interfaces utilisateur avec Qt.

Les widgets peuvent afficher des données et des informations sur un état, recevoir des actions de l’utilisateur et agir comme un conteneur pour d’autres widgets qui doivent être regroupés.

La classe QWidget fournit la capacité de base d’affichage à l’écran et de gestion des

événements. Elle est la classe mère de toutes les classes servant à réaliser des interfaces graphiques.

Tous les éléments graphiques que Qt fournit sont hérités de QWidget ou sont utilisés

avec une classe fille de QWidget.

Les widgets :

sont crées « cachés » ; sont capable de se « peindre ; sont capable de recevoir les évènements souris, clavier ; sont tous rectangulaires ; sont initialisés par défaut en coordonnées 0,0 ; sont ordonnés suivant l’axe z (gestion de la profondeur) ; peuvent avoir un widget parent et des widgets enfants.

Un widget qui n'est pas intégré dans un widget parent est appelé une fenêtre.

Soit le code (page suivante) permettant l’affichage d’un bouton ou plutôt l’affichage d’une fenêtre bouton avec un petit texte, une info bulle et le curseur en forme de main.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:19/30

Question 1

Testez le code ci-dessous.

main.cpp #include <QApplication> #include <QPushButton> int main(int argc, char *argv[]) { QApplication App(argc, argv); // on définit la police de caractères, nom de la police, taille en pixel, // epaisseur 0 à 99, Italique = true QFont maPolice("Arial",16, 60,true); // On créé un objet de type bouton avec le texte QPushButton bouton("Demarrer"); // on affecte la font a l'objet bouton // on peut aussi faire : bouton.setFont(QFont ("Arial", ... , true"); bouton.setFont(maPolice); // on affiche une info bulle sur le bouton bouton.setToolTip("Test Info bulle"); // veut qu'une main s'affiche sur le bouton bouton.setCursor(Qt::PointingHandCursor); // on montre le bouton bouton.show(); return App.exec(); }

Le résultat obtenu Quelques explications s’imposent : La propriété « texte » est probablement la plus importante : elle permet de modifier le texte présent sur le bouton. En général, on définit le texte du bouton au moment de sa création car le constructeur accepte que l'on donne le texte du bouton dès sa création. Toutefois, pour une raison ou une autre, vous pourriez être amené à modifier le texte présent sur le bouton au cours de l'exécution du programme. C'est là qu'il devient pratique d’avoir accès à l'attribut « text » du bouton via ses accesseurs. Pour chaque attribut, la documentation de Qt nous dit à quoi il sert et quels sont ses accesseurs. Ici, « text » est de type QString, comme tous les attributs qui stockent du texte avec Qt. En effet, Qt n'utilise pas la classe « string » standard du C++ mais sa propre version de la

gestion des chaînes de caractères. Qstring, c'est un string amélioré. Dans le cas présent, il s'agit de :

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:20/30

QString text () const : c'est l'accesseur qui permet de lire l'attribut. Il retourne un QString,

ce qui est logique puisque l'attribut est de type QString. Vous noterez la présence du mot-clé

« const » qui indique que c'est une méthode constante qui ne modifie aucun attribut.

void setText (const QString & text) : c'est l'accesseur qui permet de modifier l'attribut.

Il prend un paramètre : le texte que vous voulez mettre sur le bouton. Il est courant d'afficher une petite aide sous la forme d'une infobulle qui apparaît lorsque l’on pointe sur un élément avec la souris. L'infobulle peut afficher un court texte d'aide. On la définit à l'aide de la propriété toolTip. Pour modifier l'infobulle, la méthode à appeler est setToolTip !

Diagrammes de classes partiels

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:21/30

La création de widgets personnalisés est faite en héritant de QWidget ou d’une classe fille.

La création de fenêtres personnalisées est faite en héritant de QWidget, QDialog ou

QMainWindow.

MÉCANISME SIGNAL/SLOT

Ensemble, les signaux et les slots forment un mécanisme de communication entre objets. Un signal est émis lorsqu’un événement particulier se produit. Les widgets de Qt possèdent de nombreux signaux prédéfinis mais vous pouvez aussi hériter de ces classes et leur ajouter vos propres signaux. Un slot est une méthode qui va être appelée en réponse à un signal particulier. Les widgets de Qt possèdent de nombreux slots prédéfinis, mais il est très courant d’hériter de ces widgets et de créer ses propres slots afin de gérer les signaux qui vous intéressent.

Toutes les classes qui héritent de QObject ou d'une de ses sous-classes (par exemple,

QWidget) peuvent contenir des signaux et des slots. Il faut aussi ajouter la macro

Q_OBJECT au sein de cette classe.

Les signaux et les slots sont faiblement couplés : un objet qui émet un signal ne sait pas (et ne se soucie pas de) quels slots vont recevoir ce signal. De la même façon, un objet interceptant un signal ne sait pas quel objet a émis le signal. Une connexion signal/slot doit être réalisée par la méthode connect() :

bool QObject::connect( const QObject * sender, const char * signal, const QObject * receiver, const char * method, Qt::ConnectionType type = Qt::AutoConnection ) const

Une connexion signal/slot peut être supprimée par la méthode disconnect().

Question 2

Testez le code ci-dessous.

main.cpp

#include <QApplication> #include <QPushButton> int main(int argc, char **argv) { QApplication app(argc, argv);

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:22/30

QPushButton bouton("Quitter"); // on connecte le signal clicked() de l’objet bouton // au slot quit() de l’objet app QObject::connect(&bouton, SIGNAL(clicked()), qApp, SLOT(quit())); bouton.show(); int ret = app.exec(); return ret; }

qApp est un pointeur global qui contient toujours l'adresse de l'objet de QApplication.

Les applications doivent se terminer proprement en appelant QApplication::quit().

Cette méthode est appelée automatiquement lors de la fermeture du dernier widget. Lorsque l’on clique sur le bouton « Quitter », on sort de l’application.

Il est possible de créer ses propres signaux et slots. Pour déclarer un signal personnalisé, on utilise le mot clé signals dans la déclaration de la classe

et il faut savoir qu’un signal n’a : - pas de valeur de retour (donc void) et

- pas de définition de la méthode (donc pas de corps { }).

Pour émettre un signal, on utilise la méthode emit :

emit nomDuSignal(parametreDuSignal); Les slots personnalisés se déclarent et se définissent comme des méthodes private, protected

ou public. On utilise le mot clé slots dans la déclaration de la classe. Les slots peuvent être

appelés directement comme toute méthode.

LAYOUT Vous pouvez gérer vos widgets de deux manières : - avec un positionnement absolu, - avec un positionnement relatif.

Le positionnement absolu est généralement déconseillé car il pose des problèmes de résolution d'écran, de redimensionnement, ...

Qt fournit un système de disposition (layout) pour l’organisation et le positionnement automatique

des widgets enfants dans un widget. Ce gestionnaire de placement permet l’agencement facile et le bon usage de l’espace disponible.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:23/30

Qt inclut un ensemble de classes QxxxLayout qui sont utilisées pour décrire la façon dont les

widgets sont disposés dans l’interface utilisateur d’une application.

Diagramme de classes partiel

Toutes les classes héritent de la classe abstraite QLayout. Les plus utilisés sont :

- QHBoxLayout : boîte horizontale

- QVBoxLayout : boîte verticale

- QGridLayout : grille

- QFormLayout : formulaire

Toutes les sous-classes de QWidget peuvent utiliser les layouts pour gérer leurs enfants.

QWidget::setLayout() applique une mise en page à un widget.

Lorsqu’un layout est défini sur un widget de cette manière, il prend en charge les tâches

suivantes : - le positionnement des widgets enfants - la gestion des tailles (minimale, préférée, ...) - le redimensionnement - la mise à jour automatique lorsque le contenu change

D'une manière générale, les widgets sont hiérarchiquement inclus les uns dans les autres. Le principal avantage est que si le parent est déplacé, les enfants le sont aussi.

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:24/30

Les gestionnaires de disposition (les classes QxxxLayout) simplifient ce travail :

- on peut ajouter des widgets dans un layout : void QLayout::addWidget(QWidget *widget)

- on peut associer un layout à un widget qui devient alors le propriétaire du layout et parent des widgets inclus dans le layout : void QWidget::setLayout (QLayout *layout)

- on peut ajouter des layouts dans un layout : void QLayout::addLayout(QLayout *layout) Exemple : on utilise le gestionnaire de disposition QVBoxLayout que l’on associe au widget parent

(mainWidget). La classe QScrollArea fournit une zone de défilement utilisée pour afficher le

contenu d’un widget enfant dans un cadre (imageLabel).

Question 3

Testez (debugger) le code ci-dessous.

main.cpp #include <QApplication> #include <QLabel> #include <QScrollArea> #include <QComboBox> #include <QVBoxLayout> int main(int argc, char *argv[]) { QApplication a(argc, argv); // une image QLabel * imageLabel = new QLabel; imageLabel->setPixmap(QPixmap("logo.png")); // une zone de défilement QScrollArea * imageArea = new QScrollArea; imageArea->setWidget(imageLabel); // imageArea parent de imageLabel // une liste déroulante QComboBox * sizeComboBox = new QComboBox; sizeComboBox->addItem("100x200"); sizeComboBox->addItem("200x400"); // un positionnement vertical QVBoxLayout * layout = new QVBoxLayout; // parent de imageArea et de sizeComboBox layout->addWidget(imageArea); layout->addWidget(sizeComboBox); // le widget central QWidget mainWidget; mainWidget.setLayout(layout); // parent de layout mainWidget.show(); // affichage de mainWidget et de ses enfants return a.exec(); // boucle d’attente d’évènements // destruction de mainWidget et de ses enfants : // -> destruction de layout // -> destruction de sizeComboBox // -> destruction de imageArea // -> destruction de imageLabel }

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:25/30

Exemple d’affichage obtenu La documentation de référence Qt4 : https://doc.qt.io/archives/qt-4.7/index.html et plus particulièrement les concepts de base : Signals and Slots, Main Classes, Main Window Architecture, Internationalization, ... : https://doc.qt.io/archives/qt-4.7/qt-basic-concepts.html La documentation de Qt4 fournit de nombreux exemples (plus de 400), notamment : https://doc.qt.io/archives/qt-4.7/examples-widgets.html https://doc.qt.io/archives/qt-4.7/examples-mainwindow.html https://doc.qt.io/archives/qt-4.7/examples-layouts.html

UN PETIT BILAN

Question 4

Peut-on écrire en Qt une application graphique qui exploite les donnnées en provenance

d’une base de données MySQL et qui exporte celles-ci au format XML ?

Question 5

Un code source écrit en Qt pourra-t-il produire une application pour Linux et Windows ?

Question 6

Parmi ces propositions, identifiez celles qui sont des évènements ? Propositions : un déplacement de la souris ; un appui sur une touche ; afficher une image ; se connecter à une base de données

Question 7

Parmi ces propositions, identifiez celles qui sont des gestionnaire d’évènements (handler) ?

Propositions : un déplacement de la souris ; un appui sur une touche ; afficher une image ; se connecter à une base de données

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:26/30

Question 8

Quelle est la classe de base de toutes les autres classes de Qt ?

QClass ; QApplication ; QObject ; Qt ; QBase

Question 9

La classe Window est-elle une classe de Qt ?

Question 10

Quelle est la classe qui fournit la boucle d’évènement ?

QApplication ou QObject

Question 11

Quelle est le nom de la classe que toute application Qt doit instancier ?

QApplication ou QObject

Question 12

Quelle(s) notion(s) n’existe(nt) pas normalement en C++ ? méthode statique ; slot ; signal ; héritage

Question 13

Si une propriété d’une classe Qt s’appelle value, comment puis-je la modifier ?

en appelant la méthode setValue() ; en appelant la méthode setvalue() ; en appelant la

méthode value() ; On ne peut pas, il faut faire un héritage de cette classe.

Question 14

Qu’est-ce qu’un widget qui n’a pas de parent ? une belle erreur de compilation ; une fenêtre ; un plantage potentiel de l’ordinateur à l’exécution

Question 15

Quelle méthode de la classe QMainWindow permet de provoquer l’affichage de la fenêtre ? open() ; show() ; run() ; display()

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:27/30

Question 16

De quelle classe hérite QDialog ? QWidget ; QApplication ; QMainWindow

Question 17

Comment émet-on un signal ? monSignal ; monSignal() ; signal(monSignal()) ; emit monSignal() ;

Question 18

Le signal envoi() est-il compatible avec le slot reception(int) ?

Question 19

Peut-on connecter un signal à plusieurs slots ?

Question 20

Peut-on connecter plusieurs signaux à un même slot ?

Question 21

Les layouts permettent-ils d’obtenir un positionnement absolu ou relatif des widgets ?

Question 22

Quelle méthode de la fenêtre doit-on appeler pour lui indiquer le layout principal qu’elle doit utiliser ?

setLayout ; addLayout ; setWidget ; addWidget

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:28/30

EXERCICE On désire réaliser une application affichant ceci :

Le principe de cette application est simple : lorsque l’utilisateur déplace le curseur d’un QSlider,

la valeur correspondante s’affiche dans un QLCDNumber. Pour cela on va créer une classe

MyWidget contenant ces deux widgets (enfants). On vous fournit la déclaration de la classe

MyWidget :

MyWidget.h #ifndef MYWIDGET_H #define MYWIDGET_H #include <QtGui> class MyWidget : public QWidget { Q_OBJECT public: MyWidget( QWidget *parent = 0 ); private: // mes widgets QLCDNumber *lcd; QSlider *slider; }; #endif

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:29/30

Question 23

Donnez (trouvez) la définition du constructeur de la classe MyWidget : MyWidget::MyWidget( QWidget *parent ) : QWidget( 0 ) { ... } MyWidget::MyWidget( QWidget *parent ) : QWidget( this ) { ... } MyWidget::MyWidget( QWidget *parent ) : QWidget( parent ) { ... }

Question 24

Instanciez l’objet lcd dans le constructeur de la classe MyWidget :

lcd = new QLCDNumber( this ); lcd = new QLCDNumber(); lcd = new QLCDNumber( Qt::Horizontal );

Question 25

Instanciez l’objet slider dans le constructeur de la classe MyWidget :

slider = new QSlider( Qt::Vertical, this ); slider = new QSlider( Qt::Horizontal, this ); slider = new QSlider( this ); slider = new QSlider();

Question 26

Pour assurer l’affichage désiré, on a besoin d’instancier un layout dans le constructeur de

la classe MyWidget : lequel ?

QLayout *mainLayout = new QLayout; QHBoxLayout *mainLayout = new QHBoxLayout; QVBoxLayout *mainLayout = new QVBoxLayout; QFormLayout *mainLayout = new QFormLayout;

Question 27

Placez le widget lcd dans le layout dans le constructeur de la classe MyWidget :

lcd->addLayout( mainLayout ); mainLayout->addWidget( this ); mainLayout->addWidget( lcd ); mainLayout->addLayout( lcd );

Question 28

Fixez le layout mainLayout comme layout principal du widget dans le constructeur de la

classe MyWidget :

addLayout( mainLayout );

Travaux Pratiques

Qt (Widgets)

TP sur QT-Widgets

2ème année

Page:30/30

setLayout( this ); setLayout( mainLayout ); mainLayout->addWidget( this );

Question 29

Assurez la connexion signal/slot entre le slider et le lcd dans le constructeur de la classe MyWidget :

connect( lcd, SIGNAL(display(int)), slider, SLOT(valueChanged(int)) ); connect( this, SIGNAL(valueChanged(int)), this, SLOT(display(int)) ); connect( slider, SIGNAL(valueChanged()), lcd, SLOT(display() ); connect( slider, SIGNAL(valueChanged(int)), lcd, SLOT(display(int)) );

Question 30

Instanciez un myWidget et lancez son affichage comme fenêtre principale dans la fonction

main() de l’application :

MyWidget myWidget( this ); myWidget->show(); MyWidget myWidget; myWidget->show(); MyWidget myWidget(); myWidget.exec(); MyWidget myWidget; myWidget.show();

Question 31

Instanciez un objet QApplication et lancez l’exécution de sa boucle d’évènements dans la

fonction main() :

QApplication a(argc, argv); ...; return a.exec(); QApplication a; ...; return a.exec(); QApplication a(argc, argv); ...; return a->exec(); QApplication a(myWidget); ...; return a.exec();

Question 32

Créez l’application.

Nommage du compte-rendu : VOTRE NOM_SNIR2_TP_QtWidget.pdf