View 1

layer group

welcome_view

We want to create a view with an image, a button and a text display.

  1. Add a New view:

    1. Type: View

    2. Name: Welcome

Image

  1. Click the Add Component tab

  2. Find the Media group

  3. Click Image

An empty image container is added at the top of the canvas.

  1. Click the image on the canvas

  2. Open the Component Properties tab

  3. Click Default Image

  4. Upload an image from your computer

Any image in .png, or .jpg/.jpeg will do for this example.

Text Display

  1. Click the Add Component tab

  2. Find the Text Display group

  3. Click Text

A new text component is added to the canvas, right below the image.

  1. Click the text display on the canvas, and open the Component Properties tab

  2. Open the Component Properties tab and add some text, for instance This is the welcome view

Button

  1. Open the Add Component tab

  2. Find the Buttons group

  3. Click Touchable Text

A new component is added to the canvas, right below the text display.

  1. Click the button on the canvas, and Open the Component Properties tab

  2. Under Data properties, change the text of the button to Thank you!

  3. Find Styling and check the Override box

This disables the Styles setting for the view, and allows you to change how things look manually.

  1. Add a background color to it, so it stands out from the the rest of the canvas. Find Background Color and select a color with the color picker

  2. Find Text Align and set that to Center

  3. Find Font Size and set that to a higher value, like 24

You now have three components in your view Welcome.

Interactivity

Make the Button Work

  • The welcome_view button needs an event to work

    1. Go to the welcome_view and select the View Properties tab

    2. Find Outputs and click New Output

    3. Name the output buttonClick and select type Event

    4. Click Add

    5. Select the button component on the canvas

    6. Select the Component Properties tab

    7. Find On Press

    8. Select buttonClick in the drop down list

The button will now trigger an output event that can be connected to other things.