Manipulation of Controls

1 Basic Manipulation of Controls

1.1 Add

• 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.2 Select

• 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.3 Edit

After the control to be edited is selected, the settings available for this control (the last selected control is displayed if there are multiple choices) will appear in the settings panel. You can tailor the style, setup device and data stream of the control to your needs.

1.4 Delete

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

A control is selected by mouse-click. At this time, you can drag the control to change its position in the editing area; drag a size control point around the control to change its 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

By double-clicking on empty space in the editing area, you can exit the currently edited group and return to the parent group (if any).

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