PyQt/Utilisation de Qt Designer/Création d'une liste de commission
Afin de se familiariser avec l'application Qt Designer nous allons vous montrer comment créer une petite application de gestion d'une liste de commission. Ceci constitue un bon exemple d'utilisation de l'interface créée à l'aide de Qt Designer.
Création de l'interface
[modifier | modifier le wikicode]L'entrée New... du menu Edit permet de créer un nouveau fichier. Le but étant de créer la fenêtre principale de l'application, il faut choisir l'entrée Main Window.
En choisissant les options par défaut, une barre de menu standard est créée, cependant pour cette petite application seules les entrées de menu Fichier et Édition seront nécessaires, par conséquent toutes les autres options par défaut sont décochées. Le menu d'accès aux propriétés des composants permet de renommer ces composants d'une manière plus explicite afin de pouvoir y faire référence dans le code de l'application. Le champ name contient le nom de votre composant en tant que nom d'objet tandis que le champ caption contient le nom de l'objet qui s'affichera dans l'interface.
L'interface de l'application se construit en sélectionnant les composants dans la barre des composants.
La liste de commissions se compose des widgets suivants :
| Widget | Name | Caption |
|---|---|---|
| ListBox | lstPanier | - |
| ListEdit | élément | - |
| PushButton | bntAjouter | Ajouter |
| PushButton | bntModifier | Modifier |
| PushButton | bntSupprimer | Supprimer |
| PushButton | bntQuitter | Quitter |
Le placement des widgets s'effectue très facilement à l'aide de la souris ou du clavier.
Gestion du redimensionnement
[modifier | modifier le wikicode]Qt Designer permet de gérer le positionnement des éléments de la fenêtre lors d'un redimensionnement.
Le menu Layout permet de sélectionner un alignement vertical, horizontal ou sur toute la grille. Dans notre cas, sélectionnez les widgets lneCourse et btnAjouter et sélectionnez l'entrée Lay Out Horizontally.
Pour les boutons btnModifier, btnSupprimer, BtnQuitter, choisir Lay Out Vertically. Les boutons précédemment énumérés et l'élément lstPanier sont alignés horizontalement. Pour finir, en choisissant Lay Out in a grid lorsque la fenêtre principale est sélectionnée, permet d'aligner l'ensemble des widgets afin qu'ils occupent toute la fenêtre lors d'un redimensionnement.
Désactiver certains boutons
[modifier | modifier le wikicode]Qt Designer permet de désactiver les boutons lors du démarrage de l'application, l'utilisateur ne pouvant donc pas cliquer dessus. Cela permet de créer une interface cohérente et intuitive, les boutons étant réactivés en fonctions des interactions de l'utilisateur avec l'interface. La fenêtre Property Editor de Qt Designer permet de désactiver un bouton en sélectionnant False pour la valeur de enabled.
L'interface est achevée, les boutons btnAjouter, btnModifier et btnSupprimer sont désactivés dans le menu propriété.
Connexion d'un slot
[modifier | modifier le wikicode]Qt Designer permet de connecter des widgets de manière simple et rapide. Une connexion s'effectue en sélectionnant dans le menu Edit l'entrée Connexions... ou en sélectionnant le bouton Connect Signal/Slots dans la barre d'outil. Si cette dernière option est choisie il suffit de choisir le widget émetteur du signal et de le relier au widget récepteur, en cliquant sur l'émetteur sans relâcher le clic tout en se dirigeant vers le récepteur. Dans le cadre de notre liste de commission, le widget émetteur est le bouton Quitter tandis que le widget récepteur est la fenêtre principale. Une boîte de dialogue permet de choisir les slots correspondants, ainsi dans le cas de notre application, lorsque l'utilisateur clique sur le bouton Quitter, la fenêtre principale se ferme. Cela permet par exemple de connecter la LineEdit avec la ListBox permettant ainsi de remplir la ListBox avec les champs introduits dans la LineEdit lors d'un clique sur la touche « Return ».
Création d'un QAction dans Qt Designer
[modifier | modifier le wikicode]Les boutons peuvent être connectés directement à un slot comme c'est le cas du bouton quitter, mais il est également possible de définir des groupes d'action sous la forme de QAction. Ce widget fournit un signal permettant de manipuler des événements multiples comme des boutons, des entrées de menus. Quatre QAction seront définies pour l'application permettant de gérer les boutons et entrées de menus Ajouter, Modifier, Supprimer et Quitter. Ainsi, la même action s'effectuera lorsque l'utilisateur cliquera sur le bouton Ajouter ou choisira le menu correspondant. Une action se crée à l'aide de la fenêtre Action Editor qui se trouve dans le menu Window > View. Une nouvelle action s'affiche en cliquant sur le bouton New. Les paramètres de ces actions se règlent dans la fenêtre Property Editor.
Remarque : Lors de la création du document, les menus Fichier et Edition ont été créés par Qt Designer, créant également des actions. Ces actions n'étant pas nécessaires, elles sont supprim ées de la liste des actions et par conséquent les entrées des menus sont également supprimées. Les nouvelles entrées des menus sont définies par des actions, l'action aQuitter est placée dans le menu Fichier tandis que les trois autres sont dans le menu Edition. Le placement s'effectue par un glissé-déposé de l'action dans le menu souhaité. Les QAction doivent être connectées à la fenêtre principale. Des slots particuliers sont créés pour ces actions.
Création de ses propres slots avec les QAction
[modifier | modifier le wikicode]Il peut être utile de créer ses propres slots, dans notre cas, nous avons besoins de quatre slots afin d'ajouter un élément, de le modifier, de le supprimer ou de quitter l'application.
Le menu Edit > Slots permet d'écrire ses propres slots. Les slots privés ajouter(), modifier(), supprimer(), quitter() sont ajoutés.
Connexion des slots avec les QAction
[modifier | modifier le wikicode]Les connexions entre les widgets ont déjà été abordées, il suffit d'ouvrir la fenêtre d'édition des connexions (menu Edit) et de créer les connexions suivantes :
| Sender | Signal | Receiver | Slot |
|---|---|---|---|
| aJouter | actived() | frmMain | ajouter() |
| aModifier | actived() | frmMain | modifier() |
| aSupprimer | actived() | frmMain | supprimer() |
| aQuitter | actived() | frmMain | quitter() |
Générer du code Python avec pyuic
[modifier | modifier le wikicode]Le logiciel pyuic, fourni avec PyQt, permet de traduire en langage Python les informations du fichier xml *.ui généré par Qt Designer.
pyuic frmMain.ui > frmMain.py
Le fichier Python contient le canevas des slots définis précédemment, il ne reste plus qu'à écrire le corps de ces méthodes. Un fichier 1 fourni avec ce rapport contient l'implémentation des slots.