Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • tuto_python • arduino • tuto-python • javascript
59:tuto_python

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
59:tuto_python [2012/04/25 22:30] – fredphil9159:tuto_python [2012/05/01 14:26] (Version actuelle) – kai23
Ligne 9: Ligne 9:
 Après notre dernière rencontre, vous devriez avoir une assez bonne idée de la façon d'utiliser Page. Sinon allez vite lire l'article du mois dernier. Nous allons continuer cette fois-ci en créant une application de liste de fichiers avec une interface graphique. Le but ici est de créer une application graphique qui va récursivement parcourir un répertoire, en cherchant des fichiers avec un ensemble défini d'extensions, et afficher le résultat dans une vue arborescente. Pour cet exemple, nous allons chercher les fichiers multimédias avec les extensions .avi, .mkv, .mv4, .mp3 et .ogg. Après notre dernière rencontre, vous devriez avoir une assez bonne idée de la façon d'utiliser Page. Sinon allez vite lire l'article du mois dernier. Nous allons continuer cette fois-ci en créant une application de liste de fichiers avec une interface graphique. Le but ici est de créer une application graphique qui va récursivement parcourir un répertoire, en cherchant des fichiers avec un ensemble défini d'extensions, et afficher le résultat dans une vue arborescente. Pour cet exemple, nous allons chercher les fichiers multimédias avec les extensions .avi, .mkv, .mv4, .mp3 et .ogg.
  
-Cette fois, le texte peut sembler un peu laconique dans la partie conception. Tout ce que je vais faire, c'est vous donner des indications pour le placement des widgets ainsi que les attributs et les valeurs requises de cette façon...+Cette fois, le texte peut sembler un peu laconique dans la partie conception. Tout ce que je vais faire, c'est vous donner des indications pour le placement des widgets, ainsi que les attributs et les valeurs requises, de cette façon...
  
 Widget Widget
Ligne 26: Ligne 26:
 Title: Searcher** Title: Searcher**
  
-Je ne mettrai les chaînes entre guillemets que lorsque cela sera nécessaire. Par exemple, pour l'un des boutons, le texte doit être réglé sur « ... ».+Je ne citerai les chaînes de texte que lorsque cela sera nécessaire. Par exemple, pour l'un des boutons, le texte doit être réglé sur « ... ».
  
 Voici à quoi va ressembler l'interface graphique de notre application... Voici à quoi va ressembler l'interface graphique de notre application...
Ligne 53: Ligne 53:
 Move this close to the center of the frame or close to the frame's right side. I set mine to X 530 and Y 10.** Move this close to the center of the frame or close to the frame's right side. I set mine to X 530 and Y 10.**
  
-Assurez-vous de sauvegarder souvent. Lorsque vous enregistrez le fichier, donnez-lui le nom « Rechercher ». Rappelez-vous, Page ajoute l'extension .tcl pour vous et quand vous générerez le code python il sera sauvegardé dans le même dossier.+Assurez-vous de sauvegarder souvent. Lorsque vous enregistrez le fichier, donnez-lui le nom « Rechercher ». Rappelez-vous, Page ajoute l'extension .tcl à votre place et quand vous générerez le code python il sera sauvegardé dans le même dossier.
  
-Ensuite, ajoutez un cadre. Il devrait se placer tout en haut du cadre principal. Définissez les attributs comme suit.+Ensuite, ajoutez un cadre. Il devrait se placer tout en haut du cadre principal. Définissez les attributs comme suit :
  
 Largeur : 595 Largeur : 595
Ligne 120: Ligne 120:
  
 Alias : btnCheminRecherche Alias : btnCheminRecherche
-Texte : « ... » (sans guillemets)+Texte : « ... » (sans guillemets).
  
-Ajoutez cinq (5) cases à cocher. Mettez-les dans l'ordre suivant...+Ajoutez cinq (5) cases à cocher. Mettez-les dans l'ordre suivant :
  
  
Ligne 193: Ligne 193:
 Texte : ALLER ! Texte : ALLER !
  
-Maintenant, ajoutez un autre cadre en-dessous du précédent.+Maintenant, ajoutez un autre cadre en dessous du précédent.
  
 Largeur : 565 Largeur : 565
