Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

UX Design mit Axure 8 Grundkurs

Repeater-Inhalte anlegen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie, wie Repeater-Inhalte in Prototypen angezeigt und angepasst werden können.
04:15

Transkript

Jetzt werde ich Ihnen zeigen, wie Sie die Daten, die sich im Repeater befinden, auf das Layout der einzelnen Zeilen übertragen. Als erstes lösche ich den alten Eintrag, der standardmäßig im Repeater eingestellt ist, um anschließend neue Interaktion festzulegen. Ein Repeater unterscheidet sich von allen anderen View-Elementen dadurch, dass sie nur drei Events besitzt: "OnLoad", die wir bereits kennengelernt haben, diese Event wird aufgerufen, wenn das Element erstmalig geladen wird. Dann gibt es noch zwei weitere Events: "OnItemLoad", diese Event wird aufgerufen, sobald eine Zeile geladen wird und "OnItemResize", falls man größen Änderungen in einer Zeile vornimmt. Zum Befüllen der Inhalte eines Repeaters, nutzen wir den "OnItemLoad" Event. Praktisch ist, wenn Sie den Repeater öffnen, haben Sie immer noch Zugriff auf die gleichen dre Events. Ich erstelle einen neuen Case bei "OnItemLoad", mit Doppelklick und werde nun die einzelnen Inhalte einer Repeater-Zeile diesem Layout hinzufügen. Dazu nutze ich die "Set Text" Aktion und wähle eine der drei Platzhalter. Ich fange mit dem Title an. Wie Sie sehen, kann ich hier ein Wert eintragen, standardmäßig wird dort der bereits bestehende Text angezeigt. Ich drücke auf die Funktion "fx", um das Edit Textfenster aufzurufen. Hier nutze ich den "Insert Variable or Function" Link und öffne die Kategorie "Repeater / Dataset". Wie Sie shen, gibt es dort eine Reihe von Variablen und Funktion, die speziell auf Repeater zugeschnitten sind. Die, mit der wir jetzt arbeiten werden, sind die "Item.category" und "Item.title" Variablen, denn Sie sind den Platzhalter für die Inhalte Ihres Repeaters. Der Name hinter "Item." beschreibt den Namen der Spalte. Da ich den Titel definieren will, nutze ich "Item.title" und lösche den alten Text. Variablen und Funktionen werden in Axure immer durch doppelte eckige Klammern eingebunden. Ich drücke "OK" und schließe den Case Editor und damit habe ich die erste Aktion für "OnItemLoad" festgelegt. Sie besagt, dass Sie das Textelement "titleTD" mit dem Wert der aktuellen Zeile, die bei "OnItemLoad" geladen wird, füllen. Schließe ich den Repeater, sehen Sie, dass Axure dieser Aktion bereits hier im User-Interface durchführt. Jetzt muss ich nur noch zwei Aktionen hinzufügen, um die Nummer und um die Kategorie des Eintrages hinzuzufügen. Mit Command+C und Command+V kopiere ich diesen Eintrag, Doppelklick auf ihn um ihn zu ändern und wähle hier "categoryTD" aus und nehme nicht "Item.title", sondern "Item.category". Da ich die Namen der Spalte auswendig weiß. Sie können also ich hier Einträge von Hand eintragen oder auch das Popup-Fenster. Jetzt schließe ich das Fenster und wie Sie sehen, wenn die Kategorien bereits passend angezeigt. Als drittes möchte ich noch die Eintragsnummer des jeweiligen Eintrags anzeigen. Dazu öffne ich den Case erneut per Doppelklick, nutze ich die "Set Text" Aktion wähle das Numberfeld aus, öffne das Edit text Overlay und wähle hier "Item.index" aus. "Item.index" liefert mir, wie Sie hier sehen, die Nummer des aktuellen Eintrags zurück. In diesem Video haben Sie gesehen, wie Sie ein generisches Layout durch den "OnItemLoad" Event mit Inhalten füllen können. Dazu nutzen Sie die Variablen und Funktionen die Ihnen speziell für Repeater angeboten werden.

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!