Ouvrir l’expérience
Pour commencer, vous allez ouvrir l’expérience créée dans le didacticiel précédent.
- Si vous avez terminé le didacticiel précédent, Organiser une mise en page d’application Web avec plusieurs widgets, rouvrez l’expérience Estuaire de l’American River et passez à la section suivante.
Remarque :
Si vous ne savez pas comment rechercher l’expérience, ouvrez ArcGIS Experience Builder et connectez-vous avec votre compte ArcGIS. Votre expérience figure sur la page Recent experiences (Expériences récentes).
- Si vous n’avez pas suivi le didacticiel précédent, ouvrez ArcGIS Experience Builder et connectez-vous avec votre compte ArcGIS
Remarque :
Si vous ne disposez pas d’un compte ArcGIS, consultez les options d’accès aux logiciels.
La page Recent experiences (Expériences récentes) apparaît.
- Cliquez sur le bouton Create new (Créer).
- Cliquez sur l’onglet ArcGIS Online.
- Dans la barre de recherche, saisissez estuary template 2.
- Sur la fiche American River Marine Estuary Template 2, cliquez sur le bouton Create (Créer).
La zone d’affichage apparaît avec l’expérience créée jusqu’ici. Elle comprend un widget Map (Carte) incluant deux cartes, un en-tête avec un titre, et une colonne comportant trois widgets : Swipe (Balayer), Legend (Légende) et Bookmark (Géosignet).
- Dans la barre d’outils du générateur, cliquez sur le titre et renommez-le en Estuaire de l’American River.
Ajouter une fenêtre
Vous souhaitez ajouter davantage d’informations à l’expérience : une carte générale de situation et un texte de crédit. Cependant, vous avez peur de surcharger la mise en page avec trop d’informations susceptibles de détourner l’attention de l’utilisateur au sujet de la carte. Dans une mise en page statique, vous pouvez utiliser les principes de la hiérarchie visuelle pour faire en sorte que l’utilisateur remarque en premier les informations essentielles, comme la carte, tandis que les informations secondaires, comme le texte de crédit, attirent l’œil en dernier. Dans une mise en page d’application Web, vous pouvez en outre introduire une interactivité avec l’utilisateur pour contrôler ce qu’il remarque en premier.
Vous allez maintenant ajouter une fenêtre à la mise en page pour contenir la carte de situation générale et le texte de crédit. Cette fenêtre fera en sorte que ces informations secondaires soient disponibles et faciles à lire, sans surcharger la carte. Elle ne sera pas visible tant que l’utilisateur ne décide pas de l’afficher.
- Dans la barre d’outils latérale, cliquez sur le bouton Page.
- En haut du volet Page, cliquez sur l’onglet Window (Fenêtre).
Vous pouvez ajouter plusieurs pages et plusieurs fenêtres à une expérience. Cette expérience en comportera une de chaque.
- Cliquez sur le bouton Add window (Ajouter une fenêtre). Faites défiler le volet vers le bas et cliquez sur Sidebar (Barre latérale).
Une fenêtre apparaît à droite de la zone d’affichage. Le reste de la zone d’affichage est assombri pour faire en sorte que la fenêtre semble flotter au-dessus.
La fenêtre que vous avez ajoutée est un modèle, ce qui signifie qu’il contient déjà quelques widgets. Lorsque vous utilisez un modèle, il est recommandé de vérifier son contour avant d’effectuer des modifications afin de comprendre la structure de la page ou de la fenêtre.
Dans le volet Page, la section Outline (Contour) indique que la fenêtre comporte une image, un bouton et une colonne.
- Dans la section Outline (Contour), développez Column 2 (Colonne 2).
Le widget Column (Colonne) inclut deux widgets Text (Texte).
- Dans la section Outline (Contour), cliquez sur Text 2 (Texte 2) pour le sélectionner.
Dans la zone d’affichage, le texte Title (Titre) est sélectionné.
Vous n’avez pas besoin d’indiquer un titre pour la fenêtre, donc vous allez supprimer ce widget.
- Dans la section Outline (Contour), pointez le curseur sur Text 2 (Texte 2). Cliquez sur le bouton More (Plus) et sélectionnez Delete (Supprimer).
Ajouter un texte
Vous allez ajouter un texte à la fenêtre pour indiquer le crédit des sources des données de la carte et des photos utilisées dans le widget Bookmark (Géosignet).
- Copiez le texte suivant :
American River est un estuaire de l’Île Kangourou en Australie-Mériodionale. Il fait partie du parc marin Encounter Marine Park et comprend la zone de sanctuaire Pelican Lagoon, un point chaud de biodiversité protégé depuis 1914.
Les données utilisées dans cette carte sont issues de Estuarine Habitats of South Australia, un jeu de données fourni par le Ministère de l’environnement et des ressources en eau du gouvernement d’Australie-Méridionale.
Ce site a été créé par Votre nom le Date actuelle, d’après le didacticiel Concevoir une mise en page dans ArcGIS Experience Builder.
Crédits photos :
Posidonie : flickr, par Paul Asman et Jill Lenoble – https://www.flickr.com/photos/pauljill/5777808662/
Posidonie/Algues : flickr, par Gerry Thomasen – https://www.flickr.com/photos/gerrythomasen/174310588/
Criste marine : Wikimedia Commons, par Melburnian – https://commons.wikimedia.org/wiki/file:sarcocornia_quinqueflora.jpg
Criste marine/Atriplex/Prairie : iNaturalist, par Samuel Brown – https://www.inaturalist.org/photos/31331920
Sable : flickr, par Phil Whitehouse – https://www.flickr.com/photos/philliecasablanca/2051633887/
Mélaleuque/Cyperaceae : Wikimedia Commons, par Melburnian – https://commons.wikimedia.org/wiki/file:melaleuca_squarrosa.jpg
Prairie : Wikimedia Commons, par Kolforn – https://commons.wikimedia.org/wiki/File:Grassland_countryside,_Vale_da_Azinheira,_25_June_2016.JPG
Eau : Wikimedia Commons, par Manage891a3 - https://commons.wikimedia.org/wiki/file:water_surface_lake.jpg
- Dans la zone d’affichage, double-cliquez sur le widget Text (Texte) restant pour le modifier. Cliquez avec le bouton droit et sélectionnez Paste as plain text (Coller en tant que texte brut).
Conseil :
Si l’option Paste as plain text (Coller en tant que texte brut) n’est pas disponible, appuyez sur Ctrl+Maj+V ou sur Cmd+Option+Maj+V.
Le texte inclut quelques informations sur l’estuaire et indique les auteurs des données et des photos. Vous allez maintenant ajouter des hyperliens dans certaines parties du texte.
- Dans le widget Text (Texte), mettez en surbrillance Encounter Marine Park. Dans le volet Text 3 (Texte 3), cliquez sur le bouton Link (Lien).
- Dans la fenêtre Set link (Définir un lien), pour Link to (Lien vers), sélectionnez URL. Pour URL, collez https://www.parks.sa.gov.au/parks/encounter-marine-park.
- Cliquez sur OK.
- Dans le second paragraphe, mettez en surbrillance Estuarine Habitats of South Australia. Procédez de la même manière pour lier ce texte à https://data.sa.gov.au/data/dataset/estuarine-habitats-of-south-australia.
- Modifiez le texte pour indiquer votre nom et la date actuelle.
- Dans la barre d’outils du générateur, cliquez sur Save (Enregistrer).
Ajouter une image
Vous allez maintenant ajouter une image d’une carte générale de situation à la fenêtre.
- Cliquez sur le widget Image. Dans le volet Image, cliquez sur Select an image (Sélectionner une image).
- Dans le volet Select an image (Sélectionner une image), cliquez sur l’onglet URL et collez https://www.arcgis.com/sharing/rest/content/items/11b62ea3ef81427dbf6315563f17c810/data.
- Cliquez en dehors de la zone de texte pour valider la modification. Fermez le volet Select an image (Sélectionner une image).
L’image est une carte générale de situation d’American River par rapport au reste de l’Australie. Elle a été créée avec ArcGIS Pro et enregistrée en tant qu’image PNG.
Ses étiquettes ne sont pas lisibles car la carte est trop petite. Vous allez élargir la fenêtre pour pouvoir développer la carte.
- Dans le volet Page, cliquez sur Window (Fenêtre) pour sélectionner cet élément.
Conseil :
Vous pouvez également cliquer sur l’écart entre l’image et le texte dans la zone d’affichage.
Le volet Window (Fenêtre) appparaît.
- Dans la section Position & Size (Position et taille), pour W (L), saisissez 340 et appuyez sur Entrée.
La fenêtre s’élargit. Vous allez également agrandir le widget Image.
- Cliquez sur le widget Image. Faites glisser son bord inférieur jusqu’à ce que la totalité de la carte soit visible.
L’image et le texte se chevauchent désormais, ce qui les rend difficiles à lire. Vous allez déplacer le texte vers le bas pour qu’il n’interfère pas avec l’image.
- Cliquez sur le widget Text (Texte) pour le sélectionner.
Le widget Text (Texte) ne possède pas de poignée, donc vous ne pouvez pas le déplacer vers le bas, ni l’éloigner de l’image.
Parfois, vous ne pouvez pas modifier la taille ou la position d’un widget car sa taille est définie sur Auto (Automatique) ou sur Stretch (Étirer). Toutefois, dans le cas présent, le widget Text (Texte) possède une hauteur personnalisée, donc ce n’est pas la cause du problème.
Conseil :
Pour vérifier si un widget possède une hauteur personnalisée, cliquez sur l’onglet Style dans le volet des propriétés. Vérifiez que le paramètre Height (Hauteur) est défini sur un nombre et non sur Auto (Automatique) ou Stretch (Étirer).
Si vous ne pouvez pas modifier la taille ou la position d’un widget, même lorsque la méthode de dimensionnement est définie sur Custom (Personnalisé), accédez à la section Outline (Contour) pour savoir si le widget est inclus dans un autre widget.
- Dans le volet Page, vérifiez la section Outline (Contour).
Dans le cas présent, le texte est inclus dans une colonne. La colonne détermine certains aspects de la taille et de la position du texte. Dans notre exemple, vous pouvez déplacer le widget Text (Texte) en déplaçant le widget Column (Colonne) qui le contient.
- Dans la section Outline (Contour), cliquez sur Column 2 (Colonne 2).
- Dans la zone d’affichage, des poignées de glissement apparaissent sur le widget. Faites glisser la poignée supérieure vers le bas jusqu’à ce qu’elle soit positionnée sous la carte générale de situation.
Ajuster le thème
Les hyperliens du widget Text (Texte) sont de couleur bleue. Cette couleur est définie par le thème de l’expérience. Vous allez maintenant modifier le thème pour que la couleur des liens corresponde aux couleurs de la carte générale de situation.
- Dans la barre d’outils latérale, cliquez sur le bouton Theme (Thème).
- En bas du volet Theme (Thème), cliquez sur Customize (Personnaliser).
- Au-dessus de Primary (Principale), cliquez sur le bouton de modification de couleur bleue.
- Pour HEX, saisissez #27a3ad et appuyez sur Entrée.
La couleur principale est mise à jour sur la même couleur turquoise que celle qui est utilisée dans la carte générale de situation. C’est également l’une des couleurs principales de la carte Cover type. Le texte avec des hyperliens et les boutons du widget Bookmark (Géosignet) passent du bleu au turquoise.
Ajouter un bouton et le lier à la fenêtre
Vous devez maintenant permettre aux utilisateurs d’ouvrir la fenêtre. Vous allez ajouter un bouton à l’en-tête et lier le bouton à la fenêtre.
- Dans la barre d’outils latérale, cliquez sur le bouton Page. En haut du volet Page, cliquez sur l’onglet Page.
La fenêtre disparaît. Vous pouvez maintenant continuer à modifier la page au lieu de modifier la fenêtre.
- Dans la zone d’affichage, pointez le curseur sur l’en-tête et cliquez sur Edit header (Modifier l’en-tête).
- Dans la barre d’outils latérale, cliquez sur le bouton Insert (Insérer). Dans le volet Insert widget (Insérer un widget), cliquez sur le bouton Search (Rechercher) et saisissez bouton.
- Faites glisser le widget Button (Bouton) vers la zone d’affichage. Déposez-le à droite de l’en-tête.
Ne vous inquiétez pas si le bouton n’est pas placé exactement là où vous le souhaitez. Vous ajusterez sa taille et sa position ultérieurement.
- Dans le volet Button 2 (Bouton 2), pour Text (Texte), effacez le texte existant et saisissez À propos de cette carte. Appuyez sur la touche Entrée.
Le texte sur le bouton est mis à jour. Vous allez maintenant connecter le bouton à la fenêtre.
- Dans le volet Button 2 (Bouton 2), cliquez sur Set link (Définir un lien).
- Dans la fenêtre Set link (Définir un lien), pour Link to (Lien vers), sélectionnez Window (Fenêtre).
Cette expérience ne comporte qu’une seule fenêtre, donc vous n’avez aucun choix à faire pour Select a window (Sélectionner une fenêtre).
- Cliquez sur OK.
Pour terminer, vous allez tester le bouton et la fenêtre.
- Dans la barre d’outils du générateur, cliquez sur le bouton Live view (Vue dynamique).
- Cliquez sur le bouton À propos de cette carte.
La fenêtre apparaît.
- En haut de la fenêtre, cliquez sur le bouton de fermeture.
La fenêtre se ferme.
- Dans la barre d’outils du générateur, désactivez Live view (Vue dynamique) et cliquez sur le bouton Save (Enregistrer).
Dans ce didacticiel, vous avez ajouté une fenêtre et un bouton à une application Web dans ArcGIS Experience Builder. Vous avez appris à modifier un texte, à ajouter une image, à lier un bouton à une fenêtre et à changer la couleur d’un thème. Essayez le didacticiel suivant de la série intitulé Redimensionner les widgets pour les petits écrans pour apprendre à personnaliser les mises en page en fonction de tailles d’écran différentes.
