Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • finalisation • finalisation
issue188:python

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue188:python [2023/01/03 11:46] – d52frissue188:python [2023/01/06 14:50] (Version actuelle) – andre_domenech
Ligne 12: Ligne 12:
 •  A padding element, and •  A padding element, and
 •  A label element. This element contains the label text, image or both.** •  A label element. This element contains the label text, image or both.**
 +
 +Dans le numéro 181 du FCM, j'ai parlé des thèmes et des styles et de la façon dont j'essayais de créer une carte de styles pour le TNotebook ttk. C'était en mai dernier. Nous sommes en décembre et ma « vie professionnelle » a été très occupée par l'écriture de mon livre sur PAGE, par ma tentative d'aider à la prise en charge de PAGE avec Don Rozenberg et par la tentative de vivre avec les problèmes médicaux que j'ai la « chance » d'avoir.
 +
 +J'en suis arrivé au chapitre de mon livre sur l'ensemble de widgets ttk, et je voulais essayer d'expliquer le concept compliqué des thèmes et des styles.
 +
 +Tout commence par un style. Les styles contrôlent l'apparence d'un widget. Un thème « regroupe » tous les styles de widgets dans un groupe. On espère que tous les styles fonctionnent ensemble pour que tous les widgets du thème aient la même apparence et donnent la même sensation.
 +
 +Comme tout commence par un style pour les widgets, nous allons nous pencher sur une seule classe de widgets pour commencer. Nous allons commencer par la classe ttk Button. Le style de cette classe de widget s'appelle « TButton ».
 +
 +Chaque style de widget est composé d'un ou plusieurs éléments. Un bouton typique comporte quatre éléments :
 +••la bordure autour de l'extérieur du bouton,
 +••un élément de mise en évidence qui change de couleur lorsque le bouton a le focus d'entrée,
 +••un élément de remplissage, et
 +••un élément d'étiquette. Cet élément contient le texte de l'étiquette, une image ou les deux.
 +
  
 **Every widget has a style that is controlled by the Theme. Now here is where it gets somewhat frustrating. Each Operating System has its own built-in themes, and some Operating Systems have more built-in themes than others. Since we are a Linux-based magazine, I’ll give them to you now, and then give you the ones for the other Operating Systems. **Every widget has a style that is controlled by the Theme. Now here is where it gets somewhat frustrating. Each Operating System has its own built-in themes, and some Operating Systems have more built-in themes than others. Since we are a Linux-based magazine, I’ll give them to you now, and then give you the ones for the other Operating Systems.
Ligne 18: Ligne 33:
  
 When you decide to start working on your own styles, and get ready to wrap them all up in a theme, you should base everything on one theme. For Linux users like us, the simplest theme to start with would be the default theme. Not only does every OS have the default theme built in, but each OS has a different “default” theme that, if you don’t set a specific theme, it will be used by “default”. A logical person would think that that would be default. And you are right, if you are talking about Linux. For Windows, the default theme is winnative, not default and for Mac OS X it is aqua. Talk about confusion!** When you decide to start working on your own styles, and get ready to wrap them all up in a theme, you should base everything on one theme. For Linux users like us, the simplest theme to start with would be the default theme. Not only does every OS have the default theme built in, but each OS has a different “default” theme that, if you don’t set a specific theme, it will be used by “default”. A logical person would think that that would be default. And you are right, if you are talking about Linux. For Windows, the default theme is winnative, not default and for Mac OS X it is aqua. Talk about confusion!**
 +
 +Chaque widget a un style qui est contrôlé par le thème. C'est ici que cela devient quelque peu frustrant. Chaque système d'exploitation a ses propres thèmes intégrés et certains systèmes d'exploitation ont plus de thèmes intégrés que d'autres. Comme nous sommes un magazine basé sur Linux, je vais commencer par ceux-là, puis je vous donnerai ceux des autres systèmes d'exploitation.
 +
 +Il est évident que Linux n'est pas le mieux loti en ce qui concerne le nombre de thèmes fournis avec le système d'exploitation. Vous remarquerez également que les quatre thèmes qui sont « natifs » dans Linux sont également disponibles sur les deux autres systèmes d'exploitation. C'est sympa ; si vous envisagez d'exécuter votre application sous les trois systèmes d'exploitation, vous devriez vraiment vous en tenir à l'un de ces quatre thèmes.
 +
 +Lorsque vous décidez de commencer à travailler sur vos propres styles et que vous êtes prêt à les intégrer dans un thème, vous devez tout baser sur un seul thème. Pour les utilisateurs de Linux comme nous, le thème le plus simple pour commencer est le thème par défaut. Tous les systèmes d'exploitation ont un thème par défaut intégré, mais chaque système d'exploitation a un thème « par défaut » différent, qui, si vous ne définissez pas un thème spécifique, sera utilisé par « défaut ». Une personne logique penserait que c'est le thème par défaut. Et vous avez raison, si vous parlez de Linux. Pour Windows, le thème par défaut est winnative, pas « défaut » et pour Mac OS X, c'est aqua. Vous parlez d'une confusion !
 +
  
 **Anyway, we’ll use the ttk Button – to see what our styles can do. Now, remember back a few paragraphs, we touched on the Elements. So for the ttk Button class, the style name is TButton. The elements are assembled into an “empty box”. For a Button under the default theme, they are assembled from the outside in using this order. Border, focus, padding, and, finally, label. Just like the diagram above. **Anyway, we’ll use the ttk Button – to see what our styles can do. Now, remember back a few paragraphs, we touched on the Elements. So for the ttk Button class, the style name is TButton. The elements are assembled into an “empty box”. For a Button under the default theme, they are assembled from the outside in using this order. Border, focus, padding, and, finally, label. Just like the diagram above.
