UI Editor

The editor has a layout view and a text view, and the views can be switched.
Layout view is the canvas mode of the UI editor, and text view is the table mode of the UI editor.
Each view is described below.

Layout View

Use the editor to create the UI layout. When the UI is opened, the canvas area is displayed.
Layout is done by placing web components, such as text fields etc. called components, on the canvas using the mouse.
For the appearance and behavior of a component, set the component’s property

Component Placement

Drag the component in the left panel to the canvas with the mouse. Can be dropped anywhere.

Component Selection

Click on a component to select it.

Component Movement

Selected components can be moved by dragging. Use the cursor keys to move by [1px].

Component Resize

Components can be selected and then resized with the mouse. It is also possible to set the Width/Height from the property

Duplication

You can copy components from the context menu or from shortcuts.

Component Deletion

Components can be deleted from the context menu or with the Delete key.

Component Arrangement

Since components can be placed freely on the canvas, they may overlap each other. The overlap position between components can be changed from the context menu.

Bring Forward

Moves the target component forward by one.

Bring to Front

Brings the target component to the front.

Send Backward

Moves the target component one step to the back.

Send to Back

Moves the target component to the back.

Text View

Text view is the table mode of the UI editor.
You can browse components placed in the UI editor in a list format, edit properties, and delete components.
The list format displays the following items

Item	Description
ID	Displays the component ID.
Label	Displays the component label.
Width	Displays the component width.
Height	Displays the component height.
X	Displays the X coordinate of the component placement position.
Y	Displays the Y coordinate of the component placement position.
Edit Menu	Component properties can be edited.
Delete Menu	Component can be deleted.

Tips

Tips

A tab component allows another component to be placed in the tab area. Therefore, please note that if you delete a tab component, all components placed in the tab area will also disappear from the list.