Trinn 3: Gjennomgå strukturen for innstillinger for lokale komponenter

I dette trinnet skal vi gjennomgå strukturen for innstillingene som er angitt for en lokal komponent.

På lignende måte som for filen render.js i katalogen /assets finnes det en forhåndsopprettet fil kalt settings.html i samme katalog. Filen settings.html gjengir hvilke som helst data om egendefinerte innstillinger for komponenten din. I standardimplementeringen finnes det en enkelt egenskap, imageWidth, i dataene om egendefinerte innstillinger.

Slik vurderer du strukturen for den lokale komponenten:

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

   Hvis du ikke har klienten for skrivebordssynkronisering, kan du velge komponenten i fanen Komponenter i Web-grensesnittet for Oracle Content Management 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

Åpne filen settings.html under katalogen /assets, og gjennomgå innholdet. I motsetning til filen render.js bruker filen settings.html en linjebundet ramme i ruten Innstillinger i områdebyggeren. Det er grunnen til at du også må ha tilgang til støttefilene for at gjengivelsen skal bli riktig i den linjebundne rammen. Du trenger områdebyggeren til å administrere området ditt slik at eventuelle feil i JavaScript-koden kan isoleres fra områdebyggeren, noe som er grunnen til at filen settings.html bruker en linjebundet ramme.

Dette er hoveddelene av filen settings.html:

• Knockout-mal som gjengir ruten Innstillinger.

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• Egendefinert bindingsbehandler som justerer høyden på den linjebundne rammen når ruten Innstillinger er gjengitt.

  ko.bindingHandlers.scsCompComponentImpl

• En Knockout ViewModel som skal brukes på Knockout-malen.

  SettingsViewModel

Dette er hovedelementene til SettingsViewModel:

• Abonnementer 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.initialized = ko.observable(false);

  • Pass på at vi ikke prøver å oppdatere dataene før vi er klare.

    self.saveData = false;

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

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

• Lagre eventuelle egenskapsendringer i dataene om egendefinerte innstillinger.

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

Hvis du vil legge til en annen egenskap som du vil registrere, er det nødvendig med flere trinn:

1. Oppdater brukergrensesnittet slik at den nye verdien vises.

2. Initialiser verdien til den gjeldende verdien som er lagret, for komponenten.

3. Lagre alle endringer av verdien i komponenten igjen.

Hvis du vil legge til en annen egenskap i den egendefinerte komponenten, må du gjøre følgende endringer i filen settings.html:

1. Legg til et annet observerbart objekt som kan håndtere den nye egenskapen. Slik endrer du denne koden:

   self.width = ko.observable();

   Bruk denne koden i stedet:

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. Hent en hvilken som helst gjeldende verdi for den nye egenskapen første gang ruten Innstillinger vises. Slik endrer du denne koden:

   self.width(data.width);

   Bruk denne koden i stedet:

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Lagre alle endringer av denne nye egenskapen. Slik endrer du denne koden:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   Bruk denne koden i stedet:

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Legg til et brukergrensesnitt som viser det nye feltet. Slik endrer du denne koden:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   Bruk denne koden i stedet:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. Synkroniser eller last opp filen settings.html.

Hvis du hadde kjørt dette nå, hadde feltet blitt vist. Størrelsen på ruten Innstillinger blir imidlertid ikke endret automatisk. Siden du økte størrelsen på ruten, må du også oppdatere registreringsoppføringen components.json med den nye størrelsen.

1. Last ned filen appinfo.json, som er på samme nivå som katalogen assets/ for komponenten, og oppdater størrelsen på ruten Innstillinger. Slik endrer du denne koden:

   "settingsHeight": 90,

   Bruk denne koden i stedet:

   "settingsHeight": 160,

2. Synkroniser eller last opp filen appinfo.json.