SlideShare une entreprise Scribd logo
Composition d’applications multi-
modèles dirigée par la composition
des interfaces graphiques
Christian Brel
28 Juin 2013
• Gaëlle Calvary - Professeur, INP Grenoble
• Jean Vanderdonckt - Professeur, Université Catholique de Louvain
• Sophie Lepreux - Docteur, Université de Valenciennes et du Hainaut-Cambrésis
• Mireille Blay-Fornarino - Professeur, Université Nice Sophia Antipolis
• Michel Riveill - Professeur, Université Nice Sophia Antipolis (Co-Directeur)
• Philippe Renevier-Gonin - Docteur, Université Nice Sophia Antipolis (Co-Directeur)
Jury
Utilisation simultanée d’applications
2 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Cinéma
• Obtenir les cinémas les plus proches de son hôtel
• Visualiser les séances de film d’un cinéma sélectionné
3 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Maps
• Obtenir le trajet entre son hôtel et le cinéma choisi
• Lister les principales intersections du trajet
4 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Problèmes liés à l’utilisation simultanée d’applications
• Manipulations nombreuses
• Perte d’informations
• Risque d’erreur de copies d’informations
• Obtenir les cinémas les plus proches de son hôtel
• Obtenir le trajet entre son hôtel et le cinéma choisi
5 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Problèmes des éditeurs d’applications
6 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Besoins liés aux problèmes de l’utilisateur et de l’éditeur
• Construire rapidement de nouvelles applications dans un but fixé
• Réutiliser l’existant
– Exploiter les fonctionnalités existantes
– Exploiter l’usage existant des fonctionnalités
– Exploiter l’intégration de ces fonctionnalités dans une interface
graphique existante
• Obtenir une application cohérente:
– Du point de vue utilisateur: utilisable et exécutable
7 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Développement d’une application en GL et en IHM
Interface graphique (IG)
Noyau Fonctionnel (NF)
Arbre de tâches
[CRF]
T
T T
T T T
C
C
CC C
C
[UML]
Cas d’utilisations
8 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Cohérence: du point de vue logiciel
Interface graphique (IG)
Noyau Fonctionnel (NF)
Arbre de tâches
T
T T
T T T
C
C
CC C
C
C
C
C
• Cohérence:
– Pouvoir atteindre un but
– A travers une interface
graphique
– Couplée à la partie
fonctionnelle
9 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Une composition cohérente d’applications
Extraction de sous-parties cohérentes
Modélisation d’une application cohérente par des
correspondances entre plusieurs modèles
C
C
CC C
C
C
C
CC C
C
C
C
CC C
C
T
T T
T T T
T
T T
T T T
T
T T
T T T
Interconnexions des sous parties extraites
10 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Plan
• Contexte et enjeux de la composition d’applications
• Etat de l’art: Composition d’applications
• Modèles de description d’une application
• Sélection
• Composition par substitutions
• Validation à travers un prototype et des tests utilisateurs
• Synthèse et perspectives
Processus de composition
11 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
ETAT DE L’ART:
COMPOSITION D’APPLICATIONS
- Composition au niveau graphique
- Composition au niveau fonctionnel
- Composition au niveau tâches
12 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Composition d’applications:
Trois points d’entrées
T
T T
T T T
C
C
CC C
C
13 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Point d’entrée pour la composition:
l’interface graphique
IG 1 IG 2
[ComposiXML]
[WinCuts]
[UI Façades]
[COTS-UI]
Nouveau NF
IG 3 = IG 1 + IG 2
C
C
CC C
C
14 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Point d’entrée pour la composition:
le noyau fonctionnel
NF 1 NF 2 NF 3 = NF 1 + NF 2
C
C
CC C
C
C
C
CC C
C
C
C
CC C
C
[ServFace]
[ALIAS]
[BPEL]
[BPEL4WS]
Nouvelle IG
15 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Point d’entrée pour la composition:
les tâches
T
T T
T T T
T
T T
T T T
Tâches 1 Tâches 2
Tâches 3 =
Tâches 1 + Tâches 2
T
T T
T T T
[Composants
de tâches]
[Compose]
[ServFace]
C
C
CC C
C
Nouveau NF Nouvelle IG
16 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Synthèse de l’état de l’art
• Perte de la cohérence globale de l’application
Risque d’application non exécutable
Risque d’application non utilisable
Utilisation de modèles pour chaque partie de
l’application
Mise en évidence de correspondances entre
ces modèles
17 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
MODÈLES DE DESCRIPTION D’UNE
APPLICATION - Modèle de l’Interface Graphique
- Modèle du noyau fonctionnel
- Modèle de l’arbre de tâches
- Liaisons entre modèlesINTERACT’11
WEBIST’11
IHM’11
HCSE’10
{ }
18 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Modèle pour l’Interface Graphique
19 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Modèle hiérarchique
Element d'IG
Element d'IGElement d'IG
Element d'IGElement d'IG Element d'IG
SunML
UIML
MARIA
UsiXML
XAML
SWING
[ ]
• Cohérence graphique « de contenance »
20 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Positionnement des éléments de l’interface
Element d'IG
Element d'IGElement d'IG
Element d'IGElement d'IG Element d'IG
isBelowOf
isOnTheRightOfisOnTheRightOf
Situé
Au dessus
à gauche
de (uie1)
Situé
Au dessus
de (uie1)
Situé
Au dessus
à droite
de (uie1)
Situé
A gauche
de (uie1)
Elément de
référence
(uie1)
Situé
A droite
de (uie1)
Situé
En dessous
à gauche
de (uie1)
Situé
En dessous
de (uie1)
Situé
En dessous
à droite
de (uie1)
• Cohérence graphique « de proximité »
21 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Modèle de l’Interface Graphique
Maps
MapsInterface
MainContainer
CheckPointsList
ZoomSlider VisualizationMap
MapContainer
Label "Position A" Label "Position B"AddressAInput AddressBInput
RouteCalculButton
RouteContainer
PositionsContainer
isOnTheLefOf
isBelowOf
isBelowOf
isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf
isOnTheRightOf
22 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Modèle architectural pour l’interface graphique
et le noyau fonctionnel : Modèle à composants
Element
d'application
Element
d'application
Port Requis
Port Fourni
Lien Opérationnel
SCA
SLCA
FRACTAL[ ]
C
C
CC C
C
C
C
C
• Cohérence « opérationnelle »
23 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
Port Requis
Port Fourni
Lien Opérationnel
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
Modèle à composants
Cinema
24 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Modèle pour l’Arbre de tâches:
Modèle « CTT »
HTA
UAN
GOMS
CTT
[ ] Task
(Abstract)
Task
(Interaction)
Task
(Abstract)
Task
(System)
Task
(User)
[]
[]>>
(User)
(System)
(Interaction)
(Abstract)
Tâche Utilisateur
Tâche Système
Tâche d'Interaction
Tâche Abstraite
[]
>>
[]>>
|||
choix
activation
séquence-transfert
parallélisme
LOTOS
[ ]
T
T T
T T T
• Cohérence « intentionnelle »
25 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Arbre de tâches
Cinema
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)
Update movie
theaters list
(Interaction)[]>>
[]>>Fill Address
(Interaction)
Trigger search
for closest
movie theaters
(Interaction)
[]>>
GetMovies
(Abstract)
Get movies
(System)
Update movies
list
(Task)[]>>
[]>>
Select Movie
Theater
(Interaction)
Trigger
search for
movies
(Interaction)
||
>>
26 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Cohérence globale de l’application:
Correspondances entre les parties
C
C
CC C
C
Composants
Interface Graphique
Arbre de tâches
T
T T
T T T
27 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
CheckPointsList
ZoomSlider VisualizationMap
ZoomSlider
CheckPoints
List
Controller
psInterface
MainContainer MapContainer
RouteContainer
MainContainer
CheckPointsList
ZoomSlider VisualizationMap
MapContainer
Label "Position A" Label "Position B"AddressAInput AddressBInput
RouteCalculButton
RouteContainer
PositionsContainer
isOnTheLefOf
isBelowOf
isBelowOf
isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf
isOnTheRightOf
CheckPointsList
ZoomSlider VisualizationMap
ZoomSlider
Controller
CheckPoints
List
Controller
MapsInterface
MainContainer MapContainer
RouteContainer
MainContainer
CheckPointsList
ZoomSlider VisualizationMap
MapContainer
Label "Position A" Label "Position B"AddressAInput AddressBInput
RouteCalculButton
RouteContainer
PositionsContainer
isOnTheLefOf
isBelowOf
isBelowOf
isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf
isOnTheRightOf
Encapsulation:
Correspondance Interface Graphique – Composants
28 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
CheckPointsList
ZoomSlider VisualizationMap
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
RouteMap
Service
Fill
Position A
(Interaction)
Fill
Position B
(Interaction)
Update Map and
Checkpoints list
(Interaction)
|||
Fill begin and
arrival positions
(Interaction)
Update Map
(Interaction)
Update
slider
(Interaction)
|||
Update Map
(Interaction)
Update
Checkpoints List
(Interaction)
|||
Route
Calcul
(System)
Trigger Route
Calcul
(Interaction)
[]>> []>> []>>
ZoomSlider
Controller
Visualization
Map
Controller
CheckPoints
List
Controller
MapsInterface
MainContainer MapContainer
PositionsContainer
RouteContainer
CheckPointsList
ZoomSlider VisualizationMap
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
RouteMap
Service
Fill
Position A
(Interaction)
Fill
Position B
(Interaction)
Update Map and
Checkpoints list
(Interaction)
|||
Fill begin and
arrival positions
(Interaction)
Update Map
(Interaction)
Update
slider
(Interaction)
|||
Update Map
(Interaction)
Update
Checkpoints List
(Interaction)
|||
Route
Calcul
(System)
Trigger Route
Calcul
(Interaction)
[]>> []>> []>>
ZoomSlider
Controller
Visualization
Map
Controller
CheckPoints
List
Controller
MapsInterface
MainContainer MapContainer
PositionsContainer
RouteContainer
Port Requis
Port Fourni
Lien Opérationnel
Réalisation (métier et interaction) d’une tâche:
Correspondance Tâches – Composants
29 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Maps
TaskTree
(Abstract)
Zoom on Map
(Abstract)
Trigger
Zoom
(Interaction)
Calcul
Zoom
(System)
Update Map and slider
(Interaction)[]>> []>>
Highlight a
checkpoint
(Interaction)
Retrieve a Route
(Abstract) >>[]
Select a
checkpoint
(Interaction)
Hig
checkpo
(Inte
[]>>
Fill
Position A
(Interaction)
Fill
Position B
(Interaction)
Upd
Che
(I
|||
Fill begin and
arrival positions
(Interaction)
Update Map
(Interaction)
Update
slider
(Interaction)
|||
Update Map
(Interaction)
Route
Calcul
(System)
Trigger Route
Calcul
(Interaction)
[]>> []>> []>>
MapsInterface
MainContainer
CheckPointsList
VisualizationMap
ontainer
Label "Position B"AddressAInput AddressBInput
RouteCalculButton
RouteContainer
PositionsContainer
LefOf
isBelowOf
isBelowOf
isBelowOf isBelowOf isOnTheRightOf
isOnTheRightOf
Maps
TaskTree
(Abstract)
Zoom on Map
(Abstract)
Trigger
Zoom
(Interaction)
Calcul
Zoom
(System)
Update Map and slider
(Interaction)[]>> []>>
Highlight a
checkpoint
(Interaction)
Retrieve a Route
(Abstract) >>[]
Select a
checkpoint
(Interaction)
H
checkp
(In
[]>>
Fill
Position A
(Interaction)
Fill
Position B
(Interaction)
Up
C
|||
Fill begin and
arrival positions
(Interaction)
Update Map
(Interaction)
Update
slider
(Interaction)
|||
Update Map
(Interaction)
Route
Calcul
(System)
Trigger Route
Calcul
(Interaction)
[]>> []>> []>>
MapsInterface
MainContainer
CheckPointsList
VisualizationMap
ontainer
Label "Position B"AddressAInput AddressBInput
RouteCalculButton
RouteContainer
PositionsContainer
efOf
isBelowOf
isBelowOf
isBelowOf isBelowOf isOnTheRightOf
isOnTheRightOf
Réalisation (interaction) d’une tâche:
Correspondance Interface Graphique - Tâches
30 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
C
C
CC C
C
Ma proposition
Interface Graphique
Arbre de tâches
T
T T
T T T
Composants
C
C
C
31 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Processus de composition
C
C
CC C
C
C
C
CC C
C
C
C
CC C
C
T
T T
T T T
T
T T
T T T
1) Sélection cohérente des sous-parties
2) Composition par substitutions
3) Placement des éléments graphiques dans la nouvelle interface
32 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
SÉLECTION
- Sélection cohérente
- Illustration de la sélection
INTERACT’11
WEBIST’11
IHM’11
HCSE’10
{ }
33 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Sélection cohérente
C
C
CC C
C
T
T T
T T T
1) Cohérence globale de la sélection
2) Expression des intentions utilisateurs
34 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Exploitation des capacités de chaque modèle:
expression des intentions utilisateurs
T
T T
T T T
C
C
CC C
C
35 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Sélection cohérente
C
C
CC C
C
T
T T
T T T
1) Cohérence globale de la sélection
2) Expression des intentions utilisateurs
3) Considération de l’exécution
36 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Application à l’étude de cas: Cinéma
37 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
AddressInput
isBelowOf
isOnTheRightOf
MovieTheatersInfo
Container
Movies In Selected
Cinema
ClosestMovie
TheatersList
isOnTheRightOf
GetClosestMovie
Theaters
Controller
CinemaInterface CinemaContainer
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
MoviesList
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
AddressInput
isBelowOf
isOnTheRightOf
MovieTheatersInfo
Container
Movies In Selected
Cinema
ClosestMovie
TheatersList
isOnTheRightOf
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)
[]>>
Fill Address
(Interaction)
Trigger search
for closest
movie theaters
(Interaction)
[]>>
Select Movie
Theater
(Interaction)
Trigge
search
movie
(Interact
||
Cohérence globale:
Répercussion sur tâches et composants
38 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)
Update movie
theaters list
(Interaction)[]>>
[]>>Fill Address
(Interaction)
Trigger search
for closest
movie theaters
(Interaction)
[]>>
GetMovies
(Abstract)
Get movies
(System)[]>>
Select Movie
Theater
(Interaction)
Trigger
search for
movies
(Interaction)
||
>>
Exploitation du modèle de tâches
39 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)
Update movie
theaters list
(Interaction)[]>>
[]>>Fill Address
(Interaction)
Trigger search
for closest
movie theaters
(Interaction)
[]>>
GetMovies
(Abstract)
Get movies
(System)
Update movies
list
(Task)[]>>
[]>>
Select Movie
Theater
(Interaction)
Trigger
search for
movies
(Interaction)
||
>>
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
Cohérence globale:
répercussion sur les composants
40 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Considération de l’exécution
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
41 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
AddressInput
isBelowOf
isOnTheRightOf
MovieTheatersInfo
Container
Movies In Selected
Cinema
ClosestMovie
TheatersList
isOnTheRightOf
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
Cohérence globale:
Répercussion sur l’Interface Graphique
42 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
AddressInput
isBelowOf
isOnTheRightOf
MovieTheatersInfo
Container
Movies In Selected
Cinema
ClosestMovie
TheatersList
isOnTheRightOf
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)
Update movie
theaters list
(Interaction)[]>>
[]>>Fill Address
(Interaction)
Trigger search
for closest
movie theaters
(Interaction)
[]>>
GetMovies
(Abstract)
Get movies
(System)
Update movies
list
(Task)[]>>
[]>>
Select Movie
Theater
(Interaction)
Trigger
search for
movies
(Interaction)
||
>>
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
Sélection d’une sous-partie cohérente de l’application
43 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
COMPOSITION PAR SUBSTITUTIONS
- Substitutions entre 2 éléments d’Interface Graphique
- Substitutions entre 2 éléments d’application
- Substitutions entre 2 ports
ICSEA’12
SEAA’12
SEDE’12
IDM’11
{ }
44 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Principe des substitutions
45 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
CheckPointsList
ZoomSlider VisualizationMap
AddressBInput
RouteCalculButton
RouteCalcul
Controller
RouteMap
Service
ZoomSlider
Controller
Visualization
Map
Controller
CheckPoints
List
Controller
MainContainer MapContainer
PositionsContainer
RouteContainer
MapsInterface
MainContainer
CheckPointsList
ZoomSlider VisualizationMap
MapContainer
Label "Position A" Label "Position B" AddressBInput
RouteCalculButton
RouteContainer
PositionsContainer
isOnTheLefOf
isBelowOf
isBelowOf
isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf
isOnTheRightOf
AddressAInput
Port Requis
Port Fourni
Lien Opérationnel
AddressAInput
Application "Maps" Application "Cinema"
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
isBelowOf
isOnTheRightOf
MovieTheatersInfo
Container
Movies In Selected
Cinema
ClosestMovie
TheatersList
isOnTheRightOf
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
AddressInput
AddressInput
Substitutions d’éléments d’application
46 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
CheckPointsList
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
CheckPoints
List
Controller
PositionsContainer
RouteContainer
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
GetClosestMovie
TheatersButton
adapter
adapter
Port Requis
Port Fourni
Lien Opérationnel
Application
"Maps"
Application
"Cinema"
CheckPointsList
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
CheckPoints
List
Controller
PositionsContainer
RouteContainer
Port Requis
Port Fourni
Lien Opérationnel
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
GetClosestMovie
TheatersButton
adapter
Application
"Maps"
Application
"Cinema"
CheckPointsList
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
CheckPoints
List
Controller
PositionsContainer
RouteContainer
Port Requis
Port Fourni
Lien Opérationnel
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
AddressInput
AddressContainer
GetClosestMovie
TheatersButton
Application
"Maps"
Application
"Cinema"
Succession de substitution de ports
47 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
VALIDATION À TRAVERS UN PROTOTYPE
ET DES TESTS UTILISATEURS
- OntoCompo: Outil de composition d’applications
- Tests UtilisateursINTERACT’11
IHM’11{ }
48 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles
Tests Utilisateurs:
Objectifs et Déroulement
Phase
« d’apprentissage »
Sélection et
substitutions
sans aide
Ajout de l’aide à
travers les extensions
de sélection
Présentation
des différents
modèles
Entretien de fin de
tests
Etude rapide du code
généré pour une
substitution
Compréhension du processus de composition « Sélection – Substitution - Placement »
Aptitude à effectuer la composition à l’aide du prototype
Suffisance des informations fournies (accès uniquement à l’Interface Graphique)
49 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Utilisateurs et Environnement de test
• 9 développeurs-informaticiens répartis en 2 groupes
– 4 n’ayant jamais manipulé d’outils de composition
d’applications
– 5 ayant utilisé au moins un outil
Pas de différence significative
• Environnement de test
Développeur
Testeur
Observateur
50 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Résultats
Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles
Compréhension du processus de composition « Sélection – Substitution - Placement »
Aptitude à effectuer la composition à l’aide du prototype
Suffisance des informations fournies (accès uniquement à l’Interface Graphique)
Bonne appréhension du processus
Réussite dans la concrétisation des intentions…
mais des difficultés
Extensions: Compréhension difficiles – Utilité comprise
 Utilisation principalement de l’extension utilisant les tâches
 Modèle de tâches: le plus intuitif pour effectuer les sélections
 Modèle à composants: celui qui convient pour effectuer les
