Différences

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

--- issue58:tuto_python [2012/03/15 14:08] – [to do] frangi
+++ issue58:tuto_python [2012/03/25 15:18] (Version actuelle) – fredphil91
@@ Ligne 1: / Ligne 1: @@
 **
 This month, we'll explore yet another GUI designer, this time for Tkinter. Many people have an issue with Tkinter because it doesn't offer a built-in designer. While I've shown you how to easily design your applications without a designer, we will examine one now. It's called Page. Basically it's a version of Visual TCL with Python support on top. The current version is 3.2 and can be found at http://sourceforge.net/projects/page/files/latest/download.
@@ Ligne 7: / Ligne 8: @@
 **
-Ce mois-ci, nous allons explorer encore un autre concepteur graphique, cette fois c'est Tkinter. Beaucoup de gens ont un problème avec Tkinter, car il n'offre pas un designer intégré. Alors que je vous ai montré comment concevoir facilement vos applications sans concepteur, nous allons en examiner un maintenant. Il s'appelle Page.  Fondamentalement, il s'agit d'une version de Visual TCL avec un couche de Python par dessus. La version actuelle est la 3.2 et peut être trouvé à http://sourceforge.net/projects/page/files/latest/download.
+Ce mois-ci, nous allons explorer encore un autre concepteur graphique, cette fois c'est pour Tkinter. Beaucoup de gens ont un problème avec Tkinter, car il n'offre pas un designer intégré. Alors que je vous ai montré comment concevoir facilement vos applications sans concepteur, nous allons en examiner un maintenant. Il s'appelle Page.  Fondamentalement, il s'agit d'une version de Visual TCL avec une couche de Python par dessus. La version actuelle est la 3.2 et peut être trouvée à http://sourceforge.net/projects/page/files/latest/download.
 Pré-requis
