ステップ14: コンポーネントがインライン・フレームでレンダリングされる場合にカスタム・スタイルを使用

インライン・フレームでレンダリングされるコンポーネントは、design.cssファイルに直接アクセスすることはできません。かわりに、コンポーネントでdesign.cssのURLを取得してページに追加するための追加ステップがあります。その後、コンポーネントを更新して、ユーザーが選択したスタイルを反映させます。

コンポーネントにdesign.cssファイルを含めて使用するには、render.htmlファイルの変更が必要となります。

design.cssファイルへのURLを見つけて含めます
スタイル選択クラスの値を、変更されるたびに取得します
選択したstyleClassを反映するようにテンプレートを更新
コンポーネント内の選択したスタイル・クラスへの変更を反映させます
スタイルが変更されたときにインライン・フレームのサイズが必ず変更されるようにします

次に、render.htmlファイルの編集の詳細な手順を示します。

design.cssファイルへのURLを見つけて含めます。

design.cssファイルをページの<head>セクションに動的に追加します。それがロードされた後、インライン・フレームの高さを設定します(スタイルの適用によって変更されている場合があるため)。

次のコードをviewModelオブジェクトに追加します:

// Dynamically add any theme design URL to the <head> of the page
self.loadStyleSheet = function (url) {
    var $style,
        styleSheetDeferred = new $.Deferred(),
        attempts = 100,
        numAttempts = 0,
        interval = 50,
        pollFunction = function () {
            // try to locate the style sheet
            for (var i = 0; i < document.styleSheets.length; i++) {
                try {
                    // locate the @import sheet that has an href based on our expected URL
                    var sheet = document.styleSheets[i],
                        rules = sheet && sheet.cssRules,
                        rule = rules && rules[0];
                    // check whether style sheet has been loaded
                    if (rule && (rule.href === url)) {
                        styleSheetDeferred.resolve();
                        return;
                    }
                } catch (e) {}
            }
            if (numAttempts < attempts) {
                numAttempts++;
                setTimeout(pollFunction, interval);
            } else {
                // didn't find style sheet so complete anyway
                styleSheetDeferred.resolve();
            }
        };
 
    // add the themeDesign stylesheet to <head>
    // use @import to avoid cross domain security issues when determining when the stylesheet is loaded
    $style = $('<style type="text/css">@import url("' + url + '")</style>');
    $style.appendTo('head');
 
    // kickoff the polling
    pollFunction();
 
    // return the promise
    return styleSheetDeferred.promise();
};
 
// update with the design.css from the Sites Page
SitesSDK.getSiteProperty('themeDesign', function (data) {
    if (data && data.themeDesign && typeof data.themeDesign === 'string') {
        // load the style sheet and then set the height
        self.loadStyleSheet(data.themeDesign).done(self.setHeight);
    }
});

スタイル選択クラスの値を、変更されるたびに取得します。

styleClassプロパティの値がいつ変更されたかを追跡する監視可能オブジェクトを作成します:

self.selectedStyleClass = ko.observable();

スタイル・クラスを用意するまでレンダリングできないことに注意してください。このコードを変更します:

self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized();
}, self);

かわりに、次のコードを使用します。

self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);

追加することで、選択したスタイル・クラスの初期値を取得します。

self.updateStyleClass = function (styleClass) {
    self.selectedStyleClass((typeof styleClass === 'string') ? styleClass : 'hello-world-default-style'); // note that this 'hello-world' prefix is based on the app name
    self.styleClassInitialized(true);
};
SitesSDK.getProperty('styleClass', self.updateStyleClass);

styleClassを反映するようにテンプレートを更新します。このコードを変更します:
```
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
```
かわりに、次のコードを使用します。
```
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
```

コンポーネント内の選択したスタイル・クラスへの変更を反映させます。このコードを変更します:

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}

かわりに、次のコードを使用します。

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
    self.updateStyleClass(settings.value);
}

スタイルが変更されたときにインライン・フレームのサイズが必ず変更されるようにします。このコードを変更します:

// create dependencies on any observables so this handler is called whenever it changes
var imageWidth = viewModel.imageWidth(),
      imageUrl = viewModel.imageUrl(),
      titleText = viewModel.titleText(),
      userText = viewModel.userText();

かわりに、次のコードを使用します。

// create dependencies on any observables so this handler is called whenever it changes
var imageWidth = viewModel.imageWidth(),
      imageUrl = viewModel.imageUrl(),
      titleText = viewModel.titleText(),
      userText = viewModel.userText(),
      selectedStyleClass = viewModel.selectedStyleClass();

ファイルを保存してOracle Content Managementインスタンス・サーバーに同期します。

ステップ14の結果の確認

サイト・ビルダーがコンポーネントへの変更を選択できるように、サイト内のページをリフレッシュします。
ページを編集モードにします。
コンポーネントをページにドラッグ・アンド・ドロップします。
コンポーネントに対する「設定」パネルを開きます。
「スタイル」タブに移動します。
design.jsonファイル内で定義されている、ゴシックスタイルと「プレーン」スタイルとを切り替えます。

各選択内容の適用済CSSクラスを切り替えると、コンポーネント内のフォント・サイズが、その変更内容を反映するよう調整されることに気が付くでしょう。

「ステップ15: ページの元に戻す動作と繰返し動作の統合」に進みます。