Logic Flow
Einführung
Mittels des Logic Flows kann die Frontend-Logik im Mobile Builder implementiert werden. Ein Logic Flow wird bei einem definierten Event ausgeführt, welches von der Elternkomponente abhängt. So hat ein Input andere Events als ein Button. In einem Logic Flow haben Entwickler die Option, Funktionen miteinander zu verketten. So können mehrere Frontend-Funktionen sequentiell ausgeführt werden. Dazwischen können Entwickler Werte in Variablen ablegen und diese später wieder auslesen.
Hinweis: Ein Logic Flow kann nur eine Funktionskette beihnalten. Wenn also merhmals "Start" bei "previousFunction" bei verschiedenen Funktionen in dem gleichen Logic Flow vergeben wird, wird diese zuerst ausgeführt, die im ViewTree weiter oben steht. Die unten stehenden werden ignoriert.
Verfügbare Elternkomponenten
Für den Logic Flow stellt der Mobile Builder verschiedene Elternkomponenten bereit:
- Input
- Button
- Segmented Button
- Segmented Button Item
- Step Input
- Text Area
- Check Box
- Combo Box
- Radio Group
- List
- Icon
- Table
- Switch
- Link
- Image
- Icon Tab Bar
Attribute
| Attribut | Beschreibung |
|---|---|
| controlType | Der Typ des Controls. Hier standardmäßig "LogicFlow" |
| flowId | Automatisch generierte Id des Controls. |
| event | Das Event, bei dem dieser Logic Flow ausgeführt werden soll. Die Events hängen vom Typ der Elternkomponente ab. |
Funktionsweise
Die Funktionsweise des Logic Flows erklären wir anhand eines einfachen Beispiels. In diesem betrachten wir eine View, die aus einem Input und einem Label besteht. Das Ziel ist es, mit Hilfe des Logic Flows den Wert aus dem Input im Label anzuzeigen. Das Label soll immer dann aktualisiert werden, wenn der Text im Input verändert wird.
- Der Logic Flow muss per Drag and Drop zu der gewünschten Komponente gezogen werden. Im Beispiel wird der Logic Flow auf das Input gezogen, denn der Flow soll immer dann ausgeführt werden, wenn sich der Wert im Input verändert.
- Das Event auswählen, bei dem der Logic Flow ausgeführt werden soll. Im Beispiel setzen wir das Event auf "LiveChange".
- Die Funktionsbausteine und Variablen auswählen, die im Logic Flow ausgeführt werden sollen. Dazu die Funktionen per Drag and Drop in den Logic Flow ziehen. Um das Ziel des Beispiels zu erreichen, benötigen wir drei verschiedene Funktionsbausteine: einen Getter, um den Wert des Inputs auszulesen, eine Variable, um den Text zwischenzuspeichern und einen Setter, der den Text in das Label schreibt.
- Die Reihenfolge der Funktionsbausteine bestimmen. Nun werden die Funktionsbausteine innerhalb des Logikflusses angeordnet. Zu Beginn steht der Getter, daher setzen wir previousFunction auf "Start" und nextFunction auf "setter", damit direkt nach dem Getter der Setter aufgerufen wird. Außerdem teilen wir dem Getter mit, welche Komponente (control) und welche Eigenschaft (property) er auslesen soll. Diese soll er dann in der Variable speichern. Der Setter ist die letzte Funktion der Kette. Daher ist previousFunction auf "getter" und nextFunction auf "End" zu setzen. Außerdem teilen wir dem Setter mit, welche Komponente (control) und welche Eigenschaft (property) er verändern soll. Den neuen Wert liest der Setter aus der Variable aus.
Die Logik verfolgen
Über den Entwicklermodus in Ihrem Browser (F12 in Google Chrome) können Sie verfolgen, in welcher Reihenfolge die von Ihnen programmierte Logik ausgeführt wird. Diese Funktion ist für das Debugging der von Ihnen geschriebenen Frontend-Logik hilfreich.
Im Bild unten können Sie verfolgen, wie die Logik aus dem Beispiel oben im Entwicklermodus dargestellt wird.
