Pasul 16: Administrarea resurselor

Acest pas descrie şi explică modul de administrare a resurselor utilizate de o componentă.

Resursele includ componente şi componente personalizate pe care Oracle Content Management trebuie să le cunoască, pentru a gestiona ciclul de viaţă al resurselor.

Folder de conţinut Oracle Content Management

Fiecare site pe care îl creaţi în Oracle Content Management vine cu propriul folder de conţinut. Acesta este un folder ascuns, pe care în mod normal nu îl veţi vedea. Atunci când site-ul este publicat, toate fişierele din folderul content sunt şi ele publicate în sistemul de fişiere.

De exemplu, atunci când selectaţi o imagine utilizând componenta Imagine, Oracle Content Management realizează o copie a imaginii pe care aţi selectat-o şi o plasează în folderul de conţinut. Adresa dvs. URL indică întotdeauna către această versiune copiată a imaginii, astfel că în cazul în care ştergeţi imaginea originală, site-ul dvs. nu se va deteriora. Acest lucru se aplică şi la celelalte componente furnizate de Oracle Content Management: Gallery, Gallery Grid, Document, Social Bar, File Download, precum şi imagini de fundal pentru sloturi şi componentGroups.

Pentru ca o componentă personalizată să ia parte la acest ciclu de viaţă al resurselor, componenta personalizată trebuie să informeze Oracle Content Management despre orice resurse pentru care doreşte serviciul, ca să fie administrate în numele ei. Deoarece acest lucru implică realizarea unei copii a resursei, componenta personalizată trebuie să utilizeze şi ea interfeţele API din Oracle Content Management pentru a selecta resursa, pentru a şti cum să o gestionăm.

Gestionarea adreselor URL

Adresa URL a unei resurse se modifică pe baza unui număr de criterii.

  • Adresa URL la runtime către o componentă este diferită de adresa URL a generatorul de site-uri către componenta respectivă

  • În cazul în care copiaţi o pagină, Oracle Content Management face, de asemenea, o copie a tuturor resurselor din folderul de conţinut la care s-a făcut referire, aşa că niciodată nu aveţi două componente care indică spre aceeaşi resursă din folderul de conţinut

  • La plasarea unui grup componentGroup pe pagină se realizează copii noi pentru toate resursele la care s-a făcut referire de către o componentă din cadrul componentGroup

În plus, în timp ce o adresă URL relativă poate fi bună pentru o componentă locală, componentele la distanţă necesită adresa URL calificată integral către orice resursă pe care doriţi să o gestioneze Oracle Content Management în numele dvs., astfel încât acestea să poată randa conţinutul din cadrul inline cu adresa URL completă.

Deoarece nu vă puteţi baza pe adresa URL care rămâne statică, trebuie să păstraţi numai referinţele la ID-ul resursei în codul dvs. şi să preluaţi adresa URL a resursei atunci când doriţi să o randaţi.

Administrarea resurselor

Aceste interfeţe API SDK pentru site-uri sunt disponibile pentru administrarea resurselor.

SitesSDK.getProperty('componentAssets', callback);

  • Aceasta obţine matricea resurselor curente

  • Fiecare intrare de resursă este compusă din:

    • id: ID unic pentru resursă.

    • title: Oracle Content Management metadate titlu.

    • description: metadate descriere Oracle Content Management.

    • fileName: Numele original al fişierului selectat. Util la afişarea în panoul Setări pentru componenta dvs. personalizată, astfel ca utilizatorii să ştie ce fişier au selectat. Acesta nu este numele fişierului copiat în folderul de conţinut.

    • source: Adresa URL activată prin macrocomandă către resursa respectivă. Această valoare se va modifica în timp şi nu trebuie să fie menţionată de componenta dvs., dar trebuie salvată ca parte a resursei respective.

    • url: Adresa URL calificată integral către resursă, bazată pe contextul în care getPropert() a fost apelată.

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

  • Apelaţi această acţiune pentru a salva toate resursele pe care doriţi ca Oracle Content Management să le gestioneze în numele dvs.

  • Dacă nu faceţi apel la această acţiune, atunci nu va fi salvată nicio resursă.

  • Orice resurse care nu se află în această matrice vor fi şterse atunci când site-ul este publicat.

  • Parametrul assets este o matrice de resurse, în acelaşi format ca şi cum ar fi returnat de getProperty şi este, de asemenea, returnat de filePicker.

    Notă:

    Nu este stocată nicio valoare url. Acea valoare este creată în mod dinamic atunci când solicitaţi resursele.

