Adaptation des IHM
Travaux de recherche
Anne-Marie Dery - Année 2015 2016Parcours IHM Polytech’Nice Sophia
Prérequis pour le cours
• Connaitre les principes de l’IDM (cours de Mireille Blay)
• Connaitre la définition de l’adaptat...
Rappel de l’Espace problème
• Domaine de l’adaptation au contexte d’usage
Env ironneme nt
Pl ate-forme
Ut ilisate ur
Seuil...
Adaptation pour qui et quand ?
2 cas
 A la conception – faciliter la vie du développeur
 Réutiliser un maximum pour chaq...
Premières Approches à la conception
XML
XSL
HTML
VoiceML
WML Au centre une description
XMLisée
basées sur des Traducteurs
...
Premières Approche à l’exécution
• Problème traité : Migration totale
• Exemple
• SI la batterie du PC faiblit ALORS passe...
Capture du
contexte
Identification
Des solutions
candidates
Selection d’une
solution
candidate
Détection de
changement de
...
• Identifier le problème = Quel est le besoin en plasticité
• Conception et/ou exécution ?
• Quels dispositifs visés ?
• Q...
Petit rappel : plasticité au travers d’un espace
problème
Work-space
UI
Design-Knowledge
Reaction
Context
Multimodal
Inter...
Modèles de tâches
Les modèles de tâches sont des descriptions logiques des activités à
réaliser pour atteindre les objecti...
Analyse et Modélisation de la tâche
formalisme type HTA
(Hierarchical Task Analysis) :
Ordonnancement des tâches
UAN (User...
Arbre de tâches HTA : projeté
Quand les chercheurs s’en
mêlent…
CAMELEON : le cadre de référence
Projet ServFace : Travaux de Pise
Travaux sur UsiXML : ...
Où trouver les informations
Equipe IIHM Laboratoire IMAG à Grenoble
Gaelle Calvary & Joelle Coutaz http://iihm.imag.fr/pub...
Un cadre de référence
CAMELEON
Cameleon
Context Aware Modelling for
Enabling and Leveraging Effective
interaction
http://g...
Equipes et travaux en présence
http://giove.isti.cnr.it/projects/cameleon.html
• I.S.T.I (Pisa, Italy)
• Université Cathol...
Phase de “conception”
Config 1 Modèle
Tâches et
Concepts
IHM
concrète
IHM finale
IHM
abstraite
Modèle
Tâches et
Concepts
M...
Modélisation de la configuration
Domaine
Concepts
Tâches
Contexte
User
Plate-forme
Environment
Adaptation
Evolution
Transi...
Modélisation de l’IHM
Modèle
Tâches et
Concepts
IHM concrète
IHM finale
IHM abstraite
Tâches &
Concepts
IHM
abstraite
IHM
concrète
IHM finale
Config 1
Différents niveaux d’abstraction
Exercice : Framework cameleon
Model-Driven Architecture
 Task & Concepts
 Abstract UI
 Concrete UI
 Final UI
 Task & ...
Phase de “conception”
Concepts
Tâches
User
Plate-forme
Environment
Evolution
Transition
Modèle
Tâches et
Concepts
IHM conc...
Phase de “conception”
Config 1 Modèle
Tâches et
Concepts
IHM
concrète
IHM finale
IHM
abstraite
Modèle
Tâches et
Concepts
C...
Phase de “conception”
Config 1 Modèle
Tâches et
Concepts
IHM
concrète
IHM finale
IHM
abstraite
Modèle
Tâches et
Concepts
C...
Phase de “conception”
Config 1 Modèle
Tâches et
Concepts
IHM
concrète
IHM finale
IHM
abstraite
Modèle
Tâches et
Concepts
C...
Phase de “conception”
Config 1 Modèle
Tâches et
Concepts
IHM
concrète
IHM finale
IHM
abstraite
Modèle
Tâches et
Concepts
M...
SERVFACE
SERVICE ANNOTATIONS FOR USER INTERFACE
COMPOSITION
PROJET EUROPÉEN
http://giove.isti.cnr.it/Users/Fabio/
Vue d’ensemble
+Annotations de services avec des éléments d’interfaces
+Composition de services
+Génération de l’interface...
Annotations de services
[Izquierdo et al., 2009]
1ière approche: Composition Visuelle
[Nestler et al., 2009] [Feldmann et al., 2009]
End-User Programming
1ière approche: Composition Visuelle
[Nestler et al., 2009]
[Feldmann et al., 2009]
Services
(WSDL)
Services
Annotés
Auto-...
2ième approche: Dirigée par les tâches
[Feldmann et al., 2009] [Janeiro, 2009]
2ième approche: Dirigée par les tâches
8/15
[Feldmann et al., 2009]
[Janeiro, 2009]
Transformations:
1) M2M
2) M2C
Interfa...
USIXML
PROJET EUROPÉEN
www.usixml.org
Projet Européen UsiXML
Définir, valider et standardiser un langage de description d'interfaces
utilisateur (UIDL) pour amé...
UsiXML
UsiXML USer Interface eXtensible Markup Language)
XML pour applications interactives
UsiXML pour des non développeu...
UsiXML
•UsiXML indépendant device, plateforme et
modalités
•UsiXML abstraction des éléments de base : widgets,
controls, c...
UsiXML
Zoom sur les travaux à Valenciennes
Sophie Lepreux
15 novembre 2013
Post-doc au sein du laboratoire BCHI à Louvain-la-neuve dirigé par Jean
Vanderdonckt
•Composition d’interfaces utilisateur...
Framework cameleon
Model-Driven Architecture
Source = < User, Platform,
Environment >
Target = < User, Platform,
Environme...
Framework cameleon
Model-Driven Architecture
 Task & Concepts
 Abstract UI
 Concrete UI
 Final UI
 Task & Concepts
 ...
