:: Yves Jacolin :: Ludovic Granjon :: Softlibre :: OSGeo-fr ::
"Quand on veut reprendre avec utilité, et montrer à un autre qu'il se trompe, il faut observer par quel côté il envisage la chose, car elle est vraie ordinairement de ce côté-là, et lui avouer cette vérité, mais lui découvrir le côté où elle est fausse." Pascal, Pensées Br. 9, Lafuma 5.

Sommaire


Workshop : OpenLayers - Construire un application de Web mapping avec une fondation solide

Module 5 : Intégration

Comme suggéré par le titre de ce workshop, OpenLayers fournit la fondation cartographique pour votre application web. Pour construire une application avec des composants d'interface utilisateur, OpenLayers est très bien couplé avec un framework UI (NdT : User Interface : interface utilisateur). Il existe différent frameworks UI fonctionnels disponibles ; Ext JS, Dojo (vi Dijit) et YUI sont des frameworks populaire avec de bon widgets et contrôleur de mise en page. Ce module fournit des exemples d'intégration avec Ext JS ainsi que la bibliothèque moins utilisé mais rapidement développé jQuery UI.

Explorer JQuery UI

La bibliothèque JQuery se focalise sur la fourniture de raccourcie efficace pour accéder aux éléments DOM, en ajoutant des comportements à ces éléments, et en simplifiant des motifs de codage AJAX typique. La bibliothèque JQuery UI est construit par dessus le moteur JQuery et propose des widgets personnalisable. À la fois la bibliothèque UI et moteur ont été désigné et dédié sur du code JavaScript non intrusif, proposant un workflow concis.

Liens JQuery :

En plus de ces liens, vous trouverez des exemples sur JQuery UI dans le répertoire jquery-ui inclus dans ce workshop. Prenez un peu de temps pour lire les informations sur JQuery, dont les démos et les cours.

Utiliser un slider JQuery avec OpenLayers

Le widget slider de JQuery UI créé une barre déplaçable qui peut être configuré pour renvoyer une valeur dans un domaine de valeur basé sur la position du slider. Les couches raster dans OpenLayers fournissent une méthode setOpacity qui contrôle l'opacité des images et accepte des valeurs entre 0 (totalement transparent) et 1 (totalement opaque). Un widget slider est une manière visuelle de définir l'opacité d'une couche.

Un slider sous JQuery UI peut être créé avec quelques choses comme cela :

  <div id="slider">
     <div class="ui-slider-handle"></div>
  </div>

Pour donner à ces éléments le comportement d'un slider, vous pouvez utiliser ce code là :

JQuery("#slider").slider();

La fonction JQuery est également exporté sous l'alias $. Dans les exemples ci-dessous, vous verrez l'utilisation de la fonction $ - c'est complètement équivalent à l'utilisation de la fonction JQuery. Regardez la documentation du slider sur le site de JQuery UI pour la manière de définir une fonction qui pourrait être appelé après le changement de la position du curseur.

L'exemple 5-jqui-slider.html montre l'utilisation du slider pour définir une opacité de couche. Regardez comment vous pouvez changer l'opacité des frontières des pays et les étiquettes avec le slider.

Tâche :

  • Dans la documentation de JQuery, trouvez les options de la fonction slider qui permet de définir un nombre d'étapes d'incrémentation dans le domaine du slider. Expérimentez en ajoutant des intervalles discrètes au domaine du slider.
  • Modifiez les valeurs de fin du domaine pour restreindre la configuration de l'opacité.

Afficher les informations des objets dans une boite de dialogue JQuery

Openlayers fournit des classes de pop-up pour l'affichage d'information dans la zone de la carte. Il est souvent approprié d'avoir des boite de dialogue uniforme à votre carte et des autres parties de votre application. La fonction dialogue de JQuery UI est une manière flexible de produire des boites de dialogue thématisable pour différentes fonctions.

L'exemple précédent commence avec des balises existantes et utilise une fonction JQuery pour sélectionner et modifier les éléments DOM. Les fonctions JQuery peuvent être également utilisé pour créer des éléments en fonction d'une chaîne HTML. Le code ci-dessous créé un élément div et le transforme en une boite de dialogue.

JQuery("<div>Bonjour !</div>").dialog();

