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.

Lorsque vous ajoutez des widgets à une page, ils sont répertoriés dans le nœud Body (Corp) de la vue Outline (Contour) du panneau Page (Page). Le contour pouvant faire l’objet de recherches indique la hiérarchie 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) 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.

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 : pour les applications de plusieurs pages, sélectionnez une page comme page d’accueil et masquez éventuellement les pages des widgets de menu que vous ajoutez à l’application. (Tous les menus de l’application incluent les mêmes pages, mais vous pouvez choisir des styles différents pour les menus.) Vous pouvez renommer, dupliquer et supprimer des pages et les organiser de manière hiérarchique en faisant glisser une page sur 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.

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).
  • Label (Étiquette) : modifiez le nom de la 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.
  • Body (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, 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 un modèle parmi ces mêmes modèles lorsque vous ajoutez plusieurs pages à votre application. Sélectionnez des modèles dans 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.
    • 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. Un bloc est similaire à une Ligne.
    • 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.
  • 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 choisir une mise en page parmi certaines mises en page en blocs courantes.
    • 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.