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,

Présentation au sujet: "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,"— Transcription de la présentation:

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 Rochelle Atelier IDM-IHM, 08/03/2010 et 09/03/2010

2 Evénements touristique
2 Event Time M D I Application Web Evénements touristique Eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee Eeeeeeeeeeeeeeeeeeeeeeee Eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeee WebApplication Content Widget

3 Génération d’applications Web
1 configuration d’application => 5 modèles

4 La bibliothèque Simile Exhibit
Timeline Moteur de recherche Date picker Filtre sur des catégories Map

5 Métamodèle de configuration de Widget

6 Métamodèle de configuration de Widget
Métamodèles de composants Métamodèles de composants Métamodèles de composants Métamodèles de composants Métamodèle générique Spécificités de la bibliothèque de composants Métamodèles de composants + + par aspect par composition de modèles

7 Métamodèle générique

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

9 Spécification du Widget TimeLine de Simile Exhibit
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" Implémentation de Simile Exhibit en JavaScript Spécification des Widgets au format JSON

10 Génération d’un métamodèle de composant
Différents types de propriétés Propriétés reliant le Widget à d’autres composants de l’application Propriétés spécifiant des points d’accès vers des données externes Propriétés de Widget

11 Construction incrémentale du métamodèle par compositions successives
Identification des éléments similaires basée sur les signatures Modèle générique Modèle de composant MATCH

12 Construction incrémentale du métamodèle par compositions successives
Métamodèle configuration de Widgets : intégration de 11 composants Modèle composé

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 :

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