Page 1
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 [email protected]
Atelier IDM-IHM, 08/03/2010 et 09/03/2010
Page 2
2
Evénements touristique
Application Web
WebApplication
Content Widget
Event
Event Time
2
EeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeEeeeeeeeeeeeeeeeeeeeeeeeEeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Page 3
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
Page 4
4
La bibliothèque Simile Exhibit
Moteur de recherche
Date picker
Filtresur des
catégories
Timeline
Map
Page 5
Métamodèle de configuration de Widget
5
Page 6
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
Page 7
Métamodèle générique
7
Page 8
Métamodèle générique pour Simile Exhibit
8
Page 9
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
Page 10
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
Page 11
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
Page 12
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é
Page 13
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/
Page 14
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