Différences entre les versions de « Programmation Python/Utilisation de fenêtres et de graphismes »

Le bouton « Quitter » sert bien évidemment à terminer l'application en refermant la fenêtre.
 
<source lang="python">
<pre>
# Petit exercice utilisant la bibliothèque graphique Tkinter
 
 
fen1.destroy() # destruction (fermeture) de la fenêtre
</presource>
 
Conformément à ce que nous avons expliqué dans le texte des pages précédentes, la fonctionnalité de ce programme est essentiellement assurée par les deux fonctions <code>drawline()</code> et <code>changecolor()</code>, qui seront activées par des événements, ceux-ci étant eux-mêmes définis dans la phase d'initialisation.
 
Dans cette phase d'initialisation, on commence par importer l'intégralité du module ''Tkinter'' ainsi qu'une fonction du module ''random'' qui permet de tirer des nombres au hasard. On crée ensuite les différents ''widgets'' par instanciation à partir des classes <code>Tk()</code>, <code>Canvas()</code> et <code>Button()</code>. (Remarquons au passage que le mot canevas s'écrit différemment en français et en anglais !).
 
L'initialisation se termine avec l'instruction <code>fen1.mainloop()</code> qui démarre le réceptionnaire d'événements. Les instructions qui suivent ne seront exécutées qu'à la sortie de cette boucle, sortie elle-même déclenchée par la méthode <code>fen1.quit()</code> (voir ci-après).
L'option <code>command</code> utilisée dans l'instruction d'instanciation des boutons permet de désigner la fonction qui devra être appelée lorsqu'un événement « clic gauche de la souris sur le ''widget'' » se produira. Il s'agit en fait d'un raccourci pour cet événement particulier, qui vous est proposé par ''Tkinter'' pour votre facilité parce que cet événement est celui que l'on associe naturellement à un ''widget'' de type bouton. Nous verrons plus loin qu'il existe d'autres techniques plus générales pour associer n'importe quel type d'événement à n'importe quel ''widget''.
 
Les fonctions de ce script peuvent modifier les valeurs de certaines variables qui ont été définies au niveau principal du programme. Cela est rendu possible grâce à l'instruction global utilisée dans la définition de ces fonctions. Nous nous permettrons de procéder ainsi pendant quelque temps encore (ne serait-ce que pour vous habituer à distinguer les comportements des variables locales et globales), mais comme vous le comprendrez plus loin, cette pratique n'est pas tout à fait recommandable, surtout lorsqu'il s'agit d'écrire de grands programmes. Nous apprendrons une meilleure technique lorsque nous aborderons l'étude des classes (à partir de {{todo}}).
 
Dans notre fonction <code>changecolor()</code>, une couleur est choisie au hasard dans une liste. Nous utilisons pour ce faire la fonction <code>randrange()</code> importée du module ''random''. Appelée avec un argument N, cette fonction renvoie un nombre entier, tiré au hasard entre zéro et N-1.
 
{{Exercices|Exercices : modifications au programme « Tracé de lignes » ci-dessus.}}
# Comment faut-il modifier le programme pour ne plus avoir que des lignes de couleur <code>cyan</code>, <code>maroon</code> et <code>green</code> ?
<ol>
<li># Comment faut-il modifier le programme pour neque plustoutes avoir que desles lignes de couleurtracées <code>cyan</code>,soient <code>maroon</code>horizontales et <code>green</code>parallèles ?</li>
<li># Agrandissez le canevas de manière à lui donner une largeur de 500 unités et une hauteur de 650. Modifiez également la taille des lignes, afin que leurs extrémités se confondent avec les bords du canevas.</li>
<li>Comment modifier le programme pour que toutes les lignes tracées soient horizontales et parallèles ?</li>
<li># Ajoutez une fonction <code>drawline2</code> qui tracera deux lignes rouges en croix au centre du canevas : l'une horizontale et l'autre verticale. Ajoutez également un bouton portant l'indication « viseur ». Un clic sur ce bouton devra provoquer l'affichage de la croix.</li>
<li>Agrandissez le canevas de manière à lui donner une largeur de 500 unités et une hauteur de 650. Modifiez également la taille des lignes, afin que leurs extrémités se confondent avec les bords du canevas.</li>
#Reprenez le programme initial. Remplacez la méthode <code>create_line</code> par <code>create_rectangle</code>. Que se passe-t-il ?
<li>Ajoutez une fonction <code>drawline2</code> qui tracera deux lignes rouges en croix au centre du canevas : l'une horizontale et l'autre verticale. Ajoutez également un bouton portant l'indication « viseur ». Un clic sur ce bouton devra provoquer l'affichage de la croix.</li>
<li>Reprenez:De lela programmemême initial.façon, Remplacez laessayez méthodeaussi <code>create_linecreate_arc</code> par, <code>create_rectanglecreate_oval</code>., Queet se passe-t-il ?<br code>create_polygon</code>.
:Pour chacune de ces méthodes, notez ce qu'indiquent les coordonnées fournies en paramètres.
De la même façon, essayez aussi <code>create_arc</code>, <code>create_oval</code>, et <code>create_polygon</code>.<br />
(:Remarque : pour le polygone, il est nécessaire de modifier légèrement le programme !)</li>.
Pour chacune de ces méthodes, notez ce qu'indiquent les coordonnées fournies en paramètres.
:*Supprimez la ligne <code>global x1, y1, x2, y2</code> dans la fonction <code>drawline</code> du programme original. Que se passe-t-il ? Pourquoi ?
(Remarque : pour le polygone, il est nécessaire de modifier légèrement le programme !)</li>
<li>-:*Si Supprimezvous laplacez ligneplutôt <code>global x1, y1, x2, y2</code> entre les parenthèses, dans la ligne de définition de la fonction <code>drawline</code>, dude programmemanière original.à Quetransmettre seces variables à la fonction en tant que paramètres, le programme passefonctionne-t-il encore ? Pourquoi(N'oubliez ?pas de modifier aussi la ligne du programme qui fait appel à cette fonction !)<br />
- :*Si vous placez plutôtdéfinissez <code>x1, y1, x2, y2</code> entre= les10, parenthèses390, dans390, la10</code> ligneà dela définitionplace de la fonction <code>drawlineglobal x1, y1, ...</code>, de manière à transmettre ces variables à la fonction en tant que paramètres, le programmese fonctionnepasse-t-il encore ? (N'oubliezPourquoi pas? deQuelle modifierconclusion aussipouvez-vous latirer lignede dutout programmecela qui fait appel à cette fonction !)<br />?
#Anneaux olympiques :
- Si vous définissez <code>x1, y1, x2, y2 = 10, 390, 390, 10</code> à la place de <code>global x1, y1, ...</code>, que se passe-t-il ? Pourquoi ? Quelle conclusion pouvez-vous tirer de tout cela ?</li>
<li>a) ##Créez un court programme qui dessinera les 5 anneaux olympiques dans un rectangle de fond blanc (white). Un boutton « Quitter » doit permettre de fermer la fenêtre.<br />
b) ##Modifiez le programme ci-dessus en y ajoutant 5 boutons. Chacun de ces boutons provoquera le tracé de chacun des 5 anneaux</li>.
<li>#Dans votre cahier, établissez un tableau à deux colonnes. Vous y noterez à gauche les définitions des classes d'objets déjà rencontrées (avec leur liste de paramètres), et à droite les méthodes associées à ces classes (également avec leurs paramètres). LaisserLaissez de la place pour compléter ultérieurement.</li>
</ol>
{{solution}}
<ol>