SlideShare une entreprise Scribd logo
1  sur  66
Télécharger pour lire hors ligne
Plasticité2014 part4vf
Work-spaceUIDesign-KnowledgeReactionContextMultimodalInter-modalIntra-modalUserPlatformStaticGranularityModalityAdaptation typeContextof useLearningDynamicEnvironmentInteractor
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
Plasticité2014 part4vf
Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction (IST R&D 2001-2004) 
http://giove.isti.cnr.it/projects/cameleon.html
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
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
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 
Source platform Target platform
Plasticité2014 part4vf
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 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.
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)
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 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
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) 
? 
? 
?
<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
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
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
Source platform Target platform
http://www.servface.eu/
+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
[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 + Annotations par un “Expert” 
Génération de l’interface “abstraite” 
Transformations: 
1)M2M 
2)M2C 
Interface Finale 
Service Annotator 
Service Composer 
MARIA
[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’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
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
 Task & Concepts 
 Abstract UI 
 Concrete UI 
 Final UI 
Source platform Target platform
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
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
•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
Plasticité2014 part4vf
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
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 ?
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
Sophie Lepreux 
15 novembre 2013
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
Source = < User, Platform, Environment > 
Target = < User, Platform, Environment >
 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 >
<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(…)
Plasticité2014 part4vf
Plasticité2014 part4vf
- 
-
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’.
Développé par Benjamin Michotte (BCHI) 
intersection 
Unique Union 
Normal Union 
Fusion 
Difference (right) 
Difference (left) 
Equivalence 
set 
selection 
Cut or extract 
projection
 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.
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
 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
 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>
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
 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
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
◦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 le tout ? 
Services 
Fonctionnel 
Services 
D’interaction 
Adaptor 
Adaptor 
Dialogue
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
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…)
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
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
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
Déduire 
l’assemblage 
pour un utilisateur
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
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
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
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

Contenu connexe

Tendances

Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Anthony Gelibert
 
Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...Atelier IHM Polytech Nice Sophia
 
IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteMarius Butuc
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Atelier IHM Polytech Nice Sophia
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHMAnne-Marie Pinna-Dery
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Anne-Marie Pinna-Dery
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursAnne-Marie Pinna-Dery
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm ludolmn
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Use Age
 

Tendances (20)

Introduction à la plasticité
Introduction à la plasticitéIntroduction à la plasticité
Introduction à la plasticité
 
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
 
Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...
 
Plasticitérecherche2017
Plasticitérecherche2017Plasticitérecherche2017
Plasticitérecherche2017
 
IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: Plasticite
 
Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
 
Intro conception2015vf bis
Intro conception2015vf bisIntro conception2015vf bis
Intro conception2015vf bis
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
 
Intro ihm
Intro ihmIntro ihm
Intro ihm
 
Introduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHMIntroduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHM
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
 
Présentation ceihma tous
Présentation ceihma tousPrésentation ceihma tous
Présentation ceihma tous
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateurs
 
Modelisation et maquettage 2015
Modelisation et maquettage 2015Modelisation et maquettage 2015
Modelisation et maquettage 2015
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
Android introvf
Android introvfAndroid introvf
Android introvf
 

Similaire à Plasticité2014 part4vf

Outils de construction pour la recherche
Outils de construction pour la rechercheOutils de construction pour la recherche
Outils de construction pour la rechercheJohan Moreau
 
Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...
Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...
Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...DotRiver
 
Soft fluent@md day2011
Soft fluent@md day2011Soft fluent@md day2011
Soft fluent@md day2011MDDAY11
 
Présentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéPrésentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéSimplicité Software
 
Une architecture multi-agents pour la découverte et la construction de prof...
Une architecture multi-agents pour la découverte et la construction de prof...Une architecture multi-agents pour la découverte et la construction de prof...
Une architecture multi-agents pour la découverte et la construction de prof...Enis Chouchane
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Microsoft
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Microsoft
 
[TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte![TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte!Alexandre Touret
 
Dotriver Openadira 20100128
Dotriver Openadira 20100128Dotriver Openadira 20100128
Dotriver Openadira 20100128Thierry CHABROL
 
Presentation BMIA
Presentation BMIAPresentation BMIA
Presentation BMIAPMarsaud
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsEric DI POL
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiquesJohan Moreau
 
Captronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presenteeCaptronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presenteePatrick MOREAU
 

Similaire à Plasticité2014 part4vf (20)

Outils de construction pour la recherche
Outils de construction pour la rechercheOutils de construction pour la recherche
Outils de construction pour la recherche
 
PFE PPT2
PFE PPT2PFE PPT2
PFE PPT2
 
Interactivite@ledna
Interactivite@lednaInteractivite@ledna
Interactivite@ledna
 
Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...
Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...
Virtualisation du Poste de Travail - Desktop as a Service - 16h - Atelier VDI...
 
Soft fluent@md day2011
Soft fluent@md day2011Soft fluent@md day2011
Soft fluent@md day2011
 
Présentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéPrésentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud Simplicité
 
Une architecture multi-agents pour la découverte et la construction de prof...
Une architecture multi-agents pour la découverte et la construction de prof...Une architecture multi-agents pour la découverte et la construction de prof...
Une architecture multi-agents pour la découverte et la construction de prof...
 
Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !
 
[TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte![TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte!
 
I fog sim
I fog simI fog sim
I fog sim
 
Dotriver Openadira 20100128
Dotriver Openadira 20100128Dotriver Openadira 20100128
Dotriver Openadira 20100128
 
output
outputoutput
output
 
Presentation BMIA
Presentation BMIAPresentation BMIA
Presentation BMIA
 
Gl intro
Gl introGl intro
Gl intro
 
test
testtest
test
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiques
 
Captronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presenteeCaptronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presentee
 

Dernier

Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxMartin M Flynn
 
Présentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 Toulouse
Présentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 ToulousePrésentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 Toulouse
Présentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 ToulouseYvonGervaise
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024frizzole
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementM2i Formation
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2JeanLucHusson
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFEAhmam Abderrahmane
 
Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...
Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...
Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...Technologia Formation
 

Dernier (7)

Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptx
 
Présentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 Toulouse
Présentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 ToulousePrésentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 Toulouse
Présentation à Séminaire IA de la Fédération Gay Lussac , 25/03/24 Toulouse
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changement
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFE
 
Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...
Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...
Webinaire Cohésion | Le pouvoir du mentorat au travail : pour qui, pourquoi, ...
 

Plasticité2014 part4vf

  • 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
  • 9.  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform
  • 11. Composition de composants et de leurs IHMs 2003
  • 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)
  • 14. Composition de composants "Fusion de menus correspondants aux composants (1)
  • 15. Composition de composants "Fusion de menus correspondants aux composants (2)
  • 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
  • 17. 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) ? ? ?
  • 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
  • 20.  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform
  • 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
  • 26. [Feldmann et al., 2009] [Janeiro, 2009]
  • 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
  • 28.  Task & Concepts  Abstract UI  Concrete UI  Final UI  Task & Concepts  Abstract UI  Concrete UI  Final UI Source platform Target platform
  • 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
  • 36. Sophie Lepreux 15 novembre 2013
  • 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
  • 38. Source = < User, Platform, Environment > Target = < User, Platform, Environment >
  • 39.  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 >
  • 40. <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(…)
  • 43. - -
  • 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 ».
  • 54. ◦Illustration suite : Résultat de la composition (fusion).
  • 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