Créer la page d'accueil
Pour faciliter la navigation, vous allez ajouter des fenêtres contextuelles (ou pop-ups) dans cette section. Les pop-ups permettent de mieux structurer l'interface utilisateur pour améliorer l'expérience utilisateur.
1. Définissez la CSS suivante pour obtenir un pop-up pleine page dans > :
.full-page-popup {
background-color: $PTC-dark-grey;
}
Les styles de votre application doivent maintenant ressembler à ce qui suit :
2. Accédez à la vue Identification.
3. Ajoutez un widget Pop-up au canevas, puis configurez les propriétés suivantes :
◦ Classe : saisissez full-page-popup.
◦ Largeur (px, %, vh, em) : saisissez 100 %.
◦ Hauteur (px, %, vh, em) : saisissez 100 %.
◦ Visible : sélectionnez la case à cocher.
◦ ID Studio : saisissez landingPagePopup.
4. Créez les liaisons suivantes :
◦ Sélectionnez scan-1 dans l'arborescence du projet. Faites glisser l'événement Annulation par l'utilisateur sur landingPagePopup dans l'arborescence du projet. Sélectionnez Afficher le pop-up dans la fenêtre Sélectionner une cible de liaison, puis cliquez sur Lier.
◦ Sélectionnez le bouton Start Scanning dans l'arborescence du projet. Faites glisser et déposez l'événement Clic du bouton sur landingPagePopup dans l'arborescence du projet. Sélectionnez Masquer le pop-up dans la fenêtre Sélectionner une cible de liaison, puis cliquez sur Lier.
5. Ensuite, ajoutez un widget Disposition de grille au widget Pop-up pour structurer davantage la mise en page.
6. Lorsque le widget Disposition de grille est sélectionné, sélectionnez la case à cocher Division uniforme de la hauteur des cellules dans le volet DETAILS.
7. Ajoutez deux lignes supplémentaires à la grille en cliquant deux fois sur Ajouter une ligne (sous ACTIONS DE GRILLE dans le volet DETAILS).
8. Laissez la première ligne vide.
9. Sélectionnez la deuxième ligne et complétez les informations suivantes :
◦ Direction flexible : sélectionnez Colonne.
◦ Justifier le contenu : sélectionnez Centre.
◦ Aligner les éléments : sélectionnez Centre.
◦ Ajoutez un widget Etiquette, puis configurez les propriétés suivantes :
▪ Texte : saisissez Welcome to the.
▪ Classe : saisissez simple-label title-label.
▪ ID Studio : saisissez welcomeLabel.
◦ Ajoutez un second widget Etiquette, puis configurez les propriétés suivantes :
▪ Texte : saisissez Displaying Dynamic Assets 101 sample.
▪ Classe : saisissez simple-label sub-title-label.
▪ ID Studio : saisissez experienceTitleLabel.
10. Sélectionnez la troisième ligne et complétez les informations suivantes :
◦ Définissez Direction flexible sur Ligne.
◦ Définissez Justifier le contenu sur Centre.
◦ Définissez Aligner les éléments surFin.
◦ Définissez Remplissage (par ex., 10px 10px 20px 10px) sur 20px.
11. Ensuite, déplacez le bouton Start scanning vers la troisième ligne et mettez à jour les propriétés suivantes :
◦ Texte : saisissez Scan the QR code.
◦ Classe : saisissez long-button--green.
◦ ID Studio : saisissez startScanButton.
12. Maintenant que vous disposez d'une page d'accueil, vous allez ajouter un pop-up d'identification du produit.