Comment créer un Widget pour MapFish

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

À propos de gglafouine

Je suis actuellement en poste dans le Groupe Nicollin en tant que Cartographe. J'ai pris l'initiative de mettre en place ce blog en 2008 afin de partager mes connaissances, mes problématiques et mes interrogations. Ainsi, cette plateforme me sert d'appui dans mon travail et d'interface d'échange avec mes collègues.
Ce contenu a été publié dans API Web, HowTo, Informatique, avec comme mot(s)-clef(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire