Trinn 2: Gjennomgå strukturen for gjengivelsen av den lokale komponenten

I dette trinnet skal vi gjennomgå strukturen for standardfilene som ble opprettet for en lokal komponent.

For et enkelt Hello World-eksempel kan det virke som at fire JavaScript-objekter og antall kodelinjer er for mye, men dette skal gi deg grunnlaget for å kunne bygge mer komplekse komponenter og kunne håndterer samhandling med livssyklusen til Oracle Cloud Sites Service-sider.

Slik vurderer du strukturen for den lokale komponenten:

1. Klikk på Utvikler på hjemmesiden for Oracle Content Management.

   Siden Utvikler vises.

2. Klikk på Vis alle komponenter.

3. På menyen velger du Opprett lokal komponent.

4. Angi et navn på komponenten, for eksempel A_Local_Component.

5. Skriv inn en valgfri beskrivelse.

6. Klikk på Opprett.

   Når du har gjort dette, ser du en komponent med navnet A_Local_Component i listen over komponenter.

1. Finn komponenten og synkroniser den med filsystemet ved hjelp av skrivebordsklienten for synkronisering for Oracle Content Management.

   Hvis du ikke har skrivebordsklienten, kan du vise alle komponentene og velge komponenten på siden Komponenter i Oracle Content Management-grensesnittet og drille ned slik at du ser filene.

2. Hvis du viser filene under komponenten, ser du disse filene:

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

3. Åpne filen render.js under katalogen /assets.

   Hovedpunktene for filen render.js er:

   • Den er strukturert som en AMD-modul for JavaScript slik at den kan bli "nødvendig" på siden.

   • Den inkluderer også referanser til KnockoutJS og JQuery som allerede er lastet inn som en del av Oracle Content Management-siden.

Vurder strukturen til filen render.js.

Filen Render.js inneholder to JavaScript-objekter som implementerer de nødvendige API-ene for Oracle Content Management-komponenten: sampleComponentFactory og SampleComponentImpl. Disse objektene er et eksempel på en implementering for opprettelse av hvilke som helst KnockoutJS-baserte komponenter. Implementeringen av disse objektene blir endret basert på hvilken teknologi du bruker.

• sampleComponentFactory

  • Dette objektet returneres av ADM-modulen for render.js.

  • Dette er et svært enkelt fabrikkobjekt som implementerer enkeltgrensesnittet createComponent().

  • Mer komplekse implementeringer kan bruke verdien args, som sendes for å returnere ulike implementeringer av komponenten basert på parameteren viewMode. På denne måten kan du ha en betydelig lettere implementering av komponenten for kjøretid enn områdebyggeren.

• SampleComponentImpl

  • Hovedfunksjonen i dette objektet er funksjonen render, som brukes til å gjengi komponenten på siden.

    Når du skal gjengi Knockout-komponenten på siden, legger funksjonen render til malen på siden dynamisk, og deretter bruker den viewModel-bindinger på malen.

  • Resten av implementeringen tar for seg av initialisering av viewModel-parameteren og -malen og håndtering av meldingsutveksling mellom siden og komponenten.

De siste to objektene i filen render.js, sampleComponentTemplate og SampleComponentViewModel, har en egendefinert implementering for komponenten. Implementeringen av disse varierer avhengig av kravene dine.

• sampleComponentTemplate

  • Dette objektet sørger for opprettelsen av KnockoutJS-malen. Det venter til alle dataene for komponenten er initialisert før den prøver å vise noe.

• SampleComponentViewModel

  • viewModel henter opplysningene som er lagret i Oracle Content Management, på vegne av komponenten, og deretter velger den riktig oppsett for komponenten basert på disse dataene

  • Generelle observerbare Knockout-objekter som brukes av malen til å håndtere tilgang til metadataene som er lagret på vegne av komponenten:

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

  • Integrering av triggere og handlinger:

    Utløser: En funksjon som initierer en Oracle Content Management-utløser fra komponenten som kan bindes til handlinger for andre komponenter på siden.

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

    Handling: En funksjon som håndterer tilbakekallet når komponenten blir bedt om å utføre en handling med en gitt nyttelast.

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

    Tilbakekall som utfører hvilke som helst registrerte handlinger ved forespørsel.

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

  • Abonnement på livssyklusen til komponenten:

    • Komponentinitialisering: Pass på at komponenten ikke blir gjengitt før alle dataene er hentet. Dette blir håndtert via observerbare Knockout-objekter.

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

      Hent de opprinnelige verdiene for hvilke som helst nødvendige egenskaper. Dette blir håndtert av tilbakekall om å hente dataene.

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

    • Metadataoppdateringer: Send tilbakekall hver gang komponentmetadata som er lagret på vegne av komponenten, endres, for eksempel når brukeren åpner ruten Innstillinger og oppdaterer dataene.

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