단계 3: 로컬 구성요소 설정의 구조 검토

이 단계에서는 로컬 구성요소에 대해 지정된 설정의 구조를 검토합니다.

/assets 디렉토리의 render.js 파일과 유사하게, 동일한 디렉토리에 미리 생성된 settings.html 파일이 있습니다. settings.html 파일은 구성요소에 대한 사용자정의 설정 데이터를 렌더링합니다. 기본 구현에서는 사용자정의 설정 데이터에 단일 속성 imageWidth가 있습니다.

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

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

데스크톱 동기화 클라이언트가 없는 경우 Oracle Content Management 웹 인터페이스의 구성요소 탭에서 구성요소를 선택하고 드릴다운하여 파일을 볼 수 있습니다.
구성요소 아래의 파일을 나열하면 다음 파일이 표시됩니다.
```
assets
    render.js
    settings.html
appinfo.json
_folder_icon.jpg
```

/assets 디렉토리 아래의 settings.html 파일을 열고 내용을 검토합니다. render.js 파일과 달리 settings.html 파일은 사이트 작성기의 설정 패널에서 인라인 프레임을 사용하는데, 이 때문에 인라인 프레임 안에 올바르게 렌더링하려면 지원 파일에 액세스해야 합니다. 사이트 작성기는 사이트 관리에 필요하므로 JavaScript 코드의 오류가 사이트 작성기에서 격리될 수 있기 때문에 settings.html 파일은 인라인 프레임을 사용합니다.

settings.html 파일의 주요 영역은 다음과 같습니다.

설정 패널을 렌더링하는 Knockout 템플리트.

<!-- ko if: initialized() -->
<div class="scs-component-settings">
  <div>
    <!-- Width -->
    <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
    <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
  </div>
</div>
<div data-bind="setSettingsHeight: true"></div>
<!-- /ko -->

설정 패널이 렌더링된 후 인라인 프레임의 높이를 조정하는 사용자정의 바인딩 처리기.
```
ko.bindingHandlers.scsCompComponentImpl
```
Knockout 템플리트에 적용할 Knockout ViewModel.
```
SettingsViewModel
```

SettingsViewModel의 주요 요소는 다음과 같습니다.

구성요소 수명 주기 구독.
구성요소 초기화:
- 모든 데이터가 인출될 때까지 구성요소가 렌더링되지 않도록 합니다. 이는 Knockout observable을 통해 처리됩니다.
```
self.initialized = ko.observable(false);
```
- 준비될 때까지 데이터 업데이트를 시도하지 않습니다.
```
self.saveData = false;
```
- 필수 속성에 대한 초기 값을 가져옵니다. 이는 데이터를 읽어들이는 콜백에 의해 처리됩니다.
```
    SitesSDK.getProperty('customSettingsData', function (data) {
      //update observable
      self.width(data.width);

      // note that viewModel is initialized and can start saving data
      self.initialized(true);
      self.saveData = true;
    });
```

사용자정의 설정 데이터에 대한 속성 변경사항을 저장합니다.

    self.save = ko.computed(function () {
      var saveconfig = {
        'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
      };

      // save data in page
      if (self.saveData) {
        SitesSDK.setProperty('customSettingsData', saveconfig);
      }
    }, self);

캡처할 다른 속성을 추가하려면 여러 단계가 필요합니다.

새 값을 표시하도록 사용자 인터페이스를 업데이트합니다.
구성요소에 대해 저장된 현재 값으로 값을 초기화합니다.
값 변경사항을 구성요소에 다시 저장합니다.

사용자정의 구성요소에 다른 속성을 추가하려면 settings.html 파일을 다음과 같이 변경합니다.

새 속성을 처리하도록 다른 observable을 추가합니다. 이 코드를 변경합니다.
```
self.width = ko.observable();
```
이 코드를 대신 사용합니다.
```
self.width = ko.observable();
self.imageBannerText = ko.observable();
```
처음 설정 패널이 표시될 때 새 속성의 현재 값을 가져옵니다. 이 코드를 변경합니다.
```
self.width(data.width);
```
이 코드를 대신 사용합니다.
```
self.width(data.width);
self.imageBannerText(data.imageBannerText);
```

새 속성의 변경사항을 저장합니다. 이 코드를 변경합니다.

    'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

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

'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
'imageBannerText': self.imageBannerText()

새 필드를 표시하도록 사용자 인터페이스를 추가합니다. 이 코드를 변경합니다.

<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
<input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

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

<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
<input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

<label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
<input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

settings.html 파일을 동기화하거나 업로드합니다.

지금 실행했으면 필드가 표시됩니다. 그러나 설정 패널의 크기는 자동으로 변경되지 않습니다. 패널의 크기를 늘렸기 때문에 components.json 등록 항목도 새 크기로 업데이트해야 합니다.

구성요소의 assets/ 디렉토리와 동일 레벨에 있는 appinfo.json 파일을 다운로드하고 설정 패널의 크기를 업데이트합니다. 이 코드를 변경합니다.
```
"settingsHeight": 90,
```
이 코드를 대신 사용합니다.
```
"settingsHeight": 160,
```
appinfo.json 파일을 동기화하거나 업로드합니다.

단계 3의 결과 확인

이제 설정 패널에 추가한 새 속성을 보고 입력할 수 있어야 합니다.

사이트 작성기가 구성요소의 변경사항을 가져올 수 있도록 사이트의 페이지를 새로고침합니다.
페이지를 편집 모드로 전환합니다.
구성요소를 페이지 위에 끌어 놓습니다.
구성요소에 대해 설정 패널을 불러옵니다.
사용자정의 설정 단추를 누릅니다.

settings.html 파일에 있는 각 속성에 대해 두 개의 필드가 표시됩니다.

단계 4: 구성요소에 새 속성 표시를 계속합니다.