Steg 2: Granska strukturen för återgivningen av den lokala komponenten

I det här steget granskar vi strukturen hos de standardfiler som skapas för en lokal komponent.

För ett enkelt exempel med Hello World verkar fyra JavaScript-objekt och antalet rader med kod vara för mycket, men här är syftet att ge dig grunden så att du kan bygga mer komplexa komponenter samt hantera interaktionen med livscykeln på sidan Oracles molntjänst för webbplatshantering.

Så här granskar du den lokala komponentens struktur:

1. På Oracle Content Management-hemsidan klickar du på Utvecklare.

   Sidan Utvecklare visas.

2. Klicka på Visa alla komponenter.

3. Välj Skapa lokal komponent på menyn.

4. Ange ett namn för komponenten, t.ex. A_Local_Component.

5. Skriv en valfri beskrivning.

6. Klicka på Skapa.

   När du har gjort detta visas en komponent med namnet A_Local_Component i listan över komponenter.

1. Använd datorsynkroniseringsklienten för Oracle Content Management för att hitta komponenten och synkronisera den med filsystemet.

   Om du inte har klientdatorn kan du visa alla komponenter och välja komponenten på sidan Komponenter i gränssnittet för Oracle Content Management och borra ned för att se filerna.

2. Om du listar filerna under komponenten ser du följande filer:

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

3. Öppna filen render.js under katalogen /assets.

   Huvudpunkterna i filen render.js är:

   • Den är strukturerad som en JavaScript AMD-modul, så att den kan "krävas" till sidan.

   • Den inkluderar även referenser till KnockoutJS och JQuery som redan är laddade som en del av sidan i Oracle Content Management.

Överväg strukturen hos filen render.js.

I innehållet i filen render.js finns två JavaScript-objekt som implementerar de komponent-API:er för Oracle Content Management som krävs: sampleComponentFactory och SampleComponentImpl. Dessa objekt är ett exempel på en implementering för att skapa valfria komponenter baserade på KnockoutJS. Implementeringen av dessa objekt ändras baserat på vilken teknik du använder.

• sampleComponentFactory

  • Det här objektet returneras av AMD-modulen render.js.

  • Det här är ett mycket enkelt fabriksobjekt som implementerar det enstaka gränssnittet createComponent().

  • Vid mer komplexa implementeringar kan värdet args användas, och överföras för att returnera olika implementeringar av komponenten baserat på parametern viewMode. På så sätt kan du få en betydligt förenklad implementering av komponenten för exekvering jämfört med webbplatsverktyget.

• SampleComponentImpl

  • Den huvudsakliga funktionen i det här objektet är funktionen render, som används för att återge komponenten på sidan.

    För att återge komponenten Knockout på sidan lägger funktionen render dynamiskt till mallen på sidan, varefter den tillämpar viewModel-bindningarna på mallen.

  • Resten av implementeringen har att göra med initieringen av parametern viewModel och mallen samt meddelandehanteringen mellan sidan och komponenten.

De sista två objekten i filen render.js, sampleComponentTemplate och SampleComponentViewModel, tillhandahåller en anpassad implementering för komponenten. Implementeringen av dessa varierar baserat på dina krav.

• sampleComponentTemplate

  • Det här objektet ger upphov till skapandet av KnockoutJS-mallen. Det väntar tills komponenten har alla data initierade innan det försöker visa något.

• SampleComponentViewModel

  • viewModel hämtar den information som lagras av Oracle Content Management för komponentens räkning, och väljer sedan hur komponentens layout ska utformas på lämpligt sätt baserat på dessa data

  • Allmänna observerbara Knockout-element används av mallen för att hantera åtkomst till de metadata som lagras för komponentens räkning:

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

  • Integrering av triggrar och åtgärder:

    Trigger: En funktion för att orsaka en trigger i Oracle Content Management från komponenten som kan bindas till åtgärder för andra komponenter på sidan.

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

    Åtgärd: En funktion för hantering av återanropet för när komponenten beordras att exekvera en åtgärd med en given nyttolast.

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

    Återanrop: Att exekvera registrerade åtgärder på begäran.

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

  • Prenumerationer på komponentlivscykel:

    • Komponentinitiering: Kontrollera att komponenten inte återges förrän alla data har hämtats. Detta hanteras genom observerbara Knockout-element.

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

      Hämta de ursprungliga värdena för alla egenskaper som krävs. Detta hanteras av återanrop för att hämta data.

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

    • Metadatauppdateringar: Återanropa närhelst komponentmetadata som lagras för komponentens räkning ändras, t.ex. när användaren anropar panelen Inställningar och uppdaterar data.

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