UX Design mit Axure 8 Grundkurs

Variablen verwenden und Texte anpassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie, wie Variablen in Axure angelegt und genutzt werden. Außerdem lernen Sie, wie man Textinhalte in Axure ändern kann.
06:12

Transkript

In diesem Video möchte ich Ihnen zeigen, wie Sie Variablen in Axure nutzen können, um Inhalte über einen längeren Zeitraum oder über mehrere Seiten hinweg zu speichern. Dazu erweitere ich das "login" Beispiel. Bei einer korrekten Eingabe soll der Benutzername in einer Variable gespeichert werden und oben in dem Header auf der Webseite angezeigt werden. Um den Nuternamen zu speichern, benötigen wir eine Variable. Variablen legen Sie in Axure unter ProjectGlobal Variables an. Hier in dem Dialog können Sie mit dem Plussymbol eine neue Variable anlegen. Ich nenne die variable "UserName" und schließe das Fenster. In variablen können Sie zum Beispiel Werte aus Textfeldern oder auch beliebige andere Werte speichern. Sie wollen Variablen einsetzen, wenn Sie Daten über mehrere Seiten hinweg transportieren wollen. Wie zum Beispiel jetzt den Nutzernamen bei einer korrekten Eingabe. Ich ergänze also den OnClick-Event, und zwar den Fall, dass das Login korrekt ist und füge eine neue Aktion "Set Variable Value" hinzu. Ich wähle den Nutzernamen aus und speichere den Wert meines Witgets "Text Field". Wie Sie sehen, können Sie unterschiedliche Werte in Variablen speichern. Sie können Werte von Hand angeben, andere Variablenwerte oder Texte von anderen Elementen oder auch den Namen eines dynamischen Panels. In unserem Fall setze ich den Variablenwert von UserName auf den Text des Login-Feldes. Schauen wir uns das Ergebnis schon einmal im Preview-Mode an. Mit dem dritten Reiter des Preview-Modes der Konsole bekommen Sie einen Überblick darüber, was unter der Haube Ihres Prototypen vor sich geht. Hier sehen Sie zum Beispiel die definierten Variablen: OnLoadVariable, UserName. OnLoadVariable ist übrigens eine Variable, die in jedem Prototypen initial angelegt ist von Axure. Außerdem sehen Sie hier die verschiedenen Events, die auf Ihrer Seite ausgelöst werden. Öffnen wir nun das Login-Feld und geben einmal falsche Daten ein. Wie Sie sehen, die Fehlermeldung wird dargestellt und unsere Variable noch nicht gesetzt. Gebe ich aber die korrekten Daten ein, speichert Axure den Namen "admin" in der Variable "UserName". Soweit so gut. Im zweiten Schritt möchte ich nun diesen Namen zum Beispiel hier oben anzeigen. Dazu öffne ich den Header und füge ein Label hinzu. Außerdem passe ich die Größe des Elements an, lösche seinen Inhalt und vergebe einen eindeutigen Namen. Und jetzt muss ich nur noch dem Label den Variablenwert des Nutzernamens zuweisen. Dazu nutze ich den OnPageLoad-Event des Masters. Master sind die einzigen Elemente, die wie Seiten in Axure ein OnPageLoad-Event besitzen. das liegt daran, dass, obwohl sie auf mehreren Seiten vorkommen können, einmalig geladen werden. Im OnPageLoad-Event nutze ich die "Set Text" Aktion, um das Label dem Wert der Variable "UserName" zuzuweisen. Wie Sie sehen, wenn der Master geladen wird, setzen wir den Namen des [unverständlich] Displays auf den Namen des Nutzernamens. Wenn also ein Nutzer das Login korrekt eingibt, wird der Name in der Variable gespeichert und bei dem nächsten Aufruf des Master wird dieser Wert gesetzt. Schauen wir es uns im Preview Mode einmal an. Wie Sie sehen, ist der Nutzername in der Variable gesetzt, und bei einem Seitenwechsel wird der UserName angezeigt. Das einzige was ich noch ergänzen muss, ist, dass der Nutzername auch nach der korrekten Eingabe der Nutzerdaten aktualisiert wird. Dazu ergänze ich die Aktion einfach in meinem Login erfolgreich. Zusätzlich, damit der Wert auch aktualisiert wird, füge ich noch eine Reload-Aktion hinzu, bei der die aktuelle Seite nach dem Schließen neu geladen wird, weil erst dann, werden die Variablenänderungen sichtbar. Wie Sie sehen, erscheint der Nutzername jetzt oben rechts in der Zeile. In diesem Video haben Sie gesehen, wie Sie Variablen anlegen, wie Sie mit Ihnen arbeiten. Sie können über die Aktion "Set Variable Value" Werte von Variablen setzten, und andersrum, Texte zum Beispiel aus Variablen auslesen und in Witgets speichern. Variablen sind dafür geeignet Daten über mehrere Seiten hinweg zu kommunizieren oder über einem längeren Zeitraum aufzubewahren Ein typischer Kandidat ist zum Beispiel der Nutzername bei einem Login.

UX Design mit Axure 8 Grundkurs

Lernen Sie mit Axure 8 Apps und Webseiten zu konzipieren und prototypisch umzusetzen, ganz ohne Programmiervorkenntnisse.

3 Std. 32 min (53 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Axure RP Pro Axure RP Pro 8
Exklusiv für Abo-Kunden
Erscheinungsdatum:04.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!