Plasticitérecherche2015 2

Adaptation des IHM

Travaux de recherche

Anne-Marie Dery - Année 2015 2016 Parcours IHM Polytech’Nice Sophia

Prérequis pour le cours

• Connaitre les principes de l’IDM (cours de Mireille Blay)

• Connaitre la définition de l’adaptation et du contexte d’usage

• Connaître la notion d’arbre de tâches (cours de CEIHM)

• Connaître la notion de composants

• Connaitre la notion d’ontologies

Rappel de l’Espace problème

• Domaine de l’adaptation au contexte d’usage

Env ironneme nt

Pl ate-forme

Ut ilisate ur

Seuil de plasticité

Domaine de plasticité

C2 Contexte non couvert

C1 Contexte couvert par l’IHM

Adaptation 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

Prendre en compte l’usage (exemple Jeux vidéos -Shiva)

A l’exécution – faciliter la vie de l’utilisateur final

Faire migrer une application d’un support à un autre

Faire migrer des taches d’un support à un autre

Conserver les facilités l’usage et les habitudes tout en profitant des spécificités des supports

Premières Approches à la conception

XML

XSL HTML

VoiceML

WML Au centre une description XMLisée

basées sur des Traducteurs

Un langage commun Une génération de code Des techniques de compilation

Limites et Avantages ?

Premières Approche à l’exécution

• Problème traité : Migration totale

• Exemple

• SI la batterie du PC faiblit ALORS passer sur PDA

SI condition ALORS action

Action Réaction

Ecrire une machine à états

Limites et Avantages ?

Capture du

contexte

Identification

Des solutions

candidates

Selection d’une

solution

candidate

Détection de

changement de

contexte

Identification du

changement de

contexte

Exécution du

prologue

Execution de la

reaction

Execution de

L’épilogue

Cadre de référence : phase “exécution”

• Identifier le problème = Quel est le besoin en plasticité • Conception et/ou exécution ?

• Quels dispositifs visés ?

• Quel(s) environnent(s) ?

• Quel(s) utilisateur(s) ?

• Etudier l’existant

• Quelles sont les technologies adaptées ? • De quels travaux de recherche peut-on s’inspirer ?

Proposer une solution • Solution partielle ou complète

• Solution ad-hoc ou modèle

Démarche

Petit rappel : plasticité au travers d’un espace problème

Work-space

UI

Design-Knowledge

Reaction

Context

Multimodal

Inter-modal

Intra-modal

User

Platform

Static

Granularity

Modality

Adaptation type

Context

of use

Learning

Dynamic

EnvironmentInteractor

Modèles de tâches

Les modèles de tâches sont des descriptions logiques des activités à réaliser pour atteindre les objectifs des utilisateurs

Utiles pour concevoir, analyser et évaluer les applications logicielles interactives

Les modèles de tâches décrivent comment les activités peuvent être réalisées pour atteindre les objectifs des utilisateurs lors de l’interaction avec l’application considérée.

Analyse et Modélisation de la tâche

formalisme type HTA (Hierarchical Task Analysis) : Ordonnancement des tâches

UAN (User Action Notation)

CTT (ConcurTaskTrees) = HTA + opérateurs temporels + ajout d’annotations sur les tâches

Arbre de tâches HTA : projeté

Quand les chercheurs s’en mêlent…

CAMELEON : le cadre de référence Projet ServFace : Travaux de Pise Travaux sur UsiXML : Valenciennes , Louvain, Grenoble Travaux Rainbow : Construction d’IHM par composition

Où trouver les informations

Equipe IIHM Laboratoire IMAG à Grenoble

Gaelle Calvary & Joelle Coutaz http://iihm.imag.fr/publication/

Equipe RAINBOW Laboratoire I3S à Sophia Antipolis

Michel Riveill & Philippe Renevier & Audrey Occello & Anne Marie Dery http://proton.unice.fr/biblio/displayReference.php?team=0&&export=teamHtml&&idKeyWord1=1

