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

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

Objectifs - Composition de 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 " Contexte : composants – Hétérogènes – Externes à l'application – Indépendants les uns des autres " Abstraction des « vues » d'un composant: – BD -> JDBC, DataObject, DataSet,... – Protocoles de communication -> IDL – Interactions avec d'autres composants -> Noah (service d'interactions de léquipe Rainbow) – Services systèmes (transaction, sécurité,...) – IHM -> MVC ? Jeremy Fierstone / Equipe Rainbow / 3

Objectifs - Composition de 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 " Aujourd'hui : modèle à composants (EJB, CCM,... ) – BD -> JDBC, DataObject, DataSet,... – Protocoles de communication -> IDL – Services systèmes (transaction, sécurité,...) " Ce qu'il manque : – Interactions avec d'autres composants -> Noah (service d'interactions de léquipe Rainbow) – IHM -> MVC ? Jeremy Fierstone / Equipe Rainbow / 4

Objectifs - Composition de composants (3) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 ? C1 C3C2 IC1 IC3IC2 View LPC/RMI/EJB Model Jeremy Fierstone / Equipe Rainbow / 5

Objectifs - Composition de composants (4) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " Composants indépendants, composables " Mais interactions possibles Composants Composite Jeremy Fierstone / Equipe Rainbow / 6

Objectifs - Composition de composants (5) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " Fusion de menus correspondants aux composants (1) Jeremy Fierstone / Equipe Rainbow / 7

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

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

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,... " -> 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

Objectifs - Adaptabilité d'un composant (2) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 Instance C2 Instance C1 Prénom Nom Relation 1-1 Relation 1-n Jeremy Fierstone / Equipe Rainbow / 11

Objectifs - Synthèse (1) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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) Jeremy Fierstone / Equipe Rainbow / 12

Objectifs - Synthèse (2) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " Adaptabilité – Environnement " Mobilité " Pannes " Langues " Styles – IHMs " Interopérables " Uniformes " Adaptables (ex : relation 1-1 / 1-n) Jeremy Fierstone / Equipe Rainbow / 13

Modèle concret - Présentation d'UIML (1) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 Jeremy Fierstone / Equipe Rainbow / 14

Modèle concret - Présentation d'UIML (2) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " Les 4 parties d'un document UIML: – : metadata (author, date, version,...) – : réutilisation de fragments – : interface proprement dite " : arbre des « widgets » " : styles (propriétés) des widgets " : contenu (texte, image, son) " : objet / événement / action – : mappings et liens vers l'extérieur Jeremy Fierstone / Equipe Rainbow / 15

Modèle concret - Motivations (1) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 Jeremy Fierstone / Equipe Rainbow / 16

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

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

Modèle concret - Motivations (4) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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») Jeremy Fierstone / Equipe Rainbow / 19

Modèle concret - Motivations (5) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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) Jeremy Fierstone / Equipe Rainbow / 20

Modèle concret - Limites (1) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " Interopérabilité – Ex : Java Swing – Ex : Java Awt – Ex : HTML Jeremy Fierstone / Equipe Rainbow / 21

Modèle concret - Limites (2) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " Adaptabilité – Différentes dispositions pour un même composant Jeremy Fierstone / Equipe Rainbow / 22

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

Modèle abstrait - Motivations Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 -> GUI – Automates Etats / Transitions -> Voix –... " Ajouter du comportement – Boutons, liens, sélection -> GUI – Touche DTMF, Token -> voix... Jeremy Fierstone / Equipe Rainbow / 24

Modèle abstrait - Proposition Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 Jeremy Fierstone / Equipe Rainbow / 25

Modèle abstrait - Synthèse (1) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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) Jeremy Fierstone / Equipe Rainbow / 26

Modèle abstrait - Synthèse (2) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " Sequence de fields (nom, prenom) " List de sequence de fields (tableau) Instance C2 Instance C1 Prénom Nom Jeremy Fierstone / Equipe Rainbow / 27

Conclusion (1) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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) Jeremy Fierstone / Equipe Rainbow / 28

Conclusion (2) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 Jeremy Fierstone / Equipe Rainbow / 29

Conclusion (3) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 Jeremy Fierstone / Equipe Rainbow / 30

Conclusion (4) Introduction Objectifs -Composition -Adaptabilité -Synthèse Modèle concret -Présentation d'UIML -Motivations -Limites Modèle abstrait -Motivations -Proposition -Synthèse Conclusion " 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 Jeremy Fierstone / Equipe Rainbow / 31