Cours de programmation événementielle de niveau DUT. Cas d'étude avec Windev : le tableau de bord d'une voiture.

1. Guillaume Cabanac
@gcabanac
Université Toulouse 3
IUT Informatique
13 septembre 2012
Pge3
Programmation événementielle
conçoit une IHM

2. 2
Bilan et perspectives
Pge3 ― Programmation événementielle
Prl2
Moyenne générale : 9,98
Écart type : 3,38
0,00
2,00
4,00
6,00
8,00
10,00
12,00
14,00
16,00
18,00
20,00
A B C D E F
Pge3
 Exam : mardi 6 novembre 2012
Durée : 1h30
Documents non autorisés
max
min
moy
Vous êtes ici

3. 3
 Pré-requis : algorithmique (Alg1)
 Variables, structures de contrôle
 Sous-programmes
 Enseignement de Prl2
 Vocabulaire de l’IHM
 Notions de génie logiciel
 Notions d’ergonomie
 Conception d’interfaces
 Programmation événementielle
De quoi ça parlait Prl2, déjà ?!Pge3 ― Programmation événementielle
D

4. 4
Pge3 ― Programmation événementielle
Vocabulaire d’IHM
sélecteurs
radio buttons
interrupteurs
checkboxes
combo
zone de texte + spin
A
N
Q

5. 5
Pge3 ― Programmation événementielle
Notions d’ergonomie
M
auvais
design
!

6. 6
Pge3 ― Programmation événementielle
 Mauvais design logiciel
C’est pas compliqué
mamie, pour arrêter
l’ordinateur, tu cliques
sur « démarrer » en
bas à gauche, puis…
Fail.
Dict. Hachette 99

7. 7
http://www.baddesigns.com
 Mauvais design matériel
Pge3 ― Programmation événementielle
cobayes

8. 8
Pge3 ― Programmation événementielle
Développement d’IHM en 4 étapes
1. Aspect dynamique → diagramme états-transitions
2. Aspect statique → fenêtre et widgets
3. Programmation → code Windev
3.1. Déclarations globales de la fenêtre
(états + evts)
3.2. Initialisation de la fenêtre (appel GDE)
3.3. Génération d’événements (depuis les
widgets)
3.4. Procédure GDE

9. 9
Pge3 ― Programmation événementielle
Rappels sur 1 exemple : phares d’une voiture
 Initialement, les feux sont éteints. En tournant la manette de 90°, on allume les
feux de position (veilleuses). Pour éteindre les feux de position, il faut tourner
la manette de -90°.
 Lorsque les feux de position sont allumés, on allume les feux de croisement
(codes) en tournant la manette de 90°. On éteint les feux de croisement en
tournant la manette de -90°. Seuls les feux de position sont alors allumés.
 Lorsque les feux de croisement sont allumés, on allume les feux de route
(phares) en tirant la manette vers soi. On éteint les feux de route 1) en
poussant la manette ou en la tournant de -90°. Seuls les feux de croisement
(cas 1) ou les feux de position (cas 2) sont alors allumés.
 Pour faire un appel de phares, lorsque les feux sont éteints ou lorsque les feux
de position sont allumés, il faut tirer la manette vers soi.
Le fait de relâcher la manette arrête l’appel de phares.

10. 10
Pge3 ― Programmation événementielle
Conception : diagramme États-Transitions
état transitionétat initial

11. 11
Pge3 ― Programmation événementielle
 Toujours un seul
événement d’initialisation
 Toujours déterministe
init
rotation 90°
rotation -90°
manette tirée
manette relâchée
Feux éteints
init
manette tirée
manette relâchée
Feux de position
allumésrotation 90°
rotation -90°
Appel de pharesmanette tirée manette tirée
manette relâchée manette relâchée
init
rotation 90°
rotation -90°
manette tirée
manette relâchée
Feux éteints
init
rotation 90°
rotation -90°
manette tirée
manette poussée
Feux de croisement
allumés
manette tirée
manette relâchée rotation -90°
Feux de position
allumés
Appel de phares Appel de phares +
feux de position
allumés
Feux de route
allumés
rotation 90°
rotation -90°
rotation 90°
rotation -90°
manette tirée
manette relâchée
manette tirée
manette relâchée
manette tirée
manette poussée
rotation -90°
Diagramme états-transitions :
phares d'un véhicule
Non
déterministe !
Vérificationsdebase
Diagramme États-Transitions

