1

Un outil de visualisation bi-focal pour les formalismes

Eric Barboni, Xavier Lacaze, Philippe Palanque, Marco Winckler

LIIHS-IRITUniversité Toulouse 3 (Paul Sabatier)

Toulouse – France

http://liihs.irit.fr/{barboni, lacaze, palanque, winckler}@irit.fr

2

Contexte

Motivations pour l’utilisation des modèles et des formalismes: Meilleure gestion des applications complexes Séparer les phases de conception et

implémentation Supporter la vérification des modèles avant

implémentation Définition sans ambiguïté des besoins Accroître la communication dans l’équipe

3

Problèmes liées à l’utilisation de notations formelles

Complexité notationnelle liée au formalisme Utilisation réduite à un groupe d’initiés Souvent inadapté au travail d’une équipe

multidisciplinaire Passage à l’échelle Outils sont fondamentaux pour supporter

L’édition La visualisation La manipulation des modèles

4

L’approche proposée ici

Utiliser des techniques de visualisation appropriées aux tâches liées à la manipulation de grand modèles

5

Organisation de la présentation

Formalismes étudiés: StateWebCharts (modèle de navigation pour les applications Web)

QOC (modèle de support au Design Rational)

La technique de visualisation BifocalTree Démo sur l’outil XBifocalTree (XBF) Visualisation BifocalTree de modèles:

SWC QOC

Discussion

6

StateWebCharts diagrammes (1/3)

Modèle pour la navigation des applications Web

Basés sur StateCharts [Harel 87]

Machine d’état avec hiérarchie et concurrence

Représente de: sémantique de nœuds Sémantique de transitions Actions et conditions

associées aux transitions

Modèle SWC pour le site Modèle SWC pour le site du projet SpiderWebdu projet SpiderWeb

SWC [Winckler 2004]

7AFIHM’s Web-based catalogue AFIHM’s Web-based catalogue (49 nœuds)(49 nœuds)

StateWebCharts diagrammes (2/3) étude de cas pour le site « Catalogue des thèses de l’AFIHM »

8La Grotte de Lascaux La Grotte de Lascaux (137 nœuds)(137 nœuds)

StateWebCharts diagrammes (3/3) étude de cas pour le site « La Grotte de Lascaux »

9

Diagrammes QOC (1/2)

QOC: Question Option Critère

Tracer: décisions de conception d'expliciter les options

explorées Accroître:

la qualité de la conception la réutilisation QOC pour l’achat d’une voitureQOC pour l’achat d’une voiture

QOC [MacLean 96]

10

Diagrammes QOC (2/2)

Rational pour la conception d’un DAB [MacLean 96] Rational pour la conception d’un DAB [MacLean 96] (40 nœuds)(40 nœuds)

11

La BifocalTree (1/2)

Techniques de visualisation d’info hiérarchiques

Visualisation focus+context

Radial lay-out 2 focus Il n’y a pas de

géométrie hyperbolique [Lamping et al. 95]

BifocalTree [Freitas et Al. 2002]

12

La BifocalTree (2/2)

Paramètres modifiables: Distance entre

nœud contexte et nœud focus

Distance entre les nœuds (père->fils)

Angle d’ouverture Taille de nœuds

BifocalTree [Freitas et Al. 2002]

13

Le XBifocalTree (XBF)

Outil développé à partir de la technique de visualisation BifocalTree

Composant Java basé sur la librairie JGraph (http://www.jgraph.com/) + Swing

Affichage de nœuds adaptable au contexte d’utilisation

Affichage de nœuds par défaut Affichage de nœuds par défaut Affichage de SWC nœuds Affichage de SWC nœuds

14

XBF Visualisation sur SWCEditor Hiérarchie d’états La navigation n’est pas représenté

15

XBF Visualisation sur QOCEditor (1/2)

16

XBF Visualisation sur QOCEditor (2/2)

Diagramme QOC Diagramme QOC transformé en arbre

17

Une DEMO ?

18

Discussion L’utilisation de techniques de visualisation est

nécessaire pour faciliter la manipulation rapide de grand modèles

La représentation de SWC et QOC par le BifocalTree réduit le pouvoir d’expression des formalismes mais est plus adaptée à la tâches de navigation

Le composant est facilement réutilisable… avec JGraph Les vues des nœuds (MVC) sont cohérentes (édition et visu)

Il faudrait faire plus de tests pour vérifier si le BifocalTree est la technique la plus adaptée pour la visualisation des formalismes présentées

19

Questions?