步骤 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 文件中定义的 Gothic 和 Plain 样式之间切换。

您将注意到，在每个选择的已应用 CSS 类之间切换时，组件内的字体大小将进行调整以反映更改。

继续执行步骤 15：与页撤消和重做行为集成。