Ligne 24: Ligne 46:
  
 Most of the ttk styles have a layout that organizes the different layers that make up the widget style. Some widget classes don’t have a layout. As long as the widget has a layout, you can use the following commands in the Python REPL to get information on the layout. (shown top right).** Most of the ttk styles have a layout that organizes the different layers that make up the widget style. Some widget classes don’t have a layout. As long as the widget has a layout, you can use the following commands in the Python REPL to get information on the layout. (shown top right).**
 +
 +Quoi qu'il en soit, nous allons utiliser le bouton ttk, pour voir ce que nos styles peuvent faire. Rappelez-vous, il y a quelques paragraphes, nous avons parlé des éléments. Donc pour la classe ttk Button, le nom du style est TButton. Les éléments sont assemblés dans une « boîte vide ». Pour un bouton sous le thème par défaut, ils sont assemblés de l'extérieur vers l'intérieur dans cet ordre. Border, focus, padding et, enfin, label. Comme dans le diagramme ci-dessus.
 +
 +Chacun de ces éléments possède un attribut « sticky » (collant) qui définit le côté de la « boîte » sur lequel il va se coller. Si, par exemple, un élément a « ew » (est-ouest) pour l'attribut « sticky », il s'étendra et s'allongera afin d'atteindre les côtés droit et gauche de notre boîte imaginaire. Puisqu'il n'y a pas de définition pour le nord ou le sud, il n'a pas besoin de s'étirer jusqu'au haut et au bas de la boîte. N'importe lequel des quatre points peut être défini, il n'est pas nécessaire que les quatre soient définis.
 +
 +La plupart des styles ttk ont une disposition qui organise les différentes couches qui composent le style du widget. Certaines classes de widgets n'ont pas de disposition. Tant que le widget a une disposition (layout), vous pouvez utiliser les commandes suivantes dans le REPL Python pour obtenir des informations sur ce layout (en haut à droite).
 +
  
 **Now that is as clear as mud, isn’t it? When a widget class has a layout, it will be returned as a list of tuples which have the element name and a dictionary that describes that element. (I just added a bunch more mud, didn’t I?). **Now that is as clear as mud, isn’t it? When a widget class has a layout, it will be returned as a list of tuples which have the element name and a dictionary that describes that element. (I just added a bunch more mud, didn’t I?).
