Passo 16: Gestione degli asset

Oracle Content Management Cartella contenuti

Ogni sito creato in Oracle Content Management dispone di una cartella content specifica. Si tratta di una cartella nascosta in genere non visibile. Quando il sito viene pubblicato, vengono pubblicati nel file system anche tutti i file della cartella content.

Ad esempio, quando si seleziona un'immagine utilizzando il componente Immagine, Oracle Content Management crea una copia dell'immagine selezionata e la inserisce nella cartella content. L'URL dell'utente punta sempre alla versione copiata dell'immagine in modo che il sito non subisca interruzioni se si elimina l'immagine originale. Ciò è valido anche per gli altri componenti forniti da Oracle Content Management: Galleria, Griglia galleria, Documento, Barra social, Download file, nonché le immagini di sfondo per slot e gruppi di componenti.

Per partecipare al ciclo di vita degli asset, un componente personalizzato deve indicare a Oracle Content Management gli asset che desidera vengano gestiti dal servizio. Poiché è prevista la creazione di una copia dell'asset, il componente personalizzato deve inoltre utilizzare le interfacce API di Oracle Content Management per selezionare l'asset in modo da indicarne le modalità di gestione.

Gestire gli URL

L'URL di un asset varia in base ad alcuni criteri.

• L'URL di runtime per un componente è diverso dall'URL di SiteBuilder per il componente

• Se si copia una pagina, Oracle Content Management crea una copia di tutti gli asset di riferimento nella cartella content, pertanto non si disporrà mai di due componenti che puntano allo stesso asset nella cartella content

• Quando si rilascia un gruppo di componenti sulla pagina, vengono create nuove copie di tutti gli asset a cui fa riferimento un componente del gruppo

Inoltre, mentre un URL relativo può essere sufficiente per un componente locale, i componenti remoti richiedono l'URL completamente qualificato di qualsiasi asset che Oracle Content Management dovrà gestire per conto dell'utente in modo che il rendering del contenuto del frame in linea possa essere eseguito con l'URL completo.

Poiché non è possibile basarsi su un URL che rimane statico, è necessario mantenere solo i riferimenti al ID per l'asset nel codice e recuperare il URL dell'asset quando si desidera eseguire il rendering dell'asset.

Gestire gli asset

Per la gestione degli asset sono disponibili le interfacce API del kit Sites SDK riportate di seguito.

SitesSDK.getProperty('componentAssets', callback);

• Si ottiene l'array degli asset correnti

• Ogni voce di asset è costituita dagli elementi riportati di seguito.

  • id: ID univoco dell'asset.

  • titolo: metadati del titolo di Oracle Content Management.

  • descrizione: metadati della descrizione di Oracle Content Management.

  • nome file: nome originale del file selezionato. Utile per la visualizzazione nel pannello Impostazioni per il componente personalizzato in modo che gli utenti sappiano quale file è selezionato. Non si tratta del nome del file copiato nella cartella content.

  • origine: URL abilitato per le macro dell'asset. Questo valore cambia nel tempo e deve essere salvato come parte dell'asset, ma il componente non deve farvi riferimento.

  • url: URL completamente qualificato dell'asset basato sul contesto in cui è stato richiamato getPropert().

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

• L'utente può chiamare questa API per salvare tutti gli asset che si desidera vengano gestiti per proprio conto da Oracle Content Management.

• Se l'API non viene chiamata, non verrà salvato alcun asset.

• Tutti gli asset non inclusi in questo array verranno eliminati alla pubblicazione del sito.

• Il parametro assets è un array di asset nello stesso formato restituito da getProperty e anche da filePicker.

  Nota:

  Non viene memorizzato alcun valore url. Il valore viene creato in modo dinamico quando si chiedono gli asset.

SitesSDK.filePicker(options, callback);

• Interfaccia API che consente di attivare il selettore file per la selezione della lista di asset.

• Chiama il callback quando la selezione degli asset riesce passando l'array degli asset selezionati.

• In questa fase non viene salvato nulla ed è compito del componente chiamare setProperty('componentAssets', [assets]); per salvare gli elementi di questa selezione combinati con altri eventuali asset da salvare.

Esempio di selezione di un asset

In questa sezione viene descritto come selezionare un asset, memorizzare l'ID dell'asset e recuperare di nuovo i valori effettivi dagli asset memorizzati.

1. Modificare il file settings.html.

2. Modificare l'oggetto del modello per includere un elemento 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. Modificare l'oggetto viewModel per aggiungere un elemento osservabile per memorizzare l'ID dell'asset selezionato.

   self.imageID = ko.observable();

4. Modificare l'oggetto viewModel per gestire la selezione dell'asset attivando il selettore file e visualizzando il nome dell'asset selezionato.

   //
   // 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. Aggiornare l'oggetto viewModel per recuperare gli asset prima di ottenere i dati customSettingsData. Questo codice comporta inoltre il richiamo di self.imageName quando l'elemento osservabile self.ImageID() cambia.

   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. Infine, aggiornare la funzione save per salvare imageID e aggiornare componentAssets con la lista degli asset d riferimento.

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

Controllare i risultati della selezione dell'asset

1. Aggiornare la pagina nel sito in modo che SiteBuilder possa selezionare le modifiche apportate al componente.

2. Attivare la modalità Modifica per la pagina.

3. Trascinare e rilasciare il componente sulla pagina.

4. Visualizzare il pannello Impostazioni.

5. Fare clic sul pulsante Seleziona immagine.

6. Sfogliare (o caricare) e selezionare un'immagine.

   Viene memorizzato il nome dell'immagine che mostra l'immagine selezionata.

7. Chiudere il pannello Impostazioni.

8. Visualizzare nuovamente il pannello Impostazioni.

   Il nome dell'immagine viene riflesso di nuovo.

Esempio di rendering degli asset

In questa sezione viene illustrato come recuperare gli asset ed eseguirne il rendering nel componente, nonché come fare in modo che il componente venga aggiornato in modo dinamico a ogni modifica dei valori nel pannello Impostazioni.

1. Modificare il file render.html.

2. Aggiornare il modello per includere l'asset.

   <!-- 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. Nell'oggetto viewModel creare due elementi osservabili per ottenere il valore imageID da customSetttingsData e memorizzare il valore imageURL recuperato dalla lista di asset memorizzata.

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

4. Aggiornare l'oggetto viewModel in modo che recuperi l'URL dell'asset immagine corrispondente a ogni modifica del valore imageID.

   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. Aggiornare l'oggetto viewModel per recuperare l'ID da customSettingsData.

Controllare i risultati del rendering degli asset

1. Aggiornare la pagina nel sito in modo che SiteBuilder possa selezionare le modifiche apportate al componente.

2. Attivare la modalità Modifica per la pagina.

3. Trascinare e rilasciare il componente sulla pagina.

4. Visualizzare il pannello Impostazioni.

5. Fare clic sul pulsante Seleziona immagine.

6. Sfogliare (o caricare) e selezionare un'immagine.

   Viene memorizzato il nome dell'immagine che mostra l'immagine selezionata.

7. Chiudere il pannello Impostazioni.

   Ora l'immagine selezionata dovrebbe essere visualizzata nel componente.

Continuare con l'argomento Revisione dell'esercitazione.