ビジュアル・アプリケーションへのWebアプリケーションの追加
ビジュアル・アプリケーションは、すべてのwebアプリケーションのコンテナです。 これには、デスクトップおよびモバイル・デバイスにデプロイできるwebアプリケーションをいくつでも含めることができます。
新しいWebアプリケーションの作成
ビジュアル・アプリケーション内に複数のwebアプリケーションを作成できます。 各webアプリケーションは独立していますが、すべてビジュアル・アプリケーションで定義されたデータ・ソースを使用できます。
新しいWebアプリケーションを作成するには:
- ナビゲータで「Webアプリケーション」をクリックして「Web Apps」ペインを開きます。
ビジュアル・アプリケーションの各webアプリケーションの構造表現は、「Web Apps」ペインに表示されます。 webアプリケーションが作成されていない場合は、メッセージと+ Webアプリケーション・ボタンが表示されます。
「図webapp-no-apps.pngの説明」 - 「Web Apps」ペインで、「+ Webアプリケーション」またはWebアプリケーションの作成アイコン(
)をクリックします。 - 「Webアプリケーションの作成」ダイアログ・ボックスで、一般情報の下の「アプリケーション名」フィールドに名前を入力します。 入力した名前は、「Web Apps」ペインでアプリケーション表示名として使用されます。 大文字および小文字を指定できますが、名前は小文字に変換されます。
- 使用可能なテンプレートに基づいてアプリケーションのナビゲーション・スタイルを選択します:
- あとでアプリケーション・ナビゲーションを設計する場合は、ナビゲーション・コンポーネントなしでwebアプリケーションを作成するには、「なし」を選択します。
- 「ナビゲーション・ドロワー」を選択して、ナビゲーション・ドロワーを使用してwebアプリケーションを作成します。ナビゲーション・ドロワーには、別のパネルにアプリケーション・メイン・ナビゲーション・メニューが表示されます(ユーザーは、アプリケーション・ヘッダーの
をクリックしてこのナビゲーション・メニューに移動します)。
- アイテム間のナビゲーションを可能にするタブ・バーが下部にあるwebアプリケーションを作成するには、「下部タブ」を選択します。
- ナビゲーション・ドロワーまたは下部タブを選択した場合は、ナビゲーション・アイテムで各アイテムの名前を指定します。 「アイテムの追加」をクリックして必要な数だけ追加するか、
をクリックして不要なものを削除します。 各ナビゲーション・アイテムは、関連するページを個別のflowにグループ化します。 フローには1つ以上のページを含めることができ、通常はビジネス機能別にページをグループ化するために使用されます。 たとえば、経費アプリケーションを作成している場合は、2つのナビゲーション・アイテムがあります: 経費を要約するページをグループ化し、ユーザーが経費精算書を作成および編集できるようにするためのMy Expense Reportsというページと、マネージャが経費精算書を承認または否認するページをグループ化するためのAdministrationという別のページ。
新しいwebアプリケーションが「Web Apps」ペインに表示され、アプリケーション・ホーム・ページとしてデフォルトで作成されるflowname-startページが開きます。 このページは、デフォルト・フローのデフォルト・ページ(ページおよびフローの横にdefaultとバッジ付け)であり、ユーザーがアプリケーションを実行したときに最初に表示されるページです。
「Web Apps」ペインでアプリケーション・ノードを展開し、そのアーティファクトとファイルを表すノードとサブノードを含むアプリケーション構造を表示します。 たとえば、ナビゲーション・ドロワーテンプレート(デフォルトのナビゲーション・アイテムを含む)を使用するwebアプリケーションのツリー・ビューを次に示します:
図new-web-app-structure.pngの説明
各ナビゲーション・アイテムに対してフローが生成されるため、それぞれ独自の初期ページ(item-1-start、item-2-startなど)を持つ複数のフロー(item-1、item-2など)が表示されます。 テンプレートとして「なし」を選択した場合は、単一のページ・フロー(main)が表示されます。
shell-というプレフィクスが付いたフラグメントは、アプリケーション全体で共通のインタラクション・セットを提供し、ユーザーがUIをナビゲートして操作するのに役立ちます:
shell-headerは、ブラウザで最上位の要素として表示されるグローバル・ヘッダーを定義します。 会社のロゴ、アプリケーション名およびユーザー・プロファイルに加え、他のアクションやユーティリティも含まれます。shell-footerは、連絡先詳細や著作権情報などの情報コンポーネントを定義し、ブラウザの下部に表示されます。shell-drawerはナビゲーション・ドロワー・テンプレートに固有で、アプリケーションのナビゲーション・メニューを形成する項目を個別のパネルに定義します。
page-headerフラグメントは、シェル・フラグメントに加えて、ページのメイン・コンテンツの上に表示されるページ固有のコンテンツを定義します。 page-headerフラグメントを直接操作することはありませんが、「ページでこのフラグメントをカスタマイズ」を使用してカスタム・ページ・レベルのヘッダーを作成できます。
アプリケーションが作成されたら、「ページを設計および開発」の準備ができました。 また、「デザイナ」について理解しておくこともできます。
ヒント:
Webアプリケーション・テンプレートは、応答性の高いレイアウトに貸し出され、小さい電話からワイド・スクリーン・デスクトップまで、ユーザー画面のサイズを調整できます。 ナビゲーション・ドロワー・テンプレートを使用するwebアプリケーションの例を次に示します:
フォーム・ファクタがモバイル・デバイスに変更されると、ユーザーがをクリックすると、ヘッダー・アイテムがドロワー・パネルにどのように移動するかを確認します。 また、アプリケーション・タイトル(この例ではMy Application)は、ページ・タイトル(Item 1)に置き換えられます。 グローバル・ヘッダー(会社のロゴとアプリケーション・タイトルを含む)は、デスクトップ・モードでのみ表示されます。 アプリケーション・ナビゲーション・アイテムおよびヘッダーおよびフッターの要素をカスタマイズするには、「アプリケーション・ヘッダー、フッターおよびナビゲーション・アイテムの編集」を参照してください。
既存のモバイル・アプリケーションをWeb PWAとして実行
モバイル・アプリケーションは、Visual Builderでサポートされなくなりました。 モバイル・アプリケーションはもう作成できませんが、既存のモバイル・アプリケーションをwebアプリケーションに変換して、Progressive Web App (PWA)としてデプロイすることは可能です。
これを行うと、QRコードを生成できます。QRコードを使用すると、ユーザーはすばやくスキャンして、テストおよび本番用にモバイル・デバイスにアプリをインストールできます。 これにより、単一のアプリケーションをインストールでき、デスクトップからタブレット、モバイルに拡張できます。 オフライン・サポート用に構成されている場合は、オフラインで作業することもできます。
モバイル・アプリケーションをPWA対応のwebアプリケーションとして移行するステップは、「モバイル・アプリのWeb PWAへの変換」を参照してください。