substitutions
51 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
SYNTHÈSE ET PERSPECTIVES
52 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Modélisation multi-niveaux d’une application
cohérente par des correspondances entre modèles
– Extraction de sous-parties cohérentes
– Interconnexions des sous parties extraites
 OntoCompo: un prototype pour la composition
 Des expérimentations
Composition d’applications dirigée par
la composition des Interfaces Graphiques
C
C
CC C
C
C
C
CC C
C
C
C
CC C
C
T
T T
T T T
T
T T
T T T
T
T T
T T T
53 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Suite des tests utilisateurs:
Déterminer la représentation des modèles
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
Port Requis
Port Fourni
Lien Opérationnel
AddressInput
AddressContainer
ClosestMovie
TheatersList
GetClosestMovie
TheatersButton
MovieTheatersInfo
Container
GetMovies
Controller
GetMovies
Service
MoviesList
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)
Update movie
theaters list
(Interaction)[]>>
[]>>Fill Address
(Interaction)
Trigger search
for closest
movie theaters
(Interaction)
[]>>
GetMovies
(Abstract)
Get movies
(System)
Update movies
list
(Task)[]>>
[]>>
Select Movie
Theater
(Interaction)
Trigger
search for
movies
(Interaction)
||
>> CheckPointsList
ZoomSlider VisualizationMap
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
RouteMap
Service
ZoomSlider
Controller
Visualization
Map
Controller
CheckPoints
List
Controller
MapsInterface
MainContainer MapContainer
PositionsContainer
RouteContainer
Port Requis
Port Fourni
Lien Opérationnel
Maps
TaskTree
(Abstract)
Zoom on Map
(Abstract)
Trigger
Zoom
(Interaction)
Calcul
Zoom
(System)
Update Map and slider
(Interaction)[]>> []>>
Highlight a
checkpoint
(Interaction)
Retrieve a Route
(Abstract) >>[]
Select a
checkpoint
(Interaction)
Highlight
checkpoint on Map
(Interaction)
[]>>
Fill
Position A
(Interaction)
Fill
Position B
(Interaction)
Update Map and
Checkpoints list
(Interaction)
|||
Fill begin and
arrival positions
(Interaction)
Update Map
(Interaction)
Update
slider
(Interaction)
|||
Update Map
(Interaction)
Update
Checkpoints List
(Interaction)
|||
Route
Calcul
(System)
Trigger Route
Calcul
(Interaction)
[]>> []>> []>>
54 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
C
C
CC C
C
C
C
CC C
C
C
C
CC C
C
« Algèbre » d’applications
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)
Update movie
theaters list
(Interaction)[]>>
[]>>Fill Address
(Interaction)
Trigger search
for closest
movie theaters
(Interaction)
[]>>
GetMovies
(Abstract)
Get movies
(System)
Update movies
list
(Task)[]>>
[]>>
Select Movie
Theater
(Interaction)
Trigger
search for
movies
(Interaction)
||
>>
Maps
TaskTree
(Abstract)
Zoom on Map
(Abstract)
Trigger
Zoom
(Interaction)
Calcul
Zoom
(System)
Update Map and slider
(Interaction)[]>> []>>
Highlight a
checkpoint
(Interaction)
Retrieve a Route
(Abstract) >>[]
Select a
checkpoint
(Interaction)
Highlight
checkpoint on Map
(Interaction)
[]>>
Fill
Position A
(Interaction)
Fill
Position B
(Interaction)
Update Map and
Checkpoints list
(Interaction)
|||
Fill begin and
arrival positions
(Interaction)
Update Map
(Interaction)
Update
slider
(Interaction)
|||
Update Map
(Interaction)
Update
Checkpoints List
(Interaction)
|||
Route
Calcul
(System)
Trigger Route
Calcul
(Interaction)
[]>> []>> []>>
55 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Obtention des modèles d’une application
CheckPointsList
ZoomSlider VisualizationMap
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
RouteMap
Service
Maps
TaskTree
(Abstract)
Zoom on Map
(Abstract)
Trigger
Zoom
(Interaction)
Calcul
Zoom
(System)
Update Map and slider
(Interaction)[]>> []>>
Highlight a
checkpoint
(Interaction)
Retrieve a Route
(Abstract) >>[]
Select a
checkpoint
(Interaction)
Highlight
checkpoint on Map
(Interaction)
[]>>
Fill
Position A
(Interaction)
Fill
Position B
(Interaction)
Update Map and
Checkpoints list
(Interaction)
|||
Fill begin and
arrival positions
(Interaction)
Update Map
(Interaction)
Update
slider
(Interaction)
|||
Update Map
(Interaction)
Update
Checkpoints List
(Interaction)
|||
Route
Calcul
(System)
Trigger Route
Calcul
(Interaction)
[]>> []>> []>>
ZoomSlider
Controller
Visualization
Map
Controller
CheckPoints
List
Controller
MapsInterface
MainContainer MapContainer
PositionsContainer
RouteContainer
Port Requis
Port Fourni
Lien Opérationnel
MapsInterface
MainContainer
CheckPointsList
ZoomSlider VisualizationMap
MapContainer
Label "Position A" Label "Position B"AddressAInput AddressBInput
RouteCalculButton
RouteContainer
PositionsContainer
isOnTheLefOf
isBelowOf
isBelowOf
isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf
isOnTheRightOf
UI
UI
UI
UI
UI
UI
UI
UI
UI
UI
UI
Component
UI
Component
UI
Component
UI
Component
Input
Input
Input
Input
Input
Input
Input
Input
Input
Output
Output
Output
Output
Output
Output
Output
Output
Output
Output
Trigger
Trigger
Trigger
Trigger
Trigger
Trigger
Trigger Trigger
Input
Input
Input Input
Input
Input
Input
Input
Input
Input
Input Input
Input
Input
Input
Input
Input
Input
Input
Input
56 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Composition menée par l’utilisateur final
57 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
Merci de votre attention!
58 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives

Contenu connexe

Tendances

Plasticité2015 intro
Plasticité2015 introPlasticité2015 intro
Plasticité2015 intro
Atelier IHM Polytech Nice Sophia
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
Atelier IHM Polytech Nice Sophia
 
Plasticité des IHM
Plasticité des IHMPlasticité des IHM
Plasticité des IHM
Anne-Marie Pinna-Dery
 
Intro conception2015vf bis
Intro conception2015vf bisIntro conception2015vf bis
Intro conception2015vf bis
Atelier IHM Polytech Nice Sophia
 
Intro ihm
Intro ihmIntro ihm
Présentation ceihma tous
Présentation ceihma tousPrésentation ceihma tous
Présentation ceihma tous
Atelier IHM Polytech Nice Sophia
 
IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: Plasticite
Marius Butuc
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
Anne-Marie Pinna-Dery
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Atelier IHM Polytech Nice Sophia
 
Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
Atelier IHM Polytech Nice Sophia
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
Anne-Marie Pinna-Dery
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
Anne-Marie Pinna-Dery
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
Anne-Marie Pinna-Dery
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateurs
Anne-Marie Pinna-Dery
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
Use Age
 

Tendances (20)

Plasticité2015 intro
Plasticité2015 introPlasticité2015 intro
Plasticité2015 intro
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Plasticité des IHM
Plasticité des IHMPlasticité des IHM
Plasticité des IHM
 
