Krok 16: Správa materiálů

Tento krok popisuje a vysvětluje, jak provádět správu materiálů používaných komponentou.

Materiály zahrnují komponenty a vlastní komponenty, o kterých musí mít služba Oracle Content Management informace, aby bylo možné provádět správu životního cyklu těchto materiálů.

Složka obsahu služby Oracle Content Management

Každý web, který vytvoříte ve službě Oracle Content Management, bude opatřen vlastní složkou content. Jedná se o skrytou složku, kterou za normálních okolností neuvidíte. Když je web publikován, všechny soubory ve složce content jsou také publikovány do systému souborů.

Když například vyberete obrázek pomocí komponenty Obrázek, služba Oracle Content Management vytvoří kopii vámi vybraného obrázku a umístí ji do složky obsahu. Vaše adresa URL vždy směřuje na tuto zkopírovanou verzi obrázku, takže pokud původní obrázek odstraníte, nedojde k narušení webu. To platí také pro ostatní komponenty poskytované službou Oracle Content Management: Galerie, Mřížka galerie, Dokument, Pruh funkcí sociální sítě, Stahování souborů, stejně jako pro obrázky na pozadí pro pozice a skupiny componentGroup.

Pokud se má vlastní komponenta podílet na životním cyklu materiálů, musí informovat službu Oracle Content Management o veškerých materiálech, pro které má služba jejím jménem provádět správu. Vzhledem k tomu, že tento proces zahrnuje vytvoření kopie materiálu, vlastní komponenta musí také použít rozhraní API služby Oracle Content Management k výběru materiálu, abychom věděli, jak provádět správu.

Správa adres URL

Adresa URL pro materiál se může změnit na základě řady kritérií.

  • Adresa URL komponenty používaná za běhu se liší od adresy URL komponenty používané nástrojem Site Builder.

  • Pokud zkopírujete stránku, služba Oracle Content Management také vytvoří kopii všech odkazovaných materiálů uložených ve složce obsahu, takže nikdy nebudete mít dvě komponenty ukazující na stejný materiál ve složce obsahu.

  • Přetažením skupiny componentGroup na stránku vytvoříte nové kopie pro veškeré materiály odkazované komponentou ve skupině componentGroup.

Navíc, zatímco pro místní komponentu může být dostačující relativní adresa URL, vzdálené komponenty vyžadují plně kvalifikovanou adresu URL ke každému materiálu, pro který má služba Oracle Content Management provádět správu vaším jménem, aby mohly generovat svůj obsah vloženého rámce pomocí úplné adresy URL.

Vzhledem k tomu, že se nemůžete spolehnout na to, že adresa URL zůstane statická, musíte ve svém kódu uchovávat pouze odkaz na identifikátor k materiálu a adresu URL materiálu načíst, až když chcete příslušný materiál generovat.

Správa materiálů

Pro správu materiálů jsou dostupná následující rozhraní API sady SDK pro weby.

SitesSDK.getProperty('componentAssets', callback);

  • Toto rozhraní získá pole aktuálních materiálů.

  • Součástí každé položky materiálu jsou:

    • id: Jedinečný identifikátor materiálu.

    • název: metadata názvu Oracle Content Management.

    • popis: popisná metadata Oracle Content Management.

    • fileName: Původní název vybraného souboru. Tento údaj je užitečný k zobrazení na panelu Nastavení pro vaši vlastní komponentu, aby uživatelé věděli, jaký soubor vybrali. Nejedná se o název souboru zkopírovaného do složky obsahu.

    • source: Adresa URL materiálu podporovaná makrem. Tato hodnota se v průběhu času změní, a proto by se ni vaše komponenta neměla odkazovat. Musí však být uložena jako součást materiálu.

    • url: Plně kvalifikovaná adresa URL materiálu určená na základě kontextu, ve kterém byla volána metoda getPropert().

SitesSDK.setProperty('componentAssets', [materiály]);

  • Voláním tohoto rozhraní uložíte veškeré materiály, pro které má služba Oracle Content Managementprovádět správu vaším jménem.

  • Pokud toto rozhraní nezavoláte, nebudou uloženy žádné materiály.

  • Veškeré materiály, které nejsou obsaženy v tomto poli, budou při publikování webu odstraněny.

  • Parametr assets je pole materiálů ve stejném formátu, v jakém vám je vrátila metoda getProperty a v jakém je vrací také metoda filePicker.

    Poznámka:

    Není uložena žádná hodnota url. Tato hodnota se vytváří dynamicky, když požádáte o materiály.

