2. lépés: A helyi összetevő megjelenítési struktúrájának áttekintése

Ebben a lépésben a helyi összetevőhöz létrehozott alapértelmezett fájlok struktúráját tekintjük át.

Az egyszerű Hello World példánál a négy JavaScript objektum és a számos kódsor túl soknak tűnhet, de ez arra szolgál, hogy alapot biztosítson összetettebb összetevők kialakításához, valamint bemutassa az Oracle Cloud Sites Service szolgáltatásban az oldalak életciklusával való együttműködést.

A helyi összetevő struktúrájának áttekintése:

1. Az Oracle Content Management kezdőlapján kattintson a Fejlesztő elemre.

   A Fejlesztő oldal jelenik meg.

2. Kattintson az Összes összetevő megtekintése elemre.

3. Válassza a menün a Helyi összetevő létrehozása elemet.

4. Adjon nevet az összetevőnek, például A_Local_Component.

5. Adjon meg opcionális leírást.

6. Kattintson a Létrehozás gombra.

   Ennek végrehajtása után az A_Local_Component nevű összetevő megjelenik az összetevők listáján.

1. Az Oracle Content Management asztali szinkronizáló ügyfélprogramjával keresse meg összetevőjét, és szinkronizálja azt a fájlrendszerrel.

   Ha nem rendelkezik az asztali ügyfélprogrammal, megtekintheti az összes összetevőt, és kijelölheti az összetevőt az Oracle Content Management felületének Összetevők oldalán, majd részletezéssel megtekintheti a fájlokat.

2. Amikor listázza az összetevőhöz tartozó fájlokat, a következő fájlok jelennek meg:

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

3. Nyissa meg a render.js fájlt az /assets könyvtárból.

   A render.js fájl alapvető jellemzői a következők:

   • JavaScript AMD modulként van felépítve, így „kötelező” lehet az oldalhoz.

   • Hivatkozásokat tartalmaz a KnockoutJS és a JQuery függvénytárra, amelyek az Oracle Content Management oldalának részeként már be vannak töltve.

Tekintsük át a render.js fájl struktúráját.

A render.js fájl tartalmában két JavaScript objektum található, amelyek az Oracle Content Management összetevőjéhez szükséges API felületeket valósítják meg: sampleComponentFactory és SampleComponentImpl. Ezek az objektumok megvalósítási példaként szolgálnak tetszőleges KnockoutJS alapú összetevő létrehozásához. Az objektumok megvalósítása a használt technológia alapján változik.

• sampleComponentFactory

  • Ezt az objektumot a render.js AMD modulja adja vissza.

  • Ez rendkívül egyszerű Factory objektum, és az egyetlen createComponent() felületet valósítja meg.

  • Az összetettebb megvalósítások az átadott args értékét használhatják az összetevő különböző megvalósításainak visszaadásához a viewMode paraméter alapján. Ez az összetevő lényegesen egyszerűbb megvalósítását teszi lehetővé futásidőben a Site Builder szerkesztővel összevetve.

• SampleComponentImpl

  • Az objektum legfontosabb függvénye a render, amely az összetevő oldalon való megjelenítésére szolgál.

    A Knockout összetevő megjelenítéséhez az oldalon a render függvény dinamikusan hozzáadja a sablont az oldalhoz, majd a viewModel kötéseit alkalmazza a sablonra.

  • A megvalósítás fennmaradó része a viewModel paraméter és a sablon inicializálásával foglalkozik, valamint az oldal és az összetevő közötti üzenetváltás kezelésével.

A render.js fájlban a két további objektum, sampleComponentTemplate és SampleComponentViewModel, egyéni megvalósítást biztosít az összetevő számára. Ezek megvalósítása a felhasználó igényeinek megfelelően változik.

• sampleComponentTemplate

  • Ez az objektum a KnockoutJS sablon létrehozását biztosítja. Ez megvárja, amíg az összetevő rendelkezik az összes inicializált adattal, és csak ezután kísérli meg bárminek a megjelenítését.

• SampleComponentViewModel

  • A viewModel lekéri az összetevő nevében az Oracle Content Management által tárolt adatokat, majd az adatok alapján eldönti, hogy hogyan rendezhető el megfelelően az összetevő.

  • A Knockout általános observable (megfigyelhető) elemeit használja a sablon az összetevő nevében tárolt metaadatokhoz való hozzáférés kezeléséhez:

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

  • Triggerek és műveletek integrációja:

    Trigger: Függvény az Oracle Content Management triggerének indításához az összetevőből, amely az oldalon lévő más összetevők műveleteihez kapcsolódhat.

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

    Művelet: Függvény a visszahívás kezeléséhez, amikor a összetevő utasítást kap művelet végrehajtására adott adattörzzsel.

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

    Visszahívás tetszőleges regisztrált művelet igény szerinti végrehajtásához.

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

  • Előfizetések összetevő életciklusára:

    • Összetevő inicializálása: Biztosítani kell, hogy az összes adat behívásáig az összetevő ne indítson megjelenítést. Ennek kezelése Knockout observable (megfigyelhető) elemeken keresztül történik.

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

      Minden szükséges tulajdonság kezdőértékének beolvasása. Ennek kezelése visszahívásokkal történik az adatok lekéréséhez.

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

    • Metaadat-frissítések: Visszahívás, amikor az összetevő nevében tárolt metaadatok megváltoznak; például amikor a felhasználó megnyitja a Beállítások panelt, és módosítja az adatokat.

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