tp sur qt-designer et travaux pratiques - freerobert.cireddu.free.fr/snir/tp sur qt-designer et...

Travaux Pratiques Qt (Designer et IHM)

TP sur QT-Designer et

IHM

2ème année

Page:1/24

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

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

S7. Réseaux, télécommunications et modes de

transmission

S4.8. Outils de génération de code

S4.9. Programmation événementielle

Atelier de Génie Logiciel (AGL)

Gestionnaire de projets logiciels (make)

Outils RAD, générateurs d'IHM, boîtes de

dialogue standards

Gestion des événements, signaux et interruptions

2

2

2

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

- Création de l’application graphique

- Créer ses propres signaux et slots

- Héritage multiple

- …

Support d’activité :

- Logiciels : Qt creator, suite bureautique

- Internet

- Ce document au format PDF

Il vous appartient de rédiger votre compte-rendu.

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.



IHM

2ème année

Page:2/24

Si c’est votre première activité sur Qt, vous poursuivez ci-dessous. Dans le cas contraire vous poursuivrez 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



IHM

2ème année

Page:3/24

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

https://doc.qt.io/

https://doc.qt.io/qt-5/classes.html



IHM

2ème année

Page:4/24

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 indication ci-après.

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

https://doc.qt.io/qt-5/qtmodules.html

https://doc.qt.io/qt-5/qtmodules.html

http://doc.qt.io/qtcreator/index.html



IHM

2ème année

Page:5/24

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/

Vous réaliserez l’installation « Online » de Qt car elle vous permettra de choisir les paquets que vous souhaitez installer avant leur téléchargement. Ainsi, la durée de l’installation est considérablement diminuée.

https://www.qt.io/download/



IHM

2ème année

Page:6/24

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.



IHM

2ème année

Page:7/24

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.

https://doc.qt.io/qt-5/licenses-used-in-qt.html

https://doc.qt.io/qt-5/licenses-used-in-qt.html



IHM

2ème année

Page:8/24

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.



IHM

2ème année

Page:9/24

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.

OBJECTIFS

Vous allez utiliser un nouveau module de Qt creator : Qt Designer.

Qt Designer est disponible en tant qu’application seule aussi bien qu’en tant que module dans Qt Creator.

Qt Creator est l’environnement de développement intégré dédié à Qt et facilite la gestion d’un projet Qt. Son éditeur de texte offre les principales fonctions que sont la coloration syntaxique,



IHM

2ème année

Page:10/24

l’indentation, etc... Qt Creator intègre en son sein les outils Qt Designer et Qt Assistant. Il

intègre aussi un mode débuggage.

Qt Designer est un logiciel qui permet de créer des interfaces graphiques Qt dans un environnement convivial. L’utilisateur, par glisser-déposer, place les composants d’interface graphique et y règle leurs propriétés facilement. Les fichiers d’interface graphique sont formatés

en XML et portent l’extension .ui. Lors de la compilation, un fichier d’interface graphique est converti en classe C++ par l’utilitaire

uic. Dans un premier temps, vous allez recréer l’application graphique que vous avez codé lors de l’activité sur « Qt-Widgets » :

L’application graphique

CRÉATION DE L’APPLICATION GRAPHIQUE

Lancez Qt Creator et créez un nouveau projet.

Vous choisirez Projet Qt Widget puis Application graphique Qt.

Ensuite, l’assistant va vous guider pour créer un squelette d’application Qt.

https://doc.qt.io/archives/qt-4.8/uic.html



IHM

2ème année

Page:11/24

Donnez un nom à votre projet et choisissez un emplacement pour la sauvegarde…

Choisissez l’installation de la cible…

L'option « Utiliser les shadow build » permet de séparer le dossier contenant vos sources des dossiers de fabrication (build). Le (ou les) dossier(s) de fabrication contiennent des fichiers qui sont reconstruits à chaque fabrication (fichiers objets, fichiers issus du moc et de uic, exécutable, ...). Ce n'est pas utile ici pour l’activité.

Donnez un nom à votre classe principale et choisissez la classe de base (QMainWindow ou

QDialog ou QWidget). Ces informations vont être utilisées par Qt pour générer les squelettes de

votre application.

On hérite d’une classe Qt. Le choix de la classe mère se fera en fonction des besoins. Ici, on va choisir Qwidget.

https://doc.qt.io/archives/qt-4.8/moc.html

https://doc.qt.io/archives/qt-4.8/uic.html



IHM

2ème année

Page:12/24

Terminez l’assistant de création de projet.



IHM

2ème année

Page:13/24

Compilez (fabriquez) et exécutez le squelette.

Double-cliquez sur « mawidget.ui ». Qt Designer se lance.



IHM

2ème année

Page:14/24

Sélectionnez puis ajoutez un « Vertical Layout ».

Ajoutez les deux widgets : un « Horizontal Slider » et un « LCD Number ».

Renommez-les « hs » et « lcd ».

Compilez (fabriquez) et testez l’application.



