>> Document officiel “HowTo Create Widgets” non traduit disponible ici
Dans cette page vous trouverez une sorte de tutoriel pour apprendre comment créer votre propre widget client MapFish. Vous apprendrez aussi à le construire avec ExtJS pour qu’il puisse être masqué et à l’intégrer facilement dans un mise en page complexe si vous le souhaitez.
Avant de commencer
Ce tutoriel suppose que vous avez déjà installé MapFish. Sinon, allez à la page d’installation et suivez les instructions. Après, vous pourrez revenir le lire.
Cela suppose également que vous savez déjà comment utiliser un widget MapFish dans votre code. Référez vous à ce tutoriel si ce n’est pas le cas puis revenez après
Constructeur de Widget
Dans ce didacticiel, nous allons construire un widget qui va créer une liste désordonné de villes dont l’utilisateur pourra centrer dessus.
Commençons par le code Javascript. Créez un nouveau fichier Javascript nommé Locations.js
(c’est un nom arbitraire), contenant le code ci-dessous :
/** * @requires OpenLayers/Map.js */ Ext.namespace('mapfish.widgets'); mapfish.widgets.Locations = function(config) { Ext.apply(this, config); mapfish.widgets.Locations.superclass.constructor.call(this); } Ext.extend(mapfish.widgets.Locations, Ext.Container, { // code is to be added here });
Tout d’abord, nous mettons quelques annotations (@requires
). Ces annotations sont nécessaires si vous avez l’intention d’utiliser le constructeur de script JavaScript pour MapFish. Dans notre cas, la classe OpenLayers.Map
est nécessaire car nous utiliserons la méthode zoomTo ()
.
Ensuite, nous définissons le constructeur mapfish.widgets.Locations
. Le constructeur appelle Ext.apply ()
pour que chaque option de configuration deviennent une propriété de l’objet. Il appelle également de ses constructeurs parents.
Ext.extend ()
sert à définir notre classe mapfish.widgets.Locations
.
Mapfish.widgets.Locations
hérite de Ext.Container
. Hériter de Ext.Container
est essentiel afin d’ajouter des gadgets dans notre Ext layout. Le code de la classe est situé dans le troisième argument Ext.extend ()
.
Échantillon d’une page HTML
Nous allons créer un nouveau fichier « locations_simple.html
» avec le code suivant :
<html> <head> <title>MapFish Tutorial - How To Create Widgets</title> <link rel="stylesheet" type="text/css" href="/chemin/vers/mfbase/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="/chemin/vers/mfbase/openlayers/lib/OpenLayers.js"></script> <script type="text/javascript" src="/chemin/vers/mfbase/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/chemin/vers/mfbase/ext/ext-all-debug.js"></script> <script type="text/javascript" src="/chemin/vers/mfbase/mapfish/MapFish.js"></script> <script type="text/javascript" src="Locations.js"></script> <script type="text/javascript"> Ext.onReady(function() { var map = new OpenLayers.Map($('olmap')); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); map.addLayers([wms]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); var data = [['Paris', new OpenLayers.LonLat(2.3333333, 48.8666667), 6], ['Buenos Aires', new OpenLayers.LonLat(-58.6725, -34.5875), 6], ['Amsterdam', new OpenLayers.LonLat(4.9166667, 52.35), 6], ['Dakar', new OpenLayers.LonLat(-17.4380556, 14.6708333), 6]]; var locations = new mapfish.widgets.Locations({ map: map, el: 'myDiv', data: data }); locations.render(); }); </script> </head> <body> <span></span> <div id="myDiv"></div> <div id="olmap" style="width:450px;height:300px;background-color:#999;"></div> </body> </html>
Maintenant, nous devons revenir à notre widget et générer des éléments cliquables suivant une liste à puces non ordonnée. Celle-ci sera basée sur les données passées en argument.
Dans cet exemple, les données sont stockées dans un tableau, en général, il est préférable d’utiliser la classe Ext SimpleStore
.
Initialisation du widget
Ensuite, revenez au code javascript du widget et ajoutez cela :
// private onRender: function(container, position) { mapfish.widgets.Locations.superclass.onRender.apply(this, arguments); // do something here var ul = document.createElement("ul"); for (var i = 0; i < this.data.length; i++) { var li = document.createElement("li"); var link = document.createElement("a"); link.href = "javascript:void(0)"; var text = document.createTextNode(this.data[i][0]); link.appendChild(text); li.appendChild(link); ul.appendChild(li); Ext.EventManager.on(link, 'Cliquez', function(evt, el, options){ this.map.setCenter(options.location, options.zoomLevel); }, this, {location: this.data[i][1], zoomLevel: this.data[i][2]} ); } this.el.dom.appendChild(ul); }
La méthode OnRender ()
est une méthode de rappel déclenché par la classe étendueExt.Container
lorsque la méthode render
est appelée pour un objet de cette classe lorsque cet objet est masqué par un autre élément de mise en page.
Dans ce code, il faut d’abord appeler la méthode de superclasse onRender ()
. Ensuite nous construisons la liste à puces de l’ensemble objets dépendant des données. Nous avons également enregistrer une vue sur l’événement du lien « Cliquez » qui fera appel de la méthode setCenter ()
(méthode pour centrer notre carte).
Essayez dans votre navigateur.
Un widget dans une mise en page complexe
Maintenant, ce que nous voulons , c’est obtenir la même chose mais dans une mise en page complexe.
Tout d’abord, ajoutons le code suivant au début de la méthode onRender ()
dans la classe Locations :
if (!this.el) { this.el = document.createElement('div'); }
Nous avons besoin de ce bout de code parce que dans les mises en pages complexes, nous n’avons pas vraiment d’élément DOM existant pour rappeler l’élément. C’est souvent un rendu masqué. En effet, dans ces cas, nous ne renseignons pas le paramètre optionnel « el ».
Nous allons maintenant créer un nouveau fichier locations_layout.html
en copiant simplement ce code javascript :
Ext.onReady(function() { var map = new OpenLayers.Map($('olmap')); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); map.addLayers([wms]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); var data = [['Paris', new OpenLayers.LonLat(2.3333333, 48.8666667), 6], ['Buenos Aires', new OpenLayers.LonLat(-58.6725, -34.5875), 6], ['Amsterdam', new OpenLayers.LonLat(4.9166667, 52.35), 6], ['Dakar', new OpenLayers.LonLat(-17.4380556, 14.6708333), 6]]; var locations = new mapfish.widgets.Locations({ map: map, data: data }); var mapcomponent = new mapfish.widgets.MapComponent({map: map}); var window = new Ext.Window({ title: 'Map', width: 500, height:300, minWidth: 300, minHeight: 200, layout: 'fit', plain:true, bodyStyle:'padding:5px;', items: mapcomponent }); window.show(); var window = new Ext.Window({ title: 'Cities', width: 200, height:150, minWidth: 200, minHeight: 100, layout: 'fit', plain:true, bodyStyle:'padding:5px;', items: locations }); window.setPagePosition(20, 40); window.show(); });
Ce qui est important à noter:
- Nous créons un composant de la carte (MapComponent) que nous utilisons comme un objet de la première fenêtre,
- Nous avons supprimé le paramètre optionnel « el » de notre widget Locations,
- Le widget Locations est utilisé comme un objet de la deuxième fenêtre.
Rafraîchissez votre page dans le navigateur et appréciez!
Pièces jointes :
Locations.js (1,3 kB) – ajouté par pgiraud le 11/05/07 16:54:46.
Locations_simple.html (1,6 kB) – ajouté par pgiraud le 11/05/07 16:54:58.
Locations_layout.html (2,3 kB) – ajouté par pgiraud le 11/05/07 16:55:15.