Créer une application web grâce au générateur Flex Salle de

Créer une application web grâce au générateur Flex

Salle de Classe SIG 2012


Copyright © 2012 – ESRI France – SIG 2012 2



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.





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.



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…



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.



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.



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.



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.



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.



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.

http://form101:6080/ArcGIS/rest/services



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.



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.



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.



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).

http://form101/flexviewers/Velay



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.



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.



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é.



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.



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é.



La fenêtre des attributs apparait, vous allez les renseigner ainsi :

o Type : Eclairage


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).



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é.



Renseigner les attributs ainsi :

o Type : Espaces verts


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…



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.



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é.



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.



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.



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.



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.



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.



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.

Documents

Créer une application web grâce au générateur Flex Salle de