ขั้นตอนที่ 2: ตรวจสอบโครงสร้างของการแสดงผลองค์ประกอบในระบบของคุณ

ในขั้นตอนนี้ เราจะมาดูโครงสร้างของไฟล์ดีฟอลต์ที่สร้างขึ้นสำหรับองค์ประกอบในระบบ

สำหรับตัวอย่าง Hello World แบบง่าย ออบเจกต์ JavaScript สี่รายการและรหัสหลายบรรทัดอาจดูมากเกินไป แต่วิธีนี้เป็นการช่วยให้คุณมีเกณฑ์สำหรับการสร้างองค์ประกอบที่ซับซ้อนยิ่งขึ้น รวมถึงการจัดการกับการโต้ตอบกับรอบการใช้งานของเพจ Oracle Cloud Sites Service

ในการตรวจสอบโครงสร้างขององค์ประกอบในระบบ ให้ทำดังนี้

1. บนโฮมเพจ Oracle Content Management ให้คลิก ผู้พัฒนา

   ระบบจะแสดงเพจ ผู้พัฒนา

2. คลิก ดูองค์ประกอบทั้งหมด

3. จากเมนู เลือก สร้างองค์ประกอบในระบบ

4. ป้อนชื่อสำหรับองค์ประกอบ ตัวอย่างเช่น A_Local_Component

5. ป้อนคำอธิบายที่เลือกระบุได้

6. คลิก สร้าง

   หลังจากที่คุณดำเนินการเสร็จสิ้นแล้ว คุณจะเห็นองค์ประกอบที่ชื่อ A_Local_Component ในลิสต์องค์ประกอบของคุณ

1. ค้นหาองค์ประกอบของคุณและซิงโครไนซ์กับระบบไฟล์ โดยใช้ไคลเอนต์การซิงโครไนซ์บนเดสก์ท็อปของ Oracle Content Management

   หากคุณไม่มีเดสก์ท็อปไคลเอนต์ คุณสามารถดูองค์ประกอบทั้งหมดและเลือกองค์ประกอบในเพจองค์ประกอบของอินเตอร์เฟซ Oracle Content Management จากนั้นดริลล์ดาวน์เพื่อดูไฟล์ต่างๆ

2. ถ้าคุณแสดงไฟล์ภายใต้องค์ประกอบ คุณจะเห็นไฟล์เหล่านี้

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

3. เปิดไฟล์ render.js ภายใต้ไดเรคทอรี /assets

   ประเด็นหลักของไฟล์ render.js มีดังนี้:

   • มีการจัดโครงสร้างเป็นโมดูล JavaScript AMD เพื่อให้สามารถ “กำหนดให้ต้องมี” ในเพจ

   • นอกจากนี้ยังมีการอ้างอิงไปยัง KnockoutJS และ JQuery ที่ได้รับการโหลดเป็นส่วนหนึ่งของเพจ Oracle Content Management อยู่แล้ว

พิจารณาโครงสร้างของไฟล์ render.js

ในเนื้อหาของไฟล์ render.js จะมีออบเจกต์ JavaScript สองรายการที่จะใช้งาน API องค์ประกอบ Oracle Content Management: sampleComponentFactory และ SampleComponentImpl ออบเจกต์เหล่านี้เป็นตัวอย่างของการใช้งานสำหรับการสร้างองค์ประกอบที่ใช้ KnockoutJS ใดๆ การใช้งานออบเจกต์เหล่านี้จะเปลี่ยนไปตามเทคโนโลยีที่คุณใช้

• sampleComponentFactory

  • ออบเจกต์นี้แสดงโดยโมดูล AMD render.js

  • นี่เป็นออบเจกต์แฟคตอรีแบบง่ายมาก และใช้งานอินเตอร์เฟซ createComponent() เดียว

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

• SampleComponentImpl

  • ฟังก์ชันหลักภายในออบเจกต์นี้คือฟังก์ชัน render ซึ่งใช้เพื่อแสดงผลองค์ประกอบลงในเพจ

    ในการแสดงผลองค์ประกอบ Knockout ลงในเพจ ฟังก์ชัน render จะเพิ่มเทมเพลทลงในเพจแบบไดนามิก จากนั้นจะใช้การเชื่อมโยง viewModel กับเทมเพลท

  • ส่วนที่เหลือของการใช้งานจะเกี่ยวข้องกับการเริ่มต้นของพารามิเตอร์และเทมเพลท viewModel และเกี่ยวข้องกับการจัดการการรับส่งข้อความระหว่างเพจและองค์ประกอบ

ออบเจกต์สองรายการสุดท้ายในไฟล์ render.js ได้แก่ sampleComponentTemplate และ SampleComponentViewModel จะให้การใช้งานที่กำหนดเองสำหรับองค์ประกอบ การใช้งานรายการเหล่านี้จะต่างกันไปตามความต้องการของคุณ

• sampleComponentTemplate

  • ออบเจกต์นี้จะให้การสร้างเทมเพลท KnockoutJS โดยจะรอจนกว่าองค์ประกอบมีข้อมูลทั้งหมดที่เริ่มต้นก่อนพยายามแสดงทุกสิ่ง

• SampleComponentViewModel

  • viewModel จะดึงข้อมูลที่จัดเก็บไว้โดย Oracle Content Management ในนามขององค์ประกอบ แล้วเลือกวิธีจัดเลย์เอาต์องค์ประกอบตามข้อมูลนั้นอย่างเหมาะสม

  • รายการที่สังเกตเห็นได้ของ Knockout ทั่วไปที่ใช้โดยเทมเพลทเพื่อจัดการการเข้าใช้เมตะดาต้าที่จัดเก็บในนามขององค์ประกอบ:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • การทำงานร่วมกันของทริกเกอร์และการดำเนินการ:

    ทริกเกอร์: ฟังก์ชันเพื่อเรียกทริกเกอร์ Oracle Content Management จากองค์ประกอบที่สามารถเชื่อมโยงกับการดำเนินการขององค์ประกอบอื่นบนเพจ

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    การดำเนินการ: ฟังก์ชันในการจัดการการเรียกกลับสำหรับกรณีที่องค์ประกอบต้องรันการดำเนินการด้วยเพย์โหลดที่ระบุ

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    การเรียกกลับ เพื่อรันการดำเนินการที่รีจิสเตอร์ใดๆ เมื่อต้องการ

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • การสมัครรอบการใช้งานขององค์ประกอบ:

    • การเริ่มต้นองค์ประกอบ: ตรวจสอบให้แน่ใจว่าองค์ประกอบไม่แสดงผลจนกว่าจะมีการดึงข้อมูลทั้งหมดแล้ว การดำเนินการนี้จะได้รับการจัดการผ่านรายการที่สังเกตเห็นได้ของ Knockout

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

      เรียกค่าเริ่มต้นสำหรับคุณสมบัติที่จำเป็นใดๆ การทำงานนี้จัดการโดยการเรียกกลับเพื่อดึงข้อมูล

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • การอัปเดตเมตะดาต้า: เรียกกลับเมื่อใดก็ตามที่มีการเปลี่ยนแปลงเมตะดาต้าขององค์ประกอบที่จัดเก็บในนามขององค์ประกอบ ตัวอย่างเช่น เมื่อผู้ใช้เรียกใช้แผงการตั้งค่าและอัปเดตข้อมูล

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));