단계 13: 인라인 프레임으로 구성요소 렌더링

지금까지 샘플은 페이지에 인라인으로 렌더링된 로컬 구성요소를 보여주었습니다. 인라인 프레임으로 구성요소를 렌더링하도록 선택할 수도 있습니다.

예를 들어, 구성요소가 페이지에 전능하게 업데이트되지 않아서 속성이 변경될 때마다 페이지를 재생성해야 하는 경우 인라인 프레임으로 구성요소를 렌더링하도록 선택할 수 있습니다. 또한 원격 구성요소는 항상 인라인 프레임으로 렌더링됩니다.

이 섹션의 샘플은 로컬 구성요소를 생성할 때 iframe에 렌더링하는 구성요소 생성 옵션을 선택하면 자동 생성되는 파일에서 가져온 것입니다. 그러나 이 파일 집합을 가져와서 원격 서버에 호스팅하면 원격 구성요소에 똑같이 적용할 수 있습니다.

인라인 프레임과 비인라인 프레임 구성요소 간의 유사점

설정 패널

설정 패널은 항상 인라인 프레임으로 페이지에 놓이기 때문에 구성요소가 인라인 프레임을 사용하는지 여부에 관계없이 설정 패널의 코드는 변경되지 않습니다. 두 사용 사례에 동일한 설정 패널 코드를 생성합니다.

Sites SDK API

SDK API는 두 사용 사례에 동일합니다. 동일한 코드를 사용하여 트리거를 발생시키고 작업을 수신하며 속성값을 가져오고 설정합니다. 특정 속성은 두 사례에 적용할 수 없지만(예: 인라인 프레임을 사용하지 않는 구성요소에 "height" 속성을 설정할 수 없음) API는 그대로 유지됩니다. 따라서 두 유형의 구성요소 간에 코드를 복사할 수 있으며 이 자습서에 설명된 예제 코드는 두 사례에 모두 작동합니다.

인라인 프레임과 비인라인 프레임 구성요소 간의 차이점

파일 구조 및 종속성

로컬 구성요소를 생성할 때 iframe에 렌더링하는 구성요소 생성을 선택하면 다음 파일이 자동 생성됩니다. 
<component name>
    assets
        css
            app-styles.css
        js
            jquery.mn.js
            knockout.mn.js
            sites.min.js
        render.html
        settings.html
    appinfo.json
    _folder_icon.jpg

이 파일이 생성되면 페이지에 인라인 프레임으로 구성요소를 즉시 실행할 수 있습니다. 이 구조와 표준 로컬 구성요소 구조 간의 주요 차이점은 다음과 같습니다.

  • JavaScript 종속성:

    • 구성요소가 실행되도록 이 파일의 전체 복사본을 가져옵니다. 이 파일은 샘플 인라인 프레임 구성요소 실행에 필요합니다. 요구사항에 따라 이 디렉토리의 내용을 추가하고 제거할 수 있습니다.

    • 구성요소가 게시될 때 구성요소의 assets 디렉토리 아래의 모든 항목이 공용 사이트로 푸시되기 때문에 js 디렉토리의 모든 항목은 사이트 작성기와 런타임에 모두 사용할 수 있습니다.

    • 참고: 이 파일은 간편한 사용을 위해 생성됩니다. 각 인라인 프레임 구성요소마다 이 파일의 개별 버전을 생성하는 대신, 이 파일을 테마나 다른 공용 위치에 통합해야 합니다.

  • render.html:

    • AMD 모듈인 표준 구성요소의 render.js 파일과 달리 완전한 HTML 문서입니다.

구성요소 "높이" 관리

인라인 프레임 사용의 문제 중 하나는 인라인 프레임 자체의 높이 관리입니다. 이 문제가 발생하면 원하든 원하지 않든 페이지의 구성요소에 스크롤 막대가 나타납니다.

인라인 프레임의 높이를 관리하려면 구성요소가 원하는 인라인 프레임의 높이를 페이지에 알려주어야 합니다. 원격 구성요소로 교차 도메인 문제를 처리할 수 있으므로, Sites SDK 메시징을 사용하여 구성요소가 페이지에 렌더링된 후 필요한 높이로 인라인 프레임을 설정하도록 페이지에 요청해야 합니다. 이를 위해 SitesSDK.setProperty('height', {value}) API를 사용할 수 있습니다. (Oracle Content and Experience SDK 참조.)

예를 들어, setHeight 함수와 사용자정의 바인딩 처리기를 생성하고 구성요소가 페이지에 렌더링될 때 호출합니다.

  • height 함수 업데이트:

    // set the height of the iFrame for this App
self.setHeight = function () {
// use the default calculation or supply your own height value as a second parameter
SitesSDK.setProperty('height');
};

  • 구성요소가 페이지에 렌더링되거나 속성이 변경될 때마다 setHeight를 호출하는 Knockout 사용자정의 바인딩 처리기:

    ko.bindingHandlers.sampleAppSetAppHeight = {
  update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    // 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();

  // re-size the iFrame in the Sites page now the template has rendered
  // Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue
  viewModel.setHeight();
 }
};

  • 바인딩 처리기를 호출하도록 템플리트 업데이트:

    <div data-bind="sampleAppSetAppHeight: true"></div>

트리거 및 작업 등록

인라인 프레임이 아닌 구성요소의 트리거/작업 등록은 appinfo.json 파일에 있지만, 인라인 프레임 구성요소의 경우 구성요소 자체가 이 정보를 제공해야 합니다. 다음 두 API를 사용하여 수행됩니다.

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

다음은 이 API 사용의 예입니다.

    // Register TRIGGERS meta-data
    SampleAppViewModel.prototype.getAppTriggers = function (args) {
      var triggers = [{
        "triggerName": "imageClicked",
        "triggerDescription": "Image clicked",
        "triggerPayload": [{
          "name": "payloadData",
          "displayName": "Trigger Payload Data"
        }]
      }];

      return triggers;
    };

    // Register ACTIONS meta-data
    SampleAppViewModel.prototype.getAppActions = function (args) {
      var actions = [{
        "actionName": "setImageWidth",
        "actionDescription": "Update the image width",
        "actionPayload": [{
          "name": "imageWidth",
          "description": "Image Width in pixels",
          "type": {
            "ojComponent": {
            "component": "ojInputText"
            }
          },
          "value": ""
        }]
      }];

      return actions;
    };

테마 스타일에 액세스

구성요소가 인라인 프레임으로 렌더링되기 때문에 테마에서 제공되는 스타일에 액세스할 수 없습니다. Sites SDK는 이 스타일을 검색하는 API를 제공하므로 인라인 프레임 내의 요소에 적용할 수 있습니다.

이 항목은 단계 14: 구성요소가 인라인 프레임으로 렌더링될 때 사용자정의 스타일 사용에서 자세히 다룹니다.

혼합 HTTPS 대 HTTP 프로토콜

Oracle Content Management는 HTTPS 프로토콜을 사용하므로 페이지 내에 참조된 모든 리소스도 HTTPS를 사용해야 합니다. 리소스에는 인라인 프레임으로 렌더링될 기본 .html 파일과 함께 모든 참조 파일이 포함됩니다.

이 리소스 요구사항은 대부분 원격 구성요소에 적용되지만 이 제약 조건을 인지해야 합니다. 인라인 프레임을 사용하는 로컬 구성요소의 리소스는 Oracle Content Management 서버에서 제공하므로 이 구성요소는 이미 일치 프로토콜을 사용합니다.

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