Post on 05-Jan-2017
Créer une application web grâce au générateur Flex
Salle de Classe SIG 2012
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 2
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 3
Exercice
Temps Estimé : 45 minutes
Etape 1 : Publier un service de carte avec ArcGIS Server
Etape 2 : Créer une application web grâce au générateur Flex
Etape 3 : Tester votre application web
Etape 4 (facultative) : Ajouter un widget personnalisé
Résumé de l’exercice
Dans cet exercice vous allez créer un service de carte avec la capacité
d’accéder aux données du service. Vous intégrerez ensuite ce service dans
une application web en Flex grâce au générateur d’applications ESRI.
L’idée est de créer une application simple qui permettrait aux différents
services de la communauté d’agglomérations du Puy en Velay d’ajouter
facilement des informations concernant des ouvrages en cours ou à venir sur
son territoire. Ces informations auraient vocation à être diffusées sur un site
grand public. Il s’agit de dessiner sans grande précision les emplacements des
travaux, comme par exemple un ponctuel représentant l’inspection d’un
regard, un linéaire représentant l’intervention sur une conduite d’eau le long
d’une rue ou une zone représentant l’élagage des arbres dans un parc. Des
informations attributaires viennent compléter le graphisme comme la nature
des travaux et leurs dates.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 4
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 5
Etape 1: Publier un service de carte avec ArcGIS Server
Double cliquez sur l’icône Ordinateur présent sur le bureau.
Naviguez dans C:\Student\Flex et lancer le document ArcMap nommé
Velay. Ce document est composé de couches représentant les différentes
interventions classées selon leur type (Eau, Eclairage, Gaz, Voirie, Espaces
verts, etc.) sur la ville du Puy en Velay. On y retrouve également un fond
de carte ArcGIS Online (World Topo Map).
Découvrez les informations en parcourant la carte et en ouvrant les tables
attributaires (clic-droit sur une couche puis ouvrir la table attributaire).
L’objectif est de publier cette ressource SIG sur un ArcGIS Server à travers
un service de carte. Pour ce faire vous devez commencer par supprimez la
couche Fond de carte. En effet, le fond de carte ralentirait les
performances du service de carte que vous allez créer. Il sera rajouté
directement dans l’application Flex.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 6
Placez-vous sur la couche Fond de carte et faites un clic-droit Supprimer.
Ensuite allez dans le menu Fichier/Enregistrer ou appuyez sur l’icône en
forme de disquette pour enregistrer cette modification.
Pour publier ce document sous forme d’un service de carte sur ArcGIS
Server, allez dans le menu Fichier/Partager en tant que/Service…
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 7
Un assistant de publication s’ouvre. Laissez l’option par défaut Publier un
service et appuyer sur le bouton Suivant.
Sur la deuxième fenêtre, choisissez la connexion arcgis on form101_6080
(admin) et laissez le nom par défaut du service sur Velay. Appuyez sur le
bouton Suivant.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 8
Sur la troisième fenêtre, cochez l’option Créer un nouveau dossier et
nomme- le SIG2012. Appuyer sur le bouton Continuer.
Une nouvelle interface s’ouvre, il s’agit de la fenêtre Editeur de services
qui permet de configurer le futur service de carte avant sa publication.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 9
Cliquez sur Fonctionnalités dans le menu situé à gauche. Décochez la case
KML et cocher la case Feature Access. Cette fonctionnalité permet de
faire de l’édition directement dans une application web (les données
doivent obligatoirement être stockées dans une géodatabase SDE).
Maintenant vous allez analyser le document ArcMap pour voir s’il est
compatible avec un service de carte. Pour cela, appuyez sur le bouton
Analyse situé en haut de la fenêtre.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 10
Une fenêtre Préparation apparait en bas dans le document ArcMap. Elle
permet de retourner les incompatibilités d’un document avant sa
publication sur ArcGIS Server. Votre fenêtre ne doit pas contenir d’erreur
après l’analyse.
Vous pouvez donc maintenant publiez votre document ArcMap en service
de carte. Pour ce faire, appuyez sur le bouton Publier situé en haut de la
fenêtre Editeur de services.
Après quelques secondes, une fenêtre vous informe que la publication de
votre service a réussie. Cliquez sur OK.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 11
Vous pouvez retrouver votre service de carte dans la fenêtre Catalogue
d’ArcMap. Plus précisément dans le dossier Serveurs SIG/arcgis on
FORM101_6080 (admin) qui représente la connexion à votre ArcGIS
Server. Dans le dossier SIG2012, vous trouverez le service de carte Velay.
Maintenant pour visualiser et utiliser ce service de carte dans un navigateur
internet, il faut auparavant créer une application web. Vous allez donc créer
une application web grâce au générateur Flex dans l’étape suivante.
Etape 2 : Créer une application web grâce au générateur Flex
Lancez le générateur d’applications Flex dont l’icône se trouve sur le
bureau : ArcGIS Viewer for Flex.
Appuyez sur le bouton Créer une nouvelle application.
Nommez votre application « Velay » et appuyer sur Créer. Patientez
quelques secondes le temps que votre application se configure.
A l’ouverture du configurateur, sélectionnez Fonds de carte et couches
opérationnelles pour commencer à paramétrer votre application web.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 13
Vous arrivez sur l’onglet vertical nommé Cartes qui vous permet de
paramétrer les fonds de carte et couches opérationnelles qui apparaitront
dans votre application web.
Sur le premier onglet horizontal (à gauche) Fonds de carte, on vous
demande de choisir les fonds de carte ArcGIS Online que vous souhaitez
ajouter. Cochez la case Add ArcGIS Online Basemaps pour toutes les
ajouter en une seule fois.
Cliquez ensuite sur le deuxième onglet horizontal Couches
opérationnelles. Choisissez de parcourir les cartes sur l’onglet ArcGIS
Server pour retrouver votre service de carte Velay.
Assurez-vous que l’URL de votre ArcGIS Server est correcte :
http://FORM101:6080/ArcGIS/rest/services
Cliquez sur Parcourir pour voir les services de carte disponibles sur votre
ArcGIS Server.
Naviguez dans le dossier SIG2012 puis sélectionnez le dossier Velay (MS)
qui correspond à votre service de carte précédemment publié. Une fois
sélectionné, vous pouvez appuyer sur le bouton Ajouter pour l’ajouter dans
le cadre situé à droite et donc le voir apparaitre dans votre future
application web.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 14
Cliquez ensuite sur le troisième onglet horizontal Etendue de carte qui
permet de régler l’étendue de votre carte à l’ouverture de l’application web.
Automatiquement, la carte zoom sur la ville du Puy en Velay qui
correspond à l’étendue de votre service de carte (*Si ce n’est pas le cas,
appuyer sur le bouton Zoom sur l’étendue de la couche opérationnelle).
Cliquez sur le bouton Enregistrer situé en haut à droite pour sauvegarder
votre configuration.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 15
Cliquez sur l’onglet vertical Widgets. Vous arrivez sur l’interface qui
permet d’ajouter des fonctionnalités à votre application web (on parle de
widget en Flex). Par défaut, on vous propose jusqu’à 14 widgets dans la
catalogue (situés dans le cadre supérieur). Votre future application web
contient déjà 3 widgets (situés dans le cadre inférieur) nommés Trouver
une adresse, Dessiner et mesurer et Imprimer.
Vous allez ajouter le widget Modifier qui permet de faire de l’édition
directement dans l’application web. Pour cela, sélectionnez le widget
Modifier dans le catalogue et appuyez sur le bouton Ajouter.
Vous basculez automatiquement sur une fenêtre de paramétrage du widget
Modifier. Activez l’option Ouvrir au démarrage puis laissez les autres
paramètres par défaut. Pour terminer appuyez sur le bouton OK. Vous
revenez ainsi sur le catalogue de widgets.
Cliquez sur l’onglet vertical Mise en page, une fenêtre apparait vous
demandant d’enregistrer les modifications apportées aux widgets, cliquez
sur Oui.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 16
La fenêtre Mise en page permet de paramétrer l’interface de l’application
web. Laissez les paramètres par défaut et cliquez sur l’onglet vertical
Présentation.
Cette fenêtre permet de personnaliser l’apparence de votre application.
Commencez par cliquer sur le bouton Parcourir pour changer le logo et
utiliser celui stocké dans C:\Student\Flex\logo_velay.png
Cliquez ensuite sur l’onglet horizontal Titre et polices. Remplacez le Titre
par « Portail cartographique 2012 » et le Sous-titre par « Gestion des
interventions communales ».
Cliquez ensuite sur l’onglet horizontal Thèmes et styles. Modifiez le style
de l’application en sélectionnant le style prédéfini Bleu cobalt dans la liste
déroulante. Enfin, appuyez sur le bouton Enregistrer pour sauvegarder vos
modifications.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 17
Votre application web est terminée, vous pouvez en avoir un aperçu en
cliquant sur l’onglet vertical Aperçu. Cette fenêtre vous permet de
visualiser votre application et elle vous fournit l’URL pour l’exécuter dans
un navigateur internet.
Cliquer sur l’URL de l’application : http://FORM101/flexviewers/Velay
présente en haut à droite pour ouvrir votre application web dans un
navigateur internet pour pouvoir la tester dans l’étape suivante de
l’exercice.
Votre application web se lance alors dans le navigateur internet par défaut
de votre ordinateur.
NB : Rappelons que le navigateur internet a besoin du plug-in Flash Player
pour pouvoir exécuter une application développée en Flex (exception pour
Google Chrome qui intègre Flash Player par défaut).
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 18
Etape 3 : Testez votre application web
Baissez la fenêtre du navigateur internet et dans le générateur Flex cliquez
sur Terminer, en haut à droite.
Revenez dans la page web de votre application. Vous allez dessiner des
nouvelles interventions. Dans la carte vous allez consulter une entité
existante : cliquez sur l’entité triangulaire en violet sur le côté ouest de la
ville.
La fenêtre des attributs s’ouvre. Vous pouvez visualiser que l’intervention
est de type « Voirie », qu’elle débute le 22 octobre et se termine le 16
novembre, et qu’il s’agit d’un aménagement de la voirie. C’est ce type
d’information que l’on veut divulguer au public, il ne s’agit pas de dessiner
précisément les entités mais juste de localiser les interventions et de
communiquer un minimum de détails quant à leur nature.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 19
Cliquez OK dans la fenêtre des attributs pour la fermer.
Vous allez rechercher le lieu de la prochaine intervention à renseigner.
Dans la barre des menus, cliquez sur le widget de localisation « Trouver
une adresse ». Ce widget était déjà configuré par défaut dans le générateur
Flex, il repose sur un service de géocodage mis en ligne sur ArcGis Online.
Il fonctionne parfaitement pour trouver des adresses en France.
Vous allez saisir l’adresse suivante : 12 boulevard de la République
43000. Puis cliquez sur Localiser.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 20
Le premier résultat est convenable. Il apparaît dans la carte localisé au bon
endroit, cliquez Zoom sur dans la vignette du point représenté sur la carte.
L’outil d’édition « Modifier » sur la gauche est le widget que vous avez
intégré dans l’étape précédente. Saisissez le modèle d’entité Eau. Vous
allez créer une entité ponctuelle pour symboliser l’inspection d’un regard.
Vous allez créer l’entité sur le boulevard de la République (fond de plan) à
peu près au niveau du résultat du géocodage. Cliquez une fois pour créer
l’entité.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 21
La fenêtre des attributs apparait, vous allez les renseigner ainsi :
o Type : Eau
o Début : 15 octobre
o Fin : 16 octobre
o Description : Inspection du réseau d’assainissement
o Lieu : tapez 12 boulevard de la république
Cliquez sur OK dans la fenêtre des attributs.
Vous allez créer une entité linéaire pour symboliser une intervention. Pour
localiser la nouvelle intervention, réutilisez l’outil Trouver une adresse et
effacez les anciens résultats en cliquant sur le bouton Adresse.
Renseignez la nouvelle adresse « rue Charles Martin 43750 » puis cliquez
sur Localiser.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 22
Zoomez sur le premier résultat trouvé par l’outil.
Dans l’outil Modifier, sélectionnez le modèle d’entité Eclairage.
Dessinez une entité linéaire le long de la rue Charles Martin, cliquez une
fois pour créer des sommets, deux fois pour terminer la construction de
l’entité.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 23
La fenêtre des attributs apparait, vous allez les renseigner ainsi :
o Type : Eclairage
o Début : 15 octobre
o Fin : 26 octobre
o Description : Installation de l’équipement urbain
o Lieu : tapez rue Charles Martin
Cliquez sur OK dans la fenêtre des attributs.
Revenez à la vue générale en cliquant sur la planète dans l’outil de
naviguation (en haut à gauche).
Vous allez localiser à l’aide de la carte une grande zone verte à l’est de la
ville dont le toponyme est « Bois Bonneterre » (sur le fond de plan
topographique).
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 24
Sélectionnez le modèle d’entité Espaces verts dans l’outil Modifier.
Dessinez le polygone représentant le bois Bonneterre. Cliquez une fois
pour créer des sommets, deux fois pour terminer la construction de l’entité.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 25
Renseigner les attributs ainsi :
o Type : Espaces verts
o Début : 15 octobre
o Fin : 31 octobre
o Description : Abattage des arbres de la municipalité
o Lieu : tapez Bois Bonneterre
En haut à gauche de votre application vous disposez de deux outils Extras
et Fond de carte. Cliquez sur Extras…
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 26
Il s’agit d’une table des matières simplifiée, vous pouvez choisir d’afficher
ou de désafficher de la carte chaque de votre service de carte que vous avez
précédemment publié.
Cliquez sur Fond de carte. Vous disposez d’une collection de fond de
cartes. Il s’agit de tous les services d’ArcGis Online que vous avez choisi
d’intégrer lorsque vous avez créé votre application dans l’étape précédente.
Vous pouvez permuter les différents fonds de plans mais vous n’en
afficherez qu’un seul à la fois. Testez l’imagerie satellite par exemple.
Baissez la fenêtre de votre application et ouvrez votre document ArcMap
Velay.mxd que vous avez publié à l’étape précédente. Rafraîchissez la vue
cartographique en effectuant un zoom à l’intérieur du document.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 27
Vous remarquez que les entités que vous avez créées apparaissent bien. Les
mises à jour ont donc bien été intégrées dans la géodatabase SDE.
L’étape suivante est facultative. Vous allez intégrer dans le générateur Flex
un widget personnalisé.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 28
Etape 4 (facultative) : Ajouter un widget personnalisé
L’objectif de cette étape est d’ajouter un nouveau widget à votre catalogue
de widgets du générateur Flex. Pour récupérer un nouveau widget à intégrer
vous pouvez :
En télécharger un depuis la plateforme ArcGIS Resources Center
(uniquement les widgets compatibles avec la version 3.0 du générateur)
En développer un vous-même à partir de l’API Flex 3.0
Dans cette étape, nous vous fournissons un widget personnalisé qui a été
créé par un membre de l’équipe Formation Esri France. Ce widget permet
d’afficher l’échelle numérique d’une carte et de la modifier grâce à une
liste déroulante d’échelles prédéfinies.
Ouvrez le générateur d’application Flex : ArcGIS Viewer for Flex.
Pour ajouter un nouveau widget, vous devez passer par les paramètres du
générateur. Cliquez sur Paramètres en haut à droite.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 29
Vous arrivez sur les paramètres du générateur, faite attention à ne changer
aucun paramètre. Cliquez sur Afficher les paramètres avancés.
Appuyez sur le bouton Gérer les widgets personnalisés.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 30
Une nouvelle fenêtre s’ouvre, elle contiendra tous les widgets personnalisés
que vous pourriez ajouter à votre générateur. Pour un nouveau widget,
appuyez sur Ajouter.
Naviguez jusqu’à C:\Student\Flex\Widget personnalisé et ajoutez le
widget nommé EchelleNumerique.zip
Le message « L’importation du widget personnalisé a réussi » apparait pour
confirmer l’importation, cliquez sur Fermer.
Le nouveau widget apparait maintenant dans le catalogue des widgets
personnalisés. C’est également à cet endroit que vous pourriez le
supprimer. Appuyez sur Fermer pour revenir aux paramètres du
générateur.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 31
Maintenant, vous allez ajouter ce widget dans votre application web.
Cliquez sur Mes application en haut à gauche du générateur pour revenir
sur l’écran d’accueil.
Une fois sur l’écran d’accueil du générateur vous retrouvez la liste des
applications web que vous avez créé (dans votre cas une seule). Pour
modifier une application existante cliquer sur l’icône en forme de crayon
à droite de l’application concernée.
Rendez-vous directement sur l’onglet Widgets. Le widget Echelle
numérique apparait maintenant dans le catalogue des widgets du
générateur. Sélectionnez-le et appuyez sur Ajouter.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 32
Automatiquement vous basculez sur la fenêtre de paramétrage du widget.
Ce widget étant un widget personnalisé, le paramétrage proposé se fait à
travers un langage balisé. La balise <text> permet de modifier le texte qui
apparaitra sur le widget. La balise <scale> permet de modifier les échelles
prédéfinies qui apparaitront dans la liste déroulante. Les différentes
échelles doivent être séparées par un point-virgule.
Créer une application web grâce au générateur Flex
Copyright © 2012 – ESRI France – SIG 2012 33
Laissez les paramètres par défaut si vous le souhaitez et appuyer sur OK.
De retour sur le catalogue des widgets, appuyez sur Enregistrer en haut à
droite.
Relancez votre application web en utilisant l’URL de l’application situé
dans l’onglet Aperçu ou rafraichissez votre navigateur internet si vous ne
l’avez pas fermé.
Le widget Echelle numérique est disponible dans le bandeau supérieur de
votre application. Cliquer dessus pour l’ouvrir et l’utiliser…
Fin de l’exercice.