アプリケーションが正常に作成されると、[UI デザイナー] タブが表示されます。

AppMaster の UI デザイナーは使いやすいように設計されており、魅力的な Web アプリページを簡単に作成できます。

直感的なドラッグアンドドロップインターフェイスを通じて、Web ページをデザインしてコンテンツをシームレスに追加できるため、高度なコーディングスキルは必要ありません。

UI デザイナーは、ユーザーが操作できる 4 つの主要なセクションに分かれています。

左ツールバー
トップパネル
底面パネル
キャンバスエリア
プロパティパネル

左ツールバー

左側のツールバーには、Web サイトを構造化するためのツールが提供されます。このサイドバーの上部にあるアイコンをクリックすると、次のパネルが表示されます。

UI要素リスト
要素ツリー
ページツリー
レイアウトツリー
アセットマネージャー

UI要素リスト(ショートカット: `1` )

UI 要素リストには、 パネルからドラッグしてキャンバス領域に追加できるすべての要素が表示されます。

UI 要素は目的に基づいてカテゴリに整理されているため、アプリに適したウィジェットを簡単にナビゲートして見つけることができます。

要素にすばやくアクセスするには、パネルの上部にある検索バーを使用します。

要素ツリー (ショートカット: `2` )

Elements Tree から、Web アプリの選択したページに配置されたすべてのコンポーネントを管理および整理できます。

ここで、次の要素を操作できます。

アイテムをドラッグしてツリー間で移動します。
コンポーネントの名前を変更し、
キャンバス上の要素の表示状態を変更します (非表示/表示)。

ツリー内の高速検索要素については、パネルの上部にある検索バーを使用します。

ページツリー (ショートカット: `3` )

ページツリーを使用すると、 サイトページを整理および管理できます。ここで新しいページやフォルダーを作成できます。

ページツリーでは、ページまたはフォルダーを複製または削除できます。

パネルの上部にある検索バーを使用して、ツリー内のページまたはフォルダーを高速検索します。

レイアウトリスト (ショートカット: `4` )

レイアウトツリーは、 ページレイアウトの管理に役立ちます。ページツリーと同様に、レイアウトを複製または削除できます。

ツリー内の高速検索レイアウトには、パネルの上部にある検索バーを使用します。

アセットマネージャー (ショートカット: `5` )

アセットマネージャーを 使用すると、Web サイトで使用するためのアセット (ドキュメント、画像、アニメーションなど) のアップロードと整理が容易になります。

開発中にアップロードしたすべてのアセットはアセットマネージャーに保存され、再アップロードせずに再利用できます。

不要になったアセットを削除することもできます。

トップバー

トップバーには、追加のビュー設定セットが用意されています。左側のメニューボタンの横から右に向かって、次のツールセットがあります。

現在のドキュメント: 現在作業中のページまたはレイアウトが表示されます。
ブレークポイント: ブレークポイントアイコンを使用すると、さまざまなブレークポイントを切り替えて、さまざまなデバイスサイズでサイトがどのように表示されるかをプレビューおよび変更できます。
[元に戻す] と [やり直し]: [元に戻す] ボタンと [やり直し] ボタンを使用すると、スタイルの適用や要素の削除など、デザイナーで行った操作を元に戻したり、再適用したりできます。アクションを元に戻すには CRTL/⌘+Z 、アクションをやり直すには CTRL/⌘+SHIFT+Z のショートカットも使用できます。

ボトムバー

下部パネルでは、ページビューをズームまたはサイズ変更できます。

パネルの左側で、キャンバスの高さと幅を設定することで、カスタムページ解像度を設定できます。

右側でスケールを制御できます。

ズームインまたはズームアウト
スケールをパーセンテージで設定する
実際のサイズを設定する
現在のウィンドウを表示領域に合わせる

キャンバス

キャンバスは対話型のワークスペースです。ここでページのコンポーネントを操作できます。ページ上で要素を選択し、位置を変更し、コンテンツを直接編集できます。

また、ページとアプリケーション間で要素をコピー ( CRTL/⌘+C ) および貼り付け ( CRTL/⌘+V ) したり、現在のページ内で要素を複製したり ( CRTL/⌘+D ) することもできます。

プロパティパネル

デザイナーの右側にある [プロパティ] パネルを使用すると、 選択した要素、レイアウト、またはページの外観と動作をカスタマイズできます。

[プロパティ] パネルは 4 つのメインパネルで構成されます。

外観パネル
追加オプションパネル（オプション）
メディアクエリパネル
ビジネスロジックパネル

パネルのヘッダーで、項目名をクリックして選択した項目の名前を変更したり、説明を読んだり、ゴミ箱アイコンをクリックして項目を削除したりできます。

外観パネル

外観パネルを使用すると、 選択した要素の表示された静的コンテンツとプロパティにアクセスできます。これらの値を対応するフィールドに入力または選択すると、スタイルがキャンバス上の要素にすぐに適用されます。

キャンバス上で要素が選択されていない場合、このパネルには現在のページまたはレイアウトの設定が表示されます。

追加オプションパネル

追加オプションパネルは、 追加の設定データまたはオプションを必要とする要素を対象としています。

選択したコンポーネントに応じて、データソースを設定するか、オプションを手動で入力できます。

メディアクエリパネル

メディアクエリパネルを使用 すると、定義された各ブレークポイントのアイテムプロパティをオーバーライドできます。

ビジネスロジックパネル

ビジネスロジックパネルは、要素のすべてのトリガーを提供し、トリガーの起動時に要素の相互作用を確立できるようにします。

UIデザイナーの概要