Introduction à la plasticité
Introduction à la plasticitéIntroduction à la plasticité
Introduction à la plasticité
 
Intro conception2015vf bis
Intro conception2015vf bisIntro conception2015vf bis
Intro conception2015vf bis
 
Intro ihm
Intro ihmIntro ihm
Intro ihm
 
Présentation ceihma tous
Présentation ceihma tousPrésentation ceihma tous
Présentation ceihma tous
 
IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: Plasticite
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
 
Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateurs
 
CM Processus Méthodes
CM Processus MéthodesCM Processus Méthodes
CM Processus Méthodes
 
CM uml-intro
CM uml-introCM uml-intro
CM uml-intro
 
Introduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHMIntroduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHM
 
CM patterns
CM patternsCM patterns
CM patterns
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 

En vedette

Formation Inspiris : Faire simplement son etude de marche
Formation Inspiris : Faire simplement son etude de marcheFormation Inspiris : Faire simplement son etude de marche
Formation Inspiris : Faire simplement son etude de marche
Inspiris
 
Comment faire une étude de marché
Comment faire une étude de marchéComment faire une étude de marché
Comment faire une étude de marché
Drag'n Survey
 
Etude de Marche
Etude de MarcheEtude de Marche
Etude de Marche
BOUJDI ZOUHEIR
 
