1. MVVMアーキテクチャを使用したOracle JETアプリケーションの開発
  2. シングルページ・アプリケーションの作成

5 シングルページ・アプリケーションの作成

Oracle JETには、oj-moduleコンポーネントおよびCoreRouterフレームワーク・クラスが含まれており、これらを使用すると、デスクトップ・アプリケーションのルック・アンド・フィールをシミュレートするシングルページ・アプリケーションを作成できます。

Oracle JETを使用したシングルページ・アプリケーションの設計

Oracle JETには、モデル・レイヤーをビュー・レイヤーから切り離して、その間の相互作用を管理するためのKnockoutが組み込まれています。Knockout、Oracle JETのoj-moduleコンポーネントおよびOracle JETのCoreRouterフレームワーク・クラスを使用すると、スタンドアロン・デスクトップ・アプリケーションのようなルック・アンド・フィールのシングルページ・アプリケーションを作成できます。

シングルページ・アプリケーションに対するOracle JETサポートの理解

通常、シングルページ・アプリケーション(SPA)は、スタンドアロン・デスクトップ・アプリケーションのルック・アンド・フィールをシミュレートするために使用されます。ページ間にナビゲーション用のリンクがある複数のWebページを使用するかわりに、1回のみロードされる単一のWebページがアプリケーションで使用されます。ユーザーの対話によってページが変更された場合は、変更されたページの一部のみが再描画されます。

Oracle JETには、ページ内の仮想ナビゲーション用のCoreRouterクラス、ビュー・テンプレートとviewModelスクリプトを管理するためのoj-moduleコンポーネント、およびモデル・レイヤーをビュー・レイヤーから切り離してその間のバインディングを管理するためのKnockoutを使用したシングルページ・アプリケーションのサポートが含まれています。Oracle JETクックブックでは、CoreRouterクラスを使用する様々な実装を見ることができます。このような実装は、タブを切り替える単純なものから、パラメータや子ルーターを使用するより複雑な例まで様々です。Oracle JETクックブックのCoreRouterデモを参照してください。

シングルページ・アプリケーションをルーティングすると、ページは最初からリロードされず、ページのコンテンツが動的に変更されます。ブラウザ履歴に含め、ブックマーク可能なコンテンツを提供するため、Oracle JET CoreRouterクラスではHTML5履歴のプッシュ状態機能を使用してナビゲーションの動作がエミュレートされます。また、CoreRouterでは従来のページURLのような形式でURLが制御されます。ただし、これらのURLではリソースは存在せず、HTMLサーバーを設定する必要があります。これは、Apache HTTPサーバーのmod rewriteモジュールのようなリライト・エンジン、またはサーブレットのUrlRewriteFilterのようなリライト・フィルタの単純ルールを使用して行われます。

通常、ユーザーがブックマークし、複雑な状態に関連付けられていない少数のビューのみがアプリケーションに含まれている場合は、問合せパラメータを使用します。パス・セグメントを使用して、特にcustomers/cust/ordersなどのネストしたパスに対する、より単純なURLを表示します。

Oracle JETクックブックでは、Oracle JETのoj-module機能を使用してKnockoutバインディングが管理されます。oj-moduleを使用すると、ページ・セクションのHTMLコンテンツをHTMLフラグメントまたはテンプレート・ファイルに格納でき、viewModelを含むJavaScript関数をviewModelファイルに格納できます。

oj-moduleとCoreRouterを一緒に使用すると、モジュール名がルーターの状態であるoj-moduleオブジェクトを構成できます。ルーターの状態が変わると、oj-moduleによって、現在のRouterStateオブジェクトの値に指定されているモジュール名のコンテンツが自動的にロードされてレンダリングされます。

Oracle JETでのシングルページ・アプリケーションの作成

Oracle JETクックブックには、ルーティング用のパス・セグメントと問合せパラメータを使用してシングルページ・アプリケーションを作成するための完全な例とレシピ、およびoj-moduleコンポーネントでルーティングを使用する例が含まれています。使用するルーティング方法に関係なく、アプリケーションを作成するプロセスは同様です。

