begin process at 2010 03 11 22:29:51
  Trouver un code source :
 
dans
 
Accueil > 

Tutoriels

 > 

Graphique

 > TUTORIEL - INTRODUCTION À WXPYTHON

TUTORIEL - INTRODUCTION À WXPYTHON


 Information sur le tutoriel

Note :
Aucune note

 Description

Ceci est le tutoriel présent sur ce site à cette adresse : http://www.pythonfrance.com/codes/TUTORIEL-INTRODUCTION-WXPYTHON_43203.aspx ; Je le met ici pour que plus de personnes le retrouve (je précise que contrérement à celui précédent, je n'ai pas pu mettre les sources. Allez sur http://www.pythonfrance.com/codes/TUTORIEL-INTRODUCTION-WXPYTHON_43203.aspx pour les obtenirs.

Tutorial

Avec Système d’Exploitation Windows (xp)


Préambule : Lorsque vous créé un programme, généralement celui-ci doit interagir avec l’utilisateur. Un programme conçu pour fonctionner sur un ordinateur à deux possibilités pour ‘‘ dialoguer ’’ avec l’utilisateur : soit par la console (le MS-DOS si vous préférez) ou par une interface graphique (composé d’une fenêtre, de boutons, …). Ce que nous allons apprendre au cour de ces tutoriels sera la conception d’une interface graphiques avec la bibliothèque WxPython. WxPython est sans aucun doute la bibliothèque de référence pour la conception d’une interface graphique. Certes ont est très long de pouvoir créé une interface graphique aussi évolué que celle des programmes de la toute nouvelle suite office 2007 de Microsoft mais on peut tout de même créer une interface digne d’un programme professionnel. Au delà de l’aspect esthétique, WxPython est bien plus performante que la bibliothèque Tkinter un peu en retard ! Vous verrez tout au long des différents tutoriels que les widgets que WxPython vous propose sont bien plus nombreux, performants, esthétiques et évolués que ceux présent dans Tkinter et Pmw.

Dans ce tutoriel, nous allons simplement faire une brève présentation de WxPython, comparer avec Tkinter, créé notre première fenêtre, puis notre première boite de dialogue. Dans les tutoriels suivant, nous verrons en détails différents widgets que propose WxPython. Il est évidant qu’il nous est impossible de les voir tous. Je vous invite donc à regarder parallèlement les différentes sources présentes sur Python-France dans lesquelles WxPython est présent et où des widgets que nous n’avons pas vus sont utilisé. De plus, sur le site de WxPython, des démos sont présentes, même si je conçois quelles sont assez difficile à comprendre !

Pour information, il excite un programme nommé Boaconstructor qui permet de créé une interface graphique avec WxPython. Bien que cela fonctionne relativement bien, je ne suis pas à 100% pour cette technique : malgré que Boaconstructor génère un code relativement correct, vous ne pouvez pas modifier ces erreurs si vous n’avez pas un minimum de connaissance sur WxPython. De plus, rien de tel pour créé un programme mal optimisé qui sera donc très ralenti et ou le risque de bugs soit plus élevé.



Préliminaire : Pour pouvoir réaliser ce tutoriel, il vous faut installer sur votre PC :


  • Python ; Ça semble évident. Vous pouvez soit choisir la dernière version de Python (2.5) plus stable au nivaux de l’Unicode ou la version 2.4 assez fiable mais moins préformante au nivaux de l’Unicode (J’ai utilisé la version 2.4). Téléchargeable à l’adresse suivante : http://www.python.org/download/



  • WxPython ; Téléchargeable à l’adresse suivante (attention, prenez la version correspondant à celle de votre version de Python et a votre système d’exploitation) : http://www.wxpython.org/download.php




I] Présentation et comparaison