IHM

2ème année

Page:15/24

Il ne reste plus qu’a mettre en place « les signaux et les slots ».

Cliquez sur l’onglet « Éditeur de signaux et slots ». On va ajouter une connexion « signal/slot » en cliquant sur « + ».

Cliquez et choisissez successivement : l’émetteur, le signal, le receveur et le slot.



IHM

2ème année

Page:16/24

Vous pouvez visualiser vos connexions signal/slot avec la touche F4.

Compilez (fabriquez) et testez l’application.

Question 1

En utilisant seulement Qt Designer :

Modifiez l’application pour réaliser un sélecteur de nombre héxadécimal (de 0 à FF).

Vous devez modifier une propriété de l'objet lcd et une propriété de l'objet hs.

Si nous allions voir du côté « code ».

Accédez au code généré en cliquant sur Éditer.

Le fichier d’interface graphique est formaté en XML et porte l’extension .ui.



IHM

2ème année

Page:17/24

En voici un extrait : <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>MaWidget</class> <widget class="QWidget" name="MaWidget"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>400</width> <height>300</height> </rect> </property> <property name="windowTitle"> <string>MaWidget</string> </property> <widget class="QWidget" name="verticalLayoutWidget"> <property name="geometry"> <rect> <x>10</x> <y>10</y> <width>381</width> <height>281</height> </rect> </property> <layout class="QVBoxLayout" name="verticalLayout"> <item> <widget class="QLCDNumber" name="lcd"> <property name="numDigits"> <number>3</number> </property> <property name="mode"> <enum>QLCDNumber::Hex</enum> </property> <property name="value" stdset="0"> <double>0.000000000000000</double> </property> <property name="intValue" stdset="0"> <number>0</number> </property> </widget> </item> </layout> </widget> …

Extrait de mawidget.ui

Lors de la compilation, le fichier d’interface graphique .ui est converti en classe C++ par

l’utilitaire uic pour produire un fichier .h contenant le code C++.



IHM

2ème année

Page:18/24

/******************************************************************************** ** Form generated from reading UI file 'mawidget.ui' ** ** Created: Sat 24. Oct 15:55:47 2020 ** by: Qt User Interface Compiler version 4.7.4 ** ** WARNING! All changes made in this file will be lost when recompiling UI file! ********************************************************************************/ #ifndef UI_MAWIDGET_H #define UI_MAWIDGET_H #include <QtCore/QVariant> #include <QtGui/QAction> #include <QtGui/QApplication> #include <QtGui/QButtonGroup> #include <QtGui/QHeaderView> #include <QtGui/QLCDNumber> #include <QtGui/QSlider> #include <QtGui/QVBoxLayout> #include <QtGui/QWidget> QT_BEGIN_NAMESPACE class Ui_MaWidget { public: QWidget *verticalLayoutWidget; QVBoxLayout *verticalLayout; QLCDNumber *lcd; QSlider *hs; void setupUi(QWidget *MaWidget) { if (MaWidget->objectName().isEmpty()) MaWidget->setObjectName(QString::fromUtf8("MaWidget")); MaWidget->resize(400, 300); verticalLayoutWidget = new QWidget(MaWidget); verticalLayoutWidget->setObjectName(QString::fromUtf8("verticalLayoutWidget")); verticalLayoutWidget->setGeometry(QRect(10, 10, 381, 281)); verticalLayout = new QVBoxLayout(verticalLayoutWidget); verticalLayout->setSpacing(6); verticalLayout->setContentsMargins(11, 11, 11, 11); verticalLayout->setObjectName(QString::fromUtf8("verticalLayout")); verticalLayout->setContentsMargins(0, 0, 0, 0); lcd = new QLCDNumber(verticalLayoutWidget); lcd->setObjectName(QString::fromUtf8("lcd")); lcd->setNumDigits(3); lcd->setMode(QLCDNumber::Hex); lcd->setProperty("value", QVariant(0)); lcd->setProperty("intValue", QVariant(0));



IHM

2ème année

Page:19/24

verticalLayout->addWidget(lcd); hs = new QSlider(MaWidget); hs->setObjectName(QString::fromUtf8("hs")); hs->setGeometry(QRect(10, 280, 379, 20)); hs->setMaximum(255); hs->setOrientation(Qt::Horizontal); retranslateUi(MaWidget); QObject::connect(hs, SIGNAL(valueChanged(int)), lcd, SLOT(display(int))); QMetaObject::connectSlotsByName(MaWidget); } // setupUi void retranslateUi(QWidget *MaWidget) { MaWidget->setWindowTitle(QApplication::translate("MaWidget", "MaWidget", 0, QApplication::UnicodeUTF8)); } // retranslateUi }; namespace Ui { class MaWidget : public Ui_MaWidget {}; } // namespace Ui QT_END_NAMESPACE #endif // UI_MAWIDGET_H

ui_mawidget.h

Comment accéder aux objets widgets à partir du code source ? Le squelette de la classe MaWidget a été généré automatiquement par l’assistant de Qt.

