Dette trinnet beskriver og forklarer hvordan du administrerer aktivaene som brukes av en komponent.
Aktiva omfatter komponenter og egendefinerte komponenter som Oracle Content Management må vite om for å kunne administrere livssyklusen til aktivaene.
Innholdsmappe i Oracle Content Management
Hvert enkelt område du oppretter i Oracle Content Management, har en egen Innhold-mappe. Dette er en skjult mappe som du vanligvis ikke ser. Når området er publisert, blir alle filene i Innhold-mappen også publisert til filsystemet.
Når du for eksempel velger et bilde ved hjelp av bildekomponenten, oppretter Oracle Content Management en kopi av bildet du valgte, og plasserer det i innholdsmappen. URL-adressen peker alltid til denne kopierte versjonen av bildet, slik at hvis du sletter det opprinnelige bildet, blir det ikke brudd på området. Dette gjelder også andre komponenter som kommer fra Oracle Content Management: Galleri, Gallerirutenett, Dokument, Sosialt-felt og Filnedlasting samt bakgrunnsbilder for spor og komponentgrupper.
Hvis en egendefinert komponent skal kunne delta i livssyklusen til aktivaet, må den egendefinerte komponenten fortelle Oracle Content Management om alle aktiva den ønsker å administrere på vegne av den. Ettersom dette omfatter å opprette en kopi av aktivaet, må den egendefinerte komponenten også bruke API-ene for Oracle Content Management til å velge aktivaet, slik at vi vet hvordan det skal administreres.
Administrere URL-adresser
URL-adressen til et aktiva endres basert på flere kriterier.
Kjøretids-URL-adressen til en komponent er forskjellig fra URL-adressen for områdebyggeren til komponenten
Hvis du kopierer en side, oppretter Oracle Content Management også en kopi av alle refererte aktiva i innholdsmappen slik at du aldri har to komponenter som peker på samme aktiva i innholdsmappen
Hvis du slipper en komponentgruppe på siden, blir det tatt nye kopier for alle aktiva som det refereres til av en komponent i komponentgruppen
Selv om en relativ URL-adresse kan være tilstrekkelig for en lokal komponent, må eksterne komponenter også ha den fullstendige URL-adressen til alle aktiva du vil at Oracle Content Management skal administrere på dine vegne, slik at de kan gjengi innholdet i den linjebundne rammen med den fullstendige URL-adressen.
Siden du ikke kan stole på at URL-adressen forblir statisk, må du bare ha referanser til ID-en til aktivaene i koden og hente URL-adressen til aktivaet når du vil gjengi aktivaet.
Administrere aktiva
Disse SDK-API-ene for områder er tilgjengelige for administrasjon av aktiva.
SitesSDK.getProperty('componentAssets', callback);
Dette henter matrisen for gjeldende aktiva
Hver aktivaoppføring består av:
id: Unik ID for aktivaet.
title: Metadata for tittel i Oracle Content Management.
description: Metadata for beskrivelse i Oracle Content Management.
fileName: Opprinnelig navn på den valgte filen. Nyttig for visning i ruten Innstillinger for den egendefinerte komponenten slik at brukerne vet hvilken fil de har valgt. Dette er ikke navnet på filen som er kopiert til innholdsmappen.
source: Den makroaktiverte URL-adressen til aktivaet. Denne verdien blir endret over tid og bør ikke refereres til den av komponenten, men må lagres som en del av aktivaet.
url: Fullstendig URL-adresse til aktivaet basert på konteksten der getPropert() ble kalt.
SitesSDK.setProperty('componentAssets', [assets]);
Når du kaller denne, lagres alle aktivaene du vil at Oracle Content Management skal administrere på dine vegne.
Hvis du ikke kaller denne, blir ingen aktiva lagret.
Alle aktiva som ikke finnes i denne matrisen, blir slettet når området publiseres.
Parameteren assets finnes i en aktivamatrise i samme format som du fikk returnert av getProperty, og den blir også returnert av filePicker.
Merknad:
Det lagres ingen verdi forurl. Denne verdien blir opprettet dynamisk når du ber om aktivaene.SitesSDK.filePicker(options, callback);
Et API som åpner filvelgeren, slik at listen over aktiva kan velges.
Det kaller tilbakekallingen ved vellykket valg av aktiva som sendes i matrisen over valgte aktiva.
Ingenting er lagret på dette tidspunktet, og det er opp til komponenten å kalle setProperty('componentAssets', [assets]); slik at elementer fra dette utvalget kan lagres kombinert med hvilke som helst andre aktiva som skal lagres.
Eksempel på valg av aktiva
Denne delen viser hvordan du velger et aktiva, lagrer ID-en til det og henter de faktiske verdiene på nytt fra de lagrede aktivaene.
Rediger filen settings.html.
Endre malobjektet slik at 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>Endre viewModel slik at du legger til et observerbart objekt som lagrer ID-en til det valgte aktivaet.
self.imageID = ko.observable();
Endre viewModel slik at det blir mulig å administrere valget av aktivaet ved å åpne filvelgeren og vise navnet på det valgte aktivaet.
//
// 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); Oppdater viewModel slik at det først henter aktivaene og deretter henter customSettingsData. Denne koden fører også til at self.imageName blir startet når det observerbare objektet self.ImageID() blir endret.
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;
});
});Til slutt må du oppdatere funksjonen save slik at imageID lagres, og passe på å oppdatere componentAssets med listen over refererte aktiva.
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);Kontrollere resultatene for valg av aktiva
Oppfrisk siden på området ditt slik at områdebyggeren kan plukke opp endringer av komponenten.
Sett siden i redigeringsmodus.
Dra og slipp komponenten på siden.
Åpne ruten Innstillinger.
Klikk på knappen Velg bilde.
Bla (eller last opp) og velg et bilde.
Vær oppmerksom på at navnet på bildet lagres, og at det valgte bildet vises.
Lukk ruten Innstillinger.
Åpne ruten Innstillinger på nytt.
Vær oppmerksom på at navnet på bildet blir gjengitt på nytt.
Eksempel på gjengivelse av aktiva
Denne delen viser hvordan du henter aktivaene og gjengir dem i komponenten, og hvordan du får komponenten til å bli oppdatert dynamisk hver gang verdier blir endret i ruten Innstillinger.
Merknad:
Selv om dette viser et eksempel på en lokal komponent som finnes i en linjebundet ramme på siden, kommer lignede kode til å fungere for komponenter som blir gjengitt linjebundet på siden.Rediger filen render.html.
Oppdater malen slik at den inkluderer aktivaet:
<!-- ko if: imageURL -->
<div style="flex-shrink:0;">
<img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->I viewModel oppretter du to observerbare objekter slik at du kan hente imageID fra customSetttingsData og lagre imageURL som er hentet fra den lagrede listen over aktiva.
self.imageID = ko.observable(); self.imageURL = ko.observable();
Oppdater viewModel slik at når imageID blir endret, henter det URL-adressen til det tilsvarende bildeaktivaet.
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;
}
}
});
});Oppdater viewModel slik at det henter ID-en fra customSettingsData.
Kontrollere resultatene for gjengivelse av aktiva
Oppfrisk siden på området ditt slik at områdebyggeren kan plukke opp endringer av komponenten.
Sett siden i redigeringsmodus.
Dra og slipp komponenten på siden.
Åpne ruten Innstillinger.
Klikk på knappen Velg bilde.
Bla (eller last opp) og velg et bilde.
Vær oppmerksom på at navnet på bildet lagres, og at det valgte bildet vises.
Lukk ruten Innstillinger.
På dette tidspunktet skal du se at det valgte bildet ditt blitt gjengitt i komponenten.
Gå videre til Gjennomgang av opplæring.