SitesSDK.filePicker(options, callback);

  • Rozhraní API, které vyvolá nástroj pro výběr souborů, v němž lze vybrat seznam materiálů.

  • Při úspěšném výběru materiálů aktivuje zpětné volání, při němž předá pole vybraných materiálů.

  • V tomto okamžiku není nic uloženo a závisí na komponentě, zda zavolá rozhraní setProperty ('componentAssets', [materiály]);, aby uložila položky z tohoto výběru společně s jakýmikoli dalšími matriály, které mají být uloženy.

Příklad výběru materiálu

V této části je vysvětleno, jak vybrat materiál, uložit jeho identifikátor a znovu načíst skutečné hodnoty z uložených materiálů.

  1. Upravte soubor settings.html.

  2. Změňte objekt šablony tak, aby zahrnoval položku 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. Změňte objekt viewModel, aby přidal objekt typu Observable k uložení identifikátoru vybraného materiálu.

    self.imageID = ko.observable();

  4. Změňte objekt viewModel tak, aby prováděl správu výběru materiálů vyvoláním nástroje pro výběr souborů a zobrazením názvu vybraného materiálu.

    //
// 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 objekt viewModel tak, aby nejprve načetl materiály, a až poté získal objekt customSettingsData. Tento kód také způsobí vyvolání funkce self.imageName při změně objektu typu Observable metody 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. Nakonec aktualizujte funkci save, aby uložila parametr imageID, a nezapomeňte aktualizovat objekt componentAssets svým seznamem odkazovaných materiálů.

    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ýsledků pro výběr materiálu

  1. Aktualizujte svou stránku na webu, aby nástroj Site Builder mohl provést změny komponenty.

  2. Uveďte stránku do režimu úprav.

  3. Přetáhněte svou komponentu na stránku.

  4. Vyvolejte panel Nastavení.

  5. Klikněte na tlačítko Vybrat obrázek.

  6. Vyhledejte (nebo odešlete) a vyberte obrázek.

    Všimněte si, že se název obrázku uloží a zobrazí se vybraný obrázek.

  7. Zavřete panel Nastavení.

  8. Znovu vyvolejte panel Nastavení.

    Všimněte si, že se znovu zobrazí název obrázku.

Příklad generování materiálu

V této části je vysvětleno, jak načítat materiály a generovat je ve vaší komponentě a také jak zajistit dynamickou aktualizaci komponenty při každé změně hodnot na panelu nastavení.

Poznámka:

Ačkoli uvedený příklad obsahuje ukázku pro místní komponentu, která je umístěna na stránce ve vloženém rámci, podobný kód bude fungovat i pro komponenty generované přímo na stránce.

  1. Upravte soubor render.html.

  2. Aktualizujte šablonu tak, aby zahrnovala váš materiál.

    <!-- 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 objektu viewModel vytvořte dva objekty typu Observable, abyste získali parametr imageID z objektu customSettingsData a uložili parametr imageURL načtený z uloženého seznamu materiálů.

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

  4. Aktualizujte objekt viewModel tak, aby při každé změně parametru imageID získal odpovídající adresu URL materiálu typu obrázek.

    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 objekt viewModel tak, aby načetl identifikátor z objektu customSettingsData.

Kontrola výsledků pro generování materiálu

  1. Aktualizujte svou stránku na webu, aby nástroj Site Builder mohl provést změny komponenty.

  2. Uveďte stránku do režimu úprav.

  3. Přetáhněte svou komponentu na stránku.

  4. Vyvolejte panel Nastavení.

  5. Klikněte na tlačítko Vybrat obrázek.

  6. Vyhledejte (nebo odešlete) a vyberte obrázek.

    Všimněte si, že se název obrázku uloží a zobrazí se vybraný obrázek.

  7. Zavřete panel Nastavení.

    V tomto okamžiku byste měli vidět vybraný obrázek generovaný v komponentě.

Pokračujte částí Shrnutí návodu.