Architecture Logicielle des IHM -...

Philippe.Renevier@unice.fr

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

– Parallèle (fusion)

• Modifier (une partie)

• Ré-utiliser

• Notion : modularité, évolutivité, flexibilité

2 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

IHM et architecture

• Séparation possible – Code pour IHM

– Code « Métier »

• 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

3 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

Découpage par Abstraction

• Séparation IHM / NF

– Noyau fonctionnel (ou Functional Core ou partie Métier)

• 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

Paul Jacques

Partie de l’IHM

concrète 4 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

Découpage par Abstraction

NF IHM

Partie de l’IHM

concrète

Partie de l’IHM

concrète

Partie de l’IHM

concrète

Pierre

Paul Jacques

Partie de l’IHM

concrète

Partie du NF concret

Partie du NF concret

Partie du NF concret

Marie

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

– Model : modélisation (données et comportement)

– View : représentation manipulable de l'objet

– Control : interprétation des entrées

6 Philippe.Renevier@unice.fr option 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

• C s’abonne à V

• C modifie M

• Interfaces logicielles

http://sis36.berkeley.edu/projects/streek/talks/mvc/images/talks/mvc/mvc-structure-generic.gif 7

MVC et Java utilisation synchrone

• Les classes Observer / Observable Observer

"Arthur"

Observer

"Martin"

Observer

"Fred"

S ’enregistre

S ’enregistre Observable

Observable 1. Arthur

Observable 1. Arthur

2. Martin

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

9 Philippe.Renevier@unice.fr option 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()

+ " secs");

}

}

Tous les observateurs doivent posséder

une méthode update(…)

10 Philippe.Renevier@unice.fr option 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();

while (true) {

setChanged();

notifyObservers(new

Long(System.currentTimeMillis()

- zero));

Thread.sleep(zzz);

}

}

}

Les observables doivent

être d’une sous-classe de

Observable

On prévient les observateurs, ça

appelle update(…)

11 Philippe.Renevier@unice.fr option 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

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

12 Philippe.Renevier@unice.fr option 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

13 Philippe.Renevier@unice.fr option 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 – catégorie d’agents (réactifs) -> classe – événement -> méthode – encapsulation : l’agent (l’objet) est seul à modifier directement

son état – mécanisme de sous-classe -> modifiabilité

• Exemple : MVC (modulo pb de hierarchie)

14 Philippe.Renevier@unice.fr option 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 dépendances (liaison) entre A et P (le L de ALV)

• Hiérarchisation : – Arbre : relation père-fils

– Heuristique de conception

– Communication par message

15 Philippe.Renevier@unice.fr option 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)

16 Philippe.Renevier@unice.fr option 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) 17

Exemple de hiérarchie PAC

Hiérarchie PAC Données à afficher

(ANF)

Données numériques

localisées (ANF)

Objets

sauvés

Caméra

Localisation

Orientation

Terrain

augmenté

Réalité

cliquable

Représentation

physique

Passerelle

Représentation

numérique

Représentation

physique Représentation

numérique

hiérarchie PAC

Réalité

cliquable

Exemple de circulation de message

Passerelle

Evénements

souris (stylet) M1’

M2

M2

M2

M2’ 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)

20 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

Exemple d’Abstraction et de Présentation en Java

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

}

21 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

Exemple de Controleur en java package 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 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);

}

}

22

PAC, MVC, HMVC

• PAC vs MVC

– Communication centralisée dans le C

– Isolement A et P

• PAC vs HMVC

– Hierarchical-Model-View-Controller (HMVC)

– PAC : 1987 ; HMVC : 2000

– Connexion directe V – M dans HMVC

option IHM, L2I et L2MI 23 Philippe.Renevier@unice.fr

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,

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 24 Philippe.Renevier@unice.fr

Exemple d’Abstraction et de Présentation en Php

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

}

25 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

Exemple de Controleur en Php abstract 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)] = $this->a;

if ($this->p) $_SESSION[get_class($this->p)] = $this->p;

foreach ($this->enfants as $c) { $c->save(); }

}

} 26

autoload function __autoload($class_name) {

$name = "";

$indice = strpos($class_name, "Control");

if ($indice === 0) { include_once "PAC/Control.inc"; return; }

else if ($indice) { $name = substr($class_name, 0, strlen($class_name)-7); }

else {

$indice = strpos($class_name, "Abstraction");

if ($indice === 0) { include_once "PAC/Abstraction.inc"; return; }

else if ($indice) { $name = substr($class_name, 0, strlen($class_name)-11); }

else {

$indice = strpos($class_name, "Presentation");

if ($indice === 0) { include_once "PAC/Presentation.inc"; return; }

else if ($indice) { $name = substr($class_name, 0, strlen($class_name)-12); }

else { include_once "includes/{$class_name}.inc"; return; }

}

}

include_once "{$name}/{$class_name}.inc";

}

option IHM, L2I et L2MI 27 Philippe.Renevier@unice.fr

Controler ?

Abstraction ?

Présentation ?

Autre Classe…

Les agents PAC : dans un répertoire à leur nom et en

trois classes : NomControl.inc,

NomAbstraction.inc et NomPresentation.inc

Les autres classes sont dans un répertoire « includes »,

dans un fichier Nom.inc

Utilisation de PAC en Php

• La hiérarchie PAC créée une fois ($_SESSION)

• Traitement des informations préalables (formulaires, liens, etc.) – 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 28 Philippe.Renevier@unice.fr

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 PAC-Amodeus

• Source Modèle d’architecture des systèmes interactifs, chapitre 7.

29 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

R2 : Vue multiple

• Agent vue multiple d'une "œuvre"

?

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

Wall

Environment Zone Region Preferences

?

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

Chaleur Environnement

30 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

R2 : Vue multiple

• Agent vue multiple d'une "œuvre"

• Un superagent garantit la cohérence visuelle

31 Philippe.Renevier@unice.fr option IHM, L2I et L2MI

PAC et MVC : vue multiple

C

A

C

P

C

P

M

C V1

V2

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

• R4 : zone d’édition – Une zone d’édition = un agent

– Condition : être suffisamment complexe

• R5 : correspondance agent / concept – Un concept complexe = un agent

33 Philippe.Renevier@unice.fr option 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

– Agent ciment pour "analyse syntaxique distribuée”

34 Philippe.Renevier@unice.fr option 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

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

36 Philippe.Renevier@unice.fr option 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

37 Philippe.Renevier@unice.fr option 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

• Arbre de tâche

Analyse des besoins

Conception

Conception logicielle

Codage

Tests unitaires

Tests d’intégration

Tests utilisateur

Evaluation

ergonomique

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

41 option IHM, L2I et L2MI

Troc : architecture pac (-amodeus)

Troc : architecture pac (-amodeus)

Troc : retour d’expérience, reconception

44

Troc : architecture après re-conception

45 Philippe.Renevier@unice.fr option IHM, L2I et L2MI