アプリの構築

アプリケーションを構築するには、レイアウトとページを作成し、それらにコンテンツを入力し、Web アプリの対話を設定する必要があります。

レイアウト

先ほど、レイアウト の概念を紹介しました。レイアウトの作成を開始するには、まずアプリケーションの構造の概要を説明し、使用するページ テンプレートを特定する必要があります。

何かを見逃しても心配しないでください。必要に応じてレイアウト リストを追加できます。

レイアウト一覧

レイアウト リストには、Web アプリケーションのすべてのレイアウトが表示されます。ここでは、さまざまな操作を実行したり、レイアウトを管理したりできます。

レイアウト リストにアクセスするには、UI デザイナー タブの左側のツールバーの 4 番目のタブを選択するか、ショートカット キー4を使用します。すべてのアプリケーションのレイアウトがここに表示されます。

すべてのアプリケーションには少なくとも 1 つのレイアウトが必要です。新しいアプリケーションを作成すると、選択したアプリケーション テンプレートに応じて 1 つまたは複数のレイアウトが自動的に作成されます。そのうちの 1 つは **デフォルト** としてマークアップされています。

レイアウト リストでは、レイアウトに対して次のアクションを実行できます。

• 選択する、
• 新しく追加する、
• 名前を変更し、
• 重複、
• 消去。

デフォルトのレイアウト

デフォルトのレイアウトは、新しいページを作成するときにレイアウト リストから自動的に選択されます。ただし、必要に応じて、これを別のレイアウトに置き換えることができます。

デフォルトのレイアウトを使用すると開発速度が向上するため、最も頻繁に使用されるレイアウトをデフォルトとして使用することをお勧めします。一度にデフォルトとして設定できるレイアウトは 1 つだけであることに注意してください。デフォルトのレイアウトを上書きしても、初期レイアウトが削除されない限り、既存のページには影響しません。

デフォルトのレイアウトは、レイアウト リストで青い星アイコンでマークされます。

新しいレイアウトの作成

ページの種類ごとに異なるレイアウトをデザインできます。新しいレイアウトを作成するには、次の手順に従います。

• CTRL/⌘+Lを押すか、UI デザイナーの左側のツールバーからレイアウト リスト (ショートカット4 ) を開き、パネル ヘッダーのプラス ボタンをクリックします。
• 表示されるモーダルにレイアウト名を入力します。ページにレイアウトを割り当てるときにすぐに識別できるように、レイアウトの構造を反映した読みやすいタイトルを使用することをお勧めします。
• レイアウト テンプレートを選択します。
  • ベース:追加要素のない空のテンプレート。認証ページやエラー ページなど、ナビゲーションのないページに適しています。
  • サイドバー左:サイドバー メニューを備えたテンプレート。管理パネル、CMS、ERP などに適しています。
  • トップ メニュー:トップ メニューのあるテンプレート。Web サイトやランディング ページに適しています。
• このレイアウトをデフォルトにする場合は、「デフォルト レイアウト」設定を有効にします。
• 「作成」ボタンをクリックします。

作成できるレイアウトの数に制限はありません。

レイアウト名の変更

レイアウトの名前を変更するには、レイアウト名をダブルクリックして必要な変更を加え、 Enterを押して保存するか、 Escを押して変更を元に戻します。

レイアウトの複製

レイアウトとそのコンテンツおよび設定を複製するには:

1. 複製したいレイアウトの上にマウスを置きます。
2. 「複製」アイコンをクリックします。

複製されたレイアウトは、名前にインデックスが追加されてリストに自動的に表示されます。デフォルトとして設定されたレイアウトを複製した場合、ソース レイアウトは新しく作成されたレイアウトによって上書きされません。

レイアウトの削除

レイアウトを削除するには:

1. 削除するレイアウトの上にマウスを置きます。
2. ゴミ箱アイコンをクリックします。
3. 削除を確認します。

ページにリンクされているレイアウトを削除するには、削除する前にリンクされているページのレイアウトを再割り当てする必要があります。これは、確認モーダルを通じて、またはページごとに手動で行うことができます。

デフォルトのレイアウトを削除するには、別のレイアウトをデフォルトとして設定する必要があります。

❗️ 重要: レイアウトの削除操作を元に戻すことはできません。

レイアウト設定

レイアウト リストで対象のレイアウトをクリックし、左側の設定サイドバーからその設定にアクセスします。

[設定] サイドバーのヘッダーから、名前をクリックして選択したレイアウトの名前を変更するか、レイアウトを削除できます。

選択したレイアウトをデフォルトとして設定し、リンクされているすべてのページをここに表示できます。リンクされたページを編集するには、リスト内でそのページをクリックします。

さらに、レイアウト用のビジネス ロジックを構築することもできます。

レイアウトのビジネスロジック

ビジネス ロジック タブで、アクションを設定するトリガーを選択します。これにより、選択したトリガーに焦点を当てたビジネス プロセス エディターが開きます。

ここでは、ナビゲーションの実装、プロパティの条件付き変更、表示設定の切り替え、データの送信など、1 つ以上のトリガーのアクション フローを作成できます。詳細については、ビジネス プロセスの構築に関するガイドを参照してください。

🔔 アプリケーションのパフォーマンスを最適化するには、バックエンド側で複雑なビジネス プロセスを構築します。

レイアウトの編集

レイアウトは、グローバル コンポーネントおよびページ テンプレートとして、リンクされているすべてのページにすべての変更を自動的に適用します。

レイアウトを編集するには、レイアウト リストで対象の項目を選択し、UI 要素パネルから必要なコンポーネントをキャンバス領域にドラッグ アンド ドロップして追加します。

