Ecrans

Préparez les écrans de votre application et ajoutez une action de changement d'écran pour passer d'un écran à l'autre.

L’écran est le support de base de votre application : on peut l'assimiler à une page. 

Vous pouvez rajouter tout type de contenu dans votre écran. Il n'y a pas de nombre maximum d'écrans pour votre application.

⚠️ Attention à ne pas confondre écran et état : un écran est une page, alors qu'un état est une disposition particulière de cette page. Les états sont principalement utilisés pour créer des animations à l'aide de transitions

Créer un écran

Lorsque vous créez un nouveau projet, un écran est automatiquement créé.

Pour ajouter un nouvel écran, rendez-vous dans la fenêtre  Ecrans à gauche. 

Sélectionnez l'écran (niveau du dessus) et cliquez sur le bouton  + AJOUTER ECRAN . Si vous sélectionnez le niveau du dessous (l'état), ce bouton devient + AJOUTER ETAT ... pour ajouter un nouvel état !

Le nouvel écran comprend automatiquement un état.

💡 Le nombre indiqué à côté du nom de l'écran indique le nombre d’états qu'il contient. En effectuant un double-clic sur le nom, vous pouvez le modifier - très utile et recommandé pour se repérer au sein de votre projet !

Changer d'écran

Par défaut, vos écrans sont indépendants. C'est à vous de créer des actions pour passer d'un écran à un autre ou activer le mode magazine pour swiper horizontalement d'écran en écran.

Pour créer une action pour changer d'écran : 

  1. Sélectionnez l'objet déclencheur, par exemple un bouton ou une icône. 
  2. Cliquez sur Actions et sur + AJOUTER ACTION. 
  3. Choisissez l' événement déclencheur (par exemple le Simple clic) et dans la liste des actions : Changer d'écran. 

Vous avez le choix entre : 

  • Aller à l'écran sélectionné : choisissez parmi tous les écrans de votre application. Vous pouvez spécifier un Etat de l'écran et ajouter un Délai. 
  • Aller à l'écran précédent / suivant :  la notion de "précédent" et "suivant" dépend de la position des écrans dans la liste. Vous pouvez ajouter un Délai, un Intervalle (par exemple, passer de 2 en 2) ou activer le mode Boucle.

💡 Si vous voulez que l'intégralité de l'écran soit cliquable, nous vous recommandons de placer un composant Zone interactive au-dessus de votre écran et d'associer l'action à ce composant.

Animer un écran

En termes d'expérience utilisateur, chaque écran est indépendant : les éléments se chargent à chaque affichage. Si vous souhaitez créer des effets de transitions, vous pouvez utiliser l'avant-plan/arrière-plan ou bien créer des états

Pour créer un nouvel état, sélectionnez l'état courant et cliquez sur le bouton + Ajouter un état pour créer un état vierge (sans transition) ou sur le bouton orange pour créer un état lié.

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous