Detailansicht in einer Oracle JET-Webanwendung erstellen

Einführung

Oracle JavaScript Extension Toolkit-(Oracle JET-)Komponenten bewahren die hierarchische Beziehung von Master- und Detaildatenobjekten gemäß der Definition durch die Datenquelle auf. In viewModel für die Oracle JET-Webanwendung können Sie mit der Oracle JET-API ein Datenproviderobjekt erstellen. Das Objekt stellt ein Datenarray dar, das Sie aus den untergeordneten Datenobjekten eines JavaScript Object Notation-(JSON-)Dokumentspeichers auffüllen. Der Oracle JET-Datenprovider ruft die untergeordneten Datenobjekte basierend auf dem Schlüsselattribut id des aktuellen übergeordneten Datenobjekts ab. In der Ansicht für die Oracle JET-Webanwendung wird das Attribut data der Oracle JET List View-Komponente über einen Knockout-Befehl an den Datenprovider gebunden. Der beobachtbare Knockout wird auch im Quellcode viewModel der App deklariert. Dieser Code füllt die beobachtbare Instanz des Datenproviders der Detailliste auf.

Ziele

In diesem Tutorial lesen Sie hierarchische Masterdetaildaten aus einem lokalen JSON-Dokument und zeigen die Detailansicht in einer Oracle JET-Webanwendung an. Sie lernen, wie Sie Elemente der untergeordneten Datenobjekte zum Auffüllen einer Oracle JET-Listenansichtskomponente, mehrerer Oracle JET-Eingabetextkomponenten und einer Oracle JET-Diagrammkomponente binden.

Voraussetzungen

Eine Entwicklungsumgebung zum Erstellen von Oracle JET-Anwendungen mit der JavaScript-Laufzeit, Node.js und der neuesten installierten Oracle JET-Befehlszeilenschnittstelle
Abschluss des vorherigen Tutorials in diesem Lernpfad, sodass Sie den Ordner JET_Web_Application erstellt haben

Aufgabe 1: Daten binden die Liste der Aktivitätselementdetails in der Ansicht

Ersetzen Sie die Aktivitätselementliste, die an statische Daten gebunden ist, durch eine Oracle JET List View-Komponente, die an mehrere Datenelemente untergeordneter Objekte von Aktivitätselementen gebunden ist.

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

Suchen Sie das Element div mit id="container", und löschen Sie es und das darin enthaltene benutzerdefinierte Element oj-module.

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
    <div id="container">
      <oj-module config="[[moduleConfig]]"></oj-module>
    </div>
  </div>

<!-- Delete the div element with id="container" so that your code is similar to the following: -->

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">

  </div>
  . . . 

Fügen Sie im Element div, in dem id="activityItemsContainer" vorhanden ist, ein h3-Überschriftselement für die Aktivitätselementdetailliste hinzu.
```
<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <h3 id="itemsListHeader">Activity Items</h3>
</div>
```
Fügen Sie nach dem schließenden Tag des von Ihnen erstellten h3-Elements ein benutzerdefiniertes oj-list-view-HTML-Element hinzu, um die Detailliste für Aktivitätselemente und ein template-Element mit einem slot-Attribut anzuzeigen, das auf den Inhalt der Detailliste angewendet werden soll.
```
 <h3 id="itemsListHeader">Activity Items</h3>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
     <template slot="itemTemplate">

     </template>
   </oj-list-view>
```
Die Oracle JET-Listenansichtskomponente, die in einem Inline-HTML-Element template mit einem slot-Attribut als Platzhalter verwendet wird, instanziiert den Inhalt der Aktivitätselementdetailliste zur Laufzeit.
Fügen Sie im erstellten template-Element drei div-Elemente mit Code hinzu, um die Bild- und Namensdatenelemente für jedes untergeordnete Objekt der Aktivitätselemente zu binden.
```
<template slot="itemTemplate">
  <div class="oj-flex no-wrap">
    <span class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
    <div class="demo-content oj-flex-item">
      <div>
        <strong>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
        </strong>
      </div>
    </div>
  </div>
</template>
```
Der Code $current.data.image und $current.data.name bindet die Daten, und ein HTML-Element template zeigt ein Bild und einen Aktivitätselementnamen für die Aktivitätselementdetailliste an. Das Präfix $current stellt das aktuelle untergeordnete Objekt dar, das der Datenprovider für die Oracle JET List View-Komponente in die Vorlage übergibt.
Speichern Sie die Datei dashboard.html, und lassen Sie sie in Ihrem Editor geöffnet.

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

Aufgabe 2: Untergeordnete Objekte für Aktivitätselemente in ViewModel erstellen

Ersetzen Sie die Inline-Vorlage oj-module, die Sie im vorherigen Lernpfad erstellt haben, um die Liste "Aktivitätselemente" mit einem JSON-Dokumentaufruf anzuzeigen, um die untergeordneten Objekte "Aktivitätselemente" aus einem lokalen JSON-Dokument zu lesen. Erstellen Sie in itemsDataProvider eine Instanz einer Oracle JET-Klasse MutableArrayDataProvider, die ein Array von untergeordneten Objekten darstellt, die durch das JSON-Dokument definiert sind. Binden Sie dann die Instanz itemsArray an eine beobachtbare itemsDataProvider. Die Komponente "Oracle JET-Listenansicht" in der View referenziert diese beobachtbare Komponente im Attribut data, um die Detailliste der Aktivitätselemente anzuzeigen.

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

Deklarieren Sie oben in der Datei dashboard.ts nach der Typdeklaration von Activity den folgenden Item-Typ.

type Activity = {
   id: number;
};

type Item = {
   id: number;
   name: string;
   short_desc: string;
   price: number;
   quantity: number;
   quantity_shipped: number;
   quantity_instock: number;
   activity_id: number;
   image: string;
};
. . . 

Löschen Sie den Code aus der Deklaration von const lg_xl_view bis hin zur Deklaration von this.chartTypes. Der Codeblock endet mit einer Kommentarzeile, die End of oj-module code liest. Ein JSON-Dokumentaufruf ersetzt die statischen Daten und den Inline-Vorlagencode.

Die Datei sollte in etwa detail-list-task2a-dashboard-ts.txt aussehen.
Löschen Sie aus den Modulimporten oben in dashboard.ts die nicht verwendeten HtmlUtils-, ResponsiveUtils-, ResponsiveKnockoutUtils- und ojmodule-element-Importanweisungen.

Fügen Sie eine Importanweisung für das Modul ojs/ojavatar zur Importliste hinzu. Das Modul ojavatar unterstützt die Ansicht im nächsten Abschnitt dieses Tutorials.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import "ojs/ojavatar";

Fügen Sie nach der Definition this.activityDataProvider in der Funktion constructor Definitionen für activitiesArray und itemsArray hinzu. Deklarieren Sie dann this.itemsDataProvider als Instanz von MutableArrayDataProvider. Dadurch werden die Speicherdaten geparst und die untergeordneten Objekte des ersten übergeordneten Objekts "Aktivität" in der Komponente "Oracle JET-Listenansicht" verfügbar gemacht. Im nächsten Tutorial legen Sie das Aktivitätsobjekt mithilfe von Event Handlern dynamisch fest.

. . . 
let activitiesArray = JSON.parse(storeData);
let itemsArray = activitiesArray[0].items;

this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
  itemsArray,
  { keyAttributes: "id" }
  );

} // closing bracket of constructor function
. . . 

Entfernen Sie dann die nicht verwendeten Typannotationen für large und moduleConfig, und fügen Sie Typannotationen für itemsArray und itemsDataProvider hinzu.

