Manipulation of Controls

Directory of this page

1 Basic Manipulation of Controls

2 Spatial Position and Size

3 Group and Ungroup

4 Undo and Redo

5 Preview, Save and Publish

1 Basic Manipulation of Controls

1.1Add

• This type of control can be added to the upper left corner of the editing area by clicking on an icon in the library.

• Hold the left mouse button over the icon, drag it to any position in the editing area and release the left mouse button, so as to add a control at this position.

• You can quickly add controls by copying and pasting those which already exist in the editing area.

1.2Select

• By clicking on the control in the editing area, you can switch between checked and unchecked states.

• By clicking on the control layer in the navigation bar, you can switch between checked and unchecked states.

• Multiple controls are selected by clicking on the control in the editing area while holding down the CTRL key.

1.3Edit

Select the widget to be edited. Customize the pattern of the widget and set the device and data flow according to the different requirements on the setting panel on which the widget appears (under multiple selection state, the last widget selected is shown).

1.4Delete

When a control is selected, you can delete it by pressing the Del key or clicking on the Delete button on the toolbar.

2 Controls Position and Size

2.1 Drag/drop and change position

Click the widget with a mouse to select it; then the widget can be dragged to change its position in the edit region. Drag the size control points of the widget to change the widget size.

2.2 Align

When more than one control is selected in the editing area, the Align button will appear in the toolbar. You can click them to align selected controls with reference to a redborder control.

2.3 Distribute

When more than two controls are selected in the editing area, the Distribute button will appear in the toolbar. You can click them to distribute selected controls evenly in the corresponding direction.

2.4 Set size via toolbar

Using a size input box in the toolbar, you can accurately control the size of the selected control. You can scale up and down by turning on “Keep Aspect Ratio”.

2.5 Control the stacking order of controls through layer navigation

When controls are stacked together, upper controls will cover lower controls when displayed. By dragging and dropping layers in the layer navigation, you can change the relationship between upper and lower controls.

3 Group and Ungroup

Multiple controls are grouped together so that they can be operated at the same time.

3.1 Combine selected controls into a group

By clicking on the Group button in the toolbar, the selected controls can be combined into a group.

3.2 Edit within a group

After selecting a group and double-clicking it, you can enter this group and edit internal controls again.

3.3 Back to parent group

Double click the blank of the edit region to exit the current editing group and return to the father group (if it exists).

3.4 Ungroup

After selecting a group and clicking on the Ungroup button in the toolbar, you can separate controls from the group.

4 Undo and redo

Currently, undo and redo support only the following operations.

⊳ Add and delete.

⊳ Operations that change control position and size.

⊳ Group, ungroup, enter, and exit.

5 Preview, Save and Publish

5.1 Preview

By clicking on the Preview button in the toolbar, you can view the current editing area in fullscreen mode, where only the page you are editing is shown.

5.2 Save and Publish

By clicking on the Save button in the toolbar, you can save the application that is currently being edited. This operation will save all pages being edited.

Shortcut