Retour


Ma première application

Cette application est inspiré du tutoriel de Sébastien SAUVAGE à l'adresse :

http://sebsauvage.net/python/gui/index_fr.html


Cette petite application a pour objectif d’apprendre à créer un programme d'une fenêtre, d'y insérer 3 widgets et de les utiliser pour se familiariser avec l’environnement de Boa Constructor.

Notre projet est de créer une application toute simple comme celle-là :


Le comportement que nous souhaitons avoir est :

Un widget est un élément graphique (un bouton, une case à cocher, un label, une zone de texte, un onglet...)
Notre application possède 3 widgets :

Voici les étapes à suivre :

1) Créer une fenêtre vide que l'on appelle aussi un cadre :


- Dans la fenêtre de la palette, sélectionnez l'onglet 'Nouveau'.
- Cliquez sur l'icône
'wx.Frame' . Aidez vous des bulles d'aide pour la trouver si nécessaire.
- Basculer sur la fenêtre de l'Editeur . Boa Constructor a généré un nouveau fichier texte en langage Python, le code
source de votre application. Elle est identifiée par un onglet marqué * (Frame1) * .

- Cliquez sur l'icône Enregistrer (ou sur le menu Fichier / Enregistrer) et enregistrez-le sous 'Premiereapplication.py' (attention les noms de fichier ne doivent pas comporter d'accent ni de caractères spéciaux).
Cette enregistrement sera à effectuer après chaque étape.

Si vous voulez voir à quoi votre application ressemble, cliquez sur l’icône de l'Editeur graphique . Refermer la en cliquant sur la croix comme d'habitude.


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 en cliquant sur
, vous verrez juste une fenêtre vide intitulé Frame1 avec les trois icônes de fermeture, agrandissement et réduction de la fenêtre. Puis refermer cette fenêtre.
- Démarrez le concepteur
en cliquant sur l'icône Editeur graphique .

Basculer dans la fenêtre de l'Inspecteur de propriétés
Dans l'onglet Objs, vérifier que l'objet Frame1 est sélectionné. Puis dans l'onglet Constr, cliquer sur Frame1 dans le paramètre Title pour écrire comme titre de la fenêtre "Ma première application".

- Cliquer sur Valider la session .

- Enregistrer


3) Insérer les 3 widgets

- Dans la fenêtre de la palette, sélectionnez l'onglet 'Composants de base'.
- Cliquez sur l'icône
'wx.TextCtrl' pour sélectionner le widget champ texte modifiable.
- Basculer sur la fenêtre de l'Editeur et démarrez le concepteur en cliquant sur l'icône
Editeur graphique .

- cliquez dans la fenêtre de votre application, à l'endroit approximatif de l'emplacement du widget.


- Dans la fenêtre de la palette, sélectionnez l'onglet 'Boutons'.
- Cliquez sur l'icône
'wx.Button' pour sélectionner le widget Bouton.
- Basculer sur
la fenêtre de votre application et cliquez à l'endroit approximatif de l'emplacement du widget.


- Dans la fenêtre de la palette, sélectionnez l'onglet 'Composants de base'.
- Cliquez sur l'icône
'wx.StaticText' pour sélectionner le widget champ texte fixe.
- Basculer sur
la fenêtre de votre application et cliquez à l'endroit approximatif de l'emplacement du widget.


4) Changer les paramètres des widgets

Basculer dans la fenêtre de l'Inspecteur de propriétés
- Dans l'onglet Objs, sélectionner l'objet Frame1.
- Puis dans l'onglet Constr, modifier en cliquant dessus, les paramètres suivants :

Size
Height


80

Vous pouvez décocher le paramètre Size pour accéder à Height et à Width.

Size
Width


336



- Dans l'onglet Objs, sélectionner l'objet TextCtrl1.
- Puis dans l'onglet Constr, modifier en cliquant dessus, les paramètres suivants :


Position
X

0

Position
Y

0

Size
Height


27

Size
Width


250

Value

Ecrire un texte ici

Style
wx.TE_PROCESS_ENTER

True