Oracle JETでシングルページ・アプリケーションを作成するには:

必要に応じて、メインのHTML5ページおよびサポートするJavaScriptを格納するアプリケーションを作成します。詳細は、「Webアプリケーション・ワークフローの理解」を参照してください。

  1. アプリケーションの構造を設計し、アプリケーションに必要なテンプレートおよびViewModelを識別します。

  2. ルーターについて考えられる状態を定義するコードをアプリケーションのメイン・スクリプトに追加し、ojs/ojcorerouterモジュールをrequire()リストに追加します。

  3. 状態遷移をトリガーするコードをマークアップに追加し、現在の状態のコンテンツを表示します。

    ユーザーがヘッダーにあるボタンのいずれかをクリックすると、ルーターの現在の状態に応じてコンテンツがロードされます。

    テンプレートおよびViewModelの作成方法の詳細は、「oj-module要素の使用」を参照してください。

  4. モジュール内のルーティングを管理するには、CoreRouter.createChildRouter()を使用して子ルーターを追加します。

  5. コンテンツまたは表示の完了に必要な残りのコードを追加します。

Oracle JETクックブックのCoreRouterデモを参照してください。このデモには、CoreRouterが実装されており、APIドキュメントへのリンクが提示されています。

oj-module要素の使用

oj-module要素を使用すると、ページ・セクションのHTMLコンテンツをHTMLフラグメントまたはテンプレート・ファイルに格納でき、viewModelを含むJavaScript関数をviewModelファイルに格納できます。

多くのOracle JETクックブックおよびサンプル・アプリケーションでは、oj-moduleを使用してKnockoutバインディングを管理します。

Oracle JETアプリケーションでoj-moduleを使用するには:

