Gestisce gli eventi di selezione in un'applicazione Web Oracle JET

Introduzione

È possibile utilizzare l'API Oracle JavaScript Extension Toolkit (Oracle JET) in viewModel dell'applicazione Web Oracle JET per creare handler di eventi che rispondono al listener di modifica degli attributi del componente selected Oracle JET List View. Quando l'utente seleziona o deseleziona un elemento nella lista, il listener delle modifiche attiva il gestore di eventi. È possibile utilizzare l'handler di eventi per popolare il provider di dati Oracle JET ed è possibile associare il provider di dati agli osservatori che il componente vista può utilizzare. L'handler di eventi può anche impostare la variabile booleana utilizzata dal componente Oracle JET If Binding per eseguire il rendering condizionale dei relativi elementi HTML nidificati nella vista. Se l'attributo selected del componente Oracle JET List View per la lista principale non è vuoto, la variabile viene impostata su true e la vista esegue il rendering della lista dei dettagli associati ai dati. Se l'attributo selected è vuoto a causa di un evento di deselezione, la variabile viene impostata su false e la vista visualizza un contenitore nella vista senza l'elenco dei dettagli associati ai dati.

Obiettivi

In questa esercitazione verrà aggiornata l'interfaccia utente di un'applicazione Web Oracle JET in modo da poter visualizzare i dati Master-Detail. Verrà descritto come creare un handler di eventi JavaScript utilizzando un listener di modifica delle proprietà Oracle JET. Viene inoltre descritto come utilizzare un componente Oracle JET If Binding per visualizzare in modo condizionale la lista dei dettagli per gestire le selezioni di elenchi.

Prerequisiti

Task 1: Imposta comportamento selezione nella vista

Aggiornare la vista per personalizzare i componenti della vista elenco per gestire una selezione di righe nell'elenco Attività e Elementi attività. Il componente Vista lista Oracle JET definisce l'attributo first-selected-item popolato dal componente con gli elementi dati della selezione di righe dell'utente e che è possibile leggere in un osservabile mediante l'associazione bidirezionale. Utilizzare l'attributo on-selection-changed del componente per rilevare ed elaborare gli eventi di selezione/deselezione della lista mediante l'associazione di un listener di eventi definito in viewModel.

  1. Passare alla directory JET_Web_Application/src/ts/views e aprire il file dashboard.html in un editor.

  2. Sotto l'intestazione Attività, individuare l'elemento HTML personalizzato oj-list-view dove id="activitiesList", quindi aggiungere gli attributi di funzionamento selezione dopo l'attributo gridlines.item.

       
<h3 id="activitiesHeader">Activities</h3>
   <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
     data="[[activityDataProvider]]" gridlines.item="visible" selection-mode="single" selected="{{selectedActivity}}"
     on-first-selected-item-changed="[[selectedActivityChanged]]" first-selected-item="{{firstSelectedActivity}}"
     scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
     <template slot="itemTemplate">
. . .

  3. Sotto l'intestazione Elementi attività, individuare l'elemento HTML personalizzato oj-list-view dove id="itemsList", quindi aggiungere gli attributi di funzionamento selezione dopo l'attributo gridlines.item.

       
<h3 id="itemsListHeader">Activity Items</h3>
     <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader"
       gridlines.item="visible" selection-mode="single" selected="{{selectedItem}}"
       on-first-selected-item-changed="[[selectedItemChanged]]" first-selected-item="{{firstSelectedItem}}"
       scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
       <template slot="itemTemplate">
. . .

  4. Salvare il file dashboard.html.

    L'aspetto del file dovrebbe essere simile a event-task1-dashboard-html.txt.

Task 2: Creare handler di eventi in ViewModel

