| In einem Dynamic Panel kann man Inhalte separat voneinander in States platzieren. Durch die Steuerung der Sichtbarkeit von Panels mit der Hidden-Option, können verschiedene Interaktionen gestaltet werden. In diesem Tutorial sollen Login-Eingabedaten kontrolliert werden und bei falscher Eingabe soll eine Fehlermeldung erscheinen. |
- Axure Version: 8.0
- Level: Advanced
- Dauer: 30 min
- Themen: Axure Advanced, Dynamic Panel, Fehlermeldung, Login, Konditionale Logik, Validierung
|
Preview:
Das Konzept
Die Login-Box ist ein Dynamic Panel mit zwei States. Im State login werden das gesamte Login-Fenster und die Fehlermeldung platziert. Im State eingeloggt wird das erfolgreiche Login bestätigt. Die Fehlermeldung wird zunächst durch die Hidden-Option versteckt. Bei Klick auf den Login-Button, werden die Eingaben durch bedingte Logik kontrolliert. Bei richtiger Eingabe wechselt das Panel mit Set Panel State in den State ‚eingeloggt‘. Bei falschen Login-Daten bleibt man im Login-Fenster und es erscheint mit Show Panel die Fehlermeldung.
1 Vorbereitung
Im ersten Schritt werden alle benötigten Elemente auf der Bühne angelegt und platziert. Ziehe direkt unterhalb der Hauptnavigation ein Dynamic Panel Widget und nenne es Login Box. Füge dem Panel zwei States hinzu und nenne diese ‚login‘ und ‚eingeloggt‘.
Dynamic Panel mit zwei States
2 States mit Inhalten füllen
Öffne das Dynamic Panel im ersten State ‚login‘ und erstelle ein Login-Fenster. Füge mit Text Field die Eingabefelder und mit Label die Titel hinzu. Bennene die beiden Eingabefelder unter Text Field Name.
Ein Login Button sollte ebenso platziert werden.
Panel ‚Login-Box‘ Benennung der Eingabefelder
Panel ‚Login-Box‘ Benennung der Eingabefelder
Erstelle anschließend eine Fehlermeldung mit Label und Image und markiere alle Elemente hiervon:
Panel ‚Login-Box‘ Gestaltung der Fehlermeldung
Konvertiere die markierte Fehlermeldung mit Rechtsklick > Convert to Dynamic Panel ebenso in ein Dynamic Panel und nenne dieses Panel ‚Fehler: Eingabefehler‘.
Panel ‚Fehler: Eingabefehler‘
Verberge das Panel ‚Fehler: Eingabefehler‘ nun mit Hidden in der Menüleiste:
Fehlermeldung mit Hidden verbergen
Nun wird noch der Inhalt des zweiten States ‚eingeloggt‘ platziert. Schreibe einen Satz mit Label und füge einen Logut-Button hinzu.
Logout-Button hinzufügen
3 Interaktion erstellen
Bei OnClick auf den Login-Button im ersten State soll nun die Eingabe kontrolliert werden. Wenn der Nutzername ‚eparo‚ und das Passwort ‚test‚ ist, soll das Panel in den State ‚eingeloggt‘ wechseln.
Markiere hierfür den Login-Button und vergebe ihm eine OnClick-Aktionen. Zunächst werden über Edit Condition die Bedingungen bestimmt:
Bedingungen auf OnClick-Aktion hinzufügen
Anschließend bestimmt man, was bei richtiger Eingabe passieren soll. Mit Set Panel State wird das Panel ‚Login Box‘ bei erfüllter Bedingung in den State eingeloggt gesetzt.
Case Editor: Set Dynamic Panel ‚Login Box‘ – Select the state ‚eingeloggt‘
Danach wird auf dem Login-Button mit Add Case eine else/if Bedingung bestimmt. Hier wird festgelegt, was passieren soll, wenn die Eingabe nicht richtig ist. In diesem Fall soll mit Set Panel State das Panel in den State ‚login‘ versetzt werden und die Fehlermeldung soll mit Show sichtbar werden.
Case Editor: Else Zweig definieren
Die fertige Interaktion auf dem Login-Button sieht dann wie folgt aus:
Fertige Interaktion
4 Logout
Wenn die Eingabe richtig war, landet man im State ‚eingeloggt‘. Mit Klick auf den Logout-Button sollte man wieder zurück zum Login-Prozess zurückkehren können. Deshalb bekommt der Logout-Button die OnClick-Aktion Open Link in Current Window : Dokumentation.
Logout definieren
5 Input type
Damit das Passwort bei der Eingabe nicht lesbar ist, sollte man das Eingabefeld maskieren:
Rechtsklick > Input type > Password. Nun wird das Passwort gepunktet angezeigt wird.
Input Type für das Passwort Feld ändern
