Tutorial
– Prototyper –
Kurzes Tutorial für die Software "Prototyper" der Firma "justinmind"
anhand der Android-App der Hochschule Pforzheim
Vorlesung
GUI-Design Prof. Blankenbach
Verfasst von
Matthias Müller Matr.Nr 305 108
04. August 2015
2 Prototyper Tutorial
Inhalt Erstellen eines neuen Projektes ........................................................................................ 3
Die Oberfläche ............................................................................................................. 4
Los geht’s ................................................................................................................... 5
Hinzufügen von Elementen .............................................................................................. 6
Bearbeiten von Elementen ............................................................................................... 7
Interaktionen: Übersicht .................................................................................................. 9
Interaktionen: Links ..................................................................................................... 11
Interaktion: Navigation mit Variablen ................................................................................. 12
Interaktionen: Tabs ...................................................................................................... 17
Interaktionen: Effekte und Animationen .............................................................................. 18
Interaktionen: RadioButtons ........................................................................................... 19
Interaktionen: Passwortstärke ......................................................................................... 20
Prototype veröffentlichen ............................................................................................... 22
Exportieren als Bild ...................................................................................................... 22
Auf Gerät testen ......................................................................................................... 22
Variablen .................................................................................................................. 23
Aktuelles Datum und Uhrzeit .......................................................................................... 24
Dynamic Data Lists ...................................................................................................... 25
Expressions on Data Lists ............................................................................................. 27
Durchsuchen von Listen (1. Kriterium) ............................................................................... 28
Durchsuchen von Listen (mehrere Kriterien) ........................................................................ 28
Importieren von echten Daten ......................................................................................... 29
Expand and collapse content .......................................................................................... 30
Adaptive Layouts ........................................................................................................ 32
04. August 2015
3 Prototyper Tutorial
Erstellen eines neuen Projektes
Wird Prototyper das erste Mal gestartet, wird dem Nutzer der folgende Startbildschirm gezeigt.
Hier stehen die Optionen zur Erstellung oder Öffnen eines Projektes zur Verfügung. Außerdem
ein kurzes Tutorial der Firma „Justinmind“.
Aber legen wir los und legen erstmal ein neues Projekt an. Dazu Klicken wir einfach auf die
Schaltfläche "Create a New Prototype" in der Rubrik "New", siehe folgendes Bild.
Abbildung 1: Prototyper Startbildschirm
Anschließend gelangen wir einen Schritt weiter und wählen ein Gerät aus, für das wir einen
"Prototype" erstellen wollen. Wir wählen hier einfach mal "Android" aus und klicken
anschließend, wie im Folgenden linkem Bild dargestellt, auf "Next". Im nächsten Schritt können
wir das Layout konfigurieren. Hier stehen einige Funktionen, wie z.B. ein Beispiel Prototype o.ä.
Wir wollen in diesem Tutorial aber einen Prototyp von Grund auf bauen und wählen deshalb
den Punkt "Empty". Hier bietet sich die Möglichkeit die Auflösung des Prototyps einzustellen.
Wir setzen diese hier einfach mal auf 360x640 (Grundeinstellung).
Das war es vorerst für die Erstellung eines neuen Prototyps und wir beenden den
Erstellungsassistenten mit einem Klick auf "Finish".
Info: Wird "Prototyper" das erste Mal gestartet, bietet sich die Möglichkeit eine kurze Tour durch
die GUI zu erhalten. Dies dauert weniger als 1 Minute und gibt einen kurzen Überblick über das
Programm.
Abbildung 2: Projekt auswählen
04. August 2015
4 Prototyper Tutorial
Die Oberfläche
Die Oberfläche von "Prototyper" ist sehr übersichtlich aufgebaut. Das wichtigste ist wohl das
Layout des Gerätes in der Mitte. Auf der linken Seite ① finden sich alle grafischen Elemente,
wie Icons, Textfelder oder Eingabefelder, die dem Layout hinzugefügt werden können. Diese
können einfach per Drag and Drop in das Layout gezogen werden. Sobald sie sich darin
befinden kann die Größe geändert und an der gewünschten Position platziert werden. Das
Verschieben kann sowohl mit der Maus als auch mit den Pfeiltasten erfolgen (mit gedrückter
SHIFT-Taste geht dies schneller).
Die rechte Spalte zeigt zum einen die verschiedenen "Screens" ②, also die verschiedene
Funktionen für eine potentielle App an. Ein Beispiel wäre ein Start-Screen ("MainActivity") mit
einem Button. Wird dieser gedrückt, öffnet sich der zweite Screen ("ActivityNoten").
Über den "+"-Button können weitere "Screens" hinzufügt werden.
Der Screen kann mit einem Rechtsklick->Edit umbenannt werden.
Löschen eines Screens über Rechtsklick->Delete
Prototyper bietet die üblichen Shortcuts für das Kopieren und Einfügen von Elementen (Strg+C
u. Strg+V) an. Soll ein Element dupliziert werden, kann dies über den Shortcut Strg+D erfolgen.
Abbildung 3: Oberfläche von Prototyper
Der direkt darunter liegende Bereich ③, stellt die Konfigurationsmöglichkeiten für die einzelnen
grafischen Elemente im Layout dar. Hier kann z.B. die Hierarchie, Größe, Abstand, u.v.m.
geändert werden. Dazu aber später mehr.
① ②
③
04. August 2015
5 Prototyper Tutorial
Los geht’s
Im Folgenden sollen die Funktionen von Prototyper größtenteils anhand einer Beispiel-App wie
die der Hochschule Pforzheim erklärt werden…
Viel Spaß
04. August 2015
6 Prototyper Tutorial
Abbildung 5: Bearbeiten von IDs
Hinzufügen von Elementen
Das Hinzufügen von Elementen gestaltet sich durch Drag-n-Drop sehr einfach. Hierfür muss
lediglich das gewünschte Element in der Liste ausgewählt werden und im Layout an die
gewünschte Stelle gezogen werden. In folgendem Bild wird dies anhand einer sogenannten
Toolbar (Android) demonstriert.
Abbildung 4: Hinzufügen von Elementen
Nachdem die Toolbar erfolgreich im Layout platziert wurde, ist in der rechten Spalte das
dazugehörige Element zu finden ("Title-bar-color"). Dieses Element enthält die einzelnen Icons
("Label_xx"), wie in der oberen Grafik dargestellt. Diese können selbstverständlich zur besseren
Unterscheidung umbenannt werden, was ich ausdrücklich empfehle.
Für die Umbenennung muss lediglich das Element ausgewählt werden und vom Reiter "Outline"
zu "Properties" gewechselt werden und eine neue ID ① eingegeben werden ("toolbar").
①
04. August 2015
7 Prototyper Tutorial
Bearbeiten von Elementen
Prototyper stellt eine ordentliche Anzahl an Konfigurationsmöglichkeiten für Elemente bereit.
Diese reichen von der Farbe, über Größe, bis hin zur Position. Da die meisten Apps eine
Toolbar, Menü-Band im oberen Teil des Bildschirmes, besitzen und so auch in der App der
Hochschule Pforzheim genutzt wird, wollen wir diese im folgenden Abschnitt bearbeiten. Eine
der Hauptfarben der Hochschule Pforzheim ist ein bestimmter Gelbton (HEX: "#FED001"). Um
die Farbe zu ändern, muss die Toolbar mit einem Doppelklick ausgewählt werden. Im rechten
Fenster unter "Properties" findet sich dann die Option "Background". Die folgenden Schritte sind
selbsterklärend.
Abbildung 6: Beispiel Toolbar
Für die Änderung eines Textfeldes, muss das Element durch einen Doppelklick angewählt
werden. Mit Hilfe eines weiteren Doppelklicks auf den Text, kann dieser geändert werden ("HS
Pforzheim"). Als Beispiel für das Hinzufügen eines weiteren Elements, soll die Rubrik "News &
Events" der HS-App dienen. Diese ist in zwei Segmente ("Tabs") aufgeteilt. Um diese
Unterteilung zu erhalten, ziehen wird aus dem "Widgets"-Fenster unter "Bars" die Komponente
"Tabs bar color" in das Layout. Auch hierfür passen wir wieder die Farben an und benennen die
Segmente, sodass wir anschließend folgende Ansicht erhalten.
Abbildung 7: Toolbar und Tabs
04. August 2015
8 Prototyper Tutorial
Nun können wir zum Testen der bisher erstellten GUI die App einmal simulieren. Dies erfolgt
über den grünen Button mit der Aufschrift "Simulate" am oberen Bildrand. Bisher lässt sich
lediglich zwischen den beiden Tabs hin und her switchen.
Da die Tabs aber noch keinen Inhalt wollen wir hier nun einen erstellen. Der Inhalt soll lediglich
aus einer Karte bestehen die ein Bild, Titel sowie einen kurzen Textausschnitt des Artikels
enthält. Dafür ziehen wir aus den Widgets unter Cards das Element "Travel card" in das Layout.
Hierbei wollen wir ein eigenes Bild anstelle des Gegebenen einfügen. Durch einen Klick auf das
Bild werden die Eigenschaften angezeigt. Unter dem Punkt "General" findet sich das eingefügte
Bild. Dies kann durch einen Klick auf die drei Punkte mit einem lokalen Bild getauscht werden.
Die Textfelder passen wir nach unseren Wünschen mit einem Text an. Das Ergebnis sollte
ähnlich des Folgenden aussehen.
Abbildung 8: Toolbar, Tabs und Content
Da der Text auf dieser Karte aber begrenzt ist, wollen wir einen neuen Screen starten der den
ganzen Artikel anzeigt. Dies ist aber Bestandteil des nächsten Kapitels.
04. August 2015
9 Prototyper Tutorial
Interaktionen: Übersicht
Prototyper bietet die Möglichkeit Interaktionen zu definierten. Hierfür wird der Reiter "Events"
benötigt. Um ein Event zu erstellen, muss zuerst festgelegt werden, durch was ein Event
ausgelöst werden soll. Drücke die Schaltfläche "Add event" und wähle die Nutzeraktion im
oberen linken Menü aus. Beachte, dass für eine Komponente mehrere Aktionen definiert
werden können. Ein Beispiel wäre ein Button, der durch Klicken und durch darüber bewegen
der Maus eine Aktion auslöst. Die folgende Liste zeigt eine Übersicht der verfügbaren Aktionen.
Anhand von kurzen Beispielen wird deren Funktion erklärt. Diese beziehen sich wieder auf die
App der Hochschule Pforzheim.
Link to
Wechseln des Screens. Der Nutzer wird aufgefordert durch das Klicken eines Buttons
die Login-Daten einzugeben. Hierfür wird ein neuer Screen angezeigt.
Change Style
Änderung des Designs von z.B. einer Komponente wie Farbe, Hintergrund, usw. in
einem Screen zur Laufzeit.
Show/Hide
Ändert die Sichtbarkeit von Komponenten. Beispiel: Der Button für den Login wird erst
angezeigt, wenn alle Login-Daten eingegeben wurden.
Set active panel
Zum Ändern des aktiven Panels (Beispiel: Tabs). Ist die Reihenfolge von Tabs in einem
Screen mit "Neuigkeiten" und "Events" definiert. Kann durch setzen dieser Aktion der
zweite Tab gewählt werden.
Set Value
Ändert den Wert eines Labels. Hier kann z.B. das Kartenguthaben des
Studentenausweises einem Textfeld zugewiesen werden.
Select Value
Wählt den Wert, der durch den Nutzer eingegeben wurde aus. Hier können eingegebene
Login-Daten weiterverarbeitet werden.
Pause
Verzögerung von Aktionen
Move
Bewegt ein Widget zu einer bestimmten Position
Resize
Ändert die Attribute "height" oder "width" eines Elements
04. August 2015
10 Prototyper Tutorial
Insert into
Widget einem anderen Container hinzufügen
Data Master Action
Dynamische Daten in Listen und funktionale Formen
Set focus on
Kann z.B. dafür verwendet werden, den Focus auf ein EditText zu legen
Scroll to
Scrollt den Screen zu einem bestimmten Element. Hier kann z.B. eine Scrollbar bis zum
Ende gescrollt werden.
Enable/Disable
Widget auswählbar oder nicht. Kann z.B. dafür verwenden werden um festzulegen ob
ein EditText füllbar ist oder nicht.
Pagination
Paginiert eine Datenliste
Sobald eine Aktion ausgewählt ist, klicke auf OK. Die definierte Aktion erscheint anschließend
im Event-Reiter. Eine einzige Nutzer-Aktion kann mehrere Aktionen hintereinander auslösen.
Zum Beispiel eine Aktion die nach einer vorherigen ausgeführt werden soll. Dies kann durch
Klicken des Rad-Symbols bei einem Event erfolgen.
04. August 2015
11 Prototyper Tutorial
Interaktionen: Links
Wie bereits im vorherigen Kapitel beschrieben wollen wir den ganzen Artikel in einem neuen
Screen darstellen. Das Öffnen von weiteren Screens gestaltet sich in Prototyper sehr einfach.
Hierfür legen wir, durch einen Klick auf das "+"-Icon im rechten Fenster unter "Screens" einen
neuen Screen an. Wir nennen diesen "ActivityNewsDetail". Jetzt kehren wir zu unserer
"MainActivity" zurück und verknüpfen den Button mit der Aufschrift "Mehr…". Dazu wählen wir
diesen aus und ziehen ihn mit gedrückter linker Maustaste auf den Screen "ActivityNewsDetail".
Alternativ kann dies auch durch einen Rechtsklick auf den Button und der anschließenden
Auswahl "Add link" vorgenommen werden.
Abbildung 9: Interaktion mit Links
04. August 2015
12 Prototyper Tutorial
Interaktion: Navigation mit Variablen Natürlich lässt sich mit Prototyper auch eine Navigation anstelle der Links, mit Variablen realisieren. In
diesem Kapitel soll nun erläutert werden, wie mit gespeicherten Variablen definiert werden kann, was im
nächsten Screen angezeigt werden soll. Hier könnten wir auch das, im vorherigen Kapitel verwendete
Beispiel mit den Neuigkeiten wählen. Die folglich beschriebene Funktion soll aber anhand eines
einfacheren Beispiels erklärt werden.
1. Erstellen der Screens
Lasst und mit einem leeren Bildschirm beginnen. Zuerst navigieren wir zum Reiter mit der Aufschrift
"Screens" und legen hier 4 neue an (siehe Abb. 10). Der erste ("Home") identifiziert unsere Startseite,
von der wir auf die anderen Screens (A-C) springen wollen.
Abbildung 10: Erstellen der Screens
Als nächstes wählen wir im "Outline" Panel den Punkt "Variables" aus, klicken auf das "+" und erstellen
eine neue Variable mit der Bezeichnung "previous_screen".
Abbildung 11: Festlegen der Variable
04. August 2015
13 Prototyper Tutorial
Jetzt sollten wir uns erst einmal dem Home-Screen widmen und die weiteren Konfigurationen vornehmen.
Als einfaches Layout wählen wir hier einfach zwei Rechtecke ("Rectangles") und beschriften diese mit
"Screen A" bzw. "Screen B". Das Layout könnte wie folgt aussehen.
Abbildung 12: Layout des Home-Screens
Sobald wir diesen Schritt abgeschlossen haben, erstellen wir für jeden anderen Screen (A-C) ein Layout.
Ich habe hier ein simples, zu demonstrationszwecken gut geeignetes einfaches Layout gewählt (siehe
Punkt 2).
2. Screen A und B konfigurieren
Bis jetzt haben wir für das Layout von Screen A und B keine Konfigurationen vorgenommen, dies wollen
wir jetzt in diesem Schritt ändern. Dazu wählen wir wieder zwei Rechtecke aus und ziehen diese in das
layout. Das eine Beschriften wir mit "You are on Screen B", das andere mit "Go to Screen C", sodass das
Layout wie in Abbildung 13 aussehen könnte. Natürlich wählen wir für den anderen Screen auch eine
andere Beschriftung in Bezug auf den Namen des Screens auf dem man sich gerade befindet.
Abbildung 13: Layout Screen A bzw. B
04. August 2015
14 Prototyper Tutorial
3. Screen C konfigurieren
Der dritte und letzte Screen ins "C". Dieser Screen zeigt dir an, welches der vorherige Screen
war, den du ausgewählt hast. Klickst du zum Beispiel im Home-Screen auf Screen A, so wird dir
dieser angezeigt. Mit einem weiteren Klick auf "Go to screen C" gelangst zu Besagtem und es
wird dir der vorherige Screen, in diesem Beispiel Screen B angezeigt.
Um den letzten Screen zu erstellen und diese Anzeige zu ermögliche, wählen wir ein Layout wie
in Abbildung 14 dargestellt. Dieses Layout besteht auch wieder aus zwei Rechtecken die die
Screens indizieren sollen. Ein drittes Rechteck mit der Beschriftung "Start over" lässt uns wieder
vom Home-Screen aus beginnen.
Abbildung 14: Layout Screen C
4. Interaktionen für Screen A und B hinzufügen
Um die notwendigen Interaktionen für das Navigieren zu den einzelnen Screen zu ermöglichen,
wenden wir, wie bereits im vorherigen Kapitel gelernt, die Link-Methode an. Wir möchten hier
also bei einem Klick-Event auf "Screen A" bzw. "Screen B" zu dem jeweiligen Screen springen.
Folglich legen wir für jedes Rechteck ein Klick-Event an und wählen (wie Abb. 15 zeigt) unter
dem Punkt "Link to" den zugehörigen Screen aus.
Abbildung 15: Erstellung Interaktion zwischen den Screens
04. August 2015
15 Prototyper Tutorial
5. Interaktionen in Screen A und B
Für jeden der beiden Screens müssen wir als allererstes das Event "on Page Load" definieren.
Diese Event löst die Aktion "set Value" aus, welche dazu benötig wird, den Wert eines
Elementes zu speichern. In unserem Fall wird die "set value" Methode dazu verwendet die
Variable "precious_screen" zu definieren.
Wir gehen also für jeden der beiden Screens wie folgt vor:
Im Outline Panel wählen wir mit einem auf den jeweiligen Screen aus.
Im Events-Tab fügen wir durch einen Klick auf "+" ein neues Event hinzu.
Der jetzt öffnende Dialog ermöglicht und das Event "on Page Load" zu definieren. Wir
wählen hier im Interaktionsmenü die Aktion "Set value“ aus.
Hier setzen wir den Wert im Feld ("value") auf A bzw. B und wählen zusätzlich die
Option "Fixed" aus (siehe Abb. 16).
Als nächstes wechseln wir zum Variablen-Tab und wählen die "previous_screen"
Variable aus.
Als letztes erstellen wir ein Link-Event von dem Rechteck mit der Beschriftung "Go to
Screen C" zu Screen C.
Diese Schritte sind notwendig damit, wenn Screen A oder B geladen sind, die jeweilige Variable
gespeichert wird, welche den Screen indiziert.
Abbildung 16: Definition des "on page load" Events
04. August 2015
16 Prototyper Tutorial
6. Screen C konfigurieren
Im letzten Screen werden mehrere Bedingungen verwendet. Als erstes müssen wir jedoch für
beide Rechtecke für Screen A und B die Eigenschaft "Hide component" im Outline-Panel
aktivieren, damit bei der Simulation beide Elemente nicht angezeigt werden.
Im nächsten Schritt erstellen wir jetzt ein Event, das wieder auf der Variable "previous_screen"
basiert. Anhand dieser Variable wir in diesem Screen angezeigt, welcher im vorherigen Screen
ausgewählt wurden.
Um dieses Event zu erstellen, sind folgende Schritte notwendig:
Wir wählen den Screen C im Outline-Panel aus und öffnen den Event-Dialog. In diesem
Dialog müssen wir jetzt ein Event erstellen, das "on page load" und die "show/hide"
action kombiniert.
Als nächstes öffnen wir den Dialog in dem wir eine Bedingung wie folgt anlegen:
"Wenn Variable 'previous_screen' gleich 'A'.
Durch zweifaches Drücken von Ok schließen wir diesen Schritt ab. Ist die Variable
"previous_screen" zum Zeitpunkt, wenn das Event "on page load" ausgelöst wird, gleich
A, dann wird das Rechteck mit der Beschriftung "Screen A" angezeigt. Eine bildliche
Darstellung dieser Bedingung ist in Abbildung 17 zu finden.
Im letzten Schritt müssen wir diese Bedingung für den Screen B erweitern. Hierzu
erweitern wir einfach in im vorherigen Schritt erstellte Bedingung um einen "else"-Zweig.
Abbildung 17: Bedingung für Screen C
Um wieder von vorne beginnen zu können, verlinken wir als letztes das Rechteck mit der
Aufschrift "start over" einfach mit dem Home-Screen. Jetzt können wir die Simulation starten.
04. August 2015
17 Prototyper Tutorial
Interaktionen: Tabs
Durch Tabs kann ein Layout verschiedene Rubriken enthalten. Ein Beispiel wäre hierfür die
Rubrik Neuigkeiten und Veranstaltungen in der App der Hochschule Pforzheim. Logischerweise
werden im ersten Tab die Informationen zu Neuigkeiten und im zweiten die Veranstaltungen
angezeigt. In Prototyper gestaltet sich die Simulation einer solchen Ansicht sehr einfach. Hierfür
muss lediglich eine "Dynamic Panel"-Komponente in das Layout gezogen werden. Sobald die
Komponente platziert wurde, können durch das "+"-Icon weitere Tabs hinzugefügt werden. Der
Inhalt eines Tabs kann durch dessen Auswahl und dem Rechtsklick sowie "Edit content"
bearbeitet werden. Alternativ kann dies auch durch einen Doppelklick innerhalb des Tabs
geschehen. Um jetzt Komponenten hinzufügen zu können, zieht man, wie schon gewohnt,
Komponenten in das Layout.
Um das Aussehen eines Tabs bearbeiten zu können, muss dieser ausgewählt und über den
"Properties"-Tab kann jetzt das Aussehen bearbeitet werden. Hier kann z.B. die Umrandung
geändert, die Rundung geändert werden. Als Anschauung soll noch einmal der aus einem
vorherigen Kapitel erstellte Tab dienen.
Abbildung 18: Erstellter Tab
04. August 2015
18 Prototyper Tutorial
Interaktionen: Effekte und Animationen
In Prototyper können viele Animationen mit der "Pause"-Aktion simuliert werden. Ein Beispiel
wäre ein Fortschrittbalken, der den Status eines Downloads anzeigt. Bei diesem Balken handelt
es sich lediglich um ein Rechteck, das sich nach und nach füllt. Die Schritte für die Erstellung
sehen wie folgt aus:
Rechteck in das Layout ziehen und die Größe so festlegen, wie wenn die Animation
startet
Das Rechteck auswählen und ein "Page load"-Event hinzufügen
Wählen der "Pause"-Aktion und klicken auf OK
Wählen des "Rad"-Icons neben dem Wort "do" und Hinzufügen einer
Vergrößerungsaktion um das Rechteck wachsen zu lassen.
Wiederholen der letzten beiden Schritte bis das Rechteck die gewünschte Länge hat
Effekte
"Hide/Show" sowie "Set active panel" Aktionen können durch die Verwendung von Effekten
verbessert werden. Dazu gehören Ein-/Ausblende- sowie Übergangseffekte. Um einer
Komponente einen Effekt zuweisen zu können, muss diese als erstes ausgewählt werden um
anschließend die Aktion auszuwählen, wenn das Event ausgelöst wird. Über das Dropdown-
Menü kann der gewünschte Effekt ausgewählt werden.
Übersicht aller Effekte:
Fade
Allmähliche Änderung der Transparenz eines Elements bis es verschwindet. Die Länge
des Effekts kann in Millisekunden festgelegt werden. Handelt es sich um eine "hide"-
Aktion, wird es ein Fade-Out sein, andernfalls eine Fade-In.
Slide
Der Slide-Effekt animiert die Höhe und Breite eines ausgewählten Elements. Die Dauer
kann auch hier in Millisekunden festgelegt werden. Höhere Werte zeigen logischerweise
eine langsamere Animation.
Blind – Blendet das Element aus bzw. ein
Bounce – Lässt das Element mehrere male auf und ab hüpfen
Clip – Clipt das Element ein und aus
Drop – Das Element fällt in das Layout
Explode – Eine Art Explosionsanimation
Fold – Faltet das Element wie ein Papier
Highlight – Animation mit farbigem Hintergrund
Puff – Fade-Out-Animation mit einem "Puff"-Effekt
Pulsate – Pulsiert die Lichtdurchlässigkeit mehrere Male
Shake – Schüttel-Animation
04. August 2015
19 Prototyper Tutorial
Interaktionen: RadioButtons
Das folgende Beispiel soll den Umgang mit RadioButtons demonstrieren. Dazu müssen nur die,
im unten gezeigten Bild dargestellten Elemente in das Layout gezogen werden.
Abbildung 19: Layout mit RadioButtons
Als erstes ziehe die CheckBoxen, Labels und RadioButtons wie abgebildet in das layout. Damit
von den RadioButtons nur einer ausgewählt werden kann, müssen diese gruppiert werden.
Dazu müssen lediglich beide markiert werden und durch einen Rechtsklick die Option "Group"
gewählt werden. Ziehe anschließend ein "dynamic panel"-Widget in das Layout und erstelle
zwei Panels. Füge dem ersten Panel das Input-Feld, und eine Drop-Down-Liste hinzu. Setze die
Eigenschaft "editable" der beiden Elemente auf "disabled".
Erstelle im zweiten Panel die gleichen Elemente noch einmal, achte hierbei darauf, dass diese
aktiviert aussehen. Wähle anschließend den unteren RadioButton und den Event-Reiter auf der
rechten Seite aus. Wähle hier "set active panel" und das zweite Panel (mit aktiven
Eingabefeldern) aus und bestätige mit OK. Wähle jetzt den oberen RadioButton aus und gehe
auch hier wieder zum Event-Reiter um ein neues Event hinzuzufügen. Wähle hier "set active
panel" und gebe das erste Panel an. Fertig!
04. August 2015
20 Prototyper Tutorial
Interaktionen: Passwortstärke
Prototyper bietet außerdem eine ziemlich nützliche Funktion an, um die Stärke von Passwörtern
zu überprüfen. In der App der Hochschule ist so eine Funktion zwar nicht zu finden, da hier
lediglich das Passwort auf dem Server validiert wird. Dennoch möchte ich kurz hierauf eingehen,
da hier einiges an Logik im Expression Builder notwendig ist, was für spätere Projekte durchaus
hilfreich sein kann.
Bevor wir beginnen, muss als erstes die GUI für eine Simulation gebaut werden. Hierfür
benötigen wir ein Eingabefeld, das für das Passwort benötigt wird, sowie ein Fortschrittbalken
(Stichwort: "Dynamic panel"), der die Stärke des Passwortes anzeigt. Die GUI sollte
anschließend in etwa wie in Folgender Grafik aussehen. Die Infos auf der rechten Seite dienen
lediglich dazu darauf hinzuweisen, was ein starkes Passwort ausmacht.
Abbildung 20: GUI Passwortstärke
Die Überprüfung der Stärke des Passwortes gliedert sich in drei Schritte. Begonnen wird mit mit
der Länge des Passwortes ("First level protection"). Durch Drücken von "add event",
anschließender Auswahl des Event-Type "on key up" und "add condition" öffnet sich der
Expesstion Builder und wir definieren folgende Anweisung (siehe Abb. 21), schließen mit "Ok"
ab und wählen als Aktionstyp "set active panel" aus.
Abbildung 21: Expression Builder 1. Bedingung
04. August 2015
21 Prototyper Tutorial
Jetzt sind aber noch zwei weitere Bedingungen für ein starkes Passwort notwendig.
Im Events Tab finden wir für den nächsten Schritt einen "else"-Link der jetzt unter dem ersten
Event erschienen. Auch hier fügen wird wieder durch Drücken von "add condition" eine
Bedingung für das Passwort hinzu. Jetzt definieren wir, wie in Abb. 22 zu sehen, die Expression.
Abbildung 22: Expression Builder 2. Bedingung
Sobald wir die Bedingung erstellt haben, fahren wir wieder wie bei der ersten Bedingung fort.
Wenn wir uns, nach Abschluss der zweiten Bedingung, wieder dem Event Tab zuwenden,
finden wir die neue Option "case", darunter erscheint wieder die Option "case".
Fahren wir jetzt aber mit der letzten Bedingung fort. Auch hierfür gehen wir wieder wie im
vorherigen Schritt vor und klicken auf den "else"-Link im Event-Tab um eine weitere Bedingung
hinzuzufügen, die das Passwort auf Großbuchstaben überprüft (siehe Abb. 23).
Abbildung 23: Expression Builder 3. Bedingung
Durch das Drücken von Ok, der Wahl des aktiven Panels und des letzten verbleibenden Panels,
ist die Überprüfung abgeschlossen und die GUI kann simuliert werden.
04. August 2015
22 Prototyper Tutorial
Prototype veröffentlichen
Prototyper bietet mehrere Möglichkeiten den erstellten Prototypen zu veröffentlichen.
Simulieren Button: Durch einen Klick auf "Simulate" oder alternativ durch das Drücken
der Taste F5, wird der erstellte Prototyp in einem separaten Fenster gestartet und kann
u.a. mit den erstellten Links getestet werden.
Exportieren als HTML: Prorotyper bietet die Möglichkeit das erstellte Layout als HTML
zu exportieren und in jedem Browser anzeigen zu lassen (File->Export to HTML).
Achtung: Diese Möglichkeit ist nicht in der freien Version von Prototyper enthalten!
Exportieren als Bild
Sobald man ein Layout fertiggestellt hat, lässt dich dieses natürlich auch als Bild exportieren.
Hierfür klickt man einfach im oberen Menüband auf "File->Save as images".
Im anschließenden Dialog können wir auswählen, was wir exportieren möchten. Wir wählen hier
den Punkt "Screens" aus und klicken auf ok.
Auf Gerät testen
Natürlich stellt Prototyper auch die Möglichkeit zur Verfügung, unser erstelltes Layout auf einem
echten Gerät zu testen. Hierfür müssen wir uns als erstes die App aus dem Appstore
herunterladen.
Jetzt kehren wir zu Prototyper zurück und klicken in der Oberfläche auf den blauen Button mit
der Aufschrift "View on device". Prototyper erstellt hier automatisch einen Prototypen in deinem
Account.
Wenn wir jetzt die App öffnen, unsere Zugangsdaten für den Account eingegeben haben, lädt
Prototyper automatisch die Simulation auf dein Gerät herunter.
04. August 2015
23 Prototyper Tutorial
Variablen
Prototyper bietet außerdem die Möglichkeiten mit Variablen zu arbeiten. Ein Beispiel wäre hier
z.B. das Login-Daten auch in einem anderen Screen zur Verfügung stehen. Um diese Funktion
zu demonstrieren, werden wir den Login-Screen der Hochschule Pforzheim erstellen und im
anschließenden die Activity für die Noten starten. Das gestaltete Layout sollte zwei Textfelder
für Nutzername und Passwort haben und einen Button für den Login, siehe folgendes Bild.
Abbildung 24: Layout für Beispiel mit Variablen
Als nächstes wollen wir eine neue Variable anlegen. Dazu klicken wir auf der rechten Seite des
Fensters auf "Variables" und legen mit einem Klick auf das "+"-Icon eine neue Variable an und
nennen diese "username". Um jetzt die Variable dem Textfeld "Nutzername" zuzuweisen,
ziehen wir dieses mit gedrückter linker Maustaste auf die Variable. Diese sind anschließend
miteinander verknüpft. Das gleiche Vorgehen wenden wir für das Passwort des Login-Screens
an. Den Button mit der Aufschrift "Login" verknüpfen wir anschließend mit der neuen Activity,
welche die Noten anzeigen soll.
Im neuen Screen, welcher die Noten anzeigen soll, erstellen wir in der Toolbar ein Textfeld.
Anschließend klicken wir wieder auf den Reiter "Variables" und ziehen das Textfeld aus der
Toolbar auf die Variable "username". Simulieren wir dann den Login-Prozess, geben einen
Namen ein und klicken dann auf "Login" öffnet sich die neue die Ansicht für die Noten und wir
sehen den eingegebenen Nutzernamen in der Toolbar.
Achtung: Das Arbeiten mit Variablen ist nicht in der freien Version von Prototyper verfügbar!
04. August 2015
24 Prototyper Tutorial
Aktuelles Datum und Uhrzeit
Oft wird die Anzeige des aktuellen Datums und der Uhrzeit in GUIs benötigt, um die Aktualität
von Daten anzuzeigen. Prototyper bietet auch hier eine Option dies zu simulieren.
Hierzu muss lediglich ein Label an die gewünschte Stelle im Layout gezogen werden. Man
wählt anschließend einfach das Label aus, navigiert zum Event-Tab, drückt den Button "add
event" und wählt die Option "onPageLoad" aus. Anschließend wählt man die Aktion "set value",
wählt das Label und drückt im Eingabefeld auf den Button mit dem Taschenrechner. Im
Expression Builder, der sich im Anschluss öffnet, zieht man die Konstante "System date“ hinein
und drückt ok.
Das gleiche Vorgehen gilt für die Zeit. Hier wählt man anstelle der Konstante "System date",
"System time" aus.
04. August 2015
25 Prototyper Tutorial
Dynamic Data Lists
Mit Prototyper lassen sich des Weiteren dynamische Listen erstellen. So können GUIs mit
"dummy"-Daten, die später auch die "echte" GUI auf dem Client aufweist, befüllt und
anschließend auf einem Gerät simuliert werden.
Wir wollen jetzt für Demonstrationszwecke, einfach die GUI für die Notenansicht der
Hochschule Pforzheim nachbauen. Hierfür wählen wir den Reiter "Data Master Tab" am linken
unteren Bildschirmrand aus. Im darauffolgenden Dialog müssen wir ein Daten-Objekt, welches
die Daten enthalten soll, erstellen und dieses benennen. Wir wählen hier als Bezeichnung
"Exams" aus und fügen diesem Objekt durch einen Klick auf "+" alle Eigenschaften, die für die
Darstellung einer Note von Wichtigkeit sind hinzu. Natürlich wird in der App eine deutlich höhere
Anzahl an Attributen verwendet. Um aber Zeit zu sparen, minimieren wir diese Attribute in
unserem Beispiel auf die wichtigsten.
Einige wichtige Eigenschaften wären hierfür:
"uniqueId",
"name",
"mark",
"semester",
"credits"
"date"
"link"
"status“
"attempts"
"background"
Außerdem kann für ein Attribut der Datentyp durch Auswahl des Feldes "type", direkt daneben,
gewählt werden. In Prototyper sind die Datentypen standardmäßig vom Typ "Text" definiert.
Wir fügen nun einfach ein paar Beispiel-Daten ein. Die "uniqueId" ist einfach eine fortlaufende
Nummer, beginnend bei 0. Um ein Bild für das Attribut "background" verwenden zu können,
besteht hier die Option ein lokal auf dem PC gespeichertes Bild hochzuladen. Dazu muss nur
das Attribut ausgewählt werden und der Punkt "File upload" im Drop-Down Menü gewählt
werden. Für "name", "credits", "semester" und den restlichen Informationen zu der Note fügen
wir weitere Daten ein, die ein realistisches Gesamtbild ergeben. Natürlich lassen sich auch
"echte" Daten aus einer Datenbank importieren, dazu aber in einem späteren Kapitel mehr.
Das Feld "link" könnte hier z.B. ein Indikator sein, das den Nutzer auf einen weiteren Bildschirm
weiterleitet, welcher die Notenverteilung aller Klausurteilnehmer, wie auch aus der App bekannt,
anzeigt.
04. August 2015
26 Prototyper Tutorial
Nachdem wir einige Daten eingefügt haben, wollen wir diese natürlich in der GUI darstellen.
Dazu ziehen wir aus dem Reiter mit den Widgets das "Data List Widget" in das Layout. Im
anschließenden Dialog setzen wir eine ID und wählen die darzustellenden, in unserem Fall
"Exams", aus. Um sicher zu stellen, dass wir alles richtig gemacht haben, simulieren wir einmal
die GUI mit einem Klick auf "Simulate". Die GUI sollte anschließend ähnlich der Folgenden
aussehen.
Abbildung 25: Layout für Beispiel Datenenlisten
Nützliche Hinweise:
Durch einen Doppelklick auf den Data Master "Exams" öffnet sich ein Dialog, in dem wir
die Beispiel-Daten für die Noten ansehen oder diese bearbeiten können.
Echte Daten können auch aus einer Datenbank oder Microsoft Excel importiert werden
04. August 2015
27 Prototyper Tutorial
Expressions on Data Lists
Natürlich lässt sich mit den erstellten "dummy"-Daten noch mehr anfangen, als diese nur in der
GUI visuell darzustellen. Anhand der Notendatenbank, die wir im vorherigen Kapitel erstellt
haben, soll dieses Kapitel "Expressions on Data Lists" beschrieben werden.
Voraussetzung hierfür ist die Verfügbarkeit von mindestens drei Datensätzen im Data Master
"Exams". Denn wir wollen die Gesamtzahl der Noten, sowie den Durchschnitt derer anzeigen.
Für die Darstellung des Durchschnittes zu der Gesamtzahl der Noten (hier drei), ziehen wir zwei
Labels aus der Liste am rechten Bildschirmrand und platzieren diese unter die Toolbar unserer
GUI (siehe Bild am Ende der Seite). Jetzt wählen wir das erste Label, dass den Schnitt der
Noten anzeigt aus, klicken anschließend im Reiter "Events", auf den "Add event"-Button und
folglich auf "Set value" und den Rechner-Button. Wir erstellen jetzt die Expression wie in
Abbildung 26 zu sehen.
Abbildung 26: Expression 1
Da wir aber auch die Gesamtzahl, der in der Liste angezeigten Klausuren darstellen wollen,
wiederholen wir den Vorgang mit dem zweiten Label wofür wir die Expression, wie in Abbildung
27 zu sehen, erstellen.
Abbildung 27: Expression 2
Unsere simulierte GUI sollte anschließend ähnlich der Folgenden aussehen. Am oberen
Bildrand des Layouts wird der Schnitt der Klausuren sowie deren Gesamtzahl angezeigt.
Abbildung 28: Layout für Bedingungen bei Datenlisten
04. August 2015
28 Prototyper Tutorial
Durchsuchen von Listen (1. Kriterium)
Dieses Kapitel soll beschreiben, wie das Durchsuchen einer Liste simuliert werden kann. Ein
gutes Beispiel ist hierfür die Notenansicht der App der Hochschule und deren Suchfunktion
gezielt nach einzelnen Noten zu suchen.
Hierfür benötigen wir in unserer Liste ein Label und Textfeld sowie einen Button. Für letzteres
Element benötigen wir, wie wir es bereits in einem vorherigen Kapitel gelernt haben ein "Click-
Event" (Event-TabAdd eventSet value). Anschließend wählen wir die komplette Datenliste
aus und fahren mit einem Klick auf den "Calculator"-Button fort. Im "Expressions-Builder"
wählen wir den Daten-Tab aus und ziehen die Filterfunktion nach oben. Hier erhalten wir zwei
Spalten für diese Funktion. Die linke Spalte ist für die Daten, die wir filtern wollen, vorgesehen.
Die rechte Spalte für die Filter-Regel. Folglich ziehen wir die "Exams"-Liste in die linke Spalte
und das Textfeld. Zum Abschluss zweimal mit Ok bestätigen und die Filterfunktion kann
anschließend simuliert werden. Die folgende Ansicht visualisiert dieses Beispiel noch einmal
grafisch.
Durchsuchen von Listen (mehrere Kriterien)
Im vorherigen Kapitel haben wir gelernt, wie eine Liste nach einem einfachen Kriterium
durchsucht werden kann. Natürlich lässt sich eine Suche auch deutlich komplexer mit mehreren
Suchkriterien durchführen. Da solch eine Suche aber nicht in der App der Hochschule
verwendet wird, wird hier nicht näher darauf eingegangen. Sollte dennoch Interesse bestehen,
finden sich unter dem folgenden Link weitere Informationen:
http://www.justinmind.com/support/complex-search/
04. August 2015
29 Prototyper Tutorial
Importieren von echten Daten
Für einige Simulationen ist es nötig, echte Daten zu verwenden. Da eine Erstellung innerhalb
Prototyper zu aufwendig ist, wird angeboten, echte Daten zu importieren. Hierfür können z.B
echte Noten für die Hochschul-App importiert werden. Allerdings müssen die Daten vorher noch
erstellt werden.
Um aber bereits vorhandene Daten zu verwenden, muss lediglich der "Data master" geöffnet
und die Option "edit" ausgewählt werden. Durch Auswahl von des Tabs "View and edit records"
(siehe Abb. 29) und des Buttons "Import" öffnet sich ein weiterer Dialog.
Abbildung 29: Echte Daten importieren
Hier kann jetzt der Pfad zu der Datei, welche die echten Daten enthält ausgewählt werden
(siehe Abb. 30). Die Daten müssen hierfür im csv-Format vorliegen. Wie die Daten in der Datei
vorliegen, kann ebenfalls über den Dialog angegeben werden.
Abbildung 30: Pfad zu echten Daten
04. August 2015
30 Prototyper Tutorial
Expand and collapse content In der App der Hochschule ist außerdem ein Bereich für Labore der technischen Fakultät und
dazugehöriger Studiengänge zu finden. Hier lässt sich das jeweilige Labor "aufklappen" um Details wie
Termine oder das anstehende Labor-Thema entnehmen. Um dieses Aufklappen der Elemente zu
simulieren, bietet Prototyper einen sogenannte Fluidführung von untergeordneten Objekten an. Dies
bedeutet, dass untergeordnete Objekte dynamisch miteinander verbunden werden können. Wird ein
Element ausgeklappt, werden also alle darunterliegenden Objekte nach unten verschoben. Wird das
Element wieder zugeklappt, werden alle untergeordneten Objekte wieder an ihre ursprüngliche Position
zurückgeschoben. Die Abbildung 31 zeigt wie das Layout aussehen soll.
Um diese GUI jetzt zu simulieren, ziehen wir ein dynamisches Panel in das Layout. In dessen
Eigenschaften erweitern wir den Punkt "Layout" und wählen eine vertikale Ausrichtung (type "vertical").
Diese Eigenschaft dient dazu, dass alle Elemente im Layout untereinander platziert werden.
Durch einen Rechtklick auf das erstellte Panel und der Auswahl des Punktes "Edit content", können wir
jetzt einfach Elemente hineinziehen. Als Elemente wählen wir hierfür wieder dynamische Panels aus,
wovon wir zwei in das bereits erstellte Panel ziehen. Im ersten Panel erstellen wir jetzt die Ansicht für ein
Labor. Für das Ausklappen des Inhaltes platzieren wir am rechten Rand ein Label mit der Aufschrift
"Termine“. Das linke Label-Element mit der Aufschrift "Labor -Regelungstechnik", enthält lediglich die
Bezeichnung, ist aber für die weitere Verwendung nicht von Bedeutung. Beim ersten Panel legen wir
anschließend noch die Höhe fest, und zwar so, dass das Bild und der Text der beiden Labels gerade
noch so sichtbar sind. Anschließend wählen wir das zweite erstellte Panel aus und legen dessen Höhe
deutlich größer fest, als die des ersten Labels mit dem Bild und Texten. Außerdem platzieren wir darin
noch ein Label, das später den Labor-Termin anzeigen soll.
Abbildung 31: Zusammengeklapptes Layout
Wir fahren anschließend mit dem Verhalten des Labels "Termin", das durch einen Klick den Labortermin
anzeigen soll, fort. Hierfür wählen wir das Label aus, klicken im "Event-Tab" auf "add event" und wählen
die Option "set active panel" aus. Mit der Auswahl des ersten Panels (Bild+Text) weißen wir das Event
zu. Mit der Auswahl des Labels mit der Aufschrift " Labor -Regelungstechnik" fahren wir, wie schon mit
dem ersten Panel und der Erstellung eines Events fort, wählen aber als aktives Panel, das Zweite mit
dem Labor-Termin aus.
04. August 2015
31 Prototyper Tutorial
Die Erstellung des Layouts und dessen Verhalten ist nun abgeschlossen. Um das Verhalten simulieren
zu können, markieren wir alle erstellten Komponenten und fügen durch Copy & Paste noch zwei bis drei
weitere in das Layout ein. Das Layout sollte anschließend wie in der Abbildung auf der nächsten Seite
aussehen. Durch einen Klick auf "Termine" wird das zweite Panel aktiv gesetzt und die weiteren Labor-
Elemente darunter werden weiter nach unten verschoben. Durch einen erneute Klick auf "Termine" wird
das Panel wieder auf unaktiv gesetzt und die verschobenen Elemente rücken wieder an ihre
ursprüngliche Position zurück.
Abbildung 32: Ausgeklapptes Layout
Das dynamische Panel kontrolliert die Höhe der Elemente automatisch. Wird also die Höhe eines
Elementes geändert, werden alle darunterliegenden Elemente verschoben.
Diese Verschiebung lässt sich selbstverständlich auch mit einem horizontalen Layout durchführen. Dafür
muss lediglich, die zu Beginn festgelegte Ausrichtung des Layouts auf "horizontal" gesetzt werden.
Ein solch horizontales Layout ist aber auf Smartphones nicht zu empfehlen.
04. August 2015
32 Prototyper Tutorial
Adaptive Layouts
Da die App der Hochschule nicht nur für Smartphones verwendet werden soll sondern auch auf
Tablets und größeren Geräten wie All-in-one Geräte eine gute Figur bezüglich des Layouts
machen soll, muss das Design dahingehend optimiert werden. Wichtige Faktoren sind die die
Größe des Gerätes sowie die Auflösung. Für die Optimierung kommen adaptive Layouts zum
Einsatz.
Prototyper bietet auch hier nützliche Tools an, um den erstellen Prototypen auf verschieden
großen Geräten zu simulieren. Einerseits kann hier ein Event erstellt werden, das auf die Größe
des Bildschirms ("on window resize") reagiert, andererseits können zwei Konstanten im
Expressions Builder die Länge sowie Breite des Bildschirmes prüfen.
Am genannten Beispiel der Hochschule wollen wir hier die Geräte Smartphones sowie Tablets
verwenden. Natürlich müssen, für jeden der beiden Gerätegrößen ein eigenes Layout, mit
selben Inhalt erstellt werden.
Um jetzt festzulegen welches Layout für Smartphone bzw. Tablets verwendet werden soll,
wählen wir im Layout den Hintergrund aus und klicken auf "add event". Durch Auswahl von "on
window resize" und anschließend "add condition" können wir die Bedingung wie folgt festlegen.
Abbildung 33: Bedingung Layout Smartphone/Tablet
Sobald wir die Bedingung definiert haben, fahren wir mit einem Klick auf "Ok" fort. Natürlich
muss für die Bedingung noch eine Zuweisung erfolgen. Dafür wählen wir über den Button "link
to" das Layout für Smartphones aus.
Den gleichen Vorgang wiederholen wir für das Tablet-Layout, wählen aber eine andere
Gerätegröße als Bedingung aus (z.B. größer 320 Pixel).
Jetzt können wir das Layout für Smartphones und Tablets simulieren.