インライン・フレームでレンダリングされたコンポーネントは、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
ファイルに定義されているGothicと「プレーン」スタイル間で切り替えます。
選択ごとに適用されたCSSクラス間で切り替えると、変更内容を反映するようにコンポーネント内のフォント・サイズが調整されます。
「ステップ15: ページの「元に戻す」および「繰返し」動作との統合」に進みます。