I det här steget beskrivs och förklaras hur du hanterar de tillgångar som används av en komponent.
Tillgångar inkluderar komponenter och anpassade komponenter som Oracle Content Management måste känna till för att kunna hantera tillgångarnas livscykel.
Oracle Content Management-innehållsmapp
Varje webbplats som du skapar i Oracle Content Management åtföljs av en egen innehållsmapp. Det här är en dold mapp som du normalt inte ser. Vid publicering av webbplatsen publiceras även alla filer i content-mappen till filsystemet.
Om du till exempel väljer en bild med hjälp av bildkomponenten så gör Oracle Content Management en kopia av bilden du valt och placerar den i innehållsmappen. URL:en pekar alltid på den här kopierade versionen av bilden, så webbplatsen skadas inte om du tar bort den ursprungliga bilden. Det här gäller även för övriga komponenter som tillhandahålls av Oracle Content Management: galleri, gallerirutnät, dokument, socialfält, filnedladdning samt bakgrundsbilder för rutor och componentGroups.
För att en anpassad komponent ska delta i den här tillgångslivscykeln måste den anpassade komponenten berätta för Oracle Content Management om alla eventuella tillgångar som den vill att tjänsten ska hantera för dess räkning. Eftersom detta involverar skapande av en kopia av tillgången måste den anpassade komponenten även använda API-gränssnitt för Oracle Content Management för att välja tillgången, så att vi vet hur den ska hanteras.
Hantera URL:er
URL:en till en tillgång ändras baserat på ett antal kriterier.
Exekverings-URL:en till en komponent skiljer sig från webbplatsverktygs-URL:en till komponenten
Om du kopierar en sida gör Oracle Content Management även en kopia av alla de tillgångar som det refereras till i innehållsmappen, så att du aldrig får två komponenter som pekar på samma tillgång i innehållsmappen
Om du släpper en componentGroup på sidan skapas nya kopior för alla tillgångar som refereras till av en komponent i componentGroup
Dessutom gäller att även om en relativ URL kan fungera bra för en lokal komponent, så kräver fjärrkomponenter den fullt kvalificerade URL:en till alla tillgångar som du vill att Oracle Content Management ska hantera för din räkning, så att de kan återge sitt iframeinnehåll med den fullständiga URL:en.
Eftersom du inte kan förlita dig på att URL:en förblir statisk måste du se till att endast referenserna till id:t för tillgången ryms i koden och hämta tillgångens URL när du vill återge tillgången.
Hantera tillgångar
Dessa API-gränssnitt för SDK för webbplatser finns tillgängliga för hantering av tillgångar.
SitesSDK.getProperty('componentAssets', callback);
Det här hämtar uppställningen av aktuella tillgångar
Varje tillgångspost består av följande:
id: Unikt id för tillgången.
title: Titelmetadata för Oracle Content Management.
description: Beskrivningsmetadata för Oracle Content Management.
fileName: Det ursprungliga namnet på den valda filen. Användbart för visning i panelen Inställningar för den anpassade komponenten, så att användare vet vilken fil de har valt. Det här är inte namnet på filen som kopierats till innehållsmappen.
source: Makroaktiverad URL till tillgången. Det här värdet förändras med tiden och bör inte refereras till av komponenten, utan måste sparas som en del av tillgången.
url: Fullt kvalificerad URL till tillgången, baserat på den kontext där getPropert() anropades.
SitesSDK.setProperty('componentAssets', [assets]);
Anropa detta för att spara alla de tillgångar som du vill att Oracle Content Management ska hantera för din räkning.
Om du inte anropar detta så sparas inga tillgångar.
Alla tillgångar som inte finns i den här uppställningen tas bort när webbplatsen publiceras.
Parametern assets är en uppställning tillgångar i samma format som du får returnerade av getProperty och returneras även av filePicker.
Obs!:
Ingeturl-värde lagras. Det värdet skapas dynamiskt när du frågar efter tillgångarna.SitesSDK.filePicker(options, callback);
Ett API-gränssnitt för att öppna filväljaren där du kan välja listan över tillgångar.
Det anropar återanropet vid utfört urval av tillgångar som överför uppställningen av valda tillgångar.
Ingenting sparas i det här skedet och det är upp till komponenten att anropa setProperty('componentAssets', [assets]); för att spara objekt från det här urvalet i kombination med alla övriga tillgångar som ska sparas.
Exempel på Välj tillgång
I det här avsnittet beskrivs hur du väljer en tillgång, lagrar dess id och hämtar de faktiska värdena från de lagrade tillgångarna igen.
Redigera filen settings.html.
Ändra mallobjektet för att inkludera 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>Ändra viewModel för att lägga till ett observerbart element som lagrar den valda tillgångens id.
self.imageID = ko.observable();
Ändra viewModel för att hantera valet av tillgången genom att öppna filväljaren och visa namnet på den valda tillgången.
//
// 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); Uppdatera viewModel så att tillgångarna hämtas först, innan customSettingsData hämtas. Den här koden gör även att self.imageName anropas när det observerbara elementet self.ImageID() ändras.
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;
});
});Slutligen ska du uppdatera funktionen save för att spara imageID och kontrollera att componentAssets uppdateras med listan över tillgångar som det refereras till.
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);Kontrollera resultaten för Välj tillgång
Förnya sidan på webbplatsen så att webbplatsverktyget kan hämta ändringar av komponenten.
Ta sidan till redigeringsläge.
Dra och släpp komponenten på sidan.
Öppna panelen Inställningar.
Klicka på knappen Välj bild.
Bläddra efter (eller ladda upp) och välj en bild.
Notera att bildens namn lagras och visar den valda bilden.
Stäng panelen Inställningar.
Öppna panelen Inställningar igen.
Notera att bildens namn återigen avspeglas.
Exempel på Återge tillgång
I det här avsnittet beskrivs hur du hämtar tillgångarna och återger dem i komponenten, och även låter komponenten dynamiskt uppdateras närhelst värden ändras i inställningspanelen.
Obs!:
Här visas ett exempel för en lokal komponent som är i en iframe på sidan, men liknande kod fungerar för komponenter som återges infogade på sidan.Redigera filen render.html.
Uppdatera mallen för att inkludera tillgången.
<!-- ko if: imageURL -->
<div style="flex-shrink:0;">
<img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->Skapa två observerbara element i viewModel för att hämta imageID från customSetttingsData och lagra den imageURL som hämtats från den lagrade listan över tillgångar.
self.imageID = ko.observable(); self.imageURL = ko.observable();
Uppdatera viewModel så att den hämtar motsvarande bildtillgångs URL närhelst imageID ändras.
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;
}
}
});
});Uppdatera viewModel för att hämta id:t från customSettingsData.
Kontrollera resultaten för Återge tillgång
Förnya sidan på webbplatsen så att webbplatsverktyget kan hämta ändringar av komponenten.
Ta sidan till redigeringsläge.
Dra och släpp komponenten på sidan.
Öppna panelen Inställningar.
Klicka på knappen Välj bild.
Bläddra efter (eller ladda upp) och välj en bild.
Notera att bildens namn lagras och visar den valda bilden.
Stäng panelen Inställningar.
Nu bör du se den valda bilden återges i komponenten.
Fortsätt till Handledningsöversikt.