Laboratoire HIIS à l’université de Pise

Fabio Paterno http://hiis.isti.cnr.it/publications.php

Laboratoire CHI Université catholique de Louvain

Jean Vanderdonckt http://uclouvain.academia.edu/JeanVanderdonckt/Papers

Equipe IHM au Université de Valencienne

Anas Hariri & Sophie Lepreux & Christophe Kolski

http://www.univ-valenciennes.fr/LAMIH-intra/site/commun/_gestion/publis/recherche/resultat.php?id_perso=97&langue=lang_fr

http://iihm.imag.fr/publication/

http://proton.polytech.unice.fr/biblio/displayReference.php?team=0&&export=teamHtml&&idKeyWord1=1




http://hiis.isti.cnr.it/publications.php

http://uclouvain.academia.edu/JeanVanderdonckt/Papers







Un cadre de référence CAMELEON

Cameleon Context Aware Modelling for

Enabling and Leveraging Effective interaction

http://giove.isti.cnr.it/projects/cameleon.html

(IST R&D 2001-2004)

Equipes et travaux en présence

http://giove.isti.cnr.it/projects/cameleon.html

• I.S.T.I (Pisa, Italy)

• Université Catholique de Louvain (Louvain, Belgium)

• Université Joseph Fourier (Grenoble, France)

http://giove.isti.cnr.it/projects/cameleon/external_publications.html

http://iihm.imag.fr/publication/C10a/ User Interface Plasticity: Model Driven Engineering to the Limit! http://iihm.imag.fr/publication/BDB+04a/ CAMELEON-RT: a Software Architecture Reference Model for Distributed, Migratable, and Plastic User Interfaces

http://giove.isti.cnr.it/projects/cameleon/isti.html

http://giove.isti.cnr.it/projects/cameleon/ucl.html

http://giove.isti.cnr.it/projects/cameleon/ujf.html



http://iihm.imag.fr/publication/C10a/

http://iihm.imag.fr/publication/BDB+04a/

Phase de “conception”

Config 1 Modèle

Tâches et

Concepts

IHM

concrète

IHM finale

IHM

abstraite

Modèle

Tâches et

Concepts

Modèles archétypes

Config 2

Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

IHM

concrète

IHM finale

IHM

abstraite

Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

Domaine

Concepts

Tâches

Contexte

User

Plate-forme

Environment

Adaptation

Evolution

Transition

Modèles ontologiques

ARTStudio

D. Thevenin

Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine

Spécifier 1 fois -> N Interfaces approche par modèles

Modélisation de la configuration

Domaine

Concepts

Tâches

Contexte

User

Plate-forme

Environment

Adaptation

Evolution

Transition


Adaptation dynamique

utilisateur

contexte d’usage

Modélisation de l’IHM

Modèle

Tâches et

Concepts

IHM concrète

IHM finale

IHM abstraite

Tâches &

Concepts

IHM

abstraite

IHM

concrète

IHM finale

Config 1

Différents niveaux d’abstraction

Exercice : Framework cameleon Model-Driven Architecture

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI

Source platform Target platform

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI

Source platform Target platformRéification, Traduction, Abstraction


Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

Modèle

Tâches et

Concepts

IHM concrète

IHM finale

IHM abstraite


Config 1 Modèle

Tâches et

Concepts

IHM

concrète

IHM finale

IHM

abstraite

Modèle

Tâches et

Concepts

Config 2 Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

IHM

concrète

IHM finale

IHM

abstraite

Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

CONFIGURATION 1 CONFIGURATION 2


Config 1 Modèle

Tâches et

Concepts

IHM

concrète

IHM finale

IHM

abstraite

Modèle

Tâches et

Concepts

Modèles archétypes

Config 2

Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

IHM

concrète

IHM finale

IHM

abstraite

Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

Domaine

Concepts

Tâches

Contexte

User

Plate-forme

