User Interface - Main concepts

Screens

By default, an UI App automatically gets a home screen.

New screens can be added from the marketplace. new_screen

The home screen has a blue icon to indicate it is the initial screen. new_screen

When opened, content (buttons, text fields, …) can be added to the screen from the marketplace. new_screen_content

If the app is running, your modifications should appear in real time

Visual Components

The content added to a screen is called Visual Component.

Visual Components Properties (size, position, text, …) can be edited in the Properties Panel. ui_component_properties

Visual Components positioning properties (x and y) can be set manually in pixels, using pre-defined settings (left, top, center, middle, right, bottom) or using a custom Function. ui_component_properties

Visual Components size properties (width and height) can be set manually in pixels, in percentage, or using a custom Function. ui_component_properties

Groups & Layouts

Visual Components can be grouped together. Their size and position properties are then relative to the group.

ui_component_properties

Once created, group settings and content can be modified by clicking on “Edit”.

ui_component_properties

Double clicking outside the group leaves Group edition.

Layouts (vertical, horizontal, grid, …) can be applied to the elements of the group. Each layout comes with its specific sizing and position options. group_layouts

Visual Components can be re-ordered using “Layers” panel to move them out of / in the group or to change their rank in the group (e.g. to change their order in a vertical or horizontal layouts, or to their z-index in an absolute layout) reorder_components

Exercice 2 - First screen

  1. Open App “Notes App”
  2. Add 2 Screens (“New note” and “View note”)

Your app should look like this: exercise_2_screens

  1. Open the Screen ”Home screen”
  2. Add a new Label named “Title”
    • Theme class = “h1”
    • x = center of the screen (2nd tab)
    • Text = “My Notes” (4th tab)
    • Text horizontal pos. = center (4th tab)
  3. Add a new Button named “New note button”
    • Theme class = "black"
    • Position = just below ”My Notes” Label (using mouse)
    • x = center of the Screen (2nd tab)
    • Text = “New note” (4th tab)

Your screen should look like this: exercise_2_screens

← Content OrganizationUser Interface - Functions →