Aggiornare il file viewModel per aggiungere gli handler di eventi per i componenti della vista elenco per rispondere alle selezioni nell'elenco Attività e nell'elenco Elementi attività. Il componente Vista lista Oracle JET definisce un attributo selected in cui l'API vista lista Oracle JET definisce un listener delle modifiche delle proprietà. L'handler di eventi imposta gli osservabili selectedActivity e selectedItem quando l'utente effettua una selezione di elenchi e il valore dell'attributo selected viene modificato.

  1. Passare alla directory JET_Web_Application/src/ts/viewModels e aprire il file dashboard.ts in un editor.

  2. Sotto la definizione osservabile pieSeriesValue, prima di constructor() aggiungere gli osservabili per la selezione dell'elenco attività e la selezione dell'elenco degli elementi attività.

    class DashboardViewModel {
   . . . 
   pieSeriesValue: ko.ObservableArray;
   // Observables for Activities
   selectedActivity = new ObservableKeySet();
   activitySelected = ko.observable(false);  // Controls display of Activity Items
   firstSelectedActivity = ko.observable();
   selectedActivityIds = ko.observable();

   // Observables for Activity Items
   itemSelected = ko.observable(false);
   selectedItem = ko.observable();
   firstSelectedItem = ko.observable();

   constructor() {
   . . .

  3. Nella parte superiore del file dashboard.ts importare la classe ObservableKeySet dal modulo ojs/ojknockout-keyset e dalla classe ojListView dal modulo ojs/ojlistview.

    import * as ko from "knockout";
. . . 
import "ojs/ojavatar";
import { ObservableKeySet } from "ojs/ojknockout-keyset";
import { ojListView } from "ojs/ojlistview";

  4. Prima della classe DashboardViewModel, aggiungere l'alias di tipo ActivityItems.

    . . . 
type ActivityItems = {
   id: number;
   name: string;
   items: Array<Item>;
   short_desc: string;
   image: string;
};

class DashboardViewModel {
. . .

  5. Dopo la dichiarazione del metodo constructor() della classe DashboardViewModel, aggiungere l'handler di eventi selectedActivityChanged con le condizioni di test per gestire gli eventi di selezione e deselezione.

    } // End of constructor function

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
   *  If no items are selected then the firstSelectedItem property  returns an object 
   *  with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list

   } else {
         // If deselection, hide list          
   }
};

    Implementare questo handler di eventi nei passi successivi.

  6. Nell'istruzione if dell'handler di eventi selectedActivityChanged, popolare l'osservabile itemsDataProvider utilizzando la variabile itemsArray, quindi impostare gli osservabili di stato di selezione activitySelected e itemSelected su true per l'evento di selezione.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected, then this property firstSelectedItem 
    *  will return an object with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list
      // Hide currently-selected activity item
      this.activitySelected(false);

      let itemsArray = itemContext.items;
      this.itemsDataProvider.data = itemsArray;
      // Set List View properties
      this.activitySelected(true);
      this.itemSelected(false);
      this.selectedItem();
      this.itemData();

   } else {
         // If deselection, hide list
   }
};

  7. Nell'istruzione else del gestore eventi selectedActivityChanged, impostare gli osservabili dello stato di selezione activitySelected e itemSelected su false per l'evento di deselezione.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected then this property firstSelectedItem will return an 
    *  object with both key and data properties set to null.
   */

   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      . . .
   } 

   else {
      // If deselection, hide list
      this.activitySelected(false);
      this.itemSelected(false);
   }
};

  8. Dopo l'handler di eventi selectedActivityChanged, aggiungere un handler di eventi selectedItemChanged con le condizioni di test per gestire gli eventi di selezione e deselezione.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   . . .
};

/**
* Handle selection from Activity Items list
*/
selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

       // If selection, populate and display list
   }
   else {
   // If deselection, hide list
   }
};

    Implementare questo handler di eventi nei passi successivi.

  9. Nell'istruzione if dell'handler di eventi selectedItemChanged, inserire i dati nell'osservabile itemData, inserire i dati nell'osservabile pieSeriesValue utilizzando la variabile di array pieSeries, quindi impostare lo stato di selezione itemSelected osservabile su true per l'evento di selezione.

    selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

      // If selection, populate and display list
      this.itemData(event.detail.value.data);

      // Create variable and get attributes of the items list to set pie chart values
      let pieSeries = [
      { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
      { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
      ];
      // Update the pie chart with the data
      this.pieSeriesValue(pieSeries);

      this.itemSelected(true);

   }
   else {
   // If deselection, hide list

   }
};

  10. Nell'istruzione else del gestore eventi selectedItemChanged impostare lo stato di selezione itemSelected osservabile su false per l'evento di deselezione.

    selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   if (isClicked != null) {
   . . . 
   }
   else {
   // If deselection, hide list
   this.itemSelected(false);        
   }
};

  11. Salvare il file dashboard.ts.

    Il file dovrebbe avere un aspetto simile a final-event-dashboard-ts.txt.

Task 3: condizionale visualizzazione elenco nella vista