Environment

Adaptation

Evolution

Transition


ARTStudio

D. Thevenin

Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine

Spécifier 1 fois -> N Interfaces approche par modèles

SERVFACE SERVICE ANNOTATIONS FOR USER INTERFACE COMPOSITION PROJET EUROPÉEN

http://giove.isti.cnr.it/Users/Fabio/



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

Equipe de Fabio Paterno : http://hiis.isti.cnr.it/publications.php

http://hiis.isti.cnr.it/publications.php

Annotations de services

[Izquierdo et al., 2009]

1ière approche: Composition Visuelle

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

End-User Programming

1ière approche: Composition Visuelle

[Nestler et al., 2009]

[Feldmann et al., 2009]

Services (WSDL)

Services Annotés

Auto-génération d’annotations + Annotations par

un “Expert”

Génération de l’interface “abstraite”

Transformations: 1) M2M 2) M2C

Interface Finale

Service Annotator

Service Composer

MARIA

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

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

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

8/15

[Feldmann et al., 2009]

[Janeiro, 2009]

Transformations: 1) M2M 2) M2C

Interface Finale

Services Génération d’annotations

(IHM + tâches) + A partir des opérations du service + Une opération = une “tâche annotée” + Une “tâche annotée” = une tâche système

Génération des tâches intéractives

+ Chaque tâche d’interaction = une fenêtre (par défaut) + Intervention du développeur : enlever les doublons

Génération de l’interface “abstraite”

MARIA

USIXML PROJET EUROPÉEN

www.usixml.org

http://www.usixml.org/

Projet Européen UsiXML

Définir, valider et standardiser un langage de description d'interfaces utilisateur (UIDL) pour améliorer la productivité, la réutilisabilité et l'accessibilité d'applications interactives

Un langage pour tous les acteurs de la constructions d’IHM

basé sur des niveaux d’expressivité et des outils différents

USer Interface eXtensible Markup Language Le consortium 7 pays, 28 organisations : PME, grandes entreprises -Thalès France, Telefonica -, des universités et centres de recherche.

www.usixml.org

programme ITEA2


UsiXML

UsiXML USer Interface eXtensible Markup Language) XML pour applications interactives UsiXML pour des non développeurs : analystes, concepteurs, designers, ergonomes, chefs de projet, novices,... UsiXML : élément principal User Interface Description Language (UIDL), langage déclaratif décrivant les UI indépendament des caractéristiques physiques.

www.usixml.org


UsiXML

•UsiXML indépendant device, plateforme et modalités

•UsiXML abstraction des éléments de base : widgets, controls, containers, modalités, techniques d’interaction, .... •UsiXML reutilisation d’UI existantes dans un nouveau contexte par composition

www.usixml.org


UsiXML

Zoom sur les travaux à Valenciennes

Sophie Lepreux

15 novembre 2013

Post-doc au sein du laboratoire BCHI à Louvain-la-neuve dirigé par Jean Vanderdonckt

• Composition d’interfaces utilisateurs (en résumé)

• basée sur UsiXML = langage de description d’interface Utilisateur (UIDL) basé sur XML

• Centrée sur la couche de l’interface concrète = spécifique à la modalité graphique

• Sur la base d’opérateurs inspirés de la théorie des ensembles

• Utilisant l’algèbre des arbres [Jagadish et al.] pour modéliser les opérateurs de composition

• Développement et tests effectués « à la conception» : ComposiXML plug-in de GraphiXML outil de conception d’interface concrète

Framework cameleon Model-Driven Architecture

Source = < User, Platform,

Environment >

Target = < User, Platform,

Environment >

Framework cameleon Model-Driven Architecture

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


textInput button button

Window

AIC

facet=control

AIC

facet=control

AIC

facet=control

AbstractIndividual

Container


Window

AIC

facet=control

AIC

facet=control

AIC

facet=control

AbstractIndividual

Container


Environment >


