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
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