Architecture Logicielle des IHM

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

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

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 Partie de l IHM concrète IHM Pierre NF IHM Partie de l IHM concrète Jacques Partie de l IHM concrète Paul 4

Découpage par Abstraction Partie du NF concret Marie NF IHM Partie de l IHM concrète Jacques Partie de l IHM concrète Pierre Partie de l IHM concrète Paul Eva Partie du NF concret Partie Partie du du NF NF Concret concret Annie

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

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 "Fred" Observer "Arthur" Observable 1. Arthur 2. Martin S enregistre S enregistre Observer "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

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

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

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

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

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

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

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

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 Données à afficher (ANF) Hiérarchie PAC Passerelle Représentation physique Représentation numérique Objets sauvés Réalité cliquable Données numériques localisées (ANF) Terrain augmenté Caméra Localisation Orientation

Exemple de circulation de message hiérarchie PAC M2 Passerelle Représentation physique M2 M2 M2 Représentation numérique M2 M1 M1 Réalité cliquable Evénements souris (stylet)

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

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

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 23

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

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

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

function autoload($class_name) { $name = ""; $indice = strpos($class_name, "Control"); autoload 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 { Controler? $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; Autre Classe Les agents PAC : dans un répertoire à leur nom et en trois classes : NomControl.inc, NomAbstraction.inc et NomPresentation.inc Abstraction? Présentation? include_once "{$name/{$class_name.inc"; Les autres classes sont dans un répertoire «includes», dans un fichier Nom.inc 27

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

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

R2 : Vue multiple Agent vue multiple d'une "œuvre" Environnement Wall Environment Zone Region Preferences Wall Place Route. Movable Object x Static Object Environment Zone Point Region Preferences? Wall Anchor x (m): Place Anchor y (m): Route Mouse x (m): 12. Movable Object Mouse y (m): 15 x Static Object Length (m): Point? Chaleur Anchor x (m): Anchor y (m): Mouse x (m): 12 Mouse y (m): 15 Length (m): 30

R2 : Vue multiple Agent vue multiple d'une "œuvre" Un superagent garantit la cohérence visuelle 31

PAC et MVC : vue multiple A C C V1 C P C P M 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

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

R9 : Ciment syntaxique Agent ciment pour "analyse syntaxique distribuée" Un superagent cimente les actions distribuées superagent ciment agent agent agent 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

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

Exemple de développement : TROC projet France Telecom IIHM (clips, LIG) Analyse des besoins Conception Conception logicielle Evaluation ergonomique Tests utilisateur Tests d intégration Définition du jeu Qui joue Contexte du jeu Règle du jeu Arbre de tâche Tests unitaires Codage 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

Troc : architecture pac (-amodeus)

Troc : architecture pac (-amodeus)

Troc : retour d expérience, reconception 44

Troc : architecture après re-conception 45