レイアウトを編集するときは、テンプレートには変更できないページ コンテナ コンポーネントが含まれていることを忘れないでください。これにより、テンプレート内でのページ コンテンツの配置が決まります。ページ コンテナは緑色で強調表示され、レイアウト編集モードでは内部コンポーネントを含めることはできません。コンテンツはページ上で直接定義され、ページ コンテナのサイズはその親コン​​ポーネントによって決まります。

ページ

必要なレイアウトを作成したら、Web アプリ ページの作成を開始するのに最適な時期です。必要なレイアウトを作成したら、Web アプリ ページの作成を開始するのに最適な時期です。各 Web アプリケーション ページは、ターゲット URL によってユーザーの Web ブラウザに表示されるコンテンツを提供します。

ページツリー

ページ ツリーには、Web サイトの構造、つまりサイト ページとそれらのページが格納されているフォルダーが表示されます。ここでは、さまざまな操作を実行したり、ページやフォルダーを整理したりできます。

ページ ツリーを開くには、UI デザイナーの左側のツールバーから 3 番目のタブを選択するか、3 を押します。ここにすべてのアプリケーション ページが表示されます。

すべてのアプリケーションには少なくとも 1 ページが必要です。新しいアプリケーションを作成すると、選択したアプリケーション テンプレートに応じて 1 つまたは複数のページがすでに作成されています。

ページとフォルダーに対して次のアクションを実行できます。

• 選択する、
• 新しいページまたはフォルダーを追加し、
• 名前を変更し、
• ページとフォルダーをフォルダーに移動したり、フォルダー外に移動したり、
• 重複、
• 消去。

インデックスページ

インデックス ページは、アプリケーションの最初のページです。リダイレクトを作成しなかった場合、アプリケーションが実行されると、このページが最初にレンダリングされます。

Index ページにはページ ツリー内の House アイコンがマークされており、別のページに切り替えることはできません。デフォルトでは、このページは自動的に作成されたデフォルトのレイアウトにリンクされていますが、ページ設定で変更できます。

新しいページの作成

Web アプリケーションにページを追加するには:

1. CTRL/⌘+Pを押すか、UI デザイナーの左側のツールバーからページ ツリー (ショートカット3 ) を開き、パネルのヘッ​​ダーにあるプラス ボタンをクリックします。
2. 表示されるモーダルにページ URL を入力します。
3. ページの親フォルダーを選択するか、フィールドを空のままにしてページをルートに配置します。
4. [ページ レイアウト]を選択します。
5. 「作成」ボタンをクリックします。

💡 フォルダーを作成せずにネストされたルートを構築するには、[ページ URL] フィールドにターゲット ページへのフル パス (設定/プロファイルなど) を指定します。この場合、ページのプロファイルはフォルダー設定にネストされて作成されます。

Web アプリケーションのページとフォルダーを無制限に作成できます。

🔔 AppMaster Studio で構築された Web アプリはページ URL によってアプリのルーティングを生成するため、ページ生成フォームではページ URL を正しい形式で使用し、わかりやすくするためにわかりやすい URL を使用してください。

新しいフォルダーの作成

フォルダーを作成してナビゲーションを整理し、ページに適切なルーターを構築できます。新しいフォルダーを作成するには:

• CTRL/⌘+SHIFT+Pを押すか、UI デザイナーの左側のツールバーからページ ツリー (ショートカット 3) を開き、パネルのヘッ​​ダーにあるフォルダー ボタンをクリックします。
• 表示されるモーダルにフォルダー名を入力します。
• ネストされたルーターを作成する必要がある場合は、親フォルダーを選択します。
• 「作成」ボタンをクリックします。

UI要素

アプリのユーザー インターフェイスは、入力フィールド、ボタン、画像、チェックボックス、カレンダー、画像、アイコンなどの要素で構成されており、それぞれが特定の目的を果たします。

AppMaster は、コードを記述してすぐにプレビューする代わりに、ページ上で要素を直接選択して配置できるドラッグ アンド ドロップ ビジュアル エディターを提供します。

要素の追加

キャンバスに要素を追加するには:

1. UI 要素のリストを含む UI 要素パネルを開きます (ショートカット1 )。
2. 必要な要素を選択するか、検索バーを使用します。
3. 選択した要素をページまたはレイアウト キャンバスにドラッグします。

ドラッグ要素をターゲット内に配置するには、要素をターゲット要素の上にドロップします。

要素の前後に要素を追加するには、セパレータが表示されるまでターゲットの境界線の上に要素をドラッグします。

区切り線は親コンテナの方向によって異なります。

• 親コンテナの[方向] が [垂直]の場合、要素は上または下から追加されます。
• 親コンテナのDirection が horizo​​ntalの場合、要素は左または右から追加されます。

要素のカスタマイズ

キャンバスに追加するすべてのコンポーネントには、カスタマイズ可能な設定の包括的なセットが与えられます。要素のプロパティを使用すると、要素の外観と表示されるデータの両方を管理できます。

要素を設定するには:

• キャンバス上で対象のコンポーネントを選択します。
• 右側のサイドバーの最初のタブである「外観」パネルに移動します。
• パネル内で、変更したい特定の設定項目を選択します。
• 指定されたフィールドに希望の値を入力します。

キャンバスはリアルタイムに応答し、調整した内容をすぐに表示します。

追加のガイダンスが必要な場合は、マウス カーソルを設定の上に少し置くとツールヒントが表示され、その設定の機能の簡潔な説明が表示されます。

これらのインタラクティブな機能に加えて、AppMaster は、特別なビジネス プロセス ブロックであるSet PropertiesおよびSet Dataを通じてカスタマイズ機能を強化します。これらのブロックは高度なレベルのアクセスを提供し、Web アプリケーション内の各コンポーネントの設定をプログラムで変更できるようにします。