Ajouter et gérer des pages

Une page est un document qui représente la base de la mise en page de l'application. Elle comporte trois éléments principaux qui peuvent contenir l’en-tête, le pied de page et le corps.

Une expérience Web contient au moins une page, mais peut en comporter plusieurs. Lorsque vous concevez une mise en page, déterminez la meilleure manière de présenter le contenu à votre public. Pour un contenu axé sur la carte, utilisez une page d’application plein écran. Pour un contenu mixte, tel que des cartes, plusieurs images et des blocs de texte devant éventuellement défiler verticalement, utilisez une page déroulante. Pour inclure un menu dans une application afin que les utilisateurs accèdent à plusieurs pages, vous pouvez ajouter des dossiers pour regrouper les pages de l’application dans un sous-menu et ajouter des liens vers d’autres sites Web. Vous pouvez également ajouter des fenêtres et les configurer de sorte qu’elles s’ouvrent lors du chargement de l’application ou de la page.

Lorsque vous ajoutez des widgets et des modèles de bloc et de groupe d’écrans à une page, ils sont répertoriés dans le nœud Body (Corps) de la section Outline (Contour) du panneau Page. Le contour pouvant faire l’objet de recherches indique la hiérarchie des blocs, des groupes d’écrans et des widgets de la page sélectionnée, avec notamment les nœuds d’en-tête et de pied de page, si vous les avez activés. Dans le contour, cliquez sur un élément et sur le bouton More (Plus) pour afficher un menu d’opérations telles que renommer et dupliquer. Cliquez sur Expand all (Développer tout) ou sur Collapse all (Réduire tout) pour afficher ou masquer la hiérarchie sous-jacente à cet élément.

Pour ajouter des pages à une application, cliquez sur le bouton Add page (Ajouter une page) et sélectionnez le modèle de page adapté au contenu et le flux attendu de l’application. Voici quelques exemples de scénarios :

• Vous souhaitez créer une application centrée sur les cartes sur une page plein écran avec un en-tête.
• Vous souhaitez créer une application de plusieurs pages avec une application plein écran sur la page d’accueil et une page déroulante dont le contenu se trouve sur une autre page à laquelle les utilisateurs peuvent accéder à partir d’un menu ou d’un bouton.

Vous pouvez utiliser le menu de navigation rapide au bas de la fenêtre du générateur pour sélectionner une page ou une fenêtre dans votre expérience et accéder à ses paramètres. Ce menu fournit un aperçu de la hiérarchie des pages et des types de fenêtre.

Lorsque vous sélectionnez un widget dans une application, une aide à la navigation sous forme de chemin de navigation apparaît également au bas de la fenêtre du générateur. Les chemins de navigation permettent de savoir si le widget sélectionné se trouve dans d’autres widgets ou d’autres éléments de page.

Applications de plusieurs pages

Le panneau Page contient les options suivantes, qui permettent de gérer les pages d’une application :

• Add page (Ajouter une page) : choisissez une application plein écran ou une page déroulante comme type de page. Chaque type de page inclut plusieurs modèles. Certains d’entre eux sont centrés sur les cartes alors que d’autres sont axés sur un contenu mixte, tel que du texte, des images et des cartes. Vous pouvez également choisir un modèle vierge pour concevoir des mises en page personnalisées.
• Add link (Ajouter un lien) : ajoutez un lien vers un autre site Web pour que les utilisateurs puissent accéder à une page Web connexe à partir du menu de l’application.
• Add folder (Ajouter un dossier) : ajoutez un dossier pour que les pages et les liens apparaissent dans un Widget de menu comme menu déroulant.
• Autres options : dans le cas d’applications de plusieurs pages, sélectionnez une page comme page d’accueil et masquez, si vous le souhaitez, des pages dans les widgets de menu que vous ajoutez à l’application. (Tous les menus de l’application comportent les mêmes pages, mais vous pouvez leur appliquer des styles différents.) Vous pouvez renommer, dupliquer et supprimer des pages, et les organiser de manière hiérarchique en faisant glisser une page vers une autre. Lorsque vous faites glisser la page, une ligne apparaît pour indiquer son emplacement entre les autres pages. Pour imbriquer la page sous une autre page, faites-la glisser sur la page de destination jusqu’à ce qu’elle soit encadrée. Vous pouvez également définir l’icône pour une page, un lien ou un dossier.

Paramètres

Les pages incluent les paramètres de configuration suivants :

• Icon (Icône) : modifiez l’icône pour distinguer les pages dans le panneau Pages (Pages). Sélectionnez des icônes dans les bibliothèques General (Général) et Arrows (Flèches), ou ajoutez des icônes à partir d’un fichier. Cliquez sur le bouton Delete (Supprimer) pour supprimer les icônes inutilisées de la bibliothèque My icons (Mes icônes).

  Remarque :

  Vous pouvez télécharger les formats d’image suivants : PNG, GIF, JPG, JPEG et BMP. Pour préserver une performance optimale, une limite de taille à 10 Mo est appliquée.

