步驟 13：在內嵌框架中呈現元件

內嵌框架和非內嵌框架元件之間的相似性

設定值面板

因為「設定值」面板一律會置於內嵌框架的頁面中，因此不論元件是否使用內嵌框架，「設定值」面板的程式碼將不會變更。您將為這兩個使用案例建立相同的「設定值」面板程式碼。

Sites SDK API

這兩個使用案例的 SDK API 相同。您將會使用相同的程式碼來引發觸發程式、監聽動作以及取得並設定特性值。雖然某些特性可能無法這兩個案例皆適用 (例如，您無法對未使用內嵌框架的元件設定 "height" 特性)，但 API 不會變更。因此，您可以複製這兩種類型元件之間的程式碼，本教學課程中討論的範例程式碼將會適用於這兩個案例。

內嵌框架和非內嵌框架元件之間的差異

檔案結構與相依項

<component name>
    assets
        css
            app-styles.css
        js
            jquery.mn.js
            knockout.mn.js
            sites.min.js
        render.html
        settings.html
    appinfo.json
    _folder_icon.jpg

建立這些檔案是為了讓您在頁面上的內嵌框架中立即執行元件。此結構與標準本機元件結構的主要差異是：

• JavaScript 相依項：

  • 您正在取得這些檔案的完整複本，以便能執行元件。需要這些檔案，才能執行範例內嵌框架元件。您可以視需要新增和移除此目錄的內容。

  • 因為元件發布時，元件之 assets 目錄底下的所有項目都會發布至公用網站，所以在「網站產生器」中和程式實際執行時都可以使用 js 目錄中的所有項目。

  • 注意：建立這些檔案是為了易於使用。您應在主題或其他公用位置中合併這些檔案，而不是為每個內嵌框架元件個別建立這些檔案的版本。

• render.html：

  • 此為完整 HTML文件，而非標準元件的 render.js 檔案，其為 AMD 模組。

元件「高度」管理

使用內嵌框架的其中一個問題是內嵌框架本身的高度管理。如果設定錯誤，您將會在頁面上看到可能不是您想要的元件捲軸。

為了管理內嵌框架的高度，元件必須告知頁面想要的內嵌框架高度。透過遠端元件，您可以處理跨網域的問題，因此當元件於頁面上呈現之後，您必須使用 Sites SDK 訊息傳遞來要求頁面將內嵌框架設為所需的高度。這可以透過 SitesSDK.setProperty('height', {value}) API 來完成。(請參閱 Oracle Content and Experience SDK。)

例如，建立 setHeight 函數和自訂連結處理程式，以便元件於頁面上呈現時進行呼叫。

• 更新高度函數：

  // set the height of the iFrame for this App
  self.setHeight = function () {
  // use the default calculation or supply your own height value as a second parameter
  SitesSDK.setProperty('height');
  };

• 每當元件於頁面上呈現或特性變更時，Knockout 自訂連結處理程式可呼叫 setHeight：

  ko.bindingHandlers.sampleAppSetAppHeight = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      // create dependencies on any observables so this handler is called whenever it changes
      var imageWidth = viewModel.imageWidth(),
          imageUrl = viewModel.imageUrl(),
          titleText = viewModel.titleText(),
          userText = viewModel.userText();
  
    // re-size the iFrame in the Sites page now the template has rendered
    // Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue
    viewModel.setHeight();
   }
  };

• 更新樣板以呼叫連結處理程式：

  <div data-bind="sampleAppSetAppHeight: true"></div>

觸發程式和動作註冊

雖然不在內嵌框架中之元件的觸發程式/動作註冊是位於 appinfo.json 檔案中，對內嵌框架元件而言，元件本身會負責提供此資訊。這可以使用以下兩個 API 來完成：

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

以下為使用這些 API 的範例。

    // Register TRIGGERS meta-data
    SampleAppViewModel.prototype.getAppTriggers = function (args) {
      var triggers = [{
        "triggerName": "imageClicked",
        "triggerDescription": "Image clicked",
        "triggerPayload": [{
          "name": "payloadData",
          "displayName": "Trigger Payload Data"
        }]
      }];

      return triggers;
    };

    // Register ACTIONS meta-data
    SampleAppViewModel.prototype.getAppActions = function (args) {
      var actions = [{
        "actionName": "setImageWidth",
        "actionDescription": "Update the image width",
        "actionPayload": [{
          "name": "imageWidth",
          "description": "Image Width in pixels",
          "type": {
            "ojComponent": {
            "component": "ojInputText"
            }
          },
          "value": ""
        }]
      }];

      return actions;
    };

存取主題樣式

因為元件是在內嵌框架中呈現，所以其無法存取主題中可用的樣式。Sites SDK 提供可擷取這些樣式的 API，讓這些樣式可以套用至內嵌框架中的元素。

步驟 14：在內嵌框架中呈現元件時使用自訂樣式中會進一步探索此主題。

混合 HTTPS 和 HTTP 協定

因為 Oracle Content Management 使用 HTTPS 協定，所有頁面內參照的資源也必須使用 HTTPS。資源包含將在內嵌框架中呈現的基本 .html 檔案，以及其參照的所有檔案。

此資源要求主要適用於遠端元件，但是您需注意此限制。使用內嵌框架的本機元件資源由 Oracle Content Management 伺服器提供，因此這些元件已使用對應的協定。

繼續進行步驟 14：在內嵌框架中呈現元件時使用自訂樣式。