Etude de marché
Etude de marchéEtude de marché
Etude de marché
Cyrille Morel
 
Atelier étude marché CCI de Bordeaux
Atelier étude marché CCI de BordeauxAtelier étude marché CCI de Bordeaux
Atelier étude marché CCI de Bordeaux
CCI de Bordeaux
 
Réaliser une étude de marché soi-même par Google Ad Planner
Réaliser une étude de marché soi-même par Google Ad PlannerRéaliser une étude de marché soi-même par Google Ad Planner
Réaliser une étude de marché soi-même par Google Ad Planner
AXIZ eBusiness
 
Comment faire une etude de marche soi meme ?
Comment faire une etude de marche soi meme ?Comment faire une etude de marche soi meme ?
Comment faire une etude de marche soi meme ?
AXIZ eBusiness
 
Etude présentation finale
Etude présentation finaleEtude présentation finale
Etude présentation finale
VIALINE
 

En vedette (9)

Formation Inspiris : Faire simplement son etude de marche
Formation Inspiris : Faire simplement son etude de marcheFormation Inspiris : Faire simplement son etude de marche
Formation Inspiris : Faire simplement son etude de marche
 
Comment faire une étude de marché
Comment faire une étude de marchéComment faire une étude de marché
Comment faire une étude de marché
 
Business plan 1
Business plan 1Business plan 1
Business plan 1
 
Etude de Marche
Etude de MarcheEtude de Marche
Etude de Marche
 
Etude de marché
Etude de marchéEtude de marché
Etude de marché
 
Atelier étude marché CCI de Bordeaux
Atelier étude marché CCI de BordeauxAtelier étude marché CCI de Bordeaux
Atelier étude marché CCI de Bordeaux
 
Réaliser une étude de marché soi-même par Google Ad Planner
Réaliser une étude de marché soi-même par Google Ad PlannerRéaliser une étude de marché soi-même par Google Ad Planner
Réaliser une étude de marché soi-même par Google Ad Planner
 
Comment faire une etude de marche soi meme ?
Comment faire une etude de marche soi meme ?Comment faire une etude de marche soi meme ?
Comment faire une etude de marche soi meme ?
 
Etude présentation finale
Etude présentation finaleEtude présentation finale
Etude présentation finale
 

Similaire à Composition d'applications multi-modèles dirigée par la composition des interfaces graphiques

rapport de fin de stage
 rapport de fin de stage rapport de fin de stage
rapport de fin de stage
KONAN MARTIAL
 
Automation
AutomationAutomation
Automation
KONAN MARTIAL
 
Présentation mémoire de Fin d’Etudes
Présentation mémoire de Fin d’EtudesPrésentation mémoire de Fin d’Etudes
Présentation mémoire de Fin d’Etudes
Amine MEGDICHE
 
Migration de Sage ligne 100 vers OpenERP v6
Migration de Sage ligne 100 vers OpenERP v6Migration de Sage ligne 100 vers OpenERP v6
Migration de Sage ligne 100 vers OpenERP v6
riyadadva
 
Formation gwt
Formation gwtFormation gwt
Formation gwt
Francois ANDRE
 
Présentation de la rencontre du Groupe d'usagers FME_mars 2011
Présentation de la rencontre du Groupe d'usagers FME_mars 2011Présentation de la rencontre du Groupe d'usagers FME_mars 2011
Présentation de la rencontre du Groupe d'usagers FME_mars 2011
Consortech
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
Francois ANDRE
 
Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...
Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...
Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...
IHM'10
 
2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel
lauraty3204
 
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc DivadXebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
Publicis Sapient Engineering
 
Soutenance séminaire bibliographique
Soutenance séminaire bibliographiqueSoutenance séminaire bibliographique
Soutenance séminaire bibliographique
Maxime ALAY-EDDINE
 
sdfddfsdfddf
sdfddfsdfddfsdfddfsdfddf
sdfddfsdfddf
mahmoudelamri
 
BtoBIM 2018 - PITCH / SOC INFORMATIQUE
BtoBIM 2018 - PITCH / SOC INFORMATIQUEBtoBIM 2018 - PITCH / SOC INFORMATIQUE
BtoBIM 2018 - PITCH / SOC INFORMATIQUE
Novabuild
 
Metrixware Rencontre Utilisateurs Projet Cobos
Metrixware Rencontre Utilisateurs Projet CobosMetrixware Rencontre Utilisateurs Projet Cobos
Metrixware Rencontre Utilisateurs Projet Cobos
metrixware
 
Presentation de soutenance du Projet Fin d'Etudes
Presentation de soutenance du Projet Fin d'EtudesPresentation de soutenance du Projet Fin d'Etudes
Presentation de soutenance du Projet Fin d'Etudes
Tahani RIAHI
 
SIP@iPLM2015
SIP@iPLM2015SIP@iPLM2015
SIP@iPLM2015
Dr Nicolas Figay
 
Smb20 sur 20
Smb20 sur 20Smb20 sur 20
Smb20 sur 20
Achibane Abouamine
 
