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

Rainbow - Arcad

Composition de composantset 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 ?



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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 ?



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Composants indépendants, composables

Mais interactions possibles

Composants Composite



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Fusion de menus correspondants aux composants (1)



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Fusion de menus correspondants aux composants (2)



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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


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


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion


Objectifs - Adaptabilité d'un composant (2)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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énomNom

Relation 1-1

Relation 1-n


Objectifs - Synthèse (1)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


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


Objectifs - Synthèse (2)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


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


Modèle concret - Présentation d'UIML (1)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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


Modèle concret - Présentation d'UIML (2)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Les 4 parties d'un document UIML:

<Head> : metadata (author, date, version, ...) <Template> : réutilisation de fragments <Interface> : interface proprement dite

<Structure> : arbre des « widgets » <Style> : styles (propriétés) des widgets <Content> : contenu (texte, image, son) <Behavior> : objet / événement / action

<Peers> : mappings et liens vers l'extérieur


Modèle concret - Motivations (1)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Exemple de composition

<template> <restructure at-part= « Top » how= « replace »> <template> <part id = « Nom » class= « JTextField »/> <part id = « Prenom » class= « JTextField »/> </template> </restructure></template><uiml> <interface> <structure> <part id= « Main » class= « Frame »> <part id= « Top » class= « Panel »/> </part> </structure> </interface></uiml>



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Exemple de composition

Top Main



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


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



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


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


Modèle concret - Limites (1)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Interopérabilité

Ex : Java Swing

<template> <part id = « Nom » class= « JTextField »/> <part id = « Bouton » class= « JButton »/> </template>

Ex : Java Awt

<template> <part id = « Nom » class= « TextField »/> <part id = « Bouton » class= « Button »/> </template>

Ex : HTML

<template> <part id = « Nom » class= « InputField »/> <part id = « Lien » class= « Anchor »/> </template>



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Adaptabilité

Différentes dispositions pour un même composant



Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-Motivations

-Limites

Modèle abstrait

-Motivations

-Proposition

-Synthèse

Conclusion

Adaptabilité

Relation 1-1 / 1-n

<template> <part id = « Nom » class= « JTextField »/> <part id = « Prenom » class= « JTextField »/> </template> <template> <part id = « table » class= « JTable »/> </template>

Instance C2

Instance C1

Pr₫nomNom


Modèle abstrait - Motivations

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


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


Modèle abstrait - Proposition

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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


Modèle abstrait - Synthèse (1)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


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


Modèle abstrait - Synthèse (2)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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énomNom


Conclusion (1)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


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


Conclusion (2)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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


Conclusion (3)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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


Conclusion (4)

Introduction

Objectifs

-Composition

-Adaptabilité

-Synthèse

Modèle concret


-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


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

Documents

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