In Axure 8 haben Gruppen einen neuen Sinn. Endlich können gruppierte Elemente auch über Events und Aktionen gemeinsam beeinflusst werden. Dies war bisher nur Dynamic Panels vorbehalten.
Im Reiter Properties kann man über „Trigger Maus Interaction Styles“ nun auch bei allen Widgets einer Gruppe gleichzeitig den MouseOver-/MouseDown-Stil aktivieren. Eine Gruppe wird in der neuen Version mit einem Ordnersymbol im Widget Manager dargestellt und kann wie ein eigenständiges Widget manipuliert werden. |
- Axure Version: 8.0
- Level: Advanced
- Dauer: 30 min
- Themen: Axure Advanced, Groups, Properties, Trigger Mouse Interaction Styles, Hint Text, Akkordeon, Push/Pull Widgets
|
Preview:
Das Konzept
In einem kleinem Registrierungsprozess gibt es zwei Schritte mit zwei Zuständen (default und Schritt erledigt). Nachdem man in Schritt 1 seine Daten eingegeben hat, wird dieser ausgeblendet und es geht weiter mit Schritt 2. Der Schritt 1 wird eingefärbt und mit einem grünen Haken als erledigt markiert. Durch eine Gruppierung können beide Veränderungen mit einem einzigen Befehl aktivieren werden. Nach Klick auf den ‚Registrieren‘ Button wechselt ebenso der Schritt 2 in den Zustand ‚Schritt erledigt‘, indem man den selected-Zustand der gesamten Gruppe verändert.
Akkordeon Header erstellen und gruppieren
In unserem Beispiel benötigst du für den Registrierungsprozess ein Akkordeon mit zwei Header-Gruppen für die Registrierungsschritte und 2 weitere Gruppen für die Inhalte. Die Inhalts-Gruppen werden jeweils direkt unterhalb der Menüpunkte platziert und auf Hidden gesetzt. Am Besten benennst du die Gruppen als ‚Akkordeon Header 1-2‘ und ‚Akkordeon Inhalt 1-2‘.
Erstelle eine Box mit dem Text ‚Daten eingeben‘ und einen Indikator für den Prozessstatus. Wir benutzen in diesem Beispiel ein Image, dass ein Kreis mit der Zahl 1 darstellt.
Box (Daten eingeben) erstellen & Image (Zahl 1) hochladen
Selektiere die Box und lege einen Selected Style fest:
Box markieren und ‚Selected Style‘ bestimmen
Danach selektierst du das Image und legst auch hier einen Selected Style fest. In diesem Beispiel tauschen wir das Image aus, welches einen grünen Haken zeigt:
Selected Style des Images bestimmen (grüner Haken)
Jetzt kann du die beiden zum Header gehörigen Elemente gruppieren und die neu erstellte Gruppe benennen:
Image + Rectangle gruppieren und benennen
Wiederhole diese Schritte für den zweiten Header. Danach sollte es wie folgt aussehen:
Schritt 1 & Schritt 2
Akkordeon Inhalte erstellen und gruppieren
Erstelle nun die beiden Inhaltsgruppen für den Registrierungsprozess. Wir verwenden eine Box als Hintergrund, drei Eingabefelder für Vorname, Name und E-Mail und einen Button mit der Aufschrift ‚Weiter‘, um in den nächsten Prozessschritt zu kommen.
Inhalte von Schritt 1
An dieser stelle kann man auch gleich eine weitere neue Funktionalität von Axure 8 ausprobieren. Der Hint Text kann nun auch bei Fokussierung des Eingabefeldes ausgeblendet werden. Bisher verschwand der Hint Text erst, wenn man zu tippen anfing.
Die Hint Texte Vorname, Name, E-Mail werden nach dem Fokussieren ausgeblendet
Jetzt kannst du die Inhalte von Schritt 1 gruppieren und benennen.
Inhalt Schritt 1 gruppieren
Gruppe benennen
Da die Inhalte zunächst ausgeblendet sein sollen, setzte die Gruppe auf hidden.
Gruppe korrekt platzieren und ausblenden (Hidden)
Im Weiteren wird die Inhaltsgruppe für Schritt 2 erstellt und ebenso ausgeblendet:
Gruppe erstellen und benennen
Auch die zweite Inhaltsgruppe wird ausgeblendet. Anschließend platziert man einen Bestätigungstext unterhalb des Akkordeon. Dieser soll ebenfalls ausgeblendet (Hidden) sein und erst nach der Registrierung erscheinen.
Bestätigungstext
Interaktion definieren
In unserem Fall soll zunächst der Inhalt des ersten Schrittes geöffnet sein. Wir benutzen in diesem Beispiel das OnPageLoad Event, um diesen Zustand abzubilden. Definieren dort über die Aktion Show mit dem Zusatz push widgets below das gewünschte verhalten.
Hier wird die Aktion Show Akkordeon: Inhalt 1 push widgets below gesetzt.
Aktion bei ‚OnPageLoad‘ definieren
Zusätzlich wird Akkordeon: Inhalt 1 ausgeblendet, Akkordeon: Inhalt 2 eingeblendet und die Gruppe: Akkordeon Header 1 auf selected true gesetzt. Dies ist auch eins der neuen nützlichen Verhalten bei Gruppen. Indem man die gesamte Gruppe auf selected setzt, wird der selected Zustand von allen Elementen der Gruppe verändert. In diesem Fall wird der Header eingefärbt und die Zahl 1 wird zu einem grünen Haken umgewandelt, wie in Absatz 1 festgelegt. Man muss nicht mehr mehrere Elemente einzeln ansprechen oder gar einzelne States in Dynamic Panels erstellen. Das Ein-/Ausblenden von Gruppen erspart einem auch die ständige Erstellung von Dynamic Panels mit nur einem State.
Aktionen auf dem Weiter-Button
Man beendet die Registrierung mit Klick auf den Registrieren Button. Hiermit wird auch die die zweite Headergruppe in den selected state gesetzt und es erscheint eine Registrierungsbestätigung.
Aktionen auf dem Registrieren-Button
In der Outline (in Axure 7 noch Widget Manager) werden die Gruppen letztlich so dargestellt:
Gruppensymbol in der Outline
