Vous êtes sur la page 1sur 65

M1 informatique et Miage - option IHM, UNSA

M1 informatique, option IHM, UNSA

Architecture logicielle
Philippe Renevier Philippe.Renevier@unice.fr Avec laide de Laurence Nigay (http://iihm.imag.fr/nigay/)

M1 informatique et Miage - option IHM, UNSA

Architecture, Prambule : MVC


Smalltalk [Goldberg et Robson 1983] Cause : difficults de conception des applications fortement interactives Rponse : modularisation
Model : modlisation (donnes et comportement) View : reprsentation manipulable de l'objet Control : interprtation des entres

M1 informatique et Miage - option IHM, UNSA

MVC : meilleure conception


Sparer dans le code
les donnes (le Modle), La ou les Vues, Le Contrle,

Exemple :
Excel, widgets Swing, bonnes applications web (.Net avec les datasets et les pages aspx, JSP/Servlets/EJBs etc) Jeux avec plusieurs vues camra, Etc

M1 informatique et Miage - option IHM, UNSA

MVC : meilleure conception


Plusieurs vues possibles synchronises, Plusieurs contrles possibles (exemple : clavier, souris, joypad), Donnes isoles (BD, fichiers, etc) Bien entendu :
Ncessit de dfinir des interfaces communes entre le modle, la vue et le contrleur, Java fournit en standard un certain nombre doutils

M1 informatique et Miage - option IHM, UNSA

Les classes Observer / Observable


Observer "Arthur"

Observer "Fred" Observable Observable Observable 1. Arthur


1. Arthur 2. Martin
S enregistre

S enregistre

Observer "Martin"

M1 informatique et Miage - option IHM, UNSA

Observer / Observable

Exemple : un timer
class Test { Timer timer; Test() { timer = new Timer(); Toto toto = new Toto(); timer.addObserver(toto); } public static void main(String[] args) Test t = new Test(); t.timer.run(); } }

toto est couteur du timer

M1 informatique et Miage - option IHM, UNSA

java.util.Observer

Toto est un observateur


class Toto implements java.util.Observer { public void update(Observable o, Object arg) { System.out.println("Temps : " + ((Timer)o).getSeconds() + " secs"); } } Tous les observateurs doivent possder une mthode update()

M1 informatique et Miage - option IHM, UNSA

java.util.Observable

Exemple
class Timer extends java.util.Observable { private long zzz = 1000; Les observables doivent private long zero; tre dune sous-classe de Timer(long zzz) { Observable this.zzz = zzz; } public void run () throws InterruptedException { zero = System.currentTimeMillis(); On prvient les observateurs, a while (true) { appelle update() setChanged(); notifyObservers(new Long(System.currentTimeMillis() - zero)); Thread.sleep(zzz); } } }

M1 informatique et Miage - option IHM, UNSA

Crer ses propres classes dcouteurs


Pour viter les casts, au lieu dutiliser ce systme gnrique il est possible de crer ses propres classes dcouteurs, dvnements Pour cela il faut :
1. Ecrire linterface que devront implmenter les couteurs, 2. Ecrire la classe qui correspond au nouveau type dvnement, 3. Ajouter des mthodes dans lobjet observable pour :
Pouvoir lui ajouter ou enlever des couteurs, Prvenir les couteurs en leur envoyant un objet vnement

M1 informatique et Miage - option IHM, UNSA

10

Exemple avec un timer


On va dfinir un objet timer qui va envoyer des vnements de type TimerEvent ses couteurs (de type TimerListener) Ce timer est en fait un thread qui attend un certain temps avant de lancer un TimerEvent, puis il attend nouveaux, etc

M1 informatique et Miage - option IHM, UNSA

11

Linterface TimerListener.java
package timer; import java.util.*; public interface TimerListener extends EventListener { public void timerTriggered(TimerEvent e); } On peut choisir le nom quon veut ici !

M1 informatique et Miage - option IHM, UNSA

12

