UIデザイナーの概要
Web アプリを構築するための AppMaster UI Designer のインターフェイスの詳細な説明。
アプリケーションが正常に作成されると、[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 つのメイン パネルで構成されます。
- 外観パネル
- 追加オプションパネル（オプション）
- メディアクエリパネル
- ビジネスロジックパネル
パネルのヘッダーで、項目名をクリックして選択した項目の名前を変更したり、説明を読んだり、ゴミ箱アイコンをクリックして項目を削除したりできます。
外観パネル
外観パネルを使用すると、選択した要素の表示された静的コンテンツとプロパティにアクセスできます。これらの値を対応するフィールドに入力または選択すると、スタイルがキャンバス上の要素にすぐに適用されます。
キャンバス上で要素が選択されていない場合、このパネルには現在のページまたはレイアウトの設定が表示されます。
追加オプションパネル
追加オプション パネルは、追加の設定データまたはオプションを必要とする要素を対象としています。
選択したコンポーネントに応じて、データ ソースを設定するか、オプションを手動で入力できます。
メディアクエリパネル
メディア クエリ パネルを使用すると、定義された各ブレークポイントのアイテム プロパティをオーバーライドできます。
ビジネスロジックパネル
ビジネス ロジック パネルは、要素のすべてのトリガーを提供し、トリガーの起動時に要素の相互作用を確立できるようにします。