Ligne 217: Ligne 217:
 Voilà. Nous avons conçu notre interface graphique. Maintenant tout ce qu'il reste à faire est de créer notre liste de fonctions et de lier ces fonctions à nos boutons. Voilà. Nous avons conçu notre interface graphique. Maintenant tout ce qu'il reste à faire est de créer notre liste de fonctions et de lier ces fonctions à nos boutons.
  
-Dans la fenêtre de liste des fonctions, cliquez sur le bouton Nouveau (le bouton le plus à gauche). Ceci nous amène à l'éditeur de nouvelle fonction. Modifiez le texte dans la zone de saisie Fonction en remplaçant « py: xxx » par « py: btnClicQuitter()". Dans la zone de texte de l'argument saisissez « p1 ». Dans la zone de saisie multilignes du bas, changez le texte en :+Dans la fenêtre de liste des fonctions, cliquez sur le bouton Nouveau (le bouton le plus à gauche). Ceci nous amène à l'éditeur de nouvelle fonction. Modifiez le texte dans la zone de saisie Fonction en remplaçant « py: xxx » par « py: btnClicQuitter() ». Dans la zone de texte de l'argument saisissez « p1 ». Dans la zone de saisie multilignes du bas, changez le texte en :
  
 def btnClicQuitter(p1): def btnClicQuitter(p1):
Ligne 241: Ligne 241:
 Enfin, ajoutez une autre fonction appelée « btnCheminRecherche ». Encore une fois, laissez l'instruction « pass ». Enfin, ajoutez une autre fonction appelée « btnCheminRecherche ». Encore une fois, laissez l'instruction « pass ».
  
-Enfin, nous devons relier les boutons et les fonctions que nous venons de créer.+En tout dernier lieu, nous devons relier les boutons et les fonctions que nous venons de créer.
  
-Faites un clic droit sur le bouton Quitter que nous avons créé, sélectionnez Lier. Une grande boîte apparaîtra. Cliquez sur le bouton Nouvelle liaison, cliquer sur bouton-1 et remplacez le mot « A FAIRE » dans la boîte de saisie de texte de droite par « btnClicQuitter ». NE METTEZ PAS les parenthèses () ici.+Faites un clic droit sur le bouton Quitter que nous avons créé, sélectionnez Lier. Une grande boîte apparaîtra. Cliquez sur le bouton Nouvelle liaison, cliquez sur bouton-1 et remplacez le mot « A FAIRE » dans la boîte de saisie de texte de droite par « btnClicQuitter ». NE METTEZ PAS les parenthèses () ici.
  
 Liez le bouton ALLER à la fonction btnClicAller et le bouton « ... » à btnClicCheminRecherche. Liez le bouton ALLER à la fonction btnClicAller et le bouton « ... » à btnClicCheminRecherche.
Ligne 267: Ligne 267:
 Nous allons modifier la portion de code 2.x dans quelques instants pour importer d'autres modules Tkinter. Nous allons modifier la portion de code 2.x dans quelques instants pour importer d'autres modules Tkinter.
  
-Arrive ensuite la routine « vp_start_gui() ». C'est la routine principale du programme. Ceci met en place notre interface, définit les variables dont nous avons besoin, et appelle ensuite la boucle principale Tkinter. Vous remarquerez peut-être la ligne « w = None » juste en dessous. Elle n'est pas indentée et n'a pas besoin de l'être.+Arrive ensuite la routine « vp_start_gui() ». C'est la routine principale du programme. Ceci met en place notre interface, définit les variables dont nous avons besoin et appelle ensuite la boucle principale Tkinter. Vous remarquerez peut-être la ligne « w = None » juste en dessous. Elle n'est pas indentée et n'a pas besoin de l'être.
  
 **Next are two routines (create_Searcher and destroy_Searcher) that are used to replace the main loop routine if we are calling this application as a library. We don't need to worry about these. **Next are two routines (create_Searcher and destroy_Searcher) that are used to replace the main loop routine if we are calling this application as a library. We don't need to worry about these.
