UI Editor Tutorial 2: Basic Interaction

1. Basic

1. red frame are selected widgets.
2. blue frame is the widget that mouse is hovering over it.

2. Multi-Select

Press ctrl to multi-select / cancle-select widget.

3. Drag Selected Widgets

1. Hold down alt + left mouse button + move, if you see the arrows (all directions) then you can drag it.
2. Anyway, you could also modify position by a configurator.

4. Scale Selected Widgets

1. Hold down alt + right mouse button + move, if you see the arrows (right bottom) then you can scale it.
2. Anyway, you could also modify size by a configurator.

5. Add a Widget

All widgets (except the Root) need to be added to a father (parent) widget that accepts it, and we call such father (parent) widget as Group Type widget (e.g. Group, Tab Group, Scrollable Group).

1. You can find all available widgets in the toolbox.
2. Drag a widget into a Group Type widget.
3. Rendering a green frame if such widget can accept it.

6. Move widget from one Groug to another Group

Sometimes you may want to modify the parent control.

1. You can do this by the menu (right-clicking page) and cut/copy to the selected parent widget.
2. A better way is to press the shiftand move it into the new Group.

Rendering a green frame if such widget can accept it.

7. Adjust Children Widgets Order

In general, all the Group widgets have a children tab in its configurator, showing all children, you can adjust their order by dragging.

8. Menu

Right-click the page to open the menu.

1. All operations will be performed on selected widgets.
2. Basic operations
3. Align: availabe when you select multi widgets.