Skip to content

First Flow

In diesem Tutorial werde ich auf den Bau eines Flows im UI von titan eingehen. Es wird ein Flow gebaut, der Zahlenwerte erzeugt und sie in der Log-Konsole anzeigt. Nach dem Tutorial solltest du folgendes gelernt haben:

  • Aufbau eines Flows
  • Parametrisierung von Bricks
  • Verwendung des Portmapping
  • Sichtbarkeit eines Flows ändern

Los geht's

Rufe die titan Webseite auf und logge dich ein. In der Mitte werden alle Flows aufgelistet. Dazu zählen deine eigenen Flows, die privat oder öffentlich sind, oder öffentliche Flows von dritten.

Hauptmenu

Um einen neuen Flow zu erstellen, klickst du den blauen Button mit dem Plus an. Es erscheint ein Pop-Up-Fenster. Dort trägst du den Namen des neuen Flows ein und klickst anschließend auf FLOW ANLEGEN.

Flow-Anlegen

Nun hast du einen neuen Flow erstellt. Dieser taucht dann in der Flowliste auf. Flows sind beim Erzeugen automatisch privat. Möchtest du die Sichtbarkeit ändern, so klickst du auf den Informationsbutton des Flows. Es erscheint ein PopUp-Fenster mit zusätzlichen Informationen. Hier kannst du die Sichtbarkeit des Flows über einen Schaltriegel anpassen und ihn z.B. öffentlich, das heißt sichtbar für alle registrierten Nutzer, machen.

Flow-Informationen

Nun klickst du einen Flow an, um in den Flow-Editor zu wechseln. Hier kannst du Bricks zu einem Flow zusammenführen. Links befinden sich die Brick Palette. Dort sind alle installierten Brick Packages.

Flow-Editor

Um den Flow aufzubauen, müssen Bricks in den Editor gezogen werden. Dafür klickst du auf ein Brick Package links in der Brick Palette. Es werden dir dann alle enthaltenen Bricks angezeigt. Es erschient für einen Brick immer sein Erscheinungsbild und sein Name.

Flow-Editor-Package

Ein Flow wird immer vom Inlet zum Outlet hin aufgebaut. Daten eines Flows beginnen an den links liegenden Inlets und Daten verlassen diesen wieder auf den rechts liegenden Outlets. Nun ziehst du aus dem testing-Package die Bricks Generator und Display in den Flow Editor. Einige Bricks benötigen beim Verwenden eine Konfiguration. Um einen Brick zu konfigurieren, klicke
einen Brick im Flow Editor an. Rechts öffnet sich dann der Parameter Editor. Dort kannst du die Parameters des Bricks ändern (siehe hier).

Flow-Editor-Bricks

Nachdem die Bricks konfiguriert sind, müssen sie noch verbunden werden. Dabei werden die Outputports eines Bricks mit dem Inputports eines anderen Bricks durch Drag&Drop verbunden.

Verbindungaufbauen

Neben der Verknüpfung zu einem anderen Brick, müssen Bricks auch zum Message Type verbunden werden. Message Type ist ein Datenobjekt, worauf Bricks im gesamten Flow zugreifen können. Sie können Daten hinzufügen und Daten entnehmen. Zuallerst muss das Message Type definiert werden. Hierfür klicke auf den Button Message Type. Es öffnet sich dann ein PopUp-Fenster. Klicke anschließend auf "TYPEN HINZUFÜGEN". Du musst beim Hinzufügen beachten, das neue Datentypen auch zu einem Objekt hinzugefügt werden. Klicke dafür auf das Plus neben messageType. Ein Datentyp besteht aus einem Namen und einem Typen. Optional kann noch eine Beschreibung hinzugefügt werden. Wähle die gleichen Eigenschaften, wie im folgenden Bild. Klicke dann auf "HINZUFÜGEN".

Message Type

Das Message Typ ist gebaut. Nun müssen die Bricks noch mit dem Message Typ verknüpft werden. Bricks, die noch nicht mit dem Message Typ verknüpft sind, besitzen ein roten Port als Hinweis. Klicke auf den Port des Generator Bricks. Es öffnet sich dann ein PopUp-Fenster. Output sind die Daten, die Generator produziert. Global Message ist das neu definierte Message Typ. Klicke auf die CheckBox vom Output und dann auf den Typen Zahlen. Bestätige dann die Verbindung. Klick nun auf den Inputport vom Display Brick und verbinde Zahlen mit dem Input.

Message-Type-Verbinden

Nun ist der Flow gebaut. Er muss nun gespeichert werden, bevor er gestartet werden kann. Klicke hierfür auf das Speichersymbol in der Toolbar. Der Flow kann über den Playbutton gestartet werden.

Flow-Editor-End

Toolbar des Flow Editors

Die Toolbar des Flow Editor bietet folgende Funktionen:

  • Der Play-Button startet oder stoppt einen Flow.
  • Der Save-Button speichert den Zustand des Flows.
  • Der Delete-Button löscht ausgewählte Elemente aus dem Flow.
  • Der Undo-Button macht den letzten Schritt rückgängig.
  • Der Redo-Button stellt den letzten Schritt wiederher.
  • Der Zoom-In-Button zoomt in den Flow Editor rein.
  • Der 1:1-Button setzt die Ansicht zurück auf das Ausgangsverhältnis (1:1).
  • Der Zoom-Out-Button zoomt aus dem Flow Editor raus.
  • Der Log-Button öffnet das Fenster für die Log-Konsole.

Flow-Editor-Zoomtoolbar

Log-Konsole

Die Log-Konsole kann über den Log-Button aufgerufen werden. Klicke nun auf den Log-Button.

Flow-Editor-Logbutton

Es erscheint nach dem Klick die Log-Konsole unten im Flow-Editor. Die Log-Konsole zeigt Log-Zeilen an. Dabei sind Informationen über den Flow und über die Bricks enthalten.

Flow-Editor-Logkonsole

Es ist möglich, die Log-Zeilen nach Level und/oder Brick zu filtern. Die Top-Bar der Log-Konsole bietet folgende Funktionen an:

  1. Das DropDown-Menu ermöglicht dir die Log-Konsole nach gewähltem Level zu filtern. Die vorhanden Level sind ALL, ERROR, WARNING INFO und DEBUG.
  2. Das DropDown-Menu ermöglicht dir die Log-Konsole nach einem gewählten Brick zu filtern.
  3. Der FILTER ZURÜCKSETZEN-Button setzt deine gewählten Filteroptionen aus den DropDown-Menus zurück. Dabei wir die Standard-Option wieder ausgewählt.
  4. Der LOG LÖSCHEN-Button löscht alle vorhanden Log-Zeilen aus deiner Log-Konsole.

Flow-Editor-Logkonsole-nummeriert