Celui-ci a intégré la classe Ui générée par Qt Designer.

#ifndef MAWIDGET_H #define MAWIDGET_H #include <QWidget> namespace Ui { class MaWidget; } class MaWidget : public QWidget { Q_OBJECT public: explicit MaWidget(QWidget *parent = 0); ~MaWidget(); private: Ui::MaWidget *ui; }; #endif // MAWIDGET_H

mawidget.h



IHM

2ème année

Page:20/24

#include "mawidget.h" #include "ui_mawidget.h" MaWidget::MaWidget(QWidget *parent) : QWidget(parent), ui(new Ui::MaWidget) { ui->setupUi(this); } MaWidget::~MaWidget() { delete ui; }

mawidget.cpp Pour accéder aux objets widgets, il suffit donc de « passer » par l’objet ui (qui représente l’objet

interface graphique) soit :

ui->lcd pour accéder au widget lcd de type QLCDNumber ;

ui->hs pour accéder au widget hs de type Qslider ;

Par exemple, si l’on veut modifier le style de segment de l’objet lcd, on fera : #include "mywidget.h" #include "ui_mywidget.h" MyWidget::MyWidget(QWidget *parent) : QWidget(parent), ui(new Ui::MyWidget) { ui->setupUi(this); // modifie le style de segment de l’objet lcd ui->lcd->setSegmentStyle(QLCDNumber::Outline); } MyWidget::~MyWidget() { delete ui; }

mawidget.cpp



IHM

2ème année

Page:21/24

Le résultat

Question 2

Dans le constructeur de la classe MaWidget :

Initialisez l’objet hs avec la valeur 255 (0xFF).

Dans Qt Designer, nous allons créer nos propres signaux et slots.

Sélectionnez l’objet « MaWidget » et cliquez avec le bouton droit de la souris.

Sélectionnez « Modifier signaux/slots… ».

Ajoutez un slot et un signal.



IHM

2ème année

Page:22/24

Il faudra déclarer vos signaux et slots puis définir vos slots dans la classe MaWidget.

Déclaration du signal signal1() et du slot slot1() :

#ifndef MAWIDGET_H #define MAWIDGET_H #include <QWidget> #include "ui_mawidget.h" class MyWidget : public QWidget, public Ui::MaWidget { Q_OBJECT public: explicit MaWidget(QWidget *parent = 0); ~MaWidget(); private: signals: void signal1(); public slots: void slot1(); }; #endif // MAWIDGET_H

Définition du slot slot1() :

#include "mawidget.h" #include <QDebug> ... void MaWidget::slot1() { qDebug() << "slot1"; } ... Nous allons modifier le code généré. La relation entre la classe « Application » MaWidget et la classe (G)UI est implémentée par Qt par

une agrégation : l’application est composée d’une GUI (c’est le membre ui dans la classe MaWidget). #ifndef MAWIDGET_H #define MAWIDGET_H #include <QWidget> namespace Ui {



IHM

2ème année

Page:23/24

class MaWidget; } class MaWidget : public QWidget { Q_OBJECT public: explicit MaWidget(QWidget *parent = 0); ~MaWidget(); private: signals: void signal1(); public slots: void slot1(); private: Ui::MaWidget *ui; // Agrégation (ou composition par pointeur) générée par Qt }; #endif // MAWIDGET_H

mawidget.h

On va modifier cette relation pour mettre en oeuvre un héritage entre la classe « Application »

MaWidget et la classe (G)UI. Pour cela, on va supprimer le membre ui et réaliser un héritage

multiple : #ifndef MAWIDGET_H #define MAWIDGET_H #include <QWidget> #include "ui_mawidget.h" // <- accès à la déclaration de Ui::MaWidget class MaWidget : public QWidget, public Ui::MaWidget // <- héritage multiple { Q_OBJECT public: explicit MaWidget(QWidget *parent = 0); ~MaWidget(); }; #endif // MAWIDGET_H

mawidget.h

On peut maintenant supprimer toutes les références à ui : #include "mawidget.h" MaWidget::MaWidget(QWidget *parent) : QWidget(parent) { setupUi(this); lcd->setSegmentStyle(QLCDNumber::Outline); hs->setValue(255); } MyWidget::~MyWidget() { }

mawidget.cpp



IHM

2ème année

Page:24/24

Compilez (fabriquez) puis testez le code modifié.

Question 3

Intégrer maintenant dans votre application un QLineEdit qui permet de saisir un nombre

manuellement et de le « visualiser » dans le QLCDNumber (et le QSlider se met aussi à jour).

Prévoir aussi le fonctionnement inverse : le nombre sélectionné avec le QSlider doit s’afficher

dans le QLineEdit. La saisie et l’affichage dans le QLineEdit se fera en décimal.

Il vous faudra créer vos propres signaux et slots.

tp sur qt-designer et travaux pratiques - freerobert.cireddu.free.fr/snir/tp sur qt-designer et...

Documents