Développement de plug in sous eclipse
Développement de plug in sous eclipseDéveloppement de plug in sous eclipse
Développement de plug in sous eclipse
ISIG
 
X-2E Analysis - FR
X-2E Analysis - FRX-2E Analysis - FR
X-2E Analysis - FR
Fresche Solutions
 

Similaire à Composition d'applications multi-modèles dirigée par la composition des interfaces graphiques (20)

rapport de fin de stage
 rapport de fin de stage rapport de fin de stage
rapport de fin de stage
 
Automation
AutomationAutomation
Automation
 
Présentation mémoire de Fin d’Etudes
Présentation mémoire de Fin d’EtudesPrésentation mémoire de Fin d’Etudes
Présentation mémoire de Fin d’Etudes
 
Migration de Sage ligne 100 vers OpenERP v6
Migration de Sage ligne 100 vers OpenERP v6Migration de Sage ligne 100 vers OpenERP v6
Migration de Sage ligne 100 vers OpenERP v6
 
Formation gwt
Formation gwtFormation gwt
Formation gwt
 
Présentation de la rencontre du Groupe d'usagers FME_mars 2011
Présentation de la rencontre du Groupe d'usagers FME_mars 2011Présentation de la rencontre du Groupe d'usagers FME_mars 2011
Présentation de la rencontre du Groupe d'usagers FME_mars 2011
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
 
Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...
Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...
Méthode d’implémentation efficace des modèles PAC et PAC-Amodeus à l’aide de ...
 
2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel
 
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc DivadXebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
 
Soutenance séminaire bibliographique
Soutenance séminaire bibliographiqueSoutenance séminaire bibliographique
Soutenance séminaire bibliographique
 
catia
catia catia
catia
 
sdfddfsdfddf
sdfddfsdfddfsdfddfsdfddf
sdfddfsdfddf
 
BtoBIM 2018 - PITCH / SOC INFORMATIQUE
BtoBIM 2018 - PITCH / SOC INFORMATIQUEBtoBIM 2018 - PITCH / SOC INFORMATIQUE
BtoBIM 2018 - PITCH / SOC INFORMATIQUE
 
Metrixware Rencontre Utilisateurs Projet Cobos
Metrixware Rencontre Utilisateurs Projet CobosMetrixware Rencontre Utilisateurs Projet Cobos
Metrixware Rencontre Utilisateurs Projet Cobos
 
Presentation de soutenance du Projet Fin d'Etudes
Presentation de soutenance du Projet Fin d'EtudesPresentation de soutenance du Projet Fin d'Etudes
Presentation de soutenance du Projet Fin d'Etudes
 
SIP@iPLM2015
SIP@iPLM2015SIP@iPLM2015
SIP@iPLM2015
 
Smb20 sur 20
Smb20 sur 20Smb20 sur 20
Smb20 sur 20
 
Développement de plug in sous eclipse
Développement de plug in sous eclipseDéveloppement de plug in sous eclipse
Développement de plug in sous eclipse
 
X-2E Analysis - FR
X-2E Analysis - FRX-2E Analysis - FR
X-2E Analysis - FR
 

