Variablen
Mit Variables können Sie Ihre wireframes auf die nächste Stufe bringen und lebensechte Projekte erstellen.
Sie können Variablen verwenden, um Informationen wie Text, Bilder oder Daten zu speichern und über Bildschirme hinweg in Ihrem Projekt zu übertragen. Sie können zum Beispiel einen Namen, den Sie in ein Textfeld eingegeben haben, in einem Textelement auf einem anderen Bildschirm anzeigen.
Erstellen Sie eine Variable
Sehen Sie sich die Palette Variablen an und klicken Sie auf die Schaltfläche ‚+‘, um eine neue Variable in Ihrem Projekt zu erstellen. Wenn Sie die Variablenpalette nicht sehen, vergewissern Sie sich, dass sie im Menü Palette aktiviert ist.
Wenn Sie eine neue Variable erstellen, können Sie ihren Standardwert festlegen. In den meisten Fällen werden Sie diesen Wert leer lassen wollen.
Definieren Sie den Wert einer Variablen
Um den Wert einer Variablen während der Simulation zu ändern, müssen Sie Ereignisse verwenden. Sie können dies auf zwei Arten tun:
- Ziehen und ablegen: Ziehen Sie das Element, das Sie der Variable als Wert zuweisen möchten, auf die Palette Variable. Ziehen Sie zum Beispiel ein Eingabe-Textfeld auf die Palette Variablen.
Dadurch wird automatisch ein Ereignis „On Page Unload + Set Value“ erzeugt, das den Inhalt des Eingabefeldes in die Variable überträgt, wenn Sie zu einem anderen Bildschirm wechseln. - Die Ereignispalette: Mit der Palette Ereignisse können Sie auch manuell die Ereignisse erstellen, die einer Variable einen Wert geben. Dies ist nützlich, wenn Sie den Wert einer Variablen auf andere Weise definieren möchten, z.B. nach dem Fokussieren aus einem Eingabefeld oder dem Klicken auf eine Schaltfläche.
- Wählen Sie das Element aus, dem Sie einen Wert für die Variable zuweisen möchten. Nehmen Sie als Beispiel ein Eingabe-Textfeld.
- Gehen Sie zur Palette Ereignisse und klicken Sie auf ‚Ereignis hinzufügen‘.
- Sie sehen ein Dropdown-Menü mit der Bezeichnung ‚Auslöser wählen‘. Klicken Sie darauf und wählen Sie einen Auslöser, der das Ereignis starten soll. Wählen Sie zum Beispiel den Auslöser On Focus Out.
- Wählen Sie Wert auf ein Element setzen aus der Dropdown-Liste ‚Aktion wählen‘.
- Daraufhin wird eine Vorschau des Canvas mit zwei Optionsfeldern angezeigt – „Elemente“ und „Variablen“. Klicken Sie auf das Optionsfeld ‚Variablen‘ und wählen Sie eine Variable aus der Liste, die Sie zuvor erstellt haben.
- Unten finden Sie die Stelle, an der Sie den Wert für die Variable festlegen. Klicken Sie auf das Optionsfeld ‚Berechnet‘ und dann auf den Textlink ‚Ausdruck hinzufügen‘.
- Sie sehen nun den Value Expression Builder, in dem Sie festlegen können, welchen Wert Sie der Variable zuweisen. Ziehen Sie das Eingabetextfeld aus der Canvas-Vorschau per Drag & Drop in das freie Feld des Ausdrucks, auf dem „Klicken Sie zum Bearbeiten oder ziehen Sie eine Komponente per Drag & Drop“ steht.
- Klicken Sie auf ‚OK‘, um die Erstellung des Ausdrucks und des Ereignisses zu beenden.
Dieses Ereignis überträgt die in das Eingabefeld eingegebenen Daten in die Variable, wenn Sie aus dem Eingabefeld klicken.
Einem Element den Wert einer Variablen geben
Nachdem Sie nun einen Wert für die Variable definiert haben, können Sie den Wert der Variable in ein Element auf einem anderen Bildschirm verschieben.
Gehen Sie zu einem anderen Bildschirm in Ihrem Projekt und wählen Sie das Element aus, das den Wert der Variablen anzeigen soll. Sie können zum Beispiel ein Text T-Element auswählen, das Sie auf dem Canvas hinzugefügt haben.
Sie können diesem Textelement auf zwei Arten den Wert der Variablen geben:
- Ziehen und ablegen: Ziehen Sie die Variable aus der Variablenpalette auf das Textelement auf der Leinwand.. Dadurch wird automatisch ein Ereignis On Page Load + Set Value erzeugt, das den in der Variable gespeicherten Wert auf das Textelement auf diesem Bildschirm überträgt.
- Die Ereignispalette: Sie möchten vielleicht, dass ein Element den Wert der Variable anzeigt, nachdem Sie zuerst etwas anderes auf dem Bildschirm getan haben, z.B. auf einen Text getippt haben.
- Wählen Sie das Element, das den Wert der Variable anzeigen soll. Wählen Sie zum Beispiel ein Textelement.
- Gehen Sie zur Palette „Ereignisse“ und klicken Sie auf „Ereignis hinzufügen“.
- Wählen Sie einen On Page Load-Auslöser und eine Aktion Wert setzen für das Ereignis.
- Sie sehen eine Canvas-Vorschau, in der Sie das Textelement als Ziel der Aktion auswählen können.
- Klicken Sie unten auf das Optionsfeld ‚Berechnet‘ und den Textlink ‚Ausdruck hinzufügen‘, um den Value Expression Builder zu öffnen.
- Klicken Sie in der Canvas-Vorschau auf die Registerkarte ‚Variablen‘ und ziehen Sie die Variable aus der Liste auf den freien Platz im Ausdruck.
- Klicken Sie auf ‚OK‘, um die Erstellung des Ausdrucks und des Ereignisses zu beenden.
Dieses Ereignis kopiert den Wert der Variable und fügt ihn in das Textelement ein, wenn Sie während der Simulation darauf klicken.
Sie können so viele verschiedene Arten von Projekten mit Variablen erstellen – lesen Sie weiter im nächsten Artikel, um weitere Beispiele zu sehen, wie Sie sie verwenden können, um Informationen zwischen Bildschirmen auszutauschen, bedingte Inhalte zu definieren und automatische Countdown-Timer zu erstellen.
How-tos: Lernen Sie, wie man gängige Anwendungsfälle designt
Mit Variablen können Sie Informationen von Bildschirm zu Bildschirm übertragen und erweiterte Interaktionen erstellen. Sehen Sie sich diese Übungen an, um zu lernen, wie man sie verwendet.
Informationen zwischen Bildschirmen austauschen
In dieser Übung erstellen Sie einen Anmeldebildschirm für eine E-Mail-Adresse und sehen, wie diese E-Mail auf einem Bestätigungsbildschirm angezeigt wird.
Das Beispiel designen
- Erstellen Sie ein Projekt mit zwei Bildschirmen. Gehen Sie zu Bildschirm 1 und designen Sie ein Anmeldeformular mit einem Eingabetextfeld F und einer Schaltfläche B.
- Fügen Sie ein Textelement zu Bildschirm 2 hinzu und gestalten Sie es wie gewünscht. In diesem Textelement wird die E-Mail-Adresse angezeigt, die Sie auf dem vorherigen Bildschirm eingegeben haben.
- Gehen Sie zur Palette Variablen und erstellen Sie eine neue Variable, indem Sie auf die Schaltfläche ‚+‘ klicken. Nennen Sie die Variable „Email“ und lassen Sie ihren Standardwert leer.
Erstellen Sie die Ereignisse
- Gehen Sie zurück zu Bildschirm 1 und wählen Sie das Eingabefeld aus. Ziehen Sie es auf die Variable „E-Mail“ in der Palette Variablen.
Dies erzeugt ein Ereignis On Page Unload + Set Value, das der Variablen den Wert gibt, den Sie in das Eingabefeld eingeben, wenn Sie vom Bildschirm weg navigieren. - Markieren Sie die Schaltfläche unter dem Eingabetextfeld und ziehen Sie sie auf Bildschirm 2 in der Palette Bildschirme, um eine Verknüpfung von der Schaltfläche zu Bildschirm 2 herzustellen.
- Gehen Sie zu Bildschirm 2 und ziehen Sie die Variable „E-Mail“ auf das Textelement auf dem Bildschirm.
Dadurch wird ein Ereignis „On Page Load + Set Value“ erzeugt und das Textelement erhält den Wert der Variablen, wenn der Bildschirm zum ersten Mal geladen wird.
Klicken Sie auf die Schaltfläche ‚Play‘, um Ihr Projekt zu simulieren. Geben Sie eine E-Mail-Adresse in das Anmeldeformular ein und klicken Sie auf die Schaltfläche, um zu Bildschirm 2 zu gelangen. Sie sehen die eingegebene E-Mail-Adresse auf dem Textelement.
Bedingten Inhalt anzeigen oder ausblenden
Sie können Variablen mit Bedingungen verwenden, um die Beziehung zwischen Elementen auf verschiedenen Bildschirmen zu bestimmen. In diesem Beispiel lernen Sie, wie Sie ein Anmeldeformular erstellen, das je nach Eingabe mehr Inhalt auf einem anderen Bildschirm anzeigt.
Das Beispiel designen
- Erstellen Sie ein Projekt mit zwei Bildschirmen. Erstellen Sie auf Bildschirm 1 ein Anmeldeformular mit einem Eingabetextfeld und einer Schaltfläche.
- Gehen Sie zu Bildschirm 2 und designen Sie ihn wie gewünscht. Wählen Sie einige Elemente auf dem Bildschirm aus und gruppieren Sie sie mit Command / Control + G.
- Markieren Sie diese Gruppe in der Eigenschaften-Palette als ausgeblendet.
- Erstellen Sie eine neue Variable mit dem Namen „User“ und lassen Sie ihren Standardwert leer.
Erstellen Sie die Ereignisse
- Gehen Sie zurück zu Bildschirm 1 und wählen Sie das Eingabefeld im Anmeldeformular. Ziehen Sie dieses Eingabetextfeld auf die Variable „User“ in der Variablenpalette, wodurch ein Ereignis On Page Unload + Set Value erzeugt wird.
- Wählen Sie die Schaltfläche auf diesem Bildschirm aus und ziehen Sie sie auf Bildschirm 2 in der Palette Bildschirme, wodurch eine Verbindung zwischen den beiden Bildschirmen hergestellt wird.
- Gehen Sie zu Bildschirm 2 und doppelklicken Sie auf den Canvas, um den Basisbildschirm auszuwählen.
- Sehen Sie sich die Palette Ereignisse an und klicken Sie auf ‚Ereignis hinzufügen‘. Erstellen Sie ein Ereignis On Page Load + Show mit der Gruppe, die Sie zuvor erstellt haben. Klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses zu beenden.
- Klicken Sie auf den Textlink ‚Bedingung hinzufügen‘ über dem soeben erstellten Ereignis, wodurch sich der Conditional Expression Builder öffnet.
- Folgen Sie diesen Schritten, um die Bedingung zu erstellen:
- a. Klicken Sie in der Canvas-Vorschau auf die Registerkarte „Variablen“ und ziehen Sie die Variable „User“ auf den freien Platz im Ausdruck.
- b. Ziehen Sie eine Logikfunktion Gleich (=) neben die Variable.
- c. Es erscheint ein neues freies Feld, in das Sie „Admin“ eingeben können.
- d. Klicken Sie auf ‚OK‘, um die Erstellung der Bedingung zu beenden.
Klicken Sie auf die Schaltfläche ‚Abspielen‘, um Ihr Projekt zu simulieren. Geben Sie „Admin“ in das Eingabefeld ein, klicken Sie auf die Schaltfläche, um zu Bildschirm 2 zu gelangen, und Sie sehen, wie der gesamte Inhalt auf dem Bildschirm angezeigt wird.
Simulieren Sie das Projekt erneut und geben Sie einen anderen Wert in das Eingabefeld ein. Klicken Sie auf die Schaltfläche, um zu Bildschirm 2 zu gelangen. Diesmal sehen Sie weniger Elemente auf dem Bildschirm.
Wiederkehrende Ereignisse
In dieser Übung lernen Sie, wie Sie den Auslöser On Variable Change verwenden, mit dem Sie automatisierte Ereignisse wie einen Countdown-Timer erstellen können.
Das Beispiel designen
- Fügen Sie dem Canvas ein Textelement und eine Schaltfläche hinzu. Geben Sie dem Textelement den Wert „10“ und beschriften Sie die Schaltfläche mit „Start“.
- Erstellen Sie eine neue Variable mit dem Namen „Countdown“ und lassen Sie ihren Standardwert leer.
Erstellen Sie die Ereignisse
- Wählen Sie die Schaltfläche „Start“ auf dem Canvas und erstellen Sie ein Ereignis „On Tap + Set Value“. Wählen Sie die Variable „Countdown“ als Ziel des Ereignisses und geben Sie „11“ als Wert für die Variable ein.
- Klicken Sie auf die Schaltfläche ‚+‘ am oberen Rand der Palette, um eine weitere Interaktion hinzuzufügen.
- Wählen Sie einen Auslöser bei Variablenänderung. Es wird ein Dropdown-Menü angezeigt, in dem Sie die Variable „Countdown“ auswählen können.
- Wählen Sie eine Aktion Pause und ändern Sie die Dauer auf 1000ms (1 Sekunde). Klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses abzuschließen.
- Sehen Sie sich die soeben erstellte Aktion in der Palette Ereignisse an und klicken Sie auf die Schaltfläche ‚+‘, um eine weitere Aktion hinzuzufügen.
- Wählen Sie eine On Variable Change mit der Variable „Countdown“. Wählen Sie eine Aktion Wert setzen und tippen Sie auf das Optionsfeld ‚Variablen‘, um die Variable „Countdown“ auszuwählen.
- Klicken Sie für den Wert auf das Optionsfeld ‚Berechnet‘ und den Textlink ‚Ausdruck hinzufügen‘, wodurch sich der Value Expression Builder öffnet.
- Folgen Sie diesen Schritten, um den Ausdruck zu erstellen:
- a. Klicken Sie in der Canvas-Vorschau auf die Registerkarte „Variablen“ und ziehen Sie die Variable „Countdown“ auf den freien Platz im Ausdruck.
- b. Setzen Sie eine Minus (-) Zahlenfunktion daneben.
- c. Es erscheint ein neues Feld im Ausdruck, in das Sie eine „1“ eingeben können.
- d. Klicken Sie auf ‚OK‘, um die Erstellung des Ausdrucks und des Ereignisses zu beenden.
- Klicken Sie auf die Schaltfläche ‚+‘, um eine weitere Aktion hinzuzufügen – Bei Variablenänderung + Wert setzen. Wählen Sie das Textelement als Ziel der Aktion und klicken Sie auf die Optionsschaltfläche ‚Berechnet‘ und den Textlink ‚Ausdruck hinzufügen‘.
- Ziehen Sie die Variable „Countdown“ auf den freien Platz im Ausdruck und klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses abzuschließen.
- Klicken Sie auf den Textlink ‚Bedingung hinzufügen‘ über Ihren Ereignissen bei Variablenänderung. Ziehen Sie die „Countdown“-Variable in das freie Feld des Ausdrucks, gefolgt von einer Logikfunktion Größer oder Gleich (≥). Geben Sie schließlich „1“ in das erscheinende freie Feld ein und klicken Sie auf ‚OK‘.
So sollte Ihre Events-Palette aussehen:
In diesem Beispiel wird der Wert der Variable „Countdown“ geändert, wenn Sie auf die Schaltfläche „Start“ klicken. Dadurch werden die Aktionen bei Variablenänderung ausgelöst – eine Sekunde Pause und dann Subtraktion von 1 von der Variable. Mit der letzten Aktion wird der Wert der Variable an das Textelement übertragen.
Da das zweite Ereignis „Wert setzen“ die Variable selbst betrifft (indem es 1 subtrahiert), werden die Ereignisse erneut ausgelöst, bis der Wert der Variable kleiner als 1 ist.