SitesSDK.filePicker(options, callback);

  • O interfaţă API pentru a aduce selectorul de fişiere şi a selecta lista de resurse.

  • El apelează rutina de callback, la selectarea cu succes a resurselor care trec în matricea resurselor selectate.

  • Nimic nu este salvat în acest moment şi depinde de componentă să apeleze setProperty('componentAssets', [assets]); pentru a salva elementele din această selecţie aflate în combinaţie cu orice alte resurse care urmează să fie salvate.

Exemplu de Selectare resursă

Această secţiune vă arată cum să selectaţi o resursă, cum să stocaţi ID-ul acesteia şi cum să preluaţi din nou valorile reale din resursele stocate.

  1. Editaţi fişierul settings.html.

  2. Modificaţi obiectul şablonului pentru a include o 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. Modificaţi viewModel pentru a adăuga o colecţie observable care să stocheze ID-ul resursei selectate.

    self.imageID = ko.observable();
  4. Modificaţi viewModel pentru a gestiona selectarea resursei, prin aducerea selectorului de fişiere şi afişarea numelui resursei selectate.

    //
    // 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. Actualizaţi viewModel pentru a prelua mai întâi resursele, înainte de a obţine customSettingsData. Acest cod va provoca invocarea self.imageName atunci când se schimbă colecţia 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. În cele din urmă, actualizaţi funcţia save pentru a salva imageID şi asiguraţi-vă că actualizaţi componentAssets cu lista dvs. de resurse la care s-a făcut referinţă.

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

Verificarea rezultatelor pentru Selectare resursă

  1. Reîncărcaţi pagina din site-ul dvs., astfel ca Generatorul de site-uri să poată prelua modificările aduse componentei.

  2. Treceţi pagina în modul Editare.

  3. Glisaţi şi plasaţi componenta dvs. pe pagină.

  4. Deschideţi panoul Setări.

  5. Faceţi clic pe butonul Selectare imagine.

  6. Parcurgeţi (sau încărcaţi) şi selectaţi o imagine.

    Reţineţi că numele imaginii este stocat pentru a afişa imaginea selectată.

  7. Închideţi panoul Setări.

  8. Deschideţi din nou panoul Setări.

    Reţineţi că numele imaginii este reflectat din nou.

Exemplu de Randare resursă

Această secţiune vă arată cum să preluaţi resursele şi să le randaţi în componenta dvs. şi totodată să aveţi componenta actualizată dinamic de fiecare dată când valorile sunt modificate în panoul dvs. de setări.

Notă:

Deşi acest lucru arată un exemplu pentru o componentă locală care se află într-un cadru inline pe pagina respectivă, un cod similar va funcţiona pentru componentele randate inline în pagină.
  1. Editaţi fişierul render.html.

  2. Actualizaţi şablonul pentru a include resursa dvs.:

    <!-- 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. În viewModel, creaţi două colecţii observable pentru a obţine imageID din customSetttingsData şi a stoca imageURL preluată din lista stocată a resurselor.

    self.imageID = ko.observable();
    self.imageURL = ko.observable();
  4. Actualizaţi viewModel astfel încât, de fiecare dată când se modifică imageID, să obţină adresa URL a resursei corespunzătoare imaginii.

    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. Actualizaţi viewModel pentru a prelua ID-ul din customSettingsData.

Verificarea rezultatelor pentru Randare resursă

  1. Reîncărcaţi pagina din site-ul dvs., astfel ca Generatorul de site-uri să poată prelua modificările aduse componentei.

  2. Treceţi pagina în modul Editare.

  3. Glisaţi şi plasaţi componenta dvs. pe pagină.

  4. Deschideţi panoul Setări.

  5. Faceţi clic pe butonul Selectare imagine.

  6. Parcurgeţi (sau încărcaţi) şi selectaţi o imagine.

    Reţineţi că numele imaginii este stocat pentru a afişa imaginea selectată.

  7. Închideţi panoul Setări.

    În acest moment ar trebui să vedeţi că imaginea selectată este randată în componentă.

Continuaţi cu Verificarea tutorialului.