Information générale
Brève vue d'ensemble du design de JMap Web
JMap Web fournit une application Web capable d'interagir avec JMap Serveur. L'ergonomie de son interface utilisateur est principalement adaptée pour les navigateurs web d'ordinateurs portables et d'ordinateurs de bureau.
Les éléments principaux d'une application JMap Web sont les suivants:
•Le client: Peut être décrit comme une application web à une seule page (index.jsp). Le client consiste en la page telle qu'elle sera rendue dans le navigateur des utilisateurs.
•Un Web Map Service: Donne accès aux tuiles de la carte.
•Le «Dispatcher AJAX»: Un service web auquel des requêtes HTTP sont envoyées. Le «Dispatcher AJAX» achemine ensuite les requêtes au «Action Handler» approprié. Ceci sera présenté davantage dans la section Envoyer des requêtes au serveur et actions personnalisées de ce document.
Bibliothèques JavaScript de tiers utilisées
JMap Web fait utilisation de plusieurs bibliothèques JavaScript de tiers. Vos extensions peuvent tirer parti de celles-ci sans aucune configuration additionnelle. Le tableau suivant fournit une brève explication de l'utilisation de ces bibliothèques par JMap Web.
Bibliothèque |
Description |
DataTables (v1.9.4) |
Plugin jQuery qui facilite la création de tableaux HTML puissants pour la représentation de données. Ceci est principalement utilisé pour afficher les résultats de recherches. |
fancyBox (v2.15) |
Affiche du contenu dans une interface de style «lightbox». JMap Web utilise fancyBox pour afficher des documents de taille-réelle inclus dans le contenu d'une infobulle. |
Google Maps (v3) |
Nécessaire pour afficher les couches de base «Roadmap», «Terrain», «Satellite» et «Hybride» de Google Maps. |
jQuery (v1.9.1) |
jQuery est une bibliothèque JavaScript rapide, petite, et riche en fonctionnalités. Elle simplifie la navigation du document HTML, la manipulation d'éléments, la gestion des événements, l'animation, et les requêtes AJAX. Son API est facile à utiliser et fonctionne sur une multitude de navigateurs. |
jQuery-ui (v1.11.4) |
Bibliothèque d'éléments d'interface utilisateur nécessitant jQuery. Présentement, JMap Web utilise une version personnalisée qui n'inclut que la composante «autocomplete». |
moment.js (v2.10.6) |
Bibliothèque utilisée pour lire, valider, manipuler et afficher des dates en JavaScript. |
malihu-custom-scrollbar-plugin (v3.0.7) |
Ajuste l'apparence des barres de défilement dans les infobulles. Sa fonction principale est de standardiser l'apparence des barres de défilement dans les différents navigateurs web. |
OpenLayers (v2.13.1) |
Ceci est la bibliothèque la plus importante de JMap Web. OpenLayers permet l'affichage de la carte dans JMap Web et gère également la majorité des interactions avec celle-ci. |
Proj4js (v1.1.0) |
Proj4js est une bibliothèque qui permet de traduire des coordonnées géographiques d'un système de projection cartographique à l'autre. Proj4js est utilisé par OpenLayers, mais n'est pas fourni avec celle-ci. Afin de pouvoir accomplir des transformations pour des projections nommées (ex: “EPSG:3857”), les projections doivent être définies dans Proj4js. Seulement un petit nombre définitions de projections est disponible par défaut. JMap Web inclut un fichier de définition de projection Proj4js pour chacune des projections supportées par JMap Serveur. Les définitions de projections seront chargées en mémoire au fur et à mesure qu'elles seront requises. |
Twitter Bootstrap (3.1.1) |
«Framework front-end» pour créer des interfaces utilisateur. |
bootstrap-datetimepicker (v4.15.35) |
Outil pour sélectionner une date/heure avec Twitter Bootstrap. |
bootstrap-multiselect (v0.9.10) |
Outil pour sélectionner des choix multiples avec Twitter Bootstrap. |
Bibliothèques JavaScript de JMap et leur architecture
En plus des bibliothèques décrites précédemment, JMap Web inclut également ses propres bibliothèques basées sur le type de base «Class» d'OpenLayers. Ceci permet à JMap Web de bénéficier des paradigmes de la programmation orientée objet dans un contexte JavaScript (qui favorise généralement une approche plutôt prototypique et fonctionnelle.).
Une bibliothèque JavaScript JMap consiste essentiellement en un regroupement de fichiers JavaScript, de feuilles de styles en cascade (CSS) et de ressources (images, sons, etc.).
Les bibliothèques JavaScript de JMap ont été conçues pour une utilisation dans d'autres modèles d'applications JMap de la famille «JMap Web/JMap Mobile». En divisant le code parmi plusieurs bibliothèques, la réutilisation du code est possible dans divers environnements tels JMap Web et JMap Mobile. Les bibliothèques JavaScript JMap définissent des comportements uniques pour des contextes spécifiques.
JMap Web utilise les bibliothèques JavaScript JMap suivantes:
•core
•desktop_ui
Les classes modèles réutilisables de JMap sont généralement incluses dans core. Cette bibliothèque est donc fréquemment utilisée et est présente dans d'autres modèles d'applications JMap de la famille «JMap Web/JMap Mobile».
La bibliothèque core est écrite en JavaScript ES5. En plus de classes modèles JMap, elle comporte des contrôles OpenLayers réutilisables, des classes couches OpenLayers additionnelles, des «wrappers» de fonctionnalités HTML5 et plus. La bibliothèque core est la bibliothèque de plus bas niveau. Elle s'occupe de tâches générales telles que l'initialisation de la carte. Tout autre bibliothèque est ensuite chargée au-dessus comme si elle était une extension.
Quant à elle, la bibliothèque desktop_ui contient des classes qui se concentrent plus sur l'affichage et la gestion des éléments visuels. Elle fait utilisation des bibliothèques DataTables, jQuery et Twitter Bootstrap. Tout élément visuel de l'interface de JMap Web qui n'est pas géré par OpenLayers provient de desktop_ui.