class DashboardViewModel {
    chartTypes: Array<Object>;
    chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
    chartData: Array<Object>;
    chartDataProvider: MutableArrayDataProvider<string, {}>;
    activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
    val: ko.Observable<string>;
    itemsArray: Array<Object>;
    itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

Die Datei sollte in etwa detail-list-task2b-dashboard-ts.txt aussehen.

Aufgabe 3: Webanwendung ausführen

Mit dem Befehl ojet serve können Sie Änderungen an Ihrem App-Code vornehmen, die sofort im Webbrowser angezeigt werden.

Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Application, und führen Sie die App aus.
```
$ ojet serve
```
In der Registerkarte Dashboard zeigt der Webbrowser die datengebundene Detailliste mit dem Header Aktivitätselemente an.

Beschreibung der Abbildung formatted_master_detail_list.png
Lassen Sie das Terminalfenster und den Browser, in dem die Webanwendung geöffnet wird.

Aufgabe 4: Daten-Bind-Elementdetails und Tortendiagramm in der Ansicht

Ersetzen Sie die Tortendiagramme "Artikeldetails" und "Balken" durch die folgenden Elemente:

Eine Oracle JET Avatar-Komponente, die an das Elementbild eines untergeordneten Objekts mit Aktivitätselementen gebunden ist
Mehrere Komponenten für Oracle JET-Textfelder, die an die Datenelemente dieses untergeordneten Objekts für Aktivitätselemente gebunden sind
Eine Kreisdiagrammkomponente, die an Diagrammdatenelemente desselben untergeordneten Objekts für Aktivitätselemente gebunden ist

Suchen Sie in der Datei dashboard.html im Element div, wobei id="itemDetailsContainer" die Überschrift "Elementdetails". Fügen Sie unter der Überschrift eine horizontale Regel hinzu, gefolgt von einem benutzerdefinierten HTML-Element oj-avatar, das an das Bilddatenelement für ein untergeordnetes Aktivitätselement gebunden ist.
```
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
  <h3>Item Details</h3>
  <hr class="hr-margin" />
  <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
    :src="[[itemData().image]]" class="float-right">
  </oj-avatar>
```
Die beobachtbare Komponente itemData füllt die Oracle JET Avatar-Komponente mit einer Datenproviderinstanz auf, die Sie in der App viewModel erstellen. Die Funktion itemData().image ist die beobachtbare Knockout-Notation zum Lesen des aktuellen Wertes eines Datenelements. Das Datenelement wird durch die Eigenschaft image des untergeordneten Objekts "Aktivitätselemente" identifiziert.
Löschen Sie in dashboard.html unter dem schließenden Tag des von Ihnen erstellten oj-avatar-Elements das benutzerdefinierte HTML-Element oj-label for="basicSelect" und das Element oj-select-single.
Fügen Sie unter dem schließenden Tag des von Ihnen erstellten oj-avatar-Elements vier div-Elemente mit benutzerdefinierten oj-bind-text-HTML-Elementen hinzu, die an den Namen, die Kurzbeschreibung, den Preis und die ID-Datenelemente eines untergeordneten Objekts "Aktivitätselemente" gebunden sind.
```
. . . 
</oj-avatar>
  <div id="itemName" class="data-name">
    <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
  </div>
  <div id="itemDesc" class="data-desc">
    <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
  </div>
  <div id="itemPrice">
    <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
  </div>
  <div id="itemId">
    <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
  </div>
. . . 
```
Die itemData-Beobachtungen füllen die Oracle JET Text-Binding-Komponente mit einem Datenprovider auf, den Sie in der App viewModel erstellen. Die Funktion itemData().<prop_name> liest den aktuellen Wert des benannten Datenelements. Die Datenelemente werden durch die Eigenschaften name, short_desc, price und id des untergeordneten Objekts "Aktivitätselemente" identifiziert.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/css, und öffnen Sie die Datei app.css, um die folgenden Stildefinitionen hinzuzufügen.

.hr-margin {
  margin-top: 12px;
}

.data-name {
  font-size: 20px;
  font-weight: bolder;
}

.data-desc {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

Die Datei sollte in etwa app-css-final.txt aussehen.

Löschen Sie unter den von Ihnen erstellten div-Elementen das benutzerdefinierte HTML-Element oj-chart id="barChart".
Fügen Sie nach dem schließenden </div>-Tag des Elements div id="itemId" ein neues div-Element und ein benutzerdefiniertes oj-chart-HTML-Element hinzu, das an eine Kreisdiagrammreihe für ein untergeordnetes Aktivitätselement gebunden ist.
```
. . . 
<div id="itemId">
  <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
</div>
<div>
  <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
    animation-on-data-change="auto"
    hover-behavior="dim" legend.position="bottom" class="chartStyle">
  </oj-chart>
</div>
. . . 
```
Die beobachtbare Komponente pieSeriesValue füllt die Komponente "Oracle JET-Kreisdiagramm" mit einem Datenarray auf, das Sie in der App viewModel erstellen.
Speichern Sie die Datei dashboard.html.

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

Aufgabe 5: Beobachtbare Elemente für Artikeldetails und Tortendiagrammkomponenten in der ViewModel festlegen

Rufen Sie ein Datenelement aus dem untergeordneten Objekt "Aktivitätselemente" ab, und füllen Sie Observables in Data Bind-View-Komponenten auf. In der Ansicht referenziert das Attribut value der verschiedenen Elementdetailkomponenten die beobachtbare itemData. Und das Attribut series der Komponente "Kreisdiagramm" verweist auf die beobachtbare pieSeriesValue-Bindung, die an Diagrammdaten desselben Datenelements gebunden ist.

Löschen Sie in der Datei dashboard.ts den Codeblock, der mit this.val beginnt und mit this.chartTypesDP endet. Löschen Sie auch die nicht verwendeten Typannotationen für die entfernten Variablen. Der Typ "Annotations" und der Anfang der constructor()-Funktion sollten dem folgenden Beispiel ähneln.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

  constructor() {
    this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
    >(JSON.parse(storeData), {
      keyAttributes: "id",
    });
. . . 

Fügen Sie die Annotationen vom Typ itemData und pieSeriesValue zur Klasse DashboardViewModel hinzu.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
  itemData: ko.Observable<any>;
  pieSeriesValue: ko.ObservableArray;

  constructor() {
. . . 

Legen Sie nach der Anweisung this.itemsDataProvider itemData mit einer Referenz auf das erste übergeordnete Objekt "Aktivität" und das erste untergeordnete Objekt "Aktivitätselement" fest, das dieser Aktivität im JSON-Dokument zugeordnet ist.

  this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
    itemsArray,
    { keyAttributes: "id" }
  );

  this.itemData = ko.observable(''); 
  this.itemData(activitiesArray[0].items[0]);

}   // End of constructor function

Schließlich legen Sie unter der beobachtbaren itemData-Deklaration die Option this.pieSeriesValue fest.

this.itemData = ko.observable(''); 
this.itemData(activitiesArray[0].items[0]);

this.pieSeriesValue = ko.observableArray([]);

let pieSeries = [
  { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
  { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
];
this.pieSeriesValue(pieSeries);

Aufgabe 6: Master- und Detaillisten anzeigen

Kehren Sie zum Browser zurück, um die Änderungen in Ihrer Webanwendung anzuzeigen.

Auf der Registerkarte "Dashboard" Ihrer Webanwendung werden die datengebundenen Oracle JET-Textfelder, der Avatar und das Tortendiagramm im Container "Artikeldetails" angezeigt. Die Listen antworten jedoch nicht auf die Auswahl. Im nächsten Tutorial fügen die von Ihnen erstellten Event Handler Auswahlfunktionen hinzu.

Beschreibung der Abbildung formatted_master_detail_items_list.png
Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.
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.

Titel und Copyright-Informationen

Create the detail view in an Oracle JET web app

F53174-01

February 2022