-Vous devez avoir TCK/TK 8.5.4 ou plus, Python 2.6 ou plus, et pyttk, que vous pouvez obtenir (si vous ne l'avez pas encore) à partir de http://pypi.python.org/pypi/pyttk. Vous avez probablement tous ceux-ci à l'exception possible de pyttk.
+Vous devez avoir TCK/TK 8.5.4 ou plus, Python 2.6 ou plus et pyttk, que vous pouvez obtenir (si vous ne l'avez pas encore) à partir de http://pypi.python.org/pypi/pyttk. Vous avez probablement tous ceux-ci à l'exception possible de pyttk.
 **
@@ Ligne 33: / Ligne 34: @@
 Installation
-Vous ne pouvez pas vraiment demander une procédure d'installation plus facile. Il suffit de décompresser le fichier de distribution dans un dossier de votre choix. Exécutez le script appelé «configure» à partir du dossier où vous venez de tout déballer. Cela va créer votre script de lancement appelé «page» que vous utiliserez pour obtenir tout le reste. C'est tout.
+Vous ne pouvez vraiment pas demander une procédure d'installation plus facile. Il suffit de décompresser le fichier de distribution dans un dossier de votre choix. Exécutez le script appelé « configure » à partir du dossier où vous venez de tout déballer. Cela va créer votre script de lancement appelé « page » que vous utiliserez pour obtenir tout le reste. C'est tout.
 Apprentissage de Page
-Lorsque vous démarrez Page, vous aurez trois fenêtres (formulaires). L'une est une «piste de lancement», une est une boîte à outils, et une montre l'éditeur d'attributs.
+Lorsque vous démarrez Page, vous aurez trois fenêtres (formulaires). L'une est une « piste de lancement », l'autre est une boîte à outils et la dernière montre l'éditeur d'attributs.
 Pour démarrer un nouveau projet, cliquez sur le bouton du haut dans la boîte à outils.
@@ Ligne 43: / Ligne 44: @@
 Cela crée votre formulaire principal. Vous pouvez le déplacer où vous le souhaitez sur votre écran. Ensuite, et à partir de maintenant, cliquez sur un widget dans la boîte à outils, puis cliquez sur l'endroit où vous le voulez sur le formulaire principal.
-Pour l'instant, nous allons faire un bouton. Cliquez sur le bouton Button sur la boîte à outils, puis cliquez quelque part sur le formulaire principal.
+Pour l'instant, nous allons faire un bouton. Cliquez sur le bouton Button dans la boîte à outils, puis cliquez quelque part sur le formulaire principal.
-Ensuite, dans le formulaire de lancement, cliquez sur la fenêtre et sélectionnez  l'éditeur d'attribut (s'il n'est pas déjà affiché). Votre bouton unique devrait être déjà mis en évidence, déplacez le dans la forme et lorsque vous relâchez le bouton de la souris, vous devriez voir le changement de position dans le formulaire éditeur d'attributs sous 'x position' et 'y position'.
+Ensuite, dans le formulaire de lancement, cliquez sur Fenêtre (Window) et sélectionnez l'Éditeur d'attributs (s'il n'est pas déjà affiché). Votre bouton unique devrait être déjà mis en surbrillance ; déplacez-le dans le formulaire et lorsque vous relâchez le bouton de la souris, vous devrez voir le changement de position dans le formulaire éditeur d'attributs sous « x position » et « y position ».
 **
@@ Ligne 53: / Ligne 54: @@
 **
-Ici, nous pouvons définir d'autres attributs tels que le texte sur le bouton (ou la plupart des autres widgets), l'alias pour le widget (le nom auquel nous allons nous référer dans notre code), la couleur, le nom par lequel nous l'appellerons et plus. Près du bas de l'éditeur d'attributs se trouve le champ de texte. Ceci est le texte qui apparaît à l'utilisateur pour, dans ce cas, le widget bouton. Changeons le de «Button» à «Exit». Notez que maintenant le bouton affiche «Exit». Maintenant redimensionnez le formulaire pour montrer seulement le bouton et recentrez le bouton dans le formulaire.
+Ici, nous pouvons définir d'autres attributs tels que le texte sur le bouton (ou la plupart des autres widgets), l'alias pour le widget (le nom auquel nous allons nous référer dans notre code), la couleur, le nom par lequel nous l'appellerons et plus. Près du bas de l'éditeur d'attributs se trouve le champ de texte. Ceci est le texte qui l'utilisateur voit pour, dans ce cas, le widget bouton. Changeons-le de « Button » à « Exit ». Remarquez que maintenant le bouton affiche « Exit ». Maintenant redimensionnez le formulaire pour montrer seulement le bouton et recentrez le bouton dans le formulaire.
+Ensuite, cliquez quelque part dans le formulaire principal où le bouton n'est pas. Le formulaire éditeur d'attributs affiche maintenant les attributs du formulaire principal.  Trouvez le champ « Title » et changez-le de « New Toplevel 1 » à « Test Form ».
-Ensuite, cliquez quelque part dans le formulaire principal, où le bouton n'est pas. Le formulaire éditeur d'attributs affiche maintenant les attributs de la forme principale.  Trouvez le champ «title» et changez le de «New Toplevel 1» à «Test Form».
-===== to do =====
 **
 Now, before we save our project, we need to create a folder to hold our project files. Create a folder somewhere on your drive called “PageProjects”. Now, in the launch pad window, select File then Save As. Navigate to your PageProjects folder, and, in the dialog box, type TestForm.tcl and click the Save button. Notice this is saved as a TCL file, not a Python file. We'll create the python file next.
@@ Ligne 68: / Ligne 69: @@
 **
-Maintenant, avant de sauvegarder notre projet, nous avons besoin de créer un dossier pour contenir nos fichiers de projet. Créez un dossier quelque part sur votre disque appelé «PageProjects».  Puis, dans la fenêtre de lancement, sélectionnez File puis sur Save As. Allez dans votre dossier PageProjects, et, dans la boîte de dialogue, tapez TestForm.tcl, et cliquez sur le bouton Save. Noter que cela est enregistré dans un fichier TCL, pas un fichier Python. Ensuite, nous allons créer le fichier python.
+Maintenant, avant de sauvegarder notre projet, nous avons besoin de créer un dossier pour contenir nos fichiers de projet. Créez un dossier quelque part sur votre disque appelé « PageProjects ».  Puis, dans la fenêtre de lancement, sélectionnez File puis Save As. Allez dans votre dossier PageProjects et, dans la boîte de dialogue, tapez TestForm.tclet et cliquez sur le bouton Save. Noter que cela est enregistré comme fichier TCL, pas comme fichier Python. Ensuite, nous allons créer le fichier python.
-Dans la fenêtre de lancement, de trouver le menu Gen_Python et cliquez dessus. Sélectionnez Generate Python et un nouveau formulaire apparaît.
+Dans la fenêtre de lancement, cherchez le menu Gen_Python et cliquez dessus. Sélectionnez Generate Python et un nouveau formulaire apparaît.
-Page a généré (comme son nom l'indique) le code Python à notre place et l'a placé dans une fenêtre pour qu'on puisse le voir. Au bas de ce formulaire, il y a trois boutons ... Save, Run, et Close.
+Page a généré (comme son nom l'indique) le code Python à notre place et l'a placé dans une fenêtre pour qu'on puisse le voir. Au bas de ce formulaire, il y a trois boutons... Save, Run et Close.
-Cliquez sur Save. Si, à ce stade, vous deviez regarder dans votre dossier PageProjects, vous verriez le fichier python (TestForm.py). Maintenant, cliquez sur le bouton Run. En quelques secondes, vous verrez le projet démarrer. Le bouton n'est pas connecté à quoi que ce soit encore, il ne fera donc rien si vous cliquez dessus. Il suffit de fermer le formulaire avec le «X» dans le coin de la fenêtre. Maintenant, fermez la fenêtre de console Python avec le bouton de fermeture en bas à droite.
+Cliquez sur Save. Si, à ce stade, vous deviez regarder dans votre dossier PageProjects, vous verriez le fichier python (TestForm.py). Maintenant, cliquez sur le bouton Run. En quelques secondes, vous verrez le projet démarrer. Le bouton n'est pas connecté à quoi que ce soit encore, il ne fera donc rien si vous cliquez dessus. Il suffit de fermer le formulaire avec le « X » dans le coin de la fenêtre. Maintenant, fermez la fenêtre de console Python avec le bouton de fermeture en bas à droite.
 **
@@ Ligne 87: / Ligne 88: @@
 The first button on the left is the Add button. Click it. In the Function box, type “py:Button1Click” and, in the Arguments box, type “p1”, and change the text in the lower box to...
 **
+De retour à notre formulaire principal, sélectionnez le bouton Exit et faites un clic droit dessus. Sélectionnez « Bindings... ». Dans le menu se trouve un ensemble de boutons.
+Le premier sur la gauche vous permet de créer une nouvelle liaison. Cliquez sur « Bouton-1 ». Cela nous permet de paramétrer la liaison pour le bouton gauche de la souris.  Dans la fenêtre sur la droite, tapez « Button1Click ».
+Enregistrez et générez le code python à nouveau. Faites défiler le code dans la console Python jusqu'à la fin du fichier. Au-dessus du code de la « class Test_Form » est la fonction dont nous venons de demander la création. Notez qu'à ce stade, il est simplement transmis. Regardez plus loin vers le bas et vous verrez le code qui crée et contrôle notre bouton. Tout est fait pour nous déjà. Toutefois, nous devons encore dire au bouton ce qu'il faut faire. Fermez la console Python et continuons.
+Sur la fenêtre de lancement, cliquez sur Window puis sélectionnez Function List. Ici, nous allons écrire notre méthode pour fermer la fenêtre.
+Le premier bouton à gauche est le bouton Add. Cliquez dessus. Dans la zone Function, tapez « py:Button1Click » et, dans la zone Arguments, tapez « p1 » et modifiez le texte dans la zone inférieure à ...
 **
@@ Ligne 97: / Ligne 108: @@
 Now save and generate your python code.
 **
+def Button1Click(p1):
+        sys.exit()
+Cliquez sur la coche et nous avons terminé avec cela.
+Ensuite, nous devons lier cette routine au bouton. Sélectionnez le bouton dans le formulaire, faites un clic droit dessus et sélectionnez « Bindings... ».  Comme précédemment, cliquez sur le bouton le plus à gauche sur la barre d'outils et sélectionnez le Button-1. C'est l'événement correspondant au clic gauche de la souris. Dans la boîte de texte à droite, entrez « Button1Click ». Assurez-vous d'utiliser la même casse que pour la fonction que nous venons de créer. Cliquez sur la coche sur le côté droit.
+Maintenant, sauvegardez et générez votre code python.
 **
@@ Ligne 110: / Ligne 129: @@
 Now, if you run your code and click on the Exit button, the form should close properly.
-**
+ **
+Vous devriez voir le code suivant vers le bas, mais en dehors de la classe Test_Form...
+def Button1Click(p1):
+sys.exit()
+Et la dernière ligne de la classe devrait être...
+self.Button1.bind('<Button-1>',Button1Click)
+Maintenant, si vous exécutez votre code et cliquez sur le bouton Exit, le formulaire doit se fermer correctement.
 **
@@ Ligne 119: / Ligne 151: @@
 Next, place in the lower frame a label saying “Radio Buttons” and four radio buttons like in the image below. Finally, place an Exit button below the bottom frame.
 **
+Pour aller plus loin
+Maintenant, nous allons faire quelque chose de plus compliqué. Nous allons créer une démo montrant quelques-uns des widgets qui sont disponibles. D'abord fermez Page et redémarrez-le. Ensuite, créez un nouveau formulaire Toplevel. Ajoutez deux cadres, l'un au-dessus de l'autre et étirez-les pour prendre à peu près toute la largeur du formulaire. Dans le cadre du haut, placez une étiquette de texte et, en utilisant l'éditeur attributs, modifiez le texte à « Buttons: ». Ensuite, ajoutez deux boutons dans le plan horizontal. Modifiez le texte de celui de gauche en « Normal » et celui de droite en « Sunken » [Ndt : en creux].  Alors que le bouton Sunken est sélectionné, changez le relief de « Sunken » et nommez-le btnSunken. Nommez le bouton « Normal » « btnNormal ». Enregistrez ce projet avec le nom « Demos.tcl ».
+Ensuite, placez dans le cadre inférieur une étiquette de texte « Radio Buttons » et quatre boutons radio comme dans l'image ci-dessous. Enfin, placez un bouton Exit en dessous du cadre inférieur.
 **
@@ Ligne 133: / Ligne 172: @@
 Let's add our button bindings. For each button, right click it, select “Bindings...”, and add, as before, a binding to the functions we created. For the normal button, it would be “btnNormalClicked”, and for the sunken button it would be btnSunkenClicked. Save and generate your code. Now, if you were to test the program under the “Run” option of the Python Console, and click any of the buttons, you won't see anything happen. However, when you close the application, you should see the print responses. This is normal for Page and if you simply run it from the command line as you normally do, things should work as expected.
 **
+Avant de travailler sur les liaisons, nous allons créer nos fonctions de clic. Ouvrez la liste de fonctions et créez deux fonctions. Le premier devrait être appelé btnNormalClicked et l'autre btnSunkenClicked. Assurez-vous d'inclure p1 dans la boîte d'arguments. Voici le code que vous devez avoir pour eux...
+def btnNormalClicked(p1):
+print "Normal Button Clicked"
+def btnSunkenClicked(p1) :
+print "Sunken Button Clicked"
+Ajoutons nos liaisons aux boutons. Pour chaque bouton, faites un clic droit dessus, sélectionnez « Bindings... » et ajoutez, comme avant, une liaison aux fonctions que nous avons créées. Pour le bouton normal, cela sera « btnNormalClicked » et pour le bouton creux cela sera « btnSunkenClicked ». Enregistrez et générez votre code.  Maintenant, si vous testiez le programme avec l'option « Run » de la console Python et cliquiez sur un des boutons, vous ne verriez rien se produire. Toutefois, lorsque vous fermerez l'application, vous devriez voir les réponses écrites. Ceci est normal pour Page et si vous l'aviez simplement exécuté à partir de la ligne de commande comme vous le feriez normalement, les choses devraient fonctionner comme prévu.
 **
@@ Ligne 145: / Ligne 197: @@
 The python code can be found on pastebin at http://pastebin.com/qq0YVgTb.
 **
+Maintenant, passons à nos boutons radio. Nous les avons regroupés en deux groupes « clusters ». Les deux premiers (Radio 1 et Radio 2) formeront le groupe 1 et les deux autres seront le groupe 2. Cliquez sur Radio 1 et dans l'éditeur d'attributs, définissez la valeur à 0 et la variable à « rbc1 ». Définissez la variable pour Radio 2 à « rbc1 » et la valeur à 1. Faites la même chose pour Radio 3 et Radio 4, mais pour les deux réglez la variable à « rbc2 ». Si vous voulez, vous pouvez améliorer le clic des boutons radio et imprimer quelque chose dans le terminal, mais pour l'instant, la chose importante est que les groupes fonctionnent. Cliquer sur Radio1 dé-sélectionnera Radio2 et n'aura pas d'influence sur Radio3 ou Radio4, et de même pour Radio2 et ainsi de suite.
+Enfin, vous devez créer une fonction pour le bouton Exit et la lier au bouton, comme nous l'avons fait dans le premier exemple.
+Si vous avez suivi depuis le début nos autres applications Tkinter, vous devriez être en mesure de comprendre le code montré ci-dessus à droite. Sinon, merci de retourner dans quelques numéros précédents pour lire une présentation complète de ce code.
+Vous pouvez voir qu'utiliser Page rend le processus de conception de base beaucoup plus facile que de le faire vous-même. Nous avons seulement commencé à examiner ce que peut faire Page et nous allons faire quelque chose de beaucoup plus réaliste la prochaine fois.
+Le code python peut être trouvé sur pastebin à http://pastebin.com/ts3MKyCZ.
 **
@@ Ligne 151: / Ligne 213: @@
 See you next time.
 **
+Une note avant de terminer pour ce mois-ci. Vous avez sans doute remarqué que j'ai manqué quelques numéros. Cela est dû au fait que ma femme a été diagnostiquée avec un cancer l'an dernier. Même si j'ai vraiment essayé d'empêcher les choses de tomber à travers les mailles du filet, un certain nombre de choses y sont passées. Une de ces choses est mon ancien domaine/site web www.thedesignatedgeek.com. J'ai fait une grossière erreur et en ai raté le renouvellement. Pour cette raison, le domaine a été vendu sans mon consentement. J'ai mis en place www.thedesignatedgeek.net avec tous les vieux trucs. Je vais travailler dur le mois prochain pour mettre tout cela à jour.
+Rendez-vous la prochaine fois.