Ligne 30: Ligne 59:
  
 Now, it’s time for me to pull on my “Wellies” (Rubber Boots for those who aren’t Brits, either in family, or location, or heart), and stomp around a little bit more. Each of those elements can (but don’t have to) have options. I’m just going to dump out the options for each of the elements (below).** Now, it’s time for me to pull on my “Wellies” (Rubber Boots for those who aren’t Brits, either in family, or location, or heart), and stomp around a little bit more. Each of those elements can (but don’t have to) have options. I’m just going to dump out the options for each of the elements (below).**
 +
 +C'est clair comme de la boue, n'est-ce pas ? Quand une classe de widget a un layout, il sera retourné comme une liste de tuples qui ont le nom de l'élément et un dictionnaire qui décrit cet élément. (Je viens d'ajouter beaucoup plus de boue, pas vrai ?)
 +
 +Pensez-y de cette façon. L'élément le plus extérieur est la bordure. Il a son attribut sticky qui est, dans ce cas, le nord, le sud, l'est et l'ouest (ainsi la bordure s'étendra à tous les côtés du widget), et un attribut border qui a une largeur de 1 pixel. Il possède également un élément enfant. Dans ce cas, il s'agit de l'élément focus. Il possède un attribut sticky qui s'étend également vers le nord, le sud, l'est et l'ouest. L'élément focus n'a pas de bordure, mais il a un enfant, l'élément padding. Celui-ci n'a qu'un seul attribut - comme vous pouvez le deviner, c'est l'attribut sticky, et encore une fois, il s'étend vers le nord, le sud, l'est et l'ouest, et il a AUSSI un élément enfant - l'élément label. Celui-ci possède également un attribut sticky et, une fois encore, il s'agit de « nsew ».
 +
 +Maintenant, il est temps pour moi d'enfiler mes « Wellies » (bottes en caoutchouc pour ceux qui ne sont pas britanniques, que ce soit par la famille, le lieu ou le cœur) et de piétiner un peu plus. Chacun de ces éléments peut (mais n'est pas une obligation) avoir des options. Je vais simplement énumérer les options pour chacun de ces éléments (ci-dessous).
 +
  
 **These are the easiest things that we can change to make our style look the way we want. Notice that I said the easiest things. There can also be images, but that is a discussion for another article. For now, we’ll go back to the element options. **These are the easiest things that we can change to make our style look the way we want. Notice that I said the easiest things. There can also be images, but that is a discussion for another article. For now, we’ll go back to the element options.
Ligne 39: Ligne 75:
 Nothing fancy. First we set up a custom style for a specific TButton, then set (in this case) the foreground, background and font. Then, when we place the TButton, we can use the standard configure method to set the text, and the style to our Custom.TButton style. Nothing fancy. First we set up a custom style for a specific TButton, then set (in this case) the foreground, background and font. Then, when we place the TButton, we can use the standard configure method to set the text, and the style to our Custom.TButton style.
 Not hard at all. Now let’s customize some TRadiobuttons and TCheckbuttons. Here they are in their “native” state.** Not hard at all. Now let’s customize some TRadiobuttons and TCheckbuttons. Here they are in their “native” state.**
 +
 +Ce sont les choses les plus simples que nous pouvons changer pour que notre style soit comme nous le voulons. Remarquez que j'ai dit les choses les plus faciles. Il peut aussi y avoir des images, mais ce sera le sujet d'un autre article. Pour l'instant, nous allons revenir aux options des éléments.
 +
 +Avant de commencer à modifier les choses, regardons à quoi ressemble TButton lors d'une « journée normale » sous le thème Linux par défaut.
 +
 +Très fade. Il ressemble à ce que l'on pourrait imaginer pour un bouton. Maintenant, pour définir quoi que ce soit, nous utiliserions le schéma général de stylename.configure(option=value) pour définir les choses à notre manière. Définissons donc les options afin d'obtenir TButton avec « dark theme » (thème sombre) (en haut à droite).
 +
 +Rien d'extraordinaire. Tout d'abord, nous créons un style personnalisé pour un TButton spécifique, puis nous définissons (dans ce cas) le premier plan, l'arrière-plan et la police. Ensuite, lorsque nous plaçons TButton, nous pouvons utiliser la méthode standard de configuration pour définir le texte et le style sur notre style Custom.TButton.
 +
 +Pas difficile du tout. Maintenant, personnalisons quelques TRadiobuttons et TCheckbuttons. Les voici dans leur état « natif ».
 +
  
 **You can customize the indicators so that they use your own customized graphics. At a minimum, you’ll need to have three images for each class. One for unselected, one for selected, and one for disabled. **You can customize the indicators so that they use your own customized graphics. At a minimum, you’ll need to have three images for each class. One for unselected, one for selected, and one for disabled.
