LE GRID MANAGER
Tous widgets pour être affiché en tcl tk a besoin d'un manager qui organise l'interface suivant des règles bien précise.
Il n existe au nombre de 3 :
- Le PACK manager
- Le GRID manager
- Le PLACE manager
Le grid manager place les objets suivant un tableau colonnes / lignes comme ceci :
ou, comme un ancien tableau HTML.
Le tutoriel ci-dessous reprend un tutoriel en Anglais ic qui explique comment utiliser le GRID manager.
Je l'ai traduit en en Français pour une meilleure compréhension.
mise en forme dans une cellule
1) Label simple dans une fenêtre
Un exemple très basique montre une seule étiquette avec un arrière-plan rouge. (Une étiquette est un conteneur pour un texte statique ou une image.)
ttk::label .a -background red -text "My Label" grid .a
Voici le résultat :
Comme on peut le voir, le widget est d'abord créé, puis « ajouté au GRID MANAGER » (ajouté au gestionnaire de géométrie « grille »).
Il faut comprendre que le label a été inséré dans un tableau qui a une ligne et une colonne.
J'ai ajouté en bleu la taille de la cellule
2) Agrandir la cellule sur Sa largeur
Par défaut, le widget est centré dans la cellule qui l'entoure.
Alors... pourquoi le label est-il affichée en haut à gauche ?
Parce que dans ce cas, la cellule environnante est aussi grande que le label lui-même (le bleu)
Nous pouvons spécifier que la cellule environnante occupe tout l'espace restant dans sa grille parent, en utilisant les commandes « columnconfigure » ou « rowconfigure » pour définir l'option « -weight ».
Voici le code :
ttk::label .a -background red -text "My Label" grid columnconfigure . 0 -weight 1 grid .a
Et voici le résultat de ce code :
(en rouge le label, en bleu la cellule). Vous l'aurez compris, le code :
grid columnconfigure . 0 -weight 1
étire la cellule sur oute sa largeur.
Pour l'étirer sur toute sa hauteur il faut écrire :
grid rowconfigure . 0 -weight 1
Le cumul des deux ligne de code :
ttk::label .a -background red -text "My Label" grid columnconfigure . 0 -weight 1 grid rowconfigure . 0 -weight 1 grid .a
Voici le résultat d'affichage :
En bleu la cellule étirée, en rouge le label.
3) Développer un widget pour remplir sa cellule
Le label est toujours aussi grand que nécessaire pour contenir le texte « My Label ».
Pour que le label s'étende jusqu'à la taille de sa cellule, l'option « -sticky » peut être utilisé comme ceci :
ttk::label .a -background red -text "My Label" grid columnconfigure . 0 -weight 1 grid rowconfigure . 0 -weight 1 grid .a -sticky news
Voici le résultat d'affichage :
L'option "sticky" spécifie les côtés de la cellule sur lesquels le widget doit adhérer. Dans ce cas, nous avons spécifié tous les côtés ( nord , est , ouest et sud ), de sorte que le widget s'étend sur tous les côtés.
4) centrer le texte dans le widget
Pour finir sur cet exemple le texte du widget peut être centré à l'aide de l'option « -anchor » :
ttk::label .a -background red -text "My Label" -anchor center grid columnconfigure . 0 -weight 1 grid rowconfigure . 0 -weight 1 grid .a -sticky news
Résultat :
Une grille 2X2 a deux lignes et 2 colonnes
Voici ce code que nous allons expliquer :
ttk::label .a -background red ttk::label .b -background green ttk::label .c -background blue ttk::label .d -background black grid .a .b -sticky news grid .c .d -sticky news grid columnconfigure . 0 -weight 1 grid rowconfigure . 0 -weight 1 grid columnconfigure . 1 -weight 1 grid rowconfigure . 1 -weight 1
Chaque widget s'agrandit pour remplir sa cellule. La largeur totale ainsi que la hauteur de la grille environnante sont divisées de manière égale entre ses cellules (puisque chaque cellule a la même valeur « -weight »).
Notez que vous pouvez mettre en grille plusieurs widgets à l'aide d'une seule commande. Les options proposées s'appliquent alors à tous ces widgets.
Lors de la mise en grille de plusieurs widgets à la fois, les numéros de ligne et de colonne sont attribués de manière logique. Outre cette attribution implicite de ligne et de colonne, vous pouvez mettre en grille les widgets un par un et utiliser explicitement les options « -row » et/ou « -column ». (Voir le texte correspondant sur le site TkDocs.com .)
5) Une grille dans une grille
Ensuite, l'étiquette noire (".d") reçoit 4 enfants (".dp" ... ".ds"). Ces sous-widgets reçoivent automatiquement leur propre grille 2x2.
Dans l'exemple suivant, ces nouvelles étiquettes sont développées pour remplir leurs cellules respectives (en utilisant « -sticky »), et leurs cellules sont développées pour diviser leur grille environnante de manière uniforme en largeur et en hauteur (en utilisant « -weight ») :
ttk::label .a -background red ttk::label .b -background green ttk::label .c -background blue ttk::label .d -background black ttk::label .d.p -background yellow ttk::label .d.q -background cyan ttk::label .d.r -background purple ttk::label .d.s -background brown grid .a .b -sticky news grid .c .d -sticky news grid .d.p .d.q -sticky news grid .d.r .d.s -sticky news grid columnconfigure . 0 -weight 1 grid rowconfigure . 0 -weight 1 grid columnconfigure . 1 -weight 1 grid rowconfigure . 1 -weight 1 grid columnconfigure .d 0 -weight 1 grid rowconfigure .d 0 -weight 1 grid columnconfigure .d 1 -weight 1 grid rowconfigure .d 1 -weight 1
Toutes ces cellules et widgets s'emboîtent parfaitement les uns dans les autres. Ce n'est pas toujours le cas.
6) Ajout d'espace entre la limite de la cellule et le widget
Nous pouvons donner au sous-widget marron en bas à droite (".ds") un widget enfant orange (".dsfoo"), et spécifier de laisser un espace entre la cellule environnante et le nouveau widget, en utilisant les options " -padx " et " -pady " :
ttk::label .a -background red
ttk::label .b -background green
ttk::label .c -background blue
ttk::label .d -background black
ttk::label .d.p -background yellow
ttk::label .d.q -background cyan
ttk::label .d.r -background purple
ttk::label .d.s -background brown
--> ttk::label .d.s.foo -background orange
grid .a .b -sticky news
grid .c .d -sticky news
grid .d.p .d.q -sticky news
grid .d.r .d.s -sticky news
--> grid .d.s.foo -sticky news -padx 40 -pady 20
grid columnconfigure . 0 -weight 1
grid rowconfigure . 0 -weight 1
grid columnconfigure . 1 -weight 1
grid rowconfigure . 1 -weight 1
grid columnconfigure .d 0 -weight 1
grid rowconfigure .d 0 -weight 1
grid columnconfigure .d 1 -weight 1
grid rowconfigure .d 1 -weight 1
--> grid columnconfigure .d.s 0 -weight 1
--> grid rowconfigure .d.s 0 -weight 1
À ce stade, il y a 3 grilles :
- la grille 2x2 de niveau supérieur, avec le widget rouge dans son coin supérieur gauche
- une grille 2x2 de deuxième niveau, avec le widget jaune dans son coin supérieur gauche
- une grille 1x1 de troisième niveau, contenant uniquement le widget orange
Notez que l'espace environnant est présent (de couleur marron), mais le résultat peut être un peu inattendu - il semble que la marge ait été ajoutée après que l'espace dans la grille environnante ait été réparti uniformément. Ainsi, la cellule avec marge autour du widget orange est plus grande que les autres cellules de la même grille.
Je ne sais pas comment éviter cela et, de plus, je pense que c’est rarement un problème pratique.
7) Fusionner des colonnes et des lignes
Pour conserver l'analogie avec le mécanisme « tableau » de HTML, nous pouvons fusionner des cellules et des colonnes.
Dans l'exemple suivant, la cellule cyan (".dq") de l'image précédente est supprimée et, à sa place, sa voisine de gauche (la cellule jaune ".dp") est spécifiée pour s'étendre sur 2 colonnes, en utilisant l'option " -columnspan " :
ttk::label .a -background red
ttk::label .b -background green
ttk::label .c -background blue
ttk::label .d -background black
ttk::label .d.p -background yellow
ttk::label .d.r -background purple
ttk::label .d.s -background brown
ttk::label .d.s.foo -background orange
grid .a .b -sticky news
grid .c .d -sticky news
--> grid .d.p -sticky news -columnspan 2
grid .d.r .d.s -sticky news
grid .d.s.foo -sticky news -padx 40 -pady 20
grid columnconfigure . 0 -weight 1
grid rowconfigure . 0 -weight 1
grid columnconfigure . 1 -weight 1
grid rowconfigure . 1 -weight 1
grid columnconfigure .d 0 -weight 1
grid rowconfigure .d 0 -weight 1
grid columnconfigure .d 1 -weight 1
grid rowconfigure .d 1 -weight 1
grid columnconfigure .d.s 0 -weight 1
grid rowconfigure .d.s 0 -weight 1
La même chose peut être faite pour les lignes, bien sûr.
8) (Re)configurer plusieurs lignes/colonnes à la fois
Pour plus de commodité, là où « 0 » et « 1 » ont été utilisés comme indices pour « columnconfigure » et « rowconfigure » pour spécifier respectivement la colonne/ligne, le mot-clé « all » peut être utilisé pour signifier qu'il faut appliquer un ensemble d'options à toutes les colonnes ou lignes à la fois :
ttk::label .a -background red
ttk::label .b -background green
ttk::label .c -background blue
ttk::label .d -background black
ttk::label .d.p -background yellow
ttk::label .d.r -background purple
ttk::label .d.s -background brown
ttk::label .d.s.foo -background orange
grid .a .b -sticky news
grid .c .d -sticky news
grid .d.p -sticky news -columnspan 2
grid .d.r .d.s -sticky news
grid .d.s.foo -sticky news -padx 40 -pady 20
--> grid columnconfigure . all -weight 1
--> grid rowconfigure . all -weight 1
--> grid columnconfigure .d all -weight 1
--> grid rowconfigure .d all -weight 1
--> grid columnconfigure .d.s all -weight 1
--> grid rowconfigure .d.s all -weight 1
