Créer un gestionnaire de tâches avec Qt

00:00:00 :On va modifier notre interface, on va faire plusieurs choses. On va modifier nos boutons pour mettre des icônes à la place du texte et également on va changer les marges à l'intérieur de notre fenêtre et enlever la barre de menu au-dessus de la fenêtre qui permet de minimiser,d'agrandir ou de quitter notre application. La première chose que je vais faire ici c'est,
00:00:19 :dans ma méthode setupUI, inverser le modifyWidgets puisqu'on va modifier également nos layouts.Donc pour l'instant, si on le fait avant de créer les layouts, ça ne va pas marcher. Donc je vais
00:00:29 :mettre modifyWidgets après la création des layouts et comme ça on n'aura pas de problème. Donc à l'intérieur de modifyWidgets, je vais ajouter pas mal de choses. Pour l'instant il n'y a rien,
00:00:37 :vous allez voir que ça va vite se remplir. La première chose qu'on va faire c'est changer les marges de notre fenêtre puisque pour l'instant, si je lance mon application, vous voyez qu'on a par défaut des marges qui sont autour de mon listewidgets et on a également un espace entre
00:00:50 :chaque widget par défaut. Donc on va mettre tout ça à zéro. Vous allez voir que tout de suite ça va faire un petit peu bizarre. Quand on met tout à zéro, ça va être un peu serré mais vous allez
00:00:59 :voir ensuite au fur et à mesure des améliorations, ça va commencer à ressembler un peu plus à quelque chose. Donc on va faire ça sur notre main layout. Sur notre main layout ici, on fait
00:01:08 :setContentsMargins, donc ça c'est les marges et les marges on peut les changer à gauche, en haut,à droite et en bas. Donc là vous voyez dans le pop-up qui est apparu, c'est d'ailleurs ce que ça
00:01:16 :nous indique, on a left, top, right et bottom qui nous demandent à chaque fois un nombre entier,donc un integer. Donc là on va mettre 0, 0, 0 et 0, donc pour la gauche, pour le haut, pour la droite
00:01:27 :et pour le bas. La deuxième chose qu'on va changer comme je vous disais, c'est l'espacement. Donc là encore sur le main layout, on va changer le spacing. Donc on va dire setSpacing et là pour
00:01:36 :le coup c'est juste l'espace en général, donc il y a juste un nombre qui est attendu. Donc on va mettre là encore 0. Alors si je lance mon interface, vous allez voir qu'à prime abord, c'est pas
00:01:44 :forcément très très joli. On a ici tout qui est un peu collé les uns à côté des autres. On a encore des espaces, vous voyez ici dans notre deuxième layout, donc le layout avec les boutons,eux ils sont encore un petit peu espacés. Vous voyez il y a une marge en fait qui reste, mais ça ne pose
00:02:00 :pas vraiment de problème. Moi c'est vraiment la liste ici autour, je voulais que ma liste soit collée aux bordures de ma fenêtre. Donc c'est pour ça que j'ai fait le setContentsMargins et le
00:02:09 :spacing à 0. Ce qu'on va faire ensuite, c'est enlever les bords, puisque pour l'instant, donc ça se voit peut-être pas forcément très bien ici, mais si je zoome un peu, ici vous voyez qu'on a une toute petite bordure grise. Et on va avoir la même chose ici en bas, on va avoir des bordures, donc tout
00:02:23 :ça on va l'enlever. Et pour ça on va modifier la feuille de style de notre widget. Donc la feuille de style de notre widget, on va la modifier en faisant cette stylesheet. Et on va juste mettre
00:02:32 :une seule chose, c'est très facile, on va dire border égale à none. Alors attention, none ici en CSS, il n'y a pas de majuscule, donc c'est un n minuscule. Et donc on dit tout simplement que sur
00:02:42 :toute notre application, on veut que les bords soient à none. Donc je lance, et là vous allez voir qu'on n'a plus aucune bordure nulle part. Donc autant sur mon liste widget, si je zoome ici, on a
00:02:51 :encore une petite bande grise, mais elle est vraiment moins importante qu'avant. Et là pareil en bas,on n'a plus de bordure pour séparer mon liste widget, et même plus de bordure autour de mes boutons. Donc ça, ça ne pose pas de problème, pour l'instant c'est un peu moche comme je vous dis,
00:03:03 :parce qu'on a encore du texte autour de nos boutons. Mais on va changer ce texte pour des icônes, et ça va être un peu plus sympa visuellement. Donc on a enlevé les bordures, et maintenant la
00:03:13 :dernière chose qu'il va falloir changer au niveau de notre interface ici, ça va être la barre de menu. Pour l'instant on a encore la barre de menu qui nous permet de fermer l'application, de la
00:03:21 :maximiser, etc. Nous on ne veut pas permettre à l'utilisateur de faire tout ça. On va en fait juste avoir le bouton quit ici en bas, qui pour l'instant ne fait rien. Si je clique dessus, il ne
00:03:30 :se passe rien. Mais on va tout de suite connecter la méthode qui va nous permettre de quitter l'application quand on clique dessus, et par défaut on ne veut pas que l'utilisateur puisse minimiser ou agrandir l'interface. Pour la minimiser en fait, vous allez voir quand on fera le menu ici dans
00:03:44 :notre barre de menu, il suffira de cliquer sur l'icône pour minimiser notre interface. Donc on passera par cette façon de faire pour minimiser. Pour ça on va changer les window flags.
00:03:54 :Les window flags en fait c'est des flags, flag ça veut dire drapeau en français, je ne sais pas trop comment traduire ça en français. C'est en fait des attributs de votre fenêtre qui
00:04:04 :permettent de changer des choses au niveau de la fenêtre même. Donc là on n'est même plus dans le style, c'est vraiment au niveau de la fenêtre en général. Donc pour modifier ces flags, on va
00:04:13 :utiliser cette window flags avec un S, puisqu'on va en mettre plusieurs. Donc les deux flags qu'on va modifier, c'est le frameless window hint qui va me permettre d'enlever la barre de menu tout simplement, et on va en mettre un autre qui est window stay on top hint. Donc si vous parlez un
00:04:31 :peu anglais, ce deuxième flag va nous permettre de nous assurer que notre fenêtre reste en avant-plan. Donc même quand on va cliquer en fait n'importe où en dehors de notre interface, ça ne va
00:04:41 :pas la minimiser, elle va rester en avant-plan et c'est uniquement quand on va cliquer sur l'icône que l'on va pouvoir la minimiser. Donc ces deux flags sont à l'intérieur de cuticore.cutie et
00:04:50 :on va avoir donc frameless window hint, donc là on dit merci à l'autocomplétion, et on va avoir cuticore.cutie et window stay on top, donc stay on top hint. Vous voyez vous avez aussi stay on
00:05:01 :bottom hint si vous voulez que votre fenêtre soit toujours en arrière-plan. Nous on veut qu'elle soit toujours en avant-plan, et on met ici une barre qui nous permet de dire qu'on veut à la fois ce flag et celui-ci. Donc c'est comme un end si vous voulez, ça nous permet d'avoir deux flags
00:05:15 :d'un coup. On pourrait également utiliser la méthode self.setwindowflag au singulier et spécifier sur deux lignes chacun de ces flags ici. Moi je le fais sur une seule ligne, donc pour ça
00:05:25 :j'utilise à la fois la méthode au pluriel, donc setwindowflags avec un s ici, et la barre qui me permet de spécifier deux flags d'un coup. Donc là si je relance mon application, on va avoir
00:05:36 :vous voyez une fenêtre qui n'a plus de barre de menu, et si je clique en dehors vous voyez que automatiquement la fenêtre ne disparaît pas. Donc ça va être pratique pour ce qu'on veut faire,
00:05:45 :pour l'instant ça n'est pas très pratique puisque je n'ai même pas encore codé le bouton quit,donc là en fait mon interface est un peu bloquée. Heureusement sur PyCharm on peut cliquer sur le
00:05:52 :carré rouge ici pour arrêter notre programme, mais si on n'avait pas PyCharm on serait un peu embêté, il faudra aller tuer le processus en fait en arrière-plan, le processus Python,puisque actuellement on n'a plus la barre de menu pour fermer notre interface, et le bouton quit ne fait rien. Donc on est un peu piégé, moi je vais cliquer ici sur le petit carré rouge pour fermer
00:06:10 :mon application, et on va donc tout de suite, pour ne pas être trop embêté, coder le bouton quit qui va nous permettre de fermer l'interface. Donc on va faire self.boutonquit.clicked.connect,
00:06:20 :et on va connecter tout ça tout simplement à la méthode close. Donc close c'est une méthode qui existe par défaut sur les QWidgets, qui nous permet de fermer le QWidget. Donc quand on va
00:06:28 :cliquer sur le bouton ça va fermer le QWidget. Donc si je relance et que je clique sur quit,automatiquement vous voyez qu'on arrête le processus. Donc ça fonctionne bien pour le
00:06:37 :bouton quit, et la dernière chose qui va nous rester à faire, et bien c'est de changer les icônes sur nos boutons, puisque pour l'instant on a encore le texte, donc comme je vous disais c'est pas très esthétique, donc on va à la place mettre des icônes, et on va changer la taille
00:06:49 :aussi de nos boutons pour qu'ils soient assez visibles, puisque par défaut les icônes vont être assez petites. Donc la première chose qu'on va faire c'est déjà enlever le texte qui est déjà
00:06:58 :sur les boutons. Donc je vais enlever ces chaînes de caractère quand on crée les widgets, puisqu'on va remplacer ces chaînes de caractère par des images. Si je vais voir dans mon projet, donc je
00:07:06 :vais vous fournir les images avec la formation, dans ressources base ici on a toutes les images qu'on veut utiliser. Donc on a l'icône de l'application qu'on va utiliser pour mettre
00:07:15 :l'icône dans le menu, puisqu'on va devoir mettre une icône ici pour pouvoir cliquer dessus. On a add qui nous permet d'ajouter une tâche, on va avoir clean, donc là j'ai check all, lui je ne sais plus lequel j'utilise, lui ou lui, n'importe, check all ou clean. Je vais mettre les deux, je ne me
00:07:31 :souviens plus pourquoi j'avais mis les deux, mais elles vont faire la même chose en fait. Et on a close qui nous permet de fermer l'interface. Donc vous pouvez utiliser check all ou clean pour le
00:07:40 :bouton qui va nous permettre de supprimer les tâches qui sont déjà complétées. Et donc moi ici dans mon interface je vais aller récupérer ces icônes, là encore avec notre app context. On l'avait
00:07:50 :mis ici, donc ça je vous ai pas montré, mais c'est la même chose que dans les parties précédentes,dans les projets qu'on a fait auparavant. On passe notre app context ici à un paramètre que j'ai
00:07:59 :appelé ctx et que je récupère dans ma méthode init. Donc ça va me permettre d'aller chercher les icônes et tout ça je vais le faire également à l'intérieur de modify widgets. Donc ici dans
00:08:08 :modify widgets je vais aller changer les icônes sur mes boutons, donc je vais faire self.boutonadd.set icon et on va mettre un qtgui.qicon. Et le chemin vers l'icône on va le récupérer avec donc
00:08:21 :self.ctx.getresource qui va me permettre d'aller chercher mon icône. Donc là dans ce cas-ci ça va être l'icône add.svg, donc add.svg tout simplement. Et on va faire ça pour tous les autres, donc les
00:08:33 :deux autres boutons. Donc on va avoir bouton quit qui va être égal à quit.svg et on va avoir bouton clean. Donc là comme je vous dis vous avez le choix, moi je vais mettre le plus simple
00:08:44 :clean.svg et on va vérifier si tout ça fonctionne. Donc je lance mon interface, alors on a un problème oui puisque c'est pas quit.svg c'est close.svg, puisque donc si la fonction ici ne trouve pas
00:08:54 :l'icône dans les ressources forcément on a une erreur. Donc je relance et là vous voyez qu'on a bien les icônes, alors comme je vous disais par défaut elles sont toutes petites et on va changer ça tout de suite pour les agrandir un peu, mais on a bien notre icône plus, notre icône pour le
00:09:06 :clean et notre icône pour fermer. Et si je clique sur l'icône ça fonctionne, on arrive bien à fermer notre interface. Donc on va tout de suite modifier la taille de ces icônes avec la méthode setFixedSize
00:09:16 :donc self.add.setFixedSize et on va passer une taille de par exemple 36x36 et je vais faire la même chose pour les deux autres boutons. Donc on va mettre bouton clean et bouton kit comme ceci,
00:09:29 :et si je relance mon application cette fois-ci on devrait avoir quelque chose voilà qui prend un peu plus de place et qui est un peu plus agréable. Donc on a pas mal tout ce qu'on voulait, le dernier
00:09:37 :truc qu'il va falloir changer c'est qu'en fait je veux enlever ce qu'on appelle les barres de défilement, les scrollbars en anglais, puisque pour l'instant, donc je vais vous montrer si j'ajoute plein de tâches ici au hasard, on va avoir, vous voyez ici quand on a une liste qui commence à devenir assez conséquente, une barre de défilement qui apparaît. Alors vous pouvez
00:09:55 :choisir de la laisser, c'est à vous de voir, mais moi je trouve que c'est pas très esthétique, ça fait une barre de défilement sur la droite donc c'est un bon indicateur visuel qu'on a plusieurs tâches mais moi je trouve que c'est c'est un peu encombrant. Donc ce que je vais faire c'est là
00:10:07 :encore à l'intérieur de ModifyWidget, utiliser alors une méthode qui est assez longue là encore,vous allez voir la méthode et la constante ça prend vraiment beaucoup de place, et on va encore remercier l'autocomplétion. Donc la méthode c'est setVerticalScrollbarPolicy, donc là vous voyez
00:10:23 :il y a une méthode qui s'appelle setVerticalScrollbar, nous c'est la policy qu'on veut changer, donc setVerticalScrollbarPolicy, c'est dur à dire, et on va mettre la constante cuticore.cutie
00:10:33 :scrollbarAlwaysOff, donc on va dire que peu importe la taille de notre liste, en fait on veut que la scrollbar soit off. Et on va faire pareil avec la scrollbarHorizontale, donc on va avoir la même
00:10:43 :méthode mais cette fois-ci avec setHorizontaleScrollbarPolicy, donc ça va être pour la barre de défilement en fait à la fois au niveau horizontal et à la fois au niveau vertical, donc on pourra avoir une scrollbar aussi ici horizontale et la verticale qui est donc sur la droite, qui pour l'instant donc n'est plus visible puisque j'ai utilisé cette méthode. Donc là on peut toujours
00:11:02 :défiler, ça n'empêche pas, on peut défiler à l'intérieur de notre liste mais on n'a plus cette barre qui apparaît quand on a plusieurs tâches. Donc là je peux sélectionner toutes ces tâches
00:11:12 :pour les supprimer, voilà j'appuie sur clean, ça fonctionne toujours, je ferme mon application.Et donc on a terminé le visuel de notre application mais comme je vous disais pour l'instant c'est pas très pratique puisque on ne peut pas la déplacer, on ne peut rien faire, donc nous ce qu'on va
00:11:25 :vouloir faire dans les prochaines parties c'est notre icône dans le menu pour pouvoir cliquer sur cette icône et afficher notre interface automatiquement là où se trouve l'icône,donc ça va être le suivant.

Améliorer l'interface

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Simon

Problème d'affichage des icônes avec les ressources

Christian Aucane

Il manque les icones

Rechercher sur le site