Шаг 16. Управление активами

В ходе выполнения этого шага описывается и объясняется управление активами, используемыми компонентами.

К активам относятся компоненты и пользовательские компоненты, о которых Oracle Content Management должно быть известно, чтобы управлять жизненным циклом активов.

Папка контента Oracle Content Management

Каждый сайт, созданный в Oracle Content Management, поставляется с собственной папкой контента. Это скрытая папка, которая обычно не отображается. Когда сайт опубликован, все файлы в папке content также опубликованы в файловой системе.

Например, если выбрать изображения с помощью компонента Image, Oracle Content Management создает копию выбранного изображения и помещает ее в папку контента. URL-адрес всегда указывает на скопированную версию изображения, чтобы при удалении исходного изображения не нарушить работу сайта. Это также относится к другим компонентам, предоставляемым платформой Oracle Content Management: "Галерея", "Сетка галереи", "Документ", "Социальная панель", "Выгрузка файлов", а также фоновые изображения для slots и componentGroups.

Чтобы пользовательский компонент мог участвовать в этом жизненном цикле актива, он должен сообщать Oracle Content Management о любых активах, которыми эта платформа должна управлять от его имени. Поскольку это подразумевает создание копии актива, пользовательский компонент также должен для выбора актива использовать API-интерфейсы Oracle Content Management, чтобы платформе было известно, как управлять им.

Управление URL-адресами

URL-адрес актива зависит от нескольких критериев.

URL-адрес компонента для времени выполнения отличается от URL-адреса компонента для Site Builder.
При копировании страницы Oracle Content Management также создает в папке контента копию всех связанных активов, поэтому никогда не будет двух компонентов, указывающих на один и тот же актив в папке контента.
При перетаскивании группы компонентов на страницу создаются новые копии всех активов, на которые ссылаются компоненты группы компонентов.

Кроме того, хотя относительный URL-адрес может подходить для локального компонента, для удаленных компонентов требуется полный URL-адрес любого актива, которым должна управлять платформа Oracle Content Management от вашего имени, чтобы они могли визуализировать контент встроенных рамок с полным URL-адресом.

Поскольку нельзя полагаться на URL-адрес, который остается статическим, в коде необходимо использовать только ссылки на идентификатор актива и извлекать URL-адрес актива, когда требуется рендеринг актива.

Управление активами

Эти API-интерфейсы Sites SDK доступны для управления активами.

SitesSDK.getProperty('componentAssets', callback);

Этот интерфейс позволяет получить массив текущих активов.
Каждая запись актива состоит из указанных ниже элементов.
- id (идентификатор): уникальный идентификатор актива.
- заголовок: метаданные заголовка Oracle Content Management.
- описание: метаданные описания Oracle Content Management.
- fileName (имя файла): исходное имя выбранного файла. Полезно для отображения на панели "Настройки" пользовательского компонента, чтобы пользователи знали, какой файл они выбрали. Это не имя файла, скопированного в папку контента.
- source (источник): URL-адрес актива с поддержкой макрокоманд. Это значение изменяется со временем и не должно ссылаться на компонент. Однако оно должно быть сохранено как часть актива.
- URL: полный URL-адрес актива на основе контекста, в котором был вызван метод getPropert().

SitesSDK.setProperty('componentAssets', [assets]);

Этот интерфейс вызывается для сохранения всех активов, которыми платформа Oracle Content Management должна управлять от вашего имени.
Если этот интерфейс не вызывается, никакие активы не сохраняются.
После публикации сайта все активы не из этого массива удаляются.
Параметр assets представляет собой массив активов в том же формате, в котором возвращают данные методы getProperty и filePicker.

Примечание.:
Значение url не сохраняется. Это значение динамически создается при запрашивании активов.

SitesSDK.filePicker(options, callback);

API-интерфейс для вызова средства выбора файлов для выбора списка активов.
Он вызывает обратный вызов при успешном выборе активов, передаваемых в массиве выбранных активов.
В этот момент ничего не сохраняется, а вызов setProperty('componentAssets', [assets]); для сохранения выбранных элементов в сочетании с другими активами, которые необходимо сохранить, зависит от компонента.

Пример выбора актива

В этом разделе показано, как выбрать актив, сохранить его идентификатор и извлечь фактические значения из сохраненных активов.

Измените файл settings.js.

Измените объект шаблона, включив в него 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>

Измените 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);

Обновите viewModel, чтобы активы извлекались до получения customSettingsData. Этот код также обуславливает вызов self.imageName при изменении наблюдаемого элемента self.ImageID().

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

Проверка результатов для выбора актива

Обновите страницу на своем сайте, чтобы приложение Site Builder могло отслеживать изменения в компоненте.
Переключите страницу в режим редактирования.
Перетащите свой компонент на страницу.
Откройте панель "Настройки".
Нажмите кнопку Выбрать изображение.
Просмотрите (или загрузите) и выберите изображение.

Обратите внимание, что сохраняется имя изображения, указывающее на выбранное изображение.
Закройте панель "Настройки".
Снова откройте панель "Настройки".

Обратите внимание, что имя изображения снова отражается.

Пример рендеринга актива

В этом разделе показано, как выбирать активы и визуализировать их в компоненте, а также динамически обновлять компонент при изменении значений на панели настроек.

Примечание.:

Хотя здесь показан пример локального компонента, который отображается на странице во встроенной рамке, подобный код будет работать для компонентов, рендеринг которых выполняется в пределах этой страницы.

Измените файл render.js.

Обновите шаблон, включив в него свой актив:

<!-- 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 создайте два наблюдаемых элемента, чтобы получить imageID из customSettingsData и сохранить imageURL, извлеченный из сохраненного списка активов.
```
self.imageID = ko.observable();
self.imageURL = ko.observable();
```

Обновите viewModel, чтобы при каждом изменении идентификатора изображения imageID модель получала соответствующий URL-адрес актива изображения.

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

Обновите viewModel, чтобы извлекать данный идентификатор из customSettingsData.

Проверка результатов для рендеринга актива.

Обновите страницу на своем сайте, чтобы приложение Site Builder могло отслеживать изменения в компоненте.
Переключите страницу в режим редактирования.
Перетащите свой компонент на страницу.
Откройте панель "Настройки".
Нажмите кнопку Выбрать изображение.
Просмотрите (или загрузите) и выберите изображение.

Обратите внимание, что сохраняется имя изображения, указывающее на выбранное изображение.
Закройте панель "Настройки".

В этот момент должно отображаться выбранное изображение, визуализированное в компоненте.

Теперь выполните Обзор учебного пособия.