Environment >

UsiXML – Concrete User Interface

<cuiModel id="FicheClient-cui_3" name="FicheClient-cui">

<window id="window_component_0" name="window_component_0"

width="300" height="200">

<box id="box_1" name="box_1" type="vertical">

<outputText id="output_text_component_2"

name="output_text_component_2« …

<box id="box_2" name="box_1" type=« horizontal">


name="output_text_component_3« … \>

<inputText id="input_text_component_5"

name="input_text_component_5" isVisible="true"

isEnabled="true" textColor="#000000" maxLength="50"

numberOfColumns="15" isEditable="true"/>

<\box>



name="output_text_component_4« …

<inputText id="input_text_component_6"

name="input_text_component_6" isVisible="true« … />

<\box>


<button id="button_component_7"

name="button_component_7"/>

<button id="button_component_8" …/>

<\box>

</box>

</window>

</cuiModel>

Window (id=window, name=window, width="300" height="200")

Box (type=« vertical »)

Button

(DefaultContent = Save)

Button

(DefaultContent=Close)

Output (Default value =« customer form »)

Box (type = horizontal)Box (type = horizontal)

Output

(…)

Input

(…)

Box (type = horizontal)

Output

(…)

Input

(…)

Window (id=window, name=window, width="300" height="200")

Box (type=« vertical »)

Button

(DefaultContent = Save)

Button

(DefaultContent=Close)

Output (Default value =« customer form »)

Box (type = horizontal)Box (type = horizontal)

Output

(…)

Input

(…)

Box (type = horizontal)

Output

(…)

Input

(…)

Les opérateurs ensemblistes

Opérateur « normal union »

L’opérateur « difference »

- -

L’opérateur « fusion »

Fusion( , )=

algorithm:

The two trees T1 and T2 are merge at the %level R+1 to form the T3 window.

IF (direction = vertical)

Then Add box (vertical B’)

%Modify the window size:

T3.height = T1.height + T2.height

T3.width = T1.width

IF (direction = horizontal)

Then Add box (horizontal B’).

%Modify the window size:

T3.height = T1.height

T3.width = T1.width + T2.width

Add T1(R+1) in box B’, Add T2(R+1) in box B’.

ComposiXML

• Développé par Benjamin Michotte (BCHI)

intersection Unique Union

Normal Union

Fusion

Difference (right)

Difference (left)

Equivalence

set selection Cut or extract

projection

Composition au niveau AUI

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI



Window

AIC

facet=control

AIC

facet=control

AIC

facet=control

AbstractIndividual

Container


Window

AIC

facet=control

AIC

facet=control

AIC

facet=control

AbstractIndividual

Container


Environment >


Environment >

LEPREUX S., HARIRI M-A., ROUILLARD J., TABARY D., TARBY J-C., KOLSKI C. (2007) « Towards Multimodal User Interface Composition based on UsiXML and MBD principles ». Proc. of 12th International Conference on Human-Computer Interaction HCI International'2007, Beijing, 22-27 July 2007.

Order a pizza

AUI01: Choose a pizza

Choose

size

Choose

toppings

Choose

vegetable

Choose

meat

AUI02: Give delivering

address

Give

name

Give

phone

Give

addressChoose

quantity

Composition au niveau AUI

AUI Model

AbstractContainer AUI0

AbstractContainer AUI03 AbstractContainer AUI02 R2

AIC AIC AIC AIC AIC AIC AIC

AIC = AbstractIndividualComponent

The AUI model has been realized with IdealXML

(www.usixml.org)

<auimodel>

<abstractContainer id="idaio00" name="Order a pizza">

<abstractContainer id="idaio01" name="idaio01">

<abstractIndividualComponent id="idaio02"

name="Choose quantity">

</abstractIndividualComponent>


name="Choose size">


…


name="[Choose meat]">


</abstractContainer>

<abstractContainer id="idaio07" name="idaio07">


name="Give name">


