Retour


Deuxième application

Calculatrice 1

Problème :


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 :
- Sur l'onglet
sizers de l'Editeur vous devez voir 4 sizers.
- Cliquez sur chacun d'eux un par un,
- Basculer sur l'onglet Constr de l'inspecteur de propriétés,
et changer les paramètres suivants :



boxSizer1

gridSizer1

boxSizer2

boxSizer3

Name

'General'

'Nombres'

'Operateur1'

'Operateur2'

Orientation

wx.VERTICAL


wx.HORIZONTAL

wx.HORIZONTAL

Cols
(colonnes)


3



Rows
(lignes)


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).
- Sélectionnez le contrôle
wx.StaticText sur l'onglet Composants de base de la palette et déposez-le n'importe où sur l'Editeur graphique
Vous voyez apparaître la fenêtre de l'Editeur de collection avec votre
widget Self.StaticText1 en fin de liste.
- A l'aide de l'icône de la flèche
, remonter le widget Self.StaticText1 en premier de la liste
- Répéter l'opération avec un deuxième widget wx.StaticText mais en deuxième de la liste.
- puis Sélectionnez le contrôle wx.Buton sur l'onglet Boutons de la palette et déposez-le sur l'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.
- cliquez 12 fois (3x4 boutons) sur l'icône Nouveau de la fenêtre de l'Editeur de collection 'Nombres'.
- Sélectionnez le contrôle
wx.Buton sur l'onglet Boutons de la palette
- et cliquez
sur l'Editeur graphique dans la première case rouge.
- Répéter l'opération 11 fois pour remplir toutes les cases avec des boutons.

=>

L'Editeur de collection du sizer 'Nombres' devient =>




Ajouter des boutons dans le sizer 'Operateur1'
- exécutez les même opérations que pour le sizer Nombres mais seulement 4 fois pour 4 boutons.

Ajouter des boutons dans le sizer 'Operateur2'
- exécutez les même opérations que pour le sizer Nombres mais seulement 3 fois pour 3 boutons.


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):
      self.AfficheOperation.SetLabel(self.AfficheOperation.GetLabel() + '-')

def OnBouton1Button(self, event):
      
self.AfficheOperation.SetLabel(self.AfficheOperation.GetLabel() + '1')

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