Auswahlereignisse in einer Oracle JET-Webanwendung verarbeiten

Einführung

Mit der Oracle JavaScript Extension Toolkit-(Oracle JET-)API in der viewModel der Oracle JET-Web-App können Sie Event Handler erstellen, die auf den selected-Attributänderungs-Listener der Oracle JET List View-Komponente reagieren. Wenn der Benutzer ein Element in der Liste auswählt oder abwählt, löst der Change Listener den Event Handler aus. Mit dem Event Handler können Sie den Oracle JET-Datenprovider auffüllen, und Sie können den Datenprovider an Beobachtungen binden, die von der View-Komponente verwendet werden können. Der Event Handler kann auch die boolesche Variable festlegen, die von der Oracle JET If Binding-Komponente verwendet wird, um ihre verschachtelten HTML-Elemente in der View bedingt darzustellen. Wenn das Attribut selected der Komponente "Oracle JET-Listenansicht" für die Masterliste nicht leer ist, wird die Variable auf true gesetzt, und die View gibt die datengebundene Detailliste wieder. Wenn das Attribut selected aufgrund eines Auswahlereignisses leer ist, wird die Variable auf "false" gesetzt, und die Ansicht gibt einen Container in der Ansicht ohne die datengebundene Detailliste wieder.

Ziele

In diesem Tutorial aktualisieren Sie die Benutzeroberfläche einer Oracle JET-Webanwendung, sodass Sie Masterdetaildaten anzeigen können. Sie lernen, wie Sie einen JavaScript-Event Handler mit einem Oracle JET-Eigenschaftsänderungs-Listener erstellen. Außerdem erfahren Sie, wie Sie eine Oracle JET If Binding-Komponente verwenden, um die Detailliste bedingt zur Verarbeitung der Listenauswahl anzuzeigen.

Voraussetzungen

Aufgabe 1: Auswahlverhalten in der Ansicht festlegen

Aktualisieren Sie die Ansicht, um die Komponenten der Listenansicht so anzupassen, dass eine Zeilenauswahl in der Liste "Aktivitäten" und der Liste "Aktivitätselemente" verarbeitet wird. Die Oracle JET-Listenansichtskomponente definiert das Attribut first-selected-item, das die Komponente mit den Datenelementen der Zeilenauswahl des Benutzers füllt und das Sie mit einem wechselseitigen Binding in eine beobachtbare Komponente lesen können. Mit dem Attribut on-selection-changed der Komponente können Sie Listenauswahl-/Auswahlereignisse abfangen und verarbeiten, indem Sie einen Ereignis-Listener binden, den Sie in viewModel definieren.

  1. Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.

  2. Suchen Sie unter der Überschrift "Aktivitäten" das benutzerdefinierte HTML-Element oj-list-view, in dem id="activitiesList" enthalten ist, und fügen Sie dann die Auswahlverhaltensattribute nach dem Attribut gridlines.item hinzu.

       
<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. Suchen Sie unter der Überschrift "Aktivitätselemente" das benutzerdefinierte HTML-Element oj-list-view, in dem id="itemsList" vorhanden ist, und fügen Sie dann die Auswahlverhaltensattribute nach dem Attribut gridlines.item hinzu.

       
<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. Speichern Sie die Datei dashboard.html.

    Die Datei sollte in etwa event-task1-dashboard-html.txt aussehen.

Aufgabe 2: Event Handler in ViewModel erstellen

