Post on 03-Apr-2015
IHM et plasticité Anne-Marie Déry pinna@polytech.unice.fr
IHM etDifférents supports
Différents utilisateursDifférents environnements
Problématique - aperçu des solutions industrielles et recherche
Plasticité des interfacesUn peu d’histoire …
Introduction du terme à Interact’99
Capacité d’une interface à s’adapter à son contexte
d’usage dans le respect de son utilisabilité
Contexte d’usage Plate-forme
Environnement
Utilisateur (2001)
Introduction : plasticité des IHMs – Page 4
Contenu du module
Semaine 1 Introduction au module Semaine 2 4H Cours Flex Semaine 3 xulSemaine 4 XULSemaine 5 Flex sur mobile
Semaine 6 HTML 5Semaine 7 IIHMSemaine 8 ENTRETIENS
Evaluation
Mettre en place un site web avec :TP téléchargeables
Rapport de synthèse sur les travaux de recherche de votre choix en reagrd sur
le domaine de plasticité traitéplateforme / environnement / utilisateurconception / exécutionmodèle sous jacentillustration du besoin sur un exempleavantages et inconvénients
Entretien indivuel Objectif : vérifier vos acquis dans le moduleDéroulement : démonstrations à la demande et réponse aux questions sur le
travail de recherche étudiéDurée : 30 minutes
Motivations et exemples d’applications
visées
Introduction : plasticité des IHMs – Page 7
Diversité des supports : intéractions
Capacités d’interaction nouvelle : tactilebornes - tables – vitrines – murs interactifs
Différence de taille des écrans – multi touch ou non – utilisateur experts ou nonEnvironnement bruyant – sombre …
Introduction : plasticité des IHMs – Page 8
Besoins de plasticité
Entre supports tactiles : de la table au mur, du téléphone au PC ?
Entre un support non tactile et un support tactile : quand changer l’interaction ? Pourquoi ? Impact sur la présentation ? Impact sur l’enchaînement des taches
Besoin identifié par un changement d’environnement(arrivée dans un lieu public) - Besoin provoqué par l’utilisateur (changement de matériel,
mains occupées par une tache ?)
Introduction : plasticité des IHMs – Page 9
Diversité des supports : supports dédiés
Supports dédiés à une activité
Niveau d’expertise des utilisateurs experts – Niveau de fiabilitéEn mobilité
Introduction : plasticité des IHMs – Page 10
Besoins en plasticité
Nouveau matériel Changement de voiture Sortie d’une nouvelle montre de plongée Changement de lieu : sur le site de dépannage ou sur le
site professionnel : exemple du fontainier, du réparateur d’électroménager
Choix de l’utilisateur ou de son environnement professionnel ou du niveau d’expertise
MÊMES USAGES ?MÊMES SERVICES ?
Supports mobiles
Introduction : plasticité des IHMs – Page 12
Besoin en plasticité
Passage en mobilité En déplacement Dans les transports en commun
Changement de matérielNouvelles technologiesNouveaux services
Quid de l’usage ? Quid du développeur ?
Introduction : plasticité des IHMs – Page 13
IHM, utilisateurs et usages
Complexification de la conception ergonomique et logicielle
Continuité de service et adaptation au lieuet à l’usager
Introduction : plasticité des IHMs – Page 14
Besoins en plasticité
Au domicile Des utilisateurs différents du même service Des supports différents selon les pièces et l’activité
A l’extérieur – dans la rue Un environnement interagissant
Les sollicitations commerciales, culturelles, de déplacement Des supports privés (mobiles) ou des supports publics
(bornes interactives,….) Des contraintes environnementales (bruit, lumière, mains
occupées…)Dans l’univers professionnel
Supports privés et supports professionnels : taches fixéesD’un lieu à un autre
Continuité de services
Introduction : plasticité des IHMs – Page 15
Espace problème
Domaine de plasticité
Environnement
Plate-forme
Utilisateur
Seuil de plasticité
Domaine de plasticité
C2 Contexte non couvert
C1 Contexte couvert par l’IHM
Introduction : plasticité des IHMs – Page 16
Plastique pour qui et quand ?
2 cas A la conception – faciliter la vie du développeur
Réutiliser un maximum pour chaque nouvelle cible Diminuer le coût de développement
A l’exécution – faciliter la vie de l’utilisateur final
Faire migrer une application d’un support à un autre Faciliter l’usage – conserver les habitudes tout en
profitant des spécificitésdes supports
Introduction : plasticité des IHMs – Page 17
Comment identifier le problème ?
Démarche
Identifier le besoin en plasticitéQuand (conception et/ou exécution) ? Dans quel(s) environnent(s) ? Pour quel(s) utilisateur(s) ?
Identifier les technologies adaptées
Avoir une démarche modèle
Introduction : plasticité des IHMs – Page 18
Les acteurs
Organismes de normalisation
Les RIA
Les fournisseurs de services sur mobiles
Les chercheurs
Au début il y avait …..
Approche à la conception basée sur desTraducteurs
XML
XSLHTML
VoiceML
WMLAu centre une interface XMLisée
Approche à l’exécution :Migration
Problème ?
Exemple SI la batterie du PC faiblit ALORS passer sur PDA
SI condition ALORS action
Action Réaction
Reconnaissance de situation
Exécution de la réaction
Capture du
contexte
IdentificationDes solutions
candidates
Selection d’unesolutioncandidate
Détection de
changement decontexte
Identification du
changement decontexte
Exécution du
prologue
Execution de la
reaction
Execution de
L’épilogue
Calcul d’une réaction
Cadre de référence : phase “exécution”
Interventions dans le module
Des solutions partielles industrielles Pour des types d’application (Site Web) Pour des types de supports (téléphones mobiles)
Des projets – en recherche De la réutilisation pour la composition d’applications
existantes De la migration dirigée par l’utilisateur
Points communs : niveau de description des interfaces plus ou moins abstraits : Langages à balises et IHM
Bref historiqueconcernant les acteurs
Quand les organismes de normalisations’y mettent …
OASIS et W3C
UIMLhttp://www.uiml.org/
dérivé d'XML permettant de décrire des interfaces graphiques. Il y a des outils (renderers) qui convertissent une représentation d'UIML en représentation pour divers GUI (par exemple Java awt).un langage commun de description d'interface utilisateur, ouvert et libre d'utilisation qui soit indépendants des plateformes, qu'il s'agisse des plateformes actuelles ou futures.définir un métalangage canonique qui peut décrire n'importe quelle interface utilisateur, sans être tributaire du type d'unité ou d'interface graphique utilisée. UIML peut décrire les interfaces utilisateur - interface de bureau, interface web, interface mobile, système embarqué, ou encore applications « voix ».
UIML 1.0: Décembre 1997
UIML 3.1: Mars 2004
http://www.oasis-open.org UIML 4
W3C comment trouver l’infoQuelles infos et comment zoomer
UIML
« User Interface Markup Language »
Langage multi-interface (graphique, voix, ...)
Une norme : UIML (uiml.org)
Des implémentations ou « renderers » Harmonia : Awt/Swing,
HTML, WML, VXML, ... Rubico : Visual Basic, GUI
builder TV Server, AG : C++ for
embedded systems
Les 4 parties d'un document UIML:<Head> : metadata (author, date, version, ...)<Template> : réutilisation de fragments<Interface> : interface proprement dite
<Structure> : arbre des « widgets »<Style> : styles (propriétés) des widgets<Content> : contenu (texte, image, son)<Behavior> : objet / événement / action
<Peers> : mappings et liens vers l'extérieur
Traducteurs
XML
XSLHTML
VoiceML
WML
XML et XSL pour la présentation, UIML, SUNML, Xforms ….
User Interfaces langagesXML dans tout ses états
Introduction : plasticité des IHMs – Page 31
Recommandations W3C (World Wide Web Consortium)
http://www.w3.org/2001/di/Activity
CONSTAT : multiplication des terminaux, la distribution des contenus devient plus que jamais problématique. les données doivent être filtrées et leur format modifié.
Transformation ?la reconnaissance des caractéristiques de l'équipement client par le serveur.
Une solution :Le projet CC/PP (pour Composite Capability/Preference Profiles) 1999. Basé sur le format de meta-données RDF (Resource Description Framework), Application de XML pour décrire : les caractéristisques logicielles et matérielles d'un terminal (Web ou WAP, capacité machine, etc.) + les informations relatives au profil de son utilisateur.
Introduction : plasticité des IHMs – Page 32
CC/PP (dont font parti Ericsson, IBM, Nokia, SAP et Sun),
Un panel d'appareils assez large (téléphone portable, PC, assistant personnel,...), Avantage de CC/PP : proposer une méthode de description des configurations- réduire la quantité d'informations échangées entre client et serveur(protocoles de transmission sans fil restent limités en bande passante).- les variables d'un profil CC/PP (capacités du terminal, préférences utilisateur, etc.) peuvent être appliquées au sein d'une feuille de style XSLT afin de créerou d'adapter un document.
Recommandations W3C
Introduction : plasticité des IHMs – Page 33
XFormshttp://www.w3.org/2002/Forms/Activity.html
XForms un langage à balises pour les formulaires électroniques « modernes »
Basés sur XML et renvoie les valeurs saisies dans le formulaire sous forme de document XML
Il prend en compte l’authentification, l’utilisabilité et l’accessibilité, le device independence, l’internationalisation, et l’intégration pour plusieurs langages cibles tout en réduisant la mise en œuvre de traducteurs.
Introduction : plasticité des IHMs – Page 34
Mobile Web Initiativehttp://www.w3.org/2005/MWI/Activity.html
W3C MWI travaille actuellement à la mise en place des meilleures pratiques pour les sites web et les applications sur mobile
Il propose également des tests sur l’interoperabilité entre logiciels webs et l’usage du mobile au niveau social.
Ils accueillent des groupes de travail sur la thématique générale de l’utilisation des mobiles
1ere consigne : Design for one web
(cf http://www.w3.org/Mobile)
Introduction : plasticité des IHMs – Page 35
WAIhttp://www.w3.org/WAI/
Le Web est partout : les services publics sont en ligne (impots, sncf, enseignement, etc…)
Il doit donc être accessible à TOUS Comment traiter le handicap : visuel, auditif, physique, cognitif,
neurologique, etc. De plus les solutions ne doivent pas handicapées les personnes
non handicapées Web Content Accessibility Initiative (WAI) représente des
industriels, des chercheurs et des personnes connaissant bien les handicap
Donner des consignes et développer des solutions
Introduction : plasticité des IHMs – Page 36
WAIhttp://www.w3.org/WAI/
Principaux résultats
Outils automatiques de validation de pages webs(les sites publics ont longtemps été non conformes aux
tests)
Consignes pour évaluer si une page est accessible(exemple la faire lire par une synthèse vocale)
Consignes pour concevoir des pages accessibles (exemple classique du tag image à renseigner
correctement)
Introduction : plasticité des IHMs – Page 37
http://www.w3.org/2005/Incubator/model-based-ui/charter/
Model-based User Interfaces Incubator Group Charter
Model-based User Interfaces Incubator Group, a pour mission d’évaluer les travaux en recherche
autour des modèles pour la conception des IHMs pour essayer de sortir des standard
Par exemple : les concepteurs d’UsiXML font partie de ce groupe de réflexion
Quand les RIA sont inspirés
Introduction : plasticité des IHMs – Page 39
RIA = le meilleur du web et du "desktop"
RIA & conception des interfaces Séparer présentation - logique – données Briques d'IHM réutilisables
Nécessité d'installer un plugin dans le navigateur et forte concurrence sur les technologies Multiplication des technologies sur le poste de
travail !
...
RIAs
Introduction : plasticité des IHMs – Page 40
AJAX : un ensemble de techno open source éprouvées Asynchronous Javascript And XML Utilisation combinée nouvelle
Autres offres Adobe Flex (2004) :
http://www.adobe.com/support/documentation/en/flex/ Microsoft Silverlight (2006) : http://www.silverlight.net Sun JavaFX (2008) :
http://www.javafx.com/ Mozilla XUL (XML User Interface Language)
http://www.mozilla.org/projects/xul/ ...
Solutions RIAs disponibles
Source : Google Insights
Introduction : plasticité des IHMs – Page 41
Exigence des supports mobiles
Illustration des besoins en entreprise Pour la téléphonie
Exemple d’Open Plug
Introduction : plasticité des IHMs – Page 42
Elips
Open-Plug Créateur d’ELIPS Créée en 2002, Open-Plug est basée à Sophia-Antipolis. Open-Plug est membre
de la Fondation LiMo (Linux Mobile Foundation). Fruit de 5 ans de R&D et a fait l’objet de dépôts de brevets.
ELIPS environnement ouvert de développement (Framework) de téléphones portables
grand public. CELIPS permet aux éditeurs de logiciels, aux fabricants de téléphones et aux opérateurs de téléphonie mobile de créer et de déployer des applications mobiles, des interfaces utilisateurs riches et des solutions logicielles.
Pourquoi ? Pour le développement rapide des nouveaux modèles de téléphones portables et
facilite l’implémentation de nouvelles solutions logicielles et la création d’interfaces utilisateurs.
Pour réutiliser leurs développements d’une plateforme de téléphone à l’autre et développer des variantes de leurs produits plus rapidement.
Quand les chercheurs s’en mêlent…
Equipes et travaux en présence
Equipe IIHM Laboratoire IMAG à Grenoble Gaelle Calvary & Joelle Coutaz
Equipe RAINBOW Laboratoire I3S à Sophia Antipolis Michel Riveill & Philippe Renevier & Audrey Occello &
Anne Marie DeryLaboratoire HIIS à l’université de Pise
Fabio PaternoEquipe IHM au Université de Valencienne
Anas Hariri & Sophie Lepreux & Christophe KolskiLaboratoire CHI Université catholique de
Louvain Jean Vanderdonckt
Exemples d’articles
EMMA pour la Plasticité en Mobilité
In Actes de la 20ème Conférence francophone sur l’Interaction Homme-Machine (IHM’2008, Metz, France, Septembre 2008). 2008.
Vincent Ganneau, Rachel Demumieux, Gaëlle Calvary http://iihm.imag.fr/publication/GDC08a/ Model-Driven Engineering of Multi-Target Plastic User Interfaces
In Proc. of 4th International Conference on Autonomic and Autonomous Systems ICAS 2008. pages 7-14. 2008.
Benoit Collignon, Jean Vanderdonckt, Gaëlle Calvary
D. Greenwood, M. Grottke, H. Lutfiyya, M. Popescu (eds.), IEEE Computer Society Press, Los Alamitos, Gosier, 16-21 March 2008
http://iihm.imag.fr/publication/CVC08a/
Anne-Marie Pinna-Déry, Cédric Joffroy, Philippe Renevier, Michel Riveill, Christophe Vergoni. "ALIAS: A Set of Abstract Languages for User Interface Assembly" in Proceedings of the 9th IASTED International Conference Software Engineering and Applications (SEA'08), IASTED, pages 77--82, ACTA Press, Orlando, Florida, USA, 16-17 nov 2008http://rainbow.polytech.unice.fr/publis/pinna-dery-joffroy-etal:2008.pdf
Anne-Marie Pinna-Déry, Jérémy Fierstone. "Construction d'Interfaces Utilisateurs Par Fusion de Composants d'IHM : un Atout Pour la Mobilité" in Proceedings of the Premières Journées
Francophones: Mobilité et Ubiquité, 2004
VISITE DE TRAVAUX DE RECHERCHEAUTOUR DE LA PLASTICITÉ
Un cadre de référence : Cameleon Context Aware Modelling for
Enabling and Leveraging Effective interaction
(IST R&D 2001-2004).
Introduction : plasticité des IHMs – Page 48
Cadre de référence : phase “conception”
Config 1 ModèleTâches etConcepts
IHM concrète
IHM finale
IHM abstraite
ModèleTâches etConcepts
Modèles archétypes
Config 2Concepts
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
Introduction : plasticité des IHMs – Page 49
Tâches &Concepts
IHM abstraite
IHM concrète
IHM finale
Config 1
Cadre de référence : phase “conception”
3G Mobile Context Sensitive Adaptability - User Friendly Mobile Work Place for Seamless
Enterprise Applications
CONSENSUS (PROJET Européen terminé en 2004)
www.consensus-online.org
SLIDES : CÉDRIC ULMER
cedric.ulmer@sap.com
Introduction : plasticité des IHMs – Page 51
Objective
Cost-efficient development of usable device independent Applications
Introduction : plasticité des IHMs – Page 52
Challenge is ...
... to bring (potentially) all applications to (potentially) all devices
different mobile devices with different device capabilities – voice comes on top of that
For a single application to be displayed on 50 devices50 sets of application UI need to be created!
Some enterprises are maintaining hundreds of applications – customer developments & customization comes on top of that
Example: For all SAP applications being able to be displayed on all devices 50.000 sets of application UIs need to be created!
Introduction : plasticité des IHMs – Page 53
State of the Art: Adaptation - Transcoding
Usa
bili
ty:
Dec
lined
!
Application-independent adaptation: A multitude of screens 15 numbers have to be entered
Introduction : plasticité des IHMs – Page 54
State of the Art: Dilemma - Cost vs. Usability
Integrated adaptation
Integrated Adaptation semantic information context information
Cost
Usa
bili
ty
Recoding• semantic adaptation • device & application
specific
Transcoding• syntactic
adaptation• technology
specific
Introduction : plasticité des IHMs – Page 55
Augment applications with metadata for
adaptation engines to
prepare presentation
context- and device-specific
Renderer Independent Markup Language: RIML
Tools: Context-sensitive Annotation Editor
Semantic Information: Relevance, splitting hints,
context conditions,...
Context: User Prefs, bandwith,..
Device Classes: UI/Technical aspects
Introduction : plasticité des IHMs – Page 56
Renderer Independent Markup Language: RIML (contn’d)
UI-Info to be expressed with application dataIn order to define RIML, we needed:
Language Research Existing MLs Requirements Extensions
Usability Research based on Focus on mobile devices How easy / hard is it to use specific UI Components on different
devices (not usability on application / process level) Definition of device classes
Usability Analysis leads to a limited number of Device Classes which represent devices behaving similar from a users / usability perspective
Introduction : plasticité des IHMs – Page 57
Device-specific fine-grainedAdaptation
SYNTACTIC ADAPTATION
BackendData
Application-specific AdaptationSEMANTIC ADAPTATION
InformationSplitting Filter
Information Pruning Filter other filters...
T1
T2
T1
T2
WML
Transcoding Rules
•T1/T2 = UI info Templates•Colors indicate importance
•Mandatory•Optional
•T1/T2 = UI info Templates•Colors indicate importance
•Mandatory•Optional
T1 T1
T2 T1
Adaptation Concept
T1 T1
T2 T1
Template Editor
Application data outbound processing
Introduction : plasticité des IHMs – Page 58
Projet ASPECT
Composition de composantset de leurs IHMs
2003
23/05/2002 Jeremy Fierstone / Equipe Rainbow / 58
Introduction : plasticité des IHMs – Page 59
Applications viséesProblématique
Applications évolutives et adaptables accessibles via un PDA, un portable ou une station variabilité des fonctionnalités selon le contexte d'utilisation (mode dégradé, connecté ou déconnecté, dépendance des ressources…)
Applications construites à base de composants (composants métiers, composants d’IHM, composants services…)
S’appuyer sur les infrastructures systèmes (RMI, EJB, …) Fournir une plate-forme à composants
Exemples : Agenda collaboratif Gestion commerciale (facturations, commandes, client, fournisseur)
Introduction : plasticité des IHMs – Page 60
Spécificités des applications et contraintes IHMs
Changement du contexte d'exécution du composant (d’utilisation de fonctionnalités) d'une station à un PDA, un téléphone portable …
"Reconfiguration" du composant
Retrait / ajout de composants (demande de fonctionnalités, de services)
Composition de composants
Comment réutiliser une IHM existante sur un support différent ?
Comment composer les IHMs des composants métiers ?
Déporter le composant prise de commande sur un PDA pour le consultant sur site
Ajouter dynamiquement le service de gestion de stock pour informer du délai…
Composition de composants Composants indépendants, composables
Mais interactions possibles
Composants Composite
Jeremy Fierstone / Equipe Rainbow / 61
Composition de composants Fusion de menus correspondants aux composants (1)
Jeremy Fierstone / Equipe Rainbow / 62
Composition de composants Fusion de menus correspondants aux composants (2)
Jeremy Fierstone / Equipe Rainbow / 63
Introduction : plasticité des IHMs – Page 64
Proposition : modèle de composants et abstraction
La communication entre composants IHM et métier est exprimée par des interactions
Un langage abstrait de description structurelle des IHMs : SUNML dans la lignée
de XForms, RIML,... (inspiré de UIML)
Composition de composants métiers par interactions
Règles de composition adaptées aux IHMs
Fusion de règles vérifiant la cohérence de la composition
Atelier de composition : Amusing
Réutiliser des composants métiers
Composer les IHMs des composants
métiers
Un modèle de composant + ISL + SUNML
Un modèle de composants qui découple composant métier et composants d ’IHM.
Spécification d ’ IHM indépendantes du support
Introduction : plasticité des IHMs – Page 65
De l’IHM abstraite vers l’IHM concrète
JFrame1
JPanel1
JLabel1 JField1 ...
IHM concrète (Exécution)
Projection
FicheClient
MainDialog
LabelFieldNom FieldNom ...
IHM abstraite (Exécution)
HMI
Dialog
Field Field
JFrame
JPanel
JTextFieldJLabel
<sunml> <interface id="FicheClient"> <structure> <dialog id="MainDialog" sequence="true"> ... <field id="LabelFieldNom" mode="read"> <element type="String">Nom :</element> </field> <field id="FieldNom" mode="read-write"> <element type="String">Toto</element> </field> ... </dialog> </structure> </interface></sunml>
Fichier SUNML (Spécification)
Réification
durand
Composant métier (Exécution)
?
?
?
Introduction : plasticité des IHMs – Page 66
Exemple de Liste de Clients
<sunml> <interface id="ListeClients"> <structure> <dialog id="MainDialog" sequence="true"> <list id="ListeClients" reference="FicheClient" select="Field[FieldNom]"/> </list> </structure> </interface></sunml>
Fichier SUNML (spécification)
Exemple en Swing
Composition Représentant – Client (1-n) : Liste de clients
Introduction : plasticité des IHMs – Page 67
De l’IHM abstraite vers l’IHM concrète
Séparation du composant d’IHM du composant métierExpression des communications possibles entre ces composants avec ISLAdaptation des composants suivant le contexte d’exécution
durand
FicheClient
IHM concrète
IHM abstraite
Composant métier
JFrame1
LégendeInstance
interaction
Controleur
SERVFACESERVICE ANNOTATIONS FOR USER INTERFACE
COMPOSITION
PROJET EUROPÉEN
HTTP://141.76.40.158/SERVFACE/
Introduction : plasticité des IHMs – Page 69
Vue d’ensemble
+ Annotations de services avec des éléments d’interfaces
+ Composition de services+ Génération de l’interface du service
« composite » à partir des annotations
+ 2 approches:+1ière approche : composition visuelle des services+2ième approche : composition dirigée par les tâches
3/15
Annotations de services
[Izquierdo et al., 2009]
4/15
1ière approche: Composition Visuelle
[Nestler et al., 2009] [Feldmann et al., 2009]
End-User Programming
5/15
Introduction : plasticité des IHMs – Page 72
1ière approche: Composition Visuelle
6/15
[Nestler et al., 2009]
[Feldmann et al., 2009]
Services (WSDL)
Services Annotés
Auto-génération d’annotations
+ Annotations parun “Expert”
Génération de l’interface “abstraite”
Transformations:1)M2M2)M2C
Interface Finale
Service Annotator
Service Composer
MARIA
2ième approche: Dirigée par les tâches
[Feldmann et al., 2009] [Janeiro, 2009]
7/15
Introduction : plasticité des IHMs – Page 74
2ième approche: Dirigée par les tâches
8/15
[Feldmann et al., 2009][Janeiro, 2009]
Transformations:1)M2M2)M2C
Interface Finale
ServicesGé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
Introduction : plasticité des IHMs – Page 75
Références
[Nestler et al., 2009] Service Composition at the Presentation Layer using Web Service Annotations
[Feldmann et al., 2009] Improving Task-driven Software Development Approaches for Creating Service-based Interactive Applications by using Annotated Web Services
[Izquierdo et al., 2009] An Annotation tool for enhancing the user interface generation for services
[Feldmann et al., 2009] An Integrated Approach for Creating Service-Based Interactive Applications
[Janeiro, 2009] Retrieval of User Interface Templates Based on Tasks
9/15
Introduction : plasticité des IHMs – Page 76
Projet RAINBOW :Besoins en informatique ambiante
De nombreux services Des services métiers (apparition et disparition de
fonctionnalités) Des services pour gérer les supports physiques et les
interacteurs
Des services contraints Des services sur l’étagère “boites noires” Des devices avec leurs caratéristiques
Des usages variés Des utilisateurs nombreux et variés Chaque utilisateur a ses propres intérets et besoins
Introduction : plasticité des IHMs – Page 78
Problématiques liées au domaine de l’utilisateur
Adapter l’interface utilisateur à l’évolution du système
Comment modifier l’IHM pour intégrer un nouveau service ?
Adapter l’interface aux besoins utilisateurs Adaptation aux supports physiques : travaux sur les IHMs plastiques
(IHMs abstraites et rendering, expression du modèle de tâches) Adaptation aux utilisateurs : travaux sur les IHMs (introduction de
modèles de tâches, de profis)
Adapter le système aux besoins utilisateurs
Construire des applications personnalisées à partir des IHM
Introduction : plasticité des IHMs – Page 79
Patterns Architecturaux de construction d’IHMs
MVC (1979)(Model-View-Controller)
PAC (1987)(Presentation-Abstraction-Control)
Arch Model(1992)
P
C
A
Controller
ModelView
P
C
A
P
C
A
... ...
P
C
A
Introduction : plasticité des IHMs – Page 80
Un modèle inspiré d’Arche pour les services
1 Arche pour1 service interactif
N services fonctionnels et leurs interactions utilisateurs : comment fusionner le tout ?
Services Fonctionnel
ServicesD’interaction
AdaptorAdaptor
Dialogue
Quid des assemblages
Comment fusionner 2 services respectant l’Arche ?
Composition d’arches ?
Assemblage des services fonctionnels
Quid des dialogues ? Expression et fusionQuid des IHM?Expression et fusion
Travaux de références pour le domaine utilisateur
Travaux composants (Fractal, SOA, Noah, WCOMP MODEL)
Gestion de la dynamique de l’application (apparition et disparition de composants et de services)
Expression des assemblages (orchestration, règles isl, langages d’aspects…)
Sureté des assemblages
Travaux sur l’IDM
Modèles et transformation de modèles Fusion de modèles
Travaux en IHMs
Plasticité des interfaces Expression de modèles pour l’IHM (taches, dialogues…)
Nos spécificités
Etre centré sur le dialogue : relation « fonctionnel et IHM »Déterminer le bon modèle de dialogue et avoir une
architecture N-ArchesEtre indépendant plateforme : s’appuyer sur un modèle
Etre indépendant dispositifs : s’appuyer sur les modèles d’IHMpour 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 assemblagesTrouver le bon niveau d’IHM abstrait
Introduction : plasticité des IHMs – Page 84
Adapter l’interface à l’évolution du système (priorité 1)
déduction
Assemblage de services(Orchestrations, fusion d’aspects,Composants hiérarchiques)
Assemblage d’IHMs(Utilisation d’IHMs abstraites, puisProjection sur devices)
InterventionSi conflits
Dialogues
S’adresse au développeur
Adapter l’interface aux besoins utilisateurs (priorité 2)
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
Adaptation du système (priorité 3)
Déduire l’assemblagepour un utilisateur
MPI
Points communs aux adaptations visées
Conception Exécution
Noyau Fonctionnel
IHM
Evolution Noyau Fonctionnel Apparition, disparition de services
Nouvelles Utilisations Préférences, Contexte d’utilisation …
AdaptationAdaptation
AdaptationAdaptation
M IHM
Un langage abstrait orienté composition : SUNML puis LAIM / FlexUn composant d’IHM : représentation fractal Un modèle de dialogue et un modèle de plateformeUne collaboration entre les modèles
MP
MD
User Interfaces composition driven by the Functional Core
composition
SLIDES : CÉDRIC JOFFROYJOURNÉE DU PÔLE GLC 2010
Introduction : plasticité des IHMs – Page 89
Objective: compose existing applications
Flight Application Hotel Application
Virtual Travel Agency
Application
Compose these two applications to obtain a new
one
89
Introduction : plasticité des IHMs – Page 90
What is an application?
Application
Functional Core part
User Interface part
Interaction part
User can give input dataUser can see resultUser can trigger an event
Contain the business logicManipulate dataCompute a result
Exchange between the UIand the FCTrigger an operation call
90
Introduction : plasticité des IHMs – Page 91
Example of the hotel application
HotelApplication
Functional Core part(WSDL)
User Interface Part
(Flex)
Interaction part
91
Introduction : plasticité des IHMs – Page 92
How can the developer compose applications?
Flight Application Hotel Application
VTA Application
FC
UI
FC
UI
Composed FC
She can create business process to describe
functional core composition using BPEL (WebService) or
Composite Component (SCA, Fractal…)
What is happening to associate User Interfaces?92
Introduction : plasticité des IHMs – Page 93
Future of existing UI for the composed FC
Flight Application Hotel Application
VTA Application
FC
UI
FC
UI
Composed FC
New UI
Loose of existing UIRewriting or generating a
new UI from scratch for the Composed FC
Possibility of reuse in homogeneous UI
93
Introduction : plasticité des IHMs – Page 94
Problems encountered with the composition of applications
How to keep the consistency between the functional part and the User Interface part after a composition?
How to keep the way that user interacts with a known application?
How to reuse existing user interfaces inside the composition?
94
Introduction : plasticité des IHMs – Page 95
Existing solutions to compose UI and FC independently
FC composition (WS-BPEL[1], Fractal [2]): Describes interactions between components or
services Describes usage of data in the services orchestration Uses services or components that describe operation
prototypesUI composition (Amusing[3], ComposiXML[4]):
Describes structural composition based on operations (union, intersection…)
Uses UI description with a simple representation of UI (SunML[3], UsiXML[5])
95
Introduction : plasticité des IHMs – Page 96
My solution to deal with applications composition
Take advantages of functional composition that describe what is needed to use the new FC created
Deduce from the functional composition UI elements to keep
Have an homogeneous way to represent UI, FC and composition
Create a framework to deal with all composition process with: A composition engine to manage the composition A metamodel to deal with application and FC composition Transformations to obtain information to compose
96
Introduction : plasticité des IHMs – Page 97
VTA Application
Framework to deal with applications composition
FC Composition
FC
FC
Composition engine
. Deduction of UI elements to keep
. Creation of the interaction linksObtain a new application
Hotel Application
FC
UI
Flight Application
FC
UI
FC
FC
Composed UI
97
Introduction : plasticité des IHMs – Page 98
AliasComponent: a way to describe application and composition
Describe UI and FC in terms of componentComponents contains two types of ports:
Data port Action/Event port
Describe an application as a FC component, a set of UI components and a set of bindings
Describe an FC composition as a composite component that contains a set of FC components and bindings
98
Introduction : plasticité des IHMs – Page 99
Problems resolved by this metamodel
Keep only information needed for the composition process UI elements that interact with the FC Links between UI and FC Functional composition with data and control flow
Independant of any technologies Can manage multiple kind of FC or UI
Keep the consistency between UI and FC by describing directly FC composition and application are in the same
metamodels
99
Introduction : plasticité des IHMs – Page 100
Description of a FC inside AliasComponent
A FC is described in terms of: Inputs Outputs Actions that corresponds
to an operationAn Action is
associated to inputs and outputs to keep the prototype
Keep only information about operation prototype
100
Introduction : plasticité des IHMs – Page 101
Example of the Hotel representation in AliasComponent
HotelFCComponent
InputId: fc_input1Name: countryType: stringArity: SINGLE_REQUIRED
101
Introduction : plasticité des IHMs – Page 102
Abstraction of a Web Service
WSDL
service
binding
portType
message
types (internal or in a XSD)
FCComponentid
Action1
Action2
Inputs Outputs
Inputs Outputs
102
Introduction : plasticité des IHMs – Page 103
Description of a UI inside AliasComponent
A user interface is represented by: Inputs where user can put
data Outputs to display a
result Event to trigger a call of
operationWe keep only elements
connected to the FC that correpsonds to Input, Output and Action
103
Introduction : plasticité des IHMs – Page 104
Example of the research hotel UI in AliasComponent
HotelUIComponent
InputId: ui_input1Name: CountryType: stringArity: SINGLE
104
Introduction : plasticité des IHMs – Page 105
Description of an application inside AliasComponent
105
Introduction : plasticité des IHMs – Page 106
Example of the Hotel application
HotelFCComponent
HotelUIComponent
106
Introduction : plasticité des IHMs – Page 107
Description of a FC Composition inside AliasComponent
FC composition is represented by a composite component
Subcomponents correspond to composed FC
Links describe data exchange and operation calls
107
Introduction : plasticité des IHMs – Page 108
Example of BPEL control flow abstraction
A BPEL workflow is transformed in a FCComposition
Here, flow activity is transformed into a dispatch action link to trigger both operation in the same time
108
Introduction : plasticité des IHMs – Page 109
Example of BPEL dataflow abstraction
Zoom on assign activity
Description of the dataflow
Correspond to dataLink (between inputs, outputs, input-output)
Here inputs are merged
109
Introduction : plasticité des IHMs – Page 110
AliasComponent: a full view of the metamodel
ba
110
Introduction : plasticité des IHMs – Page 111
Other transformations on AliasComponent
Interaction with the composition engine To put Prolog facts in entry of the composition engine To retrieve the result of the composition engine
Concretization of the resulting UI To validate results by a visualization in some concrete
UI like Java Swing or Flex
111
Introduction : plasticité des IHMs – Page 112
To summarize
This metamodel covers the description of: Application with an FC, mutliple UI and interactions
between both Functionnal Composition
It is in the center of the composition processIt is associated with transformations (abstraction,
concretization and engine interaction)
112
Introduction : plasticité des IHMs – Page 113
References
•[1]Diane Jordan, John Evdemon, Alexandre Alves, Assaf Arkin, Sid Askary, Charlton Barreto, Ben Bloch, Francisco Curbera, Mark Ford, Yaron Goland, et al. Web services business process execution language version 2.0. OASIS Standard, 11, 2007•[2]Objectweb Consortium. The Fractal Component Model, 2008•[3]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.•[6]Tsai, W.-T., Huang, Q., Elston, J., and Chen, Y. Service-oriented user interface modeling and composition. In ICEBE ’08, pages 21–28, Washington, DC, USA, 2008. IEEE Computer Society.•[7] Gabillon, Y., Calvary, G., and Fiorino, H. Composing interactive systems by planning. In UbiMob’08, pages 37–40, Saint Malo, France, 28 - 30 mai 2008.
113
Existing solutions to compose applications
SOA Planning ServFace Mashup
WorkSOAUI [6] Compose[7]
Task driven [8]
UI driven [9]
iGoogle, Yahoo Pipes
Principle
Composition of known UI
after the creation of a
workflow
Answer to a user need by creating all combination
of UI
Decoration of task trees with UI element +
binding between
system tasks and
operations
Give the possibility to
have different kind
of information on a same window
Limitations
Compose only known UI
No reuse of existing UI
Dedicated to technology
Annotation of services
No Merge of UI
114
IHM•Abstraite: Structure en espaces de dialogue•Concrète : Fait le choix des interacteurs •Finale: Fait le choix de l’environnement de programmation et d’exécution
Contexte d’usage•Environnement•Utilisateur•Plate-forme
•Composant d’IHM Abstrait