Une architecture, pourquoi faire ? Architecture...
Transcript of Une architecture, pourquoi faire ? Architecture...
Architecture Logicielle des IHM
Principes de bases
Modèle MVC
Modèle PAC
Avec des transparents repris des cours de l’équipe IIHM du LIG
Une architecture, pourquoi faire ?
• Organiser le code (rangement)
• Simplifier (diviser pour régner)
• Organiser le travail
– Itératif– Itératif
– Parallèle (fusion)
• Modifier (une partie)
• Ré-utiliser
• Notion : modularité, évolutivité, flexibilité
[email protected] IHM, L2I et L2MI
IHM et architecture
• Séparation possible
– Code pour IHM
– Code « Métier »
• Exemple • Exemple
– IHM différente pour une Gestion d’un stock de chaussure ou de bibelots ?
– Linux sous gnome ou kde, le système change-t-il ?
• Objectif : éviter de tout modifier si on change la partie fonctionnel ou la partie IHM
[email protected] IHM, L2I et L2MI
Découpage par Abstraction
• Séparation IHM / NF
– Noyau fonctionnel (ou Functional Core ou partie
Métier)
NF IHM
• Besoin d’interface logicielle pour découpler
(indépendance) des deux parties
NF IHM
NF IHM
Partie de
l’IHM
concrète
Partie de
l’IHM
concrète
Partie de
l’IHM
concrète
Pierre
PaulJacques
Partie de
l’IHM
concrè[email protected] IHM, L2I et L2MI
Découpage par Abstraction
• Besoin d’interface logicielle pour découpler
(indépendance) des deux parties
NF IHMNF IHM
NF IHM
Partie de
l’IHM
concrète
Partie de
l’IHM
concrète
Partie de
l’IHM
concrète
Pierre
PaulJacques
Partie de
l’IHM
concrè[email protected] IHM, L2I et L2MI
Découpage par Abstraction
Partie de
l’IHM
concrète
Pierre
Partie du NF
concret
Marie
NF IHM
concrète
Partie de
l’IHM
concrète
Partie de
l’IHM
concrètePaulJacques
Partie de
l’IHM
concrète
concret
Partie du NF
concretPartie du NF
concret Annie
Eva
Partie du NF
Concret
Architecture : MVC
• Smalltalk [Goldberg et Robson 1979-1983]
• Cause : difficultés de conception des
applications fortement interactives
• Réponse : modularisation• Réponse : modularisation
– Model : modélisation (données et comportement)
– View : représentation manipulable de l'objet
– Control : interprétation des entrées
[email protected] IHM, L2I et L2MI
MVC : meilleure conception
• Séparer dans le code
– les données (le Modèle),
– La ou les Vues,
– Le Contrôle
• V s’abonne à M• V s’abonne à M
• C s’abonne à V
• C modifie M
• Interfaces logicielles
http://sis36.berkeley.edu/projects/streek/talks/mvc/images/talks/mvc/mvc-structure-generic.gif 8
MVC : meilleure conception
• Plusieurs vues possibles synchronisées,
• Plusieurs contrôles possibles (exemple :
clavier, souris, joypad),
• Données isolées (BD, fichiers, etc…)• Données isolées (BD, fichiers, etc…)
• Bien entendu :
– Nécessité de définir des interfaces communes
entre le modèle, la vue et le contrôleur
[email protected] IHM, L2I et L2MI
MVC et Java
utilisation synchrone
• Les classes Observer / ObservableObserver"Arthur"Observer
"Fred"
Observer"Martin"
S ’enregistre
S ’enregistreObservableObservable1. Arthur
Observable1. Arthur2. Martin
Observer / Observable
Exemple : un timer
class Test {
Timer timer;
Test() {
timer = new Timer();
Toto toto = new Toto();
toto est écouteur du timer
timer.addObserver(toto);
}
public static void main(String[] args) {
Test t = new Test();
t.timer.run();
}
}
[email protected] IHM, L2I et L2MI
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() + ((Timer)o).getSeconds()
+ " secs");
}
}Tous les observateurs doivent posséder une méthode update(…)
[email protected] IHM, L2I et L2MI
java.util.Observable
Exemple
class Timer extends java.util.Observable {private long zzz = 1000;private long zero;Timer(long zzz) {
this.zzz = zzz;}public void run () throws InterruptedException {
zero = System.currentTimeMillis();
Les observables doivent être d’une sous-classe de Observable
zero = System.currentTimeMillis();while (true) {
setChanged();notifyObservers (new
Long(System.currentTimeMillis() - zero));
Thread.sleep(zzz);}
}}
On prévient les observateurs, ça appelle update(…)
[email protected] IHM, L2I et L2MI
Limite de MVC
• Dans la cas d’une vue multiple, nous disposons d’un pattern
• Pour le reste ?
– Besoins d’un cadre– Besoins d’un cadre
– Jusqu’à 80% du code concerne les interfaces
– Il faut viser la réutilisation et faciliter la maintenance / l’évolution
– Comment faire collaborer des MVC ensemble(solution pour l’IHM)
[email protected] IHM, L2I et L2MI
Architecture :
Modèles à agents pour l’IHM
• Un système interactif = une collection d’unités de
calcul spécialisés (agents)
• Un agent
– a un état–– a une expertise
– est capable d’émettre et de réagir à des événements
• Un agent en contact direct avec l’utilisateur = un
interacteur
• Quelquefois agent = interacteur
[email protected] IHM, L2I et L2MI
Architecture :
Modèles à agents pour l’IHM ...• Motivations
• Modularité et parallélisme– conception itérative (modifiabilité)
– dialogue à plusieurs fils
– mise en œuvre des collecticiels
• Correspondance avec l’approche à objets• Correspondance avec l’approche à objets– catégorie d’agents (réactifs) -> classe
– événement -> méthode
– encapsulation : l’agent (l’objet) est seul à modifier directementson état
– mécanisme de sous-classe -> modifiabilité
• Exemple : MVC (modulo pb de hierarchie)
[email protected] IHM, L2I et L2MI
PAC : Un modèle hiérarchisé d’agent
• [Coutaz 87]
• Trois facettes :
– Présentation (C + V de MVC), le V de ALV
– Abstraction (M de MVC)
– Contrôle : communication entre agent et expression des – Contrôle : communication entre agent et expression des dépendances (liaison) entre A et P (le L de ALV)
• Hiérarchisation :
– Arbre : relation père-fils
– Heuristique de conception
– Communication par message
[email protected] IHM, L2I et L2MI
Architecture : Modèles à agents
• PAC
Aspects réalisation• Aucune recommandation• dépend de la plate-forme
d’accueil• 1 agent = 1 module C au
minimum, 1 objet ou 1 objet par facette (comme MVC)
[email protected] IHM, L2I et L2MI
Un exemple d’application de PAC
Capturer un objet (réalité cliquable)
Voir les deux vidéos : utilisatrice (équipement) et capture (déroulement du scénario) 19
Exemple de hiérarchie PAC
Hiérarchie PACDonnées à afficher (ANF)
Représentation
Passerelle
Représentation
Données numériques localisées (ANF)
Objets sauvés
CaméraLocalisationOrientation
Terrain augmenté
Réalité cliquable
Représentation physique
Représentation numérique
hiérarchie PAC
Exemple de circulation de message
PasserelleM2
Représentation physique Représentation
numérique
Réalité cliquable
Evénements souris (stylet)
M1’
M2
M2M2’
M2’’
M1
Exemple d’implémentation PAC
• Classe Abstraite pour le controleur
– Implémentation par défaut de certaines méthodes
• Interfaces logicielles pour l’Abstraction et la Présentation
– Possibilité d’héritage
• Communication par message
– Une « String » pour identifier le type de message
– Un objet en attachement (peut être n’importe quoi)
– Traitement : test sur le type de message et traitement adéquate (cast sur l’attachement)
[email protected] IHM, L2I et L2MI
Exemple d’Abstraction et de
Présentation en Javapackage PAC;
public interface Abstraction {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object attachement);
}}
package PAC;
public interface Presentation {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object attachement);
}
[email protected] IHM, L2I et L2MI
Exemple de Controleur en javapackage PAC;
import java.util.ArrayList;
public abstract class Controleur {
protected Abstraction a;
protected Presentation p;
protected ArrayList<Controleur> enfants = new ArrayList<Controleur>();
protected Controleur parent;
public abstract void recoitMessageControleur(String type, Object attachement);
public abstract void recoitMessagePresentation(String type, Object attachement);
public abstract void recoitMessageAbstraction(String type, Object attachement);public abstract void recoitMessageAbstraction(String type, Object attachement);
public void affecteParent(Controleur p) { this.parent = p; }
public void ajouteEnfant(Controleur arg0) {
if (! enfants.contains(arg0)) {
enfants.add(arg0);
arg0.affecteParent(this);
}
}
protected void dispatchDownMessage(String type, Object att) {
for (Controleur c : enfants) { c.recoitMessageControleur(type, att); }
}
protected void dispatchUpMessage(String type, Object att) {
if (parent != null) parent.recoitMessageControleur(type, att);
}
}
24
PAC, MVC, HMVC
• PAC vs MVC
– Communication centralisée dans le C
– Isolement A et P
• PAC vs HMVC• PAC vs HMVC
– Hierarchical-Model-View-Controller (HMVC)
– PAC : 1987 ; HMVC : 2000
– Connexion directe V – M dans HMVC
option IHM, L2I et L2MI [email protected]
Php et MVC :
liste extraite de wikipédia• http://en.wikipedia.org/wiki/Model-View-Controller• Agavi is a PHP5 application framework that focuses on sustained quality and correctness.
• akaikiwi A PHP 5 lightweight and fast MVC framework with ORM, scaffolding, and more.
• Alloy A lightweight REST-focused modular Hierarchical MVC PHP 5.3 framework
• CakePHP A web application framework modeled after the concepts of Ruby on Rails.
• CodeCharge Studio is a visual rapid application development environment for web-based database driven application development. Code Charge Studio places emphasis on code generation technology to provide ASP.NET, PHP, JSP, Servlets, ColdFusion and Perl language support.
• CodeIgniter A simple, light, fast, open source MVC framework for building websites using PHP.
• Drupal An open source content management system that uses MVC for its add-ons called modules.
• eddy a lightweight, open-source PHP 5.3 MVC web application framework
• Exponent CMS A Content Management System web application framework using its own MVC framework modeled after Rails.
• eZ Publish Based on eZ Components is an object-oriented web application framework written in PHP that separates its functionality into several abstraction layers, • eZ Publish Based on eZ Components is an object-oriented web application framework written in PHP that separates its functionality into several abstraction layers, following a strict MVC approach.
• Feng Office is an open source MVC Framework Extranet that allows a group of geographically distributed people to collaborate by sharing information over the Internet.
• Joomla! v1.5.x is an open source content management system that employs the MVC model for its extensions, called components and modules.
• Kohana v2.x is an open source MVC framework, while v3.x is HMVC (both supported).
• LightVC is a lightweight MVC framework without the model. This decoupling allows any model or object relation mapping (ORM) tool to be used, including none at all if one is not needed. Released under the FreeBSD license.
• MODx A full-featured open source OOP MVC/ORB xPDO-based CMS.
• MooVC An Object Oriented MVC Framework for PHP.
• Odin Assemble A Small footprint PHP based MVC framework.
• OpenCart Shopping cart which is fully based on MVC framework.
• phpXCore A MVC design pattern based PHP content management framework compatible with PHP4 and PHP5.
• PRADO Framework An open source PHP5 framework for creating professional web applications.
• PureMVC A framework for PHP.
• Qcodo An open-source PHP 5 web application framework.
• Recess An open-source framework focused on RESTful API and advanced language features
• SilverStripe Contains a fully fledged PHP 5.2 ORM/MVC framework focused on building websites.
• Switch board (framework) A PHP 5 MVC framework with routing.
• Spawn Framework An open source PHP5/OOP MVC framework
• Symfony Framework A PHP 5 MVC framework modeled after the concepts of Ruby on Rails.
• Yii An open source, object-oriented, high-performance component-based PHP web application framework.
• Zend Framework An open-source PHP 5-based framework featuring an MVC layer and a broad-spectrum of loosely coupled components.
option IHM, L2I et L2MI [email protected]
Exemple d’Abstraction et de
Présentation en Phpinterface Abstraction {
public function affecteControleur(Control $c);public function recoitMessage($type, $attachement);
}
interface Presentation {public function affecteControleur(Control $c);public function recoitMessage($type, $attachement);public function getView($type, $option);
public function getUserEntries(); // pour reception des formulaires...
}
[email protected] IHM, L2I et L2MI
Exemple de Controleur en Phpabstract class Control {
protected $a; protected $p; protected $enfants = array(); protected $parent;
abstract public function recoitMessageControleur($type, $attachement="");
abstract public function recoitMessagePresentation($type, $attachement="");
abstract public function recoitMessageAbstraction($type, $attachement="");
abstract public function getView($type);
public function affecteParent(Control $p) { $this->parent = $p; }
public function ajouteEnfant(Control $arg0) {
if (! in_array($arg0, $this->enfants))
{ $this->enfants[] = $arg0; $arg0->affecteParent($this); }
}}
protected function dispatchDownMessage($type, $att) {
foreach ($this->enfants as $c) { $c->recoitMessageControleur($type, $att); }
}
protected function dispatchUpMessage($type, $att) {
if ($this->parent != null) $this->parent->recoitMessageControleur($type, $att);
}
public function save() { // pour sauvegarde dans une session... Et avoir accès aux facettes
$_SESSION[get_class($this)] = $this;
if ($this->a) $_SESSION[get_class($this->a)] = $thi s->a;
if ($this->p) $_SESSION[get_class($this->p)] = $thi s->p;
foreach ($this->enfants as $c) { $c->save(); }
}
}
28
Utilisation de PAC en Php
• La hiérarchie PAC créée une fois ($_SESSION)
• Traitement des informations préalables (formulaires, liens, etc.)
– recoitMessage…– recoitMessage…
• Demande de page à l’agent de plus haut niveau
– getView…
– Ce controleur « racine » collecte les vues pour les afficher (echo)
option IHM, L2I et L2MI [email protected]
Règles Heuristiques
• Ensemble de règles heuristiques pour
construire la hiérachie d'agents PAC à partir
d’une maquette
– À l’origine dans le Contrôleur de Dialogue dans– À l’origine dans le Contrôleur de Dialogue dansPAC-Amodeus
• Source Modèle d’architecture des systèmes
interactifs, chapitre 7.
[email protected] IHM, L2I et L2MI
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
?
Place
Route
Movable Object .
Wall
Wall
Environment Zone Region Preferences
ChaleurEnvironnement
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
?
Place
Route
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
Wall
Environment Zone Region Preferences
[email protected] IHM, L2I et L2MI
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
• Un superagent garantit la cohérence visuelle
superagent vue multiplevue multiple
agent vue
agent vue
agent vue
[email protected] IHM, L2I et L2MI
PAC et MVC : vue multiple
CA
C V1
CP
CP
MV2
D’autres Heuristiques
• R1 : fenêtre = un agent
• R3 : Palette de concepts
– Une palette de classes de concept = un agent
– Une barre de menu = un agent– Une barre de menu = un agent
• R4 : zone d’édition
– Une zone d’édition = un agent
– Condition : être suffisamment complexe
• R5 : correspondance agent / concept
– Un concept complexe = un agent
[email protected] IHM, L2I et L2MI
Heuristiques de liaison
• R6 : d’une fenêtre à une autre
– Les deux sont sous le même agent parent
commun
• R9 : Ciment syntaxique• R9 : Ciment syntaxique
– Agent ciment pour "analyse syntaxique
distribuée”
[email protected] IHM, L2I et L2MI
R9 : Ciment syntaxique
• Agent ciment pour
"analyse syntaxique
distribuée"
• Un superagent cimente
les actions distribuées
superagent ciment
agent agentagent
action de l'utilisateur
action de l'utilisateur
action de l'utilisateur
Heuristiques de simplification
• R10 : un agent fils unique peut être regroupé
avec son père
– Attention à la modularité / réutilisation /
évolutionévolution
• R11 : un agent dont la fonction est réalisée par
un objet de la boîte à outils graphique devient
un composant de la présentation de son père.
[email protected] IHM, L2I et L2MI
Corollaire de R11
• Un objet d’interaction non implémenté par la
plate-forme -> un agent
Un espace de travail -> un agent
Un objet mur -> un agent
[email protected] IHM, L2I et L2MI
Exemple de développement : TROC
projet France Telecom – IIHM (clips, LIG)
• Définition du jeu
– Qui joue
– Contexte du jeu
– Règle du jeu
Analyse des besoins
Conception
Tests utilisateur
Evaluation ergonomique
• Arbre de tâcheConception logicielle
Codage
Tests unitaires
Tests d’intégration
Note : le cycle de vie d’une interface est ici représenté en V et sans retour sur les étapes précédentes de manière analytique…
TROC : analyse des besoins
Troc : spécifications exeternes Troc : un exemple
d’architecture
42option IHM, L2I et L2MI
Troc : architecture pac (-amodeus) Troc : architecture pac (-amodeus)
Troc : retour d’expérience, reconception
45
Troc : architecture après re-conception
[email protected] IHM, L2I et L2MI