• Label (Étiquette) : modifiez le nom de la page. L’étiquette de cette page est également utilisée dans l’URL de l’expérience. Lorsque vous ajoutez une page, son étiquette suit une règle de numérotation continue. Par exemple, dupliquer la page 1 génère la page 2 ou la page 3 si la page 2 existe déjà.

  Remarque :

  Si vous changez le nom d’une page après la publication, les URL précédemment utilisées fonctionneront toujours.

• Open with window (Ouvrir avec fenêtre) : vous pouvez également opter pour l’affichage d’une fenêtre devant la page lors de l’ouverture de celle-ci. (Seules les fenêtres fixes peuvent s’ouvrir avec une page.)
• Content width (Largeur du contenu) (page déroulante uniquement)
  • Custom (Personnalisé) : définissez une largeur maximale pour la page.
  • Auto (Auto) : utilisez toute la largeur de la page.
• Animation : ajoutez une animation pour les widgets dans le corps de la page. (L’animation est appliquée aux widgets du niveau supérieur du contour.)
• Corps
  • Fill (Remplissage) : choisissez une couleur pour la page.
• Header (En-tête) : affichez l’en-tête sur la page sélectionnée. Les paramètres d'en-tête suivants sont appliqués à toutes les pages pour lesquelles un en-tête est activé :
  • Height (Hauteur) : modifiez la hauteur de l’en-tête en pixels.
  • Fill (Remplissage) : modifiez la couleur de l’en-tête.
  • Stays at the top of the page when scrolling (Reste en début de page quand) (page déroulante uniquement) : l’en-tête reste au début de la page quand les utilisateurs la font défiler.
• Footer (Pied de page) : affichez le pied de page sur la page sélectionnée. Les paramètres de pied de page suivants sont appliqués à toutes les pages pour lesquelles un pied de page est activé :
  • Height (Hauteur) : modifiez la hauteur du pied de page en pixels.
  • Fill (Remplissage) : modifiez la couleur du pied de page.
• Layout (Mise en page) (pages quadrillées et avec défilement uniquement)
  • Gap (Écart) : définissez l’écart (gouttières) en pixels entre les lignes ou éléments de ligne sur la page. Vous pouvez définir la couleur de l’écart pour les pages quadrillées.
  • Padding (Remplissage) : définissez le remplissage en pixels sur les quatre côtés de la page.
• Grid items (Éléments de grille) (pages quadrillées uniquement) : définissez le mode d’interaction des utilisateurs avec les éléments de grille au moment de l’exécution.
  • Allow resize (Autoriser le redimensionnement) : autorisez les utilisateurs à faire glisser les écarts pour redimensionner les éléments de grille.
  • Allow expansion (Autoriser le développement) : autorisez les utilisateurs à développer chaque élément de grille.

    Remarque :

    Vous pouvez outrepasser ce paramètre dans l’onglet des paramètres de style d’un widget. Cela est utile si vous voulez que les utilisateurs puissent développer certains éléments de grille mais pas d’autres.

Modèles

Les modèles possèdent des mises en page et thèmes prédéfinis que vous pouvez modifier en déverrouillant la mise en page. Le bouton Lock layout (Verrouiller la mise en page) permet de démarrer avec un modèle et de le modifier si nécessaire. Le déverrouillage de la mise en page révèle davantage d’options dans les panneaux de configuration et active le panneau Insert widget (Insérer un widget). Lorsque vous démarrez avec un modèle de la bibliothèque Default (Par défaut), cliquez sur le bouton Preview (Aperçu) pour afficher un exemple qui vous permettra de choisir un modèle en fonction de vos besoins. Vous pouvez choisir quasiment les mêmes modèles lorsque vous ajoutez davantage de pages à une application. (Vous pouvez uniquement sélectionner les modèles à plusieurs pages lors de la création de l’expérience Web.) Choisissez des modèles parmi les catégories suivantes :

