Stap 16: Activumbeheer

In deze stap wordt beschreven en uitgelegd hoe u de activa beheert die door een component worden gebruikt.

Activa omvatten componenten en aangepaste componenten waarover Oracle Content Management informatie moet hebben ontvangen om de levensduur van de activa te kunnen beheren.

Oracle Content Management inhoudmap

Elke site die u maakt in Oracle Content Management heeft een eigen inhoudmap. Dit is een verborgen map die u normaal gesproken niet ziet. Wanneer de site wordt gepubliceerd, worden alle bestanden in de inhoudmap ook in het bestandssysteem gepubliceerd.

Wanneer u bijvoorbeeld een afbeelding selecteert met behulp van een afbeeldingscomponent, wordt met Oracle Content Management een kopie gemaakt van de afbeelding die u hebt geselecteerd en wordt deze in de inhoudmap geplaatst. Uw URL verwijst altijd naar deze gekopieerde versie van de afbeelding, zodat uw site niet uitvalt als u de originele afbeelding verwijdert. Dit geldt ook voor de andere componenten die door Oracle Content Management worden geleverd (galerie, galerieraster, document, sociale balk, bestandsdownload) en voor achtergrondafbeeldingen voor slots en componentGroups.

Een aangepaste component kan pas aan deze activumlevensduur deelnemen als Oracle Content Management informatie heeft ontvangen over eventuele activa die de service voor de aangepaste component moet beheren. Omdat hiervoor een kopie van het activum moet worden gemaakt, moeten door de aangepaste component ook Oracle Content Management API's worden gebruikt om het activum te selecteren, zodat we weten hoe we het moeten beheren.

URL's beheren

De URL van een activum verandert op basis van enkele criteria.

De runtime-URL van een component is anders dan de sitebuilder-URL van de component
Als u een pagina kopieert, maakt Oracle Content Management ook een kopie van alle gekoppelde activa in de inhoudmap, zodat er nooit twee componenten naar hetzelfde activum in de inhoudmap verwijzen.
Als u een componentGroup op de pagina neerzet, worden nieuwe kopieën gemaakt voor activa waarnaar door een component in de componentGroup wordt verwezen.

Hoewel een relatieve URL toereikend kan zijn voor een lokale component, vereisen externe componenten de volledige URL naar een activum dat door Oracle Content Management voor u moet worden beheerd, zodat de inhoud van inline-frames met behulp van de volledige URL kan worden gerenderd.

Doordat u er niet van kunt uitgaan dat de URL statisch blijft, moet u alleen verwijzingen naar de ID van het activum in uw code plaatsen en de URL van het activum ophalen wanneer u het activum wilt weergeven.

Activa beheren

Deze Sites SDK-API's zijn beschikbaar voor het beheren van activa.

SitesSDK.getProperty('componentAssets', callback);

Hiermee wordt de array van vlottende activa opgehaald.
Elke activuminvoer bevat het volgende:
- id: unieke ID voor het activum
- titel: metagegevens voor de titel in Oracle Content Management
- beschrijving: metagegevens van de beschrijving in Oracle Content Management
- fileName: oorspronkelijke naam van het geselecteerde bestand. Als deze in het paneel 'Instellingen' van uw aangepaste component wordt weergegeven, weten gebruikers welk bestand ze hebben geselecteerd. Dit is niet de naam van het bestand dat naar de inhoudmap is gekopieerd.
- bron: URL met macro's geactiveerd voor het activum. Deze waarde zal na verloop van tijd veranderen. Er moet niet door uw component naar de waarde worden verwezen, maar deze moet als onderdeel van het activum worden opgeslagen.
- url: volledige URL naar het activum op basis van de context waarin getPropert() is aangeroepen.

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

Roep dit aan om alle activa op te slaan die Oracle Content Management voor u moet beheren.
Als u dit niet aanroept, worden er geen activa opgeslagen.
Activa die niet in deze array staan, worden verwijderd wanneer de site wordt gepubliceerd.
De parameter Activa is een array van activa met dezelfde indeling als de parameter die wordt geretourneerd door getProperty, en wordt ook geretourneerd door filePicker.