Ligne 283: Ligne 283:
 Exécutez le programme maintenant. Notez que les cases à cocher contiennent des coches grisées. Nous ne voulons pas cela dans notre application finale, nous allons donc créer un peu de code pour les faire disparaître avant que le formulaire ne soit affiché à l'utilisateur. La seule chose qui fonctionne à part les cases à cocher est le bouton Quitter. Exécutez le programme maintenant. Notez que les cases à cocher contiennent des coches grisées. Nous ne voulons pas cela dans notre application finale, nous allons donc créer un peu de code pour les faire disparaître avant que le formulaire ne soit affiché à l'utilisateur. La seule chose qui fonctionne à part les cases à cocher est le bouton Quitter.
  
-Utilisez-le pour terminez le programme.+Utilisez-le pour terminer le programme.
  
 **Now, we'll take a look at the class that actually holds the GUI definition. That would be “class Searcher”. Here is where all the widgets are defined and placed in our form. You should be familiar with this by now. **Now, we'll take a look at the class that actually holds the GUI definition. That would be “class Searcher”. Here is where all the widgets are defined and placed in our form. You should be familiar with this by now.
Ligne 301: Ligne 301:
 Deux classes de plus sont créées, elles contiennent le code pour gérer l'arborescence qui défile. Nous n'avons pas à changer tout cela. Tout a été créé pour nous par Page. Deux classes de plus sont créées, elles contiennent le code pour gérer l'arborescence qui défile. Nous n'avons pas à changer tout cela. Tout a été créé pour nous par Page.
  
-Revenons maintenant au début du code et commençons à le modifier +Revenons maintenant au début du code et commençons à le modifier. 
-. + 
-Nous avons besoin d'importer quelques modules de bibliothèque de plus, pour cela ajoutez en dessous de la déclaration « import sys » :+Nous avons besoin d'importer quelques modules de bibliothèque de plus ; pour cela ajoutez en dessous de la déclaration « import sys » :
  
 import os import os
Ligne 323: Ligne 323:
 FileList=[]** FileList=[]**
  
-Maintenant, trouvez la section qui contient la ligne « py2 = True ». Comme nous l'avons dit avant, c'est la section qui traite des importations tkinter pour Python version 2.x. En dessous de « import ttk », nous avons besoin d'ajouter ce qui suit pour utiliser la bibliothèque FileDialog. Nous avons également besoin d'importer le module tkFont.+Maintenant, trouvez la section qui contient la ligne « py2 = True ». Comme nous l'avons dit, c'est la section qui traite des importations tkinter pour Python version 2.x. En dessous de « import ttk », nous avons besoin d'ajouter ce qui suit pour utiliser la bibliothèque FileDialog. Nous avons également besoin d'importer le module tkFont.
  
 import tkFileDialog import tkFileDialog
Ligne 329: Ligne 329:
 import tkFont import tkFont
  
-Ensuite nous devons ajouter quelques variables à la routine « initialise_var_Tk() ». Au bas de la routine, ajoutez les lignes suivantes :+Ensuite nous devons ajouter quelques variables à la routine « initialise_var_Tk() ». En bas de la routine, ajoutez les lignes suivantes :
  
 global exts, FileList global exts, FileList
Ligne 355: Ligne 355:
 LoadDataGrid()** LoadDataGrid()**
  
-Ici, nous créons deux variables globales (exts et ListeFichiers) qui seront utilisées plus tard dans notre code. Les deux sont des listes. « exts » est une liste des extensions parmi lesquelles l'utilisateur sélectionne dans l'interface. « ListeFichiers » contient une liste des fichiers correspondants à la recherche effectuée par l'utilisateur. Nous allons l'utiliser pour remplir le widget de vue arborescente.+Ici, nous créons deux variables globales (exts et ListeFichiers) qui seront utilisées plus tard dans notre code. Les deux sont des listes. « exts » est une liste des extensions que l'utilisateur sélectionne dans l'interface. « ListeFichiers » contient une liste des fichiers correspondants à la recherche effectuée par l'utilisateur. Nous allons l'utiliser pour remplir le widget de vue arborescente.
  
 Puisque notre « btnClicQuitter » est déjà créé pour nous par Page, nous allons nous occuper de la routine « btnClicAller ». Commentez la déclaration pass et ajoutez le code de sorte qu'il ressemble à ceci : Puisque notre « btnClicQuitter » est déjà créé pour nous par Page, nous allons nous occuper de la routine « btnClicAller ». Commentez la déclaration pass et ajoutez le code de sorte qu'il ressemble à ceci :
Ligne 387: Ligne 387:
      FilePath.set(path)**      FilePath.set(path)**
  
