1. UI Components

The UI Components can be used for designing apps. Each component has a unique name, the name is used for data binding (the reference to the object in scripting).

inspector

There are a few built-in component objects.

1. Container components: container, tab view, split view.

2. Input components: button, input field, checkbox, selection dropdown, text area.

3. Basic components: chart, data table, label. The UI Components may have event triggers that can be linked to an adapter.

1. Attributes

name

The name attribute is used for data binding - the reference to the object at runtime. We can get/set the object label, value, or trigger events using the name For example a component with the name my_input: my_input.label, my_input.value, my_input.click()

label

The label attribute is used for displaying the label of the component.

2. Frame and Auto Layout

Frame

The frame represents the location and size of the object on the app canvas. The frame includes origin and size. The origin contains the x-axis and the y-axis which tell the location of the object. The size contains width and height which are the width and height of the object.

Auto Layout

Auto layout is how the object responds when the container size change. There are anchors and sizings. The anchors can be one or all of the values: top, left, bottom, or right.

The sizing can be one or all of the values: width, and height.

You can config and see how it works using the inspector.

auto layout

3. Events

Each object has its own events, we can set up the event to link with an adapter.

You must create a JavaScript Runner adapter to handle events.