Passo 2: Esaminare la struttura di rendering del componente locale

Questo passo prevede l'esame della struttura dei file predefiniti creati per un componente locale.

Per un semplice esempio Hello World, quattro oggetti JavaScript e numerose righe di codice possono sembrare troppo, ma l'obiettivo è quello di fornire le basi per la creazione di componenti più complessi e per l'interazione con il ciclo di vita delle pagine del servizio Sites di Oracle Cloud.

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

1. Nella home page di Oracle Content Management fare clic su Sviluppatore.

   Viene visualizzata la pagina Sviluppatore.

2. Fare clic su Visualizza tutti i componenti.

3. Scegliere Crea componente locale nel menu.

4. Immettere un nome per il componente, ad esempio A_Local_Component.

5. Immettere una descrizione (facoltativo).

6. Fare clic su Crea.

   Una volta effettuate queste operazioni il componente denominato A_Local_Component sarà visibile nella lista dei componenti.

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 desktop, è possibile visualizzare tutti i componenti e selezionare il componente nella pagina Componenti 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

3. Aprire il file render.js nella directory /assets.

   Le caratteristiche principali del file render.js sono:

   • è strutturato come un modulo AMD JavaScript in modo che possa essere "richiesto" nella pagina;

   • include inoltre riferimenti a KnockoutJS e JQuery, già caricati come parte della pagina di Oracle Content Management.

Esaminare la struttura del file render.js.

Il file render.js contiene due oggetti JavaScript che implementano le API di componente Oracle Content Management obbligatorie: sampleComponentFactory e SampleComponentImpl. Questi oggetti costituiscono un esempio di implementazione per la creazione di componenti basati su KnockoutJS. L'implementazione di questi oggetti cambia in base alla tecnologia utilizzata.

• sampleComponentFactory

  • Questo oggetto viene restituito dal modulo AMD render.js.

  • Si tratta di un oggetto Factory molto semplice che implementa l'interfaccia createComponent() singola.

  • In implementazioni più complesse può essere utilizzato il valore args passato per ottenere la restituzione di implementazioni diverse del componente in base al parametro viewMode. Ciò consente di disporre di un'implementazione del componente significativamente più ridotta per il runtime rispetto a SiteBuilder.

• SampleComponentImpl

  • La funzione principale di questo oggetto è la funzione render, utilizzata per visualizzare il componente nella pagina.

    Per visualizzare il componente Knockout nella pagina, la funzione render aggiunge in modo dinamico il modello alla pagina, quindi applica le associazioni viewModel al modello.

  • Il resto dell'implementazione riguarda l'inizializzazione del parametro e del modello viewModel, nonché la gestione dello scambio di messaggi tra la pagina e il componente.

Gli ultimi due oggetti del file render.js, sampleComponentTemplate e SampleComponentViewModel, forniscono un'implementazione personalizzata per il componente. L'implementazione di questi oggetti varia a seconda delle esigenze.

• sampleComponentTemplate

  • Questo oggetto consente di creare il modello KnockoutJS. Attende l'inizializzazione completa dei dati del componente prima di tentare di visualizzare qualsiasi elemento.

• SampleComponentViewModel

  • viewModel recupera le informazioni memorizzate da Oracle Content Management per conto del componente, quindi seleziona le modalità di layout appropriate per il componente in base a tali dati.

  • Elementi osservabili Knockout generali utilizzati dal modello per gestire l'accesso ai metadati memorizzati per conto del componente:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • Integrazione di trigger e azioni:

    Trigger: funzione per richiamare un trigger di Oracle Content Management dal componente che può essere associato ad azioni di altri componenti nella pagina.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    Action: funzione per gestire il callback quando il componente riceve istruzioni per eseguire un'azione con un determinato payload.

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    Callback per eseguire qualsiasi azione registrata su richiesta.

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • 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.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(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('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • Aggiornamenti dei metadati: viene eseguito il callback ogni volta che vengono modificati i metadati del componente memorizzati per conto del componente; ad esempio, quando l'utente richiama il pannello Impostazioni e aggiorna i dati.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));