1 génération dun métamodèle de composants graphiques à partir de la spécification dune...

1

Génération d’un métamodèle de composants graphiques à partir de la spécification d’une bibliothèque

de composants Web

Cyril Faucher, Frédéric Bertrand, Jean-Yves Lafaye

L3i, Université de La Rochellecyril.faucher@univ-lr.fr

Atelier IDM-IHM, 08/03/2010 et 09/03/2010

2

Evénements touristique

Application Web

WebApplication

Content Widget

Event

Event Time

2

EeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeEeeeeeeeeeeeeeeeeeeeeeeeEeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Génération d’applications Web

1 configuration d’application => 5 modèles

3

C o ntent W idget Layo ut

DataBinding Layo utBinding

Métam odèles de configuration

Métam odèles de b ind ing

4

La bibliothèque Simile Exhibit

Moteur de recherche

Date picker

Filtresur des

catégories

Timeline

Map

Métamodèle de configuration de Widget

5

Métamodèle de configuration de Widget

6

Métamodèle générique

Spécificités de la bibliothèque de composants

+ +

Métamodèles de composants

Métamodèles de composants

Métamodèles de composants

Métamodèles de composants

Métamodèles de composants

par aspectpar composition

de modèles

Métamodèle générique

7

Métamodèle générique pour Simile Exhibit

8

Spécification du Widget TimeLine de Simile Exhibit

9

Exhibit.TimelineView._settingSpecs = { "topBandHeight": { type: "int", defaultValue: 75 }, "topBandUnit": { type: "enum", choices: Exhibit.TimelineView._intervalChoices }, "colorCoder": { type: "text", defaultValue: null }, "selectCoordinator": { type: "text", defaultValue: null },}; Exhibit.TimelineView._intervalChoices = [ "millisecond", "second", "minute", "hour", "day", "week", "month", "year", "decade", "century", "millennium"]; Exhibit.TimelineView._accessorSpecs = [ { accessorName: "getProxy", attributeName: "proxy" }, { accessorName: "getDuration", bindings: [ { attributeName: "start", type: "date", bindingName: "start" }, { attributeName: "end", type: "date", bindingName: "end", optional: true } ] }, { accessorName: "getColorKey", attributeName: "colorKey", type: "text" }];

Spécification des Widgets au format JSON

Implémentation de Simile Exhibit en JavaScript

Génération d’un métamodèle de composant

Différents types de propriétés

10

Propriétés reliant le Widget à d’autres composants de l’application

Propriétés de Widget

Propriétés spécifiant des points d’accès vers des données externes

Construction incrémentale du métamodèle par compositions successives

11

Modèle de composantModèle

générique

MATCH

MATCH

Identification des éléments similaires basée sur les signatures

Construction incrémentale du métamodèle par compositions successives

Métamodèle configuration de Widgets : intégration de 11 composants

12

Modèle composé

Mise en oeuvre

Implémentation sous Eclipse EMF du générateur de métamodèles : Kermeta + Java (JSON lib)

Composition de modèles : Kompose

Exemples de réalisation :

13

http://relaxmultimedia2.univ-lr.fr/modsea/

Perspectives

Simile Exhibit, Ext GWT

Norme W3C, Widgets 1.0 Packaging and Configuration Mapping entre la norme et les métamodèles générés

14