Aggiornare la vista utilizzando i componenti Oracle JET If Binding per visualizzare in modo condizionale la lista dei dettagli. Il componente Oracle JET If Binding accetta una variabile booleana nel relativo attributo test. All'interno di un componente Se associazione, nidificare il contenitore Elementi attività e, in un altro componente Se associazione, nidificare il contenitore Dettagli articolo. Utilizzare quindi i componenti If Binding per eseguire il test dello stato degli osservabili activitySelected e itemSelected. Il contenuto nidificato del componente Se associazione viene visualizzato se la condizione di test è true. Visualizzare l'elenco associato ai dati se l'osservabile è true, in base all'impostazione dell'handler di eventi elenco. Utilizzare un altro componente Se associazione per verificare se l'osservabile è false, quindi visualizzare un contenitore con un messaggio che indirizza l'utente a effettuare una selezione di elenchi.

  1. Passare alla directory JET_Web_Application/src/ts/views e aprire il file dashboard.html in un editor.

  2. Trovare l'elemento div in cui id="parentContainer2". Al di sopra, aggiungere la tag di apertura dell'elemento HTML personalizzato oj-bind-if, con l'attributo test impostato sullo stato dell'osservabile activitySelected.

    . . .
   </oj-list-view>
</div>
<oj-bind-if test="[[activitySelected()]]">
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
   <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
   <h3 id="itemsListHeader">Activity Items</h3>
. . .

    Quando l'utente seleziona un'attività dalla lista Attività, il gestore eventi viewModel Attività modificata imposta il valore dell'osservabile activitySelected su true. In questo caso, la condizione di test oj-bind-if viene soddisfatta e l'applicazione visualizza il contenitore Elementi attività per la selezione dell'attività. La notazione () sulla proprietà osservabile è la convenzione della funzione Knockout per ottenere il valore dell'osservabile invece di ottenere l'istanza dell'oggetto osservabile.

  3. Trovare l'elemento div in cui id="itemDetailsContainer" e sopra aggiunge la tag di apertura dell'elemento HTML personalizzato oj-bind-if, con l'attributo test impostato sullo stato dell'elemento osservabile itemSelected.

    . . .
   </oj-list-view>
</div>
<oj-bind-if test="[[itemSelected()]]">
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .

    Quando l'utente seleziona un elemento dall'elenco Elementi attività, il gestore eventi viewModel Elemento modificato imposta l'osservabile itemSelected su true. In questo caso, la condizione di test oj-bind-if viene soddisfatta e l'applicazione visualizza il contenitore Dettagli articolo per la selezione dell'elemento attività.

  4. Nella parte inferiore del file dashboard.html, contare due tag </div> di chiusura in alto, quindi aggiungere la tag </oj-bind-if> di chiusura in modo che corrisponda alla tag <oj-bind-if test ="[[activitySelected()]]"> di apertura. Conteggiare un'altra tag </div> di chiusura, quindi aggiungere la tag </oj-bind-if> di chiusura per la tag <oj-bind-if test ="[[itemSelected()]]"> di apertura.

    . . . 
            </oj-chart>
            </div>
         </div>
      </oj-bind-if>
      </div>
   </oj-bind-if>
   </div>
</div>

  5. Sotto il tag di chiusura </oj-bind-if> aggiunto, più vicino alla fine del file, inserire un elemento HTML personalizzato oj-bind-if test="[[!activitySelected()]]" che contiene un elemento div con le classi di supporto per il layout flessibile Oracle JET oj-flex-item oj-sm-6.

    . . . 
            </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>

    La classe dell'applicazione di supporto Oracle JET oj-sm-6 specifica che il contenitore per l'intestazione Select an Activity to see Items occupa sei colonne del contenitore per dimensioni di schermo piccole e grandi.

    Finché l'utente non seleziona un'attività, il valore osservabile di activitySelected è false. Allo stesso modo, se l'utente preme il tasto Ctrl e fa clic su un'attività già selezionata, viewModel considera questo evento come una deselezione e l'handler di eventi Attività modificata imposta activitySelected osservabile su false. In entrambi i casi, la condizione di test oj-bind-if viene soddisfatta dalla condizione booleana false e l'applicazione rende l'intestazione Select an Activity to see Items.

  6. Sotto il primo tag di chiusura </oj-bind-if> nel file, aggiungere un elemento HTML personalizzato oj-bind-if test ="[[!itemSelected()]]" che contiene un elemento div con le classi dell'applicazione di supporto per il layout Oracle JET oj-flex-item oj-sm-12 oj-md-6 flex.

    . . .
                  </oj-chart>
               </div>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!itemSelected()]]">
            <div class="oj-flex-item oj-sm-12 oj-md-6">
               <p>Select an Item to see details</p>
            </div>
         </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>

    Le classi dell'applicazione di supporto Oracle JET oj-sm-12 e oj-md-6 specificano che il contenitore per Select an Item per visualizzare l'intestazione dei dettagli occupa sei colonne del contenitore per dimensioni dello schermo medie e più grandi oppure occupa dodici colonne del contenitore per dimensioni dello schermo di piccole dimensioni.

    Finché l'utente non seleziona un elemento attività, il valore dell'osservabile itemSelected è false. Allo stesso modo, se l'utente preme il tasto Ctrl e fa clic su un elemento di attività già selezionato, viewModel considera l'evento come deselezionato e l'handler di eventi Articolo modificato imposta itemSelected osservabile su false. In entrambi i casi, la condizione di test oj-bind-if viene soddisfatta dalla condizione booleana false e l'applicazione rende l'intestazione Select an Item to see details.

  7. Salvare il file dashboard.html.

    L'aspetto del file deve essere simile a final-event-dashboard-html.txt.

