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

Transcription

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

2 Copyright 2012 ESRI France SIG Créer une application web grâce au générateur Flex

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. Copyright 2012 ESRI France SIG

4 Copyright 2012 ESRI France SIG Créer une application web grâce au générateur Flex

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. Copyright 2012 ESRI France SIG

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 Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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

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 : 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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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 : 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). Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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 Puis cliquez sur Localiser. Copyright 2012 ESRI France SIG

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é. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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é. Copyright 2012 ESRI France SIG

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). Copyright 2012 ESRI France SIG

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é. Copyright 2012 ESRI France SIG

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 Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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é. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG

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. Copyright 2012 ESRI France SIG