Bien, pour commencer, rien de tel qu’une petite présentation. Dans le préambule, vous avez pu avoir une idée de ce que pouvez bien être WxPython. Pour information, WxPython est issu de la suite WxWidgets qui regroupe toutes les bibliothèques graphique des différents langages de programmation utilisant les mêmes procédés. Ainsi il excise le WxBasic, le WxPerl. Pour plus d’information, allez sur Wikipédia http://fr.wikipedia.org/wiki/WxWidgets et également http://fr.wikipedia.org/wiki/WxPython.

La plus part d’entre nous ont sans doute appris à programmer avec l’excellent tutoriel de Gérard Swinnen : « Apprendre à programmer avec Python » (téléchargeable à l’adresse suivant : www.cifen.ulg.ac.be/inforef/swi/python.htm). Dans cet ouvrage, l’auteur nous apprend à créé des interfaces avec Tkinter. Nous allons faire un classique de la programmation à savoir le fameux ‘‘Hello Word’’ ou pour nous autre francophone ‘‘Bonjour tout le monde’’. Voici d’abord un exemple avec Tkinter :


1.

2.

3.

4.

5.

6.

7.

from Tkinter import *

fen1 = Tk()

tex1 = Label(fen1, text='Bonjour tout le monde !')

tex1.pack()

bou1 = Button(fen1, text='Quitter', command = fen1.destroy)

bou1.pack()

fen1.mainloop()


On obtient une fenêtre des plus classiques et tout cela en 7 lignes. Comparons la avec une fenêtre créé avec WxPython le code sera donné ultérieurement).











La fenêtre que l’on obtient avec WxPython (le code sera donné ultérieurement) est différente au niveau du style. Cet exemple illustre parfaitement l’avantage esthétique de WxPython. On remarque que les police d’écriture sont globalement les mêmes mais c’est la forme du bouton : celui créé avec Tkinter est relative classique mais celui créé avec WxPython est proche du style XP de Windows. Ce bouton change d’aspect lorsqu’il est survolé ou cliquer (attention, valable seulement sous Xp si vous avez le Style Windows Xp – De base dans Windows, vous pouvez le modifier dans les paramètres d’affichage)

Bien entendu, les avantages de WxPython ne se résument pas au style des widgets, mais également au fait qu’ils sont nombreux et évolués






II] Conception de fenêtres avec WxPython


1/ Premier programme : étude du « Hello Word »


C’est maintenant que les choses sérieuses commencent vraiment !!! Voici le code qui a permis de créé la fenêtre « Hello Word » dans la partie précédente.


1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.31.

32.

33.

34.

35.

import wx


class Frame(wx.Frame):

def __init__(self, parent, title):

wx.Frame.__init__(self, parent, -1, title,size=((150, 150)))


panel = wx.Panel(self)


text=wx.StaticText(panel, -1, "Bonjour tout le monde")

bouton = wx.Button(panel, -1, "Quitter")


self.Bind(wx.EVT_BUTTON, self.quitter, bouton)

sizer = wx.BoxSizer(wx.VERTICAL)

sizer.Add(text, 0, wx.ALL|wx.CENTER, 10)

sizer.Add(bouton, 0, wx.ALL|wx.CENTER, 10)


panel.SetSizer(sizer)

panel.Layout()


self.Centre()


def quitter(self, evt):

self.Close()


class MyApp(wx.App):

def OnInit(self):

frame = Frame(None, "Test")

self.SetTopWindow(frame)


frame.Show(True)

return True

app = MyApp(True)

app.MainLoop()


Ligne 1 : Importation du module wx (classique)

Ligne 3 : Création d’une classe. Pour créé une application avec WxPython, il vous faudra maitriser les Classes d’application. Ici la classe ‘‘Frame’’ est dérivé de la classe wx.Frame, permettant de créé des fenêtres WxPython

Ligne 5 : Création de la fenêtre. Les arguments sont les suivants :

  • Parent : La fenêtre principal. Ici il nous somme en train de créé la fenêtre principale on renvoie donc None
  • Identifiant : Par habitude lorsque que l’on n’a pas besoin des Id, on indique -1
  • Titre : Sans commentaire
  • Argument supplémentaire : size permet de préciser la taille.

