Schritt 2: Renderingstruktur der lokalen Komponente prüfen

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

Bei einem einfachen Hello World-Beispiel können vier JavaScript-Objekte und die Anzahl an Codezeilen übermäßig erscheinen. Dieses Beispiel soll Ihnen aber als Grundlage für die Erstellung komplexerer Komponenten und für die Interaktion mit dem Oracle Cloud Sites Service-Seitenlebenszyklus dienen.

So prüfen Sie die Struktur einer lokalen Komponente:

1. Klicken Sie auf der Oracle Content Management-Homepage auf Entwickler.

   Die Seite Entwickler wird angezeigt.

2. Klicken Sie auf Alle Komponenten anzeigen.

3. Wählen Sie im Menü die Option Lokale Komponente erstellen aus.

4. Geben Sie einen Namen für die Komponente ein. Beispiel: A_Local_Component.

5. Geben Sie eine Beschreibung ein (optional).

6. Klicken Sie auf Erstellen.

   Anschließend wird die Komponente A_Local_Component in der Komponentenliste angezeigt.

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 Desktopclient verfügen, können Sie auf der Seite "Komponenten" der Oracle Content Management-Oberfläche alle Komponenten anzeigen, die Komponente 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

3. Öffnen Sie im Verzeichnis /assets die Datei render.js.

   Hauptpunkte der Datei render.js:

   • Sie ist als JavaScript-AMD-Modul strukturiert, damit sie als erforderliches Element in die Seite eingefügt werden kann.

   • Sie enthält auch Referenzen zu KnockoutJS und JQuery, die bereits als Teil der Oracle Content Management-Seite geladen werden.

Betrachten Sie die Struktur der Datei render.js.

Die Datei render.js enthält zwei JavaScript-Objekte, die die erforderlichen Oracle Content Management-Komponenten-APIs implementieren: sampleComponentFactory und SampleComponentImpl. Diese Objekte stellen Beispiele für eine Implementierung zur Erstellung von KnockoutJS-basierten Komponenten dar. Die Implementierung dieser Objekte variiert je nach der verwendeten Technologie.

• sampleComponentFactory

  • Dieses Objekt wird vom render.js-AMD-Modul zurückgegeben.

  • Dabei handelt es sich um ein ganz einfaches Factory-Objekt, das die einzelne createComponent()-Schnittstelle implementiert.

  • Komplexere Implementierungen können den args-Wert übergeben, um unterschiedliche Implementierungen der Komponente basierend auf dem Parameter viewMode zurückzugeben. So erreichen Sie eine wesentlich weniger rechenintensive Implementierung der Komponente zur Laufzeit gegenüber dem Sitebuilder.

• SampleComponentImpl

  • Die Hauptfunktion in diesem Objekt ist die render-Funktion. Damit wird die Komponente auf der Seite gerendert.

    Um die Knockout-Komponente auf der Seite zu rendern, fügt die render-Funktion die Vorlage dynamisch zur Seite hinzu. Anschließend werden die viewModel-Bindings auf die Vorlage angewendet.

  • Der Rest der Implementierung betrifft die Initialisierung des viewModel-Parameters und der Vorlage sowie das Handling des Messagings zwischen Seite und Komponente.

Die letzten beiden Objekte in der Datei render.js (sampleComponentTemplate und SampleComponentViewModel) stellen eine benutzerdefinierte Implementierung für die Komponente bereit. Die Implementierung dieser Objekte variiert je nach Ihren Anforderungen.

• sampleComponentTemplate

  • Dieses Objekt stellt die Erstellung einer KnockoutJS-Vorlage bereit. Erst wenn alle Daten von der Komponente initialisiert wurden, versucht das Objekt, die Daten anzuzeigen.

• SampleComponentViewModel

  • Das viewModel ruft die von Oracle Content Management gespeicherten Informationen für die Komponente ab und legt dann das geeignete Layout für die Komponente basierend auf diesen Daten fest.

  • Allgemeine Knockout-Observables, die von der Vorlage verwendet werden, um den Zugriff auf die für die Komponente gespeicherten Metadaten zu verarbeiten:

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

  • Integration von Triggern und Aktionen:

    Trigger: Eine Funktion zum Auslösen eines Oracle Content Management-Triggers von der Komponente, der an Aktionen anderer Komponenten auf der Seite gebunden sein kann.

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

    Aktion: Eine Funktion zum Handling des Callbacks, wenn die Komponente die Anweisung erhält, eine Aktion mit einer bestimmten Payload auszuführen.

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

    Callback zum Ausführen registrierter Aktionen nach Bedarf.

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

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

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

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

    • Metadatenaktualisierungen: Callback, wenn für die Komponente gespeicherte Komponentenmetadaten geändert werden (z.B. wenn der Benutzer den Einstellungsbereich aufruft und die Daten aktualisiert).

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