Cette technique est utilisée dans l'exemple 5-jqui-dialog.html pour créer des boites de dialogue remplies des résultats issus d'une requête GetFeatureInfo d'un service WMS. OpenLayers ne fournit pas un contrôleur pour construire des requêtes GetFeatureInfo, mais un simple contrôleur peut être créé comme dans l'exemple. Ouvrez l'exemple dans votre navigateur. Cliquez sur la carte pour voir les informations sur un pays s'afficher dans une boite de dialogue.

Tâches :

  • Trouvez la documentation appropriée pour déterminer comment placer l'information de l'objet dans une fenêtre - afin que vous ayez à fermer la fenêtre avant d'interagir avec votre application.
  • Expérimentez avec l'édition des déclarations des styles dans l'en-tête de la page pour changer le look des informations affichées. La page charge une feuille de style pour le thème par défaut de JQuery UI. Trouvez le répertoire des thèmes dans le répertoire jquery-ui et chargez une feuille de style différente. Remarquez que si vous choisissez un thème qui n'est pas par défaut (par exemple “flora”) l'élément qui est utilisé pour utiliser une boite de dialogue nécessite un nom d'une classe CSS supplémentaire (dans cet exemple “flora”). Vous pouvez utilisez la fonction JQuery addClass pour ajouter une nom de classe à un élément avant l'appel à dialog().

Explorer Ext JS

Ext JS est une bibliothèque complète et extensible pour des widgets dynamique et des mises en page complexes. Ext JS est spécialement utile pour copier les applications locales dans un navigateur. La bibliothèque est une dépedense plus lourde (et donc un temps de chargement plus important) que JQuery UI, mais propose un ensemble d'outils plus robuste.

Liens Ext JS :

Remarquez que les exemples complet d'Ext JS et sa documentation est disponible dans le répertoire ext fournit avec ce module. Prenez un peu de temps pour explorer les exemples d'Ext JS et trouver comment utiliser la documentation.

Utiliser un slider Ext JS avec OpenLayers

Comme avec les sliders de JQuery, un slider Ext fournit un widget pour récupérer une valeur fournit par l'utilisateur dans un domaine. Cet exercice duplique l'exemple 5-jqui-slider.html ci-dessus.

La configuration pour les widgets Ext est extrêmement flexible. Une manière de créer un widget slider est de démarrer avec un élément DOM qui servira comme conteneur du slider.

<div id="slider"></div>

Cela effectué, le code suivant créera un slider Ext fonctionnel :

var slider = new Ext.Slider({renderTo: "slider"});

L'exemple 5-ext-slider.html utilise la technique ci-dessus pour créer un widget slider pour définir l'opacité d'une couche. Ouvrez l'exemple dans votre navigateur pour voir le slider en action.

Tâches :

  • Trouver le widget slider dans la documentation de Ext JS. Localiser l'option de configuration qui vous permet de définir un ensemble d'intevalle pour définir la valeurs du slider. Expérimentez en ajoutant un ensemble d'intervalle au slider.
  • Configurez le slider pour restreindre le domaine des valeurs d'opacité qui peut être définie.

Afficher des informations d'un objet dans une fenêtre sous Ext JS

Ext JS fournit des fenêtres avec des comportements et une apparence similaire à une application desktop. Le thème pour une application basé sur Ext est moyennement configurable, le développement de thème personnalisé peut être source de travail. L'utilisation de fenêtres Ext pour afficher des cartes avec des informations donne une impression d'intégration si vous utilisez des widgets Ext pour des parties non cartographique dans votre application.

Une fenêtre Ext peut être créée avec aucune balise existante. Le code suivant crée une fenêtre sans mode et l'ouvre.

  var win = new Ext.Window({
      title: "Window",
      items: [
          {html: "Hello!"}
      ]
  });
  win.show();

Ext construit des éléments complexes basé sur des conteneurs avec un ou plusieurs items. La fenêtre ci-dessus contient un élément panel qui a été créé à partir de la chaîne HTML “Hello!”. En utilisant la technique ci-dessus, des fenêtres peuvent être créée pour afficher des informations sur les objets de votre carte.

Ouvrez l'exemple 5-ext-windows.html dans votre navigateur. Cliquez sur la carte pour déclencher une requête pour obtenir des informations sur un pays. Cette information sera présentée dans une fenêtre Ext.

