Krok 16: Správa položiek

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 hodnota url. 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.

  1. Upravte súbor settings.html.

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

  3. Zmeňte viewModel tak, že pridáte pozorovaný objekt observable, ktorý bude obsahovať ID vybranej položky.

    self.imageID = ko.observable();

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

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

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

  1. Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.

  2. Otvorte stránku v režime úprav.

  3. Myšou presuňte komponent na stránku.

  4. Otvorte panel Nastavenia.

  5. Kliknite na tlačidlo Vybrať obrázok.

  6. Vyhľadajte (alebo nahrajte) obrázok a vyberte ho.

    Názov obrázka sa uloží a zobrazí vybraný obrázok.

  7. Zatvorte panel Nastavenia.

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

  1. Upravte súbor render.html.

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

  3. 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();

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

  5. Aktualizujte viewModel, aby sa vyvolalo ID z objektu customSettingsData.

Kontrola výsledkov vykreslenia položky

  1. Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.

  2. Otvorte stránku v režime úprav.

  3. Myšou presuňte komponent na stránku.

  4. Otvorte panel Nastavenia.

  5. Kliknite na tlačidlo Vybrať obrázok.

  6. Vyhľadajte (alebo nahrajte) obrázok a vyberte ho.

    Názov obrázka sa uloží a zobrazí vybraný obrázok.

  7. Zatvorte panel Nastavenia.

    V tomto momente by ste mali vidieť vybraný obrázok vykreslený v komponente.

Pokračujte na Prehľad tutoriálu.