Schritt 16: Assetverwaltung

In diesem Schritt wird beschrieben und erläutert, wie Sie die von einer Komponente verwendeten Assets verwalten.

Assets umfassen Komponenten und benutzerdefinierte Komponenten, die Oracle Content Management kennen muss, um den Lebenszyklus der Assets zu verwalten.

Oracle Content Management-Inhaltsordner

Jede in Oracle Content Management erstellte Site weist einen eigenen content-Ordner auf. Dieser ausgeblendete Ordner ist normalerweise nicht sichtbar. Beim Veröffentlichen der Site werden alle Dateien im content-Ordner ebenfalls im Dateisystem veröffentlicht.

Beispiel: Wenn Sie ein Bild mit der Bildkomponente auswählen, erstellt Oracle Content Management eine Kopie des ausgewählten Bildes und legt diese im content-Ordner ab. Die URL verweist immer auf diese kopierte Version des Bildes, damit die Site weiterhin funktioniert, wenn Sie das ursprüngliche Bild löschen. Dies gilt auch für die anderen von Oracle Content Management bereitgestellten Komponenten: Galerie, Galerieraster, Dokument, Social-Leiste, Dateidownload sowie die Hintergrundbilder für "slots" und "componentGroups".

Um in diesen Assetlebenszyklus aufgenommen zu werden, muss eine benutzerdefinierte Komponente Oracle Content Management über alle Assets informieren, die der Service für sie verwalten soll. Dazu muss eine Kopie des Assets erstellt werden. Daher muss die benutzerdefinierte Komponente das Asset auch über Oracle Content Management-APIs auswählen, um die Verwaltung zu ermöglichen.

URLs verwalten

Die URL zu einem Asset variiert aufgrund mehrerer Kriterien.

  • Die Laufzeit-URL zu einer Komponente unterscheidet sich von der Sitebuilder-URL zur Komponente.

  • Wenn Sie eine Seite kopieren, erstellt Oracle Content Management auch eine Kopie aller referenzierten Assets im content-Ordner. So wird verhindert, dass zwei Komponenten auf dasselbe Asset im content-Ordner verweisen.

  • Wenn Sie eine componentGroup auf der Seite ablegen, werden neue Kopien für alle von einer Komponente in der componentGroup referenzierten Assets erstellt.

Auch wenn eine relative URL für eine lokale Komponente ausreicht, erfordern Remotekomponenten zudem die vollqualifizierte URL zu jedem Asset, das Oracle Content Management für Sie verwalten soll, damit der Inlineframe-Inhalt mit der vollständigen URL gerendert werden kann.

Da Sie sich nicht darauf verlassen können, dass die URL statisch bleibt, dürfen Sie nur Referenzen zur ID für das Asset in den Code aufnehmen und müssen die URL des Assets abrufen, wenn Sie das Asset rendern möchten.

Assets verwalten

Die folgenden Sites-SDK-APIs sind für die Assetverwaltung verfügbar.

SitesSDK.getProperty('componentAssets', callback);

  • Damit wird das Array der aktuellen Assets abgerufen.

  • Jeder Asseteintrag besteht aus:

    • id: Eindeutige ID für das Asset.

    • title: Metadaten des Oracle Content Management-Titels.

    • description: Metadaten der Oracle Content Management-Beschreibung.

    • fileName: Ursprünglicher Name der ausgewählten Datei. Nützlich für die Anzeige im Einstellungsbereich für die benutzerdefinierte Komponente, damit Benutzer wissen, welche Datei sie ausgewählt haben. Dies ist nicht der Name der in den content-Ordner kopierten Datei.

    • source: Makrofähige URL zum Asset. Dieser Wert ändert sich mit der Zeit und darf nicht von der Komponente referenziert werden, sondern muss als Teil des Assets gespeichert werden.

    • url: Vollqualifizierte URL zum Asset basierend auf dem Kontext, in dem getPropert() aufgerufen wurde.

SitesSDK.setProperty('componentAssets', [assets]);

  • Rufen Sie diese API auf, um alle Assets zu speichern, die Oracle Content Management für Sie verwalten soll.

  • Wenn Sie diese API nicht aufrufen, wird kein Asset gespeichert.

  • Alle Assets, die nicht in diesem Array enthalten sind, werden beim Veröffentlichen der Site gelöscht.

  • Der assets-Parameter ist ein Assetarray in demselben Format, das auch von getProperty und filePicker zurückgegeben wird.

    Hinweis:

    Es wird kein url-Wert gespeichert. Dieser Wert wird beim Abfragen der Assets dynamisch erstellt.

SitesSDK.filePicker(options, callback);

  • Eine API zum Öffnen der Dateiauswahl, mit der Sie die Liste der Assets auswählen.

  • Sie ruft bei erfolgreicher Assetauswahl den Callback auf und übergibt das Array der ausgewählten Assets.

  • Zu diesem Zeitpunkt wird nichts gespeichert. Die Komponente muss setProperty('componentAssets', [assets]); aufrufen, um Elemente aus dieser Auswahl zusammen mit anderen erforderlichen Assets zu speichern.

Beispiel für Assetauswahl

In diesem Abschnitt wird gezeigt, wie Sie ein Asset auswählen, seine ID speichern und die tatsächlichen Werte erneut von den gespeicherten Assets abrufen.

  1. Bearbeiten Sie die Datei settings.html.

  2. Nehmen Sie eine Image selection in das Vorlagenobjekt auf.

    <div>
    <!-- Image selection -->
    <label id="imageLabel" for="imageAsset" class="settings-heading" data-bind="text: 'Image'"></label>
    <input id="imageAsset" data-bind="value: imageName" readonly class="settings-text-box">
    <button id="imageSelect" type="button" class="selectbutton" data-bind="click: showFilePicker">Select Image</button>
