Architecture%20Logicielle%20pour%20les%20IHM

1
Architecture Logicielle pour les IHM

• C. Dumas

Cedric.Dumas_at_emn.frcontrat Creative Commons
Paternité-Pas d'Utilisation Commerciale-Partage
des Conditions Initiales à l'Identique 2.0 France
License
2
Introduction

• Constat
• Conception dIHM 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 dabstraction trop bas,
  absence de structuration
• squelettes dapplications rétro-conception
  (reverse engineering) nécessaire pour réutiliser
• générateurs dIHM le syndrôme de lABS (faux
  sentiment de sécurité)
• Conséquence besoin de cadre de pensée, c.-à-d.
  de modèles darchitecture

3
Architecture Conceptuelle

• Sert à la (retro)conception

4
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 dun processus
• Lenvironnement participants (culture en
  qualité logicielle, outils, requis commercial
• Finalité dune architecture
• communication (précision et non ambiguïté de la
  description)
• rétro-conception dun système existant
• évaluation (selon des critères qualité)
• Dictinction entre architecture et description
  darchitecture Maier (2001) architecture is a
  concept of a system
• Une architecture est un concept dun système
  elle existe bien que non observable
• Une description darchitecture représentation
  de ce concept pour une finalité donnée. Cest une
  entité concrète.

5
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 dun composant description du
  comportement attendu
• Services fournis ou requis,Performance,Protocole
  de communication
• Propriétés observables de lextérieur un
  composant est
• une unité dabstraction, 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 -gt connexion -gt connecteurs (appel
  procédural, RMI, socket, etc.)

Connecteur
Composant
Composant
6
Architecture Conceptuelle

• Sert à la (retro)conception

7
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 lapplication et la
  présentation contrôleur de dialogue
• 3 composants maintenant...

8
le modèle de Seeheim 1985
(niveau sémantique) (niveau syntaxique) (niveau
lexical)
Presentation Component
DialogControl
ApplicationInterface Model
User
User
Application

• Modélise les interfaces jusque 1985
• Pas de séparation en composant logiques et
  implémentation

9
modèle Arch - Slinky 1992

• Plus de couches
• Plus conceptuel
• Bien adapté pour la structure fonctionnelle

Contrôleur de Dialogue
Logical Presentation Objects
Possibly adapted Domain Objects

• Adaptateur
• Functionnal Core Adapter(Virtual Application
  Layer)

• Présentation
• Logical Presentation Component(Virtual Toolkit)

Domain Objects
Physical Interaction Objects

• Interaction
• Interaction Toolkit Component
• Physical Presentation Component

• Domaine
• Application Functionnal Core
• Domain-specific component

10
Agent Based Models

• Modèles basés sur des agents
• Système interactif ensemble dunités
  computationelles (agents)
• Agent
• capacité à réagir et à gérer des événements
• caractérisé par un état
• possède une capacité dexpertise (rôle)
• relation utilisateur ?interacteur / objet
  dinteractif
• Système interactif agents réactifs (ltgt agents
  cognitifs) MVC, PAC, Clock, C2, etc...
• Modèle même principe que les précédents, avec une
  granularité plus fine (par collections)

11
modèle MVC 1987 (Smalltalk)
View
Model
Controller
12
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
  limplémentation) que MVC

13
MVC en Java ?

• JTextField (textField)
• JTextArea (textList) JScrollPane

textField.addActionListener(new
ActionListener() public void actionPerformed(Act
ionEvent e) // Append the textField's
text to textList textList.append(textField.getTe
xt()) textList.append("\n")
textField.setText("") // Reset the textField
) // ENTER key causes an ActionEvent
14
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 ?

15
MVC rules
16
listView

• public class ListView extends JTextArea
• public ListView(int n) ...
• public void changed (Vector v)
• // copie du vector dans le JTextArea

17
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

18

• 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...) ... listenersj.state
  Changed(c) ...

19
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())

20
La fenêtre principale

• public 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)

21
et dans le constructeur...

• JPanel controlPanel new JPanel()
• controlPanel.add(controller)
• JPanel viewPanel new JPanel()
• viewPanel.add(avgView)
• viewPanel.add(ListView)

22
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

23
Observer Design Pattern

• One to many

24
Premiers éléments de réponse à la question 1
25
Découpage de la question 1

• 2 vues
• JLabel
• JSlider
• 7 contrôleurs
• 6 JButtons
• JSlider
• 1 modèle
• Gestion dun entier

26
découpage
JButton
JLabel
JButton
Modèle
JSlider
JSlider
27
découpage
JButton
JButton
Modèle setValeur(int)getValeur() valeur
JSlider
JSlider
28
Exo1Model

• import java.util.Observable
• public class Exo1Model extends Observable
• public int valeur0
• static int MIN_VALUE0
• static int MAX_VALUE999
• public Exo1Model() valeur 0
• public void setValeur(int x)
• if (x lt MIN_VALUE) xMIN_VALUE
• if (x gt MAX_VALUE) xMAX_VALUE
• valeur x
• // notification des modifications dans la classe
  Observer
• setChanged()
• notifyObservers()

29
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())

30
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())
• )

31
JButton (controlleur 1)

• public class Exo1ControllerBoutons extends
  JButton
• int base_value0
• Exo1Model modelnull
• void setBase(int i) base_valuei
• int getBase() return base_value
• public Exo1ControllerBoutons(Exo1Model mod,int
  bv)
• modelmod
• // 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 gt 0) base_str ""base_str
• setText(base_str)

32

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