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 cyril.faucher@univ-lr.fr Atelier IDM-IHM, 08/03/2010 et 09/03/2010

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

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

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

Métamodèle de configuration de Widget

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

Métamodèle générique

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

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

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

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

Construction incrémentale du métamodèle par compositions successives Métamodèle configuration de Widgets : intégration de 11 composants 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 : 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