Ligne 7 : On ne place pas les éléments directement sur une fenêtre : il faut créer un Panel.

Ligne 9 : Création d’un texte. Voici les arguments :

  • Fenêtre contenant l’objet : Comme je l’ai dis précédemment ; on ne place pas les objets directement sur la fenêtre, mais sur le panel
  • Identifiant : Par habitude lorsque que l’on n’a pas besoin des Id, on indique -1
  • Texte : Sans commentaire

Ligne 10 : Création d’un bouton, les arguments sont les mêmes que pour le texte.

Ligne 12 : Détection des événements : permet de définir la fonction à exécuté lors du clique sur le bouton. Les arguments sont :

  • Type d’événement : Tous les objets dont on souhaite détecter les événements utilise la même instruction. Ici on précise que c’est le clique sur un bouton, mais on pourrait avoir simplement le survol ou bien le fait de cocher une Check box
  • La fonction associée : Sans commentaire
  • L’objet de l’événement : Sans commentaire

Ligne 14 : Création d’une grille qui va placer les objets. Elle peut être vertical (wx.VERTICAL) ou horizontal (wx.HORIZONTAL)

Lignes 15 et 16 : On ajoute les objets dans la grille. Les arguments sont les suivants :

  • L’objet : Sans commentaire
  • Type de positionnement : 0 est la valeur par défaut. On peut aussi inscrire 1 pour certain objet ce qui aura pour effet de les redimensionné en même temps que la fenêtre.
  • Style de positionnement : wx.ALL permet de positionner l’événement par rapport à l’ensemble de la fenêtre. wx.CENTER précise que l’objet sera centré. On aussi mettre wx.RIGHT ou encore wx.LEFT. Remarque : pour séparer deux mêmes arguments on utilise « | » (Alt Gr + 6). Pratique pour apporter des précisions.
  • Séparation : permet de mettre un espace au dessus et sur les cotés de l’objet.

Lignes 18 et 19 : On indique que la grille est placée sur le panel.

Ligne 21 : On indique que la fenêtre est center sur l’écran

Ligne 24 : Permet de quitter l’application

Lignes 26 à 32 : Création de classe application. À mettre à chaque fois

Lignes 34 et 35 : Lancement de l’application


Nous venons de créé et d’expliquer notre première application avec WxPython. Au début, la prise en main de WxPython est difficile, mais avec la multiplication des programmes que vous allez faire, vous allez vous familiariser avec les différentes instructions. Je vous conseil de repartir à chaque fois de cet exemple pour vos prochains programme.


2/ Création de boite de dialogue


Vous avez remarqués que la fenêtre que nous avons créée précédemment était classique. Une boite de dialogue, est une fenêtre qui s’affiche au dessus de la fenêtre principale, qui empêche que l’utilisateur revient à la première fenêtre. Voici un exemple assez simple et parlant.


1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.


37.

38.

39.

40.


41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

66.

67.

68.

69.

70.

71.

72.

73.

74.

75.

76.

77.

78.

79.

80.

81.

82.

83.

84.

85.

86.

87.

88.

89.

90.

91.

92.

93.

94.

95.

96.


97.

98.

99.

100.

101.

102.

103.

104.

105.

106.

107.

108.

109.

110.

111.112.

113.

114.

115.

116.

117.

118.

119.

120.

121.

122.

123.

124.

125.

126.

127.

128.

129.

130.

import wx


provider = wx.SimpleHelpProvider()

wx.HelpProvider_Set(provider)


class Dialoge(wx.Dialog):

def __init__(

self, parent, ID, title, size=wx.DefaultSize, pos=wx.DefaultPosition,

style=wx.DEFAULT_DIALOG_STYLE

):

pre = wx.PreDialog()

pre.SetExtraStyle(wx.DIALOG_EX_CONTEXTHELP)

pre.Create(parent, ID, title, pos, size, style)


self.PostCreate(pre)