Aktualisieren Sie viewModel, um Ereignis-Handler für die Komponenten der Listenansicht hinzuzufügen, um auf die Auswahl in der Aktivitätsliste und der Aktivitätselementliste zu reagieren. Die Oracle JET List View-Komponente definiert ein selected-Attribut, für das die Oracle JET List View-API einen Eigenschaftsänderungs-Listener definiert. Der Event Handler legt die Beobachtungen selectedActivity und selectedItem fest, wenn der Benutzer eine Listenauswahl vornimmt und sich der Wert des Attributs selected ändert.

  1. Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/viewModels, und öffnen Sie die Datei dashboard.ts in einem Editor.

  2. Fügen Sie unter der beobachtbaren Definition pieSeriesValue vor der constructor() Beobachtungsdateien für die Auswahl der Aktivitätsliste und die Auswahl der Aktivitätselementeliste hinzu.

    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. Importieren Sie oben in der Datei dashboard.ts die Klasse ObservableKeySet aus dem Modul ojs/ojknockout-keyset und die Klasse ojListView aus dem Modul ojs/ojlistview.

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

  4. Fügen Sie vor der Klasse DashboardViewModel den Aliasnamen des Typs ActivityItems hinzu.

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

class DashboardViewModel {
. . .

  5. Fügen Sie nach der Deklaration der Methode constructor() der Klasse DashboardViewModel den Event Handler selectedActivityChanged mit Testbedingungen hinzu, um die Auswahl- und Auswahlereignisse zu verarbeiten.

    } // 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          
   }
};

    Implementieren Sie diesen Event Handler in den nächsten Schritten.

  6. Füllen Sie in der if-Anweisung des selectedActivityChanged-Ereignis-Handlers die beobachtbare Datei itemsDataProvider mit der Variablen itemsArray auf, und legen Sie dann die Beobachtungen für den Auswahlstatus activitySelected und itemSelected für das Auswahlereignis auf true fest.

    
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. Setzen Sie in der else-Anweisung des selectedActivityChanged-Ereignis-Handlers die Auswahlstatusarten activitySelected und itemSelected für das Auswahlereignis auf false.

    
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. Fügen Sie nach dem Ereignis-Handler selectedActivityChanged einen selectedItemChanged-Ereignis-Handler mit Testbedingungen hinzu, um die Auswahl- und Auswahlereignisse zu verarbeiten.

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

    Implementieren Sie diesen Event Handler in den nächsten Schritten.

  9. Füllen Sie in der if-Anweisung des selectedItemChanged-Ereignis-Handlers die beobachtbare itemData-Datei auf, füllen Sie die beobachtbare pieSeriesValue mit der Arrayvariablen pieSeries aus, und legen Sie dann den itemSelected-Auswahlstatus fest, der für das Auswahlereignis auf true beobachtet werden kann.

    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. Setzen Sie in der else-Anweisung des selectedItemChanged-Ereignis-Handlers den Auswahlstatus itemSelected auf false für das Auswahlereignis.

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

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

  11. Speichern Sie die Datei dashboard.ts.

    Die Datei sollte in etwa final-event-dashboard-ts.txt aussehen.

Aufgabe 3: Listen-Rendering in der Ansicht bedingten

Aktualisieren Sie die View mit Oracle JET If Binding-Komponenten, um die Detailliste bedingt wiederzugeben. Die Oracle JET If Binding-Komponente nimmt eine boolesche Variable für das Attribut test an. Verschachteln Sie innerhalb einer If-Binding-Komponente den Container "Aktivitätselemente", und verschachteln Sie in einer anderen If-Binding-Komponente den Container "Artikeldetails". Verwenden Sie dann die If Binding-Komponenten, um den Status der Beobachtungen activitySelected und itemSelected zu testen. Der verschachtelte Inhalt der If Binding-Komponente wird wiedergegeben, wenn die Testbedingung true ist. Zeigen Sie die datengebundene Liste an, wenn der beobachtbare Wert true ist, wie vom Listenereignis-Handler festgelegt. Verwenden Sie eine andere If Binding-Komponente, um zu testen, ob die beobachtbare Komponente false ist, und zeigen Sie dann einen Container mit einer Nachricht an, die den Benutzer anweist, eine Listenauswahl vorzunehmen.

  1. Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.

  2. Suchen Sie das Element div mit id="parentContainer2". Fügen Sie darüber das Eröffnungs-Tag des benutzerdefinierten HTML-Elements oj-bind-if hinzu, wobei das Attribut test auf den Status activitySelected gesetzt werden kann.

    . . .
   </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>
