Views Overview

A view represents a single screen on a mobile phone or tablet. Each application has at least one view. Each view is uniquely identified in the application by its path.

A view consists of two parts: an XML part describing all the components on the view, and a JavaScript part containing all the logic for the view.

Main view

Each application must have a main view. The main view is the view with the path main. This view is automatically created for you when you create a new application.

View components

Each visual element in the view is called a component. A component could be some text displayed to the user, an input field, a button, or many other possibilities. For a complete list of available components, see View Components.

Here is an example with a heading and info field:

<?xml version="1.0" encoding="UTF-8"?>
<view title="Main Menu">
    <heading>A heading</heading>
    <info>Hello, world!</info>
</view>

Variables and input fields

To define a input field (such as a textinput) on a view, a variable must be declared in which the value can be stored. The variable in which the value is stored is specified with the bind attribute. The type of the variable must also be specified (see Attribute & Variable Types for a list of possible types). Example:

<?xml version="1.0" encoding="UTF-8"?>
<view title="Main Menu">
    <var name="some_value" type="string"/>

    <textinput label="Enter a value" bind="some_value" />
</view>

View structure and links

When navigating links, a stack is built containing the history of the views. An analogy is a stack of paper, in which each view is a sheet of paper. When a view is opened, the sheet of paper is added on the stack. When the user closes the view (for example by pressing back), the view is removed from the stack.

Circular links are not allowed - the same view may not appear twice on the stack. To return to the main menu, dismiss links may be used. These are special links that remove views from the stack, instead of adding them to the stack.

For details on defining links, see Links.

Linear flows

Assume we need a linear flow with 5 steps, with one view for each step. To create a flow like this, each view will contain a link to the next view. After the last step, we return to the main menu by using a dismiss link.