Home

Tkinter - Le site

image

Contents

1. Checkbutton langue text autre variable autre justify LEFT pack fi11 BOTH Ligne 27 on cr e un cadre identite de classe LabelFrame avec tiquette Langue ayant pour parent notre cadre invisible Ligne 28 on la place en bas de son parent qui rappelons le occupe la place verticalement m me si son contenu est moins haut que celui du cadre identite pr c dent Lignes 29 34 pour chaque case d option on d finit une variable de contr le de classe StringVar on cr e un widget de classe Checkbutton et on le place en for ant le remplissage Pour chaque case d option on fixe justify LEFT pour que le texte s aligne correctement e On termine en lan ant la boucle d attente des v nements 35 fenetrePrincipale mainloop 5 2 Avec la m thode grid Grid Tkinter py La m thode grid permet de r aliser rapidement des interfaces simples en pla ant les widgets dans une grilles compos e de lignes et de colonnes Cette m thode dispose de plusieurs options qui permettent de pr ciser les coordonn es de la cellule dans laquelle est plac le widget et son mode de placement Les dimensions des cellules de la grilles sont fix e en largeur par l l ment le plus large pour chaque colonne et en hauteur par l l ment le plus haut pour chaque ligne En g n ral on place un widget unique dans chaque cellule de la grille mais certaines options permettent d tendre un widget sur plusieurs cellules conti
2. foreground ou fg en abr g la couleur du texte ou de l avant plan du widget La couleur est d finie comme une cha ne de caract res soit un nom pr d fini black white red green blue cyan yellow soit une d finition de la forme rgb compos e de 3 chiffres h xad cimaux par exemple noir 000 blanc FFF CCC ou mauve C6F 17 20 D Dessiner dans un Canvas M Canvas Tkinter py Nous d crivons ici uniquement quelques m thodes de base utiles pour engendrer un dessin par programme dans un widget de classe Canvas Les principales m thodes sont create_line pour dessiner une ligne constitu es de segments de droites create_polygon pour dessiner un polygone ferm constitu de segments de droites create_rectangle pour dessiner un rectangle create_oval pour dessiner une ellipse create_arc pour dessiner un arc d ellipse Nous allons pr ciser les param tres de chacune de ces m thodes transmises comme message dessin un widget de classe Canvas de fond gris clair install dans la fen tre ainsi dessin Canvas fenetre width 400 height 200 bg EEE dessin pack Le code de cet exemple est dans le fichier Canvas Tkinter py D 1 Ligne avec create _line La m thode create_line attend comme param tres une suite de couples de cordonn es de points plus des options de trac comme fill fixe la couleur de la ligne black par d faut width fixe l pais
3. text 5 grid row 1 column 2 padx 2 pady 2 Label fenetrePrincipale bg gray text 6 grid row 1 column 3 padx 2 pady 2 Label fenetrePrincipale bg gray text 7 grid row 2 column 0 padx 2 pady 2 Label fenetrePrincipale bg gray text 8 grid row 2 column 2 columnspan 2 rowspan 2 sticky NW SE padx 2 pady 2 Label fenetrePrincipale bg gray text 9 grid row 3 column 0 sticky NW SE padx 2 pady 2 fenetrePrincipale mainloop 15 20 Nous remarquons que par d faut chaque widget est centr sur sa cellule et n occupe que la place correspondant son texte Par contre si l option sticky est utilis e le widget est tendu sur toute la largeur ou la hauteur de la cellule selon le cas horizontalement pour widget2 ligne 8 coll l ouest et l est verticalement pour widget4 ligne 12 coll au et au sud dans les deux sens pour widget8 et widget9 lignes 20 et 22 sticky NW SE Remarque Si l utilisateur change les dimension de la fen tre les widgets restent dans le coin en haut gauche d la fen tre Cependant la grille peut occuper la totatlit de la fen tre condition d accorder un poids weight chaque ligne et chaque colonne de la grille Pour cela on utilisera les m thodes rowconfigure et columnconfigure Par exemple si fenetrePrincipale contient deux lignes fenetrePrincipale rowconfigure 0
4. toutEffacer if tkMessageBox askquestion Imp ts Etes vous riche 7 no faireUneDeclarationSimple else faireUneDeclarationISF 5 Construction d une interface complexe On va pr senter maintenant quelques propri t s avanc es du Layout Manager qui permettent de construire des interfaces plus complexes Nous d crirons chaque m thode de construction avec un exemple simple comment qui utilise les diverses possibilit s du module Tkinter Les deux principale m thodes de placement des widgets dans la fen tre sont la m thode pack qui permet de placer les widgets les uns la suite des autres en respectant certaines r gles que l on d crira au paragraphe 5 1 page 11 la m thode grid qui permet de placer les widgets dans une grilles compos e de lignes et de colonnes selon certaines r gles que l on d crira au paragraphe 5 2 page 14 Il faut choisir une des deux m thodes et viter d utiliser pack et grid simultan ment 5 1 Avec la m thode pack Pack Tkinter py La m thode pack qui permet de placer les widgets les uns la suite des autres et dispose de plusieurs options qui permettent de pr ciser le mode d alignement des widgets Cette m thode peut tre utilis e en m me temps que les cadres de classe Frame ou LabelFrame pour placer les l ments de l interface de fa on structur e Les options de la m thode pack sont side indique dans quel sens s alignent les w
5. ne de caract res 2c pour 2 centim tres ou 8m pour 8 millim tres La m thode geometry la fen tre principale permet de d finir simultan ment les dimensions de la fen tre ou sa position sur l cran sous la forme d une cha ne de caract res lt largeur gt x lt hauteur gt et ou lt horizontal gt lt vertical gt Par exemple apr s l instruction suivante fenetrePrincipale geometry 500x300 250 50 La fen tre principale fera 500 pixels de large sur 300 pixels de haut et lors de son ouverture elle sera plac e sur l cran 250 pixels du bord de gauche et 50 pixels du haut de l cran fenetrePrincipale geometry 250 50 Ici elle sera simplement plac e comme pr c demment mais avec ses dimensions par d faut B Encadrement Par d faut les widgets sont des rectangles plats On peut leur donner du relief en pr cisant la largeur de leur bordure Pour cela on utilise les propri t s borderwidth ou bd en abr g l paisseur de l encadrement du widget relief le type de l encadrement du widget Les valeurs de la propri t relief sont les constantes suivantes FLAT sans bordure d faut RAISED plaque en relief SUNKEN plaque en creux GROOVE contour en creux RIDGE contour en relief FLAT raisen sunken GROOVE C Couleur Certaines propri t s de widget attendent pour valeur une couleur background ou bg en abr g la couleur du fond du widget
6. weight 1 fenetrePrincipale rowconfigure 1 weight 3 M me apr s changement des dimensions de la fen tre la premi re ligne occupera 1 4 et la seconde ligne occupera 3 4 de l espace disponible Dans notre exemple pr c dent si nous voulons que toutes les cellules de la grille soient identiques nous fixerons pour chaque ligne et chaque colonne le m me poids Pour cela avant la ligne 23 la derni re du programme ins rez le code suivant for li in range 4 for co in range 3 fenetrePrincipale rowconfigure li weight 1 fenetrePrincipale columnconfigure co weight 1 Modifiez les dimensions de la fen tre principale pour v rifier le r sultat 6 Informations compl mentaires On pourra consulter le site ISN Sp cialit Informatique et Sciences du Num rique http mathmac free fr la rubrique Interface http mathmac free fr interface html Au sujet de Tkinter on trouvera des informations tr s compl tes en anglais sur le site d une universit am ricaine New Mexico Tech Computer Center http infohost nmt edu tcc help pubs tkinter 16 20 A Dimension Certaines propri t s de widget attendent pour valeur une dimension width la largeur du widget height la hauteur du widget borderwidth ou bd en abr g paisseur de l encadrement du widget La dimension peut tre d finie comme soit un nombre entier qui repr sente un nombre de pixels soit une cha
7. au contenu du champ de saisie il est conseill de lui associer une variable cha ne c est dire un objet de classe StringVar cr au pr alable On obtient alors le code suivant texteSaisi StringVar Entry fenetre textvariable texteSaisi pack 8 20 On a maintenant acc s facilement au contenu du champ de saisie aussi bien en lecture qu en criture travers la variable texteSaisi On r cup re la valeur du contenu du champ avec la m thode get et on peut aussi en modifier le contenu avec la m thode set ainsi texte texteSaisi get texteSaisi set nouveau texte Attention Il ne faut pas confondre texteSaisi qui est une variable Python ordinaire qui r f rence l objet de classe StringVar qui est une variable de contr le au sens de Tkinter et qui permet d acc der dynamiquement une propri t du widget auquel elle est li e On remarque dans ce cas qu il est inutile de conserver une variable Python qui r f rence le champ de saisie la variable de contr le de classe StringVar suffit 3 6 Case cocher Checkbutton Une case cocher est un widget de classe Checkbutton qui fournit l utilisateur un moyen de d finir une valeur bool enne vrai ou faux avec un simple clic Les principales propri t s d une case cocher sont text le texte affich c t de la case justify la justification du texte valeurs LEFT RIGHT CENTER variable lien vers une variable de
8. cas les diff rences dans l criture du code import Tkinter from Tkinter import fenetre Tkinter Tk fenetre Tk etiquette Tkinter Label fenetre etiquette Label fenetre champ Tkinter Entry fenetre champ Entry fenetre bouton Tkinter Button fenetre bouton Button fenetre 2 2 Objet Classe Constructeur Instance Propri t M thode La classe d un objet pr cise le concept qu il repr sente Un objet poss de une structure interne qui m morise des donn es sous forme de propri t s Les messages auxquels est capable de r pondre un objet permettent de d finir son comportement Prenons l exemple de l tiquette dans notre programme page 3 etiquette Label fenetre 2 etiquettel text Bonjour tout le monde 3 etiquette pack Ligne par ligne 1 Label est un constructeur qui cr e une instance c est dire un exemplaire d objet de classe Label La variable etiquette fait maintenant r f rence cette instance 2 on fixe la valeur de la propri t text de l objet etiquette Bonjour tout le monde chaque propri t d un objet peut ainsi tre attribu e une valeur 3 on envoie le message pack l objet etiquette ainsi la m thode pack place le widget dans la fen tre en fixant diff rentes propri t s g om triques de cet objet 2 3 Callback Les objets poss dent de tr s nombreuses propri t s qui caract risent leur aspect position coul
9. classe BooleanVar Voici par exemple comment placer une case cocher dans la fen tre etatSaisi BooleanVar Checkbutton fenetre text Accepter variable etatSaisi pack On r cup re l tat de la case cocher avec la m thode get True si la case est coch e et False sinon et on peut aussi en fixer l tat par programme avec la m thode set ainsi etat etatSaisi get etatSaisi set True ce qui coche la case 3 7 Cercle d option Radiobutton Les cercles d options sont des widgets de classe Radiobutton qui sont associ s en groupes pour permettre l utilisateur de choisir parmi une liste de valeurs deux deux exclusives Les principales propri t s d un cercle d option sont text le texte affich c t du cercle value la valeur associ e cette option variable lien vers une variable de classe IntVar ou StringVar Les diff rents cercles d options d un m me groupe doivent tre li s la m me variable Voici par exemple comment placer trois cercles d options group dans la fen tre choixSaisi IntVar Radiobutton fenetre text Option 1 value 1 variable choixSaisi pack Radiobutton fenetre text Option 2 value 2 variable choixSaisi pack Radiobutton fenetre text Option 3 value 3 variable choixSaisi pack 9 20 On r cup re la valeur de l option avec la m thode get mais on peut aussi fixer l option par programme avec la m tho
10. et 12 on cr e un cadre invisible pour la premi re ligne ayant pour parent identite et on le place en haut par d faut 2 pixels des bords avec remplissage horizontal du parent ce qui permettra d aligner ses fils gauche Ligne 13 on cr e la variable de contr le civilite de classe StringVar pour les options Lignes 14 16 on cr e 3 cercles d options en les liant la m me variable de contr le civilite en fixant leur attribut value et en les pla ant successivement gauche 13 20 27 28 29 30 31 32 33 34 Lignes 17 et 18 on cr e un cadre invisible pour la seconde ligne ayant pour parent identite et on le place par d faut 2 pixels des bords avec remplissage horizontal du parent ce qui permettra d aligner ses fils droite Ligne 19 on cr e la variable de contr le nom de classe StringVar pour la saisie du nom Lignes 20 et 21 on cr e le champ de saisi li la variable de contr le nom puis une tiquette et on les placent successivement cadr s droite Lignes 24 26 on proc de de la m me fa on pour le pr nom e Construisons pour terminer le cadre de choix des langues notre fiche langue LabelFrame invisible text Langue langue pack side BOTTOM francais IntVar Checkbutton langue text Fran ais variable francais justify LEFT pack fi11 BOTH anglais IntVar Checkbutton langue text Anglais variable anglais justify LEFT pack fi11 BOTH autre IntVar
11. l utilisateur d un ordinateur de fournir des informations de les traiter ou de les consulter sur l cran en utilisant le clavier ou la souris pour effectuer des interactions Nous allons d abord proposer quelques lignes de code qui permettent d afficher une fen tre dans laquelle l utilisateur pourra taper un texte court dans un champ de saisie et ensuite par un clic sur le bouton Bis provoquer l affichage du texte saisi r p t deux fois Cet exemple tr s simple pr sente les concepts de base mis en uvre dans une Interface Utilisateur Graphique Les image ci dessous montre l aspect de l interface l ouverture puis la suite des interactions de l utilisateur ce code est dans le fichier B A BA Tkinter py import Tkinter 00O tk Bonjour tout le monde fenetre Tkinter Tk etiquette Tkinter Label fenetre Bi etiquettel text Bonjour tout le monde la champ Tkinter Entry fenetre 800 tk bouton Tkinter Button fenetre text Bis Bonjour tout le monde def faireBis Es iS texte champ get texte texte texte 0 OO tk etiquette text texte Bonjour tout le monde bouton command faireBis EN etiquette pack 600 tk champ pack Salut Salut bouton pack O Bis fenetre mainloop La premi re ligne du code indique qu il faut charger Tkinter un module Python qui va nous permettre de d finir notre interface la ligne 2 on affecte la
12. m thode mainloop l objet fenetre Lors de l ex cution de ce programme Python la fen tre va tre affich e comme sur la figure ci dessus et le programme va tourner en boucle dans l attente des v nements provoqu s par l utilisateur avec la souris ou le clavier Les diff rents v nements pris en compte par ce programme sont le clic dans le champ de saisie ce qui s lectionne ce champ les frappes de caract res sur le clavier quand le champ de saisie est s lectionn le clic sur le bouton le clic sur la case de fermeture de la fen tre Ce dernier v nement provoque la disparition de la fen tre et la fin du programme 2 Conceptualisation de l interface graphique Chaque ligne de code de ce programme Python introduit des notions sp cifiques la pro grammation v nementielle par objets Nous allons maintenant pr ciser les diff rents concepts pr sent s dans cet exemple 4 20 2 1 Module Tkinter Par d faut Python ne permet les interactions que sur une console de terminal Pour permettre la construction d une interface graphique nous utilisons le module Tkinter qui fournit de nombreux constructeurs d objets graphiques et autres services Il y a deux fa ons de charger le module Tkinter import Tkinter tous les noms de m thodes doivent tre pr fix par Tkinter from Tkinter import importe tous les noms de m thodes du module Tkinter On voit ci dessous selon les
13. minimales et maximales permises pour les changements de taille de la fen tre ainsi 6 20 fenetre title Mon titre personnel fenetre minsize 200 100 fenetre maxsize 800 400 On peut m me interdire la modification des dimensions de la fen tre avec fenetre resizable width False height False On rappelle que ces instructions construisent l objet fen tre de classe Tk mais que c est seulement l instruction fenetre mainloop qui ouvrira r ellement la fen tre et lancera la boucle d attente des v nements 3 2 tiquette Label Une tiquette est un widget de classe Label qui permet d afficher un texte dans la fen tre Les principales propri t s d une tiquette sont text le texte affich par l tiquette justify la justification du texte valeurs LEFT RIGHT CENTER background ou bg foreground ou fg les couleurs pour plus d informations sur les couleurs voir annexe C page 17 width largeur de l tiquette en nombre de caract res height hauteur de l tiquette en nombre de lignes borderwidth ou bd relief le style de l encadrement de l tiquette pour plus d informations sur les encadrements voir annexe B page 17 Voici par exemple comment placer dans le fen tre le texte Bonjour sur fond jaune etiquette Label fenetre etiquettel text Bonjour etiquettel background yellow etiquette pack 3 3 Widget actif ou passif Pr cisons d s maintenant la diff re
14. 4 Fen tres de dialogues auxiliaires 10 5 Construction d une interface complexe 11 5 1 Avec la m thode pack Pack Tkinter py 11 5 2 Avec la m thode grid Grid Tkinter py 14 6 Informations compl mentaires 16 A Dimension 17 B Encadrement 17 C Couleur 17 D Dessiner dans un Canvas Canvas Tkinter py 18 Dit isnesvectrente line oseto skine ans DNS RER de des 18 D 2 Polygone avec reat polygon cs 4 4 4 88 siccu stadu GE Me Ed 18 D 3 Rectangle avec create rectangle 444 444ase4 eau au 19 DA Ellipse avec create oval 4l4is sus pass tipis Rd Re Gares 19 D5 Arcavec create EE oo onec ugdo had donka RSS Eaa E D S ah 20 Remarque Tous les exemples de code Python propos s dans cette documentation ont t test s sous le syst me Mac OS Les images d interfaces graphiques affich es ont un aspect qui pourra tre l g rement diff rent sous les syst mes Linux ou Windows Les exemples propos s dans ce document sont disponibles la rubrique Interface du site ISN Sp cialit Informatique et Sciences du Num rique http mathmac free fr interface html Ces exemples sont enregistr s dans les quatre fichiers suivants B A BA Tkinter py Canvas Tkinter py Pack Tkinter py Grid Tkinter py 2 20 1 Exemple l mentaire avec Tkinter B A BA Tkinter py Une Interface Utilisateur Graphique Graphical User Interface ou GUI en anglais est un programme qui permet
15. Aux lignes 7 10 on d finit une fonction faireBis pour effectuer cette t che la ligne 8 on applique la m thode get champ qui est un objet de classe Entry ce qui retourne le texte contenu dans le champ de saisie Ce texte est affect la variable texte la ligne 9 on duplique ce texte dans la variable texte la ligne 10 on modifie la propri t text de l objet etiquette le texte saisi par l utilisateur sera ainsi affich deux fois dans l tiquette la ligne 11 on fixe la valeur de la propri t command le l objet de classe Button en lui donnant pour valeur la fonction faireBis On pr cise ainsi qu un clic de l utilisateur sur le bouton provoquera l appel de cette fonction aussi appel e callback Attention Ici l interface graphique n existe pas encore On ne dispose que d une repr sentation interne des objets n cessaires sa cr ation L objet fenetre a trois fils les widgets etiquette champ et bouton Aux lignes 12 14 on envoie le message pack aux diff rents widgets ce qui a pour effet de les placer dans la fen tre Le gestionnaire de position ou Layout Manager fixe ainsi automatiquement l aide de la m thode pack les param tres g om triques qui d finissent l aspect graphique de la fen tre Attention Ici une repr sentation g om trique interne de l interface graphique existe mais rien n est encore visible sur l cran la ligne 15 on applique la
16. Tkinter Comment cr er une interface utilisateur graphique en Python Jacques Duma 9 f vrier 2013 Ce document est un mode d emploi simplifi du module Tkinter de Python qui explique comment construire une interface graphique rapidement et simplement Il ne s agit pas d un cours sur la programmation par objets et seuls les concepts vraiment indispensables la compr hension sont pr sent s partir d exemples simples Table des mati res 1 Exemple l mentaire avec Tkinter B A BA Tkinter py 3 2 Conceptualisation de l interface graphique 4 2 1 Module Tkinter Li nina sn dia die HET r at ie Ts 5 2 2 Objet Classe Constructeur Instance Propri t M thode 5 a E e EEEE E TEE EE E E CS E E EE tre 5 24 Layout MAMAN s c serei ESS RES PRET G ti pae ped 6 2 5 Boucle des v nements oaoa e a 6 3 Objets Tkinter Widgets 6 Sl Fenere pineper TR oosa ita eh nwo ep a aaea a E e a h a a 6 3 2 tiquett Label sai iauvediuuetiat d ab ud t et 7 39 Widget acti ou passib lt e e o e E e a Ce a e ae a e a aa T ad Bouton BUDT as srecna nur o d eka a ni a a een a e a 8 3 5 Champ de saisie de texte Entry aaao a a du a 8 3 6 Case cocher Checkbutton 9 3 7 Cercle d ophon Radiobutton o s e asss had peer i Le arot 9 3 8 Zone de dessin Canvas aoaaa a da tu a 10 39 Cadre Frame LabelFrame gt soa sosca Li us de dan de rs raira 10
17. de set ainsi choix choixSaisi get choixSaisi set 2 Cette derni re instruction s lectionne le cercle Option 2 et d s lectionne les autres 3 8 Zone de dessin Canvas Une zone de dessin est un widget de classe Canvas qui permet de placer dans la fen tre une zone rectangulaire dans laquelle des m thodes sp cifiques permettent de tracer par programme les lignes des rectangles des ovales ou des polygones Les principales propri t s d une zone de dessin sont background ou bg la couleur du fond pour plus d informations sur les couleurs voir annexe C page 17 width et height largeur et hauteur de la zone de dessin pour plus d informations sur les dimensions voir annexe page 17 Les m thodes de dessin sur un Canvas sont d crites en d tail annexe D page 18 3 9 Cadre Frame LabelFrame Un cadre est un widget de classe Frame ou LabelFrame qui permet de placer une zone rectangulaire vide dans la fen tre Cette zone peut contenir d autres widgets ce qui permet de structurer la disposition des widgets dans la fen tre Les principales propri t s d un cadre sont text le texte affich comme titre du cadre uniquement pour la classe LabelFrame background ou bg foreground ou fg les couleurs pour plus d informations sur les couleurs voir annexe C page 17 width et height largeur et hauteur du cadre pour plus d informations sur les dimensions voir annexe page 17 borderwidth ou bd reli
18. e 5 un trait de 2 un espace de 5 Exemple dessin create_rectangle 50 130 200 170 outline magenta fill 5E7 width 4 D 4 Ellipse avec create_oval La m thode create_oval attend comme param tres deux couples de cordonn es de points le coin en haut gauche et le coin en bas droite du rectangle contenant l ellipse plus des options de trac comme outline fixe la couleur de la ligne black par d faut fill fixe la couleur de remplissage de l ellipse white par d faut width fixe l paisseur de la ligne 1 pixel par d faut dash d finit un mode de pointill s par exemple dash 2 3 2 5 trace successive ment un trait de 2 pixels un espace de 5 un trait de 2 un espace de 5 19 20 Remarque Pour obtenir un cercle les coordonn es doivent d finir les coins en haut gauche et en bas droite d un carr Exemple dessin create_oval 240 120 380 180 outline 095 fill DE4 width 2 D 5 Arc avec create _arc La m thode create_arc attend comme param tres deux couples de cordonn es de points coin en haut gauche et le coin en bas droite du rectangle contenant l ellipse qui sert de support de l arc plus des options de trac comme outline fixe la couleur de la ligne black par d faut fill fixe la couleur de remplissage de l arc d ellipse white par d faut width fixe l paisseur de la ligne 1 pixel par d faut dash d finit un
19. ef le style du cadre pour plus d informations sur les encadrements voir annexe B page 17 Nous verrons dans le paragraphe suivant comment utiliser les cadres pour disposer de ma ni re satisfaisante les widgets dans la fen tre 4 Fen tres de dialogues auxiliaires Pour interagir avec l utilisateur il est parfois utile d ouvrir une fen tre auxiliaire de dialogue qui affiche une information laquelle peut r pondre l utilisateur Pour utiliser des fen tres de dialogue auxiliaires il est n cessaire de charger un module compl mentaire avant utilisation import tkMessageBox 10 20 Les m thodes propos es par le module tkMessageBox ouvrent une fen tre sp cifique de dialogue auxiliaire que l utilisateur peut refermer apr s consultation par un clic sur l un des boutons disponibles Pour chacune de ces m thodes le premier argument est le titre de la fen tre le second est le message affich showinfo affichage d une information fermeture apr s lecture par clic sur OK askokcancel demande de confirmation et retourne comme valeur True apr s un clic sur OK False apr s un clic sur Cancel askquestion pose une question et retourne comme valeur yes apr s un clic sur Yes no apr s un clic sur No Exemples d instructions utilisant des dialogues auxiliaires tkMessageBox showinfo M t o Il fait beau aujourd hui if tkMessageBox askokcancel ATTENTION On efface vraiment tout
20. er des l ments avec la m thode grid Pour cela nous allons placer dix widgets tiquet s de Z ro 9 sur une grille de quatre lignes et quatre colonnes Certaines tiquettes seront plac es dans une cellules unique et certaines seront tendues sur plusieurs cellules contigu s Pour visualiser la g om trie de la grille on a fix par background gray la couleur du fond de l tiquette De plus pour bien s parer les cellules de la grille on les a espac es de 2 pixels par padx 2 pady 2 ce code est dans le fichier Grid Tkinter py Nous donnons simplement le code suivant qu il faudra regarder attentivement from Tkinter import widgetO widgetO widgeti widgeti widget2 widget2 widget3 widget3 widget4 widget4 widgets widget5 widget6 widget6 widget7 widget7 widget8 widget8 widget9 widget9 fenetrePrincipale Tk t Z ro Un Deux Label fenetrePrincipale bg gray text Z ro Trois g grid row 0 column 0 padx 2 pady 2 Label fenetrePrincipale bg gray text Un 7 Quatre grid row 0 column 1 padx 2 pady 2 9 Label fenetrePrincipale bg gray text Deux grid row 0 column 2 columnspan 2 sticky W E padx 2 pady 2 Label fenetrePrincipale bg gray text Trois grid row 1 column 0 padx 2 pady 2 Label fenetrePrincipale bg gray text Quatre grid row 1 column 1 rowspan 3 sticky N S padx 2 pady 2 Label fenetrePrincipale bg gray
21. eur style etc et qui seront pr cis es section 3 page 6 Certains widgets comme les boutons peuvent tre contr l s ou activ s par l utilisateur lors de l ex cution du programme Il est donc n cessaire d associer ces objets un callback c est dire une fonction ex cuter sur un v nement particulier L instruction bouton command faireBis affecte la propri t command de l objet bouton et lui donne pour valeur la fonction faireBis appeler lors du clic sur le bouton 5 20 2 4 Layout Manager Dans notre programme page 3 nous avons simplement transmis le message pack chacun des widgets cr s On constate dans ce cas que la m thode pack a align ces widgets les uns en dessous des autres centr s dans la fen tre On remarque m me que les widgets restent centr s lorsqu on change les dimensions de la fen tre Ce placement par d faut a t effectu par le Layout Manager ou gestionnaire de position lors de l appel de la m thode pack Le gestionnaire de position permet de disposer les widgets diff remment et nous verrons plus en d tail comment proc der section 5 page 11 2 5 Boucle des v nements La derni re instruction de notre programme fenetre mainloop fait tout le reste La fen tre est ouverte les widgets y sont plac s et le programme tourne en boucle dans l attente d un v nement ext rieur Certains v nements sont pris en compte par le syst me et nous n avon
22. gu s Les options de la m thode grid sont row fixe le num ro de la ligne de la cellule O pour la premi re ligne column fixe le num ro de la colonne de la cellule 0 pour la premi re colonne rowspan fixe le nombre de cellules contigu s occup e par le widget sur une colonne exemple widget grid row 0 column 2 rowspan 3 place le widget sur les lignes 0 1 et 2 de la colonne 2 14 20 Ha 10 11 12 13 14 15 16 17 18 19 20 21 22 23 columnspan fixe le nombre de cellules contigu s occup e par le widget sur une ligne exemple widget grid row 0 column 2 columnspan 3 place le widget sur les colonnes 2 3 et 4 de la ligne 0 padx le nombre de pixels qui fixe l espace horizontal autour de la cellule pady le nombre de pixels qui fixe l espace vertical autour de la cellule sticky quand un widget est plus petit que la cellule o il est on peut l tendre en le faisant coller aux bords de la cellule en fixant ainsi les points d ancrage NW N NE nord ouest nord nord est W E ouest est SW S SE sud ouest sud sud est exemple widget grid row 1 column 2 sticky W E tend le widget horizontalement coll l ouest et l est exemple widget grid row 1 column 2 sticky N sS tend le widget verticalement coll au nord et au sud Nous allons maintenant donner un exemple qui montre avec de simples tiquettes comment plac
23. idgets TOP le d faut du haut vers le bas centr horizontalement dans le parent LEFT de la gauche vers la droite centr verticalement dans le parent 11 20 RIGHT de la droite vers la gauche centr verticalement dans le parent BOTTOM du bas vers le haut centr horizontalement dans le parent fill indique comment le widget remplit l espace disponible dans le parent NONE par d faut aucun remplissage X remplissage horizontal Y remplissage vertical BOTH remplissage dans les deux direction expand 0 expansion interdite par d faut expand 1 expansion qui force occuper toute la place disponible dans le parent padx nombre de pixels qui fixe l espace vide horizontalement autour du widget pady nombre de pixels qui fixe l espace vide verticalement autour du widget Nous allons maintenant pr senter un exemple pas pas et commenter les options utilis es Nous voulons faire une fiche de saisie d identit comme celle ci leoo tk Identit M Me Melle Langue _ Fran ais Nom Anglais Pr nom autre Nous allons embo ter plusieurs cadres selon le sch mas pr sent ci dessous LHTONAGCILS 2222 82 ne 2 2 cadreFiche identite invisible Q w a K o i ij ij l l l i l l ij al Les noms affich s sur la figure sont ceux des variables du programme qui r f rencent les cadres utilis s Les cadres en pointill s ne sont pa
24. mode de pointill s par exemple dash 2 3 2 5 trace successive ment un trait de 2 pixels un espace de 5 un trait de 2 un espace de 5 start fixe l angle de d part de l arc 0 par d faut d part droite l horizontale extent fixe l angle de l arc 45 par d faut dans le sens trigonom trique positif style fixe le style de l arc selon les constantes suivante PIESLICE valeur par d faut les extr mit s de larc sont reli es au centre CHORD les extr mit s de l arc sont reli es entre elles ARC les extr mit s de larc ne sont pas reli es pas de remplissage possible Remarque Pour obtenir un arc de cercle les coordonn es doivent d finir les coins en haut gauche et en bas droite d un carr Exemple dessin create_arc 180 60 280 160 fill yellow start 45 extent 120 20 20
25. n est un widget de classe Button qui fournit l utilisateur un moyen de commu niquer avec l application avec un simple clic qui provoque une action programm e Les principales propri t s d un bouton sont text le texte affich dans le bouton justify la justification du texte valeurs LEFT RIGHT CENTER command le callback ou fonction appliquer lors du clic de l utilisateur sur le bouton Voici par exemple une instruction qui place un bouton dans la fen tre Button fenetre text Bis command faireBis pack P Attention Dans ce cas la fonction faireBis doit avoir t d finie au pr alable 3 5 Champ de saisie de texte Entry Un champ de saisie de texte est un widget de classe Entry qui fournit l utilisateur une case dans laquelle il peut taper un texte avec le clavier Les propri t s les plus utiles d un champ de saisie de texte sont width qui permet de fixer la largeur du champ en nombre de caract res 20 par d faut textvariable lien vers une variable de classe StringVar Voici par exemple comment placer un champ de saisie de texte dans la fen tre champ Entry fenetre width 50 champ pack Il est imp ratif de m moriser le widget de classe Entry dans une variable si on veux avoir acc s plus tard au texte contenu dans le champ Ce texte est en effet r cup rable l aide de la m thode get ainsi texte champ get Cependant pour faciliter l acc s
26. nce entre un widget actif et un widget passif en utilisant l exemple pr c dent On dira que l tiquette Bonjour est active si ses propri t s peuvent changer pendant l ex cution du programme Par exemple si on ex cute les instructions suivantes en cours de programme etiquettel text Au revoir etiquettel text cyan Le texte et la couleur du fond changeront dynamiquement Ceci est possible car la cr ation de l tiquette nous avons m moris l objet dans la variable etiquette ce qui nous permet d y faire r f rence plus tard Par contre si nous n avons pas l intention de modifier l tiquette Bonjour dans la suite du programme on dira que l tiquette est passive Il n est donc pas n cessaire de conserver une variable pour la r f rencer Dans ce cas la mise en place de l tiquette dans l interface peut se faire avec une instruction unique sous cette forme 7 20 Label fenetre text Bonjour background yellow pack On ajoute comme argument du constructeur Label les valeurs affecter aux propri t s et on place imm diatement le widget dans la fen tre en appelant la m thode pack sur l objet cr mis entre parenth ses Dans ce cas on ne conserve pas de r f rence vers le widget Cette m thode peut s appliquer tous les widget passifs d une interface Ceci peut simplifier l criture du code quand les widgets sont nombreux 3 4 Bouton Button Un bouto
27. s pas nous en pr occuper comme les d placements de la fen tre les changements des dimensions de la fen tre la frappe des textes dans les champs de saisie D autres v nements sont pris en compte par notre programme comme l action du bouton Le dernier v nement pris en compte sera le clic sur la case de fermeture de la fen tre qui a pour effet d interrompre la boucle d attente des v nements et de faire disparaitre la fen tre L ex cution du programme est alors termin e 3 Objets Tkinter Widgets On va maintenant d crire ici les principaux widgets propos s par Tkinter et pr ciser leurs propri t s Ce texte n est pas un document de r f rence sur Tkinter On se limitera ici aux widgets et aux propri t s les plus utiles pour construire rapidement une interface simple Mais avant de d crire les widgets on doit d abord cr er la fen tre destin e les contenir 3 1 Fen tre principale Tk Dans tous les exemples propos s les widgets seront plac s dans la fen tre principale de l application cr e par les deux lignes de code suivantes from Tkinter import fenetre Tk Il est possible de contr ler la pr sentation de la fen tre sur l cran de l ordinateur Par d faut tk est crit sur la barre de titre de la fen tre qui s ouvre avec une taille qui permet d afficher tous les widgets cr s Mais on peut red finir le titre de la fen tre et fixer les dimensions
28. s visible sur l interface et les widgets plac s dans ces cadres n ont pas t repr sent s ce code est dans le fichier Pack Tkinter py e Cr ons d abord une fen tre pour y placer notre fiche from Tkinter import fenetrePrincipale Tk fondGris Frame fenetrePrincipale background gray fondGris pack fill BOTH expand 1 cadreFiche Frame fondGris borderwidth 4 relief SUNKEN cadreFiche pack padx 15 pady 15 12 20 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Ligne 2 on cr e la fen tre principale Ligne 3 on cr e un cadre fondGris ayant pour parent fenetrePrincipale Ligne 4 on le place dans la fen tre principale en le for ant occuper toute la place disponible m me si l utilisateur change les dimensions de la fen tre Ligne 5 on cr e un cadre cadreFiche ayant pour parent le cadre fondGris La couleur du fond sera blanche par d faut mais il sera encadr d une bordure de 4 pixels avec relief en creux Ligne 6 on le place par d faut centr en haut mais 15 pixels des bords horizontalement et verticalement Il ne changera pas de taille m me si l utilisateur change les dimensions de la fen tre mais restera centr en haut de la fen tre e Partageons maintenant notre fiche en deux horizontalement identite LabelFrame cadreFiche text Identit identite pack side LEFT padx 5 pady 5 invisible Frame cadreFiche invisible pack
29. seur de la ligne 1 pixel par d faut dash d finit un mode de pointill s par exemple dash 2 3 2 5 trace successive ment un trait de 2 pixels un espace de 5 un trait de 2 un espace de 5 Exemple dessin create_line 25 25 200 50 90 90 fill red dash 3 5 D 2 Polygone avec create_polygon La m thode create_polygon attend comme param tres une suite de couples de cordonn es de points plus des options de trac comme outline fixe la couleur de la ligne black par d faut fill fixe la couleur de remplissage du polygone white par d faut width fixe l paisseur de la ligne 1 pixel par d faut dash d finit un mode de pointill s par exemple dash 2 3 2 5 trace successive ment un trait de 2 pixels un espace de 5 un trait de 2 un espace de 5 18 20 Exemple dessin create_polygon 230 30 380 50 290 100 320 20 fill1 3DE width 2 outline blue D 3 Rectangle avec create_rectangle La m thode create_rectangle attend comme param tres deux couples de cordonn es de points le coin en haut gauche et le coin en bas droite plus des options de trac comme outline fixe la couleur de la ligne black par d faut fill fixe la couleur de remplissage du rectangle white par d faut width fixe l paisseur de la ligne 1 pixel par d faut dash d finit un mode de pointill s par exemple dash 2 3 2 5 trace successive ment un trait de 2 pixels un espace d
30. side LEFT fil1 Y padx 5 pady 5 Ligne 7 on cr e un cadre identite de classe LabelFrame avec tiquette Identit ayant pour parent cadreFiche Ligne 8 on le place gauche bord d un espace vide de 5 pixels Ligne 9 on cr e un cadre invisible de classe Frame ayant aussi pour parent cadreFiche Ligne 10 on le place aussi gauche 5 pixels des bords mais cette fois fi11 Y pr cise qu il doit occuper toute la place verticalement m me si son contenu est moins haut que celui du cadre identite pr c dent e Construisons maintenant notre fiche d identit Pour cela on va cr er successivement 3 lignes l aide de la variable auxiliaire cadre qui servira de r f rence 3 cadres successif de classe Frame invisibles ayant pour parent identite cadre Frame identite cadre pack fill X padx 2 pady 2 civilite StringVar Radiobutton cadre text M variable civilite value M pack side LEFT Radiobutton cadre text Me variable civilite value Me pack side LEFT Radiobutton cadre text Melle variable civilite value Melle pack side LEFT cadre Frame identite cadre pack fill X padx 2 pady 2 nom StringVar Entry cadre textvariable nom pack side RIGHT Label cadre text Nom pack side RIGHT cadre Frame identite cadre pack fill X padx 2 pady 2 prenom StringVar Entry cadre textvariable prenom pack side RIGHT Label cadre text Pr nom pack side RIGHT Lignes 11
31. variable fenetre avec un objet de classe Tk c est dire un objet interne Python qui repr sente la fen tre principale Pour cela on appelle la fonction Tkinter Tk qui est un constructeur d objet de classe Tk La notation point e pr cise que le constructeur Tk fait partie du module Tkinter On va maintenant d finir les widgets c est dire les l ments pr sents dans la fen tre la ligne 3 on affecte la variable etiquette avec un objet de classe Label c est dire une tiquette On remarque ici que l appel du constructeur Tkinter Label fenetre a pour argument fenetre ce qui pr cise que l tiquette est plac e dans la fen tre On dit que l objet fenetre est le parent de l objet etiquette la ligne 4 on fixe la valeur d une propri t d un objet de classe Label Cette instruction pr cise que la propri t text de l objet etiquette a pour valeur Bonjour tout le monde 3 20 la ligne 5 on affecte la variable champ avec un objet de classe Entry c est dire champ de saisie de texte qui aura lui aussi fenetre pour parent la ligne 6 on affecte la variable bouton avec un objet de classe Button c est dire un bouton cliquable qui aura lui aussi fenetre pour parent On remarque que cette instruction a un second argument text Bis qui fixe d s sa cr ation la propri t text de l objet Lors d un clic de l utilisateur dans le bouton une certaine t che doit tre ex cut e

Download Pdf Manuals

image

Related Search

Related Contents

Modell CPE/F  SPARSPAK: Waterloo Sparse Matrix Package User's Guide for  les outils  APC AR3810 racks    Denon DN-X1700 DJ Equipment User Manual  InLine Mini SAS HD 0.5m  INFINICOM, S.A. de C.V.  Whirlpool ER2MHKXPB06 User's Manual  Manual de instalación miniLector BAY USB ACR38  

Copyright © All rights reserved.
Failed to retrieve file