UsiXML – Concrete
User Interface
<cuiModel id="FicheClient-cui_3" name="FicheClient-cui">
<window id="window_component_0" ...
Les opérateurs ensemblistes
Opérateur « normal union »
L’opérateur « difference »
- -
L’opérateur « fusion »
Fusion(
, )=
algorithm:
The two trees T1 and T2 are merge at the %level R+1 to form the T3 window.
...
ComposiXML
• Développé par Benjamin Michotte (BCHI)
intersection
Unique Union
Normal Union
Fusion
Difference
(right)
Diffe...
Composition au niveau AUI
 Task & Concepts
 Abstract UI
 Concrete UI
 Final UI
 Task & Concepts
 Abstract UI
 Concr...
Order a pizza
AUI01: Choose a pizza
Choose
size
Choose
toppings
Choose
vegetable
Choose
meat
AUI02: Give delivering
addres...
Case study
• The first existing application is ordering pizza.
• the task “Choose a pizza” is multimodal (cf. CUI
model an...
Case study
• The second existing application is to order
Chinese food.
• the task “Choose Meal” is GUI (cf. CUI model
and ...
Case study
• Goals:
• multimodal application allowing to order Chinese food or
pizza,
• reuse the “give delivering address...
Composition au niveau des tâches
 Task & Concepts
 Abstract UI
 Concrete UI
 Final UI
 Task & Concepts
 Abstract UI
...
Composition au niveau des tâches
• Travaux de Gregory Bourguin et Arnaud Lewandowski
(Laboratoire d’informatique du littor...
Composition au niveau des tâches
• Illustration :
• 2 composants chat et tableau blanc possédant des tâches « similaires ».
Composition au niveau des tâches
• Illustration suite :
• Résultat de la composition (fusion).
Problématique de construction
d’IHM par composition
Projet ASPECT
Composition de composants
et de leurs IHMs
200
3
Equipes et travaux en présence
Equipe Rainbow
Anne-Marie Pinna-Dery and Jérémy Fierstone. Component model and
programming ...
Problématique
• Applications évolutives et adaptables
• accessibles via un PDA, un portable ou une station
• variabilité d...
Composition de composants
" Fusion de menus correspondants aux composants (1)
Composition de composants
" Fusion de menus correspondants aux composants (2)
Proposition :
modèle de composants et abstraction
• La communication entre composants
IHM et métier est exprimée par des
i...
De l’IHM abstraite vers l’IHM concrète
JFrame1
JPanel1
JLabel1 JField1 ...
IHM concrète (Exécution)
Projection
FicheClient...
Exemple de Liste de Clients
<sunml>
<interface id="ListeClients">
<structure>
<dialog id="MainDialog" sequence="true">
<li...
De l’IHM abstraite vers l’IHM concrète
Séparation du composant d’IHM du composant métier
Expression des communications pos...
Exercice : SUNML et ISL ?
 Task & Concepts
 Abstract UI
 Concrete UI
 Final UI
 Task & Concepts
 Abstract UI
 Concr...
Equipe RAINBOW I3S
Construction d’applications
adaptables par composition
Un modèle inspiré d’Arche pour les services
Proposer un modèle d’architecture
pour un service interactif
N services foncti...
Quid des assemblages
Comment fusionner 2 services respectant l’architecture?
Composition d’arches ?
Assemblage des service...
Travaux de références pour le domaine utilisateur
Travaux composants (Fractal, SOA, Noah, WCOMP MODEL)
Gestion de la dynam...
Nos spécificités
Etre centré sur le dialogue : relation « fonctionnel et IHM »
Déterminer le bon modèle de dialogue et avo...
Adapter l’interface à l’évolution du système
déduction
Assemblage de services
(Orchestrations, fusion
d’aspects, composant...
Adapter l’interface aux besoins utilisateurs
2 utilisateurs : le développeur ou
l’utilisateur final
Choix des services org...
Adaptation du système
Déduire
l’assemblage
pour un utilisateur
MPI
Points communs aux adaptations visées
Conception Exécution
Noyau Fonctionnel
IHM
Evolution Noyau Fonctionnel Apparitio...
Plasticitérecherche2015 2
Prochain SlideShare
Chargement dans…5
×

Plasticitérecherche2015 2

1 544 vues

Publié le

Adaptation des IHM : travaux de recherche

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 544
Sur SlideShare
0
Issues des intégrations
0
Intégrations
753
Actions
Partages
0
Téléchargements
29
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Plasticitérecherche2015 2

  1. 1. Adaptation des IHM Travaux de recherche Anne-Marie Dery - Année 2015 2016Parcours IHM Polytech’Nice Sophia
  2. 2. Prérequis pour le cours • Connaitre les principes de l’IDM (cours de Mireille Blay) • Connaitre la définition de l’adaptation et du contexte d’usage • Connaître la notion d’arbre de tâches (cours de CEIHM) • Connaître la notion de composants • Connaitre la notion d’ontologies
  3. 3. Rappel de l’Espace problème • Domaine de l’adaptation au contexte d’usage Env ironneme nt Pl ate-forme Ut ilisate ur Seuil de plasticité Domaine de plasticité C2 Contexte non couvert C1 Contexte couvert par l’IHM
  4. 4. Adaptation pour qui et quand ? 2 cas  A la conception – faciliter la vie du développeur  Réutiliser un maximum pour chaque nouvelle cible  Diminuer le coût de développement  Prendre en compte l’usage (exemple Jeux vidéos -Shiva)  A l’exécution – faciliter la vie de l’utilisateur final  Faire migrer une application d’un support à un autre  Faire migrer des taches d’un support à un autre  Conserver les facilités l’usage et les habitudes tout en profitant des spécificités des supports
  5. 5. Premières Approches à la conception XML XSL HTML VoiceML WML Au centre une description XMLisée basées sur des Traducteurs Un langage commun Une génération de code Des techniques de compilation Limites et Avantages ?
  6. 6. Premières Approche à l’exécution • Problème traité : Migration totale • Exemple • SI la batterie du PC faiblit ALORS passer sur PDA SI condition ALORS action Action  Réaction Ecrire une machine à états Limites et Avantages ?
  7. 7. Capture du contexte Identification Des solutions candidates Selection d’une solution candidate Détection de changement de contexte Identification du changement de contexte Exécution du prologue Execution de la reaction Execution de L’épilogue Cadre de référence : phase “exécution”
  8. 8. • Identifier le problème = Quel est le besoin en plasticité • Conception et/ou exécution ? • Quels dispositifs visés ? • Quel(s) environnent(s) ? • Quel(s) utilisateur(s) ? • Etudier l’existant • Quelles sont les technologies adaptées ? • De quels travaux de recherche peut-on s’inspirer ? Proposer une solution • Solution partielle ou complète • Solution ad-hoc ou modèle Démarche
  9. 9. Petit rappel : plasticité au travers d’un espace problème Work-space UI Design-Knowledge Reaction Context Multimodal Inter-modal Intra-modal User Platform Static Granularity Modality Adaptation type Context of use Learning Dynamic Environment Interactor
  10. 10. Modèles de tâches Les modèles de tâches sont des descriptions logiques des activités à réaliser pour atteindre les objectifs des utilisateurs Utiles pour concevoir, analyser et évaluer les applications logicielles interactives Les modèles de tâches décrivent comment les activités peuvent être réalisées pour atteindre les objectifs des utilisateurs lors de l’interaction avec l’application considérée.
  11. 11. Analyse et Modélisation de la tâche formalisme type HTA (Hierarchical Task Analysis) : Ordonnancement des tâches UAN (User Action Notation) CTT (ConcurTaskTrees) = HTA + opérateurs temporels + ajout d’annotations sur les tâches
  12. 12. Arbre de tâches HTA : projeté
  13. 13. Quand les chercheurs s’en mêlent… CAMELEON : le cadre de référence Projet ServFace : Travaux de Pise Travaux sur UsiXML : Valenciennes , Louvain, Grenoble Travaux Rainbow : Construction d’IHM par composition
  14. 14. Où trouver les informations Equipe IIHM Laboratoire IMAG à Grenoble Gaelle Calvary & Joelle Coutaz http://iihm.imag.fr/publication/ Equipe RAINBOW Laboratoire I3S à Sophia Antipolis Michel Riveill & Philippe Renevier & Audrey Occello & Anne Marie Dery http://proton.unice.fr/biblio/displayReference.php?team=0&&export=teamHtml&&idKe yWord1=1 Laboratoire HIIS à l’université de Pise Fabio Paterno http://hiis.isti.cnr.it/publications.php Laboratoire CHI Université catholique de Louvain Jean Vanderdonckt http://uclouvain.academia.edu/JeanVanderdonckt/Papers Equipe IHM au Université de Valencienne Anas Hariri & Sophie Lepreux & Christophe Kolski http://www.univ-valenciennes.fr/LAMIH- intra/site/commun/_gestion/publis/recherche/resultat.php?id_perso=97&langue=lang_fr
  15. 15. Un cadre de référence CAMELEON Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction http://giove.isti.cnr.it/projects/cameleon.html (IST R&D 2001-2004)
  16. 16. Equipes et travaux en présence http://giove.isti.cnr.it/projects/cameleon.html • I.S.T.I (Pisa, Italy) • Université Catholique de Louvain (Louvain, Belgium) • Université Joseph Fourier (Grenoble, France) http://giove.isti.cnr.it/projects/cameleon/external_publications.html http://iihm.imag.fr/publication/C10a/ User Interface Plasticity: Model Driven Engineering to the Limit! http://iihm.imag.fr/publication/BDB+04a/ CAMELEON-RT: a Software Architecture Reference Model for Distributed, Migratable, and Plastic User Interfaces
  17. 17. Phase de “conception” Config 1 Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite Modèle Tâches et Concepts Modèles archétypes Config 2 Concepts Tâches User Plate-forme Environment Evolution Transition IHM concrète IHM finale IHM abstraite Concepts Tâches User Plate-forme Environment Evolution Transition Domaine Concepts Tâches Contexte User Plate-forme Environment Adaptation Evolution Transition Modèles ontologiques ARTStudio D. Thevenin Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine Spécifier 1 fois -> N Interfaces  approche par modèles
  18. 18. Modélisation de la configuration Domaine Concepts Tâches Contexte User Plate-forme Environment Adaptation Evolution Transition Modèles ontologiques Adaptation dynamique utilisateur contexte d’usage
  19. 19. Modélisation de l’IHM Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite
  20. 20. Tâches & Concepts IHM abstraite IHM concrète IHM finale Config 1 Différents niveaux d’abstraction
  21. 21. Exercice : Framework cameleon Model-Driven Architecture  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platformRéification, Traduction, Abstraction
  22. 22. Phase de “conception” Concepts Tâches User Plate-forme Environment Evolution Transition Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite
  23. 23. Phase de “conception” Config 1 Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite Modèle Tâches et Concepts Config 2 Concepts Tâches User Plate-forme Environment Evolution Transition IHM concrète IHM finale IHM abstraite Concepts Tâches User Plate-forme Environment Evolution Transition CONFIGURATION 1 CONFIGURATION 2
  24. 24. Phase de “conception” Config 1 Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite Modèle Tâches et Concepts Config 2 Concepts Tâches User Plate-forme Environment Evolution Transition IHM concrète IHM finale IHM abstraite Concepts Tâches User Plate-forme Environment Evolution Transition CONFIGURATION 1 CONFIGURATION 2
  25. 25. Phase de “conception” Config 1 Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite Modèle Tâches et Concepts Config 2 Concepts Tâches User Plate-forme Environment Evolution Transition IHM concrète IHM finale IHM abstraite Concepts Tâches User Plate-forme Environment Evolution Transition CONFIGURATION 1 CONFIGURATION 2
  26. 26. Phase de “conception” Config 1 Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite Modèle Tâches et Concepts Modèles archétypes Config 2 Concepts Tâches User Plate-forme Environment Evolution Transition IHM concrète IHM finale IHM abstraite Concepts Tâches User Plate-forme Environment Evolution Transition Domaine Concepts Tâches Contexte User Plate-forme Environment Adaptation Evolution Transition Modèles ontologiques ARTStudio D. Thevenin Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine Spécifier 1 fois -> N Interfaces  approche par modèles
  27. 27. SERVFACE SERVICE ANNOTATIONS FOR USER INTERFACE COMPOSITION PROJET EUROPÉEN http://giove.isti.cnr.it/Users/Fabio/
  28. 28. Vue d’ensemble +Annotations de services avec des éléments d’interfaces +Composition de services +Génération de l’interface du service « composite » à partir des annotations +2 approches: +1ière approche : composition visuelle des services +2ième approche : composition dirigée par les tâches Equipe de Fabio Paterno : http://hiis.isti.cnr.it/publications.php
  29. 29. Annotations de services [Izquierdo et al., 2009]
  30. 30. 1ière approche: Composition Visuelle [Nestler et al., 2009] [Feldmann et al., 2009] End-User Programming
  31. 31. 1ière approche: Composition Visuelle [Nestler et al., 2009] [Feldmann et al., 2009] Services (WSDL) Services Annotés Auto-génération d’annotations + Annotations par un “Expert” Génération de l’interface “abstraite” Transformations: 1) M2M 2) M2C Interface Finale Service Annotator Service Composer MARIA
  32. 32. 2ième approche: Dirigée par les tâches [Feldmann et al., 2009] [Janeiro, 2009]
  33. 33. 2ième approche: Dirigée par les tâches 8/15 [Feldmann et al., 2009] [Janeiro, 2009] Transformations: 1) M2M 2) M2C Interface Finale Services Génération d’annotations (IHM + tâches) + A partir des opérations du service + Une opération = une “tâche annotée” + Une “tâche annotée” = une tâche système Génération des tâches intéractives + Chaque tâche d’interaction = une fenêtre (par défaut) + Intervention du développeur : enlever les doublons Génération de l’interface “abstraite” MARIA
  34. 34. USIXML PROJET EUROPÉEN www.usixml.org
  35. 35. Projet Européen UsiXML Définir, valider et standardiser un langage de description d'interfaces utilisateur (UIDL) pour améliorer la productivité, la réutilisabilité et l'accessibilité d'applications interactives Un langage pour tous les acteurs de la constructions d’IHM basé sur des niveaux d’expressivité et des outils différents USer Interface eXtensible Markup Language Le consortium 7 pays, 28 organisations : PME, grandes entreprises -Thalès France, Telefonica -, des universités et centres de recherche. www.usixml.org programme ITEA2
  36. 36. UsiXML UsiXML USer Interface eXtensible Markup Language) XML pour applications interactives UsiXML pour des non développeurs : analystes, concepteurs, designers, ergonomes, chefs de projet, novices,... UsiXML : élément principal User Interface Description Language (UIDL), langage déclaratif décrivant les UI indépendament des caractéristiques physiques. www.usixml.org
  37. 37. UsiXML •UsiXML indépendant device, plateforme et modalités •UsiXML abstraction des éléments de base : widgets, controls, containers, modalités, techniques d’interaction, .... •UsiXML reutilisation d’UI existantes dans un nouveau contexte par composition www.usixml.org
  38. 38. UsiXML
  39. 39. Zoom sur les travaux à Valenciennes Sophie Lepreux 15 novembre 2013
  40. 40. Post-doc au sein du laboratoire BCHI à Louvain-la-neuve dirigé par Jean Vanderdonckt •Composition d’interfaces utilisateurs (en résumé) • basée sur UsiXML = langage de description d’interface Utilisateur (UIDL) basé sur XML • Centrée sur la couche de l’interface concrète = spécifique à la modalité graphique • Sur la base d’opérateurs inspirés de la théorie des ensembles • Utilisant l’algèbre des arbres [Jagadish et al.] pour modéliser les opérateurs de composition • Développement et tests effectués « à la conception» : ComposiXML plug-in de GraphiXML outil de conception d’interface concrète
  41. 41. Framework cameleon Model-Driven Architecture Source = < User, Platform, Environment > Target = < User, Platform, Environment >
  42. 42. Framework cameleon Model-Driven Architecture  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform textInput button button Window AIC facet=control AIC facet=control AIC facet=control AbstractIndividual Container textInput button button Window AIC facet=control AIC facet=control AIC facet=control AbstractIndividual Container Source = < User, Platform, Environment > Target = < User, Platform, Environment >
  43. 43. UsiXML – Concrete User Interface <cuiModel id="FicheClient-cui_3" name="FicheClient-cui"> <window id="window_component_0" name="window_component_0" width="300" height="200"> <box id="box_1" name="box_1" type="vertical"> <outputText id="output_text_component_2" name="output_text_component_2« … <box id="box_2" name="box_1" type=« horizontal"> <outputText id="output_text_component_3" name="output_text_component_3« … > <inputText id="input_text_component_5" name="input_text_component_5" isVisible="true" isEnabled="true" textColor="#000000" maxLength="50" numberOfColumns="15" isEditable="true"/> <box> <box id="box_3" name="box_1" type=« horizontal"> <outputText id="output_text_component_4" name="output_text_component_4« … <inputText id="input_text_component_6" name="input_text_component_6" isVisible="true« … /> <box> <box id="box_4" name="box_1" type=« horizontal"> <button id="button_component_7" name="button_component_7"/> <button id="button_component_8" …/> <box> </box> </window> </cuiModel> Window (id=window, name=window, width="300" height="200") Box (type=« vertical ») Button (DefaultContent = Save) Button (DefaultContent=Close) Output (Default value =« customer form ») Box (type = horizontal)Box (type = horizontal) Output (…) Input (…) Box (type = horizontal) Output (…) Input (…) Window (id=window, name=window, width="300" height="200") Box (type=« vertical ») Button (DefaultContent = Save) Button (DefaultContent=Close) Output (Default value =« customer form ») Box (type = horizontal)Box (type = horizontal) Output (…) Input (…) Box (type = horizontal) Output (…) Input (…)
  44. 44. Les opérateurs ensemblistes
  45. 45. Opérateur « normal union »
  46. 46. L’opérateur « difference » - -
  47. 47. L’opérateur « fusion » Fusion( , )= algorithm: The two trees T1 and T2 are merge at the %level R+1 to form the T3 window. IF (direction = vertical) Then Add box (vertical B’) %Modify the window size: T3.height = T1.height + T2.height T3.width = T1.width IF (direction = horizontal) Then Add box (horizontal B’). %Modify the window size: T3.height = T1.height T3.width = T1.width + T2.width Add T1(R+1) in box B’, Add T2(R+1) in box B’.
  48. 48. ComposiXML • Développé par Benjamin Michotte (BCHI) intersection Unique Union Normal Union Fusion Difference (right) Difference (left) Equivalence set selection Cut or extract projection
  49. 49. Composition au niveau AUI  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform textInput button button Window AIC facet=control AIC facet=control AIC facet=control AbstractIndividual Container textInput button button Window AIC facet=control AIC facet=control AIC facet=control AbstractIndividual Container Source = < User, Platform, Environment > Target = < User, Platform, Environment > LEPREUX S., HARIRI M-A., ROUILLARD J., TABARY D., TARBY J-C., KOLSKI C. (2007) « Towards Multimodal User Interface Composition based on UsiXML and MBD principles ». Proc. of 12th International Conference on Human-Computer Interaction HCI International'2007, Beijing, 22-27 July 2007.
  50. 50. Order a pizza AUI01: Choose a pizza Choose size Choose toppings Choose vegetable Choose meat AUI02: Give delivering address Give name Give phone Give address Choose quantity Composition au niveau AUI AUI Model AbstractContainer AUI0 AbstractContainer AUI03 AbstractContainer AUI02R2 AIC AIC AIC AIC AIC AIC AIC AIC = AbstractIndividualComponent The AUI model has been realized with IdealXML (www.usixml.org) <auimodel> <abstractContainer id="idaio00" name="Order a pizza"> <abstractContainer id="idaio01" name="idaio01"> <abstractIndividualComponent id="idaio02" name="Choose quantity"> </abstractIndividualComponent> <abstractIndividualComponent id="idaio03" name="Choose size"> </abstractIndividualComponent> … <abstractIndividualComponent id="idaio06" name="[Choose meat]"> </abstractIndividualComponent> </abstractContainer> <abstractContainer id="idaio07" name="idaio07"> <abstractIndividualComponent id="idaio08" name="Give name"> </abstractIndividualComponent> … </abstractContainer> </abstractContainer> </auimodel> Equivalence in tree representation
  51. 51. Case study • The first existing application is ordering pizza. • the task “Choose a pizza” is multimodal (cf. CUI model and FUI (XHTML+VoiceXML)) • The task “Give delivering address” can not be multimodal (and does not exist). <outputText id="Ask_for_pizza_quantity" name="Ask_for_pizza_quantity" defaultContent="Quantity:"/> <inputText id="pizzaQuantity" name="quantity" defaultContent="1" voice_prompt="How many pizzas would you like?" voice_event_help="Say a number between one and twenty." voice_event_nomatch="Sorry I did not understand you." voice_event_noinput="You have to pronounce a quantity of pizza."/> <voice_quantity:grammar> <![CDATA[ #JSGF V1.0; grammar pizza_quantity; public <quantity> = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 ; ]]> </voice_quantity:grammar> </inputText> <outputText id="Ask_for_pizza_size" name="Ask_for_pizza_size" defaultContent="Size:"/> <group voice_prompt="What size would you like?"> <radioButton id="radiobuttonSize1" name="radiobuttonSize" defaultContent="small" /> <radioButton id="radiobuttonSize2" name="radiobuttonSize" defaultContent="medium"/> <radioButton id="radiobuttonSize3" name="radiobuttonSize" defaultContent="large"/> <voice_quantity:grammar> <![CDATA[ #JSGF V1.0; grammar pizza_size; public <size> = small | medium | large ; ]]> </voice_quantity:grammar> </group> Order a pizza AUI01: Choose a pizza Choose size Choose toppings Choose vegetable Choose meat AUI02: Give delivering address Give name Give phone Give address Choose quantity CUI AUI FUI
  52. 52. Case study • The second existing application is to order Chinese food. • the task “Choose Meal” is GUI (cf. CUI model and FUI (realized with GrafiXML) • The task “Give delivering address” exists. CUI AUI FUI <cuiModel id="ChineseFood-cui_12" name="ChineseFood-cui"> <window id="window_component_0" name="window_component_0" defaultContent="Chinese Food Order" width="263" height="491"> <gridBagBox id="grid_bag_box_1" name="grid_bag_box_1" gridHeight="24" gridWidth="13"> <outputText id="output_text_component_2" name="output_text_component_2" defaultContent="APPETIZER :"/> <checkBox id="checkbox_component_3" name="checkbox_component_3" defaultContent="Small Fried Shrimp"/> <checkBox id="checkbox_component_4" name="checkbox_component_4" defaultContent="Nicky's Egg Roll"/> <checkBox id="checkbox_component_5" name="checkbox_component_5" defaultContent="Fried Popcorn Shrimp"/> <outputText id="output_text_component_6" name="output_text_component_6" defaultContent="STARTER :" isVisible="true"/> <radioButton id="radiobutton_component_7" name="radiobutton_component_7" defaultContent="Seaweed Soup" isVisible="true"/> <radioButton id="radiobutton_component_9" name="radiobutton_component_9" defaultContent="Hot and Sour Soup"/> … <button id="button_component_22" name="button_component_22" defaultContent="Cancel" isVisible="true"/> <button id="button_component_23" name="button_component_23" defaultContent="Order" isVisible="true"/> </gridBagBox> </window> </cuiModel>
  53. 53. Case study • Goals: • multimodal application allowing to order Chinese food or pizza, • reuse the “give delivering address” task from the Chinese food ordering applicationAUI AUI0: Order food AUI0’: Choose food AUI03: Choose meal AUI02: Give delivering address AUI01: Choose a pizza Give name Give phone Give address [Choose Appetizer] [Choose Starter] choose soup Choose rice Choose Quantity Choose Size Choose toppings [Choose Vegetable] [Choose Meat] FUI
  54. 54. Composition au niveau des tâches  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform textInput button button Window AIC facet=control AIC facet=control AIC facet=control AbstractIndividual Container textInput button button Window AIC facet=control AIC facet=control AIC facet=control AbstractIndividual Container Source = < User, Platform, Environment > Target = < User, Platform, Environment > LEWANDOWSKI A., LEPREUX S., BOURGUIN G. (2007). Tasks models merging for high-level component composition. J. Jacko (Ed.), Human-Computer Interaction, Part I, HCII 2007, Lecture Notes in Computer Science (LNCS) 4550, Springer-Verlag, pp. 1129-1138, juillet
  55. 55. Composition au niveau des tâches • Travaux de Gregory Bourguin et Arnaud Lewandowski (Laboratoire d’informatique du littoral) et Jean-Claude Tarby (LIFL) : • Les arbres de tâches sont intégrés à chaque composant métier. • La composition de composant métier => composition d’arbres de tâches • => Toujours une notation avec structure arbres
  56. 56. Composition au niveau des tâches • Illustration : • 2 composants chat et tableau blanc possédant des tâches « similaires ».
  57. 57. Composition au niveau des tâches • Illustration suite : • Résultat de la composition (fusion).
  58. 58. Problématique de construction d’IHM par composition
  59. 59. Projet ASPECT Composition de composants et de leurs IHMs 200 3
  60. 60. Equipes et travaux en présence Equipe Rainbow Anne-Marie Pinna-Dery and Jérémy Fierstone. Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’03, volume LNCS 2795, pages 456–460, Udine, Italy, September 2003. L. Chittaro (Ed.), Springer Verlag.
  61. 61. Problématique • Applications évolutives et adaptables • accessibles via un PDA, un portable ou une station • variabilité des fonctionnalités selon le contexte d'utilisation (mode dégradé, connecté ou déconnecté, dépendance des ressources…) • Applications construites à base de composants (composants métiers, composants d’IHM, composants services…)  S’appuyer sur les infrastructures systèmes (RMI, EJB, …)  Fournir une plate-forme à composants  Exemples : • Agenda collaboratif • Gestion commerciale (facturations, commandes, client, fournisseur)
  62. 62. Composition de composants " Fusion de menus correspondants aux composants (1)
  63. 63. Composition de composants " Fusion de menus correspondants aux composants (2)
  64. 64. Proposition : modèle de composants et abstraction • La communication entre composants IHM et métier est exprimée par des interactions • Un langage abstrait de description structurelle des IHMs : SUNML dans la lignée de XForms, RIML,... (inspiré de UIML) • Composition de composants métiers par interactions • Règles de composition adaptées aux IHMs • Fusion de règles vérifiant la cohérence de la composition • Atelier de composition : Amusing Réutiliser des composants métiers Composer les IHMs des composants métiers Un modèle de composant + ISL + SUNML Un modèle de composants qui découple composant métier et composants d ’IHM. Spécification d ’ IHM indépendantes du support
  65. 65. De l’IHM abstraite vers l’IHM concrète JFrame1 JPanel1 JLabel1 JField1 ... IHM concrète (Exécution) Projection FicheClient MainDialog LabelFieldNom FieldNom ... IHM abstraite (Exécution) HMI Dialog Field Field JFrame JPanel JTextFieldJLabel <sunml> <interface id="FicheClient"> <structure> <dialog id="MainDialog" sequence="true"> ... <field id="LabelFieldNom" mode="read"> <element type="String">Nom :</element> </field> <field id="FieldNom" mode="read-write"> <element type="String">Toto</element> </field> ... </dialog> </structure> </interface> </sunml> Fichier SUNML (Spécification) Réification durand Composant métier (Exécution) ? ? ?
  66. 66. Exemple de Liste de Clients <sunml> <interface id="ListeClients"> <structure> <dialog id="MainDialog" sequence="true"> <list id="ListeClients" reference="FicheClient" select="Field[FieldNom]"/> </list> </structure> </interface> </sunml> Fichier SUNML (spécification) Exemple en Swing Composition Représentant – Client (1-n) : Liste de clients
  67. 67. De l’IHM abstraite vers l’IHM concrète Séparation du composant d’IHM du composant métier Expression des communications possibles entre ces composants avec ISL Adaptation des composants suivant le contexte d’exécution durand FicheClient IHM concrète IHM abstraite Composant métier JFrame1 Légende Instance interaction Controleur
  68. 68. Exercice : SUNML et ISL ?  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform
  69. 69. Equipe RAINBOW I3S Construction d’applications adaptables par composition
  70. 70. Un modèle inspiré d’Arche pour les services Proposer un modèle d’architecture pour un service interactif N services fonctionnels et leurs interactions utilisateurs : comment fusionner le tout ? Services Fonctionnel Services D’interaction AdaptorAdaptor Dialogue
  71. 71. Quid des assemblages Comment fusionner 2 services respectant l’architecture? Composition d’arches ? Assemblage des services fonctionnels Quid des dialogues ? Expression et fusion Quid des IHM? Expression et fusion
  72. 72. Travaux de références pour le domaine utilisateur Travaux composants (Fractal, SOA, Noah, WCOMP MODEL) Gestion de la dynamique de l’application (apparition et disparition de composants et de services) Expression des assemblages (orchestration, règles isl, langages d’aspects…) Sureté des assemblages Travaux sur l’IDM Modèles et transformation de modèles Fusion de modèles Travaux en IHMs Plasticité des interfaces Expression de modèles pour l’IHM (taches, dialogues…)
  73. 73. Nos spécificités Etre centré sur le dialogue : relation « fonctionnel et IHM » Déterminer le bon modèle de dialogue et avoir une architecture N-Arches Etre indépendant plateforme : s’appuyer sur un modèle Etre indépendant dispositifs : s’appuyer sur les modèles d’IHM pour la plasticité Faire collaborer des modèles et pouvoir les changer Assurer la dynamique de l’application : assembler à tous les niveaux Déduire au maximum les assemblages Trouver le bon niveau d’IHM abstrait
  74. 74. Adapter l’interface à l’évolution du système déduction Assemblage de services (Orchestrations, fusion d’aspects, composants hiérarchiques) Assemblage d’IHMs (Utilisation d’IHMs abstraites, Puis projection sur devices) Intervention Si conflits S’adresse au développeur
  75. 75. Adapter l’interface aux besoins utilisateurs 2 utilisateurs : le développeur ou l’utilisateur final Choix des services organisation de l’IHM Choix des devices Dialogue Device Device IS Service Marks Service IS Service WebCal Service IS Service WebCal Service
  76. 76. Adaptation du système Déduire l’assemblage pour un utilisateur
  77. 77. MPI Points communs aux adaptations visées Conception Exécution Noyau Fonctionnel IHM Evolution Noyau Fonctionnel Apparition, disparition de services Nouvelles Utilisations Préférences, Contexte d’utilisation … Adaptation Adaptation M IHM Un langage abstrait orienté composition : SUNML Un composant d’IHM : représentation fractal Un modèle de dialogue et un modèle de plateforme Une collaboration entre les modèles

×