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