-C'est la routine qui sera appelée lorsque l'utilisateur clique sur le bouton « ALLER ! ». Nous appelons une routine appelée « ConstruireExts » qui crée la liste des extensions que l'utilisateur a sélectionné. Puis nous récupérons le chemin que l'utilisateur a choisi dans la boîte de dialogue de demande de répertoire et l'assignons à la variable chemin. Nous créons ensuite un tuple à partir de la liste des extensions, ce qui est nécessaire quand nous vérifions les fichiers. Nous appelons ensuite une routine appelée « Parcourir » en lui passant le répertoire cible et le tuple des extensions.+C'est la routine qui est appelée lorsque l'utilisateur clique sur le bouton « ALLER ! ». Nous appelons une routine appelée « ConstruireExts » qui crée la liste des extensions que l'utilisateur a sélectionnée. Puis nous récupérons le chemin que l'utilisateur a choisi dans la boîte de dialogue de demande de répertoire et l'assignons à la variable chemin. Nous créons ensuite un tuple à partir de la liste des extensions, ce qui est nécessaire quand nous vérifions les fichiers. Nous appelons ensuite une routine appelée « Parcourir » en lui passant le répertoire cible et le tuple des extensions.
  
 Enfin, nous appelons une routine nommée « ChargerDonnees ». Enfin, nous appelons une routine nommée « ChargerDonnees ».
Ligne 449: Ligne 449:
  
 Ici, nous créons une variable globale appelée VueArborescente. Nous appelons ensuite une routine qui efface les contrôles gris dans les cases à cocher, affectons la variable VueArborescente pour pointer vers l'arborescence avec ascenseurs de notre formulaire et appelons InitialiserVueArborescente pour définir les en-têtes pour les colonnes. Ici, nous créons une variable globale appelée VueArborescente. Nous appelons ensuite une routine qui efface les contrôles gris dans les cases à cocher, affectons la variable VueArborescente pour pointer vers l'arborescence avec ascenseurs de notre formulaire et appelons InitialiserVueArborescente pour définir les en-têtes pour les colonnes.
-Voici le code de la routine InitialiserCases qui doit être la prochaine.+Voici le code de la routine InitialiserCases qui doit être la suivante :
  
 def InitialiserCases(): def InitialiserCases():
Ligne 469: Ligne 469:
 Next (bottom right) we call the SetupTreeview routine. It's fairly straightforward. We define a variable “ColHeads” with the headings we want in each column of the treeview. We do this as a list. We then set the heading attribute for each column. We also set the column width to the size of this header.** Next (bottom right) we call the SetupTreeview routine. It's fairly straightforward. We define a variable “ColHeads” with the headings we want in each column of the treeview. We do this as a list. We then set the heading attribute for each column. We also set the column width to the size of this header.**
  
-Ici, tout ce que nous faisons, c'est de définir les variables (ce qui définit automatiquement l'état d'activation dans nos cases à cocher) à 0. Si vous vous souvenez, à chaque fois qu'on clique sur la case, cette variable est automatiquement mise à jour. Si la variable est modifiée par notre code, la case à cocher répond aussi bien. Maintenant (en haut à droite) nous allons nous occuper de la routine qui établit la liste des extensions à partir de ce que l'utilisateur a cliqué.+Ici, tout ce que nous faisons, c'est de définir les variables (ce qui définit automatiquement l'état d'activation dans nos cases à cocher) à 0. Si vous vous souvenez, à chaque fois qu'on clique sur la case, cette variable est automatiquement mise à jour. Si la variable est modifiée par notre code, la case à cocher répond également. Maintenant (en haut à droite) nous allons nous occuper de la routine qui établit la liste des extensions à partir de ce que l'utilisateur a cliqué.
  