…



</auimodel>

Equivalence in tree

representation

Case study

• The first existing application is ordering pizza. • the task “Choose a pizza” is multimodal (cf. CUI

model and FUI (XHTML+VoiceXML)) • The task “Give delivering address” can not be

multimodal (and does not exist).

<outputText id="Ask_for_pizza_quantity" name="Ask_for_pizza_quantity" defaultContent="Quantity:"/>

<inputText id="pizzaQuantity" name="quantity" defaultContent="1"

voice_prompt="How many pizzas would you like?"

voice_event_help="Say a number between one and twenty."

voice_event_nomatch="Sorry I did not understand you."

voice_event_noinput="You have to pronounce a quantity of

pizza."/>

<voice_quantity:grammar> <![CDATA[

#JSGF V1.0;

grammar pizza_quantity;

public <quantity> = 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20

;

]]>

</voice_quantity:grammar>

</inputText>

<outputText id="Ask_for_pizza_size" name="Ask_for_pizza_size" defaultContent="Size:"/>

<group voice_prompt="What size would you like?">

<radioButton id="radiobuttonSize1" name="radiobuttonSize" defaultContent="small" />

<radioButton id="radiobuttonSize2" name="radiobuttonSize" defaultContent="medium"/>

<radioButton id="radiobuttonSize3" name="radiobuttonSize" defaultContent="large"/>

<voice_quantity:grammar> <![CDATA[

#JSGF V1.0;

grammar pizza_size;

public <size> = small | medium | large ;

]]>

</voice_quantity:grammar>

</group>

Order a pizza


Choose

size

Choose

toppings

Choose

vegetable

Choose

meat

AUI02: Give delivering

address

Give

name

Give

phone

Give

addressChoose

quantity

CUI

AUI

FUI

Case study

• The second existing application is to order Chinese food.

• the task “Choose Meal” is GUI (cf. CUI model and FUI (realized with GrafiXML)

• The task “Give delivering address” exists.

CUI

AUI

FUI

<cuiModel id="ChineseFood-cui_12" name="ChineseFood-cui">

<window id="window_component_0" name="window_component_0" defaultContent="Chinese Food Order" width="263" height="491">

<gridBagBox id="grid_bag_box_1" name="grid_bag_box_1" gridHeight="24" gridWidth="13">

<outputText id="output_text_component_2" name="output_text_component_2"

defaultContent="APPETIZER :"/>

<checkBox id="checkbox_component_3" name="checkbox_component_3"

defaultContent="Small Fried Shrimp"/>


defaultContent="Nicky's Egg Roll"/>


defaultContent="Fried Popcorn Shrimp"/>

<outputText id="output_text_component_6" name="output_text_component_6"

defaultContent="STARTER :" isVisible="true"/>

<radioButton id="radiobutton_component_7" name="radiobutton_component_7"

defaultContent="Seaweed Soup" isVisible="true"/>

<radioButton id="radiobutton_component_9" name="radiobutton_component_9"

defaultContent="Hot and Sour Soup"/>

…

<button id="button_component_22" name="button_component_22"

defaultContent="Cancel" isVisible="true"/>

<button id="button_component_23" name="button_component_23"

defaultContent="Order" isVisible="true"/>

</gridBagBox>

</window>

</cuiModel>

Case study

• Goals: • multimodal application allowing to order Chinese food or

pizza, • reuse the “give delivering address” task from the Chinese

food ordering application AUI

AUI0: Order food

AUI0’: Choose food

AUI03: Choose meal

AUI02: Give

delivering

address


Give

name

Give

phone

Give

address

[Choose

Appetizer]

[Choose

Starter]

choose

soup Choose

rice

Choose

Quantity

Choose

Size

Choose

toppings

[Choose

Vegetable]

[Choose

Meat]

FUI

Composition au niveau des tâches

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI



Window

AIC

facet=control

AIC

facet=control

AIC

facet=control

AbstractIndividual

Container


Window

AIC

facet=control

AIC

facet=control

AIC

facet=control

AbstractIndividual

Container


Environment >


Environment >

LEWANDOWSKI A., LEPREUX S., BOURGUIN G. (2007). Tasks models merging for high-level component composition. J. Jacko (Ed.), Human-Computer Interaction, Part I, HCII 2007, Lecture Notes in Computer Science (LNCS) 4550, Springer-Verlag, pp. 1129-1138, juillet


• Travaux de Gregory Bourguin et Arnaud Lewandowski (Laboratoire d’informatique du littoral) et Jean-Claude Tarby (LIFL) :

• Les arbres de tâches sont intégrés à chaque composant métier.

• La composition de composant métier => composition d’arbres de tâches

• => Toujours une notation avec structure arbres


• Illustration : • 2 composants chat et tableau blanc possédant des tâches « similaires ».


• Illustration suite : • Résultat de la composition (fusion).

Problématique de construction d’IHM par composition

Projet ASPECT

Composition de composants

et de leurs IHMs

200

3

Equipes et travaux en présence

Equipe Rainbow

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.

Problé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)


