Trin 16: Aktivstyring

Dette trin beskriver og forklarer, hvor du håndterer de aktiver, der bruges af en komponent.

Aktiver omfatter komponenter og tilpassede komponenter, som Oracle Content Management skal kende for at håndtere aktivernes livscyklus.

Oracle Content Management-indholdsmappe

Alle sites, som du opretter i Oracle Content Management, har deres egen content-mappe. Dette er en skjult mappe, som du normalt ikke ser. Når sitet publiceres, publiceres alle filerne i mappen content også til filsystemet.

Når du for eksempel vælger et billede ved hjælp af komponenten Billede, opretter Oracle Content Management en kopi af det billede, som du valgte, og placerer det i indholdsmappen. URL'en peger altid på den kopierede version af billedet, så sitet ikke beskadiges, hvis du sletter originalbilledet. Dette gælder også de andre komponenter fra Oracle Content Management: Galleri, Gallerigitter, Dokument, Social værktøjslinje, Fildownload samt baggrundsbilleder til pladser og componentGroups.

For at en tilpasset komponent skal kunne deltage i denne aktivlivscyklus, skal den tilpassede komponent fortælle Oracle Content Management om de aktiver, tjenesten skal håndtere på vegne af komponenten. Da dette involverer oprettelse af en kopi af aktivet, skal den tilpassede komponent også bruge Oracle Content Management-API'er til at vælge aktivet, så vi ved, hvordan det skal håndteres.

Håndtere URL'er

URL'en for et aktiv ændres, afhængigt af forskellige kriterier.

  • Runtime-URL'en for en komponent er en anden end Site Builder-URL'en for komponenten

  • Hvis du kopierer en side, opretter Oracle Content Management også en kopi af alle de aktiver, der refereres til, i indholdsmappen, så du aldrig har to komponenter, der peger på det samme aktiv i indholdsmappen

  • Hvis du slipper en componentGroup på siden, oprettes der nye kopier for de aktiver, som en komponent i componentGroup refererer til

Selvom der kan være defineret en relativ URL for en lokal komponent, kræver fjernkomponenter derudover den fuldt kvalificerede URL for ethvert aktiv, som Oracle Content Management skal håndtere på dine vegne, så de kan gengive indholdet af deres inline-ramme med den komplette URL.

Da du ikke kan regne med, at URL'en forbliver statisk, skal du kun opbevare referencer til ID'et for aktivet i din kode og hente aktivets URL, når du vil gengive aktivet.

Håndtere aktiver

Disse site-SDK-API'er er tilgængelige til styring af aktiver.

SitesSDK.getProperty('componentAssets', callback);

  • Dette henter arrayet for aktuelle aktiver

  • Hver aktivpost består af:

    • id: Entydigt ID for aktivet.

    • title: Metadata til Oracle Content Management-titel.

    • description: Metadata til Oracle Content Management-beskrivelse.

    • fileName: Oprindeligt navn på den valgte fil. Kan vises i panelet Indstillinger for den tilpassede komponent, så brugerne ved, hvilken fil de har valgt. Dette er ikke navnet på den fil, der kopieres til indholdsmappen.

    • source: Makroaktiveret URL for aktivet. Denne værdi ændres over tid, og komponenten bør ikke referere til den, men den skal gemmes som en del af aktivet.

    • url: Fuldt kvalificeret URL til aktivet på basis af den kontekst, hvor getProperty() blev kaldt.

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

  • Kald denne for at gemme alle de aktiver, som Oracle Content Management skal håndtere på dine vegne.

  • Hvis du ikke kalder denne, gemmes der ingen aktiver.

  • Aktiver, der ikke findes i dette array, slettes, når sitet publiceres.

  • Parameteren assets er et array med aktiver i det samme format, som getProperty returnerer, og returneres også af filePicker.

    Bemærk:

    Der lagres ingen url-værdi. Den pågældende værdi oprettes dynamisk, når du anmoder om aktiverne.

SitesSDK.filePicker(options, callback);

  • En API til visning af filvælgeren til valg af listen over aktiver.

  • Den kalder callback'et, når aktiver, der videregiver arrayet over valgte aktiver, er valgt.

  • Intet gemmes på nuværende tidspunkt, og det er op til komponenten at kalde setProperty('componentAssets', [assets]); for at gemme elementer fra dette valg kombineret med eventuelle andre aktiver, der skal gemmes.

Eksempel på valg af et aktiv

Dette afsnit viser, hvordan du vælger et aktiv, lagrer dets ID og henter de faktiske værdier fra de lagrede aktiver igen.

  1. Rediger filen settings.html.

  2. Ændr skabelonobjektet, så det inkluderer et Image selection.

    <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. Ændr viewModel, så der tilføjes et observerbart objekt til lagring af ID'et for det valgte aktiv.

    self.imageID = ko.observable();

  4. Ændr viewModel for at håndtere valg af aktivet ved at vise filvælgeren og navnet på det valgte aktiv.

    //
// 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. Opdater viewModel, så aktiverne hentes før hentning af customSettingsData. Denne kode bevirker også, at self.imageName kaldes, når det observerbare objekt self.ImageID() ændres.

    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. Opdater til sidst funktionen save for at lagre imageID, og sørg for at opdatere componentAssets sammen med listen over aktiver, der refereres til.

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

Kontroller resultaterne for valg af et aktiv

  1. Opfrisk din side på sitet, så Site Builder kan hente ændringer af komponenten.

  2. Skift til redigeringstilstand for siden.

  3. Træk komponenten til siden, og slip den.

  4. Vis panelet Indstillinger.

  5. Klik på knappen Vælg billede.

  6. Søg efter (eller upload) og vælg et billede.

    Bemærk, at navnet på billedet lagres, mens det valgte billede vises.

  7. Luk panelet Indstillinger.

  8. Vis panelet Indstillinger igen.

    Bemærk, at navnet på billedet vises igen.

Eksempel på gengivelse af et aktiv

Dette afsnit viser dig, hvordan du henter aktiverne og gengiver dem i komponenten og derudover sikrer, at komponenterne opdateres dynamisk, hver gang værdier ændres i panelet Indstillinger.

Bemærk:

Selvom dette viser et eksempel for en lokal komponent, der er i en inline-ramme på siden, kan lignende kode bruges til komponenter, der gengives inline på siden.

  1. Rediger filen render.html.

  2. Opdater skabelonen, så den inkluderer aktivet:

    <!-- 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. Opret to observerbare objekter i viewModel for at hente imageID fra customSetttingsData, og gem imageURL, der hentes fra den gemte liste over aktiver.

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

  4. Opdater viewModel, så den henter den tilsvarende billedaktiv-URL, hver gang imageID ændres.

    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. Opdater viewModel, så ID'et hentes fra customSettingsData.

Kontroller resultaterne for gengivelse af et aktiv

  1. Opfrisk din side på sitet, så Site Builder kan hente ændringer af komponenten.

  2. Skift til redigeringstilstand for siden.

  3. Træk komponenten til siden, og slip den.

  4. Vis panelet Indstillinger.

  5. Klik på knappen Vælg billede.

  6. Søg efter (eller upload) og vælg et billede.

    Bemærk, at navnet på billedet lagres, mens det valgte billede vises.

  7. Luk panelet Indstillinger.

    Nu kan du se det valgte billede gengivet i komponenten.

Fortsæt til Oversigt over selvstudium.