必要に応じて、メインのHTML5ページおよびサポートするJavaScriptを格納するアプリケーションを作成します。「Webアプリケーションのワークフローの理解」を参照してください。Oracle JETアプリケーションは、application_folder/src/jsの下のデフォルトのviewsおよびviewModelsフォルダを使用して構築されます。

  1. RequireJSブートストラップ・ファイル(通常はmain.js)で、ojs/ojmodule-elementを、アプリケーションで使用する他のモジュールとともにRequireJSモジュールのリストに追加します。 

    require(['knockout', 'ojs/ojmodule-element-utils', 'ojs/ojcorerouter', 'ojs/ojlogger'', 'ojs/ojresponsiveknockoututils'  
'ojs/ojarraydataprovider', 'ojs/ojoffcanvas', 'ojs/ojknockouttemplateutils', 'ojs/ojmodule-element', 'ojs/ojknockout', 
'ojs/ojbutton', 'ojs/ojmenu', 'ojs/ojmodule', 'text', 'ojs/ojcheckboxset', 'ojs/ojswitch']

  2. ビュー・テンプレートを作成し、デフォルトの場所としてviewsフォルダに追加します。

  3. viewModelスクリプトを作成し、デフォルトの場所としてviewModelsフォルダに追加します。

  4. アプリケーションのHTMLページに、oj-module要素のビュー・テンプレートまたはviewModelを参照するコードを追加します。ルーター構成を取得するには、oj-module要素のconfig属性を、ModuleRouterAdapterによって作成されたkoObservableConfig observableに設定します。 

    <oj-module role="main" class="oj-panel" style="padding-bottom:30px" config="[[moduleAdapter.koObservableConfig]]"></oj-module>

CoreRouterおよびoj-moduleの詳細は、Oracle JETのCoreRouterおよび oj-module APIドキュメントを参照してください。

ヒント:

oj-moduleはシングルページ・アプリケーションに固有ではなく、複数ページ・アプリケーションでコンテンツを再利用するために使用することもできます。ただし、コンテンツを再利用したり、複数のアプリケーション間で共有する場合は、かわりにOracle JET Webコンポーネントを作成することを検討してください。Webコンポーネントは、HTML5 Webコンポーネント仕様に準拠する再利用可能なコンポーネントです。これを使用すると、次のメリットがあります。

  • Webコンポーネントには規約が含まれています。WebコンポーネントのAPIは、そのcomponent.jsonによって明確に定義され、ここには、APIでサポートされているプロパティ、メソッドおよびイベントが、標準的で一般的な自己文書化方式で記述されています。標準化された規約を提供することにより、外部ツールやその他のアプリケーションでこれらのコンポーネントを使用しやすくしています。

  • Webコンポーネントに含まれるバージョンおよび依存性のメタデータにより、サポートされているOracle JETのバージョンや操作に必要な可能性のあるその他のコンポーネントが明確化されます。

  • Webコンポーネントは自己完結型です。Webコンポーネントの定義には、機能するために必要なすべてのライブラリ、スタイル、イメージおよび翻訳を含めることができます。

Webコンポーネント機能についてさらに学習するには、「Oracle JET Webコンポーネントの使用」を参照してください。

oj-moduleのViewModelライフサイクルの使用

oj-module要素ではライフサイクル・リスナーが提供されており、これを使用すると、ViewModelのライフサイクル内の定義された場所で実行する処理を指定できます。

たとえば、ViewModelがView遷移に対して使用される場合、その関連ViewがドキュメントDOMに挿入された後、およびそのViewとViewModelが無効になった後で実行する処理を指定できます。

次の表に、使用可能なメソッドとその使用方法の説明をリストします。

メソッド名 説明

connected()

このオプション・メソッドは、ViewがDOMに挿入された後に起動されます。

このメソッドは、次のタイミングで複数回コールされることがあります。

  • Viewが作成されてDOMに挿入された後

  • Viewが切断されてから再接続された後

  • Viewがアタッチされた親要素(oj-module)がDOMに再接続された後

transitionCompleted()

このオプション・メソッドは、新しいViewへの移行が完了した後に起動されます。これには、古いViewと新しいViewの間の使用可能なアニメーションが含まれます。

disconnected()

このオプション・メソッドは、ViewがDOMから切断されると起動されます。

このメソッドは、次のタイミングで複数回コールされることがあります。

  • ViewがDOMから切断された後

  • Viewがアタッチされた親要素(oj-module)がDOMから切断された後

一部のOracle JETテンプレートにも、oj-moduleのライフサイクル・メソッドを使用するためのスタブ・メソッドがあります。たとえば、navbarテンプレートは、Webアプリケーションのスキャフォールドの際にテンプレートとして使用可能であり、connected()、disconnected()およびtransitionCompleted()のスタブ・メソッドを定義します。コメントは、期待されるパラメータとユースケースを示しています。 

function DashboardViewModel() {
      var self = this;
      // Below are a set of the ViewModel methods invoked by the oj-module component.
      // Please reference the oj-module jsDoc for additional information.

      /**
       * Optional ViewModel method invoked after the View is inserted into the
       * document DOM.  The app can put logic that requires the DOM being
       * attached here. 
       * This method might be called multiple times - after the View is created 
       * and inserted into the DOM and after the View is reconnected 
       * after being disconnected.
       */
      self.connected = function() {
        // Implement if needed
      };

      /**
       * Optional ViewModel method invoked after the View is disconnected from the DOM.
       */
      self.disconnected = function() {
        // Implement if needed
      };

      /**
       * Optional ViewModel method invoked after transition to the new View is complete.
       * That includes any possible animation between the old and the new View.
       */
      self.transitionCompleted = function() {
        // Implement if needed
      };
    }

    /*
     *   Returns an instance of the ViewModel providing one instance of the ViewModel. If needed, 
     *   return a constructor for the ViewModel so that the ViewModel is constructed
     *   each time the view is displayed.
     */
    return DashboardViewModel;
  }

詳細は、 oj-module APIドキュメントを参照してください。