" Fusion de menus correspondants aux composants (1)


" Fusion de menus correspondants aux composants (2)

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

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

JTextField JLabel

<sunml>

<interface id="FicheClient">

<structure>

<dialog id="MainDialog" sequence="true"> ...

<field id="LabelFieldNom" mode="read">

<element type="String">Nom :</element>

</field>

<field id="FieldNom" mode="read-write">

<element type="String">Toto</element>

</field> ...

</dialog>

</structure>

</interface>

</sunml>

Fichier SUNML (Spécification)

Réification

durand

Composant métier (Exécution)

?

?

?

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

De l’IHM abstraite vers l’IHM concrète

Séparation du composant d’IHM du composant métier

Expression des communications possibles entre ces composants avec

ISL

Adaptation des composants suivant le contexte d’exécution

durand

FicheClient

IHM concrète

IHM abstraite

Composant métier

JFrame1

Légende Instance

interaction

Controleur

Exercice : SUNML et ISL ?

Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


Task & Concepts

Abstract UI

Concrete UI

Final UI

Task & Concepts

Abstract UI

Concrete UI

Final UI


Equipe RAINBOW I3S

Construction d’applications

adaptables par composition

Un modèle inspiré d’Arche pour les services

Proposer un modèle d’architecture

pour un service interactif

N services fonctionnels et leurs interactions utilisateurs : comment fusionner le tout ?

Services Fonctionnel

Services D’interaction

Adaptor

Adaptor

Dialogue

Quid des assemblages

Comment fusionner 2 services respectant l’architecture?

Composition d’arches ?

Assemblage des services fonctionnels

Quid des dialogues ? Expression et fusion Quid des IHM? Expression et fusion

Travaux 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-Arches Etre indépendant plateforme : s’appuyer sur un modèle Etre indépendant dispositifs : s’appuyer sur les modèles d’IHM pour la plasticité Faire collaborer des modèles et pouvoir les changer

Assurer la dynamique de l’application : assembler à tous les niveaux Déduire au maximum les assemblages Trouver le bon niveau d’IHM abstrait

Adapter l’interface à l’évolution du système

déduction

Assemblage de services (Orchestrations, fusion d’aspects, composants hiérarchiques)

Assemblage d’IHMs (Utilisation d’IHMs abstraites, Puis projection sur devices)

Intervention

Si conflits

S’adresse au développeur

Adapter l’interface aux besoins utilisateurs

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

Déduire

l’assemblage

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

Adaptation

Adaptation

M IHM

Un langage abstrait orienté composition : SUNML Un composant d’IHM : représentation fractal Un modèle de dialogue et un modèle de plateforme Une collaboration entre les modèles

Plasticitérecherche2015 2

Education

Transcript of Plasticitérecherche2015 2