Architecture Logicielle pour les

IHM
C. Dumas

Cedric.Dumas@emn.fr
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partage des Conditions Initiales à l'Identique 2.0 France License
 Introduction
• Constat
– Conception d’IHM : difficile, donc nécessairement itérative
– Itérativité implique modifiabilité du logiciel
• Savoir-faire artisanal : acceptable pour maquettes, systèmes
prospectifs (pas de besoin liés à la mise en production)
• Complexité et taille croissantes des IHM
– collecticiels, multimodalités, RV, RA, Universal Access, etc...
• Outils de développement des IHM : utiles mais imparfaits
– boîtes à outils : niveau d’abstraction trop bas, absence de
structuration
– squelettes d’applications : rétro-conception (reverse
engineering) nécessaire pour réutiliser
– générateurs d’IHM : le syndrôme de l’ABS (faux sentiment
de sécurité)
• Conséquence : besoin de cadre de pensée, c.-à-d. de modèles
d’architecture
 Architecture Conceptuelle
• Sert à la (retro)conception
 Architecture Logicielle
• IEEE 1471 standard (2000)
« The fundamental organization of a system embodied in its components, their
relationships to each other and to the environment, and the principles guiding its
design and evolution »
• Autrement dit :
– Une architecture : ensemble organisé de composants + des relations + des principes
directeurs
– Une architecture est le résutat d’un processus
– L’environnement : participants (culture en qualité logicielle, outils, requis
commercial…
– Finalité d’une architecture
• communication (précision et non ambiguïté de la description)
• rétro-conception d’un système existant
• évaluation (selon des critères qualité)

• Dictinction entre architecture et description d’architecture

Maier (2001) « architecture is a concept of a system »
– Une architecture est un concept d’un système : elle existe bien que non observable
– Une description d’architecture : représentation de ce concept pour une
finalité donnée. C’est une entité concrète.
 Architecture Logicielle
• Bass (1998)
« The architecture of a computing system is a set of structures which
comprise software components, the externally visible properties of these
components and the relationships among them »
• Autrement dit :
– Plusieurs points de vue sur une architecture (cf.Architecture en bâtiment)
Un point de vue : une structure, sa représentation pour une finalité
donnée
– Propriétés d’un composant : description du comportement attendu
• Services fournis ou requis,Performance,Protocole de communication
– Propriétés observables de l’extérieur : un composant est
• une unité d’abstraction, une unité de déploiement
• un service, un module, un bibliothèque, un processus, un procédure, un objet, un
agent, etc., sont des composants
– Relations -> connexion -> connecteurs (appel procédural, RMI, socket,
etc.)
Connecteur
Composant Composant
 Architecture Conceptuelle
• Sert à la (retro)conception
 Architecture Conceptuelle
• Sert à la (retro)conception
• Séparation entre la sémantique et son
utilisation
– portabilité (device independant)
– réutilisabilité
– plusieurs interfaces (flexibilité, plateformes,
etc)
– personnalisation(designer, utilisateur)
• Communication entre l’application et la
présentation : contrôleur de dialogue
– 3 composants maintenant...
 le modèle de Seeheim 1985

(niveau sémantique) (niveau syntaxique) (niveau lexical)

Application

Application Dialog Presentation

User
Interface Model Control Component

bypass
vue de la sémantique
qui est fournie pour
l’interface
• Modélise les régule les communications
interfaces jusque 1985 apparence de
entre l’application et l’interface l’interface et E/S
•optimisation
Pas de du séparation
feedback en composant utilisateur
logiques
etours visuels, dessins et implémentation
à main levée, etc)
 modèle Arch - Slinky 1992

• Plus de couches
• Plus conceptuel régulation des tâches
séquencement de l’interaction
modèle•utilisateur
liés au modèle de tâches
Bien adapté pour la structure
versus modèle système fonctionnelle
adaptation aux toolkits de la plateforme visée
réorganisation des données Awt, Xvt, Swing, Views
Semantic enhancement
Contrôleur de Dialogue
Possibly adapted Domain Objects Logical Presentation Objects

transfert de
Adaptateur modifiable
structure de données
Présentation
• Functionnal Core Adapter portable • Logical Presentation Component
(Virtual Application Layer) explicites
(versus efficacité) (Virtual Toolkit)

Domain Objects Physical Interaction Objects

presentation
Domaine application widgets Interaction
• Application Functionnal Core look and feel • Interaction Toolkit Component
noyau fonctionnel • Physical Presentation Component
• Domain-specific component
 Agent Based Models
• Modèles basés sur des agents
• Système interactif = ensemble d’unités
computationelles (agents)
• Agent
– capacité à réagir et à gérer des événements
– caractérisé par un état
– possède une capacité d’expertise (rôle)
– relation utilisateur interacteur / objet d’interactif
• Système interactif = agents réactifs (<> agents
cognitifs)
MVC, PAC, Clock, C2, etc...
• Modèle même principe que les précédents, avec une
granularité plus fine (par collections)
 modèle MVC 1987 (Smalltalk)

représentation graphique

View
ouput devices

Model
input devices user
Controller
application semantics
noyau fonctionnel

gestion de l’interaction
en entrée
 PAC 1987 (Joëlle Coutaz)

• Presentation combine Input/Output (MVC)

• Control pilote le dialogue et la cohérence
entre le modèle et sa représentation (MVC)
• Communication entre agents (MVC)
• Pas lié à un environnement de programmation
(MVC), approche objet tout de même
• Plus conceptuel encore (moins dépendant de
l’implémentation) que MVC
Abstraction Presentation

Control
 MVC en Java ?
• JTextField (textField)
• JTextArea (textList)
+JScrollPane

