ขั้นตอนที่ 13: แสดงองค์ประกอบในเฟรมแบบอินไลน์

ความคล้ายคลึงกันระหว่างองค์ประกอบของเฟรมแบบอินไลน์และเฟรมที่ไม่ใช่แบบอินไลน์

แผงข้อมูลการตั้งค่า

เนื่องจากมีแผงข้อมูลการตั้งค่าอยู่ในเพจในเฟรมแบบอินไลน์ตลอดเวลา รหัสสำหรับแผงข้อมูลการตั้งค่าจะไม่เปลี่ยนแปลงไปโดยไม่คำนึงว่าองค์ประกอบจะใช้เฟรมแบบอินไลน์หรือไม่ คุณจะสร้างรหัสแผงข้อมูลการตั้งค่าเดียวกันสำหรับการใช้ทั้งสองกรณี

API ของ Sites SDK

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 เพื่อขอให้เพจตั้งค่าเฟรมแบบอินไลน์ให้มีความสูงที่ต้องการ หลังจากที่องค์ประกอบแสดงบนเพจแล้ว ซึ่งกระบวนการนี้สามารถทำได้โดยการใช้ API SitesSDK.setProperty('height', {value}) (โปรดดูSDK สำหรับ Oracle Content and Experience)

ตัวอย่าง สร้างฟังก์ชัน 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: ใช้สไตล์ที่กำหนดเองเมื่อองค์ประกอบแสดงอยู่ในเฟรมแบบอินไลน์