ビジュアル・アプリケーションのプレビュー

ビジュアル・アプリケーションを公開する前にプレビューおよびテストするには、2つの方法があります。「プレビュー」アクションを使用すると、公開時に表示されるように、Webアプリケーションを別のブラウザ・タブで確認できます。このメソッドは、特にアプリケーションがさらに構築されると、全体的なレイアウトおよび機能を確認するのに最適です。一方、ページ・デザイナで行ったページの変更をすばやくチェックするには、ライブ・ビューを使用します。

ライブ・ビューを使用して、ページの動作をすばやく確認します。ライブ・ビューは、「ページ・デザイナ」で現在表示しているページのテストおよびデバッグに使用できるツール内プレビューです。ライブ・ビューでページをテストするには、ページ・デザイナでページを開き、ツールバーでライブを選択します:

図liveview.pngの説明
「ライブ」をクリックすると、ページがキャンバス領域内の対話モードに切り替わり、そこでコンポーネントをクリックして、編集時に変更を即時に表示できます。たとえば、ビジネス・ルールを作成した後、ライブ・ビューに切り替えて値を入力し、ルールがトリガーされたことを確認します。このようにして、ライブ・ビューでは、別のプレビューを待たずに変更の影響をすぐに確認できるため、高速で反復的な設計が可能になります。
ライブ・ビューでは、必要なコンテキストが欠落している場合でも、アプリケーション・コードを微調整してページをレンダリングすることもできます。たとえば、フロー・レベル変数によって指定された入力パラメータ値がページに欠落している場合、アクション・チェーンでRESTをコールして、ページが機能するのに最適なオブジェクト・レコードを検索することで、欠落しているコンテキストを移入できます。これを行うには、欠落しているフロー・レベル変数に依存するアクション・チェーンを更新して、$env.dtのチェックを追加し、ページがレンダリングできるモック値を指定します。たとえば:
```
define([
  'vb/action/actionChain',
  'vb/action/actions',
  'vb/action/actionUtils',
], (
  ActionChain,
  Actions,
  ActionUtils
) => {
  'use strict';

   class vbEnterListener extends ActionChain {

     /**
     * @param {Object} context
     */
    async run(context) {
      const { $page, $flow, $application, $constants, $variables } = context;
      if (context.$env.dt === true) {
        $variables.heading = 'Hello from this side';
        return;
      }
      $variables.heading = 'Hello from that side';
    }
  }

  return vbEnterListener;
}); 
```
ページがライブ・ビューで実行されるたびに、dtをtrueに設定して、$envコンテキストがアクション・チェーンに渡されます。必要なコンテキストなしでページをレンダリングするだけで、独自のアクション・チェーン(既存のvbEnterチェーンも使用)をライブ・ビューでのみ実行するように定義できます。

リンクを使用して現在のページから移動するなど、ライブ・ビューの一部の動作が期待どおりに動作しない場合があります。アプリケーションをより完全にテストする準備ができたら、「プレビュー」を使用します。
「プレビュー」を使用して、ユーザーに表示されるアプリケーションをテストし、他のユーザーと共有する前にその動作をテストします。プレビューでは、新しいブラウザ・タブにwebアプリケーションが表示され、公開時のアプリケーションの動作が示されます。 UIとレイアウトの変更、アプリ内のページ間のナビゲーション、外部ページへのリンク、および実際のユーザーに影響を与えることなく、データを追加および編集するとどうなるかをテストできます。アプリケーションをプレビューするには、ヘッダーの「プレビュー」をクリックします:

図vb-preview.pngの説明

アプリのプレビューURLはチーム・メンバーと共有できないことに注意してください。チーム・メンバーに変更を表示する場合は、「ステージ」アクションを使用して、共有できるURLを取得する必要があります。

ノート:

選択するオプションはプリファレンスの問題ですが、プレビューを使用すると、フォーム・ファクタが少しわかりやすくなります。ライブ・ビューでは、プレビューを待たずに、デザイナ自体からページ上の対話をすぐにテストできます。ただし、「ライブ」ビューは「プレビュー」の代わりにはなりません。また、「ライブ」ビューの一部の動作が期待どおりに機能しない場合があります。このため、テストのニーズに応じて、アプリケーションのプレビューとテストに両方のメソッドを使用することになります。