Note : le paramètre wx.TE_PROCESS_ENTER dans le style du widget, permet de capturer le retour à la ligne. Ceci permettra d'utiliser les événements sur Entrer.


- Dans l'onglet Objs, sélectionner l'objet Button1.
- Puis dans l'onglet Constr, modifier en cliquant dessus, les paramètres suivants :


Position
X

250

Position
Y

0

Size
Height


27

Size
Width


85

Label

Cliquez


- Dans l'onglet Objs, sélectionner l'objet StaticText1.
- Puis dans l'onglet Constr, modifier en cliquant dessus, les paramètres suivants :


Position
X

0

Position
Y

28

Size
Height


20

Size
Width


335

Label

Bonjour !

Les 3 widgets se sont positionnés et la fenêtre de votre application épouse leurs formes.


5) Utiliser ces widgets


L'interaction des widgets se réalise par l'intermédiaire du gestionnaire d’événements qui peuvent être une intervention de l'utilisateur comme le clique de souris, l'appui sur une touche, etc ou une intervention automatique de l'ordinateur comme à une heure précise,…


Basculer dans la fenêtre de l'Inspecteur de propriétés

- Dans l'onglet Objs, sélectionner l'objet TextCtrl1.
- Puis dans l'onglet Evts,

- Cliquez sur "ButtonEvent"

- Double cliquez sur wx.EVT_TEXT_ENTER


- Dans l'onglet Objs, sélectionner l'objet Button1.
- Puis dans l'onglet Evts,

- Cliquez sur "TextCtrlEvent"

- Double cliquez sur wx.EVT_BUTTON



Dans le code source changer :

def OnButton1Button(self, event):

event.Skip()

par :

def OnButton1Button(self, event):

self.staticText1.SetLabel( self.textCtrl1.GetValue() + " (Bouton cliquez)" )


def OnTextCtrl1TextEnter(self, event):

event.Skip()

par :

def OnTextCtrl1TextEnter(self, event):

self.staticText1.SetLabel( self.textCtrl1.GetValue() + " (Entrer appuyez)" )





Résumé :


1) Ajouter :
'
wx.Frame' dans l'onglet 'Nouveau' de la palette

'Ajouter un exécuteur de module' dans le menu Edition

Dans l'Editeur graphique

'wx.TextCtrl' dans l'onglet 'Composants de base' de la palette

'wx.Button' dans l'onglet 'Boutons' de la palette

'wx.StaticText' dans l'onglet 'Composants de base' de la palette


2) Modifier les paramètres :

Dans les onglets Props et Constr de l'Inspecteur de propriétés.


Frame1

TextCtrl1

Button1

StaticText1

Title

Ma première application

Position
X

0

Position
X

250

Position
X

0

Size
Height


80

Position
Y

0

Position
Y

0

Position
Y

28

Size
Width


336

Size
Height


27

Size
Height


27

Size
Height


20



Size
Width


250

Size
Width


85

Size
Width


335



Value

Ecrire un texte ici

Label

Cliquez

Label

Bonjour !



Style
wx.TE_PROCESS_ENTER

True






3) Ajouter les événements :

Dans l'onglet Evts de l'Inspecteur de propriétés puis dans le code source.



TextCtrl1
def OnTextCtrl1TextEnter(self, event):

Button1
def OnButton1Button(self, event):

Evénements

wx.EVT_TEXT_ENTER

wx.EVT_BUTTON

Code source associé

self.staticText1.SetLabel( self.textCtrl1.GetValue() + " (Entrer appuyez)" )

self.staticText1.SetLabel( self.textCtrl1.GetValue() + " (Bouton cliquez)" )


4) Enregistrez-la sous 'Premiereapplication.py'

Pour essayer cette application sur un ordinateur linux sans Boa Constructor :
- télécharger le code source du programme, ici 'Premiereapplication.py'
- rajouter dans le même dossier, le dossier 'wx' contenant la bibliothèque wxpython (à décompresser)
- lancer python dans un terminal, dans le dossier du programme (ex 'python Premiereapplication.py')