ステップ2: ローカル・コンポーネントのレンダリング構造のレビュー

このステップでは、ローカル・コンポーネント用に作成されたデフォルト・ファイルの構造をレビューします。

単純なHello World例の場合、4つのJavaScriptオブジェクトおよびコード行の数は多すぎるように見えますが、これはさらに複雑なコンポーネントを構築し、Oracle Cloud Sites Serviceページのライフサイクルを持つインタラクションを処理するための基本を提供するためのものです。

ローカル・コンポーネントの構造を確認するには:

1. Oracle Content Managementホーム・ページで、「開発者」をクリックします。

   「開発者」ページが表示されます。

2. 「すべてのコンポーネントの表示」をクリックします。

3. メニューから、「ローカル・コンポーネントの作成」を選択します。

4. A_Local_Componentなど、コンポーネントの名前を入力します。

5. 説明を入力します(オプション)。

6. 「作成」をクリックします。

   これを実行すると、コンポーネントのリストにA_Local_Componentという名前のコンポーネントが表示されます。

1. Oracle Content Managementデスクトップ同期クライアントを使用して、コンポーネントを検索し、それをファイル・システムと同期させます。

   デスクトップ・クライアントがない場合は、すべてのコンポーネントを表示し、Oracle Content Managementインタフェースの「コンポーネント」ページでコンポーネントを選択し、ドリルダウンしてファイルを表示できます。

2. コンポーネントの下にあるファイルをリストする場合は、次のようなファイルが表示されます。

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

3. /assetsディレクトリにあるrender.jsファイルを開きます。

   render.jsファイルの主要なポイントは次のとおりです。

   • JavaScript AMDモジュールとして構造化されるため、ページで必須にできます。

   • これには、Oracle Content Managementページの一部としてすでにロードされているKnockoutJSおよびJQueryへの参照も含まれています。

render.jsファイルの構造を考えます。

render.jsファイルのコンテンツには、2つのJavaScriptオブジェクトがあり、これは必要なOracle Content ManagementコンポーネントのAPI (sampleComponentFactoryおよびSampleComponentImpl)を実装しています。これらのオブジェクトは、コンポーネントに基づいたKnockoutJSを作成するための実装例です。これらのオブジェクトの実装は、使用しているテクノロジに基づいて変化します。

• sampleComponentFactory

  • このオブジェクトは、render.js AMDモジュールによって返されます。

  • これは非常に単純なファクトリ・オブジェクトであり、1つのcreateComponent()インタフェースを実装しています。

  • さらに複雑な実装では、viewModeパラメータに基づいてコンポーネントの別の実装を返すために渡されるargs値を使用できます。これにより、サイト・ビルダーと比べると、かなり軽量に実行時のコンポーネントを実装できるようになります。

• SampleComponentImpl

  • このオブジェクト内の主な関数はrender関数で、ページのコンポーネントをレンダリングする際に使用されます。

    Knockoutコンポーネントをページにレンダリングするには、render関数は動的にテンプレートをページに追加してから、viewModelバインドをテンプレートに適用します。

  • 残りの実装では、viewModelパラメータとテンプレートの初期化、およびページとコンポーネント間のメッセージ送信を処理します。

render.jsファイル内の最後の2つのオブジェクト(sampleComponentTemplateおよびSampleComponentViewModel)は、コンポーネントに対してカスタムの実装を提供します。次の実装は、要件によって異なります。

• sampleComponentTemplate

  • このオブジェクトではKnockoutJSテンプレートの作成を提供しています。これは、コンポーネントですべてのデータが初期化されてから表示を試みるまで待機します。

• SampleComponentViewModel

  • viewModelはコンポーネントのかわりにOracle Content Managementによって格納された情報を取得し、そのデータに基づいて適切にコンポーネントをレイアウトする方法を選択します

  • 一般的なKnockoutオブザーバブルはテンプレートで使用され、コンポーネントのかわりに格納されたメタデータへのアクセスを処理します。

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • トリガーとアクションの統合:

    トリガー: ページの他のコンポーネントのアクションにバインド可能なコンポーネントからOracle Content Managementトリガーを呼び出す関数。

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    アクション: コンポーネントが指定されたペイロードでアクションを実行するように指示されたときにコールバックを処理する関数。

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    コールバックは必要に応じて登録済アクションを実行します。

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • コンポーネント・ライフサイクルへのサブスクリプション:

    • コンポーネントの初期化: すべてのデータがフェッチされるまでコンポーネントはレンダリングされません。これはKnockoutオブザーバブルによって処理されます。

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

      必要なプロパティの初期値を取得します。これはコールバックによって処理され、データを取得します。

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • メタデータの更新: ユーザーが「設定」パネルを起動してデータを更新するときなど、コンポーネントのかわりに格納されたコンポーネント・メタデータが変更されるたびに、コールバックします。

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));