Créer des interfaces avec Qt Designer

00:00:00 :Dans cette vidéo on va voir comment on peut prendre le code que l'on a généré avec PySideUIC et le charger dans un autre script Python pour ne pas avoir à modifier directement le script.
00:00:09 :Si vous souhaitez revoir ces différentes étapes, je vais vous mettre le lien d'un tutoriel qui est sur le site de Qt qui va vous montrer le code que vous pouvez utiliser et on va voir ça ensemble dans le détail puisqu'il y a des choses à prendre en compte qui ne sont
00:00:22 :pas forcément expliquées dans ce tutoriel. Mais ça peut vous donner une idée si jamais vous voulez retrouver la base de code qu'on va voir ensemble. Donc dans un dossier ici,
00:00:30 :dans mon dossier source, j'ai mon fichier main.py qui pour l'instant ne contient rien,dans lequel on va importer notre fichier py, donc le fichier calculateur qui contient toute notre interface, et je vais vous montrer également comment on peut loader directement le fichier UI et à quel point c'est pas mal plus long à exécuter. Donc on va commencer par cette façon de faire
00:00:48 :puisque là il suffit de copier ce qui est ici, donc vous pouvez copier tout le code là dans cette partie où ils vous disent loading it directly, donc vous pouvez aller directement chercher votre fichier .ui et l'ouvrir. Donc je vais vous montrer ce que ça donne si je le mets
00:01:01 :dans main.py, on va mettre non pas main window ici mais calculateur. Donc qu'est ce qui se passe ici ? En fait on fait une QApplication pour faire une application Qt, ensuite on va chercher avec
00:01:13 :un QFile notre fichier .ui, on va essayer de l'ouvrir, donc là c'est juste des vérifications,ça on pourrait l'enlever, ça c'est juste au cas où le fichier n'arrive pas à être ouvert,pareil ici on pourrait enlever ça, donc vous voyez qu'il y a pas mal de code en plus qui n'est pas
00:01:26 :forcément très très utile, là le 6exit on pourrait l'enlever également, et là on se retrouve avec quelque chose qui est un peu plus proche de ce qu'on a l'habitude de voir. Donc on a ce script
00:01:35 :ici, je le sauvegarde, donc je vais cliquer sur le bouton pour lancer mon script et vous allez voir que ça prend un petit peu de temps à ouvrir. Voilà donc l'interface est ouverte et on a bien
00:01:46 :donc l'interface de notre calculatrice comme ceci qui fonctionne. Le problème comme je vous disais c'est que là en fait on a notre window mais on n'a aucune complétion, si je fais window . vous
00:01:55 :voyez qu'il n'y a rien qui apparaît après puisque là on va chercher directement le fichier UI et ça ce n'est pas du Python, donc forcément Visual Studio Code ou PyCharm ou n'importe quel éditeur que vous utilisez ne va pas reconnaître les widgets qui sont à l'intérieur de notre fichier .ui.
00:02:11 :Donc ce qu'on peut faire à la place c'est aller utiliser la deuxième façon de faire,qui est la première en fait dans ce tutoriel, donc on va copier tout ça ici et je vais vous montrer ce qu'il faut modifier et ce qu'on fait avec cette première façon de faire. Donc là on
00:02:23 :retrouve là encore la QApplication avec notre window qu'on affiche et ensuite le app.exec pour lancer notre application. Donc qu'est ce qu'on fait ici ? Et bien on va directement chercher
00:02:33 :notre module, donc là on va changer le nom du module puisque nous ce n'est pas UIMainWindow mais c'est Calculator et depuis ce module Calculator on va aller importer notre classe UIForm. Donc le nom de la classe ici c'est tout simplement le nom que vous avez donné à
00:02:46 :l'intérieur de QtDesigner, donc là on a Form ici et c'est ce nom qu'on retrouve avec UI au début.Donc si par exemple ici je l'avais appelé Calculator comme ceci à la place, là on se serait retrouvé avec Calculator au lieu de Form. Donc c'est vraiment juste ça si jamais vous souhaitez
00:03:01 :avoir un nom de classe un peu plus explicite il suffit de changer le nom ici de votre widget dans QtDesigner. Donc nous on a UIForm ici donc c'est ça qu'on va importer dans notre script,
00:03:11 :donc on va dire From Calculator Import UIForm et on va le mettre ici à la place de UIMainWindow.Pour l'instant si je lance ça vous allez voir qu'on a un truc un petit peu bizarre, donc déjà vous voyez que c'est pas mal plus rapide à ouvrir, cependant on n'a pas du tout la même interface que
00:03:26 :sur QtDesigner donc ça c'est normal en fait, c'est parce que par défaut dans ce tutoriel ils utilisent un QMainWindow et nous dans QtDesigner on avait mis un QWidget. Donc forcément la logique
00:03:36 :n'est pas la même entre les deux, un QMainWindow ça a une zone centrale de widget dans laquelle il faut mettre notre interface alors qu'un QWidget ce n'est pas le cas. Donc là à la place de
00:03:45 :QMainWindow je vais mettre un QWidget, il faut bien entendu l'importer à la place de QMainWindow ici donc dans Visual Studio Code ça s'est fait automatiquement mais n'oubliez pas de le faire si jamais vous êtes sur un éditeur qui n'importe pas automatiquement le nom des classes. Donc là
00:04:00 :on a remplacé tout ça par un QWidget et normalement c'est tout ce qu'on a besoin de modifier. Là le QMainWindow c'est le nom de ma classe donc ça je n'ai pas besoin d'y toucher. Donc je sauvegarde,
00:04:10 :je relance et là vous allez voir que normalement on se retrouve de la même façon avec notre interface qui est correctement affichée. Et donc là tout l'intérêt c'est que maintenant on va
00:04:18 :pouvoir faire .ui. et là on retrouve tous nos éléments avec l'autocomplétion. Donc là ce n'est pas très explicite puisqu'on n'avait pas changé le nom des éléments, on avait laissé PushButton, LineEdit etc mais par exemple si je prends le bouton ici pour faire le calcul on pourrait l'appeler par exemple Result, on va l'appeler ComputeResult et je vais vous montrer
00:04:37 :juste donc en mettant calculateur ici ComputeResult, on va sauvegarder donc notre interface, on va refaire une conversion. Donc je vais ici relancer ma commande qui me permet de convertir le fichier
00:04:48 :UI en fichier Python. Donc je relance la conversion, ça va écraser le fichier que j'avais donc là il n'est plus exactement au même endroit, moi j'avais fait un autre dossier. Donc je vais retourner dans
00:04:58 :tbash ici et voilà j'ai mon fichier Python donc je vais l'écraser à la place de celui-ci. Je le remplace et là si je retourne voir mon calculateur.py vous voyez que cette fois-ci on a bien
00:05:09 :donc le calculateur qui est le même que ce qu'on avait donc dans QtDesigner qui est le nom de mon widget dans le Object Inspector. Donc ça ça a bien été modifié et on va retrouver normalement
00:05:19 :ici le ComputeResult qui doit être donc le QPushButton. Alors je ne le trouve pas pourquoi est-ce qu'il est là ? ComputeResult. Alors je n'ai pas l'autocomplétion c'est peut-être juste
00:05:31 :peut-être qu'il faut juste que je... Je vais juste fermer et rouvrir le fichier. Ah oui en fait non je sais pourquoi ça ne marche pas c'est parce que là j'ai pas changé le nom de la classe. Donc là
00:05:39 :on est resté avec UIForm donc forcément ça ne marche pas puisque là on avait changé le nom de notre QWidget. Donc il faut bien faire attention ici de reprendre le nom de la
00:05:49 :classe. Et là donc si je refais Self.UI.Compute cette fois-ci on a bien le ComputeResult qui est le bouton de l'égalité qui me permet de calculer le résultat. Et avant de terminer cette partie
00:05:59 :je vais juste vous montrer une dernière façon de faire qui est en fait ma façon préférée puisque là vous voyez qu'avec la façon de faire de la documentation ils vont créer en fait un attribut dans notre MainWindow qu'ils appellent UI dans ce cas-ci qui est égal à notre classe et ensuite
00:06:12 :ils font Self.UI.SetupUI. Donc là moi ce que j'aime pas trop c'est qu'à chaque fois on est obligé de passer par cette variable ici Self.UI pour interagir avec notre interface qui est dans
00:06:21 :Calculator ici. Donc moi ce que je préfère en fait c'est utiliser l'héritage tout simplement,donc le rajouter après, donc mettre un deuxième héritage après le QWidget. On va mettre notre
00:06:31 :classe ici tout simplement et comme ça eh bien on peut enlever tout ça. On enlève le Self.UI et on fait juste un Self.SetupUI puisque maintenant on hérite de UICalculator donc on hérite également
00:06:42 :de toutes les méthodes qui sont définies à l'intérieur et je trouve voilà que c'est plus simple de faire comme ça. Là si je relance l'interface vous voyez qu'on a exactement la
00:06:49 :même chose avec notre application qui fonctionne de la même façon. Donc voilà moi je préfère ça comme ça ça permet par la suite de faire Self.ComputeResult et donc d'utiliser par exemple
00:06:58 :toutes les méthodes qu'on voudrait utiliser sur nos widgets. Donc par exemple si je veux changer je vais mettre Bonjour ici juste pour vous montrer que ça marche. Donc je lance l'interface et là
00:07:06 :j'ai bien Bonjour ici. Donc comme ça on a bien le lien qui est fait entre les deux, ça nous permet de ne pas avoir une variable en plus pour accéder à notre interface et vous voyez qu'avec cette façon de faire. Donc moi je trouve qu'on a le meilleur des deux mondes, bien sûr on est obligé
00:07:18 :de passer par la conversion à chaque fois ici mais après on a l'autocomplétion dans notre fichier,on a bien tout séparé, on a notre fichier ici dans lequel on peut aller chercher notre interface et par la suite si on souhaite la modifier il n'y a pas de souci et on va faire toute la logique après
00:07:32 :dans ce fichier là et comme ça on peut garder le fichier qui a été généré intouché. Donc celui là on n'y touche jamais, on fait juste le régénérer à chaque fois qu'on fait une modification dans QtDesigner et on garde toute la logique dans notre script à nous de ce côté.

Charger l'interface de Qt Designer

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Franck

Utilisation obligatoire d'un layout dans Qt Designer

Simon

A quoi bon?

Rechercher sur le site