Créer un gestionnaire de tâches avec Qt

00:00:00 :Dans cette partie on va faire un petit peu de CSS. Donc le CSS c'est des feuilles de style qui vont nous permettre de modifier le style de nos widgets. Pour l'instant on a utilisé des méthodes comme la
00:00:10 :méthode setBackgroundColor qui nous permet de changer à quoi ressemblait notre widget,mais ça reste encore une méthode qui est inclue dans Qt, et ce n'est pas du CSS. Le CSS c'est
00:00:20 :vraiment ce qu'on utilise dans les sites web par exemple, et ça va nous permettre d'aller un peu plus loin dans la personnalisation de nos widgets. Donc cette personnalisation de notre CSS on va la
00:00:31 :faire directement dans notre setBackgroundColor ici, et on va la faire tout de suite après cette méthode qui change la couleur d'arrière-plan de notre item. Donc ce qu'on va modifier en fait c'est
00:00:40 :la couleur de l'élément quand il est sélectionné. Parce que quand on lance notre interface pour l'instant, quand on sélectionne un élément, automatiquement la couleur de sélection c'est du bleu. Donc nous ce qu'on va faire c'est qu'on va modifier cette couleur de sélection pour qu'elle
00:00:52 :soit identique à la couleur qu'on récupère ici. Comme ça si je clique par exemple sur une tâche qui pour l'instant est en vert, pour l'instant si je clique donc ça me met du bleu, mais en arrière-plan on l'a changé en rouge. Et c'est juste une fois que je sélectionne autre chose que,
00:01:05 :vu qu'elle n'est plus sélectionnée, je peux voir la couleur qui était finalement sur ma tâche. Donc ce qu'on va faire c'est quand je clique par exemple sur cette tâche ici, on va faire en sorte que la couleur de sélection soit la même que la couleur d'arrière-plan. Donc si je clique ici on va mettre
00:01:17 :du rouge par exemple. Donc pour ça je vais créer une variable que je vais appeler stylesheet, et qui va être égale à une chaîne de caractère. Et alors je vais faire une chaîne de caractère qui va
00:01:27 :contenir trois guillemets au début et trois à la fin. Comme ça, ça va me permettre de faire une chaîne de caractère sur deux lignes, puisque ça va être un peu long comme comme texte si vous voulez. Donc plutôt que d'avoir tout sur une seule longue ligne, je vais le mettre sur deux lignes. Et
00:01:39 :pour ça il faut que je fasse une chaîne de caractère ici avec trois guillemets. Ça me permet de faire un bloc, là vous voyez si je vais à la ligne je peux taper du texte, et le texte est toujours considéré comme une chaîne de caractère. C'est notamment cette façon de faire qu'on utilise
00:01:50 :quand on fait des docstrings. Donc je vais mettre mes trois guillemets au début et à la fin, et au début de tout ça je vais mettre un f puisque on va intégrer la variable color à l'intérieur de cette chaîne de caractère. Donc je mets le f ici pour spécifier qu'on va avoir à faire à un fstring,
00:02:04 :qui va nous permettre d'intégrer ces variables à l'intérieur de la chaîne de caractère. Donc ce qu'on va mettre dans le css c'est QListView. Donc QListView en fait c'est le parent de QListWidget,
00:02:13 :donc tout ce qu'on met sur le QListView va être hérité par le QListWidget. Donc on pourrait mettre QListView ou QListWidget, ça marcherait de la même façon. Moi je vais mettre QListView
00:02:22 :dans ce cas-ci, et on va aller chercher l'item, et on va aller chercher l'événement selected.Donc ça, alors faites bien attention ici il y a deux points. Donc les deux points c'est pour
00:02:32 :spécifier qu'on ne veut pas affecter directement le ListView mais juste les items qui sont à l'intérieur du ListView, puisque on ne veut pas modifier la couleur d'arrière-plan de tout le ListView mais juste des items à l'intérieur du ListView. Donc pour ça la syntaxe ici c'est de
00:02:45 :mettre deux points et ensuite de spécifier qu'on veut modifier uniquement le css des items. Et ensuite on va avoir un événement, donc l'événement ici on a juste deux points, on n'a pas deux fois deux points, on en a juste un seul ici, et l'événement ça va être selected. Donc on va
00:02:57 :agir uniquement sur l'objet item dans notre ListView qui est sélectionné. Ensuite on va ouvrir,donc si vous connaissez un peu le css, on va ouvrir des accolades. Et alors là on va avoir
00:03:06 :une petite particularité puisque les accolades, si vous connaissez Python, dans les fstrings,c'est ce qui nous permet d'intégrer des variables à l'intérieur d'une chaîne de caractère quand on utilise les fstrings. Sauf que là nous on veut vraiment mettre des accolades, on ne veut pas
00:03:18 :intégrer pour l'instant une valeur, on veut juste mettre une accolade comme si c'était le caractère accolade. Donc pour ça on va mettre deux fois ce caractère. Et vous voyez qu'automatiquement la
00:03:27 :couleur change et en mettant deux fois l'accolade, en fait la première va échapper la deuxième et donc on va considérer dans la chaîne de caractère ici qu'on a mis qu'une seule accolade. Donc c'est
00:03:36 :voilà le petit tour de passe-passe qu'il faut faire. Et on va avoir donc deux propriétés qu'on va changer. La première ça va être la couleur de background, donc la couleur d'arrière-plan. Et
00:03:44 :la deuxième qu'on va changer c'est la couleur du texte, puisqu'on va vouloir mettre une couleur noire pour le texte parce que par défaut si je change ça la couleur va être blanche. Donc je
00:03:52 :vais changer la couleur du background et la couleur du texte. Donc je fais background, deux points,et là on va mettre une valeur en RGB. Donc je pourrais mettre par exemple 255, 0 et 255. On
00:04:02 :va réessayer avec cette valeur. Et ensuite je peux mettre un point virgule et spécifier mon autre propriété que je veux changer, qui comme je vous le disais va être la couleur. Donc couleur
00:04:11 :ça va changer en fait le texte directement. Donc là encore je vais mettre du RGB et je vais mettre du noir cette fois-ci, donc 0, 0, 0. Je termine avec un point virgule et ensuite on a donc notre
00:04:21 :accolade ici qui va permettre de fermer celle qu'on a ouverte précédemment à la ligne du dessus. Donc si j'essaye juste ça pour l'instant, je vais en fait juste appliquer mon style sheet avant d'essayer l'application. Je vais faire self.listwidget.setstylesheet et on va mettre notre
00:04:36 :variable style sheet ici. Donc on change le style sheet de notre listewidget, donc pas de notre listewidget item. Attention le listewidget item c'est lui ici, c'est self. Nous on va récupérer
00:04:46 :self.listwidget. Donc c'est la listewidget parente qu'on a déclaré en fait ici, donc lw-tasks. Donc on va changer le style sheet de ce listewidget et on va lui passer notre chaîne de caractère ici.
00:04:57 :Donc je lance tout ça et là vous allez voir quand je clique sur un élément automatiquement vous voyez il est sélectionné de la couleur que j'ai mis ici. Donc là c'est du rose et quand
00:05:05 :l'item se fait désélectionner il revient avec sa couleur qu'on avait mis dans cette background color. Donc c'est vraiment juste pour la sélection, pour l'instant on a mis du rose ici donc c'est pas
00:05:13 :très intéressant. Nous ce qu'on veut c'est avoir la même couleur, donc la couleur qu'on a récupéré ici. Donc là plutôt que de mettre 255 0 255 je vais vouloir intégrer cette variable. Alors cette
00:05:23 :variable on va pouvoir la formater pour qu'elle ait ce format ici, donc pour qu'on ait le rgb,donc le rouge vert bleu avec des virgules qui séparent chaque valeur. Donc pour ça on peut
00:05:33 :utiliser la méthode join et la méthode join elle s'utilise sur une chaîne de caractère. Donc je pourrais dire que je veux séparer avec une virgule et un espace tous les éléments qui sont contenus dans mon toproll color. Donc je vais récupérer ça dans une variable que je vais appeler color
00:05:47 :string et je vais printer cette variable et pour l'instant je vais faire un return. Donc je m'arrête ici, je n'applique pas le stylesheet, je veux juste printer cette valeur ici pour vous montrer à quoi ça correspond. Et vous allez voir que là normalement on aura une erreur. Alors l'erreur
00:06:00 :elle nous dit en fait qu'il s'attendait à avoir des chaînes de caractère et on lui a donné des ints. Donc des ints c'est des integers, c'est des nombres entiers. Donc c'est normal puisque color
00:06:08 :ici c'est un toproll qui contient des nombres entiers et lui il ne peut pas travailler avec des nombres. Color ici il faut obligatoirement quand on veut utiliser join que ce soit des
00:06:17 :chaînes de caractère. Donc il faudrait ici plutôt qu'on ait des nombres d'avoir ici des chaînes de caractère. Donc on pourrait le modifier ici directement mais ce que je vais faire à la
00:06:24 :place c'est utiliser une autre fonction qui va nous permettre de changer toutes les valeurs qui sont à l'intérieur de notre toproll. La fonction qu'on veut utiliser c'est la fonction map et map
00:06:34 :elle nous permet de mapper, donc d'assigner une fonction à chaque élément de notre toproll. Donc la fonction qu'on va assigner c'est la fonction string et notre toproll ça va être color. Donc
00:06:44 :en fait on va dire tout simplement que pour chaque élément de notre toproll color on veut utiliser la fonction string. Donc on va modifier tous les nombres entiers ici en chaînes de caractère et
00:06:53 :on va pouvoir ensuite du coup utiliser cette méthode join qui va lier chaque élément de mon toproll avec la virgule. Donc si je relance tout ça normalement on n'aura plus d'erreurs et
00:07:02 :vous voyez qu'on a bien donc les éléments de mon toproll qui sont séparés par une virgule. Donc je vais pouvoir par la suite intégrer tout ça à l'intérieur de ma variable style sheet. Donc
00:07:11 :pour l'instant j'ai mis 255 0 255. A la place je vais mettre des accolades pour intégrer ma variable color string. Donc plutôt que de mettre les valeurs arbitraires que j'avais mises on va
00:07:21 :récupérer les couleurs qu'on a récupéré dans notre dictionnaire et qu'on a joint ici avec notre virgule. Donc normalement ça devrait fonctionner si je relance l'interface et que je clique vous
00:07:31 :voyez que automatiquement en fait donc avec ce petit tour de passe-passe quand on clique sur une tâche et bien la couleur de sélection est identique à la couleur de la tâche. Donc comme ça ça permet
00:07:39 :d'avoir quelque chose qui est un peu plus clair et vous voyez que on voit tout de suite en fait quand on clique sur une tâche le statut qu'elle prend. Donc ça marche parfaitement donc vous
00:07:48 :voyez que c'est un peu compliqué de voir passer par le CSS c'est vraiment la seule façon que j'ai trouvé. J'ai cherché s'il y avait des méthodes qui existaient directement comme par exemple on
00:07:57 :pourrait imaginer qu'on ait une méthode qui s'appelle setBackgroundSelectionColor quelque chose du genre mais malheureusement ça n'existe pas. Donc la seule façon de changer la couleur
00:08:06 :de sélection d'un ListWidgetItem c'est de passer directement par la feuille de style et donc par ce code en CSS. Donc c'est un peu alambiqué je vous l'accorde mais au moins ça fonctionne et ça
00:08:16 :nous permet d'avoir quelque chose qui est un peu moins confus quand on change le statut d'une tâche.Donc voilà pour cette partie qui était un petit peu complexe donc j'espère que ça vous a donné envie en tout cas d'explorer un peu plus les stylesheets. Je vous mettrai des liens vers une
00:08:28 :page qui répertorie tous les exemples que vous pouvez utiliser sur tous les widgets de Qt. Donc c'est intéressant si vous voulez savoir comment modifier certaines propriétés visuelles des widgets. Donc je vous mettrai un lien pour la documentation vers cette page dans la prochaine
00:08:42 :partie donc ce sera juste un lien. Et ensuite nous ce sur quoi on va travailler ça va être la modification visuelle de l'interface puisque pour l'instant on a une fenêtre donc une fenêtre comme ça mais si vous vous rappelez bien quand j'avais présenté l'application au début nous on ne veut
00:08:56 :pas avoir une fenêtre on veut avoir une icône dans le systray donc dans la barre de menu ici sur laquelle on va pouvoir cliquer et on va avoir notre interface qui va apparaître. Donc on va
00:09:05 :devoir faire pas mal de modifications ici on va également ajouter les icônes sur nos boutons puisque pour l'instant on a du texte donc il y a pas mal de choses qu'on va devoir changer sur notre interface et on va faire ça tout à l'heure.

Modifier la couleur de sélection

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Simon

Couleur au survol

Christian Aucane

On peut mettre directement le tupple dans le f-string

Rechercher sur le site