BUTTON

Le bouton est un élément essentiel de l'interface graphique.Il vous permet de cliquer pour valider, accepter, changer un état, etc...

Il peut contenir un texte, un texte et une image, et peut prendre trois états:

relaché, cliqué, tristate.

Je vous propose, au travers de ces différents tutoriels , à utiliser ce widget.

Dans ce petit exemple de code nous allons voir comment créer un bouton, et changer son texte lors d'un clic gauche de la souris sur celui-ci.

Voici le code de l'exemple :

button .b1 -text "cliquez moi" -command {.b1 configure -text "hello"}
button .b2 -text "Quit" -command {destroy .}
pack .b1 .b2 -side left

Commentons la première ligne :

button : Demande la création d'un bouton

.b1 : Nom donné à ce bouton

-text : "cliquez moi" : Texte affiché sur le bouton

-command{...} : Lance une commande lors d'un clic sur le bouton gauche de la souris sur le bouton.

Notons au passage que nous aurions pu écrire ce code qui produit exactement le même résultat :

button .b1 -text "cliquez moi" -command {change .b1}
button .b2 -text "Quit" -command {destroy .}
pack .b1 .b2 -side left

proc change {widget} {
	$widget configure -text "hello"
}

Nous avons créé une procédure nommée change que nous lançons avec un paramètre.

La deuxième ligne lance la commande destroy  qui détruit la fenêtre nommée . , c'est à dire la fenêtre principale.

Dans ce petit exemple nous allons nous intéresser à comment disposer deux boutons en bas à droite. Nous allons utiliser une Frame et deux boutons et le PACK manager pour les organiser. Les boutons ne réagissent à aucun clic, car ce n'est pas le but de cet exemple.

Voici le code de notre exemple :

frame .fr
pack .fr -fill both -expand 1

frame .fr.pnl -relief raised -borderwidth 1
pack .fr.pnl -fill both -expand 1

button .fr.cb -text "Fermer"
pack .fr.cb -padx 5 -pady 5 -side right

button .fr.ok -text "OK"
pack .fr.ok -side right

wm geometry . 350x300+300+300

A retenir :

• -fill both : etire la frame dans l'espace admissible
• -expand 1 : Etire toute la frame même si vous redimensionnez la fenêtre
• -side right : place à droite les widgets
• -padx 5 -pady 5 : Crée un espace de 5 pixels entre les widgets

Merci à Jan Bodnar Zetcode pour cet exemple.

1-) INTRODUCTION
Aujourd'hui ce tutoriel aura 4 grands principes de la bibliothèque tk à savoir :

A) L'utilisation d'une Entry (boite de saisie de texte)
B) L'évènement 'Clic gauche' d'un bouton.
C) La création et l"exécution d'une procédure.
D) Utilisation du pack manager pour organiser la fenêtre.

2-) CAHIER DES CHARGES

Je souhaite réaliser une application avec une boite de saisie et un bouton, le tout dans une fenêtre.
Je saisie dans la boite de texte monprénom et en cliquant sur le bouton, notre programme va afficher dans la boite de saisie :
"Bonjour monprénom".

3-) REALISATION PRATIQUE
a) Je crée d'abord un label dans lequel je renseigne le texte : "Saisissez votre nom:"
par cette ligne de commande :

label .lab -text "Saisissez votre nom:"

b) je crée une boite de saisie de texte (appelée ENTRY) comme ceci :

entry .ent

c) Je crée mon bouton comme ceci :

button .but -text "Cliquez moi" -command "push_button"

Si j'exécute mon application maintenant, rien ne se passe. Pourquoi? Tout simplement car je n'ai pas dit à tcltk comment organiser mes éléments d'interface (bouton, entry,label).

d) j'organise les éléments en demandant leur affichage par la commande pack comme ceci:

pack .lab
pack .ent
pack .but

e) Mon interface étant maintenant terminée, il faut que je m'occupe du clic sur le bouton. Dans le petit c, l'option

