Trin 3: Gennemgå strukturen for indstillingerne for den lokale komponent

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

Der er en settings.html-fil, der er oprettet på forhånd, i det samme katalog på samme måde, som det er tilfældet med filen render.js i kataloget /assets. Filen settings.html gengiver eventuelle tilpassede indstillingsdata for komponenten. I standardimplementeringen er der en enkelt egenskab, imageWidth, i de tilpassede indstillingsdata.

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

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

   Hvis du ikke har synkroniseringsklienten til desktop, kan du vælge komponenten på fanen Komponenter i Oracle Content Management-webgræ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

Åbn filen settings.html under kataloget /assets, og gennemse indholdet. I modsætning til filen render.js bruger filen settings.html en inline-ramme i panelet Indstillinger i Site Builder, og den skal derfor også have adgang til de understøttende filer for at gengive korrekt i inline-rammen. Site Builder kræves til håndtering af sitet, så eventuelle fejl i JavaScript-koden kan isoleres fra Site Builder, hvilket er årsagen til, at filen settings.html bruger en inline-ramme.

Dette er hovedområderne i filen settings.html:

• Knockout-skabelon til gengivelse af panelet Indstillinger.

  <!-- 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 -->

• Tilpasset tilknytnings-handler til justering af højden på inline-rammen, når panelet Indstillinger er gengivet.

  ko.bindingHandlers.scsCompComponentImpl

• En Knockout ViewModel til anvendelse af Knockout-skabelonen.

  SettingsViewModel

Dette er hovedelementerne i SettingsViewModel :

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

  • Sørg for ikke at forsøge at opdatere dataene, før de er klar.

    self.saveData = false;

  • Hent startværdierne for eventuelle påkrævede egenskaber. Dette håndteres af callbacks til hentning af 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;
        });

• Gem eventuelle ændringer af egenskaber for de tilpassede indstillingsdata.

      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 tilføje yderligere en egenskab, som du vil registrere, kræver det flere trin:

1. Opdater UI'en, så den nye værdi vises.

2. Initialiser værdien til den aktuelle værdi, der er lagret mod komponenten.

3. Gem eventuelle ændringer af værdien i komponenten.

Hvis du vil føje yderligere en egenskab til den tilpassede komponent, skal du foretage følgende ændringer af filen settings.html:

1. Tilføj et observerbart objekt mere for at håndtere den nye egenskab Ændr denne kode:

   self.width = ko.observable();

   Brug denne kode i stedet:

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

2. Hent en eventuel aktuel værdi for den nye egenskab, når panelet Indstillinger vises. Ændr denne kode:

   self.width(data.width);

   Brug denne kode i stedet:

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

3. Gem eventuelle ændringer af den nye egenskab. Ændr denne kode:

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

   Brug denne kode i stedet:

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

4. Tilføj et brugerinterface for at vise det nye felt. Ændr denne kode:

   <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">

   Brug denne kode 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 upload filen settings.html.

Hvis du kørte denne nu, ville feltet blive vist. Størrelsen af panelet Indstillinger ændres imidlertid ikke automatisk. Eftersom du øgede panelets størrelse, skal du også opdatere registreringsposten for components.json til den nye størrelse.

1. Download filen appinfo.json, der er på samme niveau som kataloget assets/, for komponenten, og opdater størrelsen af panelet Indstillinger. Ændr denne kode:

   "settingsHeight": 90,

   Brug denne kode i stedet:

   "settingsHeight": 160,

2. Synkroniser eller upload filen appinfo.json.