Composition d'applications multi-modèles dirigée par la composition des interfaces graphiques

  • 1. Composition d’applications multi- modèles dirigée par la composition des interfaces graphiques Christian Brel 28 Juin 2013 • Gaëlle Calvary - Professeur, INP Grenoble • Jean Vanderdonckt - Professeur, Université Catholique de Louvain • Sophie Lepreux - Docteur, Université de Valenciennes et du Hainaut-Cambrésis • Mireille Blay-Fornarino - Professeur, Université Nice Sophia Antipolis • Michel Riveill - Professeur, Université Nice Sophia Antipolis (Co-Directeur) • Philippe Renevier-Gonin - Docteur, Université Nice Sophia Antipolis (Co-Directeur) Jury
  • 2. Utilisation simultanée d’applications 2 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 3. Cinéma • Obtenir les cinémas les plus proches de son hôtel • Visualiser les séances de film d’un cinéma sélectionné 3 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 4. Maps • Obtenir le trajet entre son hôtel et le cinéma choisi • Lister les principales intersections du trajet 4 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 5. Problèmes liés à l’utilisation simultanée d’applications • Manipulations nombreuses • Perte d’informations • Risque d’erreur de copies d’informations • Obtenir les cinémas les plus proches de son hôtel • Obtenir le trajet entre son hôtel et le cinéma choisi 5 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 6. Problèmes des éditeurs d’applications 6 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 7. Besoins liés aux problèmes de l’utilisateur et de l’éditeur • Construire rapidement de nouvelles applications dans un but fixé • Réutiliser l’existant – Exploiter les fonctionnalités existantes – Exploiter l’usage existant des fonctionnalités – Exploiter l’intégration de ces fonctionnalités dans une interface graphique existante • Obtenir une application cohérente: – Du point de vue utilisateur: utilisable et exécutable 7 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 8. Développement d’une application en GL et en IHM Interface graphique (IG) Noyau Fonctionnel (NF) Arbre de tâches [CRF] T T T T T T C C CC C C [UML] Cas d’utilisations 8 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 9. Cohérence: du point de vue logiciel Interface graphique (IG) Noyau Fonctionnel (NF) Arbre de tâches T T T T T T C C CC C C C C C • Cohérence: – Pouvoir atteindre un but – A travers une interface graphique – Couplée à la partie fonctionnelle 9 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 10. Une composition cohérente d’applications Extraction de sous-parties cohérentes Modélisation d’une application cohérente par des correspondances entre plusieurs modèles C C CC C C C C CC C C C C CC C C T T T T T T T T T T T T T T T T T T Interconnexions des sous parties extraites 10 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 11. Plan • Contexte et enjeux de la composition d’applications • Etat de l’art: Composition d’applications • Modèles de description d’une application • Sélection • Composition par substitutions • Validation à travers un prototype et des tests utilisateurs • Synthèse et perspectives Processus de composition 11 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 12. ETAT DE L’ART: COMPOSITION D’APPLICATIONS - Composition au niveau graphique - Composition au niveau fonctionnel - Composition au niveau tâches 12 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 13. Composition d’applications: Trois points d’entrées T T T T T T C C CC C C 13 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 14. Point d’entrée pour la composition: l’interface graphique IG 1 IG 2 [ComposiXML] [WinCuts] [UI Façades] [COTS-UI] Nouveau NF IG 3 = IG 1 + IG 2 C C CC C C 14 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 15. Point d’entrée pour la composition: le noyau fonctionnel NF 1 NF 2 NF 3 = NF 1 + NF 2 C C CC C C C C CC C C C C CC C C [ServFace] [ALIAS] [BPEL] [BPEL4WS] Nouvelle IG 15 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 16. Point d’entrée pour la composition: les tâches T T T T T T T T T T T T Tâches 1 Tâches 2 Tâches 3 = Tâches 1 + Tâches 2 T T T T T T [Composants de tâches] [Compose] [ServFace] C C CC C C Nouveau NF Nouvelle IG 16 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 17. Synthèse de l’état de l’art • Perte de la cohérence globale de l’application Risque d’application non exécutable Risque d’application non utilisable Utilisation de modèles pour chaque partie de l’application Mise en évidence de correspondances entre ces modèles 17 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 18. MODÈLES DE DESCRIPTION D’UNE APPLICATION - Modèle de l’Interface Graphique - Modèle du noyau fonctionnel - Modèle de l’arbre de tâches - Liaisons entre modèlesINTERACT’11 WEBIST’11 IHM’11 HCSE’10 { } 18 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 19. Modèle pour l’Interface Graphique 19 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 20. Modèle hiérarchique Element d'IG Element d'IGElement d'IG Element d'IGElement d'IG Element d'IG SunML UIML MARIA UsiXML XAML SWING [ ] • Cohérence graphique « de contenance » 20 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 21. Positionnement des éléments de l’interface Element d'IG Element d'IGElement d'IG Element d'IGElement d'IG Element d'IG isBelowOf isOnTheRightOfisOnTheRightOf Situé Au dessus à gauche de (uie1) Situé Au dessus de (uie1) Situé Au dessus à droite de (uie1) Situé A gauche de (uie1) Elément de référence (uie1) Situé A droite de (uie1) Situé En dessous à gauche de (uie1) Situé En dessous de (uie1) Situé En dessous à droite de (uie1) • Cohérence graphique « de proximité » 21 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 22. Modèle de l’Interface Graphique Maps MapsInterface MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf 22 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 23. Modèle architectural pour l’interface graphique et le noyau fonctionnel : Modèle à composants Element d'application Element d'application Port Requis Port Fourni Lien Opérationnel SCA SLCA FRACTAL[ ] C C CC C C C C C • Cohérence « opérationnelle » 23 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 24. GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer Port Requis Port Fourni Lien Opérationnel AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Modèle à composants Cinema 24 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 25. Modèle pour l’Arbre de tâches: Modèle « CTT » HTA UAN GOMS CTT [ ] Task (Abstract) Task (Interaction) Task (Abstract) Task (System) Task (User) [] []>> (User) (System) (Interaction) (Abstract) Tâche Utilisateur Tâche Système Tâche d'Interaction Tâche Abstraite [] >> []>> ||| choix activation séquence-transfert parallélisme LOTOS [ ] T T T T T T • Cohérence « intentionnelle » 25 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 26. Arbre de tâches Cinema Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> 26 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 27. Cohérence globale de l’application: Correspondances entre les parties C C CC C C Composants Interface Graphique Arbre de tâches T T T T T T 27 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 28. CheckPointsList ZoomSlider VisualizationMap ZoomSlider CheckPoints List Controller psInterface MainContainer MapContainer RouteContainer MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf CheckPointsList ZoomSlider VisualizationMap ZoomSlider Controller CheckPoints List Controller MapsInterface MainContainer MapContainer RouteContainer MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf Encapsulation: Correspondance Interface Graphique – Composants 28 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 29. CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel Réalisation (métier et interaction) d’une tâche: Correspondance Tâches – Composants 29 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 30. Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Hig checkpo (Inte []>> Fill Position A (Interaction) Fill Position B (Interaction) Upd Che (I ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> MapsInterface MainContainer CheckPointsList VisualizationMap ontainer Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer LefOf isBelowOf isBelowOf isBelowOf isBelowOf isOnTheRightOf isOnTheRightOf Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) H checkp (In []>> Fill Position A (Interaction) Fill Position B (Interaction) Up C ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> MapsInterface MainContainer CheckPointsList VisualizationMap ontainer Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer efOf isBelowOf isBelowOf isBelowOf isBelowOf isOnTheRightOf isOnTheRightOf Réalisation (interaction) d’une tâche: Correspondance Interface Graphique - Tâches 30 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 31. C C CC C C Ma proposition Interface Graphique Arbre de tâches T T T T T T Composants C C C 31 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 32. Processus de composition C C CC C C C C CC C C C C CC C C T T T T T T T T T T T T 1) Sélection cohérente des sous-parties 2) Composition par substitutions 3) Placement des éléments graphiques dans la nouvelle interface 32 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 33. SÉLECTION - Sélection cohérente - Illustration de la sélection INTERACT’11 WEBIST’11 IHM’11 HCSE’10 { } 33 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 34. Sélection cohérente C C CC C C T T T T T T 1) Cohérence globale de la sélection 2) Expression des intentions utilisateurs 34 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 35. Exploitation des capacités de chaque modèle: expression des intentions utilisateurs T T T T T T C C CC C C 35 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 36. Sélection cohérente C C CC C C T T T T T T 1) Cohérence globale de la sélection 2) Expression des intentions utilisateurs 3) Considération de l’exécution 36 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 37. Application à l’étude de cas: Cinéma 37 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 38. CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf GetClosestMovie Theaters Controller CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller MoviesList CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) []>> Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> Select Movie Theater (Interaction) Trigge search movie (Interact || Cohérence globale: Répercussion sur tâches et composants 38 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 39. Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System)[]>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> Exploitation du modèle de tâches 39 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 40. Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Cohérence globale: répercussion sur les composants 40 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 41. Considération de l’exécution GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList 41 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 42. CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Cohérence globale: Répercussion sur l’Interface Graphique 42 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 43. CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Sélection d’une sous-partie cohérente de l’application 43 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 44. COMPOSITION PAR SUBSTITUTIONS - Substitutions entre 2 éléments d’Interface Graphique - Substitutions entre 2 éléments d’application - Substitutions entre 2 ports ICSEA’12 SEAA’12 SEDE’12 IDM’11 { } 44 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 45. Principe des substitutions 45 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 46. CheckPointsList ZoomSlider VisualizationMap AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MainContainer MapContainer PositionsContainer RouteContainer MapsInterface MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B" AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf AddressAInput Port Requis Port Fourni Lien Opérationnel AddressAInput Application "Maps" Application "Cinema" CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList AddressInput AddressInput Substitutions d’éléments d’application 46 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 47. CheckPointsList AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller CheckPoints List Controller PositionsContainer RouteContainer GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer GetClosestMovie TheatersButton adapter adapter Port Requis Port Fourni Lien Opérationnel Application "Maps" Application "Cinema" CheckPointsList AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller CheckPoints List Controller PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer GetClosestMovie TheatersButton adapter Application "Maps" Application "Cinema" CheckPointsList AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller CheckPoints List Controller PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer GetClosestMovie TheatersButton Application "Maps" Application "Cinema" Succession de substitution de ports 47 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 48. VALIDATION À TRAVERS UN PROTOTYPE ET DES TESTS UTILISATEURS - OntoCompo: Outil de composition d’applications - Tests UtilisateursINTERACT’11 IHM’11{ } 48 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 49. Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles Tests Utilisateurs: Objectifs et Déroulement Phase « d’apprentissage » Sélection et substitutions sans aide Ajout de l’aide à travers les extensions de sélection Présentation des différents modèles Entretien de fin de tests Etude rapide du code généré pour une substitution Compréhension du processus de composition « Sélection – Substitution - Placement » Aptitude à effectuer la composition à l’aide du prototype Suffisance des informations fournies (accès uniquement à l’Interface Graphique) 49 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 50. Utilisateurs et Environnement de test • 9 développeurs-informaticiens répartis en 2 groupes – 4 n’ayant jamais manipulé d’outils de composition d’applications – 5 ayant utilisé au moins un outil Pas de différence significative • Environnement de test Développeur Testeur Observateur 50 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 51. Résultats Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles Compréhension du processus de composition « Sélection – Substitution - Placement » Aptitude à effectuer la composition à l’aide du prototype Suffisance des informations fournies (accès uniquement à l’Interface Graphique) Bonne appréhension du processus Réussite dans la concrétisation des intentions… mais des difficultés Extensions: Compréhension difficiles – Utilité comprise  Utilisation principalement de l’extension utilisant les tâches  Modèle de tâches: le plus intuitif pour effectuer les sélections  Modèle à composants: celui qui convient pour effectuer les substitutions 51 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 52. SYNTHÈSE ET PERSPECTIVES 52 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 53. Modélisation multi-niveaux d’une application cohérente par des correspondances entre modèles – Extraction de sous-parties cohérentes – Interconnexions des sous parties extraites  OntoCompo: un prototype pour la composition  Des expérimentations Composition d’applications dirigée par la composition des Interfaces Graphiques C C CC C C C C CC C C C C CC C C T T T T T T T T T T T T T T T T T T 53 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 54. Suite des tests utilisateurs: Déterminer la représentation des modèles GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer Port Requis Port Fourni Lien Opérationnel AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Highlight checkpoint on Map (Interaction) []>> Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> 54 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 55. C C CC C C C C CC C C C C CC C C « Algèbre » d’applications Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Highlight checkpoint on Map (Interaction) []>> Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> 55 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 56. Obtention des modèles d’une application CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Highlight checkpoint on Map (Interaction) []>> Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel MapsInterface MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf UI UI UI UI UI UI UI UI UI UI UI Component UI Component UI Component UI Component Input Input Input Input Input Input Input Input Input Output Output Output Output Output Output Output Output Output Output Trigger Trigger Trigger Trigger Trigger Trigger Trigger Trigger Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input 56 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 57. Composition menée par l’utilisateur final 57 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  • 58. Merci de votre attention! 58 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives

Notes de l'éditeur

  1. En vacances, à mon hôtel, et je veux aller au cinéma.
  2. Les manipulations vont être nombreuses et les aller-retour entre les applications se multiplient assez vite.Il y a un risque de perdre des informations durant ces manipulations et surtout une copie d'informations est nécessaire pour réaliser la tâche que nous nous sommes fixée.Dans le meilleur des cas, nous arrivons à effectuer un copier-coller correct et la tâche sera atteinte correctement.Dans le moins bon des cas, la copie s'effectue en introduisant des erreurs qui peuvent conduire à un résultat erronée et à un échec de la tâche fixée.
  3. Ils sont confrontés alors à différents problèmes qui sont la recherche de la ou les bonnes API pour ajouter de nouvelles fonctionnalités à leur application, et surtout la bonne API permettant de répondre aux besoins des utilisateurs, qui vont avoir des buts à atteindre potentiellement différents. Puis lorsque le choix de l'API est effectué, il faut alors l'intégrer à son application et ici, hors mis les problèmes liés à cette intégration en terme d'interopérabilité avec l'existant, il faut aussi construire l'interface graphique afin que ces nouvelles fonctionnalités soient utilisables dans l'application.
  4. Pour définir une telle application, si nous regardons le développement d'une application en GL et en IHM, nous pouvons constater qu'une application est constituée de trois parties. Les deux parties exécutables de l'application sont la partie visible de l'application qui est son interface graphique et la partie cachée de l'application qui le noyau fonctionnel. Du côté du GL, après avoir capturé les besoins, le noyau fonctionnel est développé puis l'interface graphique de l'application est développé et liée à sa partie fonctionnelle. En IHM, le cycle part de l'expression des besoins à travers un arbre de tâches de l'application, puis par raffinement de cet arbre, l'interface graphique de l'application est obtenue. Enfin, le noyau fonctionnel est alors développé et liée à l'interface graphique de l'application.
  5. 3 parties qui vont être l'arbre de tâches de l'application, qui va permettre de décrire l'ensemble des fonctionnalités disponibles dans l'application et comment elles se réalisent, l'interface graphique de l'application et son noyau fonctionnel pour la partie opérationnelle de l’application.
  6. [Composantsde tâches] => G. Bourguin, A. Lewandowski, JC. Tarby (TMDUID, 2007)=> A. Lewandowski, S. Lepreux, G. Bourguin (HCI, 2007)
  7. Nous pouvons alors établir une synthèse sur ces travaux en composition d'applications. La cohérence globale de l'application telle que nous l'avons définie n'est pas maintenue. Effectivement, les travaux s'appuient sur une seule partie de l'application pour effectuer la composition, et sont ammenés à générer tout une partie de l'application. Les liens entre les différentes parties ne sont pas préservées qui se traduit par un manque en terme d'utilisabilité de l'application ou par une lacune en terme d'exécution. Cependant, chacun des ses travaux s'appuient sur des modèles permettant d'effectuer ces compositions et pour certains mettent déjà en place des liens entre certaines parties de l'application.
  8. Donner plus d’explications (cf Question Jean)
  9. Bien positionner à l’oral! => Granularité, positionnement entre AUI et CUIOn n’a pas d’infos sur les MODALITES!!!!
  10. Après ce slide: ma contrib mettre les liens entre modèles
  11. Titre : Hypothèse (point de vue + cohérence) ; thèse : la modélisation pour la composition
  12. Parler arbre / graphe
  13. Partir du bouton
  14. Revoir discours
  15. Justifier substitutions!Union, juxtaposition => pas de pb, et pas ce que je veux obtenirEntrelacer les entrées/sortiesEntrelacer complètement au niveau code (pas dans mon hypothèse)
  16. Accès  Point d’entrée