</div>

  3. Ändern Sie das viewModel, um ein Observable zum Speichern der ID des ausgewählten Assets hinzuzufügen.

    self.imageID = ko.observable();

  4. Ändern Sie das viewModel, um die Auswahl des Assets zu verwalten, indem Sie die Dateiauswahl öffnen und den Namen des ausgewählten Assets anzeigen.

    //
// handle component assets
//
self.assets = []
 
// bring up a file picker to select the assets
self.showFilePicker = function () {
    // select an image
    SitesSDK.filePicker({
        'multiSelect': false,
        'supportedFileExtensions': ['jpg', 'png']
    }, function (result) {
        if (result.length === 1) {
            // update the array of assets
            self.assets = result;
 
            // update the image in customSettingsData
            self.imageID(result[0].id);
        }
    });
};
 
// update the display name based on the assets
self.imageName = ko.computed(function () {
    var imageName = '',
        imageID = self.imageID();
    for (var i = 0; i < self.assets.length; i++) {
        if (self.assets[i].id === imageID) {
            imageName = self.assets[i].fileName;
            break;
        }
    }
 
    return imageName
}, self);

  5. Aktualisieren Sie das viewModel, um die Assets abzurufen, bevor Sie die customSettingsData abrufen. Durch diesen Code wird außerdem self.imageName aufgerufen, wenn das Observable self.ImageID() sich ändert.

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

  6. Aktualisieren Sie schließlich die save-Funktion, um die imageID zu speichern, und aktualisieren Sie die componentAssets mit Ihrer Liste referenzierter Assets.

    self.save = ko.computed(function () {
    var saveconfig = {
        'imageWidth': isNaN(self.imageWidth()) ? self.imageWidth() : self.imageWidth() + 'px',
        'imageID': self.imageID(),
        'titleText': self.titleText(),
        'userText': self.userText()
    };
 
    // store the selected asset and update custom settings
    if (self.saveData) {
        SitesSDK.setProperty('componentAssets', self.assets);
        SitesSDK.setProperty('customSettingsData', saveconfig);
    }
}, self);

Ergebnisse für Assetauswahl prüfen

  1. Aktualisieren Sie die Seite in der Site, damit Sitebuilder Änderungen an der Komponente abrufen kann.

  2. Öffnen Sie die Seite im Bearbeitungsmodus.

  3. Ziehen Sie die Komponente per Drag-and-Drop auf die Seite.

  4. Öffnen Sie den Einstellungsbereich.

  5. Klicken Sie auf die Schaltfläche Bild auswählen.

  6. Suchen und wählen Sie ein Bild, oder laden Sie eines hoch.

    Beachten Sie, dass das Bild mit dem Namen des ausgewählten Bildes gespeichert wird.

  7. Schließen Sie den Einstellungsbereich.

  8. Öffnen Sie den Einstellungsbereich wieder.

    Beachten Sie, dass der Name des Bildes erneut angezeigt wird.

Beispiel für Assetrendering

In diesem Abschnitt wird gezeigt, wie Sie die Assets abrufen und in der Komponente rendern. Außerdem erfahren Sie, wie Sie die Komponente dynamisch aktualisieren, wenn Werte im Einstellungsbereich geändert werden.

Hinweis:

Auch wenn sich die lokale Komponente im vorliegenden Beispiel in einem Inlineframe auf der Seite befindet, funktioniert ähnlicher Code auch für Komponenten, die inline auf der Seite gerendert werden.

  1. Bearbeiten Sie die Datei render.html.

  2. Nehmen Sie das Asset in die Vorlage auf:

    <!-- ko if: imageURL -->
<div style="flex-shrink:0;">
    <img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->

  3. Erstellen Sie im viewModel zwei Observables, um die imageID von den customSetttingsData abzurufen und die von der gespeicherten Assetliste abgerufene imageURL zu speichern.

    self.imageID = ko.observable();
self.imageURL = ko.observable();

  4. Aktualisieren Sie das viewModel so, dass bei jeder Änderung der imageID die entsprechende Bildasset-URL abgerufen wird.

    self.imageID.subscribe(function (imageID) {
    // whenever the image changes get the updated referenced asset
    SitesSDK.getProperty('componentAssets', function (assets) {
        for (var i = 0; i < assets.length; i++) {
            if (assets[i].id === imageID) {
                self.imageURL(assets[i].url);
                break;
            }
        }
    });
});

  5. Aktualisieren Sie das viewModel, um die ID von customSettingsData abzurufen.

Ergebnisse für Assetrendering prüfen

  1. Aktualisieren Sie die Seite in der Site, damit Sitebuilder Änderungen an der Komponente abrufen kann.

  2. Öffnen Sie die Seite im Bearbeitungsmodus.

  3. Ziehen Sie die Komponente per Drag-and-Drop auf die Seite.

  4. Öffnen Sie den Einstellungsbereich.

  5. Klicken Sie auf die Schaltfläche Bild auswählen.

  6. Suchen und wählen Sie ein Bild, oder laden Sie eines hoch.

    Beachten Sie, dass das Bild mit dem Namen des ausgewählten Bildes gespeichert wird.

  7. Schließen Sie den Einstellungsbereich.

    Jetzt sollte das ausgewählte Bild in der Komponente gerendert werden.

Weiter mit Tutorialüberblick.