Trin 2: Gennemgå strukturen for gengivelsen af den lokale komponent

I dette trin gennemgår vi strukturen for de standardfiler, der er oprettet for en lokal komponent.

For et enkelt Hello World-eksempel kan fire JavaScript-objekter og antallet af kodelinjer virke som for meget, men det er for at give dig et grundlag for at opbygge mere komplekse komponenter og håndtere interaktion med livscyklussen for Oracle Sites Cloud Service-sider.

Sådan gennemgår du strukturen af din lokale komponent:

1. Klik på Udvikler på startsiden for Oracle Content Management.

   Siden Udvikler vises.

2. Klik på Vis alle komponenter.

3. Vælg Opret lokal komponent i menuen.

4. Indtast et navn til komponenten, for eksempel A_Local_Component.

5. Indtast en valgfri beskrivelse.

6. Klik på Opret.

   Når du har gjort dette, vises der en komponent med navnet A_Local_Component på din liste over komponenter.

1. Brug Oracle Content Management-synkroniseringsklienten til desktop til at finde din komponent og synkronisere den med filsystemet.

   Hvis du ikke har desktop-klienten, kan du vise alle komponenter og vælge komponenten på siden Komponenter i Oracle Content Management-grænsefladen og bore ned for at se filerne.

2. Hvis du viser filerne under komponenten, kan du se disse filer:

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

3. Åbn filen render.js under kataloget /assets.

   Hovedpunkterne i filen render.js er:

   • Den er struktureret som et JavaScript-AMD-modul, så den kan være "påkrævet" på siden.

   • Den inkluderer også referencer til KnockoutJS og JQuery, der allerede er indlæst som en del af Oracle Content Management-siden.

Overvej strukturen for filen render.js.

Indholdet af filen render.js omfatter to JavaScript-objekter, der implementerer de påkrævede Oracle Content Management-komponent-API'er: sampleComponentFactory og SampleComponentImpl. Disse objekter er et eksempel på en implementering til oprettelse af KnockoutJS-baserede komponenter. Implementeringen af disse objekter ændres, afhængigt af den teknologi som du bruger.

• sampleComponentFactory

  • Dette objekt returneres af AMD-modulet render.js.

  • Dette er et meget enkelt factory-objekt, der implementerer createComponent()-grænsefladen.

  • Mere komplekse implementeringer bruger muligvis værdien args, der videregives for at returnere forskellige implementeringer af komponenten på basis af parameteren viewMode. Dette gør det muligt for dig at få en implementering af komponenten, der i langt højere grad er en letvægtsimplementering, for runtime versus Site Builder.

• SampleComponentImpl

  • Hovedfunktionen i dette objekt er funktionen render, der bruges til at gengive komponenten på siden.

    For at gengive komponenten Knockout på siden føjer funktionen render skabelonen dynamisk til siden og anvender derefter viewModel-tilknytninger på skabelonen.

  • Resten af implementeringen drejer sig om initialisering af parameteren viewModel og skabelonen samt håndtering af meddelelserne mellem siden og komponenten.

De sidste to objekter i filen render.js, sampleComponentTemplate og SampleComponentViewModel, angiver en tilpasset implementering af komponenten. Implementeringen af disse varierer, afhængigt af dine krav.

• sampleComponentTemplate

  • Dette objekt angiver oprettelsen af skabelonen KnockoutJS. Det venter, indtil komponenten har initialiseret alle dataene, før det forsøger at vise noget.

• SampleComponentViewModel

  • viewModel henter de oplysninger, der er gemt af Oracle Content Management på vegne af komponenten, og vælger derefter, hvordan komponenten bedste angives på basis af de pågældende data

  • Skabelonen bruger generelle observerbare Knockout-objekter til at håndtere adgang til de metadata, der lagres på vegne af komponenten:

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

  • Integration af triggere og handlinger:

    Trigger: En funktion, der udløser en Oracle Content Management-trigger fra komponenten, der kan være bundet til handlinger for andre komponenter på siden.

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

    Handling: En funktion, der håndterer callback'et, når komponenten får besked om at udføre en handling med et givet payload.

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

    Callback til udførelse af eventuelle registrerede handlinger efter behov.

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

  • Abonnementer på komponentlivscyklus:

    • Komponentinitialisering: Sørg for, at komponenten ikke gengives, før alle data er hentet. Dette håndteres gennem observerbare Knockout-objekter.

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

      Hent startværdierne for eventuelle påkrævede egenskaber. Dette håndteres af callbacks til hentning af dataene.

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

    • Metadataopdateringer: Callback, hver gang komponentmetadata, der er lagret på vegne af komponenten, ændres. Det kan for eksempel være, når brugeren kalder panelet Indstillinger og opdaterer dataene.

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