-command "push_button"

est importante. Elle veut simplement dire quand je clique gauche sur le bouton, exécute la procédure push_button.

f) Créons la procédure comme ceci :

proc push_button {} {
    .ent insert 0 "Bonjour "
}

Pour détailler l'ensemble de cette procédure

proc : défini qu'il s'agit d'une procédure.
{} : crochets vides dans lequel nous pourrions passer des paramètres.
{ : Ouverture du code de la procédure
.ent insert 0 "Bonjour " : Insère à l'emplacement 0, c'est à dire au début de l'entry nommée .ent le mot "Bonjour "

4-) CONCLUSION
Voici le code complet de l'application, ce tutoriel aide à la compréhension du petit bout de code proposé par Binny V A que je remercie.

Voici le comde complet de l'application :

proc push_button {} {
    .ent insert 0 "Bonjour "
}
label .lab -text "Saisissez votre nom:"
entry .ent
button .but -text "Cliquez moi" -command "push_button"
pack .lab
pack .ent
pack .but

5- FICHIER SOURCE A TELECHARGER

Voici le fichier source de cette application.

Voilà pour aujourd'hui, merci pour votre attention.
;-)

Ajourd'hui un excellent tutoriel pour récupérer tous les attributs d'un widget. Pour notre exemple, nous allons créer un bouton 'Hello' qui, lors d'un clic affichera dans le terminal tous les attributs de notre bouton.

Voici le code pour créer et afficher le bouton:

button .b -text "hello" -command {Widget_Attributes .b}
pack .b

Lors d'un clic de ce bouton nous exécutons la procédure Widget_Attributes comme ci-dessous :

proc Widget_Attributes {w {out stdout}} {
	puts $out [format "%-20s %-10s %s" Attribute Default Value]
	foreach item [$w configure] {puts $out [format "%-20s %-10s %s" [lindex $item 0] [lindex $item 3] [lindex $item 4]]}
}

Ce qu'il faut retenir de cet exemple :

• l'entre crochet {out stdout} envoit le résultat dans la console
• [$w configure] renvoi une liste de tous les attributs d'un widget.
• Le premier élément de la liste est le nom de l'attribut
• Le 4eme élément de la liste est la valeur par défaut
• le 5eme élément de la liste est la valeur courante donnée.

Voici le résultat de la console après exécution de ce code :

Attribute            Default    Value
-activebackground    #ececec    #ececec
-activeforeground    #000000    #000000
-anchor              center     center
-background          #d9d9d9    #d9d9d9
-bd                             
-bg                             
-bitmap                         
-borderwidth         1          1
-command                        Widget_Attributes .b
-compound            none       none
-cursor                         
-default             disabled   disabled
-disabledforeground  #a3a3a3    #a3a3a3
-fg                             
-font                TkDefaultFont TkDefaultFont
-foreground          #000000    #000000
-height              0          0
-highlightbackground #d9d9d9    #d9d9d9
-highlightcolor      #000000    #000000
-highlightthickness  1          1
-image                          
-justify             center     center
-overrelief                     
-padx                3m         3m
-pady                1m         1m
-relief              raised     raised
-repeatdelay         0          0
-repeatinterval      0          0
-state               normal     active
-takefocus                      
-text                           hello
-textvariable                   
-underline           -1         -1
-width               0          0
-wraplength          0          0

Voici le code complet de l'exemple:

proc Widget_Attributes {w {out stdout}} {
	puts $out [format "%-20s %-10s %s" Attribute Default Value]
	foreach item [$w configure] {puts $out [format "%-20s %-10s %s" [lindex $item 0] [lindex $item 3] [lindex $item 4]]}
}

button .b -text "hello" -command {Widget_Attributes .b}
pack .b

Merci pour votre attention.

Documentation officielle sur le bouton

  Retour au sommaire de la librairie TK

Accueil du site