Rainbow Arcad

1
Rainbow - Arcad
Composition de composants et IHMs composites
23/05/2002 Jeremy
Fierstone / Equipe Rainbow / 1
2
Rainbow - Arcad

• Introduction
• Objectifs
• Composition, adaptabilité, synthèse
• Modèle concret UIML
• Présentation d'UIML, motivations, limites
• Modèle abstrait vers des IHMs génériques
• Motivations, proposition, synthèse
• Conclusion

Jeremy Fierstone / Equipe Rainbow / 2
3
Objectifs - Composition de composants (1)

• Contexte composants
• Hétérogènes
• Externes à l'application
• Indépendants les uns des autres
• Abstraction des vues d'un composant
• BD -gt JDBC, DataObject, DataSet, ...
• Protocoles de communication -gt IDL
• Interactions avec d'autres composants -gt Noah
  (service d'interactions de léquipe Rainbow)
• Services systèmes (transaction, sécurité, ...)
• IHM -gt MVC ?

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 3
4
Objectifs - Composition de composants (2)

• Aujourd'hui modèle à composants (EJB, CCM, ...
  )
• BD -gt JDBC, DataObject, DataSet, ...
• Protocoles de communication -gt IDL
• Services systèmes (transaction, sécurité, ...)
• Ce qu'il manque
• Interactions avec d'autres composants -gt Noah
  (service d'interactions de léquipe Rainbow)
• IHM -gt MVC ?

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 4
5
Objectifs - Composition de composants (3)

• IHMs composables
• Car composants métier composables
• IHMs interopérables
• Car composants métier hétérogènes
• Ex Composition entre C2 (Java) et C3 (C) pour
  obtenir C1 (composite)
• Question IHM de C1 ?

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 5
6
Objectifs - Composition de composants (4)

• Composants indépendants, composables
• Mais interactions possibles

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Composants
Composite
Jeremy Fierstone / Equipe Rainbow / 6
7
Objectifs - Composition de composants (5)

• Fusion de menus correspondants aux composants (1)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 7
8
Objectifs - Composition de composants (6)

• Fusion de menus correspondants aux composants (2)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 8
9
Objectifs - Composition de composants (7)

• Autres objectifs
• Cohérence entre structure
• (composant dédié voix composant dédié
  graphique)
• Dérivation de composants d'IHM (réutilisabilité)
• Propagation des styles (couleurs, font)
• Internationalisation et cohérence de langue entre
  composants
• Composition des données à afficher
• Cohérence
• Tri
• Maintien des relations avec la partie métier

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 9
10
Objectifs - Adaptabilité d'un composant (1)

• Adaptation au contexte
• Mobilité d'un composant (agenda)
• Complexité de l'IHM (PC, PDA)
• Support (Graphique (PC, PDA), voix)
• Tolérance aux pannes
• Langues, styles, ...
• -gt Différentes IHMs pour un même composant
• Interopérabilité des IHMs
• Uniformité des IHMs (un seul langage)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 10
11
Objectifs - Adaptabilité d'un composant (2)

• Problème d'adaptabilité
• Dispositions différentes (relation 1-1, 1-n
  (liste))
• Ex composant Client (classe)
• Instances C1, C2
• Attributs d'instances Nom, Prenom

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Relation 1-1
Nom
Prénom
Relation 1-n
Instance C1
Instance C2
Jeremy Fierstone / Equipe Rainbow / 11
12
Objectifs - Synthèse (1)

• Composition
• Contexte composants
• Hétérogènes
• Externes à l'application
• Indépendants les uns des autres
• Objectifs IHMs
• Indépendantes
• Composables
• Interagissantes
• Interopérables
• Dérivables
• Fusionnables (ex menu)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 12
13
Objectifs - Synthèse (2)

• Adaptabilité
• Environnement
• Mobilité
• Pannes
• Langues
• Styles
• IHMs
• Interopérables
• Uniformes
• Adaptables (ex relation 1-1 / 1-n)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 13
14
Modèle concret - Présentation d'UIML (1)

• Application à UIML
• User Interface Markup Language
• Langage multi-interface (graphique, voix, ...)
• Une norme UIML (uiml.org)
• Des implémentations ou renderers
• Harmonia Awt/Swing, HTML, WML, VXML, ...
• Rubico Visual Basic, GUI builder
• TV Server, AG C for embedded systems

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 14
15
Modèle concret - Présentation d'UIML (2)

• Les 4 parties d'un document UIML
• ltHeadgt metadata (author, date, version, ...)
• ltTemplategt réutilisation de fragments
• ltInterfacegt interface proprement dite
• ltStructuregt arbre des widgets
• ltStylegt styles (propriétés) des widgets
• ltContentgt contenu (texte, image, son)
• ltBehaviorgt objet / événement / action
• ltPeersgt mappings et liens vers l'extérieur

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 15
16
Modèle concret - Motivations (1)

• Structure
• Découpage d 'une IHM et recomposition statique
  (lors du rendering)
• utilisation de template
• Réaffichage dynamique à partir d'un template
• Utilisation de restructure
• Composition dynamique par programmation
• template restructure
• Style
• Propagation attribut cascade (CSS)
• Content
• Remplacement, sélection de langue

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 16
17
Modèle concret - Motivations (2)

• Exemple de composition
• lttemplategt
• ltrestructure at-part Top how replace gt
• lttemplategt
• ltpart id Nom class JTextField /gt
• ltpart id Prenom class JTextField
  /gt
• lt/templategt
• lt/restructuregt
• lt/templategt
• ltuimlgt
• ltinterfacegt
• ltstructuregt
• ltpart id Main class Frame gt
• ltpart id Top class Panel /gt
• lt/partgt
• lt/structuregt
• lt/interfacegt
• lt/uimlgt

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 17
18
Modèle concret - Motivations (3)

• Exemple de composition

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Top
Main
Jeremy Fierstone / Equipe Rainbow / 18
19
Modèle concret - Motivations (4)

• Composition
• Objectifs IHMs
• Indépendantes
• Utilisation de template
• Composables
• Utilisation de template restructure
• Interagissantes
• Interopérables
• But fondamental d'UIML
• Dérivables
• Utilisation de template
• Fusionnables (attribut cascade, union,
  replace)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 19
20
Modèle concret - Motivations (5)

• Adaptabilité
• Environnement
• Mobilité
• Plusieurs interfaces UIML
• Pannes
• Langues et styles
• Template, propagation
• IHMs
• Interopérables et uniformes
• But fondamental d'UIML
• Mais liaison étroite avec le vocabulaire
• Adaptables (ex relation 1-1 / 1-n)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 20
21
Modèle concret - Limites (1)

• Interopérabilité
• Ex Java Swing
• lttemplategt
• ltpart id Nom class JTextField
  /gt
• ltpart id Bouton class JButton
  /gt
• lt/templategt
• Ex Java Awt
• lttemplategt
• ltpart id Nom class TextField /gt
• ltpart id Bouton class Button /gt
• lt/templategt
• Ex HTML
• lttemplategt
• ltpart id Nom class InputField /gt
• ltpart id Lien class Anchor /gt
• lt/templategt

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 21
22
Modèle concret - Limites (2)

• Adaptabilité
• Différentes dispositions pour un même composant

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 22
23
Modèle concret - Limites (3)

• Adaptabilité
• Relation 1-1 / 1-n
• lttemplategt
• ltpart id Nom class JTextField /gt
• ltpart id Prenom class JTextField /gt
• lt/templategt
• lttemplategt
• ltpart id table class JTable /gt
• lt/templategt

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Nom
Pr?nom
Instance C1
Instance C2
Jeremy Fierstone / Equipe Rainbow / 23
24
Modèle abstrait - Motivations

• Objectifs
• Interopérabilité totale
• Interface vocale, graphique, braille, ...
• Proposer un modèle le plus générique
• Généraliser les formulaires de saisie
• Générer l'UIML
• Ajouter du style (dépend du média)
• Couleurs, tailles, disposition -gt GUI
• Automates Etats / Transitions -gt Voix
• ...
• Ajouter du comportement
• Boutons, liens, sélection -gt GUI
• Touche DTMF, Token -gt voix ...

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 24
25
Modèle abstrait - Proposition

• Fonctionnalités (pour un formulaire)
• Field texte simple
• Accès
• Read Label, Texte (à lire ou entendre)
• Read / Write Field
• Select Liste, choix (radio boutons, DTMF)
• Type string, int, double
• List
• List de Fields (Select) choix multiples
• List de Fields (Read/Write) liste de champs
• Sequence
• Sequence de fields colonnes d'un tableau
• List de sequence de fields tableau 2D

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 25
26
Modèle abstrait - Synthèse (1)

• Limites de l'approche
• Comportement
• Contenu
• Style
• Apports de l'approche
• Composition plus facile
• Composition au niveau du modèle abstrait
• Adaptation possible
• Différentes dispositions possibles
• Relation 1-1 / 1-n
• Exemple
• Sequence de fields (nom, prenom)
• List de sequence de fields (tableau)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 26
27
Modèle abstrait - Synthèse (2)

• Sequence de fields (nom, prenom)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion

• List de sequence de fields (tableau)

Prénom
Nom
Instance C1
Instance C2
Jeremy Fierstone / Equipe Rainbow / 27
28
Conclusion (1)

• Composition
• Contexte composants
• Hétérogènes
• Externes à l'application
• Indépendants les uns des autres
• Objectifs IHMs
• Indépendantes
• Composables
• Interagissantes
• Interopérables
• Dérivables
• Fusionnables (ex menu)

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 28
29
Conclusion (2)

• Composition
• Propositions
• Service d'interactions pour UIML
• Interactions entre templates
• Ajout de règles en ISL
• Ajout de règles en UIML
• Atelier de composition

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 29
30
Conclusion (3)

• Adaptabilité
• Environnement
• Mobilité
• Pannes
• Langues et styles
• IHMs
• Interopérables et uniformes
• Totalement avec le modèle abstrait
• Adaptables (ex relation 1-1 / 1-n)
• Modèle abstrait

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 30
31
Conclusion (4)

• Objectifs
• Finaliser le modèle abstrait
• Spec
• Générateur / composeur
• Analyse / Conception de l'atelier de composition
  et d'intégration de composants
• Application d'exemple

Introduction Objectifs -Composition
-Adaptabilité -Synthèse Modèle concret
-Présentation d'UIML -Motivations
-Limites Modèle abstrait -Motivations
-Proposition -Synthèse Conclusion
Jeremy Fierstone / Equipe Rainbow / 31