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, Ajouter une fenêtre à une application Web, rouvrez l’expérience American River Marine Estuary (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 3.
- Sur la fiche American River Marine Estuary Template 3 (Modèle d’estuaire de l’American River 3), cliquez sur le bouton Create (Créer).
La zone d’affichage apparaît avec l’expérience créée jusqu’ici. Elle comprend une carte, un en-tête, une colonne avec d’autres widgets et un bouton qui ouvre une fenêtre.
- Dans la barre d’outils du générateur, cliquez sur le titre et renommez-le en Estuaire de l’American River.
Activer l’option de mise en page personnalisée
L’expérience American River Marine Estuary (Estuaire de l’American River) étant destinée à une borne interactive, votre conception a ciblé le format grand écran. Cependant, votre client a indiqué qu’il souhaitait également référencer l’application depuis son site Web, de sorte que les utilisateurs puissent également la consulter sur des tablettes et des téléphones mobiles. Vous allez utiliser l’option de mise en page personnalisée pour apporter des ajustements à la mise en page qui ne seront visibles que sur les petits écrans.
- Sur la barre d’outils du générateur, cliquez sur le bouton Edit your page for large screen devices (Modifier votre page pour les appareils moyen écran).
La zone d’affichage devient plus étroite, émulant ainsi l’écran d’une tablette. La colonne en regard de la carte est maintenant trop étroite pour être utile. Le contenu des widgets est illisible.
En regard du menu se trouvent deux menus d’état : un pour l’en-tête et un pour le corps de l’application. Ils sont tous les deux définis sur Auto, ce qui signifie que la mise en page pour les moyens écrans est identique à celle des grands écrans.
- En regard du corps de l’application, cliquez sur Custom (Personnalisé).
- Dans la fenêtre Are you sure you want to enable it? (Voulez-vous vraiment l’activer ?), cliquez sur OK.
Vous pouvez maintenant changer la conception de la mise en page sur moyens écrans sans affecter la conception pour les grands écrans.
- Cliquez sur la colonne. Essayez de cliquer sur l’espace entre deux widgets pour sélectionner la colonne au lieu d’un des autres widgets.
Conseil :
Pour confirmer que vous avez bien sélectionné le widget Colonne, vérifiez que la fenêtre Column (Colonne) est affichée. Vous pouvez aussi sélectionner le widget Colonne dans la section Outline (Contour) de la fenêtre Page.
- Faites glisser la poignée latérale du widget Colonne vers la droite jusqu’à ce qu’il occupe quatre espaces verticaux au lieu de deux.
La colonne est désormais assez large pour que la légende s’affiche entièrement. Ce changement n’affecte pas l’expérience sur grands écrans.
Déplacer un élément dans la liste en attente
Il peut parfois être nécessaire de retirer entièrement un widget d’une mise en page pour petits écrans. Au lieu de supprimer le widget, ce qui le supprimerait aussi de la mise en page pour grands écrans, vous pouvez le déplacer dans la liste en attente.
- Sur la barre d’outils du générateur, cliquez sur le bouton Edit your page for large screen devices (Modifier votre page pour les appareils petit écran).
La zone d’affichage devient encore plus petite. Les changements requis ici sont plus spectaculaires.
- Sur la zone d’affichage, faites défiler l’application.
La colonne s’affiche en premier, avec la carte au-dessous. Sur les petits écrans, les widgets Ligne s’affichent sous forme de colonnes, de sorte que votre mise en page est maintenant structurée sous la forme d’une colonne à l’intérieur d’une colonne et non sous la forme d’une colonne à l’intérieur d’une ligne.
Les applications mobiles ayant un espace plus limité, elles fonctionnent mieux en privilégiant la simplicité. Les informations des widgets Légende et Géosignet étant également disponibles dans les fenêtres contextuelles, vous allez les retirer de l’affichage sur petits écrans. La fonctionnalité de balayage étant également moins utile sur un petit écran, vous allez aussi l’enlever. Cela signifie que vous pouvez retirer l’intégralité du widget Colonne, en ne laissant que la carte.
- En regard du corps de la zone d’affichage, cliquez sur Custom (Personnalisé). Cliquez sur OK.
- Sélectionnez le widget Colonne. Vérifiez que la colonne est sélectionnée, et non l’un des widgets à l’intérieur.
Ne supprimez pas le widget Colonne. La suppression d’un widget en mode personnalisé entraîne sa suppression de l’application entière, il ne sera donc plus non plus disponible sur les plus grands écrans. Au lieu de supprimer des widgets d’une mise en page pour moyens ou petits écrans, déplacez-les dans la liste en attente. Cela garantit qu’ils existent toujours et qu’ils restent disponibles pour d’autres tailles d’écran.
Conseil :
Si vous supprimez par erreur le widget Colonne, cliquez sur le bouton Undo (Annuler) de la barre d’outils.
- Dans la barre d’outils du widget, cliquez sur le bouton Move to the pending list (Déplacer dans la liste en attente).
La colonne et l’ensemble de son contenu disparaissent de la zone d’affichage. Seule la carte demeure.
Remarque :
Si la carte ne remplit pas la zone d’affichage entière, cliquez dessus et faites-la glisser légèrement pour réinitialiser sa taille.
Si les outils cartographiques (par exemple, le bouton de changement de carte) ne sont pas visibles au bas de la zone d’affichage, ouvrez la fenêtre Map (Carte) sur l’onglet Style. Pour Height (Hauteur), choisissez Custom (Personnalisé) et définissez la taille sur 100% (100 %).
Définir la taille et la position en pixels
La création de mises en page personnalisées pour les petits écrans présente un inconvénient : si vous décidez d’apporter des modifications à la mise en page ultérieurement, vous devez les appliquer deux ou trois fois. Vous pouvez parfois éviter d’activer une mise en page personnalisée en optant pour le dimensionnement en pixels au lieu des pourcentages.
Sur les petits écrans, le bouton About this map (À propos de cette carte) sur votre expérience n’est pas assez large pour faire apparaître tout le texte.
Vous pourriez créer une taille personnalisée pour le bouton qui affecte uniquement les petits écrans, mais vous allez plutôt modifier la taille générale du bouton afin qu’il fonctionne sur toutes les tailles d’écran et qu’aucune personnalisation ne soit nécessaire.
- Sur la barre d’outils du générateur, cliquez sur le bouton Edit your page for large screen devices (Modifier votre page pour les périphériques grand écran).
- Pointez sur l’en-tête et cliquez sur Edit header (Mettre à jour l’en-tête). Cliquez sur le widget Bouton.
- Dans la fenêtre Button 2 (Bouton 2), cliquez sur l’onglet Style.
Sous Size & Position (Taille et position), les paramètres Width (Largeur) et Height (Hauteur) sont tous les deux mesurés en tant que pourcentage de la taille d’écran. C’est pour cela que le bouton devient trop court pour être lisible sur les appareils petit écran.
- En regard de Width (Largeur), cliquez sur % et choisissez px. Changez également % en px pour le paramètre Height (Hauteur).
La définition de la taille du bouton en pixels signifie que le bouton présente constamment la même taille, quelle que soit la taille d’écran.
- Pour Width (Largeur), saisissez 120. Pour Height (Hauteur), saisissez 30.
Le bouton semble un peu petit pour les grands écrans et aura toujours l’air un peu grand pour les petits écrans. Mais sa nouvelle taille constitue un compromis qui fonctionne sur n’importe quelle taille d’écran. Vous allez également déterminer sa position en pixels.
Sous le paramètre Height (Hauteur) se trouve un diagramme de position. Ce diagramme détermine à quelle distance des bords de l’en-tête le bouton est positionné.
- Dans le diagramme de position, en regard des mesures de position en bas et à droite, cliquez sur le bouton % et choisissez px.
- Modifiez les deux mesures sur 10 pixels.
Le bouton se trouve désormais à 10 pixels de l’angle inférieur droit de l’en-tête.
Vous allez ensuite ajuster la position du texte de titre afin qu’il se trouve également à 10 pixels du bord.
- Sur la zone d’affichage, cliquez sur le texte de titre.
Dans la fenêtre Text (Texte), sur l’onglet Style, dans le diagramme de position, les quatre mesures sont définies sur 0 pour cent. Cela s’explique parce que vous avez configuré le titre de façon à occuper tout l’espace de l’en-tête. Vous allez ajuster l’une de ces mesures.
- Dans le diagramme de position, configurez la mesure de gauche sur 10 pixels.
Sur la zone d’affichage, le widget Texte est légèrement décalé sur la droite.
- Cliquez sur les boutons Edit your page for medium screen devices (Modifier votre page pour les appareils moyen écran) et Edit your page for small screen devices (Modifier votre page pour les appareils petit écran) pour tester l’apparence de l’en-tête sur les petits écrans.
- Sur la barre d’outils du générateur, cliquez sur le bouton Edit your page for large screen devices (Modifier votre page pour les appareils grand écran) et sur le bouton Save (Enregistrer).
Dans ce didacticiel, vous avez adapté votre mise en page pour qu’elle fonctionne avec trois tailles d’écran. Vous avez activé l’option de mise en page personnalisée, déplacé les éléments indésirables dans la liste en attente et défini la taille et la position des widgets à l’aide de pixels pour qu’ils ne soient pas redimensionnés en cas de changement de la taille d’écran. Suivez le dernier didacticiel de cette série, Publier une expérience et un modèle, pour apprendre à mettre l’expérience à la disposition du public.
