단계 2: 로컬 구성요소 렌더링의 구조 검토

이 단계에서는 로컬 구성요소에 대해 생성된 기본 파일의 구조를 검토합니다.

간단한 Hello World 예제의 경우 4개의 JavaScript 객체와 코드 행 수가 너무 많아 보일 수 있지만, 이는 더 복잡한 구성요소를 빌드하고 Oracle Cloud Sites Service 페이지 수명 주기와의 상호작용을 다루기 위한 기초를 제공하는 것입니다.

로컬 구성요소의 구조를 검토하려면 다음과 같이 하십시오.

1. Oracle Content Management 홈 페이지에서 개발자를 누릅니다.

   개발자 페이지가 표시됩니다.

2. 모든 구성요소 보기를 누릅니다.

3. 메뉴에서 로컬 구성요소 생성을 선택합니다.

4. 구성요소의 이름(예: A_Local_Component)을 입력합니다.

5. 선택적 설명을 입력합니다.

6. 생성을 누릅니다.

   이 작업을 마치면 구성요소 목록에 A_Local_Component라는 구성요소가 표시됩니다.

1. Oracle Content Management 데스크톱 동기화 클라이언트를 사용하여 구성요소를 찾아 파일 시스템과 동기화합니다.

   데스크톱 클라이언트가 없는 경우 Oracle Content Management 인터페이스의 [구성요소] 페이지에서 모든 구성요소를 보고 구성요소를 선택하고 드릴다운하여 파일을 볼 수 있습니다.

2. 구성요소 아래의 파일을 나열하면 다음 파일이 표시됩니다.

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

3. /assets 디렉토리 아래의 render.js 파일을 엽니다.

   render.js 파일의 요점은 다음과 같습니다.

   • 페이지에 “필수”가 되도록 JavaScript AMD 모듈로 구조화되어 있습니다.

   • 이미 Oracle Content Management 페이지의 일부로 로드된 KnockoutJS 및 JQuery에 대한 참조도 포함합니다.

render.js 파일의 구조를 고려하십시오.

render.js 파일의 내용에는 필수 Oracle Content Management 구성요소 API를 구현하는 두 개의 JavaScript 객체인 sampleComponentFactory 및 SampleComponentImpl이 있습니다. 이러한 객체는 KnockoutJS 기반 구성요소를 생성하기 위한 구현의 예입니다. 이러한 객체의 구현은 사용할 기술에 따라 변경됩니다.

• sampleComponentFactory

  • 이 객체는 render.js AMD 모듈에 의해 반환됩니다.

  • 매우 간단한 팩토리 객체이며 단일 createComponent() 인터페이스를 구현합니다.

  • 더 복잡한 구현에는 전달된 args 값을 사용하여 viewMode 매개변수에 따라 다른 구성요소 구현을 반환할 수 있습니다. 이렇게 하면 사이트 작성기와 비교해 런타임에 구성요소를 훨씬 경량으로 구현할 수 있습니다.

• SampleComponentImpl

  • 이 객체 내의 주 함수는 페이지에 구성요소를 렌더링하는 데 사용되는 render 함수입니다.

    Knockout 구성요소를 페이지에 렌더링하기 위해 render 함수는 동적으로 페이지에 템플리트를 추가한 다음, viewModel 바인딩을 템플리트에 적용합니다.

  • 나머지 구현에서는 viewModel 매개변수 및 템플리트의 초기화와, 페이지와 구성요소 간의 메시징 처리를 다룹니다.

render.js 파일의 마지막 두 객체인 sampleComponentTemplate 및 SampleComponentViewModel은 구성요소에 대한 사용자정의 구현을 제공합니다. 이 구현은 요구사항에 따라 달라집니다.

• sampleComponentTemplate

  • 이 객체는 KnockoutJS 템플리트 생성을 제공합니다. 항목을 표시하려고 시도하기 전에 구성요소는 모든 데이터가 초기화될 때까지 기다립니다.

• SampleComponentViewModel

  • viewModel은 구성요소 대신 Oracle Content Management에 저장된 정보를 읽어들이고, 해당 데이터에 따라 구성요소를 적절히 레이아웃하는 방법을 선택합니다.

  • 구성요소 대신 저장된 메타데이터에 대한 액세스를 처리하기 위해 템플리트에서 사용되는 일반적인 Knockout observable:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • 트리거 및 작업 통합:

    트리거: 구성요소에서 Oracle Content Management 트리거를 발생시키는 함수로, 페이지상 다른 구성요소의 작업에 바인드할 수 있습니다.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    작업: 주어진 페이로드로 작업을 실행하라고 구성요소에 지시할 때 콜백을 처리하는 함수입니다.

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    요청 시 등록된 작업을 실행하는 콜백입니다.

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • 구성요소 수명 주기 구독:

    • 구성요소 초기화: 모든 데이터가 인출될 때까지 구성요소가 렌더링되지 않도록 합니다. 이는 Knockout observable을 통해 처리됩니다.

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

      필수 속성에 대한 초기 값을 가져옵니다. 이는 데이터를 읽어들이는 콜백에 의해 처리됩니다.

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • 메타데이터 업데이트: 구성요소 대신 정의된 구성요소 메타데이터가 변경될 때마다(예: 사용자가 설정 패널을 호출하고 데이터를 업데이트할 때) 콜백합니다.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));