Work-spaceUIDesign-KnowledgeReactionContextMultimodalInter-modalIntra-modalUserPlatformStaticGranularityModalityAdaptation...
Equipe IIHM Laboratoire IMAG à Grenoble 
◦Gaelle Calvary & Joelle Coutaz http://iihm.imag.fr/publication/ 
et http://iihm...
Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction (IST R&D 2001-2004) 
http://giove.isti....
http://giove.isti.cnr.it/projects/cameleon.html 
I.S.T.I (Pisa, Italy) 
Université Catholique de Louvain (Louvain, Belgi...
Phase de “conception” 
Config 1 
Modèle 
Tâches et 
Concepts 
IHM concrète 
IHM finale 
IHM abstraite 
Modèle 
Tâches et 
...
Tâches & Concepts 
IHM abstraite 
IHM concrète 
IHM finale 
Config 1 
Différents niveaux d’abstraction
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
...
Composition de composants 
et de leurs IHMs 
2003
Equipe Rainbow 
http://atelierihm.polytech.unice.fr/bibliographie/ 
Anne-Marie Pinna-Dery and Jérémy Fierstone. Component ...
Applications évolutives et adaptables 
◦accessibles via un PDA, un portable ou une station 
◦variabilité des fonctionnali...
Composition de composants 
"Fusion de menus correspondants aux composants (1)
Composition de composants 
"Fusion de menus correspondants aux composants (2)
La communication entre composants IHM et métier est exprimée par des interactions 
Un langage abstrait de description st...
JFrame1 
JPanel1 
JLabel1 
JField1 
... 
IHM concrète (Exécution) 
Projection 
FicheClient 
MainDialog 
LabelFieldNom 
Fie...
<sunml> 
<interface id="ListeClients"> 
<structure> 
<dialog id="MainDialog" sequence="true"> 
<list id="ListeClients" ref...
Séparation du composant d’IHM du composant métier 
Expression des communications possibles entre ces composants avec ISL 
...
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
...
http://www.servface.eu/
+Annotations de services avec des éléments d’interfaces 
+Composition de services 
+Génération de l’interface du service «...
[Izquierdo et al., 2009]
[Nestler et al., 2009] 
[Feldmann et al., 2009] 
End-User Programming
[Nestler et al., 2009] 
[Feldmann et al., 2009] 
Services (WSDL) 
Services Annotés 
Auto-génération d’annotations + Annota...
[Feldmann et al., 2009] 
[Janeiro, 2009]
8/15 
[Feldmann et al., 2009] 
[Janeiro, 2009] 
Transformations: 
1)M2M 
2)M2C 
Interface Finale 
Services 
Génération d’a...
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
...
Définir, valider et standardiser un langage de description d'interfaces 
utilisateur (UIDL) pour améliorer la productivité...
UsiXML USer Interface eXtensible Markup Language) XML pour applications interactives UsiXML pour des non développeurs : an...
•UsiXML indépendant device, plateforme et modalités 
•UsiXML abstraction des éléments de base : widgets, controls, contain...
Université catholique de Louvain : Jean Vanderdonckt 
Université Joseph Fourier Grenoble : Joelle Coutaz 
Publications Sci...
Université Joseph Fourier Grenoble : Joelle Coutaz 
http://iihm.imag.fr/publication/ 
http://iihm.imag.fr/publication/MFC1...
Université catholique de Louvain : Jean Vanderdonckt 
http://uclouvain.academia.edu/JeanVanderdonckt/Papers 
Generating Us...
Sophie Lepreux 
15 novembre 2013
Composition d’interfaces utilisateurs (en résumé) 
◦basée sur UsiXML = langage de description d’interface Utilisateur (UI...
Source = < User, Platform, Environment > 
Target = < User, Platform, Environment >
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
...
<cuiModel id="FicheClient-cui_3" name="FicheClient-cui"> 
<window id="window_component_0" name="window_component_0" 
width...
- 
-
Fusion( 
, 
)= 
algorithm: 
The two trees T1 and T2 are merge at the %level R+1 to form the T3 window. 
IF (direction = ve...
Développé par Benjamin Michotte (BCHI) 
intersection 
Unique Union 
Normal Union 
Fusion 
Difference (right) 
Difference ...
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
...
Order a pizza 
AUI01: Choose a pizza 
Choose 
size 
Choose 
toppings 
Choose 
vegetable 
Choose 
meat 
AUI02: Give deliver...
 The first existing application is 
ordering pizza. 
◦ the task “Choose a pizza” is 
multimodal (cf. CUI model and FUI 
(...
 The second existing application is 
to order Chinese food. 
◦ the task “Choose Meal” is GUI (cf. CUI 
model and FUI (rea...
Goals: 
◦multimodal application allowing to order Chinese food or pizza, 
◦reuse the “give delivering address” task from ...
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
...
Travaux de Gregory Bourguin et Arnaud Lewandowski (Laboratoire d’informatique du littoral) et Jean-Claude Tarby (LIFL) : ...
◦Illustration : 
2 composants chat et tableau blanc possédant des tâches « similaires ».
◦Illustration suite : 
Résultat de la composition (fusion).
Construction d’applications adaptables par composition
Proposer un modèle d’architecture 
pour un service interactif 
N services fonctionnels et leurs interactions utilisateurs ...
Comment fusionner 2 services respectant l’architecture? 
Composition d’arches ? 
Assemblage des services 
fonctionnels 
Qu...
Travaux composants (Fractal, SOA, Noah, WCOMP MODEL) 
Gestion de la dynamique de l’application (apparition et 
disparition...
Etre centré sur le dialogue : relation « fonctionnel et IHM » 
Déterminer le bon modèle de dialogue et avoir une architect...
déduction 
Assemblage de services 
(Orchestrations, fusion 
d’aspects, composants 
hiérarchiques) 
Assemblage d’IHMs 
(Uti...
2 utilisateurs : le développeur ou l’utilisateur final 
Choix des services organisation de l’IHM 
Choix des devices 
Dialo...
Déduire 
l’assemblage 
pour un utilisateur
MPI 
Conception 
Exécution 
Noyau Fonctionnel 
IHM 
Evolution Noyau Fonctionnel 
Apparition, disparition de services 
Nouv...
Equipe Rainbow 
http://rainbow.i3s.unice.fr/doku.php?id=public:publications 
Un langage de description d’IHM 
Component mo...
Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’03 
"When th...
A Universal, Declarative, Multiple Abstraction-Level Language for Service-Oriented Applications in Ubiquitous Environments...
Plasticité2014 part4vf
Plasticité2014 part4vf
Plasticité2014 part4vf
Plasticité2014 part4vf
Plasticité2014 part4vf
Plasticité2014 part4vf
Prochain SlideShare
Chargement dans…5
×

Plasticité2014 part4vf

605 vues

Publié le

Recherche et Plasticité des IHM

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
605
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
18
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Plasticité2014 part4vf

  1. 1. Work-spaceUIDesign-KnowledgeReactionContextMultimodalInter-modalIntra-modalUserPlatformStaticGranularityModalityAdaptation typeContextof useLearningDynamicEnvironmentInteractor
  2. 2. Equipe IIHM Laboratoire IMAG à Grenoble ◦Gaelle Calvary & Joelle Coutaz http://iihm.imag.fr/publication/ et http://iihm.imag.fr/demo/ Equipe RAINBOW Laboratoire I3S à Sophia Antipolis ◦Michel Riveill & Philippe Renevier & Audrey Occello & Anne Marie Dery http://rainbow.i3s.unice.fr/doku.php?id=public:publications et http://atelierihm.unice.fr/recherche/travaux-de-li3s/ontocompo-composition-dapplications-multi- modeles-dirigee-par-la-composition-des-interfaces-graphiques/ Laboratoire HIIS à l’université de Pise ◦Fabio Paterno http://hiis.isti.cnr.it/publications.php et http://giove.isti.cnr.it/videos 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
  3. 3. Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction (IST R&D 2001-2004) http://giove.isti.cnr.it/projects/cameleon.html
  4. 4. 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
  5. 5. 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
  6. 6. Tâches & Concepts IHM abstraite IHM concrète IHM finale Config 1 Différents niveaux d’abstraction
  7. 7.  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform
  8. 8. Composition de composants et de leurs IHMs 2003
  9. 9. Equipe Rainbow http://atelierihm.polytech.unice.fr/bibliographie/ 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.
  10. 10. 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)
  11. 11. Composition de composants "Fusion de menus correspondants aux composants (1)
  12. 12. Composition de composants "Fusion de menus correspondants aux composants (2)
  13. 13. 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
  14. 14. JFrame1 JPanel1 JLabel1 JField1 ... IHM concrète (Exécution) Projection FicheClient MainDialog LabelFieldNom FieldNom ... IHM abstraite (Exécution) HMI Dialog Field Field JFrame JPanel JTextField JLabel <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) ? ? ?
  15. 15. <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
  16. 16. 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
  17. 17.  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform
  18. 18. http://www.servface.eu/
  19. 19. +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
  20. 20. [Izquierdo et al., 2009]
  21. 21. [Nestler et al., 2009] [Feldmann et al., 2009] End-User Programming
  22. 22. [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
  23. 23. [Feldmann et al., 2009] [Janeiro, 2009]
  24. 24. 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
  25. 25.  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform
  26. 26. 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
  27. 27. 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
  28. 28. •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
  29. 29. Université catholique de Louvain : Jean Vanderdonckt Université Joseph Fourier Grenoble : Joelle Coutaz Publications Scientifiques du projet http://www.usixml.eu/effective-ie-done/scientific- publications http://www.usixml.eu/newsletters http://www.usixml.org/en/meixner-g-paterno-f- vanderdonckt-j-past-present-and-future-of-model-based- user-interface-development.html?IDC=465&IDD=1317
  30. 30. Université Joseph Fourier Grenoble : Joelle Coutaz http://iihm.imag.fr/publication/ http://iihm.imag.fr/publication/MFC11b/ Flexible Plans for Adaptation by End-Users http://iihm.imag.fr/publication/GCM+09a/ Composition dynamique d’Interfaces Homme-Machine : Besoin utilisateur ou Défi de chercheur ?
  31. 31. Université catholique de Louvain : Jean Vanderdonckt http://uclouvain.academia.edu/JeanVanderdonckt/Papers Generating User Interface for Information Applications from Task, Domain and User models with DB-USE http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270313/Generating_User_Interface_for_Information_Applications_from_Task_Domain_and_User_models_with_DB-USE User Interface Composition with UsiXML http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270311/User_Interface_Composition_with_UsiXML
  32. 32. Sophie Lepreux 15 novembre 2013
  33. 33. 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
  34. 34. Source = < User, Platform, Environment > Target = < User, Platform, Environment >
  35. 35.  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 Source = < User, Platform, Environment > Target = < User, Platform, Environment >
  36. 36. <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 (Defaultvalue =«customerform») Box (type = horizontal)Box (type = horizontal) Output(…) Input(…) Box (type = horizontal) Output(…) Input(…)
  37. 37. - -
  38. 38. 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’.
  39. 39. Développé par Benjamin Michotte (BCHI) intersection Unique Union Normal Union Fusion Difference (right) Difference (left) Equivalence set selection Cut or extract projection
  40. 40.  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 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.
  41. 41. 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 AUI Model AbstractContainer AUI0 AbstractContainer AUI03 AbstractContainer R2 AUI02 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
  42. 42.  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
  43. 43.  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>
  44. 44. Goals: ◦multimodal application allowing to order Chinese food or pizza, ◦reuse the “give delivering address” task from the Chinese food ordering application AUI 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
  45. 45.  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 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
  46. 46. 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
  47. 47. ◦Illustration : 2 composants chat et tableau blanc possédant des tâches « similaires ».
  48. 48. ◦Illustration suite : Résultat de la composition (fusion).
  49. 49. Construction d’applications adaptables par composition
  50. 50. 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 Adaptor Adaptor Dialogue
  51. 51. 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
  52. 52. 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…)
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. Déduire l’assemblage pour un utilisateur
  57. 57. MPI 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
  58. 58. Equipe Rainbow http://rainbow.i3s.unice.fr/doku.php?id=public:publications Un langage de description d’IHM Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’03 Du fonctionnel vers les IHM When the Functional Composition Drives the User Interfaces Composition: Process and Formalization Des IHM vers le fonctionnel https://nyx.unice.fr/publis/brel-pinna-dery-etal:2011.pdf "ONTOCOMPO: AN ONTOLOGY-BASED INTERACTIVE SYSTEM TO COMPOSE APPLICATIONS
  59. 59. Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’03 "When the Functional Composition Drives the User Interfaces Composition: Process and Formalization" in Proceedings of the Proceedings of the 3rd ACM SIGCHI symposium on Engineering interactive computing systems, ONTOCOMPO: AN ONTOLOGY-BASED INTERACTIVE SYSTEM TO COMPOSE APPLICATIONS http://iihm.imag.fr/publication/MFC11b/ Flexible Plans for Adaptation by End-Users http://iihm.imag.fr/publication/GCM+09a/ Composition dynamique d’Interfaces Homme-Machine : Besoin utilisateur ou Défi de chercheur ? Model Driven Adaptation for Plastic User Interfaces, Proceedings of the 11th IFIP TC 13 International Conference Interact’07 Generating User Interface for Information Applications from Task, Domain and User models with DB-USE http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270313/Generating_User_Interface_for_Information_Applications_from_Task_Domain_and_User_models_with_DB-USE http://www.usixml.eu/newsletters User Interface Composition with UsiXML http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270311/User_Interface_Composition_with_UsiXML
  60. 60. A Universal, Declarative, Multiple Abstraction-Level Language for Service-Oriented Applications in Ubiquitous Environments FABIO PATERNO’, CARMEN SANTORO, and LUCIO DAVIDE SPANO ISTI-CNR http://www.servface.eu/index.php?option=com_docman&task=cat_view&gid=34&limit=5&limitstart=0&order=date&dir=DESC&Itemid=60 Service Composition at the Presentation Layer using Web Service Annotations 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 http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504

×