단계 14: 구성요소가 인라인 프레임으로 렌더링될 때 사용자정의 스타일 사용

인라인 프레임으로 렌더링된 구성요소는 design.css 파일에 직접 액세스할 수 없습니다. 대신 구성요소에 design.css의 URL을 가져와서 페이지에 추가하는 별도의 단계가 있습니다. 그런 다음 사용자가 선택한 스타일이 반영되도록 구성요소를 업데이트해야 합니다.

구성요소에 design.css 파일을 포함하고 사용하려면 render.html 파일을 변경해야 합니다.

  1. design.css 파일의 URL을 찾아 포함합니다.

  2. 변경될 때마다 선택한 스타일 클래스의 값을 가져옵니다.

  3. 선택한 styleClass가 반영되도록 템플리트를 업데이트합니다.

  4. 선택한 스타일 클래스의 변경사항을 구성요소에 반영합니다.

  5. 스타일이 변경될 때 인라인 프레임 크기가 조정되는지 확인합니다.

다음은 render.html 파일 편집을 위한 자세한 지침입니다.

  1. design.css 파일의 URL을 찾아 포함합니다.

    페이지의 <head> 섹션에 design.css 파일을 동적으로 추가합니다. 로드된 후에 스타일 적용으로 변경되었을 수 있으므로 인라인 프레임의 높이를 설정합니다.

    다음 코드를 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);
    }
});

  2. 변경될 때마다 선택한 스타일 클래스의 값을 가져옵니다.

    styleClass 속성 값이 변경될 때 추적할 observable을 생성합니다.

    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);

  3. styleClass가 반영되도록 템플리트를 업데이트합니다. 이 코드를 변경합니다.

    <p data-bind="attr: {id: 'titleId'}, text: titleText"></p>

    이 코드를 대신 사용합니다.

    <p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>

  4. 선택한 스타일 클래스의 변경사항을 구성요소에 반영합니다. 이 코드를 변경합니다.

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

    이 코드를 대신 사용합니다.

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

  5. 스타일이 변경될 때 인라인 프레임 크기가 조정되는지 확인합니다. 이 코드를 변경합니다.

    // 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();

  6. Oracle Content Management 인스턴스 서버에 파일을 저장하고 동기화합니다.

단계 14의 결과 확인

  1. 사이트 작성기가 구성요소의 변경사항을 가져올 수 있도록 사이트의 페이지를 새로고침합니다.

  2. 페이지를 편집 모드로 전환합니다.

  3. 구성요소를 페이지 위에 끌어 놓습니다.

  4. 구성요소에 대해 설정 패널을 불러옵니다.

  5. [스타일] 탭으로 이동합니다.

  6. design.json 파일에 정의된 Gothic 및 Plain 스타일 간을 전환합니다.

    각 선택에 적용된 CSS 클래스 간을 전환할 때 변경사항이 반영되도록 구성요소 내의 글꼴 크기가 조정되는 것을 알 수 있습니다.

단계 15: 페이지 실행 취소 및 재실행 동작과 통합을 계속합니다.