Task 4: eseguire il test degli elenchi principale e dettagliato

  1. Nella finestra del terminale, passare alla directory JET_Web_Application ed eseguire l'applicazione.

    $ ojet serve

  2. Nel browser Web fare clic sull'attività Baseball nell'applicazione.

    La selezione dell'elenco Attività attiva l'handler di eventi selectedActivityChanged. Il contenitore Elementi attività viene visualizzato per l'attività selezionata.

    Elementi attività di cui è stato eseguito il rendering per l'attività di baseball

    Descrizione dell'immagine master_detail_list.png

  3. Nell'elenco Elementi attività fare clic su SureCatch Glove baseball.

    La selezione dell'elenco Elementi attività attiva l'handler di eventi selectedItemChanged. L'applicazione visualizza il contenitore Dettagli elemento per l'elemento selezionato.

    Elementi attività di cui è stato eseguito il rendering per l'attività di baseball

    Descrizione dell'immagine master_detail_item.png

  4. Nell'elenco Elementi attività, premere Ctrl e fare clic su SureCatch Glove baseball per deselezionarlo.

    La deselezione dell'elenco Elementi attività attiva l'handler di eventi selectedItemChanged. Il contenitore Dettagli elemento è nascosto.

    Deselezione di SureCatch Baseball Glove nasconde i dettagli dell'elemento

    Descrizione dell'immagine master_detail_list.png

  5. Ridimensionare il browser oppure premere Ctrl+Shift+I per attivare Chrome DevTools e selezionare una dimensione dello schermo più piccola, ad esempio Pixel 5, dall'emulatore dimensione dello schermo.

    I contenitori sono disposti secondo le dimensioni dello schermo.

    I contenitori riorganizzano per adattarli alle dimensioni di un piccolo schermo

    Descrizione dell'immagine resized_master_detail_list.png

  6. Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.

  7. Nella finestra del terminale premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch di strumenti Oracle JET.

Task 5: (facoltativo) eseguire un'applicazione Web da un'applicazione ripristinata

Se si desidera eseguire l'applicazione Web Oracle JET completata dal codice fornito, è possibile ripristinare l'applicazione dal file di archivio scaricato. Per utilizzare un'applicazione Oracle JET "stripped and zipped", è necessario ripristinare le dipendenze del progetto, compresi gli strumenti Oracle JET e le librerie e i moduli richiesti, all'interno dell'applicazione estratta.

  1. Scaricare il file jet_web_application_masterdetail_final.zip ed estrarre il contenuto dell'applicazione completata nella cartella jet_web_application_masterdetail_final.

  2. Nella finestra del terminale, accedere alla cartella jet_web_application_masterdetail_final e ripristinare l'applicazione Web Oracle JET.

    $ ojet restore

  3. Attendere la conferma.

    . . .
Success: Restore complete

    L'applicazione è pronta per essere eseguita.

  4. Eseguire l'applicazione Web ed eseguirne il test nel browser.

    $ ojet serve

  5. Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.

  6. Nella finestra del terminale premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch di strumenti Oracle JET.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di apprendimento gratuito sul canale Oracle Learning YouTube. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare il sito Oracle Help Center.