Krok 2: Seznámení se strukturou generování vaší místní komponenty

V tomto kroku se seznámíme se strukturou výchozích souborů vytvořených pro místní komponentu.

V jednoduchém příkladu Hello World se čtyři javascriptové objekty a množství řádků kódu mohou zdát příliš mnoho, ale jejich prostřednictvím získáte základ pro sestavení složitějších komponent, stejně jako pro zvládnutí interakce se stránkou služby Oracle Cloud Sites Service po celou dobu jejího životního cyklu.

Postup kontroly struktury místní komponenty:

1. Na domovské stránce služby Oracle Content Management klikněte na položku Vývojář.

   Zobrazí se stránka Vývojář.

2. Klikněte na položku Zobrazit všechny komponenty.

3. V nabídce vyberte položku Vytvořit místní komponentu.

4. Zadejte název komponenty, například A_Local_Component.

5. Zadejte nepovinný popis.

6. Klikněte na tlačítko Vytvořit.

   Po provedení těchto kroků se v seznamu komponent zobrazí komponenta s názvem A_Local_Component.

1. Pomocí klientu pro synchronizaci stolního počítače se službou Oracle Content Management vyhledejte komponentu a synchronizujte ji se souborovým systémem.

   Pokud nemáte k dispozici klient stolního počítače, můžete zobrazit všechny komponenty a vybrat komponentu na stránce Komponenty rozhraní služby Oracle Content Management, a poté přechodem k podrobnostem zobrazit soubory.

2. V seznamu souborů pro komponentu budou uvedeny tyto soubory:

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

3. Otevřete soubor render.js, který se nachází v adresáři /assets.

   Mezi hlavní vlastnosti souboru render.js patří:

   • Je strukturován jako javascriptový modul AMD, takže může být na stránce „vyžadován“.

   • Zahrnuje také odkazy na knihovny KnockoutJS a JQuery, které jsou již načteny jako součást stránky Oracle Content Management.

Zaměřte se na strukturu souboru render.js.

V obsahu souboru render.js se nacházejí dva javascriptové objekty, které implementují požadovaná rozhraní API komponent služby Oracle Content Management: sampleComponentFactory and SampleComponentImpl. Tyto objekty jsou příkladem implementace pro vytváření jakýchkoli komponent založených na knihovně KnockoutJS. Implementace těchto objektů se změní podle vámi používané technologie.

• sampleComponentFactory

  • Tento objekt je vrácen modulem AMD souboru render.js.

  • Jedná se o velmi jednoduchý objekt Factory, který implementuje jediné rozhraní createComponent().

  • Složitější implementace mohou používat předávanou hodnotu args k vrácení různých implementací komponenty na základě parametru viewMode. To vám umožní mít k dispozici podstatně lehčí implementaci komponenty pro běh v porovnání s nástrojem Site Builder.

• SampleComponentImpl

  • Hlavní funkcí v tomto objektu je funkce render, která se používá ke generování komponenty na stránce.

    Chcete-li na stránce generovat komponentu Knockout, funkce render dynamicky přidá šablonu ke stránce a poté na šablonu aplikuje vazby objektu viewModel.

  • Zbývající část implementace řeší inicializaci parametru viewModel a šablony a zpracování předávání zpráv mezi stránkou a komponentou.

Poslední dva objekty v souboru render.js, kterými jsou sampleComponentTemplate a SampleComponentViewModel, zajišťují vlastní implementaci komponenty. Jejich implementace se bude lišit podle vašich požadavků.

• sampleComponentTemplate

  • Tento objekt zajišťuje vytvoření šablony knihovny KnockoutJS. Než se pokusí cokoli zobrazit, počká, až komponenta inicializuje veškerá data.

• SampleComponentViewModel

  • Objekt viewModel načte informace uložené službou Oracle Content Management jménem komponenty a poté vybere způsob, jak na základě těchto dat komponentu vhodně rozvrhnout.

  • Obecné objekty typu Observable knihovny Knockout používané šablonou ke zpracování přístupu k metadatům uloženým jménem komponenty:

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

  • Integrace triggerů a akcí:

    Trigger: Funkce k vyvolání triggeru služby Oracle Content Management z komponenty, kterou lze svázat s akcemi jiných komponent na stránce.

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

    Akce: Funkce pro zpracování zpětného volání, když je komponentě přikázáno, aby spustila akci s danou datovou částí.

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

    Zpětné volání ke spuštění libovolných registrovaných akcí na vyžádání.

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

  • Subskripce pro životní cyklus komponenty:

    • Inicializace komponenty: Zajistěte, aby nedošlo ke generování komponenty dříve, než budou načtena všechna data. Splnění tohoto požadavku je zajištěno prostřednictvím objektů typu Observable knihovny Knockout.

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

      Získejte počáteční hodnoty pro všechny požadované vlastnosti. K tomu se používají zpětná volání určená k načtení dat.

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

    • Aktualizace metadat: Aktivujte zpětné volání, kdykoli se změní metadata komponenty uložená jménem komponenty, například když uživatel vyvolá panel Nastavení a aktualizuje data.

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