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.

Order

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.

Align

When multiple components are selected, you can align them collectively using the context menu.

Align Left

Align the selected components to the left.

Align Top

Align the selected components to the top.

Align Right

Align the selected components to the right.

Align Bottom

Align the selected components to the bottom.

Align Horizontal Center

Align the selected components to the vertical center.

Align Vertical Center

Align the selected components to the horizontal center.

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.

Note

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.

Layout Info

This feature displays the X/Y coordinates and the width and height of a UI component when it is selected.
You can choose which property values to display from Display Info located at the top right of the editor.

Item	Description
X/Y	Displays X and Y values.
Width/Height	Displays width and height values.

Note

If decimal values are set, the displayed values will be rounded.

Appearance

This feature allows you to switch the appearance mode of the displayed UI.
You can edit the UI while checking the display in each appearance mode.
You can select the appearance mode to display from Appearance located at the top right of the editor.
This feature was added in v4.1.0.

Item	Description
Light	Displays the UI in light mode.
Dark	Displays the UI in dark mode.

Multi-Event Control

This feature controls the simultaneous submission of different actions from different components placed in the UI.
You can choose whether to allow simultaneous submission from Multi-Event Control located at the top right of the editor.

Item	Description
Allow	Allows simultaneous submission of different actions from different components.
Restrict	Prevents simultaneous submission of different actions from different components.

Language

This feature allows you to switch the language of the displayed UI.
If language-specific settings are configured in each component’s properties, you can edit the UI while checking the display in each language.
You can select the language to display from Language located at the top right of the editor.

Item	Description
Default	Displays the UI in the default state.
EN - English	Displays the UI in English.
JA - Japanese	Displays the UI in Japanese.