sizer = wx.BoxSizer(wx.VERTICAL)


label = wx.StaticText(self, -1, "Un petit texte d'introduction")

label.SetHelpText("C'est un wx.StaticText")

sizer.Add(label, 0, wx.ALIGN_CENTRE|wx.ALL, 5)


box = wx.BoxSizer(wx.HORIZONTAL)

label = wx.StaticText(self, -1, "Entrer n°1 :")

label.SetHelpText("C'est toujours un wx.StaticText")

box.Add(label, 0, wx.ALIGN_CENTRE|wx.ALL, 5)


text = wx.TextCtrl(self, -1, "", size=(80,-1))

text.SetHelpText("Voici l'Entrer n°1")

box.Add(text, 1, wx.ALIGN_CENTRE|wx.ALL, 5)


sizer.Add(box, 0, wx.GROW|wx.ALIGN_CENTER_VERTICAL|wx.ALL, 5)


box = wx.BoxSizer(wx.HORIZONTAL)

label = wx.StaticText(self, -1, "Entrer n°2 :")

label.SetHelpText("Encore toujours un wx.StaticText ; C'est l'équivalent du Label sur Tk")

box.Add(label, 0, wx.ALIGN_CENTRE|wx.ALL, 5)


text = wx.TextCtrl(self, -1, "", size=(80,-1))

text.SetHelpText("Voici l'Entrer n°2 ; Il s'agit d'un wx.TextCtrl ; Son équivalent en Tk est : l'entry")

box.Add(text, 1, wx.ALIGN_CENTRE|wx.ALL, 5)


sizer.Add(box, 0, wx.GROW|wx.ALIGN_CENTER_VERTICAL|wx.ALL, 5)


line = wx.StaticLine(self, -1, size=(20,-1), style=wx.LI_HORIZONTAL)

sizer.Add(line, 0, wx.GROW|wx.ALIGN_CENTER_VERTICAL|wx.RIGHT|wx.TOP, 5)


btnsizer = wx.StdDialogButtonSizer()

if wx.Platform != "__WXMSW__":

btn = wx.ContextHelpButton(self)

self.box.Add(btn, 0, wx.ALIGN_CENTRE|wx.ALL, 5)

box = wx.BoxSizer(wx.HORIZONTAL)

btn = wx.Button(self, wx.ID_OK,"Ok")

btn.SetHelpText("Valider")

btn.SetDefault()

box.Add(btn, 0, wx.ALIGN_LEFT)


btn = wx.Button(self, wx.ID_CANCEL, "Annuler")

btn.SetHelpText("Quitter sans rien valider")

box.Add(btn, 0, wx.ALIGN_RIGHT)


sizer.Add(box, 0, wx.ALIGN_CENTER_VERTICAL|wx.ALL, 5)


sizer.Add(btnsizer, 0, wx.ALIGN_CENTER_VERTICAL|wx.ALL, 5)


self.SetSizer(sizer)

sizer.Fit(self)


class Frame(wx.Frame):

def __init__(self, parent, title):

wx.Frame.__init__(self, parent, -1, title,size=((200, 200)))


panel = wx.Panel(self)

bouton1 = wx.Button(panel, -1, "Boite de dialogue 1")

bouton2 = wx.Button(panel, -1, "Boite de dialogue 2")

bouton3 = wx.Button(panel, -1, "Quitter")


self.Bind(wx.EVT_BUTTON, self.dialogue1, bouton1)

self.Bind(wx.EVT_BUTTON, self.dialogue2, bouton2)

self.Bind(wx.EVT_BUTTON, self.quitter, bouton3)

sizer = wx.BoxSizer(wx.VERTICAL)

sizer.Add(bouton1, 0, wx.ALL|wx.CENTER, 10)

sizer.Add(bouton2, 0, wx.ALL|wx.CENTER, 10)

sizer.Add(bouton3, 0, wx.ALL|wx.CENTER, 10)


panel.SetSizer(sizer)

