UI Apps

There are two types of applications in DRAW:

• UI App: UI Apps are frontend applications with a user interface. These run on a device which has a screen (smartphone, tablet, laptop). UI Apps run in web browsers or can be wrapped in e.g. Electron.

• Service App: Service Apps are backend applications which don't have a user interface and will run on a device which don't have a screen (a server, an IoT device). They run on top of node.js.

UI App

The UI Application brick can be drag-and-dropped from the Project Editor’s Marketplace. By default, an UI Application automatically gets a Home screen.

All available Screens can be drag-and-dropped from the Marketplace into the Project Editor and they are part of the UI design of the application.

The App can be opened and tested by running it on a smartphone/tablet or in a new tab using the UI App contextual menu items Share or Run in browser.

Screenflow editor

The Screenflow Editor provides a way to create and edit all the Screens used in an App or in a screen, together with their interaction way through transitions defined between the Screens.

Here, the user can define which is the initial screen, known as the Home screen, represented by the blue play button and create transitions between Screens by using the Create transition arrow. Editing an existing transition can be done from the yellow arrow, which will point to the Screen sub-editor. If a transition was defined as a UI action in a Screen, the referenced screen and the transition are automatically reflected in the screenflow.

The App can be opened either in a new tab, either by scanning the QR code with a smartphone/tablet from the upper-right buttons Open App in new tab or Share App. If the App is running, any modifications done in the UI App Editor are reflected real-time in the opened App on the device.

Properties editor

An On load action can be defined. It is triggered when the application starts. One typical use it to set the Theme of an application.