步骤 16：资产管理

此步骤描述并说明了如何管理组件使用的资产。

资产包括 Oracle Content Management 在管理资产的生命周期时必须了解的组件和定制组件。

Oracle Content Management 内容文件夹

您在 Oracle Content Management 中创建的每个站点都有其自己的 content 文件夹。这是您通常看不到的隐藏文件夹。发布站点时，content 文件夹中的所有文件也将发布到文件系统。

例如，当您使用图像组件选择图像时，Oracle Content Management 将生成您所选图像的副本，并将其放在 content 文件夹中。您的 URL 始终指向此复制版本的图像，以便在您删除原始图像时站点不会中断。这也适用于 Oracle Content Management 提供的其他组件：图库、图库网格、文档、社交栏、文件下载，以及用于内容框和 componentGroup 的背景图像。

要让定制组件参与到此资产生命周期中，定制组件必须告知 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。

    • title：Oracle Content Management 标题元数据。

    • description：Oracle Content Management 说明元数据。

    • fileName：所选文件的原始名称。可用于在定制组件的“设置”面板中显示，以便用户知道所选的文件。这不是复制到 content 文件夹的文件的名称。

    • source：资产的启用宏的 URL。此值将随时间而改变，并且不应由组件引用，但它必须保存为资产的一部分。

    • url：基于从中调用 getPropert() 的上下文的资产的完全限定 URL。

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

  • 调用此项可以保存希望 Oracle Content Management 代表您管理的所有资产。

  • 如果不调用此项，则不会保存资产。

  • 发布站点时，将删除不在此数组中的任何资产。

  • assets 参数是资产数组，其格式与 getProperty 以及 filePicker 返回的格式相同。

    注：

    不存储任何 url 值。该值将在您请求资产时动态创建。

SitesSDK.filePicker(options, callback);

  • 用于打开文件选择器以选择资产列表的 API。

  • 它在成功选择传入所选资产数组的资产时调用回调。

  • 此时不保存任何内容，并且根据组件来决定是否调用 setProperty('componentAssets', [assets]); 以通过此选择保存项以及任何要保存的其他资产。

选择资产的示例

本节向您展示如何选择资产、存储其 ID 并从存储的资产中重新提取实际值。

  1. 编辑 settings.html 文件。

  2. 更改模板对象以包含 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>

  3. 更改 viewModel 以添加用于存储所选资产的 ID 的可观察项。

    self.imageID = ko.observable();

  4. 更改 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);

  5. 更新 viewModel 以在获取 customSettingsData 前先检索资产。此代码还将引起在 self.ImageID() 可观察项更改时调用 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;
    });
});

  6. 最后，更新 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);

检查选择资产的结果

  1. 刷新站点中的页，以便站点构建器能够获取对组件的更改。

  2. 让页进入编辑模式。

  3. 将组件拖放到页上。

  4. 打开“设置”面板。

  5. 单击选择图像按钮。

  6. 浏览（或上载）并选择图像。

    请注意，将存储图像的名称以显示所选图像。

  7. 关闭“设置”面板。

  8. 重新打开“设置”面板。

    请注意，将重新反映图像的名称。

呈现资产的示例

本节向您展示如何检索资产并在组件中呈现它们，以及如何在设置面板中的值发生更改时使组件动态更新。

注：

虽然这展示的是页上内嵌框架中本地组件的示例，但是类似代码适用于页中以内嵌方式呈现的组件。

  1. 编辑 render.html 文件。

  2. 更新模板以包含资产：

    <!-- ko if: imageURL -->
<div style="flex-shrink:0;">
    <img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->

  3. 在 viewModel 中，创建两个可观察项，以从 customSetttingsData 获取 imageID，并存储从存储的资产列表检索的 imageURL。

    self.imageID = ko.observable();
self.imageURL = ko.observable();

  4. 更新 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;
            }
        }
    });
});

  5. 更新 viewModel 以从 customSettingsData 检索 ID。

检查呈现资产的结果

  1. 刷新站点中的页，以便站点构建器能够获取对组件的更改。

  2. 让页进入编辑模式。

  3. 将组件拖放到页上。

  4. 打开“设置”面板。

  5. 单击选择图像按钮。

  6. 浏览（或上载）并选择图像。

    请注意，将存储图像的名称以显示所选图像。

  7. 关闭“设置”面板。

    此时，您应该会看到在组件中呈现的所选图像。

继续执行教程回顾。