Stap 3: De structuur van lokale componentinstellingen controleren

In deze stap bekijken we de structuur van de instellingen die voor een lokale component zijn opgegeven.

Naast het bestand render.js in de directory /assets is er in dezelfde directory ook een vergelijkbaar, vooraf gemaakt bestand settings.html. In het bestand settings.html worden alle aangepaste instellingsgegevens voor uw component weergegeven. In de standaardimplementatie staat er één eigenschap imageWidth in de aangepaste instellingsgegevens.

Ga als volgt te werk om de structuur van uw lokale component te bekijken:

1. Zoek uw component en synchroniseer deze met het bestandssysteem met behulp van de Oracle Content Management desktopsynchronisatieclient.

   Als u geen desktopsynchronisatieclient hebt, kunt u de component selecteren op het tabblad Componenten in de webinterface van Oracle Content Management en omlaag drillen om de bestanden te zien.

2. Als u de bestanden onder de component weergeeft, ziet u de volgende bestanden:

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

Open het bestand settings.html in de directory /assets en bekijk de inhoud. Anders dan voor het bestand render.js wordt voor het bestand settings.html een inline-frame gebruikt in het paneel 'Instellingen' in de sitebuilder. Daarom is voor correcte weergave binnen het inline-frame ook toegang tot de ondersteunende bestanden nodig. De sitebuilder is nodig voor het beheren van uw site. Eventuele fouten in uw JavaScript-code moeten kunnen worden geïsoleerd van de sitebuilder, daarom wordt voor het bestand settings.html een inline-frame gebruikt.

Dit zijn de belangrijkste gebieden van het bestand settings.html:

• Knockout-sjabloon voor het weergeven van het paneel 'Instellingen'

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

• Aangepaste binding-handler voor aanpassing van de hoogte van het inline-frame nadat het paneel 'Instellingen' is gerenderd

  ko.bindingHandlers.scsCompComponentImpl

• Een Knockout-ViewModel voor toepassing op het Knockout-sjabloon

  SettingsViewModel

Dit zijn de belangrijkste elementen van SettingsViewModel:

• Abonnementen op componentlevensduur

• Componentinitialisatie:

  • Zorg ervoor dat de component niet wordt gerenderd voordat alle gegevens zijn opgehaald. Dit wordt afgehandeld via Knockout-observables.

    self.initialized = ko.observable(false);

  • Zorg ervoor dat we de gegevens niet proberen bij te werken voordat we klaar zijn.

    self.saveData = false;

  • De initiële waarden voor vereiste eigenschappen worden opgehaald. Dit wordt afgehandeld met callbacks voor het ophalen van de gegevens.

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

• Sla eventuele eigenschapswijzigingen op in de aangepaste instellingsgegevens.

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

Als u een andere eigenschap wilt toevoegen die u vast wilt leggen, is er een aantal stappen nodig:

1. Werk de gebruikersinterface bij om de nieuwe waarde weer te geven.

2. Initialiseer de waarde op basis van de huidige waarde die voor de component is opgeslagen.

3. Sla eventuele wijzigingen in de waarde weer op voor de component.

Als u een andere eigenschap wilt toevoegen aan uw aangepaste component, brengt u de volgende wijzigingen aan in het bestand settings.html:

1. Voeg nog een observable toe om de nieuwe eigenschap af te handelen. Wijzig deze code:

   self.width = ko.observable();

   Gebruik in plaats daarvan deze code:

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

2. Haal een eventuele huidige waarde voor de nieuwe eigenschap op als het instellingenpaneel de eerste keer wordt weergegeven. Wijzig deze code:

   self.width(data.width);

   Gebruik in plaats daarvan deze code:

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

3. Sla eventuele wijzigingen in deze nieuwe eigenschap op. Wijzig deze code:

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

   Gebruik in plaats daarvan deze code:

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

4. Voeg een gebruikersinterface toe om het nieuwe veld weer te geven. Wijzig deze code:

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

   Gebruik in plaats daarvan deze code:

   <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. Synchroniseer of upload het bestand settings.html.

Als u deze code nu zou uitvoeren, zou het veld worden weergegeven. De grootte van het paneel 'Instellingen' wordt echter niet automatisch gewijzigd. Omdat u het paneel groter hebt gemaakt, moet u ook de registratievermelding voor components.json bijwerken naar de nieuwe grootte.

1. Download het bestand appinfo.json, dat zich op hetzelfde niveau bevindt als de directory assets/ voor uw component, en werk de grootte van het instellingenpaneel bij. Wijzig deze code:

   "settingsHeight": 90,

   Gebruik in plaats daarvan deze code:

   "settingsHeight": 160,

2. Synchroniseer of upload het bestand appinfo.json.