Pasul 2: Verificarea structurii randării componentei dvs. locale

La acest pas verificăm structura fişierelor prestabilite care au fost create pentru o componentă locală.

Pentru un exemplu simplu precum Hello World, patru obiecte JavaScript şi numărul de linii de cod poate părea prea mult, dar acest lucru este pentru a vă oferi baza pentru generarea de componente mai complexe, precum şi pentru tratarea interacţiunii cu ciclul de viaţă al paginii în Oracle Cloud Sites Service.

Pentru a verifica structura componentei dvs. locale:

1. În pagina Oracle Content Management, faceţi clic pe Dezvoltator.

   Se va afişa pagina Dezvoltator.

2. Faceţi clic pe Vizualizare toate componentele.

3. Din meniu, selectaţi Creare componentă locală.

4. Introduceţi un nume pentru componenta respectivă; de exemplu, O_componentă_locală.

5. Introduceţi o descriere opţională.

6. Faceţi clic pe Creare.

   După ce aţi făcut acest lucru, veţi vedea o componentă denumită A_Local_Component în lista dvs. de componente.

1. Utilizând clientul de sincronizare Oracle Content Management pentru desktop, localizaţi componenta şi sincronizaţi-o cu sistemul de fişiere.

   Dacă nu aveţi clientul pentru desktop, puteţi vizualiza toate componentele şi selecta componenta respectivă în fila Componente a interfeţei Oracle Content Management, iar apoi detaliaţi pentru a vedea fişierele.

2. Dacă listaţi fişierele din cadrul componentei, veţi vedea aceste fişiere:

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

3. Deschideţi fişierul render.js aflat în directorul /assets.

   Principalele puncte ale fişierului render.js sunt:

   • Acesta este structurat ca un modul AMD JavaScript, astfel încât să poată fi "obligatoriu" în pagină.

   • El include, de asemenea, referinţe la KnockoutJS şi jQuery care sunt deja încărcate ca parte a paginii Oracle Content Management.

Luaţi în considerare structura fişierului render.js.

În conţinutul fişierului render.js există două obiecte JavaScript care implementează interfeţele API necesare ale componentei Oracle Content Management: sampleComponentFactory şi SampleComponentImpl. Aceste obiecte sunt un exemplu de implementare pentru crearea oricăror componente bazate pe KnockoutJS. Implementarea acestor obiecte se va schimba în funcţie de tehnologia pe care o utilizaţi.

• sampleComponentFactory

  • Acest obiect este returnat de modulul AMD render.js.

  • Acesta este un obiect Factory foarte simplu şi implementează interfaţa unică createComponent().

  • Implementările mai complexe pot utiliza valoarea args transmisă, pentru a returna diferite implementări ale componentei pe baza parametrului viewMode. Acest lucru vă permite să aveţi o implementare semnificativ mai uşoară a componentei pentru runtime, în comparaţie cu Generatorul de site-uri.

• SampleComponentImpl

  • Funcţia principală din cadrul acestui obiect este funcţia render, care este utilizată pentru a randa componenta pe pagină.

    Pentru a randa componenta Knockout în pagină, funcţia render adaugă dinamic şablonul la pagină, apoi aplică legăturile viewModel la şablon.

  • Restul implementării se ocupă de iniţializarea parametrului şi şablonului viewModel şi de tratarea mesajelor între pagină şi componentă.

Ultimele două obiecte din fişierul render.js, sampleComponentTemplate şi SampleComponentViewModel, furnizează o implementare personalizată pentru componentă. Implementarea acestora va fi diferită în funcţie de cerinţele dvs.

• sampleComponentTemplate

  • Acest obiect furnizează crearea şablonului KnockoutJS. El aşteaptă până când componenta are toate datele iniţializate, înainte de a încerca să afişeze ceva.

• SampleComponentViewModel

  • viewModel preia informaţiile stocate de Oracle Content Management în numele componentei, apoi selectează modul de aranjare corespunzător a componentei pe baza acelor date

  • Colecţii observable generale din Knockout utilizate de şablon pentru a administra accesul la metadatele stocate în numele componentei:

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

  • Integrare triggere şi acţiuni:

    Trigger:O funcţie de generare a unui trigger Oracle Content Management din componenta care poate fi legată de acţiunile altor componente din pagina respectivă.

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

    Acţiune: O funcţie de tratare a răspunsului callback, pentru momentul în care componenta este chemată să execute o acţiune cu un payload dat.

        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);
              }
            });
          }
        };

    Callback pentru a executa la cerere orice acţiune înregistrată.

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

  • Abonamente la ciclul de viaţă al componentelor:

    • Iniţializare componentă: Asiguraţi-vă că nu se randează componenta până când nu au fost preluate toate datele. Acest lucru este tratat prin intermediul colecţiilor observable din Knockout.

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

      Obţineţi valorile iniţiale pentru toate proprietăţile necesare. Acest lucru este gestionat de rutine callback pentru a prelua datele respective.

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

    • Actualizări metadate: Răspuns callback ori de câte ori metadatele componentelor stocate în numele componentei sunt modificate; de exemplu, atunci când utilizatorul invocă panoul Setări şi actualizează datele.

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