panel.Layout()


self.Centre()


def dialogue1(self, evt):

dia=wx.MessageDialog(self, "Voici une boite de dialogue classique", caption = "Info", style = wx.CANCEL|wx.OK,

pos = wx.DefaultPosition)

valeur = dia.ShowModal()


if valeur == wx.ID_OK:

print "Vous avez appuyé sur ''Ok''"

else:

print "Vous avez appuyé sur ''Annuler''"


def dialogue2(self, evt):

dlg = Dialoge(self, -1, "Voici le titre", size=(350, 200),

#style = wx.CAPTION | wx.SYSTEM_MENU | wx.THICK_FRAME

style = wx.DEFAULT_DIALOG_STYLE

)

dlg.CenterOnScreen()

val = dlg.ShowModal()

if val == wx.ID_OK:

print "Vous avez appuyé sur ''Ok''"

else:

print "Vous avez appuyé sur ''Annuler''"


def quitter(self, evt):

self.Close()


class MyApp(wx.App):

def OnInit(self):

frame = Frame(None, "Test")

self.SetTopWindow(frame)


frame.Show(True)

return True

app = MyApp(True)

app.MainLoop()


Quelques explications s’imposent !

Ligne 1 : Importation du module wx (classique)

Lignes 3 et 4 : Permet de créé des messages d’aide pour les boite de dialogue.

Ligne 6 : Création de la classe qui créera la boite de dialogue

Lignes 11 à 15 : Création de la boite de dialogue. La ligne 12 permet de créé un point d’interrogation « ? » dans la boite de dialogue pour afficher de l’aide. Si vous supprimez cette ligne, la boite de dialogue se créera mais sans le « ? » ; Si vous souhaitez le créer, les lignes 3 et 4 sont indispensables ; Au contraire, elles sont facultatives si vous ne souhaité pas avoir d’aide dans votre boite de dialogue. La ligne 13 permet véritablement de créé la boite de dialogue. Les arguments sont les suivants :

  • Fenêtre parent : Sans commentaire
  • Identifiant : -1 par défaut
  • Titre : Sans commentaire
  • Position : Ici on choisi la position par défaut c'est-à-dire centrée introduit par wx.DefaultPosition
  • Taille : Ici on à choisi la taille par défaut c'est-à-dire la plus petite possible mais sans cacher aucun objet. Une boite de dialogue n’est pas redimensionnable. Introduit par wx.DefaultSize
  • Style : On a choisi le style par défaut. Les autres styles sont indiqués à la ligne 107

Lignes 17 à 46 : Création des différant objets graphiques. C’est exactement le même principe que dans une frame classique si ce n’est que l’on ne crée pas de Panel : les objets sont ajoutés directement dans la fenêtre.

Lignes 48 à 66 : Création des boutons principaux de la boite de dialogue. Ces boutons détruirons automatiquement la fenêtre et renverrons un ID tel que pour permet ensuite d’effectuer différente opération suivant le bouton cliqué. Il en faut un au minimum. Si vous souhaité créé un bouton effectuant différentes opérations avant la fermeture de la boite de dialogue vous devez le créé avant la « création des boutons principaux de la boite de dialogue ». Un exemple nommé ‘‘Exemple 4’’ montre ce que je viens d’illustrer se trouve sur http://www.pythonfrance.com/codes/TUTORIEL-INTRODUCTION-WXPYTHON_43203.aspx . Cet exemple ne sera pas commenté dans ce tutoriel.

Ligne 68 et 69 : On indique que la grille contenant les différant objets graphique est placée sur la fenêtre. objet.SetHelpText("Texte") affiche l’aide associé à un objets.

Ligne 71 à 93 : Création de la fenêtre principale ; Explicité précédemment.

