Applications Graphiques - Freeemmanuel.adam.free.fr/site/IMG/pdf/APPGR6P.pdf · 2009-04-24 ·...

E. ADAM – ISTV - UVHC

Applications Graphiques

E. ADAM

UVHC - ISTV


Plan

● Architectures d'applications graphiques

● Méthode de conception d'applications graphiques

● Applications graphiques en Java

– Java AWT, Java SWING, Java 2D


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● Le modèle PAC, PAC-AMODEUS, MVC


Le modèle SEEHEIM


Gestion présentation

Contrôle dialogue

Interface avec l'application

Application

Niveau Sémantique de l'interactionpour une indépendance IHM-ApplicationNiveau Syntaxique : contrôle de l'enchaînement des états/actions

Niveau Lexical : représentation physique des objets et prise en compte des actions


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



Le modèle Entrées-Sorties

● Vue en couches : Exemple


Application

Machine 1

Machine 2

Machine 4

Machine 3


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



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...





90

fenêtre

camembert

chaîne

min = 0max = 360val = 90

VC

M VC

M VC

M

Contrôle

Modèle

VuesVuesVuesVues

Actions utilisateur

Actions sur vues

États des vues

Action sur m

odèle

Mise à jour

de la vue



● 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


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...



Les modèles agents : PAC

P

P P

PPP

A

A

AA

A

A

C

C C

C CC



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– ...


agentsd'interfaces

agentscoordinateurs

agentsinformations sources externesutilisateurs

système multi-agentinformation

base de données

internet

base de données

interrogation

insertion /modification

d'uneinformation


Le modèle n-tiers


● Applications réparties– Interfaces– Application / Applicatifs– Bases de données

● Utilisé en application web : workflow, e-commerce, ...

Serveur d'applications

Application 1

Application 2 Données

Servlet, jsp, asp, .net, ...


Le modèle n-tiers


● Des scripts à MVC2...


Script 1

DonnéesScript 2

Script 3

Php, perl, ...


Le modèle n-tiers




Controleur 1

Données

C2

Vue 1

ModèleV2

C3

V3

MVC : Servlet, ...


Le modèle n-tiers




Contrôleur

Vue 1

V2

V3

Modèle Données

MVC2 : STRUTS, Taperstry, ...


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 ?

– Se limiter à l'utile, Ni trop, ni trop peu...– Pour qui ?

● quels sont les utilisateurs ? TRES IMPORTANT !!!– Experts, occasionnels, connaissance de l'info, ...

– Qui ?● Développeur seul ? Ou équipe : Informaticiens ?

Ergonomes? Graphistes ?...– Où ?

● Sur quel/les machine/s, logiciel/s– Navigateur, PC, Mac, 1 ou plusieurs machines, PDA, ...


Questions essentielles

– Quand ?● Respecter les délais

– Comment ?● Pages web dynamiques, appli seule, applis distribuées,

appli nomade, ...

– Combien ?● Permet de limiter l'IHM

● Lorsque développeur, client, chef de projet ok --> Etude des scénarii d'utilisation

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


client

Gestiondisponibilité produits

Saisie commande

Traitement commande

opérateur saisie produit

opérateur saisie commande

opérateur traitement commandes

utilise

reçoit des données de


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




● Penser aux principes de base !!!– Accessibilité

● « 3 clics »– Lisibilité

● Limite à 7 items/concepts● Des labels, messages (d'erreurs, ...)

– Adaptabilité● Au type de personne (niveau (domaine, informatique),

handicap (visuel, physique), âge, ...)● A l'environnement (plasticité...)● Adaptativité

– Retour d'information– Contrôle

● Filtrage des entrées● Contrôle de l'application par l'utilisateur principal



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● ...



Conception détaillée : UML

● Diagramme d'objet


lecture des cardinalités dans le lecture des cardinalités dans le sens inverse de celui de Merisesens inverse de celui de Merise



● Diagramme de classes


généralisations

agrégation

association

opéra

tions

(méth

odes)

exemple de diagramme de classe

note

milieu de déplacement

lecture des cardinalités dans le lecture des cardinalités dans le sens inverse de celui de Merisesens inverse de celui de Merise



● Diagramme de collaboration




● Diagramme de séquence




● Diagramme d'états-transitions




● Diagramme d'activités


activité autre activitéLa transition est automatique

demander l’addition

Régler la noteFaire la plonge

[prix<=somme dispo][else]

Symbole optionnel

Desserrer frein à main

Relâcher embrayage

Appuyer sur embrayage

Enclencher 1ère vitesse

Barre de synchronisation


Applications graphiques en Java

Java AWT & SWINGJava 2D


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...



Java Swing : un exemple simple


LanceFenetre

fen:JFenetre support:Container

lePanneau:MonJPanel

bok:JButton

gevt:MaGestionEvt

:Toolkit

new()

new(this)

new("Ok")

new()

SetDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)

show()

s = getScreenSize();

setSize()

setLocation() add(lePanneau)

add(bok)

addActionListener(gevt)

repaint()repaint()

repaint()

paintComponent(Graphics g)

dispose()exit(0)


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(); } }



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); } }



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); }



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(); } } }


Applications Graphiques - Freeemmanuel.adam.free.fr/site/IMG/pdf/APPGR6P.pdf · 2009-04-24 ·...

Documents

Transcript of Applications Graphiques - Freeemmanuel.adam.free.fr/site/IMG/pdf/APPGR6P.pdf · 2009-04-24 ·...