. . .

    Wenn der Benutzer eine Aktivität aus der Liste "Aktivitäten" auswählt, setzt der Ereignis-Handler viewModel Activity Changed den Wert von activitySelected auf true. In diesem Fall wird die Testbedingung oj-bind-if erfüllt, und die App stellt den Aktivitätselementcontainer für die Aktivitätsauswahl wieder her. Die Notation () auf der beobachtbaren Eigenschaft ist die Knockout-Funktionskonvention, um den Wert des beobachtbaren Objekts zu erhalten, anstatt die Instanz des beobachtbaren Objekts abzurufen.

  3. Suchen Sie das Element div, in dem id="itemDetailsContainer" und darüber das Eröffnungs-Tag des benutzerdefinierten HTML-Elements oj-bind-if mit dem Attribut test, das auf den Status itemSelected gesetzt ist.

    . . .
   </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>
. . .

    Wenn der Benutzer ein Element aus der Liste "Aktivitätselemente" auswählt, setzt der Ereignis-Handler viewModel "Element geändert" itemSelected auf true. In diesem Fall wird die Testbedingung oj-bind-if erfüllt, und die App stellt den Container "Artikeldetails" für die Aktivitätselementauswahl wieder her.

  4. Zählen Sie unten in der Datei dashboard.html zwei schließende </div>-Tags, und fügen Sie dann das schließende </oj-bind-if>-Tag hinzu, das mit dem öffnenden <oj-bind-if test ="[[activitySelected()]]">-Tag übereinstimmt. Zählen Sie ein weiteres schließendes </div>-Tag, und fügen Sie dann das schließende </oj-bind-if>-Tag für das öffnende <oj-bind-if test ="[[itemSelected()]]">-Tag hinzu.

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

  5. Fügen Sie unter dem von Ihnen hinzugefügten schließenden </oj-bind-if>-Tag am Ende der Datei ein benutzerdefiniertes oj-bind-if test="[[!activitySelected()]]"-HTML-Element ein, das ein div-Element mit Oracle JET oj-flex-item oj-sm-6-Flexlayout-Helper-Klassen enthält.

    . . . 
            </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>

    Die Oracle JET oj-sm-6-Helper-Klasse gibt an, dass der Container für die Überschrift Select an Activity to see Items sechs Containerspalten für kleine und größere Bildschirmgrößen einnimmt.

    Bis der Benutzer eine Aktivität auswählt, ist der Wert von activitySelected sichtbar false. Wenn der Benutzer die Strg-Taste gedrückt und auf eine bereits ausgewählte Aktivität klickt, behandelt viewModel dieses Ereignis als Auswahl, und der Activity Changed Event Handler setzt activitySelected auf false. In beiden Fällen wird die Testbedingung oj-bind-if durch die boolesche Bedingung false erfüllt, und die App gibt die Überschrift Select an Activity to see Items wieder.

  6. Fügen Sie unter dem ersten schließenden </oj-bind-if>-Tag in der Datei ein benutzerdefiniertes oj-bind-if test ="[[!itemSelected()]]"-HTML-Element hinzu, das ein div-Element mit Oracle JET oj-flex-item oj-sm-12 oj-md-6 flex-Layout-Helper-Klassen enthält.

    . . .
                  </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>

    Die Oracle JET oj-sm-12- und oj-md-6-Helper-Klassen geben an, dass der Container für die Select an Item-Datei zur Anzeige der Detailüberschrift sechs Containerspalten für mittlere und größere Bildschirmgrößen oder zwölf Containerspalten für kleine Bildschirmgrößen einnimmt.

    Bis der Benutzer ein Aktivitätselement auswählt, ist der Wert der beobachtbaren Datei itemSelected false. Wenn der Benutzer die Strg-Taste gedrückt und auf ein bereits ausgewähltes Aktivitätselement klickt, behandelt viewModel dieses Ereignis als Auswahl, und der Item Changed Event Handler setzt itemSelected auf false. In beiden Fällen wird die Testbedingung oj-bind-if durch die boolesche Bedingung false erfüllt, und die App gibt die Überschrift Select an Item to see details wieder.

  7. Speichern Sie die Datei dashboard.html.

    Die Datei sollte in etwa final-event-dashboard-html.txt aussehen.