-Laissez votre mémoire se souvenir de mon neuvième article dans le FCM n° 35. Nous avions écrit du code pour créer un catalogue de fichiers MP3. Nous allons utiliser une version abrégée de cette routine (au milieu à droite). Reportez-vous au FCM n°35 si vous avez des questions au sujet de cette routine.+Essayez de vous rappeler mon neuvième article dans le FCM n° 35. Nous avions écrit du code pour créer un catalogue de fichiers MP3. Nous allons utiliser une version abrégée de cette routine (au milieu à droite). Reportez-vous au FCM n°35 si vous avez des questions au sujet de cette routine.
  
 Ensuite (en bas à droite) nous appelons la routine InitialiserVueArborescente. C'est assez simple. Nous définissons une variable « TitresColonnes » avec les rubriques que nous voulons dans chaque colonne de l'arborescence. Nous utilisons une liste pour cela. Nous réglons ensuite l'attribut titre de chaque colonne. Nous réglons également la largeur de colonne à la taille de cet en-tête. Ensuite (en bas à droite) nous appelons la routine InitialiserVueArborescente. C'est assez simple. Nous définissons une variable « TitresColonnes » avec les rubriques que nous voulons dans chaque colonne de l'arborescence. Nous utilisons une liste pour cela. Nous réglons ensuite l'attribut titre de chaque colonne. Nous réglons également la largeur de colonne à la taille de cet en-tête.
Ligne 491: Ligne 491:
 Enfin, nous devons créer la routine « ChargerDonnees » (page suivante, en haut à droite) qui est l'endroit où nous chargeons nos données dans l'arborescence. Chaque ligne de l'arborescence est une entrée dans la variable de type liste ListeFichiers. Nous devons également ajuster la largeur de chaque colonne (à nouveau) pour correspondre à la taille des données de la colonne. Enfin, nous devons créer la routine « ChargerDonnees » (page suivante, en haut à droite) qui est l'endroit où nous chargeons nos données dans l'arborescence. Chaque ligne de l'arborescence est une entrée dans la variable de type liste ListeFichiers. Nous devons également ajuster la largeur de chaque colonne (à nouveau) pour correspondre à la taille des données de la colonne.
  
-C'est tout pour le première vue de l'application. Exécutez-la et voyez ce que ça fait. Notez que si vous avez un grand nombre de fichiers à parcourir, vous aurez l'impressions que le programme ne répond pas. C'est quelque chose qui doit être corrigé. Nous allons créer des routines pour modifier notre curseur de la valeur par défaut à un curseur en forme de montre et vice-versa pour que l'utilisateur soit au courant quand nous faisons quelque chose qui prend beaucoup de temps.+C'est tout pour la première vue de l'application. Exécutez-la et voyez ce que ça fait. Notez que si vous avez un grand nombre de fichiers à parcourir, vous aurez l'impression que le programme ne répond pas. C'est quelque chose qui doit être corrigé. Nous allons créer des routines pour modifier notre curseur de la valeur par défaut à un curseur en forme de montre et vice-versa pour que l'utilisateur soit au courant quand nous faisons quelque chose qui prend beaucoup de temps.
  
 Dans la routine « initialise_var_Tk », ajoutez le code suivant à la fin. Dans la routine « initialise_var_Tk », ajoutez le code suivant à la fin.
Ligne 531: Ligne 531:
 See you next time.** See you next time.**
  
-Enregistrez et exécutez votre programme. Vous devriez voir que le curseur change chaque fois que vous avez une longue liste de fichiers à parcourir.+Enregistrez et exécutez votre programme. Vous devrez voir que le curseur change chaque fois que vous avez une longue liste de fichiers à parcourir.
  
-Cette application ne fait pas vraiment grand-chose, mais elle vous a montré comment utiliser Page pour développer très rapidement. Avec l'article d'aujourd'hui, vous pouvez voir qu'une bonne conception de votre interface graphique à l'avance peut rendre le processus de développement facile et relativement indolore.+Cette application ne fait pas vraiment grand chose, mais elle vous a montré comment utiliser Page pour développer très rapidement. Avec l'article d'aujourd'hui, vous pouvez voir qu'une bonne conception de votre interface graphique à l'avance peut rendre le processus de développement facile et relativement indolore.
  
-Le fichier tcl est enregistré sur pastebin : http://pastebin.com/... et le code Python est enregistré ici : http://pastebin.com/....+Le fichier tcl est enregistré sur pastebin : http://pastebin.com/AA1kE4Dy (en anglais) et le code Python est enregistré ici : http://pastebin.com/WYK2SKQj.
  
 Rendez-vous la prochaine fois. Rendez-vous la prochaine fois.
- 
59/tuto_python.1335385826.txt.gz · Dernière modification : 2012/04/25 22:30 de fredphil91