114
IHM et plasticité Anne-Marie Déry [email protected] IHM et Différents supports Différents utilisateurs Différents environnements Problématique - aperçu des solutions industrielles et recherche

IHM et plasticité Anne-Marie Déry [email protected]@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Embed Size (px)

Citation preview

Page 1: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

IHM et plasticité Anne-Marie Déry [email protected]

IHM etDifférents supports

Différents utilisateursDifférents environnements

Problématique - aperçu des solutions industrielles et recherche

Page 2: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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)

Page 3: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements
Page 4: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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     

Page 5: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 6: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Motivations et exemples d’applications

visées

Page 7: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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 …

Page 8: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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 ?)

Page 9: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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é

Page 10: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 11: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

MÊMES USAGES ?MÊMES SERVICES ?

Supports mobiles

Page 12: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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 ?

Page 13: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 14: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 15: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 16: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 17: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 18: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 18

Les acteurs

Organismes de normalisation

Les RIA

Les fournisseurs de services sur mobiles

Les chercheurs

Page 19: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Au début il y avait …..

Page 20: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Approche à la conception basée sur desTraducteurs

XML

XSLHTML

VoiceML

WMLAu centre une interface XMLisée

Page 21: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 22: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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”

Page 23: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 24: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Bref historiqueconcernant les acteurs

Page 25: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Quand les organismes de normalisations’y mettent …

OASIS et W3C

Page 26: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 27: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

W3C comment trouver l’infoQuelles infos et comment zoomer

Page 28: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 29: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Traducteurs

XML

XSLHTML

VoiceML

WML

XML et XSL pour la présentation, UIML, SUNML, Xforms ….

Page 30: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

User Interfaces langagesXML dans tout ses états

Page 31: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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.

Page 32: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 33: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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.

Page 34: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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)

Page 35: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 36: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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)

Page 37: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 38: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Quand les RIA sont inspirés

Page 39: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 40: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 41: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 41

Exigence des supports mobiles

Illustration des besoins en entreprise Pour la téléphonie

Exemple d’Open Plug

Page 42: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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.

Page 43: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Quand les chercheurs s’en mêlent…

Page 44: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 45: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 46: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

VISITE DE TRAVAUX DE RECHERCHEAUTOUR DE LA PLASTICITÉ

Page 47: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Un cadre de référence : Cameleon Context Aware Modelling for

Enabling and Leveraging Effective interaction

(IST R&D 2001-2004).

Page 48: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 49: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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”

Page 50: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

[email protected]

Page 51: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 51

Objective

Cost-efficient development of usable device independent Applications

Page 52: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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!

Page 53: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 54: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 55: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 56: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 57: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 58: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 58

Projet ASPECT

Composition de composantset de leurs IHMs

2003

23/05/2002 Jeremy Fierstone / Equipe Rainbow / 58

Page 59: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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)

Page 60: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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…

Page 61: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Composition de composants Composants indépendants, composables

Mais interactions possibles

Composants Composite

Jeremy Fierstone / Equipe Rainbow / 61

Page 62: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Composition de composants Fusion de menus correspondants aux composants (1)

Jeremy Fierstone / Equipe Rainbow / 62

Page 63: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Composition de composants Fusion de menus correspondants aux composants (2)

Jeremy Fierstone / Equipe Rainbow / 63

Page 64: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 65: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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)

?

?

?

Page 66: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 67: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 68: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

SERVFACESERVICE ANNOTATIONS FOR USER INTERFACE

COMPOSITION

PROJET EUROPÉEN

HTTP://141.76.40.158/SERVFACE/

Page 69: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 70: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Annotations de services

[Izquierdo et al., 2009]

4/15

Page 71: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

1ière approche: Composition Visuelle

[Nestler et al., 2009] [Feldmann et al., 2009]

End-User Programming

5/15

Page 72: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 73: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

2ième approche: Dirigée par les tâches

[Feldmann et al., 2009] [Janeiro, 2009]

7/15

Page 74: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 75: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 76: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 77: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 78: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 79: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 80: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 81: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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…)

Page 82: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 83: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 84: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 85: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Adaptation du système (priorité 3)

Déduire l’assemblagepour un utilisateur

Page 86: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 87: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

User Interfaces composition driven by the Functional Core

composition

SLIDES : CÉDRIC JOFFROYJOURNÉE DU PÔLE GLC 2010

Page 88: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 89: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 90: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 91

Example of the hotel application

HotelApplication

Functional Core part(WSDL)

User Interface Part

(Flex)

Interaction part

91

Page 91: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 92: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 93: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 94: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 95: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 96: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 97: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 98: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 99: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 100: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 101

Example of the Hotel representation in AliasComponent

HotelFCComponent

InputId: fc_input1Name: countryType: stringArity: SINGLE_REQUIRED

101

Page 101: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 102: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 103: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 104

Example of the research hotel UI in AliasComponent

HotelUIComponent

InputId: ui_input1Name: CountryType: stringArity: SINGLE

104

Page 104: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 105

Description of an application inside AliasComponent

105

Page 105: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 106

Example of the Hotel application

HotelFCComponent

HotelUIComponent

106

Page 106: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 107: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 108: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 109: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

Introduction : plasticité des IHMs – Page 110

AliasComponent: a full view of the metamodel

ba

110

Page 110: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 111: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 112: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 113: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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

Page 114: IHM et plasticité Anne-Marie Déry pinna@polytech.unice.frpinna@polytech.unice.fr IHM et Différents supports Différents utilisateurs Différents environnements

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