• Modèles centrés sur les cartes des processus courants, conçus pour les applications standard plein écran. Ces modèles entrent dans les catégories suivantes :
  • Fixed (Fixe) : pour configurer ces modèles, sélectionnez une carte et ajoutez les widgets appropriés. Voici quelques exemples :
    • Le modèle Billboard (Tableau d’affichage) est une visionneuse de carte simple contenant une carte et un widget Widget Controller (Contrôleur de widget).
    • Le modèle Foldable (Pliable) est un modèle possédant une interface ouverte axée sur la carte, avec un en-tête et un widget de contrôleur.
    • Le modèle JewelryBox (Boîte à bijoux) est un modèle qui affiche les entités dans une liste combinée à une carte.
    • Le modèle Launchpad (Barre de lancement) est un modèle qui met l’accent sur la carte, avec un widget de contrôleur ancré en bas de la page.
    • Le modèle Tab (Onglet) contient un widget Views Navigation (Navigateur de vues) sur le côté gauche qui ouvre différentes sections.
  • Grid (Grille) : pour configurer ces modèles, qui se comportent de la même façon que les widgets Grille pleine page, ajoutez les widgets comme éléments de grille et faites-les glisser, ainsi que leurs bordures, pour les réorganiser et les redimensionner. Voici une liste des modèles de page quadrillée disponibles :
    • Avatarboard (Planche d’avatars) affiche plusieurs widgets Card (Fiche) avec des effets de survol et de retournement. Vous pouvez ajouter d’autres détails à l’arrière, notamment faire clignoter les fiches.
    • Le modèle de page quadrillée Checkerboard (Damier) comporte une carte au milieu et des widgets cartographiques associés tout autour.
    • Collage (Montage) affiche plusieurs widgets Image autour d’un widget Volet fixe.
    • Leaflet (Dépliant) comporte des widgets Texte et des widgets Image à l’intérieur de plusieurs widgets Colonne.
    • Mapflyer (Prospectus) utilise le widget Coordonnées avec le widget Carte pour afficher du texte dynamique et des informations de localisation.
    • Multiverse (Multivers) est conçu pour fonctionner avec plusieurs sources de données. Son widget Add Data (Ajouter des données) simplifie le processus d’importation de données à partir de plusieurs sources. Il permet aux utilisateurs de comparer et d’analyser plusieurs sources dans des cartes et des tables.
    • Le modèle Panorama comprend un widget Map (Carte) et deux widgets Chart (Diagramme). Les utilisateurs peuvent interagir avec les widgets Chart (Diagramme), List (Liste) et Filter (Filtrer) pour interpréter les données de la carte.

    Les pages de grille, telles que les widgets Grid (Grille), peuvent comporter des onglets, des colonnes de grille et des lignes de grille, qui apparaissent tous dans le contour du volet Page. Comme pour les autres widgets, vous pouvez sélectionner une ligne ou une colonne de grille dans le contour et cliquer sur le bouton More (Plus) pour afficher un menu d’opérations. Les lignes et les colonnes de grille comportent respectivement les boutons Distribute space horizontally (Répartir l’espace horizontalement) et Distribute space vertically (Répartir l’espace verticalement). Si une ligne ou une colonne compose un onglet, vous pouvez renommer la ligne ou la colonne. Le menu More (Plus) de chaque widget se trouvant dans un widget Grid (Grille) comprend les boutons Split horizontally (Fractionner horizontalement) et Split vertically (Fractionner verticalement).

  Remarque :

  La barre d’en-tête de certains modèles d’application plein écran est créée avec un widget Fixed Panel (Panneau fixe) et non à l’aide du paramètre Header (En-tête) de la page. Cela permet d’activer et de configurer le paramètre Header (En-tête) des autres pages si vous créez une application de plusieurs pages. Le contenu de l’en-tête et du pied de page, la mise en page et les paramètres sont utilisés par toutes les pages de l’application pour laquelle vous activez les paramètres Header (En-tête) ou Footer (Pied de page).

• Modèles de page déroulante dans des blocs ou des groupes d’écrans. Un conteneur Block (Bloc) est similaire à un widget Row (Ligne). Voici quelques exemples :
  • Le modèle Gallery (Bibliothèque) contient des images en miniature proéminentes pour mettre en évidence le contenu.
  • Le modèle General (Général) est un long modèle déroulant permettant de partager le contenu.
  • Le modèle Introduction est un modèle possédant une mise en page modulaire, qui met en avant des images et des titres.
  • Parallax (Parallaxe) est un modèle doté d’une image de bannière en haut de la page, suivi par un groupe d’écrans composés de panneaux déroulants.

• Modèles vierges pour les pages plein écran et les pages déroulantes que vous créez et concevez intégralement.
  • Le modèle Blank scrolling page (Page déroulante vierge) est un modèle vierge permettant de créer une conception personnalisée dans une page Web déroulante. Lorsque vous ajoutez des widgets à une page déroulante, ils sont ajoutés à un bloc par défaut. Cliquez sur le bouton Insert block (Insérer un bloc) pour sélectionner des mises en page de bloc courantes, ou cliquez sur le bouton Insert screen group (Insérer un groupe d’écrans) pour effectuer votre choix parmi plusieurs modèles d’écran.
  • Le modèle Blank fullscreen (Plein écran vide) est un modèle vierge permettant de créer une conception personnalisée dans une application plein écran.
  • Le modèle Blank grid (Grille vierge) est un modèle vierge qui se comporte de la même façon qu’un widget Grid (Grille) pleine page.