Vaihe 2: paikallisen komponenttien muodostuksen rakenteen tarkistus

Tässä vaiheessa tarkistetaan paikalliselle komponentille luotujen oletustiedostojen rakenne.

Neljä JavaScript-objektia ja monta koodiriviä saattaa tuntua liioittelulta yksinkertaisen Hei maailma -esimerkin kohdalla. Sen avulla annetaan kuitenkin perusteet monimutkaisempien komponenttien muodostukseen ja Oracle Cloud Sites Service -sivun elinkaaren kanssa käytävään vuorovaikutukseen.

Paikallisen komponentin rakenteen tarkistus:

1. Valitse Oracle Content Management -palvelun kotisivulla Kehittäjä.

   Kehittäjä-sivu avautuu.

2. Valitse Näytä kaikki komponentit.

3. Valitse valikosta Luo paikallinen komponentti.

4. Anna komponentille nimi kuten, A_Local_Component.

5. Syötä valinnainen kuvaus.

6. Valitse Luo.

   Kun olet tehnyt tämän, komponenttien listalla näkyy komponentti nimeltä A_Local_Component.

1. Etsi komponenttisi Oracle Content Management -palvelun työpöydän synkronointisovelluksessa ja synkronoi komponentti tiedostojärjestelmän kanssa.

   Jos sinulla ei ole työpöytäohjelmistoa, voit tarkastella kaikkia komponentteja ja valita komponentin Oracle Content Management -liittymän Komponentit-välilehdessä ja siirtyä kansiorakenteessa alaspäin, kunnes näet tiedostot.

2. Kun avaat komponenttiin kuuluvien tiedostojen listan, näet seuraavat tiedostot :

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

3. Avaa render.js-tiedosto /assets-hakemistossa.

   render.js-tiedoston tärkeimmät ominaisuudet:

   • Se on jäsennetty JavaScript AMD -moduuliksi, joten sitä voidaan vaatia sivulle.

   • Se sisältää myös viittaukset KnockoutJS:ään ja JQueryyn, jotka on jo ladattu osaksi Oracle Oracle Content Management -sivua.

Ota huomioon render.js-tiedoston rakenne.

render.js-tiedostoon sisältyy kaksi JavaScript-objektia, jotka toteuttavat vaaditut Oracle Content Management -komponentin API-rajapinnat: sampleComponentFactory ja SampleComponentImpl. Nämä objektit ovat esimerkkejä toteutuksesta, jolla luodaan KnockoutJS-perusteisia komponentteja. Näiden objektien toteutus vaihtelee käytetyn teknologian mukaan.

• sampleComponentFactory

  • render.js-tiedoston AMD-moduuli palauttaa tämän objektin.

  • Kyseessä on erittäin yksinkertainen tehdasobjekti, joka toteuttaa yksittäisen createComponent()-liittymän.

  • Monimutkaisemmissa toteutuksissa voidaan käyttää args-arvoa. Se välitetään, jotta voidaan palauttaa komponentin eri toteutuksia viewMode-parametrin perusteella. Sen avulla komponentti voidaan toteuttaa ajonaikaisesti huomattavasti kevyemmin sivustonluontiohjelmaan verrattuna.

• SampleComponentImpl

  • Tämän objektin pääfunktio on render-funktio, jolla komponentti muodostetaan sivulle.

    Muodostaessaan Knockout-komponentin sivulle render-funktio lisää mallipohjan dynaamisesti sivulle ja käyttää sittenviewModel-sidoksia mallipohjassa.

  • Toteutuksen loppuosa koskee viewModel-parametrin ja mallipohjan alustusta sekä sivun ja komponentin välisen viestinnän käsittelyä.

render.js-tiedoston kahden viimeisen objektin(sampleComponentTemplate ja SampleComponentViewModel) avulla komponentille voidaan suorittaa mukautettu toteutus. Niiden toteutus vaihtelee vaatimusten mukaan.

• sampleComponentTemplate

  • Tällä objektilla voidaan luoda KnockoutJS-mallipohja. Se odottaa, kunnes komponentin kaikki tiedot on alustettu, ennen kuin se yrittää näyttää mitään.

• SampleComponentViewModel

  • viewModel hakee Oracle Content Management -palvelun tallentamat tiedot komponentin puolesta ja valitsee sitten komponentille sopivan asettelun kyseisten tietojen perusteella.

  • Mallipohjassa käytetyt yleiset havaittavat Knockout-parametrit, joilla käsitellään komponentin puolesta tallennettujen metatietojen käyttöä:

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

  • Herättimien ja toimintojen integrointi:

    Herätin: funktio, jolla käynnistetään Oracle Content Management -herätin komponentista, joka voidaan sitoa sivun toisten komponenttien toimintoihin.

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

    Toiminto: funktio, jolla käsitellään vastakutsu, kun komponentin käsketään suorittaa toiminto tiettyjä käsiteltyjä tietoja käyttäen.

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

    Vastakutsu, jonka avulla voidaan suorittaa mikä tahansa rekisteröity toiminto tarpeen mukaan.

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

  • Komponentin elinkaaren tilaukset:

    • Komponentin alustus: varmista, ettei komponentti esitä sisältöä, ennen kuin kaikki tiedot on haettu. Tämä hoidetaan havaittavilla Knockout-parametreilla.

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

      Hae kaikkien pakollisten ominaisuuksien alkuarvot. Se tehdään vastakutsuilla, joilla haetaan tiedot.

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

    • Metatietojen päivitykset: vastakutsu suoritetaan aina, kun komponentin puolesta tallennettuja metatietoja muutetaan, eli esimerkiksi silloin, kun käyttäjä avaa Asetukset-paneelin ja päivittää tiedot.

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