Aufgabe 4: Master- und Detaillisten testen

  1. Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Application, und führen Sie die App aus.

    $ ojet serve

  2. Klicken Sie im Webbrowser auf die Baseball-Aktivität in Ihrer App.

    Die Listenauswahl Aktivitäten löst den Ereignis-Handler selectedActivityChanged aus. Der Container Aktivitätselemente wird für die ausgewählte Aktivität wiedergegeben.

    Aktivitätselemente für die Baseball-Aktivität

    Beschreibung der Abbildung master_detail_list.png

  3. Klicken Sie in der Liste Aktivitätselemente auf SureCatch Baseball Glove.

    Die Listenauswahl Aktivitätselemente löst den Ereignis-Handler selectedItemChanged aus. Die App gibt den Container Artikeldetails für den ausgewählten Artikel wieder.

    Aktivitätselemente für die Baseball-Aktivität

    Beschreibung der Abbildung master_detail_item.png

  4. Drücken Sie in der Liste Aktivitätselemente die Strg-Taste, und klicken Sie auf SureCatch Baseballhandschuh, um die Auswahl aufzuheben.

    Die Auswahl der Liste Aktivitätselemente löst den Ereignis-Handler selectedItemChanged aus. Der Container Artikeldetails ist ausgeblendet.

    Wenn Sie die Auswahl von SureCatch Baseball Glove aufheben, werden Artikeldetails ausgeblendet

    Beschreibung der Abbildung master_detail_list.png

  5. Ändern Sie die Größe des Browsers, oder drücken Sie Ctrl+Shift+I, um Chrome DevTools aufzurufen, und wählen Sie eine kleinere Bildschirmgröße aus, wie z.B. Pixel 5, aus dem Bildschirmgrößenemulator.

    Die Behälter sind je nach Bildschirmgröße angeordnet.

    Die Container werden neu an eine kleine Bildschirmgröße angepasst

    Beschreibung der Abbildung resized_master_detail_list.png

  6. Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.

  7. Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.

Aufgabe 5: (Optional) Webanwendung aus einer wiederhergestellten App ausführen

Wenn Sie die abgeschlossene Oracle JET-Webanwendung aus dem angegebenen Code ausführen möchten, können Sie die App aus der heruntergeladenen Archivdatei wiederherstellen. Um mit einer Oracle JET-App zu arbeiten, müssen Sie Projektabhängigkeiten, einschließlich Oracle JET-Tooling und der erforderlichen Librarys und Module, innerhalb der extrahierten App wiederherstellen.

  1. Laden Sie die Datei jet_web_application_masterdetail_final.zip herunter, und extrahieren Sie den Inhalt der abgeschlossenen App in den Ordner jet_web_application_masterdetail_final.

  2. Navigieren Sie im Terminalfenster zum Ordner jet_web_application_masterdetail_final, und stellen Sie die Oracle JET-Webanwendung wieder her.

    $ ojet restore

  3. Warten Sie auf eine Bestätigung.

    . . .
Success: Restore complete

    Die App kann jetzt ausgeführt werden.

  4. Führen Sie die Webanwendung aus, und testen Sie sie im Browser.

    $ ojet serve

  5. Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.

  6. Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.

Weitere Lernressourcen

Sehen Sie sich andere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere Inhalte für kostenloses Lernen im Oracle Learning YouTube-Kanal zu. Außerdem besuchen Sie education.oracle.com/learning-explorer, um Oracle Learning Explorer zu werden.

Produktdokumentation finden Sie im Oracle Help Center.