12. 12
Pge3 ― Programmation événementielle
Matrice de transitions
init
rotation 90°
rotation -90°
manette tirée
manette relâchée
Feux éteints
init
rotation 90°
rotation -90°
manette tirée
manette poussée
Feux de croisement
allumés
manette tirée
manette relâchée rotation -90°
Feux de position
allumés
Appel de phares Appel de phares +
feux de position
allumés
Feux de route
allumés
rotation 90°
rotation -90°
rotation 90°
rotation -90°
manette tirée
manette relâchée
manette tirée
manette relâchée
manette tirée
manette poussée
rotation -90°
Diagramme états-transitions :
phares d'un véhicule
Feux éteints
(état initial)
Feux de position
allumés
Feux de
croisement
allumés
Appel de phares Appel de phares
+ feux de position
allumés
Feux de route
allumés
Manette tirée Appel phares Appel de phares +
feux de position
allumés
Feux de route
allumés
Manette relâchée Feux éteints Feux de position
allumés
Rotation 90° Feux de position
allumés
Feux de
croisement
allumés
Rotation −90° Feux éteints Feux de position
allumés
Feux de position
allumés
Manette poussée Feux de position
allumés
état
evt
⇑
⇓
équivalents

13. 13
Pge3 ― Programmation événementielle
Conception de l’interface
Potentiomètre
Regroupement
des composants

14. 14
Pge3 ― Programmation événementielle
Nommage des widgets
TDB =
Tableau de
bord
démo

15. 15
Pge3 ― Programmation événementielle
Déclaration et initialisation de la fenêtre
 Déclarations globales de la fenêtre
 1 variable pour l’état courant
= le bout du fil d’Ariane
 N constantes pour les états
 M constantes pour les événements
 Initialisation de la fenêtre
init
rotation 90°
rotation -90°
manette tirée
manette relâchée
Feux éteints
init
rotation 90°
rotation -90°
manette tirée
manette poussée
Feux de croisement
allumés
manette tirée
manette relâchée rotation -90°
Feux de position
allumés
Appel de phares Appel de phares +
feux de position
allumés
Feux de route
allumés
rotation 90°
rotation -90°
rotation 90°
rotation -90°
manette tirée
manette relâchée
manette tirée
manette relâchée
manette tirée
manette poussée
rotation -90°
Diagramme états-transitions :
phares d'un véhicule

16. 16
Pge3 ― Programmation événementielle
Génération des événements

17. 17
Pge3 ― Programmation événementielle
Procédure GDE
Traduction de :
état courant, évt → état futur
• Paramètres de GDE
• pEvt : événement déclenché
• pEtat : état courant
• Modification des composants
ex : BTN_Appel..Visible =
Faux
• Mise à jour de l’état courant
ex : pEtat =
étatFeuxEteints
• Programmation défensive
AUTRE CAS : Erreur(…)
…

18. 18
Pge3 ― Programmation événementielle
Génération de l’exécutable
Rappel : DLL = Dynamic-link library

19. 19
Pge3 ― Programmation événementielle
Pge3Pge3
étude de cas
« Course cycliste contre la montre »
2 TD et 8 TP

20. 20
Pge3 ― Programmation événementielle
Analyse (MLD)
Créer une liaison
Créer un fichier
 Ceci est un MLD graphique (pas un MCDi !!!) 
Coureur = {numLicence, nom, prénom, #idEquipe}
Course = {date, ville, heureDépart, deltaDépart}
Equipe = {idEquipe, nomEquipe}
Participation = {#numLicence, #date, heureDépart, heureArrivée, points, numDossard}
MLDMLD
clé primaire
clé de parcours

21. Fichiers
générés
21
Pge3 ― Programmation événementielle
Génération des fichiers + WDMap
Générer l’analyse

22. 22
Pge3 ― Programmation événementielle
Lecture et écriture dans un fichier
De nombreux autres sous-programmes
existent :
• HModifie
• HLitRecherchePremier
• HTrouve
• …
 La doc est ton amie
Ceci est un tampon
 Transfère le contenu du tampon
(mémoire) dans le fichier

23. 23
Pge3 ― Programmation événementielle
Groupware utilisateur − Activation

24. 24
Pge3 ― Programmation événementielle
Groupware utilisateur − Création d’un login

25. 25
Pge3 ― Programmation événementielle
Groupware utilisateur − Configuration

26. 26
Pge3 ― Programmation événementielle
Groupware utilisateur − Test
EB

27. 27
Pge3 ― Programmation événementielle
L’AGL Windev
 Atelier de Génie Logiciel
CASE = Computer-Aided Software Engineering
 Conception
 Développement
 Test
 Livraison
 Rappels
 1 projet Windev permet de développer une application (n fenêtres)
 Configuration :
Outils / Options / Options générales
de Windev / Répertoires
 Projets personnels H:Pge3
 Briques de code + Messages C:Temp ou H:Pge3garbage

28. 28
Pge3 ― Programmation événementielle
L’AGL Windev chez soi
Note :
Le fichier à télécharger a une taille de 900 Mo
environ; prévoyez environ 40 minutes en ADSL.
Vous utilisez un anti-virus de l'éditeur Kapersky ?
A l'installation de la version Express, certaines
versions de cet anti-virus affichent une
information erronée : l'anti-virus indique par
erreur la présence d'un cheval de Troie.
OL'information est fausse, vous pouvez installer la
version sans aucun risque. L'éditeur Kapersky est
informé de ce "faux-positif" et travaille à sa
correction pour de prochaines versions.
Vous pouvez donc ignorer cette alerte et
continuer votre installation normalement.