Etap 16: Zarządzanie zasobami

Opisano i objaśniono tu, jak zarządzać zasobami używanymi przez składnik.

Do zasobów należą składniki (w tym niestandardowe), o których Oracle Content Management musi wiedzieć, aby móc zarządzać cyklem ich życia.

Folder zawartości Oracle Content Management

Każdy tworzony w Oracle Content Management serwis jest wyposażany we własny folder content zawartości. Jest to folder ukryty, który zazwyczaj nie jest wyświetlany. Gdy serwis jest publikowany, w systemie plików są publikowane wszystkie pliki zawarte w folderze content.

Na przykład, jeśli przy użyciu składnika "obraz" zostanie wybrany obraz, Oracle Content Management sporządzi kopię tego wybranego obrazu i umieści ją w folderze zawartości. Używany URL zawsze wskazuje skopiowaną wersję obrazu, tak że jeśli obraz oryginalny zostanie usunięty, serwis nadal będzie poprawnie działał. Dotyczy to także innych składników udostępnianych przez Oracle Content Management, takich jak "galeria", "siatka galerii", "dokument", "pasek społecznościowy", "pobieranie plików", a także obrazów tła dla gniazd i grup składników.

Składnik niestandardowy, aby móc uczestniczyć w cyklu życia zasobu, musi poinformować Oracle Content Management o wszelkich zasobach, którymi usługa ma zarządzać w jego imieniu. Ponieważ wiąże się to ze sporządzeniem kopii zasobu, składnik niestandardowy musi także wybrać zasób — używając zestawów API z Oracle Content Management API — tak aby było wiadomo, jak nim zarządzać.

Zarządzanie adresami URL

URL zasobu zmienia się w zależności od pewnych kryteriów.

  • URL składnika, używany w trybie wykonawczym, różni się od adresu URL, używanego dla składnika przez konstruktor serwisów

  • Jeśli zostanie skopiowana strona, Oracle Content Management również sporządzi kopię wszystkich zasobów z folderu zawartości, do których występują odwołania, tak że nigdy nie ma dwóch składników wskazujących ten sam zasób w folderze zawartości

  • Jeśli na stronę zostanie przeciągnięta grupa składników (składnik componentGroup), zostaną sporządzone kopie wszystkich zasobów, do których odwołuje się którykolwiek zasób zawarty w grupie składników

Ponadto, mimo że względny URL może być odpowiedni dla składnika lokalnego, dla składników odległych jest wymagany w pełni kwalifikowany URL każdego zasobu, którym Oracle Content Management ma zarządzać, dzięki czemu zawartość ramki iFrame zasobu może być renderowana z użyciem pełnego adresu URL.

Ponieważ nie można zakładać, że adres URL będzie statyczny, trzeba odwołania do ID utrzymywać w swoim kodzie i pobierać URL zasobu tylko wtedy, gdy zasób ten będzie renderowany.

Zarządzanie zasobami

Dostępne są następujące Sites SDK API do zarządzania zasobami:

SitesSDK.getProperty('componentAssets', callback);

  • Uzyskuje tablicę bieżących zasobów

  • Każdy wpis zasobu składa się z następujących elementów:

    • id: Unikatowy ID zasobu.

    • title: Metadane tytułu Oracle Content Management.

    • description: Metadane opisu Oracle Content Management.

    • fileName: Oryginalna nazwa wybranego pliku. Przydatne do wyświetlenia w panelu "Ustawienia" dla składnika niestandardowego (dzięki temu użytkownicy będą wiedzieć, który plik wybrali). Nie jest to nazwa pliku skopiowanego do folderu zawartości.

    • source: URL (z obsługą makr) zasobu. Wartość ta będzie się zmieniać i dlatego składnik nie powinien się do niej odwoływać, ale musi zostać zapisana jako część zasoby.

    • url: W pełni kwalifikowany URL zasobu, oparty na kontekście, w którym wywołano getProperty().

SitesSDK.setProperty('componentAssets', [assets]);

  • Należy wywołać, aby zapisać wszystkie zasoby, którymi Oracle Content Management ma zarządzać w imieniu bieżącego użytkownika.

  • Jeśli ta metoda nie zostanie wywołana, to nie zostanie zapisany żaden zasób.

  • Wszelkie zasoby, których nie ma w tej tablicy, zostaną usunięte podczas publikowania serwisu.

  • Parametr assets ma postać tablicy zasobów w tym samym formacie, w jakim uzyskano je za pomocą metody getProperty — tablica ta jest także zwracana przez selektor plików (filePicker).

    Uwaga:

    Nie jest składowana żadna wartość url. Jest ona dynamicznie tworzona, gdy wystąpi pytanie o zasoby.

