Schritt 3: Struktur der Einstellungen für eine lokale Komponente prüfen

In diesem Schritt prüfen Sie die Struktur der für eine lokale Komponente angegebenen Einstellungen.

Zusätzlich zur Datei render.js im Verzeichnis /assets enthält dasselbe Verzeichnis auch die vorab erstellte Datei settings.html. Die Datei settings.html rendert alle benutzerdefinierten Einstellungsdaten für die Komponente. In der Standardimplementierung gibt es die einzelne Eigenschaft imageWidth in den benutzerdefinierten Einstellungsdaten.

So prüfen Sie die Struktur einer lokalen Komponente:

1. Suchen Sie mit dem Oracle Content Management-Desktopclient für die Synchronisierung Ihre Komponente, und synchronisieren Sie sie mit dem Dateisystem.

   Wenn Sie nicht über den Desktopsynchronisierungsclient verfügen, können Sie die Komponente auf der Registerkarte Komponenten der Oracle Content Management-Weboberfläche auswählen und dann einen Drilldown ausführen, um die Dateien anzuzeigen.

2. In der Liste der Dateien unter der Komponente sehen Sie die folgenden Dateien:

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

Öffnen Sie im Verzeichnis /assets die Datei settings.html, und prüfen Sie den Inhalt. Im Gegensatz zur Datei render.js verwendet die Datei settings.html einen Inlineframe im Einstellungsbereich in Sitebuilder. Daher benötigt sie auch Zugriff auf die unterstützenden Dateien für das korrekte Rendering im Inlineframe. Sitebuilder ist zum Verwalten der Site erforderlich, damit etwaige Fehler im JavaScript-Code von Sitebuilder isoliert werden können. Daher verwendet die Datei settings.html einen Inlineframe.

Hauptbereiche der Datei settings.html:

• Knockout-Vorlage zum Rendern des Einstellungsbereichs.

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

• Benutzerdefinierter Binding Handler zum Anpassen der Höhe des Inlineframes, wenn der Einstellungsbereich gerendert wurde.

  ko.bindingHandlers.scsCompComponentImpl

• Ein Knockout-ViewModel, das auf die Knockout-Vorlage angewendet wird.

  SettingsViewModel

Hauptelemente von SettingsViewModel:

• Abonnements des Komponentenlebenszyklus.

• Komponenteninitialisierung:

  • Stellen Sie sicher, dass die Komponente erst gerendert wird, wenn alle Daten abgerufen wurden. Dies wird mit Knockout-Observables verarbeitet.

    self.initialized = ko.observable(false);

  • Stellen Sie sicher, dass die Daten erst aktualisiert werden, wenn sie bereit sind.

    self.saveData = false;

  • Rufen Sie die anfänglichen Werte für erforderliche Eigenschaften ab. Dies wird von Callbacks zum Abrufen der Daten verarbeitet.

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

• Speichern Sie eventuelle Eigenschaftsänderungen in den benutzerdefinierten Einstellungsdaten.

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

Um eine weitere zu erfassende Eigenschaft hinzuzufügen, müssen Sie mehrere Schritte ausführen:

1. Aktualisieren Sie die Benutzeroberfläche, um den neuen Wert anzuzeigen.

2. Initialisieren Sie den Wert auf den aktuellen für die Komponente gespeicherten Wert.

3. Speichern Sie Änderungen am Wert wieder in der Komponente.

Um eine weitere Eigenschaft zur benutzerdefinierten Komponente hinzuzufügen, nehmen Sie die folgenden Änderungen an der Datei settings.html vor:

1. Fügen Sie ein weiteres Observable zum Verarbeiten der neuen Eigenschaft hinzu. Ändern Sie diesen Code:

   self.width = ko.observable();

   Verwenden Sie stattdessen diesen Code:

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

2. Rufen Sie den aktuellen Wert für die neue Eigenschaft ab, wenn der Einstellungsbereich zum ersten Mal angezeigt wird. Ändern Sie diesen Code:

   self.width(data.width);

   Verwenden Sie stattdessen diesen Code:

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

3. Speichern Sie Änderungen an dieser neuen Eigenschaft. Ändern Sie diesen Code:

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

   Verwenden Sie stattdessen diesen Code:

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

4. Fügen Sie eine Benutzeroberfläche hinzu, um das neue Feld anzuzeigen. Ändern Sie diesen 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">

   Verwenden Sie stattdessen diesen 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. Synchronisieren Sie die Datei settings.html, oder laden Sie sie hoch.

Bei einer Ausführung zu diesem Zeitpunkt würde das Feld angezeigt werden. Die Größe des Einstellungsbereichs wird allerdings nicht automatisch geändert. Da Sie den Bereich vergrößert haben, müssen Sie auch für den Registrierungseintrag components.json die neue Größe angeben.

1. Laden Sie die Datei appinfo.json herunter. Diese befindet sich auf derselben Ebene wie das Verzeichnis assets/ der Komponente. Aktualisieren Sie dann die Größe des Einstellungsbereichs. Ändern Sie diesen Code:

   "settingsHeight": 90,

   Verwenden Sie stattdessen diesen Code:

   "settingsHeight": 160,

2. Synchronisieren Sie die Datei appinfo.json, oder laden Sie sie hoch.