이 단계는 구성요소에서 사용된 자산을 관리하는 방법을 설명합니다.
자산에는 Oracle Content Management가 자산의 수명 주기를 관리하기 위해 알아야 하는 구성요소와 사용자정의 구성요소가 포함됩니다.
Oracle Content Management content 폴더
Oracle Content Management에서 생성한 각 사이트에는 자체 content 폴더가 제공됩니다. 보통은 보이지 않는 숨겨진 폴더입니다. 사이트가 게시될 때 content 폴더의 모든 파일도 파일 시스템에 게시됩니다.
예를 들어, 이미지 구성요소를 사용하여 이미지를 선택하면 Oracle Content Management는 선택한 이미지의 복사본을 만들어 content 폴더에 놓습니다. URL은 항상 이 복사된 버전의 이미지를 가리키므로 원본 이미지를 삭제해도 사이트가 중단되지 않습니다. 이는 Oracle Content Management에서 제공한 다른 구성요소(갤러리, 갤러리 그리드, 문서, 소셜 표시줄, 파일 다운로드)는 물론 slots 및 componentGroups의 배경 이미지에도 적용됩니다.
사용자정의 구성요소가 이 자산 수명 주기에 참여하려면 사용자정의 구성요소 대신 서비스가 관리할 자산을 Oracle Content Management에 알려야 합니다. 여기에는 자산 복사본 만들기가 포함되므로 사용자정의 구성요소도 Oracle Content Management API를 사용하여 자산을 선택해야 관리 방법을 알 수 있습니다.
URL 관리
자산 URL은 수많은 기준에 따라 변경됩니다.
구성요소의 런타임 URL은 구성요소의 사이트 작성기 URL과 다릅니다.
페이지를 복사할 경우 Oracle Content Management는 content 폴더에서 참조된 모든 자산의 복사본도 만들기 때문에 두 구성요소가 content 폴더의 동일한 자산을 가리키는 일은 없습니다.
componentGroup을 페이지 위에 놓으면 componentGroup의 구성요소에서 참조된 모든 자산의 새 복사본을 만듭니다.
또한 상대 URL은 로컬 구성요소에 적합할 수 있지만, 원격 구성요소에는 Oracle Content Management가 대신 관리할 자산의 전체 URL이 필요합니다. 그래야 전체 URL로 인라인 프레임 콘텐츠를 렌더링할 수 있습니다.
남은 정적 URL에 의존할 수 없으므로 코드에는 자산 ID에 대한 참조만 넣고 자산을 렌더링할 때 자산의 URL을 검색해야 합니다.
자산 관리
다음 Sites SDK API는 자산 관리에 사용할 수 있습니다.
SitesSDK.getProperty('componentAssets', callback);
현재 자산의 배열을 가져옵니다.
각 자산 항목은 다음으로 구성됩니다.
id: 자산의 고유 ID입니다.
제목: Oracle Content Management 제목 메타데이터입니다.
설명: Oracle Content Management 설명 메타데이터입니다.
fileName: 선택한 파일의 원래 이름입니다. 사용자가 선택한 파일을 알 수 있도록 사용자정의 구성요소의 설정 패널에 표시하기에 유용합니다. content 폴더에 복사된 파일의 이름이 아닙니다.
source: 매크로가 사용된 자산 URL입니다. 이 값은 시간에 따라 변경되므로 구성요소에서 참조하지 않아야 하지만 자산의 일부로 저장해야 합니다.
url: getProperty()가 호출된 컨텍스트에 따른 자산의 전체 URL입니다.
SitesSDK.setProperty('componentAssets', [assets]);
Oracle Content Management가 대신 관리할 모든 자산을 저장하려면 호출합니다.
호출하지 않으면 자산이 저장되지 않습니다.
이 배열에 없는 자산은 사이트를 게시할 때 삭제됩니다.
assets 매개변수는 getProperty에서 반환된 것과 동일한 형식의 자산 배열이며 filePicker에서도 반환됩니다.
주:
url 값은 저장되지 않습니다. 이 값은 자산을 요청할 때 동적으로 생성됩니다.SitesSDK.filePicker(options, callback);
자산 목록을 선택할 파일 선택기를 불러오는 API입니다.
성공적인 자산 선택 시 콜백을 호출하여 선택한 자산의 배열을 전달합니다.
이 시점에는 아무것도 저장되지 않으며 setProperty('componentAssets', [assets]);를 호출하는 구성요소만이 이 선택사항과 다른 저장될 자산을 결합한 항목을 저장할 수 있습니다.
자산 선택의 예
이 섹션은 자산을 선택하여 해당 ID를 저장하고 저장된 자산에서 실제 값을 다시 인출하는 방법을 보여줍니다.
settings.html 파일을 편집합니다.
Image selection을 포함하도록 템플리트 객체를 변경합니다.
<div>
<!-- Image selection -->
<label id="imageLabel" for="imageAsset" class="settings-heading" data-bind="text: 'Image'"></label>
<input id="imageAsset" data-bind="value: imageName" readonly class="settings-text-box">
<button id="imageSelect" type="button" class="selectbutton" data-bind="click: showFilePicker">Select Image</button>
</div>선택한 자산의 ID를 저장할 observable을 추가하도록 viewModel을 변경합니다.
self.imageID = ko.observable();
파일 선택기를 불러와서 선택한 자산의 이름을 표시하여 자산 선택을 관리하도록 viewModel을 변경합니다.
//
// handle component assets
//
self.assets = []
// bring up a file picker to select the assets
self.showFilePicker = function () {
// select an image
SitesSDK.filePicker({
'multiSelect': false,
'supportedFileExtensions': ['jpg', 'png']
}, function (result) {
if (result.length === 1) {
// update the array of assets
self.assets = result;
// update the image in customSettingsData
self.imageID(result[0].id);
}
});
};
// update the display name based on the assets
self.imageName = ko.computed(function () {
var imageName = '',
imageID = self.imageID();
for (var i = 0; i < self.assets.length; i++) {
if (self.assets[i].id === imageID) {
imageName = self.assets[i].fileName;
break;
}
}
return imageName
}, self); customSettingsData를 가져오기 전에 먼저 자산을 검색하도록 viewModel을 업데이트합니다. 또한 이 코드는 self.ImageID() observable이 변경될 때 self.imageName을 호출합니다.
SitesSDK.getProperty('componentAssets', function (assets) {
self.assets = assets;
SitesSDK.getProperty('customSettingsData', function (data) {
//update observable
self.imageWidth(data.imageWidth);
self.imageID(data.imageID);
self.titleText(data.titleText);
self.userText(data.userText);
// note that viewModel is initialized and can start saving data
self.initialized(true);
self.saveData = true;
});
});마지막으로, save 함수를 업데이트하여 imageID를 저장하고 참조된 자산 목록으로 componentAssets를 업데이트해야 합니다.
self.save = ko.computed(function () {
var saveconfig = {
'imageWidth': isNaN(self.imageWidth()) ? self.imageWidth() : self.imageWidth() + 'px',
'imageID': self.imageID(),
'titleText': self.titleText(),
'userText': self.userText()
};
// store the selected asset and update custom settings
if (self.saveData) {
SitesSDK.setProperty('componentAssets', self.assets);
SitesSDK.setProperty('customSettingsData', saveconfig);
}
}, self);자산 선택의 결과 확인
사이트 작성기가 구성요소의 변경사항을 가져올 수 있도록 사이트의 페이지를 새로고침합니다.
페이지를 편집 모드로 전환합니다.
구성요소를 페이지에 끌어 놓습니다.
설정 패널을 불러옵니다.
이미지 선택 단추를 누릅니다.
이미지를 찾아보고(또는 업로드) 선택합니다.
선택한 이미지를 보여주며 이미지 이름이 저장됩니다.
설정 패널을 닫습니다.
설정 패널을 다시 불러옵니다.
이미지 이름이 다시 반영됩니다.
자산 렌더링의 예
이 섹션은 자산을 검색하여 구성요소에 렌더링하는 방법을 보여주며, 설정 패널에서 값이 변경될 때마다 구성요소가 동적으로 업데이트되는지 확인합니다.
주:
여기서는 페이지의 인라인 프레임에 있는 로컬 구성요소의 예를 보여주지만, 비슷한 코드가 페이지에 인라인으로 렌더링된 구성요소에도 작동합니다.render.html 파일을 편집합니다.
자산을 포함하도록 템플리트를 업데이트합니다.
<!-- ko if: imageURL -->
<div style="flex-shrink:0;">
<img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->viewModel에서 두 개의 observable을 생성하여 customSettingsData에서 imageID를 가져오고 저장된 자산 목록에서 검색된 imageURL을 저장합니다.
self.imageID = ko.observable(); self.imageURL = ko.observable();
imageID가 변경될 때마다 해당 이미지 자산 URL을 가져오도록 viewModel을 업데이트합니다.
self.imageID.subscribe(function (imageID) {
// whenever the image changes get the updated referenced asset
SitesSDK.getProperty('componentAssets', function (assets) {
for (var i = 0; i < assets.length; i++) {
if (assets[i].id === imageID) {
self.imageURL(assets[i].url);
break;
}
}
});
});customSettingsData에서 ID를 검색하도록 viewModel을 업데이트합니다.
자산 렌더링의 결과 확인
사이트 작성기가 구성요소의 변경사항을 가져올 수 있도록 사이트의 페이지를 새로고침합니다.
페이지를 편집 모드로 전환합니다.
구성요소를 페이지에 끌어 놓습니다.
설정 패널을 불러옵니다.
이미지 선택 단추를 누릅니다.
이미지를 찾아보고(또는 업로드) 선택합니다.
선택한 이미지를 보여주며 이미지 이름이 저장됩니다.
설정 패널을 닫습니다.
이 시점에서 선택한 이미지가 구성요소에 렌더링되어야 합니다.
자습서 검토를 계속합니다.