Passo 3: Esaminare la struttura delle impostazioni del componente locale

Questo passo prevede l'esame della struttura delle impostazioni specificate per un componente locale.

Nella stessa directory del file render.js, /assets, è disponibile un file settings.html già creato. Il file settings.html esegue il rendering di tutti i dati delle impostazioni personalizzate per il componente. Nell'implementazione predefinita i dati delle impostazioni personalizzate contengono un'unica proprietà imageWidth.

Per esaminare la struttura del componente locale, effettuare le operazioni riportate di seguito.

1. Utilizzando il client di sincronizzazione del desktop di Oracle Content Management, individuare il componente e sincronizzarlo con il file system.

   Se non si dispone del client di sincronizzazione desktop, è possibile selezionare il componente nella scheda Componenti dell'interfaccia Web di Oracle Content Management, quindi eseguire il drill-down per visualizzare i file.

2. Quando si elencano i file sotto il componente, è possibile visualizzare i file seguenti:

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

Aprire il file settings.html nella directory /assets ed esaminarne il contenuto. A differenza del file render.js, il file settings.html utilizza un frame in linea nel pannello Impostazioni in SiteBuilder, motivo per il quale deve inoltre accedere ai file di supporto per garantire un rendering corretto all'interno del frame in linea. SiteBuilder è necessario per gestire il sito e isolare qualsiasi errore del codice JavaScript da SiteBuilder: questo è il motivo per il quale il file settings.html utilizza un frame in linea.

Di seguito vengono descritte le aree principali del file settings.html.

• Modello Knockout per il rendering del pannello Impostazioni.

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• Handler di associazione personalizzato per regolare l'altezza del frame in linea dopo il rendering del pannello Impostazioni.

  ko.bindingHandlers.scsCompComponentImpl

• ViewModel Knockout per l'applicazione del modello Knockout.

  SettingsViewModel

Di seguito vengono descritti gli elementi principali di SettingsViewModel.

• Sottoscrizioni al ciclo di vita del componente.

• Inizializzazione del componente:

  • Assicurarsi che il rendering del componente non venga eseguito finché non saranno stati recuperati tutti i dati. Per gestire questa operazione vengono utilizzati elementi osservabili Knockout.

    self.initialized = ko.observable(false);

  • Non tentare di aggiornare i dati prima di essere pronti.

    self.saveData = false;

  • Ottenere i valori iniziali di tutte le proprietà obbligatorie. La gestione di questa operazione viene effettuata tramite i callback per il recupero dei dati.

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

• Salvare le modifiche apportate alle proprietà nei dati delle impostazioni personalizzate.

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

Per aggiungere un'altra proprietà da acquisire, sono necessari vari passi:

1. aggiornamento dell'interfaccia utente per visualizzare il nuovo valore;

2. inizializzazione del valore sul valore corrente memorizzato per il componente;

3. salvataggio delle modifiche sul valore nel componente.

Per aggiungere un'altra proprietà al componente personalizzato, modificare il file settings.html come indicato di seguito.

1. Aggiungere un altro elemento osservabile per gestire la nuova proprietà. Modificare questo codice:

   self.width = ko.observable();

   Usare questo codice in sostituzione del precedente:

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. Ottenere il valore corrente della nuova proprietà alla prima visualizzazione del pannello Impostazioni. Modificare questo codice:

   self.width(data.width);

   Usare questo codice in sostituzione del precedente:

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Salvare le modifiche nella nuova proprietà. Modificare questo codice:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   Usare questo codice in sostituzione del precedente:

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Aggiungere un'interfaccia utente per visualizzare il nuovo campo. Modificare questo codice:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   Usare questo codice in sostituzione del precedente:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. Sincronizzare o caricare il file settings.html.

Se si procedesse all'esecuzione di questo codice adesso, il campo verrebbe visualizzato. Le dimensioni del pannello Impostazioni, tuttavia, non cambiano automaticamente. Poiché le dimensioni del pannello sono state aumentate, è necessario aggiornare anche la voce di registrazione components.json alle nuove dimensioni.

1. Scaricare il file appinfo.json, che si trova allo stesso livello della directory assets/ per il componente, quindi aggiornare le dimensioni del pannello Impostazioni. Modificare questo codice:

   "settingsHeight": 90,

   Usare questo codice in sostituzione del precedente:

   "settingsHeight": 160,

2. Sincronizzare o caricare il file appinfo.json.