Conception d`Applications Graphiques

Applications Graphiques
E. ADAM
UVHC - ISTV
E. ADAM – ISTV - UVHC
Plan
●
●
●
Architectures d'applications graphiques
Méthode de conception d'applications
graphiques
Applications graphiques en Java
–
Java AWT, Java SWING, Java 2D
E. ADAM – ISTV - UVHC
Architectures d'applications
graphiques
●
Le modèle langage
●
Le modèle SEEHEIM
●
Le modèle Entrées-Sorties
●
Le modèle ARCH
●
Le modèle Agents
●
E. ADAM – ISTV - UVHC
Le modèle PAC, PAC-AMODEUS, MVC
Architectures d'applications graphiques
Le modèle SEEHEIM
Application
Interface avec l'application
Contrôle dialogue
Gestion présentation
E. ADAM – ISTV - UVHC
Niveau Sémantique de l'interaction
pour une indépendance IHM-Application
Niveau Syntaxique : contrôle de
l'enchaînement des états/actions
Niveau Lexical : représentation physique
des objets et prise en compte des actions
Architectures d'applications graphiques
Le modèle Entrées-Sorties
●
Vue en couches :
–
–
–
Interaction = suite d’opérations d’entrée/sortie.
opérations traitées par hiérarchie de machines abstraites
au plus bas niveau :
●
●
–
–
–
interception de l’action de l’utilisateur,
transformée pour être passée à la machine de niveau
supérieur , .....
au sommet de la hiérarchie, l'action est interprétable par
l’application.
Les concepts de l’application descendront la hiérarchie
des machines abstraites jusqu’à la machine physique.
une machine de niveau i peut communiquer directement
avec l’application
E. ADAM – ISTV - UVHC
Architectures d'applications graphiques
Le modèle Entrées-Sorties
●
Vue en couches : Exemple
Application
Machine 4
Machine 3
Machine 2
Machine 1
E. ADAM – ISTV - UVHC
Architectures d'applications graphiques
Le modèle Entrées-Sorties
●
Vue modulaire :
–
pilotes = E/S niveau physique
–
Serveur = gère ressources, indépendant matériel,
dépendant média
–
Serveur d'images abstraites = non dépendant média
–
Serveur de dialogue = dialogue abstrait entre client et
utilisateur, indépendant matériel & média, dépendant
concepts client (application)
–
Application = serveur de concepts, interface
indépendante concept client. Ex gestionnaire de thèmes
E. ADAM – ISTV - UVHC
Architectures d'applications graphiques
Les modèles agents : MVC
●
●
●
●
Le Modèle MVC (Smalltalk [GOLDBERG 84]), est
basé sur trois types d'agents :
– Le modèle : valeurs.
– Les vues : présentées à l'utilisateur.
Représentations du modèle.
– Le contrôleur : gère les entrées de l'utilisateur en
communicant avec le modèle ou les vues.
Communication par envoi de messages
Chaque objet graphique peut être défini par des
agents MVC
Principes utilisés en Java, JSP (appli web), MFC...
E. ADAM – ISTV - UVHC
Architectures d'applications graphiques
Les modèles agents : MVC
Contrôle
États
le
Modèle
ur
Mise à jo
de la vue
des v
ue s
Actio
ns su
r vue
s
fenêtre
M
A
su
n
ctio
dè
o
rm
V
Vues
Vues
Vues
Vues
C
M
min = 0
max = 360
val = 90
V
90
C
camembert
M
V
C
E. ADAM – ISTV - UVHC
chaîne
ateu
s
i
l
i
t
ns u
o
i
t
c
A
r
Architectures d'applications graphiques
Les modèles agents : MVC
●
Java et MVC
–
–
Java propose un ensemble de classes
regroupées dans la JFC (Java Foundation
Classes)
Dans la JFC, la vue et le contrôle sont regroupés
http://www.javaworld.com/javaworld/jw-04-1998/jw-04-howto.html
E. ADAM – ISTV - UVHC
Architectures d'applications graphiques
Les modèles agents : PAC
●
●
Le modèle PAC (Présentation, Abstraction, Contrôle,
[COUTAZ 88]), basé également sur trois types d'agents
Chaque agent élémentaire de ce modèle est constitué :
– d'une image, Présentation
– D'un noyau fonctionnel (Abstraction),
– d'un Contrôle de la communication entre l'Abstraction et
la Présentation, et avec les autres agent PAC.
●
Les agents PAC sont organisés hiérarchiquement.
●
La structure d'une IHM PAC est récursive...
E. ADAM – ISTV - UVHC
Architectures d'applications graphiques
Les modèles agents : PAC
P
A
C
P
A
P
C
A
P
C
E. ADAM – ISTV - UVHC
A
P
C
P
A
C
A
C
Architectures d'applications graphiques
Les modèles des SMA
●
SMA = Systèmes Multi-Agents
–
–
–
–
–
–
Agents Intelligents (communiquant, ...) et non simples
objets comme PAC, MVC, ...
Agents d'Interface,
Agents de Profil,
Agents d'Information
Agents Coordinateurs
...
agents
coordinateurs
base de données
interrogation
internet
insertion /
modification
d'une
information
base de données
agents
d'interfaces
agents
informations
utilisateurs
E. ADAM – ISTV - UVHC
système multi-agent
information
sources externes
Architectures d'applications graphiques
Le modèle n-tiers
●
Applications réparties
–
–
–
●
Interfaces
Application / Applicatifs
Bases de données
Utilisé en application web : workflow,
e-commerce, ...
Application 1
Application 2
Serveur
d'applications
Servlet, jsp, asp, .net, ...
E. ADAM – ISTV - UVHC
Données
Architectures d'applications graphiques
Le modèle n-tiers
●
Des scripts à MVC2...
Script 1
Script 2
Script 3
Serveur
d'applications
Php, perl, ...
E. ADAM – ISTV - UVHC
Données
Architectures d'applications graphiques
Le modèle n-tiers
●
Des scripts à MVC2...
Controleur 1
Vue 1
C2
Modèle
V2
C3
V3
Serveur
d'applications
E. ADAM – ISTV - UVHC
MVC : Servlet, ...
Données
Architectures d'applications graphiques
Le modèle n-tiers
●
Des scripts à MVC2...
Contrôleur
Modèle
Données
Vue 1
V2
V3
MVC2 : STRUTS,
Taperstry, ...
E. ADAM – ISTV - UVHC
Serveur
d'applications
Une Méthode de conception
d'une Interface Homme-Machine
●
●
nombreuses méthodes, nombreux modèles
Questions essentielles :
–
Pourquoi ?
●
quels sont les concepts à représenter ?
–
–
Pour qui ?
●
quels sont les utilisateurs ? TRES IMPORTANT !!!
–
–
Experts, occasionnels, connaissance de l'info, ...
Qui ?
●
–
Se limiter à l'utile, Ni trop, ni trop peu...
Développeur seul ? Ou équipe : Informaticiens ?
Ergonomes? Graphistes ?...
Où ?
●
Sur quel/les machine/s, logiciel/s
–
E. ADAM – ISTV - UVHC
Navigateur, PC, Mac, 1 ou plusieurs machines, PDA, ...
Une Méthode de conception d'une Interface Homme-Machine
Questions essentielles
–
Quand ?
●
–
Comment ?
●
–
Pages web dynamiques, appli seule, applis distribuées,
appli nomade, ...
Combien ?
●
●
Respecter les délais
Permet de limiter l'IHM
Lorsque développeur, client, chef de projet ok
--> Etude des scénarii d'utilisation
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Scenarii d'utilisation
●
Démarche :
–
–
Suite à un premier entretien avec des futurs
utilisateurs
Décrire des scénarios d'utilisation
●
–
Texte simple, Use Case
Demander la validation à des futurs utilisateurs
Gestion
disponibilité produits
client
opérateur saisie
produit
utilise
Saisie commande
opérateur saisie
commande
reçoit des données de
Traitement commande
E. ADAM – ISTV - UVHC
opérateur traitement
commandes
Une Méthode de conception d'une Interface Homme-Machine
Conception préliminaire
●
●
Pour chaque cas, définir grossièrement
l'ensemble des IHM et leurs enchaînements
Dessiner ces IHM en A3 ou copies d'écrans
(si éditeurs IHM)
●
Présenter les enchaînements
●
Critiquer les IHM et les enchaînement
●
Fin lorsque plus de critiques
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception préliminaire
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception préliminaire
●
Penser aux principes de base !!!
–
Accessibilité
●
–
Lisibilité
●
●
–
Limite à 7 items/concepts
Des labels, messages (d'erreurs, ...)
Adaptabilité
●
●
●
–
–
« 3 clics »
Au type de personne (niveau (domaine, informatique),
handicap (visuel, physique), âge, ...)
A l'environnement (plasticité...)
Adaptativité
Retour d'information
Contrôle
●
E. ADAM – ISTV - UVHC
●
Filtrage des entrées
Contrôle de l'application par l'utilisateur principal
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée
●
●
●
●
Utilisation de méthodes « classiques »
De préférence UML (Unified Modelling Language)
– Diagramme d'objets, de classes
– Diagramme de collaboration, de séquence,
d'états-transitions, d'activités
– ...
Réseaux de Petri
...
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée
●
●
●
●
Utilisation de méthodes « classiques »
De préférence UML (Unified Modelling Language)
– Diagramme d'objets, de classes
– Diagramme de collaboration, de séquence,
d'états-transitions, d'activités
– ...
Réseaux de Petri
...
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée : UML
●
Diagramme d'objet
lecture des cardinalités dans le
sens inverse de celui de Merise
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée : UML
note
exemple de
diagramme
de classe
association
(m éra
ét tio
ho n
de s
s)
Diagramme de classes
op
●
milieu de déplacement
généralisations
agrégation
lecture des cardinalités dans le
sens inverse de celui de Merise
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée : UML
●
Diagramme de collaboration
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée : UML
●
Diagramme de séquence
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée : UML
●
Diagramme d'états-transitions
E. ADAM – ISTV - UVHC
Une Méthode de conception d'une Interface Homme-Machine
Conception détaillée : UML
●
Diagramme d'activités
activité
autre activité
La transition est automatique
Desserrer
frein à main
demander l’addition
Symbole optionnel
[else]
Faire la plonge
[prix<=somme dispo]
Appuyer sur
embrayage
Régler la note
Barre de
synchronisation
E. ADAM – ISTV - UVHC
Enclencher 1ère
vitesse
Relâcher
embrayage
Applications graphiques en
Java
Java AWT & SWING
Java 2D
E. ADAM – ISTV - UVHC
Applications graphiques en Java
Java Swing : un exemple simple
●
Création d'une fenêtre
–
–
–
contenant un texte dessiné et un bouton
Taille fenêtre = ¼ taille écran
Fenêtre centrée
●
Utilisation de Java Swing
●
Nombreuses solutions...
E. ADAM – ISTV - UVHC
Applications graphiques en Java
Java Swing : un exemple simple
LanceFenetre
new()
:Toolkit
fen:JFenetre support:Container
new(this)
s = getScreenSize();
setSize()
lePanneau:MonJPanel
new("Ok") bok:JButton
add(bok)
new()
setLocation()
addActionListener(gevt)
add(lePanneau)
SetDefaultCloseOperation
(JFrame.EXIT_ON_CLOSE)
show()
repaint()
repaint()
repaint()
paintComponent(Graphics g)
exit(0)
E. ADAM – ISTV - UVHC
dispose()
gevt:MaGestionEvt
Applications graphiques en Java
Java Swing : un exemple simple
●
Les importations :
–
–
–
●
import java.awt.*; // graphisme de base
import javax.swing.*; // graphisme évolué
import java.awt.event.*; // gestion d'événements de base
« Lanceur » de fenêtre :
public class LanceFenetre
{
public static void main(String[] args)
{
JFenetre fen = new JFenetre();
fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fen.show();
}
}
E. ADAM – ISTV - UVHC
Applications graphiques en Java
Java Swing : un exemple simple
●
La classe JFenetre :
class JFenetre extends JFrame
{
public JFenetre()
{
Toolkit tk = Toolkit.getDefaultToolkit();
Dimension tailleEcran = tk.getScreenSize();
int largeurEcran = tailleEcran.width;
int hauteurEcran = tailleEcran.height;
setTitle("Un exemple simple");
setSize(largeurEcran/4, hauteurEcran/4);
setLocation(largeurEcran*3/8, hauteurEcran*3/8);
MonJPanel lePanneau = new MonJPanel(this);
Container support = getContentPane();
support.add(lePanneau);
}
}
E. ADAM – ISTV - UVHC
Applications graphiques en Java
Java Swing : un exemple simple
●
La classe MonJPanel :
class LePanneau extends JPanel
{
private JFenetre fen = null;
public Contenu(JFenetre _fen)
{
fen = _fen;
setLayout(new BorderLayout());
JButton bOk = new JButton("OK ...");
add(bOk, BorderLayout.SOUTH);
MyListener myListener = new MyListener();
bOk.addActionListener(myListener);
}
E. ADAM – ISTV - UVHC
Applications graphiques en Java
Java Swing : un exemple simple
La classe MonJPanel (suite) :
●
public void paintComponent(Graphics g)
{
super.paintComponent(g);
g.drawString("Mon Texte", 25, 25);
}
class MaGestionEvent implements ActionListener
{
public void actionPerformed(ActionEvent event)
{
fen.dispose();
}
}
}
E. ADAM – ISTV - UVHC