La classe TimerEvent.java
package timer; import java.util.*; public class TimerEvent extends EventObject {
public TimerEvent(Object source) { super(source); On peut ajouter dautres paramtres,
mais le premier est obligatoire // ici on peut stocker les // params supplmentaires dans des attributs, etc

M1 informatique et Miage - option IHM, UNSA

13

La classe Timer.java
package timer; import java.awt.event.*; import java.util.*; public class Timer implements Runnable { public static final int DEFAULT_DELAY = 5000; private int delayMs; private transient ArrayList<TimerListener> timerListeners; public Timer() { this(DEFAULT_DELAY); } public Timer(int delayMs) { this.delayMs = delayMs; (new Thread(this)).start(); }

M1 informatique et Miage - option IHM, UNSA

14

La classe Timer.java (suite)


public synchronized void removeTimerListener(TimerListener l) { if ((timerListeners != null) && timerListeners.contains(l)) { timerListeners.remove(l); } } public synchronized void addTimerListener(TimerListener l) { if (timerListeners == null) timerListeners = new ArrayList<TimerListener>(); if (! timerListeners .contains(l)) { timerListeners.add(l); } }

M1 informatique et Miage - option IHM, UNSA

15

La classe Timer.java (suite)


protected void fireTimerTriggered(TimerEvent e) { if (timerListeners != null) { for(TimerListener listener : timerListeners) { listener.timerTriggered(e); } } } public void run () { while (true) try {

Appel de la mthode des couteurs

Thread.sleep(delayMs); fireTimerTriggered(new TimerEvent(this)); } catch (Exception e) { } } }

M1 informatique et Miage - option IHM, UNSA

16

Exemple dcouteur
import timer.*; public class TestTimer { Timer timer1 = new Timer(1000);
Classe interne anonyme dans cet exemple

public TestTimer() { timer1.addTimerListener(new TimerListener() { public void timerTriggered(TimerEvent e) { System.out.println( Une sec sest coule ); } });

M1 informatique et Miage - option IHM, UNSA

17

Dans les autres cas ?


Dans la cas dune vue multiple, nous disposons dun pattern Pour le reste ?
Besoins dun cadre Jusqu 80% du code concerne les interfaces Il faut viser la rutilisation et faciliter la maintenance / lvolution

M1 informatique et Miage - option IHM, UNSA

18

Architecture, Introduction
Constat
Conception dIHM : difficile, donc ncessairement itrative Itrativit implique modifiabilit du logiciel

Savoir-faire artisanal : acceptable pour maquettes, systmes prospectifs Complexit et taille croissantes des IHM Outils de dveloppement des IHM : utiles mais imparfaits
botes outils : niveau dabstraction trop bas, absence de structuration squelettes dapplications : reverse enginering ncessaire pour rutiliser gnrateurs dIHM : le syndrme de lABS (faux sentiment de scurit)

Consquence : besoin de cadre de pense, c.--d. de modles darchitecture

M1 informatique et Miage - option IHM, UNSA

19

Architecture, Plan
Architecture logicielle (aspects gnriques)
dfinition processus et style darchitecture

Modles fonctionnels : Seeheim, Arch Modles agents : MVC, ALV, PAC Modle hybride : PAC-Amodeus

M1 informatique et Miage - option IHM, UNSA

20

1. Architecture : aspects gnriques


Dfinition : ensemble organis dunits de calcul (composants et connecteurs) + description des interactions entre ces units

Composant

Connecteur

Composant

Une architecture exprime ce qui est important Limportance dpend du contexte et du but Contexte (taille, dure de vie, domaine applicatif, culture en qualit logicielle, ...) But
communication (prcision et non ambigut de la description) reverse-engineering dun systme existant valuation (selon des critres qualit)

M1 informatique et Miage - option IHM, UNSA

21

Architecture : aspects gnriques ...


Localisation dans le processus de dveloppement
spcifications externes (IHM) spcifications internes dtailles
utilisateur
Spec. externes

Tension et compromis entre contraintes


centres sur lutilisateur centres sur la technologie

Architecture globale

Compromis

Spec. internes dtailles

Technologie

M1 informatique et Miage - option IHM, UNSA

22

Architecture : aspects gnriques ...


Processus Processus de conception dune architecture : la fois ascendant et descendant mais des tapes parfaitement identifies

M1 informatique et Miage - option IHM, UNSA

23

Architecture : aspects gnriques ...


1. Dcomposition fonctionnelle
F1 F2 F3

2. Dcomposition structurelle selon un style


C1 C2

3. Allocation des fonctions aux composants


C1 F1 F2 C2 F3

M1 informatique et Miage - option IHM, UNSA

24

Architecture : aspects gnriques ...


4. Allocation des composants aux processus
P1 F1 C1 F2 C2 F3

5. Allocation des processus aux processeurs

M1 informatique et Miage - option IHM, UNSA

25

Architecture : aspects gnriques ...


Style darchitecture Exemples
Pipes and filters (pipe-line) Machines abstraites en couches Organisations orients objet

Un style dfinit
un vocabulaire dlments des contraintes de configuration de ces lments une smantique pour interprter une configuration permet lanalyse de proprits

Emergence de patterns ou solutions canoniques

M1 informatique et Miage - option IHM, UNSA

26

Architecture : Modles fonctionnels


Fondement
Noyau fonctionnel

IHM

Seeheim : modle sminal


Contrle du dialogue

API

Interface avec le noyau fonctionnel

Prsentation

Noyau fonctionnel

M1 informatique et Miage - option IHM, UNSA

27

2. Architecture : Modles fonctionnels


Arch : Seeheim rvis
Contrle du dialogue Interface avec le noyau fonctionnel

Prsentation

Logique

Noyau fonctionnel

Physique

Interaction

M1 informatique et Miage - option IHM, UNSA

28

Architecture : Modles fonctionnels


Arch Modifiabilit
rparation smantique protocole haut niveau
Contrle du dialogue

Interface avec le noyau fonctionnel

Prsentation

Portabilit IHM
bote outils abstraite

Noyau fonctionnel

Interaction

Contrleur de dialogue

Extensibilit niveau interaction


couche extension de toolkit

Objets dinteraction ddis

Adaptateur de toolkit

Toolkit

M1 informatique et Miage - option IHM, UNSA

29

ARCH et les Design Patterns


INF et Prsentation (Logique) Adapter pattern : utilis pour permettre ladaptation dune interface une autre Bridge pattern : utilis pour conserver linterface dun programme client tandis que le comportement du programme serveur peut tre chang Faade pattern : utilis pour regrouper une hirarchie complexe en une interface simple depuis lextrieur

M1 informatique et Miage - option IHM, UNSA

30

Architecture : Modles agents


Un systme interactif = une collection dunits de calcul spcialiss (agents) Un agent
a un tat a une expertise est capable dmettre et de ragir des vnements

Un agent en contact direct avec lutilisateur = un interacteur Quelquefois agent = interacteur

M1 informatique et Miage - option IHM, UNSA

31

Architecture : Modles agents ...


Motivations Modularit et paralllisme
conception itrative (modifiabilit) dialogue plusieurs fils mise en uvre des collecticiels

Correspondance avec lapproche objets


catgorie dagents (ractifs) -> classe vnement -> mthode encapsulation : lagent (lobjet) est seul modifier directement son tat mcanisme de sous-classe -> modifiabilit

M1 informatique et Miage - option IHM, UNSA

32

Architecture : Modles agents ...


MVC (Smalltalk) Model : la comptence abstraite de lagent (son NF) View : le rendu perceptible de lagent (son comportement en sortie) Controller : son comportement en entre
V M V M M C V M M M C C V V V

Aspects ralisation Un agent : 3 objets Smalltalk (1 par facette) Hirarchie de Models, de Views, de Controllers

M1 informatique et Miage - option IHM, UNSA

33

Architecture : Modles agents ...


ALV [Hill] Abstraction : le M de MVC View : le V+C de MVC Link : expression des dpendances entre A et V
L A L V2 V1 Aspects ralisation Link = langage ddi contraintes (Rendez-vous) A et V hirarchie dobjets A unique et partage = le NF du systme interactif

M1 informatique et Miage - option IHM, UNSA

34

MVC : problme de hriarchie


Aucune rgle nest spcifie dans lassemblage dagent MVC Cependant : trs utilis

M1 informatique et Miage - option IHM, UNSA

35

PAC : Un modle hirarchis dagent


[Coutaz 88] Trois facettes :
Prsentation (C + V de MVC), le V de ALV Abstraction (M de MVC) Contrle : communication entre agent et expression des dpendances (liaison) entre A et P (le L de ALV)

Hirarchisation :
Arbre : relation pre-fils Heuristique de conception Communication par message

M1 informatique et Miage - option IHM, UNSA

36

Architecture : Modles agents


PAC

Aspects ralisation Aucune recommandation dpend de la plate-forme daccueil 1 agent = 1 module C, 1 objet, 1 objet par facette (comme MVC ou ALV)

M1 informatique et Miage - option IHM, UNSA

37

Un exemple dapplication de PAC

Capturer un objet (ralit cliquable)


Voir les deux vidos : utilisatrice (quipement) et capture (droulement du scnario)

M1 informatique et Miage - option IHM, UNSA

38

Exemple de hirarchie PAC


Donnes afficher (ANF) Hirarchie PAC

Passerelle Reprsentation physique Reprsentation numrique

Objets sauvs Donnes numriques localises (ANF)


Camra Localisation Orientation

Ralit cliquable

Terrain augment

M1 informatique et Miage - option IHM, UNSA

39

Exemple de circulation de message


hirarchie PAC

Passerelle M2 M2
Reprsentation physique

M2

M2
Reprsentation numrique

M2
Evnements souris (stylet)

M1

M1
Ralit cliquable

M1 informatique et Miage - option IHM, UNSA

40

Modle hybride : Modle PAC-Amodeus


Contrleur de Dialogue CD

Objets conceptuels

Hirarchie d'agents PAC

Objets de Prsentation

Adaptateur du Noyau Fonctionnel ANF

Composant Techniques de Prsentation CTP

Objets du domaine

Objets d'interaction

Noyau Fonctionnel NF

Composant Interaction de Bas Niveau CIBN

M1 informatique et Miage - option IHM, UNSA

41

Rgles Heuristiques
Ensemble de rgles heuristiques pour construire la hirachie d'agents PAC du Contrleur de Dialogue dans PAC-Amodeus partir dune maquette Source Modle darchitecture des systmes interactifs, chapitre 7.

M1 informatique et Miage - option IHM, UNSA

42

R2 : Vue multiple
Agent vue multiple d'une "uvre"
Environnement
Wall Environment Zone Region Preferences Wall Place Route . x Movable Object Static Object ? ?

Chaleur

Point Environment Zone Region Preferences Wall Place Route . x Movable Object Static Object Point Anchor x (m): Anchor y (m): Mouse x (m): 12 Mouse y (m): 15 Length (m): Anchor x (m): Anchor y (m): Mouse x (m): 12 Mouse y (m): 15 Length (m):

M1 informatique et Miage - option IHM, UNSA

43

R2 : Vue multiple
Agent vue multiple d'une "uvre" Un superagent garantit la cohrence visuelle
superagent vue multiple

agent vue

agent vue

agent vue

M1 informatique et Miage - option IHM, UNSA

44

PAC et MVC : vue multiple

A C C

V1

P C C

P M

V2

M1 informatique et Miage - option IHM, UNSA

45

Dautres Heuristiques
R1 : fentre = un agent R3 : Palette de concepts
Une palette de classes de concept = un agent Une barre de menu = un agent

R4 : zone ddition
Une zone ddition = un agent Condition : tre suffisamment complexe

R5 : correspondance agent / concept


Un concept complexe = un agent

M1 informatique et Miage - option IHM, UNSA

46

Heuristiques de liaison
R6 : dune fentre une autre
Les deux sont sous le mme agent parent commun

R9 : Ciment syntaxique
Agent ciment pour "analyse syntaxique distribue

M1 informatique et Miage - option IHM, UNSA

47

R9 : Ciment syntaxique
Agent ciment pour "analyse syntaxique distribue" Un superagent cimente les actions distribues
superagent ciment

agent

agent

agent

action de l'utilisateur

action de l'utilisateur

action de l'utilisateur

M1 informatique et Miage - option IHM, UNSA

48

Heuristiques de simplification
R10 : un agent fils unique peut tre regroup avec son pre
Attention la modularit / rutilisation / volution

R11 : un agent dont la fonction est ralise par un objet de la bote outils graphique devient un composant de la prsentation de son pre.

M1 informatique et Miage - option IHM, UNSA

49

Corollaire de R11
Un objet dinteraction non implment par la plate-forme -> un agent

Un espace de travail -> un agent

Un objet mur -> un agent

M1 informatique et Miage - option IHM, UNSA

50

Dlgation smantique
Usage de la dlgation smantique pour performance.
Dans l'exemple du robot mobile, le A de l'agent mur contient la modlisation de mur dans les termes du domaine (mtres, non pas pixels).
Environment Zone Region Preferences Wall . x Place Route Movable Object Static Object Point

Evite les appels au NF pendant le trac du mur.


Systme de cache

Anchor x (m): 12 Anchor y (m): 10 Mouse x (m): 13 Mouse y (m): 2 Length (m): 8.1

Updated Values as the mouse moves Rubber Banding as the wall is resized

M1 informatique et Miage - option IHM, UNSA

51

Exemple de dveloppement : TROC projet France Telecom IIHM (clips, LIG)


Dfinition du jeu
Analyse des besoins Conception Tests dintgration Conception logicielle Tests unitaires Evaluation ergonomique Tests utilisateur

Qui joue Contexte du jeu Rgle du jeu

Arbre de tche

Codage

Note : le cycle de vie dune interface est ici reprsent en V et sans retour sur les tapes prcdentes de manire analytique

M1 informatique et Miage - option IHM, UNSA

52

TROC : analyse des besoins

M1 informatique et Miage - option IHM, UNSA

53

Troc : spcifications exeternes

M1 informatique et Miage - option IHM, UNSA

54

Troc : un exemple darchitecture

M1 informatique et Miage - option IHM, UNSA

55

Troc : architecture pac (-amodeus)

M1 informatique et Miage - option IHM, UNSA

56

Troc : architecture pac (-amodeus)

M1 informatique et Miage - option IHM, UNSA

57

Troc : retour dexprience, reconception

M1 informatique et Miage - option IHM, UNSA

58

Troc : architecture aprs re-conception

M1 informatique et Miage - option IHM, UNSA

59

Approche RAD : les composants


Rapid Application Development Exemples :
Builder dinterface (jbuilder, plugin eclipse, netbeans) Pour les ordinateurs portables du futur Pour les btiments haute technologie

Contexte : les systmes Multi-dispositifs

M1 informatique et Miage - option IHM, UNSA

60

Wearable Computer
Controllable by the user, is always on, always accessible and do not disturbs the user attention. [Mann]

M1 informatique et Miage - option IHM, UNSA

61

Multi-dispositifs Alternatifs
Dispositifs dentre textuelle
Chord Keyboard - Wrist Keyboard - Virtual keyboard

Dispositifs de pointage
Essential Reality P5 Glove

M1 informatique et Miage - option IHM, UNSA

62

Multi-dispositifs Alternatifs
Dispositifs de sortie
Eyeglasses

M1 informatique et Miage - option IHM, UNSA

63

RAD dans les IHMs


Cycle en spiral Bien connu Pour les GUI
Mais aussi pour les systmes multidispositifs en gnral

M1 informatique et Miage - option IHM, UNSA

64

RAD et Programmation Evnementielle


Programmation Evnementielle
<< Lapproche vnementielle intervient principalement dans linterface entre le logiciel et lutilisateur, mais aussi dans la liaison dynamique du logiciel avec le systme, et enfin dans la scurit. >>

M1 informatique et Miage - option IHM, UNSA

65

RAD et Programmation Visuelle


Programmation Visuelle Deux approches :
Base sur le Rendu Graphique (Visual Studio)
Nous aide et simplifie notre tche dans la construction du dialogue homme-machine Approche multi-dispositifs [Phidget]

Base sur le Graphe vnementiel


Intressante pour la perspectives multi-dispositifs car pas forcmment de fonction graphique [ICON, WComp] Films WComp