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).
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
Leafletetsesfonctionnalitéscomme 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).
| 