Ligne 49: Ligne 96:
  
 I used the shared module scheme in order to keep from having to declare a tonne of global variables. The shared module is an empty file in the project folder – that all modules can read and write to. The file can be named anything, as long as it has the extension of “.py”, and that you import it into any other Python files that will use it. By using the shared module scheme, it is much easier. Now that we have all of the Radiobutton images set into image objects, we then can create the element that we will use (below).** I used the shared module scheme in order to keep from having to declare a tonne of global variables. The shared module is an empty file in the project folder – that all modules can read and write to. The file can be named anything, as long as it has the extension of “.py”, and that you import it into any other Python files that will use it. By using the shared module scheme, it is much easier. Now that we have all of the Radiobutton images set into image objects, we then can create the element that we will use (below).**
 +
 +Vous pouvez personnaliser les indicateurs afin qu'ils utilisent vos propres éléments graphiques personnalisés. Au minimum, vous devrez disposer de trois images pour chaque classe. Une pour la non-sélection, une pour la sélection et une pour la désactivation.
 +
 +Voici une image de référence rapide des six indicateurs que j'ai utilisés pour personnaliser les TRadiobuttons et les TCheckbuttons. Rappelez-vous, je ne me suis jamais présenté comme un artiste !
 +
 +Nous devons maintenant coder le style et la disposition des éléments.
 +
 +Tout d'abord, créons des objets images - en gardant une version globale - afin que la collecte de déchets de Python ne fasse pas disparaître nos images. Ici, nous mettons en place les TRadiobuttons (en bas à droite).
 +
 +J'ai utilisé le schéma du module partagé afin de ne pas avoir à déclarer une tonne de variables globales. Le module partagé est un fichier vide dans le dossier du projet, ouvert en lecture et en écriture à tous les modules. Le fichier peut porter n'importe quel nom, du moment qu'il a l'extension ".py", et que vous l'importez dans tous les autres fichiers Python qui l'utiliseront. En utilisant le schéma du module partagé, c'est beaucoup plus facile. Maintenant que toutes les images des boutons radios sont définies dans des objets image, nous pouvons créer l'élément que nous allons utiliser (ci-dessous).
 +
  
 **Once you get used to the idea, it’s not that hard, but it is the first time. So we define a new element with element_create and give it a name ‘custom.RBindicator’. We declare the type of element, which is image, and then we define the image name for the unselected state. Then, we define the selected and disabled states, and assign the images to them. **Once you get used to the idea, it’s not that hard, but it is the first time. So we define a new element with element_create and give it a name ‘custom.RBindicator’. We declare the type of element, which is image, and then we define the image name for the unselected state. Then, we define the selected and disabled states, and assign the images to them.
Ligne 61: Ligne 119:
  
 In wrapping up, I thought I’d leave you with a number of resources to help you out, if you become brave and try to create your own style sets. In a later article, I’ll show you how to create your own theme – once you’ve gotten the style sets for all the ttk widgets.** In wrapping up, I thought I’d leave you with a number of resources to help you out, if you become brave and try to create your own style sets. In a later article, I’ll show you how to create your own theme – once you’ve gotten the style sets for all the ttk widgets.**
 +
 +Une fois que vous vous serez habitué à l'idée, ce ne sera pas si difficile, mais c'est la première fois. Nous définissons donc un nouvel élément avec element_create et lui donnons le nom de « custom.RBindicator ». Nous déclarons le type d'élément, qui est « image », puis nous définissons le nom de l'image pour l'état non sélectionné. Ensuite, nous définissons les états sélectionné et désactivé, et nous leur attribuons les images.
 +
 +Enfin, nous devons créer le layout et remplacer l'élément indicateur standard par notre élément personnalisé (page suivante, en haut à droite).
 +
 +C'est tout pour les TRadiobuttons. Suivez les mêmes étapes pour les TCheckbuttons, et lorsque vous aurez terminé et exécuté le programme, il devrait ressembler à ceci.
 +
 +C'est assez intimidant la première ou la deuxième fois que vous le faites, mais cela devient plus facile au fur et à mesure.
 +
 +Chaque widget a des éléments et des options différents que vous pouvez et devriez probablement envisager de régler. Une fois que vous avez un modèle pour les mises en page, cela devient beaucoup plus facile.
 +
 +En conclusion, j'ai pensé vous laisser avec un certain nombre de ressources pour vous aider, si vous devenez courageux et essayez de créer vos propres ensembles de style. Dans un prochain article, je vous montrerai comment créer votre propre thème - une fois que vous aurez obtenu les jeux de styles pour tous les widgets ttk.
 +
  
 **Given that there are so many options that so many don’t know about, I’m going to provide two generic links and a specific one. The first one is to the New Mexico Tech Tkinter 8.5 Manual. **Given that there are so many options that so many don’t know about, I’m going to provide two generic links and a specific one. The first one is to the New Mexico Tech Tkinter 8.5 Manual.
