Deuxième application
Calculatrice 1
Problème :
Dans la première application, lorsque la fenêtre est agrandi ou
rétréci, les widgets ne changent pas de dimensions.
Si
la fenêtre est redimensionnée, les champs textes doivent
s'agrandir en conséquence.
Et la fenêtre
ne doit pas être redimensionnable.
Pour
palier à ces problèmes, nous allons utiliser la technique des
sizers.
Cette petite application a pour objectif
d’apprendre à utiliser des sizers.
Pour cela je vous propose de créer une calculatrice simple comme celle-ci : |
|
1) Créer une fenêtre vide que l'on appelle aussi un cadre :
-
Sur la palette, sélectionnez l'onglet 'Nouveau'.
-
Sélectionnez le bouton 'wx.Frame'. Cela va créer un nouveau fichier
source * (Frame1) *.
- Cliquez sur le bouton Enregistrer (ou sur
le menu Fichier /
Enregistrer) et enregistrez-le sous Calculatrice1.py.
2) Transformer cette fenêtre en une application :
-
Sélectionnez dans le menu Edition l'option
Ajouter un exécuteur de module.
Cela va ajouter un peu de code à votre fichier de sorte que vous
puissiez l'exécuter
sans avoir à disposer d'un fichier wx.App séparé.
-
Enregistrez le fichier et exécuter cette application, vous verrez
juste Frame1 dans la barre de titre et un fond gris.
- Puis
refermer l'application.
- Démarrez l'Editeur
graphique en
cliquant sur le bouton Editeur graphique.
- Cliquez sur l'onglet
Objs de l'Inspecteur de propriétés pour sélectionné Frame1,
-
Cliquez sur l'onglet Const.
- et changer les paramètres
suivants :
|
Frame1 |
Title |
Calculatrice1 |
Style : |
|
wx.DEFAULT_FRAME_STYLE |
False |
wx.CAPTION |
True |
wx.CLOSE_BOX |
True |
wx.CLIP_CHILDREN |
True |
wx.MINIMIZE_BOX |
True |
wx.MAXIMIZE_BOX |
True |
wx.SYSTEM_MENU |
True |
Tous ces paramètres permettent d'avoir une fenêtre "classique", avec un bouton dans la barre des tâches, une barre de titre avec des boutons de fermeture et de réduction, une icône (permettant d'afficher un menu système).
Nous ne voulons pas que la fenêtre soit redimensionnée par l'utilisateur. Pour éviter cela, le paramètre wx.RESIZE_BORDER est laissé à False.
3) Ajouter un panneau dans le fond de la fenêtre :
Ce panneau est une boite (une structure) dans laquelle vous pourrez ajouter des objets.
-
Sélectionnez l'onglet Calculatrice1
de votre application.
- Démarrez le concepteur en
cliquant sur le bouton Editeur graphique.
- Dans
la
palette, sélectionnez l'onglet "Conteneurs
/ Mise en page".
- Cliquez sur le bouton wx.Panel
pour
le sélectionner et cliquez n'importe où dans le cadre de l'édition
graphique de Calculatrice1. Cela va coller le
panneau dans votre
fenêtre. On peut voir apparaître un rectangle avec 8 poignées.
-
Faites un clique droit
sur l'Editeur graphique, un menu apparaît,
- Cliquez sur
'Rafraîchir l'Editeur graphique' et le rectangle symbolisant le
widget wx.Panel disparait.
Le
fait de Rafraîchir, le
panneau va prendre tout l'espace de l’intérieur de la fenêtre et
donc les poignées ne sont plus utiles.
4) Ajouter des objets sizer, organisateur de l'espace du panneau
Cet objet sizer est une excellente façon de vous assurer que votre mise en page graphique soit agréable et propre. Il devient particulièrement pratique lorsque vous ne savez pas exactement combien les objets que vous voulez insérer dans votre panneau prennent d'espace. Ce qui peut être le cas lorsque vous internationalisez votre application sur plusieurs systèmes d'exploitation différents ou que les objets tels que des listes ou des grilles évoluent de manière dynamique dans l’exécution de votre programme ou que l'utilisateur veut redimensionner ses fenêtres.
Il y a plusieurs manière d'organiser les objets boutons et textes avec des sizers :
-
soit plusieurs sizers simples
- soit un sizer plus compliqué
(ne sera pas expliqué ici)
Dans le premier cas :
Vous
ajouterez une simple boite sizer (BoxSizer) générale qui
accueillera les 3 autres sizers.
- Toujours sur l'onglet
"Conteneurs
/ Mise en page" de la palette,
- Cliquez sur le bouton
wx.BoxSizer pour le sélectionner.
- Cliquez n'importe où sur
le panneau wx.Panel que vous venez d'ajouter à votre fenêtre. Vous
devriez voir une ligne jaune autour de votre panneau.
Ensuite répéter l'opération pour insérer 3 autres sizers à l'intérieur du premier :
-
un wx.GrigSizer
- un wx.BoxSizer
- et encore un wx.BoxSizer
Remarque : Vous voyez apparaître la fenêtre de l'Editeur de collection du premier BoxSizer, puis à l'intérieur, dans l'ordre, les 3 sizers.
Changer
le nom et les propriétés de chaque sizer : |
|
|
boxSizer1 |
gridSizer1 |
boxSizer2 |
boxSizer3 |
Name |
'General' |
'Nombres' |
'Operateur1' |
'Operateur2' |
Orientation |
wx.VERTICAL |
|
wx.HORIZONTAL |
wx.HORIZONTAL |
Cols |
|
3 |
|
|
Rows |
|
4 |
|
|
Attention à ne pas mettre d'accent ex : Generale (boite générale).
Puis
vérifier que le paramètre Orientation du sizer
boite (BoxSizer) soit :
- sur wx.VERTICAL pour le
développer sur une ligne donc vers le bas
- ou sur
wx.HORIZONTAL
pour le développer sur une colonne donc vers la droite.
Le sizer grille, lui, peut avoir plusieurs colonnes et plusieurs lignes de même dimensions.
5) Ajouter des widgets dans les sizers.
Ajouter 2 zones de texte prédéfinis et un bouton dans le sizer 'General'
-
Amener l'Editeur graphique à
l'avant-plan (par exemple il
suffit de cliquer sur le bouton de la barre d'outil Editeur
graphique). |
|
Ajouter des boutons dans le sizer 'Nombres'
-
Ouvrir le sizer Nombres en double cliquant dessus dans l'onglet
Sizers de la fenêtre de l'Editeur. |
=> |
L'Editeur de collection du sizer 'Nombres' devient => |
|
Ajouter
des boutons dans
le sizer 'Operateur1' Ajouter
des boutons dans
le sizer 'Operateur2' |
|
6) Modifier les paramètres des widgets
dans l’inspecteur de propriétés
|
StaticText1 |
StaticText2 |
button1 |
button2 |
button3 |
button4 |
button5 |
Name |
'AfficheOperation' |
'AfficheResultat' |
BoutonEffacer |
Bouton1 |
Bouton2 |
Bouton3 |
Bouton4 |
Label |
'' |
'=' |
Effacer |
1 |
2 |
3 |
4 |
Size Height |
|
|
31 |
29 |
29 |
29 |
29 |
Size Width |
|
|
256 |
85 |
85 |
85 |
85 |
|
button6 |
button7 |
button8 |
button9 |
button10 |
button11 |
button12 |
button13 |
Name |
Bouton5 |
Bouton6 |
Bouton7 |
Bouton8 |
Bouton9 |
BoutonNegatif |
Bouton0 |
BoutonVirgule |
Label |
5 |
6 |
7 |
8 |
9 |
-/+ |
0 |
, |
Size Height |
29 |
29 |
29 |
29 |
29 |
29 |
29 |
29 |
Size Width |
85 |
85 |
85 |
85 |
85 |
85 |
85 |
85 |
|
button14 |
button15 |
button16 |
button17 |
button18 |
Name |
BoutonAdition |
BoutonSoustraction |
BoutonMultiplication |
BoutonDivision |
BoutonParentèseO |
Label |
+ |
- |
* |
/ |
( |
Size Height |
29 |
29 |
29 |
29 |
29 |
Size Width |
64 |
64 |
64 |
64 |
64 |
|
button19 |
button20 |
Calculatrice1 |
Name |
BoutonParentèseF |
BoutonResultat |
FenetrePrincipale |
Label |
) |
'=' |
|
Size Height |
29 |
29 |
282 |
Size Width |
64 |
128 |
257 |
7) Ajouter les événements des boutons
- Remplacer pour chacun des boutons la commande skip() dans sa définition dans le code source par les commande get() et set() du wx.TextCtrl (ex : set(' ') pour le bouton effacer.
Basculer dans la fenêtre de l'Inspecteur de propriétés
-
Dans l'onglet Objs, sélectionner le bouton Effacer.
-
Puis dans l'onglet Evts,
- Cliquez sur "ButtonEvent"
-
Double cliquez sur wx.EVT_BUTTON
- Répéter l'opération avec les autres boutons
Dans le code source changer la
définition de chaque bouton.
Par exemple pour le bouton
Effacer :
def
OnEffacerButton(self, event)
event.Skip()
par :
def
OnEffacerButton(self,
event):
self.AfficheOperation.SetLabel('')
Ce qui permet de vider ( ' ' pas de caractère) le paramètre Label du widget texte prédéfini nommé 'AfficheOperation'.
- Répéter l'opération avec les autres boutons et le code source suivant :
|
BoutonSoustraction |
Bouton1 |
Code source associé |
def
OnBoutonSoustractionButton(self,
event): |
def
OnBouton1Button(self,
event): |
De
même avec les symboles 234567890+*/.() pour les boutons
respectifs.
Puis pour le bouton '=' modifier le code par :
def
OnBoutonResultatButton(self,
event):
self.AfficheResultat.SetLabel("="
+
str(eval(self.AfficheOperation.GetLabel())))
self.AfficheOperation.SetLabel('')
Ce
qui permet d'écrire '=' dans le paramètre label du widget texte
prédéfini nommé 'AfficheResultat', suivie de l'évaluation de la
chaîne de caractère contenue dans le paramètre label du widget
texte prédéfini nommé 'AfficheOperation' dans la première ligne
de code,
et puis d'effacer le contenu de 'AfficheOperation' dans
la deuxième ligne de code.
-
Valider ces changements, enregistrer le fichier.
Pour
voir le fichier source : Calculatrice1.py