エディタ
エディタにはレイアウトビューとテキストビューがあり、ビューは切り替えることができます。
レイアウトビューはUIエディタのキャンバスモード、テキストビューはUIエディタのテーブルモードです。
それぞれのビューについて説明します。
レイアウトビュー
エディタを使ってUIのレイアウトを作成します。UIを開くとキャンバス領域が表示されます。
レイアウトはコンポーネントと呼ばれるテキストフィールドなどのWeb部品をマウスを使ってキャンバスに配置していきます。
コンポーネントの見た目や動きについては、コンポーネントのプロパティを設定します。
配置
左パネルにあるコンポーネントをマウスでキャンバスに対してドラッグします。任意の場所にドロップできます。
選択
コンポーネントをクリックすると選択になります。
移動
選択したコンポーネントはドラッグにより移動できます。カーソルキーを使うと 1px ずつ移動します。
リサイズ
コンポーネントは選択した後、マウスでリサイズできます。プロパティから Width/Height を設定することも可能です。
複製
コンテキストメニューまたはショートカットからコンポーネントをコピーできます。
削除
コンテキストメニューまたは Deleteキーでコンポーネントを削除できます。
順番
コンポーネントはキャンバス上に自由に配置可能であるため、コンポーネント同士が重なることがあります。コンポーネント同士の重なり順はコンテキストメニューから変更することができます。
前面へ移動
対象のコンポーネントをひとつ前面に移動します。
最前面へ移動
対象のコンポーネントを最前面へ移動します。
背面へ移動
対象のコンポーネントをひとつ背面に移動します。
最背面へ移動
対象のコンポーネントを最背面へ移動します。
整列
コンポーネントを複数選択した場合に、コンテキストメニューから対象コンポーネント群をまとめて整列させることができます。
左揃え
複数選択した対象のコンポーネント群を左揃えにします。
上揃え
複数選択した対象のコンポーネント群を上揃えにします。
右揃え
複数選択した対象のコンポーネント群を右揃えにします。
下揃え
複数選択した対象のコンポーネント群を下揃えにします。
垂直位置
複数選択した対象のコンポーネント群を縦方向で中央揃えにします。
横位置
複数選択した対象のコンポーネント群を横方向で中央揃えにします。
テキストビュー
テキストビューは、UIエディタのテーブルモードです。
UIエディタに配置したコンポーネントを一覧形式で参照し、プロパティを編集と、コンポーネントの削除ができます。
一覧形式では、下記の項目を表示します。
| 項目 | 説明 |
|---|---|
| ID | コンポーネントのIDを表示します。 |
| ラベル | コンポーネントのラベルを表示します。 |
| 幅 | コンポーネントの幅を表示します。 |
| 高さ | コンポーネントの高さを表示します。 |
| X | コンポーネントの配置位置X座標を表示します。 |
| Y | コンポーネントの配置位置Y座標を表示します。 |
| 編集メニュー | コンポーネントのプロパティを編集することができます。 |
| 削除メニュー | コンポーネントを削除することができます。 |
レイアウト情報
UIコンポーネントのXY座標および幅と高さをコンポーネント選択時に表示する機能になります。
エディタ右上の表示情報から表示するプロパティ値を選択することができます。
| 項目 | 説明 |
|---|---|
| X/Y | X/Yの値を表示します。 |
| 幅/高さ | 幅と高さを表示します。 |
外観モード
表示されるUIの外観モードを切り替える機能になります。
各外観モードでの表示を確認しながらUIを編集することができます。
エディタ右上の外観モードから表示する外観モードを選択することができます。
v4.1.0で追加された機能です。
| 項目 | 説明 |
|---|---|
| ライト | ライトモードでUIを表示します。 |
| ダーク | ダークモードでUIを表示します。 |
多重イベント制御
UIに配置された異なるコンポーネントからの別アクション同士の多重送信を制御する機能になります。
エディタ右上の多重イベント制御から多重送信を許可するか選択することができます。
| 項目 | 説明 |
|---|---|
| 許可 | 異なるコンポーネントからの別アクション同士の多重送信が可能になります。 |
| 制限 | 異なるコンポーネントからの別アクション同士の多重送信が不可能になります。 |
言語
表示されるUIの言語を切り替える機能になります。
各コンポーネントのプロパティで言語別設定をしている場合などは、各言語での表示を確認しながらUIを編集することができます。
エディタ右上の言語から表示する言語を選択することができます。
| 項目 | 説明 |
|---|---|
| デフォルト | デフォルト時のUIを表示します。 |
| EN - 英語 | 英語でUIを表示します。 |
| JA - 日本語 | 日本語でUIを表示します。 |