II. Le côté client
Le côté client gère toute la partie
interface homme-machine. Dans cette partie, le Framework* AngularJS
et la bibliothèque Leaflet ont
été utilisés pour gérer toute la partie web et
cartographie.
L'installation d'AngularJS et de Leaflet est simple. Il s'agit
de copier leurs sources dans le répertoire de travail. Dans le projet,
pour qu'ils fonctionnent, il faut y faire référence dans la page
HTML* principale de l'application
(index).
1. Une application avec AngularJS
Une application développée avec AngularJS se
base sur un ensemble de modules et de contrôleurs. Un module
dans AngularJS définit l'application. C'est le conteneur
global des différentes fonctionnalités de l'application. Le
contrôleur gère toutes les demandes
faites à la base de données et les réponses de celle-ci du
côté serveur via le protocole de communication
HTTP*.
Dans le projet câbles, cinq (5) modules
ont été créés:
? Le module principal de l'application
(app.js) dans lequel tous les autres modules
de l'application et les contrôleurs doivent être
déclarés (voir Annexe VI).
? Le module des services
(services.js) qui regroupe tous les services qui
gèrent les communications HTTP* avec le
serveur et les services qui gère les données mises en cache pour
les utiliser dans la session en cours sans avoir à envoyer des
requêtes à la base de données.
? Le module de l'affichage
(display_directives.js) qui gère l'affichage
des messages d'information et d'erreur, l'affichage des listes et des
détails des données métier.
? Le module des formulaires «
FormDirectives.js »
qui gère l'affichage, les contrôles de saisie et la soumission des
données vers la base de données (voir Annexe
VII).
Université Jean Monnet de Saint-Etienne Khadim
MBACKE
30
< / Développement d'une application de
cartographie interactive sur internet >
2. La partie cartographie: Leaflet et AngularJS
Leaflet et AngularJS
sont écrits tous les deux en JavaScript ce qui leur permet
de se communiquer facilement. Leaflet a été utilisée pour
développer « l'élément carte
», c'est-à-dire la carte elle-même, l'affichage
des couches et des fonctions de navigation...
Leur communication se fait par des modules et des
contrôleurs. Un module gérant toute cette partie cartographie a
été créé: le «
mapServices.js ». Il
regroupe des services qui sont des
fonctionnalités mutualisées utilisables à
différents endroits de l'application. Il regroupe aussi des
directives qui exécutent des tâches
(services) différentes dans l'application. Elles sont utilisées
pour la manipulation du DOM* (éléments
de l'interface web) et se traduisent par des comportements
HTML* qui vont être réutilisables dans
les pages (templates) de l'application.
Un service et trois directives ont été
créés dans ce module
(mapService.js) :
? Le service qui gère la configuration des couches
raster (WMS*) de références
(LeafletServices) dont
l'API* IGN*.
? La directive pour la gestion de la carte
(leafletMap). Cette directive est la plus importante
de l'application. C'est ici qu'on initialise la carte
Leaflet et ses
fonctionnalités comme les outils de navigation, la
légende, les couches métiers...
? La directive qui gère les évènements
entre la carte et la liste de données
(maplist). Par exemple, un élément
sélectionné dans la carte est automatiquement
sélectionné dans la liste de données et vice versa.
Les fonctionnalités par défaut de Leaflet ne
sont pas suffisantes. Des extensions supplémentaires proposées
par la communauté des développeurs ou développées
spécifiquement pour l'application (légende) ont été
ajoutées (voir tableau en Annexe IX).
Université Jean Monnet de Saint-Etienne Khadim
MBACKE
31
< / Développement d'une application de
cartographie interactive sur internet >
| 
