Krok 2: Kontrola štruktúry vykreslenia lokálneho komponentu

V tomto kroku skontrolujeme štruktúru predvolených súborov vytvorených pre lokálny komponent.

Pre jednoduchý príklad Hello World sa štyri objekty JavaScript a počet riadkov kódu môžu zdať príliš veľa, ale ide o to, aby sme vám poskytli základ na vytváranie komplexnejších komponentov a tiež na riešenie interakcie so životným cyklom stránky Oracle Sites Cloud Service.

Ako skontrolovať štruktúru lokálneho komponentu:

1. Na domovskej stránke služby Oracle Content Management kliknite na položku Vývojár.

   Zobrazí sa stránka Vývojár.

2. Kliknite na položku Zobraziť všetky komponenty.

3. V ponuke vyberte položku Vytvoriť lokálny komponent.

4. Zadajte názov komponentu, napríklad A_Local_Component.

5. Zadajte voliteľný popis.

6. Kliknite na položku Vytvoriť.

   Keď to urobíte, v zozname komponentov sa zobrazí komponent s názvom A_Local_Component.

1. Pomocou klienta služby Oracle Content Management pre synchronizáciu s počítačom vyhľadajte komponent a synchronizujte ho so systémom súborov.

   Ak nemáte počítačový klient, môžete zobraziť všetky komponenty, vybrať komponent na stránke Komponenty v rozhraní služby Oracle Content Management a prejsť na nižšie úrovne na zobrazenie súborov.

2. V zozname súborov pod komponentom uvidíte tieto súbory:

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

3. Otvorte súbor render.js v adresári /assets.

   Hlavné body súboru render.js:

   • Je štruktúrovaný ako modul JavaScript AMD, aby mohol byť na stránku „vyžiadaný“.

   • Zahŕňa aj odkazy na knižnice KnockoutJS a JQuery, ktoré už sú načítané ako súčasť stránky Oracle Content Management.

Pozorne si pozrite štruktúru súboru render.js.

V obsahu súboru render.js sa nachádzajú dva objekty JavaScript, ktoré implementujú požadované rozhrania API komponentu služby Oracle Content Management: sampleComponentFactory a SampleComponentImpl. Tieto objekty sú príkladom implementácie na vytvorenie ľubovoľných komponentov na báze KnockoutJS. Implementácia týchto objektov sa bude meniť v závislosti od technológií, ktoré použijete.

• sampleComponentFactory

  • Tento objekt je vrátený modulom AMD v súbore render.js.

  • Ide o veľmi jednoduchý objekt Factory, ktorý implementuje jedno rozhranie createComponent().

  • Zložitejšie implementácie môžu používať hodnotu args, aby sa vrátili rôzne implementácie komponentu na základe parametra viewMode. V porovnaní s generátorom lokalít to umožňuje používať omnoho jednoduchšiu implementáciu komponentu v čase behu.

• SampleComponentImpl

  • Hlavnou funkciou v rámci tohto objektu je funkcia render, ktorá sa používa na vykreslenie komponentu na stránke.

    Aby bolo možné vykresliť na stránke komponent Knockout, funkcia render na stránku dynamicky pridá šablónu, v ktorej potom použije viazania viewModel.

  • Zvyšok implementácie rieši inicializáciu parametra a šablóny viewModel a spracovanie výmeny správ medzi stránkou a komponentom.

Posledné dva objekty v súbore render.js – sampleComponentTemplate a SampleComponentViewModel poskytujú vlastnú implementáciu pre komponent. Ich implementácia sa bude líšiť v závislosti od vašich požiadaviek.

• sampleComponentTemplate

  • Tento objekt poskytuje vytvorenie šablóny KnockoutJS. Skôr ako sa pokúsi niečo zobraziť, čaká, kým sa inicializujú všetky dáta pre komponent.

• SampleComponentViewModel

  • viewModel vyvolá informácie, ktoré uložila služba Oracle Content Management namiesto komponentu, a potom na základe týchto dát vyberie vhodný spôsob rozloženia komponentu.

  • Všeobecné pozorované objekty Knockout observables, ktoré sa v šablóne používajú na spracovanie prístupu k metadátam uloženým namiesto komponentu:

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

  • Integrácia spúšťačov a akcií:

    Spúšťač: Funkcia na vyvolanie spúšťača služby Oracle Content Management z komponentu, ktorý môže byť zviazaný s akciami iných komponentov na stránke.

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

    Akcia: Funkcia na spracovanie spätného volania, keď komponent dostane príkaz na vykonanie akcie s uvedeným payloadom.

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

    Spätné volanie na vykonanie ľubovoľných registrovaných akcií na požiadanie.

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

  • Odbery životného cyklu komponentu:

    • Inicializácia komponentu: Zabezpečte, aby sa komponent nevykreslil, kým sa nevyvolajú všetky dáta. Toto je spracované použitím pozorovaných objektov Knockout observables.

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

      Získajte počiatočné hodnoty pre všetky požadované vlastnosti. Toto je spracované spätnými volaniami na vyvolanie dát.

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

    • Aktualizácie metadát: Spätné volanie pri každej zmene metadát komponentu, ktoré boli uložené namiesto komponentu, napríklad keď používateľ vyvolá panel Nastavenia a aktualizuje dáta.

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