Ligne 72: Ligne 143:
  
 (One word of warning. If you look back at the Button.label options, you will see one named ‘embossed’. I’ve NEVER been able to find out what this is supposed to do. It’s not in the documentation, and if you try to set it to something, it is merrily ignored. Go figure.)** (One word of warning. If you look back at the Button.label options, you will see one named ‘embossed’. I’ve NEVER been able to find out what this is supposed to do. It’s not in the documentation, and if you try to set it to something, it is merrily ignored. Go figure.)**
 +
 +Étant donné qu'il y a tant d'options que beaucoup ne connaissent pas, je vais fournir deux liens génériques et un lien spécifique. Le premier est celui du manuel Tkinter 8.5 de New Mexico Tech.
 +https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/index.html 
 +
 +Le deuxième est un bon point de départ pour la page du manuel « officiel » de la boîte à outils ttk, directement de source sûre chez le groupe tcl. C'est censé être ainsi : si ce n'est pas ici, c'est que ça ne peut pas être fait.
 +https://www.tcl.tk/man/tcl/TkCmd/contents.html
 +
 +Enfin, je vais vous donner le lien vers la page « officielle » du manuel de ttk Button. Pour découvrir toutes les options et paramètres (et ce que beaucoup d'entre eux signifient), vous pouvez aller ici.
 +https://www.tcl.tk/man/tcl/TkCmd/ttk_button.html 
 +
 +(Un mot d'avertissement. Si vous regardez les options de Button.label, vous en verrez une nommée « embossed ». Je n'ai JAMAIS réussi à trouver ce qu'elle est censée faire. Ce n'est pas dans la documentation et si vous essayez de lui donner une valeur, elle est joyeusement ignorée. Allez comprendre).
 +
  
 **I will leave you with a theme that is created in Python, not tcl. This is a port of the Plastik theme which is part of the ttkwidgets Python library, which, like most themes, is written in Tcl and is pretty difficult to port to Python unless you are familiar with both languages. You can get the Plastic-python file at  **I will leave you with a theme that is created in Python, not tcl. This is a port of the Plastik theme which is part of the ttkwidgets Python library, which, like most themes, is written in Tcl and is pretty difficult to port to Python unless you are familiar with both languages. You can get the Plastic-python file at 
Ligne 82: Ligne 165:
  
 Until next time, as always; stay safe, healthy, positive and creative!** Until next time, as always; stay safe, healthy, positive and creative!**
 +
 +Je vous laisse avec un thème qui est créé en Python, pas en Tcl. C'est un portage du thème Plastik qui fait partie de la bibliothèque Python ttkwidgets, qui, comme la plupart des thèmes, est écrit en Tcl et est assez difficile à porter en Python à moins d'être à l'aise dans les deux langages. Vous pouvez obtenir le fichier Plastic-python à l'adresse suivante 
 +https://android.googlesource.com/toolchain/python/+/243b47fbef58ab866ee77567f2f52affd8ec8d0f/Python-2.7.3/Demo/tkinter/ttk/plastik_theme.py 
 +
 +Puisque j'ai mentionné le paquet ttkwidgets, vous pouvez l'obtenir à partir de : 
 +https://github.com/TkinterEP/ttkthemes. 
 +
 +Suivez la documentation sur la façon de l'installer et de l'intégrer dans vos propres projets de programmes. La documentation se trouve à l'adresse suivante : https://ttkthemes.readthedocs.io/en/latest/ .
 +
 +Jusqu'à la prochaine fois, comme toujours, restez en sécurité, en bonne santé, positif et créatif !
  
issue188/python.1672742765.txt.gz · Dernière modification : 2023/01/03 11:46 de d52fr