Tento krok popisuje a vysvetľuje, ako spravovať položky, ktoré používa komponent.
Položky zahŕňajú komponenty a vlastné komponenty, o ktorých musí vedieť služba Oracle Content Management, aby mohla spravovať životný cyklus položiek.
Obsahový priečinok služby Oracle Content Management
Každá lokalita, ktorú vytvoríte v službe Oracle Content Management, prichádza s vlastným obsahovým priečinkom content
. Je to skrytý priečinok, ktorý bežne nevidíte. Keď sa lokalita publikuje, publikujú sa aj všetky súbory v priečinku content
do systému súborov.
Ak vyberiete napríklad obrázok pomocou komponentu Obrázok, služba Oracle Content Management vytvorí kópiu vybraného obrázka a umiestni ju do obsahového priečinka. Adresa URL bude vždy odkazovať na túto skopírovanú verziu obrázka, aby v prípade odstránenia pôvodného obrázka nedošlo k poškodeniu lokality. Toto sa vzťahuje aj na ostatné komponenty poskytované službou Oracle Content Management: Galéria, Mriežka galérie, Dokument, Panel sociálnych sietí a Stiahnutie súborov, ako aj na obrázky v pozadí pre sloty a prvky componentGroups.
Aby súčasťou tohto životného cyklu položky mohol byť vlastný komponent, musí službu Oracle Content Management informovať o všetkých položkách, ktoré má služba spravovať. Keďže to zahŕňa aj vytvorenie kópie položky, vlastný komponent musí na výber položky použiť aj rozhrania API služby Oracle Content Management, aby sme vedeli, ako ju spravovať.
Spravovanie adries URL
Adresa URL položky sa mení na základe viacerých kritérií.
Adresa runtime URL pre komponent je iná ako adresa URL komponentu v generátore lokalít.
Ak skopírujete stránku, služba Oracle Content Management vytvorí kópiu všetkých odkazovaných položiek v obsahovom priečinku, takže nikdy nebudete mať dva komponenty, ktoré by odkazovali na tú istú položku v obsahovom priečinku.
Pri presune prvku componentGroup na stránku sa vytvoria nové kópie pre všetky položky odkazované komponentom v prvku componentGroup.
Okrem toho, kým relatívna adresa URL môže pre lokálny komponent stačiť, vzdialené komponenty vyžadujú plne kvalifikovanú adresu URL pre každú položku, ktoré má služba Oracle Content Management spravovať vo vašom mene, aby mohli vykresľovať svoj obsah vloženého rámu s úplnou adresou URL.
Keďže sa nemôžete spoľahnúť, že adresa URL zostane statická, je potrebné držať sa len referencií na ID pre položku vo vašom kóde a vyvolať adresu URL položky, keď chcete položku vykresliť.
Správa položiek
Rozhrania SDK API lokalít sú k dispozícii na spravovanie položiek.
SitesSDK.getProperty('componentAssets', callback);
Toto rozhranie načíta pole aktuálnych položiek
Každý záznam položky obsahuje:
ID: Jednoznačné ID položky.
title: Metadáta názvu služby Oracle Content Management.
description: Metadáta popisu služby Oracle Content Management.
fileName: Pôvodný názov vybraného súboru. Odporúča sa zobraziť ho na paneli Nastavenia pre vlastný komponent, aby používatelia vedeli, aký súbor si vybrali. Nejde o názov súboru, ktorý bol skopírovaný do obsahového priečinka.
zdroj: Adresa URL položky podporujúca makrá. Táto hodnota sa bude v čase meniť a váš komponent by na ňu nemal odkazovať, namiesto toho musí byť uložená ako súčasť položky.
URL: Plne kvalifikovaná adresa URL položky na základe kontextu, v ktorom bola vyvolaná metóda getPropert()
.
SitesSDK.setProperty('componentAssets', [assets]);
Túto metódu vyvolajte, ak chcete uložiť všetky položky, ktoré má služba Oracle Content Management spravovať za vás.
Ak ju nevyvoláte, žiadna položka sa neuloží.
Všetky položky, ktoré sa v tomto poli nenachádzajú, budú pri publikovaní lokality odstránené.
Parameter assets
je v poli položiek v rovnakom formáte, aký vráti funkcia getProperty
a aj funkcia filePicker
.
Poznámka:
Nie je uložená žiadna hodnotaurl
. Uvedená hodnota sa vytvorí dynamicky, keď požiadate o položky.SitesSDK.filePicker(options, callback);
Rozhranie API na zobrazenie nástroja na výber súborov, ktorý vyberie zoznam položiek.
Vyvolá spätné volanie pri úspešnom výbere položiek odovzdaním poľa vybraných položiek.
V tomto momente sa nič neuloží a závisí od komponentu, či vyvolá funkciu setProperty('componentAssets', [assets]);
na uloženie položiek z tohto výberu spolu s inými položkami, ktoré sa majú uložiť.
Príklad výberu položky
V tejto časti sa dozviete, ako vybrať položku, uložiť jej ID a znova vyvolať skutočné hodnoty z uložených položiek.
Upravte súbor settings.html
.
Zmeňte objekt šablóny tak, aby obsahoval funkciu 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>
Zmeňte viewModel tak, že pridáte pozorovaný objekt observable, ktorý bude obsahovať ID vybranej položky.
self.imageID = ko.observable();
Zmeňte viewModel tak, aby bolo možné výber položky ovládať otvorením nástroja na výber súborov a zobrazením názvu vybranej položky.
// // 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);
Aktualizujte viewModel, aby sa položky vyvolali ešte pred načítaním objektu customSettingsData
. Tento kód spôsobí aj vyvolanie objektu self.imageName
, keď sa zmení pozorovaný objekt observable self.ImageID()
.
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; }); });
Nakoniec aktualizujte funkciu save
na uloženie imageID
a nezabudnite aktualizovať aj componentAssets
pomocou zoznamu odkazovaných položiek.
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);
Kontrola výsledkov výberu položky
Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.
Otvorte stránku v režime úprav.
Myšou presuňte komponent na stránku.
Otvorte panel Nastavenia.
Kliknite na tlačidlo Vybrať obrázok.
Vyhľadajte (alebo nahrajte) obrázok a vyberte ho.
Názov obrázka sa uloží a zobrazí vybraný obrázok.
Zatvorte panel Nastavenia.
Znova otvorte panel Nastavenia.
Všimnite si, že názov obrázka sa znova zobrazí.
Príklad vykreslenia položky
V tejto sekcii sa dozviete, ako vyvolať položky a vykresliť ich v komponente, a tiež to, ako dynamicky aktualizovať komponent pri každej zmene hodnôt na paneli nastavení.
Poznámka:
Hoci tento príklad znázorňuje lokálny komponent, ktorý je na stránke vo vloženom ráme, podobný kód bude fungovať aj pre komponenty vykreslené priamo na stránke.Upravte súbor render.html
.
Aktualizujte šablónu tak, aby obsahovala položku:
<!-- ko if: imageURL --> <div style="flex-shrink:0;"> <img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" /> </div> <!-- /ko -->
V objekte viewModel vytvorte dva pozorované objekty observable na získanie imageID
z customSetttingsData
a uloženie imageURL
vyvolaného z uloženého zoznamu položiek.
self.imageID = ko.observable(); self.imageURL = ko.observable();
Aktualizujte viewModel tak, aby sa pri každej zmene objektu imageID
načítala zodpovedajúce adresa URL obrazovej položky.
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; } } }); });
Aktualizujte viewModel, aby sa vyvolalo ID z objektu customSettingsData
.
Kontrola výsledkov vykreslenia položky
Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.
Otvorte stránku v režime úprav.
Myšou presuňte komponent na stránku.
Otvorte panel Nastavenia.
Kliknite na tlačidlo Vybrať obrázok.
Vyhľadajte (alebo nahrajte) obrázok a vyberte ho.
Názov obrázka sa uloží a zobrazí vybraný obrázok.
Zatvorte panel Nastavenia.
V tomto momente by ste mali vidieť vybraný obrázok vykreslený v komponente.
Pokračujte na Prehľad tutoriálu.