Ligne 96 : Création d’une boite de dialogue affichant un message. Les arguments sont :

  • Fenêtre parent : Sans commentaire
  • Message : Sans commentaire
  • Titre : Sans commentaire
  • Style : Comment sera la boite de dialogue. Voici les différant styles :
  • wx.OK : Affiche un bouton Ok
  • wx.CANCEL : Affiche un bouton Annuler
  • wx.YES_NO : Affiche les boutons oui et non
  • wx.YES_DEFAULT : idem wx.YES_NO, mais oui possède le focus par défaut.
  • wx.NO_DEFAULT : idem wx.YES_NO, mais non possède le focus par défaut.
  • wx.ICON_EXCLAMATION : Affiche l'icône point d'exclamation.
  • wx.ICON_ERROR : Affiche l'icône d’erreur
  • wx.ICON_QUESTION : Affiche l'icône point d'interrogation.
  • wx.ICON_INFORMATION : Affiche l'icône information (i)

On peut mettre plusieurs styles différant en utilisant utilise « | » (Alt Gr + 6) pour les séparer

  • Position : Ici on choisi la position par défaut c'est-à-dire centrée introduit par wx.DefaultPosition

Ligne 98 : On récupère l’ID du bouton cliqué ; Les différant ID sont :

  • wx.ID_OK
  • wx.ID_YES
  • wx.ID_NO
  • wx.ID_CANCEL

Lignes 100 à 103 : On affiche le résultat suivant le bouton cliqué

Lignes 106 à 116 : On affiche la boite de dialogue que l’on à créé. La récupération des ID est identique.

Lignes 118 à 130 : Fin du programme, pas de difficulté particulière.


Voila, nous avons expliqué la création d’une boite de dialogue. Sur la page du site Python-France http://www.pythonfrance.com/codes/TOUR-HANOI-AVEC-TKINTER_41862.aspx il y a un exemple de création de boite de dialogue avec Tkinter, mais c’est un « bricolage ». Avec WxPython, nous avons créé une boite de dialogue performante et assez simplement, ce sui montre une fois de plus la puissance de Wx par rapport à Tkinter.


Cette introduction à WxPython, est finie. Dans le prochain tutoriel, nous verrons certains widgets particulier de WxPython ainsi que les « mini_frame ».


By Aéra

 Historique

21 janvier 2010 15:38:16 :
Problème de titre ...

Commentaires

Commentaire de aera group le 25/06/2007 18:56:47

Le rendu des codes n'est pas génial ! Allez sur http://www.pythonfrance.com/codes/TUTORIEL-INTRODUCTION-WXPYTHON_43203.aspx pour un meilleur aperçu !

Commentaire de xeolin le 29/09/2007 21:32:52

Bravo,

bon tutorial, c'est plus simpatique que le livre de Swimmen ou il faut passer 100 pages avant d'arriver a Tkinter.

gg, un beau 10

Commentaire de aera group le 30/09/2007 17:32:16

Merci beaucoup Xeolin, je précise que je viens de commencer le tutoriel suivant sur WxPython, mais je ne peux pas vraiment vous dire dans combient de temps il sera disponible, le temps me manque cruelement (depuis que je suis en Terminal S, le mot "temps libre" a un peu disparu de mon vocabulaire et de ma vie :) ...). Bonne continuation à tous, et n'ésitez pas à mettre des commentaires pour me faire part de vos remarques, de vos questions, de vos critiques (toutes les critiques JUSTIFIER sont bonne à prendre et je vous en remercit d'avance) et surtout de vos amméliorations !!!
____
Aéra

Commentaire de Julien39 le 28/06/2009 08:11:38

Oui c'est pas mal pour commencer

Commentaire de Clempython le 20/01/2010 17:22:49

"INTRODUCTION À PYTHON"

un peu rude l'introduction...

tu aurais dû nommer ton tutoriel introduction à wxpython.

Commentaire de aera group le 21/01/2010 15:27:51

Heu oui en effet, c'est une erreur de ma part, c'est bel et bien un tutoriel pour WxPython et non pour Python ...
I'm sorry

 Ajouter un commentaire




Nos sponsors


Appels d'offres

Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,234 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales