Architecture Logicielle pour les IHM C. Dumas [email protected] contrat Creative Commons...
-
Upload
yvonne-leclercq -
Category
Documents
-
view
109 -
download
1
Transcript of Architecture Logicielle pour les IHM C. Dumas [email protected] contrat Creative Commons...
Architecture Logicielle pour les IHM
C. Dumas
[email protected] 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’architectureMaier (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.)
Composant ComposantConnecteur
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...
• Modélise les interfaces jusque 1985
• Pas de séparation en composant logiques et implémentation
le modèle de Seeheim 1985
PresentationComponent
DialogControl
ApplicationInterface Model
User
App
lica
tion
(niveau sémantique) (niveau syntaxique) (niveau lexical)
régule les communicationsentre l’application et l’interface
apparence del’interface et E/S
utilisateur
User
vue de la sémantiquequi est fournie pour
l’interface
optimisation du feedback(retours visuels, dessins à main levée, etc)
bypass
transfert destructure de données
explicites
modèle Arch - Slinky 1992 • Plus de couches• Plus conceptuel• Bien adapté pour la structure fonctionnelle
Domaine• Application Functionnal Core• Domain-specific component
Adaptateur• Functionnal Core Adapter(Virtual Application Layer)
Contrôleur de Dialogue
Présentation• Logical Presentation Component
(Virtual Toolkit)
Interaction• Interaction Toolkit Component
• Physical Presentation Component
Domain Objects
Logical Presentation ObjectsPossibly adapted Domain Objects
presentationwidgets
look and feelapplication
noyau fonctionnel
régulation des tâchesséquencement de l’interaction
liés au modèle de tâches
Physical Interaction Objects
modifiableportable
(versus efficacité)
modèle utilisateur versus modèle systèmeréorganisation des données
Semantic enhancement
adaptation aux toolkits de la plateforme viséeAwt, Xvt, Swing, Views
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)
Model
View
Controller
ouput devices
input devices user
application semanticsnoyau fonctionnel
gestion de l’interaction en entrée
représentation graphique
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
listViewpublic class ListView extends JTextArea
{
public ListView(int n) { ... }
public void changed (Vector v) {
// copie du vector dans le JTextArea }
}
IntVectorModelpublic 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 principalepublic class FirstMVC extends JFrame { [...]ListView listView = new ListView(5); // vueTextField avgView = new TextField(10); // vueIntVectorModel model = new IntVectorModel(); // modèleTextField 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
JButton
JSlider
Modèle
JLabel
JSlider
découpage
JButton
JButton
JSlider
Modèle
setValeur(int)getValeur()
valeur
JSlider
JLabel
Observer
Update()Observable
Attach(Observer)Notify()
Exo1Modelimport 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 ObserversetChanged();
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); }}