步驟 16：資產管理

Oracle Content Management 內容資料夾

您在 Oracle Content Management 建立的每個網站都隨附於自己的 content 資料夾。您通常看不到這個隱藏資料夾。當網站發布時，所有 content 資料夾中的檔案也會發布至檔案系統中。

例如，當您使用「影像」元件選取影像時，Oracle Content Management 會複製選取的影像，並將其放在內容資料夾。您的 URL 會一律指向此影像的複製版本，因此即便您刪除原始影像，網站也不會中斷。這同樣適用於 Oracle Content Management 提供的其他元件：圖庫、圖庫格線、文件、社群列、檔案下載，以及槽位和 componentGroups 的背景影像。

若要將自訂元件加入到此資產生命週期中，自訂元件必須告知 Oracle Content Management 希望服務代表管理的任何資產。因為這涉及複製資產，因此自訂元件還必須使用 Oracle Content Management API 選取資產，我們才知道如何進行管理。

管理 URL

資產的 URL 會根據一些條件而變更。

• 元件的程式實際執行 URL 與該元件的網站產生器 URL 不同

• 如果您複製一個頁面，Oracle Content Management 也會複製內容資料夾中所有參照的資產，這樣就不會有兩個元件指向內容資料夾中相同的資產

• 將 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：所選檔案的原始名稱。在自訂元件的「設定值」面板中顯示時很有用，讓使用者知道他們選取的是哪一個檔案。這不是複製到內容資料夾的檔案名稱。

  • source：啟用巨集的資產 URL。這個值會隨時間變更，因此您的元件不應該參考這個值，但必須儲存為資產的一部分。

  • url：根據呼叫 getPropert() 相關資訊環境的資產完整 URL。

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

• 呼叫此函數以儲存所有想要讓 Oracle Content Management 代替您管理的資產。

• 如果您未呼叫此函數，則不會儲存任何資產。

• 當網站發布後，任何不在此陣列的資產都將被刪除。

• 資產參數是一個資產陣列，其格式與 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. 關閉「設定值」面板。

   此時您應該會看到所選影像呈現在元件中。

繼續進行教學課程複習。