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 votre mise en page, déterminez la meilleure manière de présenter votre 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. Si vous prévoyez d’inclure un menu dans votre application pour 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 vue 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. Pour ajouter des pages à une application, cliquez sur le bouton Add page (Ajouter une page) et sélectionnez le modèle de page adapté à votre contenu et le flux attendu de votre application. Voici quelques exemples :

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

Conseil :

Utilisez le menu de navigation rapide en bas de la fenêtre du générateur pour sélectionner une page ou une fenêtre de votre expérience et accéder à ses paramètres. Ce menu permet également d’afficher un aperçu de la hiérarchie des pages et des types de fenêtres.

Applications de plusieurs pages

Le panneau Page (Page) contient les options suivantes, qui permettent de gérer les pages de votre 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 vos propres mises en page.
• Add link (Ajouter un lien) : ajoutez un lien vers un autre site Web pour que les utilisateurs finaux 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.

Réglages

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

  Remarque :

  Vous pouvez télécharger les formats d’image suivants : PNG, GIF, JPG, JPEG et BMP.

• Label (Étiquette) : modifiez le nom de la page.
• Open with window (Ouvrir avec fenêtre) : éventuellement, optez 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 de la vue Outline (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) (page déroulante uniquement)
  • Gap (Écart) : définissez l’écart (gouttières) en pixels entre les lignes de la page.
  • Padding (Remplissage) : définissez le remplissage en pixels sur les quatre côtés de la page.

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), vous pouvez cliquer 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 à votre application. (Vous pouvez uniquement sélectionner les modèles à plusieurs pages lors de la création initiale 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. Pour configurer ces modèles, sélectionnez une carte, ajoutez les widgets appropriés au contrôleur de widgets, configurez les widgets, enregistrez votre expérience et publiez. Voici quelques exemples :
  • Le modèle Foldable (Pliable) est un modèle possédant une interface ouverte et simple 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 créé pour afficher les entités dans une liste combinée à une carte.
  • Le modèle Launchpad (Launchpad) est un modèle conçu en mettant l’accent sur la carte, avec un widget de contrôleur ancré en bas de la page.
  • Le modèle Billboard (Billboard) est une visionneuse de carte simple contenant une carte et un widget de contrôleur.

  Remarque :

  La barre d’en-tête de certains des modèles d'application plein écran est créée avec un widget Fixed Panel (Panneau fixe) et non à l’aide de l’en-tête des paramètres de page. Cela permet d’activer et de configurer l’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 l’en-tête ou le pied de page.

• Modèles de page déroulante dans des blocs ou des groupes d’écrans. Un bloc est similaire à une Ligne. Voici quelques exemples :
  • Le modèle General (Général) est un long modèle déroulant permettant de partager votre contenu.
  • Le modèle Introduction (Introduction) est un modèle possédant une mise en page modulaire, conçu pour mettre en avant vos images et titres.
  • Le modèle Gallery (Bibliothèque) est un modèle conçu avec des images en miniature proéminentes pour mettre en évidence votre contenu.
  • Le modèle Parallax (Parallaxe) est un modèle doté d’une image de bannière en haut de la page et qui se termine 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 votre propre conception 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 Insert screen group (Insérer un groupe d’écrans) pour effectuer votre choix parmi plusieurs modèles d’écran.
  • Le modèle Blank fullscreen app (Application plein écran vierge) est un modèle vierge permettant de créer votre propre conception dans une application plein écran.