textField.addActionListener(new ActionListener()
{ public void actionPerformed(ActionEvent e) {
// Append the textField's text to textList
textList.append(textField.getText());
textList.append("\n");
textField.setText(""); // Reset the textField }
}); // ENTER key causes an ActionEvent
 MVC en Swing
• JTextField (textField)
• JTextArea (textList)
• JTextArea (avgField)
• solutions ?
– listener textField vers avgField
– listener textList vers avgField
– listener contenant la mise à jour des deux
éléments textList et avgField
– MVC dans tout ça ? où est le modèle ?
MVC rules
 listView
public class ListView extends JTextArea
{
public ListView(int n) { ... }
public void changed (Vector v) {
// copie du vector dans le JTextArea }
}
 IntVectorModel
public class IntVectorModel {
protected Vector data = new Vector();
// gestion de la liste (addElement, getData, etc...)
public void addElement(int i)
{ data.addElement(new Integer(i));
fireChange();
}
public Vector getData()
{ return data; }
public class IntVectorModel { ...
protected EventListenerList changeListeners = new EventListenerList();

// gestion des événements

public void addChangeListener(ChangeListener x) { ... }
public void removeChangeListener(ChangeListener x) {...}
protected void fireChange() {
// Create the event:
ChangeEvent c = new ChangeEvent(this);
// Get the listener list
Object[] listeners = changeListeners.getListenerList();
// Process the listeners last to first
for (int i = listeners.length...) { ...
listeners[j].stateChanged(c); ... }
}
 IntVectorToListviewAdaptor
private static class IntVectorToListviewAdaptor
implements ChangeListener
{ IntVectorModel model;
ListView view;

public IntVectorToListviewAdaptor( IntVectorModel m,

ListView v) { model = m; view = v; }

public void stateChanged(ChangeEvent e)

{ view.changed(model.getData()); }
}
 La fenêtre principale
public class FirstMVC extends JFrame {
[...]
ListView listView = new ListView(5); // vue
TextField avgView = new TextField(10); // vue
IntVectorModel model = new IntVectorModel(); // modèle
TextField controller = new TextField(10); // contr.

dans le constructeur FirstMVC() ...

IntVectorToListviewAdaptor MV2 = new
IntVectorToListviewAdaptor(model,listView);
model.addChangeListener(MV2);
 et dans le constructeur...
JPanel controlPanel = new JPanel();
controlPanel.add(controller);

JPanel viewPanel = new JPanel();

viewPanel.add(avgView);
viewPanel.add(ListView);
 MVC en Java
• Modèle de façon générale :
Observer/Observable dans java.util
• MVC dans Swing :
– JComponent = model + delegate
– delegate = V + C
 Observer Design Pattern
• One to many
Premiers éléments de réponse
à la question 1
 Découpage de la question 1
• 2 vues
– JLabel
– JSlider
• 7 contrôleurs
– 6 JButtons
– JSlider
• 1 modèle
– Gestion d’un entier
 découpage

JButton
JLabel

JButton
Modèle
JSlider

JSlider
 découpage
Observer
Observable Update()

JButton Attach(Observer)
Notify()
JLabel

JButton
Modèle
setValeur(int) JSlider
getValeur()
valeur
JSlider
 Exo1Model
import java.util.Observable;

public class Exo1Model extends Observable {

public int valeur=0;

static int MIN_VALUE=0;

static int MAX_VALUE=999;

public Exo1Model() { valeur = 0; }

public void setValeur(int x) {

if (x < MIN_VALUE) x=MIN_VALUE;
if (x > MAX_VALUE) x=MAX_VALUE;

valeur = x;
// notification des modifications dans la classe Observer
setChanged();
notifyObservers();
}

public int getValeur() { return valeur; }

}
 JLabel (vue 1)
public class Exo1Vue extends JLabel implements Observer {

public Exo1Vue(String text) {

super(text);
}

public void setVue(int text){

setText(String.valueOf(text));
}

public void update(Observable obs,Object obj)

{
Exo1Model mod = (Exo1Model) obs;
// prendre la bonne habitude de tester la compatibilité des types
if (obs instanceof Exo1Model) setVue(mod.getValeur());
}
}
 JSlider (vue 2)
public class Exo1ControllerSlider extends JSlider implements Observer {

// setValue et getValue sont les accesseurs de JSlide pour récupérer/modifier la valeur du slider

Exo1Model model = null;

public Exo1ControllerSlider(Exo1Model mod) {

model = mod;

// initialisation des valeurs du slide

[…]

// gestion d'évènements
addChangeListener( new ChangeListener() {
public void stateChanged(ChangeEvent chev) {
model.setValeur(getValue());
};
});

public void update(Observable obs,Object obj)

{
Exo1Model mod = (Exo1Model) obs;
// prendre la bonne habitude de tester la compatibilité des types
if (obs instanceof Exo1Model) setValue(mod.getValeur());
}
}
 JButton (controlleur 1)
public class Exo1ControllerBoutons extends JButton {

int base_value=0;
Exo1Model model=null;

void setBase(int i) { base_value=i; }

int getBase() { return base_value; }

public Exo1ControllerBoutons(Exo1Model mod,int bv) {

model=mod;

// base_value contient le pas de l'incrément des boutons

setBase(bv);

// on construit le titre
String base_str = Integer.toString(bv);
if (bv > 0) base_str = "+"+base_str;
setText(base_str);

addActionListener( new ActionListener() {

public void actionPerformed(ActionEvent e) {
model.incremente(base_value);
}
});

}
class Exo1Fenetre extends JFrame{

Exo1Model model = new Exo1Model();

public Exo1Fenetre(){

setTitle("TP MVC - Exo1");

JPanel p = new JPanel();
p.setLayout(new BorderLayout());
getContentPane().add(p);

// initialisation des boutons

JPanel q = new JPanel();
q.setLayout(new GridLayout (3,2));
p.add(q,BorderLayout.WEST);
// boutons des unités
Exo1ControllerBoutons cb;
cb = new Exo1ControllerBoutons(model,1);
q.add(cb);
[…]

// initialisation de la vue
Exo1Vue vue = new Exo1Vue("0");
p.add(vue,BorderLayout.CENTER);

// intialisation du slider
Exo1ControllerSlider cslider = new Exo1ControllerSlider(model);
p.add(cslider,BorderLayout.EAST);

// ajout des connections entre le modèle et les vues pour que ces dernières soient mises à jour
model.addObserver(cslider);
model.addObserver(vue);
}
}