ステップ11: 様々なレイアウトのサポート

このステップでは、ユーザーがコンポーネントの表示方法を変更できるようにするためのレイアウトを確認します。

カスタム・コンポーネントでは、ユーザーに選択可能にするレイアウトをいくつでもサポートできます。これらの各レイアウトにより、カスタム・コンポーネントの表示方法が変更されます。レイアウトは、登録データに対するもう1つの拡張機能です。

サンプル・コードでサポートされている3つのレイアウトを確認するには、appinfo.jsonファイルの"componentLayouts"エントリを確認してください

    "componentLayouts": [
      {
        "name": "default",
        "displayName": "IMAGE_LEFT_LAYOUT"
      },
      {
        "name": "right",
        "displayName": "IMAGE_RIGHT_LAYOUT"
      },
      {
        "name": "top",
        "displayName": "IMAGE_TOP_LAYOUT"
      }
    ],

カスタム・コンポーネントに対して「設定」パネルを開くと、レイアウト間を切り替えるためのオプションが表示されます。コンポーネントが選択内容の変化に対応できるようにするために、render.jsファイルに、現在選択されている値を取得し、この値の変化をリスニングするためのコードが含まれています。

render.jsファイルを編集し、SampleComponentViewModelオブジェクトを確認します。

テンプレートで参照されるlayout可観測性があります:
```
self.layout = ko.observable();
```

この値が変化するたびに処理する更新関数があります。

    self.updateComponentLayout = $.proxy(function (componentLayout) {
      var layout = componentLayout ? componentLayout : 'default';
      self.layout(layout);
      self.alignImage(layout === 'right' ? 'right' : 'left');
      self.showTopLayout(layout === 'top');
      self.showStoryLayout(layout === 'default' || layout === 'right');

      self.componentLayoutInitialized(true);
    }, self);

初期化コードでは、レイアウトの元の値が取得され、更新関数が呼び出されます。

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

プロパティ変更リスナーでは、このプロパティに対する変更がチェックされ、更新関数が呼び出されます。

self.updateSettings = function (settings) {
  if (settings.property === 'componentLayout') {
    self.updateComponentLayout(settings.value);
  } else if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
  }
};

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

最後に、sampleComponentTemplateテンプレート・オブジェクトには、この値の変更を反映するコードがあります:

'<!-- ko if: alignImage() === \'right\' -->' +

これらすべての変更内容により、「設定」パネルでのレイアウトの選択や、コンポーネントの更新が可能になります。

ステップ11の結果の確認

サイト・ビルダーがコンポーネントへの変更を選択できるように、サイト内のページをリフレッシュします。
ページを編集モードにします。
コンポーネントをページにドラッグ・アンド・ドロップします。
コンポーネントに対する「設定」パネルを開きます。
「レイアウト」プロパティから「イメージを右」を選択します。

この時点で、"<scs-image>"コンポーネントが表示されるようにコンポーネントが更新されます。

「ステップ12: カスタム・スタイルの定義」に進みます。