Tutorial -...

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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.


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).


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


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


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


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


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


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


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


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/

http://www.justinmind.com/support/complex-search/

04. August 2015


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


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


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


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.

Tutorial -...

Documents

Transcript of Tutorial -...