Produktidentifikations-Popup erstellen
In diesem Abschnitt fügen Sie ein weiteres Popup-Fenster für die Produktidentifikation hinzu.
1. Fügen Sie in der Ansicht Identification ein weiteres Popup-Widget zur Canvas hinzu, und konfigurieren Sie die folgenden Eigenschaften:
◦ Klasse – Geben Sie full-page-popup ein.
◦ Breite (px, %, vh, em) – Geben Sie 100% ein.
◦ Höhe (px, %, vh, em) – Geben Sie 100% ein.
◦ Sichtbar – Aktivieren Sie das Kontrollkästchen.
◦ Studio ID – Geben Sie productIdentifiedPopup ein.
2. Klicken Sie in der Projektstruktur auf scan-1, um dessen Eigenschaften anzuzeigen. Ziehen Sie das Ereignis Erworbener Wert auf landingPagePopup in der Projektstruktur, und legen Sie es ab. Wählen Sie im Fenster Ereignis-Handler auswählen die Option Popup anzeigen aus, und klicken Sie auf Binden.
3. Fügen Sie dem neuen Popup-Widget als Nächstes ein Raster-Layout-Widget hinzu, um dem Layout mehr Struktur zu geben.
4. Aktivieren Sie bei ausgewähltem Raster-Layout-Widget das Kontrollkästchen Zeilen teilen verfügbare Höhe gleichmäßig im Fensterbereich Details aus.
5. Fügen Sie dem Raster zwei weitere Zeilen hinzu, indem Sie zweimal auf Zeile hinzufügen klicken (unter Rasteraktionen im Fensterbereich Details).
6. Lassen Sie die erste Zeile leer.
7. Wählen Sie die zweite Zeile aus, und machen Sie folgende Angaben:
◦ Legen Sie Flexible Richtung auf Spalte fest.
◦ Legen Sie Inhalt ausrichten auf Zentriert fest.
◦ Legen Sie Elemente ausrichten auf Zentriert fest.
◦ Fügen Sie ein Widget Beschriftung hinzu, und konfigurieren Sie die folgenden Eigenschaften:
▪ Text – Geben Sie Product identified ein.
▪ Klasse – Geben Sie simple-label title-label ein.
▪ Studio ID – Geben Sie productIdentifiedLabel ein.
◦ Fügen Sie ein zweites Widget Beschriftung hinzu, und konfigurieren Sie die folgenden Eigenschaften:
▪ Text – Geben Sie *** ein.
▪ Klasse – Geben Sie simple-label sub-title-label ein.
▪ Studio ID – Geben Sie productIDLabel ein.
◦ Klicken Sie in der Projektstruktur auf scan-1, um dessen Eigenschaften anzuzeigen. Ziehen Sie die Eigenschaft Gescannter Wert auf productIDLabel in der Projektstruktur, und legen Sie sie dort ab. Wählen Sie im Fenster Bindendes Ziel auswählen die Option Text aus, und klicken Sie auf Binden.
8. Wählen Sie die dritte Zeile aus, und machen Sie folgende Angaben:
◦ Legen Sie Flexible Richtung auf Zeile fest.
◦ Legen Sie Inhalt ausrichten auf Zentriert fest.
◦ Legen Sie Elemente ausrichten auf Ende fest.
◦ Legen Sie Abstand (z.B. 10px 10px 20px 10px) auf 20px fest.
9. Fügen Sie als Nächstes ein Widget Schaltfläche in der dritten Zeile hinzu, und aktualisieren Sie die folgenden Eigenschaften:
◦ Text – Geben Sie Show the product ein.
◦ Klasse – Geben Sie long-button--green ein.
◦ Studio ID – Geben Sie showProductButton ein.
10. Ziehen Sie das Ereignis Klicken der neuen Schaltfläche in die Ansicht Visualization, und legen Sie es dort ab. Wählen Sie im Fenster Ereignis-Handler auswählen die Option Navigieren aus, und klicken Sie auf Binden.
11. Erstellen Sie als Nächstes einen Fluss, um das Erlebnis neu zu starten.