programmation événementielle avec windev

Guillaume Cabanac@gcabanac

Université Toulouse 3IUT Informatique13 septembre 2012

Pge3Programmation événementielle

conçoit une IHM

2

Bilan et perspectivesPge3 ― 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 2012Durée : 1h30Documents non autorisés

max

min

moy

Vous êtes ici

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

Pge3 ― Programmation événementielle

Vocabulaire d’IHMsélecteursradio buttons

interrupteurscheckboxes

combo

zone de texte + spin

AN

Q

5


Notions d’ergonomie

Mauvai

s des

ign !

6


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

http://www.baddesigns.com

Mauvais design matérielPge3 ― Programmation événementielle

cobayes

8


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


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


Conception : diagramme États-Transitions

état transitionétat initial

11


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 positionallumés rotation 90°

rotation -90°

Appel de phares manette 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 croisementallumés

manette tirée

manette relâchée rotation -90°

Feux de positionallumés

Appel de phares Appel de phares +feux de position

allumés

Feux de routeallumé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érif

icat

ions

de

base

Diagramme États-Transitions

12


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


manette tirée




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



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

étatevt

⇑⇓équivalents

13


Conception de l’interface

Potentiomètre

Regroupement des composants

14


Nommage des widgets

TDB = Tableau de bord

démo

15


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


manette tirée




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



16


Génération des événements

17


Procédure GDE

Traduction de : état courant, évt → état futur

• Paramètres de GDE• pEvt : événement déclenché• pEtat : état courant

• Modification des composantsex : BTN_Appel..Visible =

Faux

• Mise à jour de l’état courantex : pEtat =

étatFeuxEteints

• Programmation défensiveAUTRE CAS : Erreur(…)…

18


Génération de l’exécutable

Rappel : DLL = Dynamic-link library

19


Pge3Pge3

étude de cas« Course cycliste contre la montre »

2 TD et 8 TP

20


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}

MLD

MLD

clé primaire

clé de parcours

Fichiers générés

21


Génération des fichiers + WDMap

Générer l’analyse

22


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


Groupware utilisateur − Activation

24


Groupware utilisateur − Création d’un login

25


Groupware utilisateur − Configuration

26


Groupware utilisateur − Test

EB

27


L’AGL Windev

Atelier de Génie LogicielCASE = 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:\Pge3\garbage

28


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.

programmation événementielle avec windev

Education