SitesSDK.filePicker(options, callback);

  • API do wywołania selektora plików umożliwiającego wybranie listy zasobów.

  • Przy pomyślnym wyborze zasobów jest uaktywniane wywołanie zwrotne przekazujące ich tablicę.

  • W tym momencie nic nie jest zapisywane; to składnik decyduje o wywołaniu metody setProperty('componentAssets', [assets]); w celu zapisania elementów z tego wyboru w połączeniu z innymi zasobami, które mają zostać zapisane.

Przykład wyboru zasobu

Pokazano tu, jak wybrać zasób, składować jego ID oraz ponownie pobrać faktyczne wartości ze składowanych zasobów.

  1. Edytować plik settings.html.

  2. Zmienić obiekt "template", tak aby zawierał blok 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. Zmienić viewModel, dodając obiekt "observable" służący do przechowywania ID wybranego zasobu.

    self.imageID = ko.observable();

  4. Zmienić viewModel, tak aby wybór zasobu odbywał się przez wywołanie selektora plików i była wyświetlana nazwa wybranego zasobu.

    //
// 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. Zaktualizować viewModel, tak aby przed uzyskaniem customSettingsData były najpierw uzyskiwane zasoby. Kod ten wywoła także self.imageName, gdy obiekt "observable" self.ImageID() ulegnie zmianie.

    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. Na koniec zmodyfikować funkcję save, tak aby został zapisany imageID, oraz zaktualizować componentAssets o listę zasobów, do których występują odwołania.

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

Sprawdzanie wyników dla wyboru zasobu

  1. Aby konstruktor serwisów mógł pobrać zmiany do składnika, odświeżyć stronę serwisu.

  2. Przełączyć stronę do trybu edycji.

  3. Przeciągnąć składnik na stronę.

  4. Wyświetlić panel "Ustawienia".

  5. Nacisnąć przycisk Wybierz obraz.

  6. Wyszukać (lub wysłać) obraz, a następnie go wybrać.

    Warto zwrócić uwagę, że zostaje składowana nazwa wybranego obrazu.

  7. Zamknąć panel "Ustawienia".

  8. Wyświetlić ponownie panel "Ustawienia".

    Nazwa obrazu jest ponownie odzwierciedlana.

Przykład renderowania zasobu

Pokazano tu, jak pobierać zasoby i renderować je w składniku, oraz dynamicznie aktualizować składnik, gdy zostaną zmienione wartości w panelu "Ustawienia".

Uwaga:

Mimo że jest to przykład odnoszący się do składnika lokalnego, zawartego w ramce wstawkowej na stronie, to jednak podobny kod będzie działał dla składników renderowanych miejscowo na stronie.

  1. Edytować plik render.html.

  2. Zmienić obiekt "template", tak aby zawierał zasób.

    <!-- 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. W modelu widoku (viewModel) utworzyć dwa obiekty "observable" w celu uzyskania wartości imageID z customSetttingsData oraz przechowywania adresu imageURL uzyskanego ze składowanej listy zasobów.

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

  4. Zaktualizować viewModel, tak aby — gdy zmieni się imageID — pobierał URL odpowiadającego mu zasobu "obraz".

    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. Zaktualizować viewModel, tak aby uzyskiwał ID z customSettingsData.

Sprawdzanie wyników dla renderowania zasobu

  1. Aby konstruktor serwisów mógł pobrać zmiany do składnika, odświeżyć stronę serwisu.

  2. Przełączyć stronę do trybu edycji.

  3. Przeciągnąć składnik na stronę.

  4. Wyświetlić panel "Ustawienia".

  5. Nacisnąć przycisk Wybierz obraz.

  6. Wyszukać (lub wysłać) obraz, a następnie go wybrać.

    Warto zwrócić uwagę, że zostaje składowana nazwa wybranego obrazu.

  7. Zamknąć panel "Ustawienia".

    W tym momencie powinniśmy w składniku widzieć wyrenderowany wybrany obraz.

Kontynuacja: Samouczek — przegląd.