3. 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
5. Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction (IST R&D 2001-2004)
http://giove.isti.cnr.it/projects/cameleon.html
6. 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
7. 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
8. Tâches & Concepts
IHM abstraite
IHM concrète
IHM finale
Config 1
Différents niveaux d’abstraction
12. 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.
13. 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)
16. 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
18. <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
19. 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
22. +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
24. [Nestler et al., 2009]
[Feldmann et al., 2009]
End-User Programming
25. [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
27. 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
29. 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
30. 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
31. •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
33. 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
34. 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 ?
35. 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
37. 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
44. 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’.
45. Développé par Benjamin Michotte (BCHI)
intersection
Unique Union
Normal Union
Fusion
Difference (right)
Difference (left)
Equivalence
set
selection
Cut or extract
projection
46. 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.
47. 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
48. 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
49. 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>
50. 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
51. 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
52. 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
53. ◦Illustration :
2 composants chat et tableau blanc possédant des tâches « similaires ».
56. 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
57. 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
58. 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…)
59. 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
60. 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
61. 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
63. 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
64. 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
65. 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
66. 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