Opmerking:
Er is geen URL-waarde opgeslagen. Die waarde wordt dynamisch gemaakt wanneer u om de activa vraagt.

SitesSDK.filePicker(options, callback);

Een API om de bestandskiezer te openen om de lijst van activa te selecteren
Hiermee wordt de callback aangeroepen wanneer activa zijn geselecteerd die in de array van geselecteerde activa zijn doorgegeven.
Op dit moment wordt niets opgeslagen. De component moet setProperty('componentAssets', [assets]); aanroepen om items uit deze selectie op te slaan in combinatie met andere activa die moeten worden opgeslagen.

Voorbeeld van activum selecteren

In deze sectie ziet u hoe u een activum selecteert, de ID ervan opslaat en de werkelijke waarden van de opgeslagen activa opnieuw ophaalt.

Bewerk het bestand settings.html.

Wijzig het sjabloonobject om een afbeeldingsselectie op te nemen.

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

Wijzig het viewModel om een observable toe te voegen om de ID van het geselecteerde activum op te slaan.
```
self.imageID = ko.observable();
```

Wijzig het viewModel om selectie van het activum te beheren door de bestandskiezer te openen en de naam van het geselecteerde activum weer te geven.

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

Werk het viewModel bij, zodat eerst de activa worden opgehaald voordat de customSettingsData worden opgehaald. Met deze code wordt ook de self.imageName aangeroepen wanneer de observable self.ImageID() wijzigt.

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

Werk tot slot de functie Opslaan bij om de imageID op te slaan en werk de componentAssets bij met uw lijst van gekoppelde activa.

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

Controleer de resultaten voor selectie van het activum.

Vernieuw uw pagina op uw site, zodat wijzigingen in de component kunnen worden opgehaald met de sitebuilder.
Open de pagina in de bewerkmodus.
Sleep uw component naar de pagina.
Open het paneel 'Instellingen'.
Klik op de knop Afbeelding selecteren.
Zoek (of laad) en selecteer een afbeelding.

Wanneer de naam van de afbeelding wordt opgeslagen, wordt de geselecteerde afbeelding weergegeven.
Sluit het paneel 'Instellingen'.
Open het paneel 'Instellingen' opnieuw.

De naam van de afbeelding wordt opnieuw weergegeven.

Voorbeeld van activum weergeven

In deze sectie ziet u hoe u de activa ophaalt en in uw component weergeeft, en hoe de component dynamisch kan worden bijgewerkt wanneer waarden in het paneel 'Instellingen' worden gewijzigd.

Opmerking:

Hoewel dit een voorbeeld is van een lokale component in een inline-frame op de pagina, werkt vergelijkbare code ook voor componenten die inline op de pagina worden gerenderd.

Bewerk het bestand render.html.

Werk de sjabloon bij om uw activum op te nemen.

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

Maak in het viewModel twee observables om de imageID op te halen uit de customSetttingsData en sla de imageURL op die u hebt opgehaald uit de opgeslagen lijst van activa.
```
self.imageID = ko.observable();
self.imageURL = ko.observable();
```

Werk het viewModel bij, zodat de URL van de overeenkomende afbeelding wordt opgehaald wanneer de imageID wijzigt.

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

Werk het viewModel bij om de ID op te halen uit de customSettingsData.

Controleer de resultaten voor weergave van het activum.

Vernieuw uw pagina op uw site, zodat wijzigingen in de component kunnen worden opgehaald met de sitebuilder.
Open de pagina in de bewerkmodus.
Sleep uw component naar de pagina.
Open het paneel 'Instellingen'.
Klik op de knop Afbeelding selecteren.
Zoek (of laad) en selecteer een afbeelding.

Wanneer de naam van de afbeelding wordt opgeslagen, wordt de geselecteerde afbeelding weergegeven.
Sluit het paneel 'Instellingen'.

Nu wordt de geselecteerde afbeelding in de component weergegeven.

Doorgaan naar Nabespreking van zelfstudie.