Tâches :

  • trouvez la classe Ext.Windows dans la documentation Ext. Changez la configuration de la fenêtre dans l'exemple 5-ext-windows.html pour la rendre modale (afin que votre application ne reçoit pas les événements du navigateur tant que la fenêtre n'est pas fermée).
  • Expérimentez avec d'autres propriétés de configuration de fenêtre pour changer l'apparence et le comportement de la fenêtre affichée par l'exemple.

Rendre OpenLayers et Ext JS encore plus proche

Jusqu'à ce point, nous nous somme contenté d'explorer des intégrations qui implique l'utilisation de widgets de la bibliothèque standard avec des fonctionaalités standard d'OpenLayers. Dans l'exemple ci-dessus, les widgets n'ont pas réellement conscience de la carte, et la carte n'a pas réellement “conscience” des widgets. Il est également possible d'étendre les composants Ext (ou JQuery) avec des fonctionnalités spécifique à la cartographie.

Le constructeur OpenLayers.Map créé des cartes fonctionnelles pour un élément DOM simple donné; indépendant de son contexte. La classe Ext.Panel fournit des composants flexibles qui peut se nicher dans d'autres conteneurs pour construire des mises en page complexes. Une fusion des deux pourrait être une classe MapPanel qui créé une carte fonctionnelle qui est facilement couplé ensemble avec d'autres composants dans une application riche.

Entrez dans la classe MapPanel

Ce workshop inclus un répertoire geoext avec quelques classes Ext personnalisées. La classe MapPanel étend Ext.Panel et contient une méthode OpenLayers.Map. La classe MapPanel enregistre un “xtype” avec Ext, signifiant qu'il peut être initialisé avec la syntaxe de configuration similaire aux autres composants Ext.

Ouvrez l'exemple 5-geoext-mappanel.html pour voir une instance MapPanel dans une méthode Ext.Windows. Visualisez la source de la page dans votre éditeur de texte et familiarisez vous avec la syntaxe.

Tâches :

  • En vous basant sur le code des exemples ci-dessus, ajoutez une ou plusieurs couches au panel map.
  • Les propriétés de configuration du contrôleur (xtype: “mappanel”) peut être utilisées pour ajouter des contrôleurs qui ne sont pas par défaut à la carte. Expérimentez avec l'ajout du contrôleur de sélectionneur de couche ou de l'échelle graphique à la carte.

En avant pour la classe LayerTree

Comme alternative à un sélectionneur de couche personnalisé, Ext.tree.TreePanel peut être utilisé pour représenter une hiérarchie de couches avec des fonctionnalités différentes que OpenLayers.Control.LayerSwitcher. Comme pour l'arborescence de fichier et de répertoire dans l'explorateur de fichier de la plupart des systèmes d'opération, Ext.tree.TreePanel permet aux noeuds d'être placé, réordonné, étendue ou replié. Dans une application cartographique avec un seul groupe de couche, une grande partie des fonctionnalité d'un arbre n'est pas accessible. Toutefois, un contrôleur personnalisé de sélectionneur de couche peut également être utilisé pour fournir un groupement de couches qui n'est pas prévue par OpenLayers lui-même.

Trouvez l'exemple 5-geoext-layertree.html et ouvrez le à la fois dans votre navigateur et votre éditeur de texte. Voyez comment la visibilité des couches et le réordonnement peuvent être contrôlés.

Tâches :

  • Travaillez à la création d'un nouveau exemple qui utilise à la fois le composant de panel LayerTree et MapPanel. Puisque vous avez besoin d'accéder à l'instance OpenLayers.Map dans le MapPanel pour configurer le LayerTree, la structure de votre exemple sera différent des exemples précédents. Le code suivant devrait vous aider pour commencer.
    // une alternative pour créer un MapPanel avec une
    // configuration objet
    var mapPanel = new GeoExt.component.MapPanel({
        layers: layerList
    });
    // LayerTree nécessite d'avoir une référence à la 
    // propriété de la carte du MapPanel
    var layerTree = new GeoExt.component.LayerTree({
        map: mapPanel.map
    });
    // les deux composants au-dessus peuvent être des items dans 
    // Ext.Window instances

Contact - Information et copyright - Statistique

Recent changes RSS feed Creative Commons License Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki