Detailansicht in einer virtuellen Oracle JET-DOM-App erstellen

Einführung

Oracle JavaScript Extension Toolkit-(Oracle JET-)Komponenten bewahren die hierarchische Beziehung von Master- und Detaildatenobjekten, wie von der Datenquelle definiert. Im vorherigen Tutorial haben Sie ein Datenproviderobjekt mit einer Instanz der Klasse MutableArrayDataProvider erstellt. Mit props haben Sie das Datenproviderobjekt an die Komponente "Listenansicht" in der Komponente ActivityContainer übergeben und die Datenelemente wiedergegeben. Jetzt erstellen Sie mit demselben JSON-Datenspeicher die Detailansicht Ihrer App, indem Sie die Komponenten ActivityItemContainer bzw. ItemDetailContainer mit den Aktivitätselementen einer bestimmten Aktivität und den spezifischen Artikeldetails eines Aktivitätselements auffüllen, indem Sie diese Daten mit props aus einem übergeordneten Container übergeben.

Ziele

In diesem Tutorial lesen Sie hierarchische Masterdetaildaten aus einem lokalen JSON-Dokument und zeigen die Detailansicht in einer virtuellen Oracle JET-DOM-App an. Sie binden mehrere Elemente der untergeordneten Datenobjekte aus einem lokalen JSON-Dokument und füllen die Zeilen einer Oracle JET-Listenansichtskomponente in der Komponente ActivityItemContainer mit diesen Daten sowie die Oracle JET Avatar- und Diagrammkomponenten in der Komponente ItemDetailContainer auf.

Voraussetzungen

Eine Entwicklungsumgebung zum Erstellen virtueller Oracle JET-DOM-Apps, die eine Installation von Node.js umfasst
Abschluss des vorherigen Tutorials in diesem Lernpfad: Masteransicht in einer Oracle JET Virtual DOM-App erstellen

Aufgabe 1: Datenprovider in übergeordnetem Container 2 erstellen

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components, und öffnen Sie die Datei ParentContainer2.tsx in einem Editor.

Fügen Sie oben in der Datei import-Anweisungen für die Klasse MutableArrayDataProvider und die JSON-Daten in der Datei store_data.json hinzu.

 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
 import * as storeData from "text!./store_data.json";

Erstellen Sie Aliasnamen vom Typ Item und ActivityItem.

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

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

Fügen Sie eine activityItemDP-Instanz einer MutableArrayDataProvider sowie zwei Variablen hinzu, mit denen der Datenprovider die Elemente der Baseballaktivität aus der JSON-Datenquelle erhält.

 const activityData = JSON.parse(storeData);
 let activityItemsArray = activityData[0].items

 // Create data provider instance for the array of activity items for the Baseball activity
 const activityItemDP = new MutableArrayDataProvider<ActivityItem["id"], ActivityItem>(activityItemsArray, {
   keyAttributes: "id",
 });

Fügen Sie in der Funktion ParentContainer2 dem Element ActivityItemContainer ein Attribut data hinzu, um das Datenproviderobjekt mit props an die Komponente ActivityItemContainer zu übergeben.
```
 <ActivityItemContainer data={activityItemDP} />
```
Speichern Sie die Datei. Ihr Code sollte ungefähr wie parent-container2-1-tsx.txt aussehen.

Aufgabe 2: Listenansichtskomponente des Aktivitätsartikelcontainers erstellen

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/ActivityItem, und öffnen Sie die Datei ActivityItemContainer.tsx in einem Editor.
Löschen Sie oben in der Datei die import-Anweisungen für das Modul ResponsiveUtils und die Hooks useRef, useState und useEffect. Löschen Sie auch die Variable sm_md_view.

Entfernen Sie innerhalb der Funktion ActivityItemContainer Code, der Hooks und Status verwendet und die bedingte Anzeige von Inhalt in der Anweisung return aktiviert. Ihre Funktion sollte dem folgenden Code ähneln.

 const ActivityItemContainer = () => {

   return (
     <div
       id="activityItemsContainer"
       class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
       <div id="container" class="item-display no-wrap">
         <h3>Activity Items</h3>
         <ul>
           <li class="li-item">Louisville Slugger Bat</li>
           . . .
         </ul>
       </div>
     </div>
   );
 };

Löschen Sie das Element ul aus der return-Anweisung, und entfernen Sie im Element div, wobei id="container" das Attribut class entfernt. Die Funktion ActivityItemContainer sollte dem folgenden Code ähneln.

 const ActivityItemContainer = () => {

   return (
     <div
       id="activityItemsContainer"
       class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
       <div id="container">
         <h3>Activity Items</h3>
       </div>
     </div>
   );
 };

Fügen Sie die folgenden import-Anweisungen für die Oracle JET List View-Komponente und die MutableArrayDataProvider-Klasse am Anfang der Datei hinzu.

 import "ojs/ojlistview";
 import { ojListView } from "ojs/ojlistview";
 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

Fügen Sie die Aliasnamen vom Typ Props, ActivityItem und Item unter dem Block von import-Anweisungen hinzu.

 type Props = {
   data?: MutableArrayDataProvider<ActivityItem["id"], ActivityItem>;
   value?: string;
 };

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

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

Erstellen Sie die Funktion listItemRenderer, die jedes Listenelement wiedergibt und span- und div-Elemente enthält, um die Zeilen der Komponente "Listenansicht" mit einem Hintergrundbild, einem Namen und einer Kurzbeschreibung zu füllen.

 const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
   const image = item.data.image.replace("css", "styles");
   return (
     <div class="oj-flex no-wrap">
       <span
         class="demo-thumbnail oj-flex-item"
         style={"background-image:url(" + image + ")"}></span>
       <div class="demo-content oj-flex-item">
         <div>
           <strong>{item.data.name}</strong>
         </div>
         <span class="demo-metadata">{item.data.short_desc}</span>
       </div>
     </div>
   );
 };

Fügen Sie unter der Funktion listItemRenderer einen Alias des Typs ListViewProps und zwei Variablen hinzu, um die Rasterlinien- und Bildlaufeigenschaften für die Komponente "Listenansicht" zu definieren.

 type ListViewProps = ComponentProps<"oj-list-view">;
 const gridlinesItemVisible: ListViewProps["gridlines"] = { item: "visible" };
 const scrollPolicyOpts: ListViewProps["scrollPolicyOptions"] = { fetchSize: 5 };

Fügen Sie props zur Funktionsdefinition ActivityItemContainer hinzu.
```
 const ActivityItemContainer = (props: Props) => {
```

Fügen Sie innerhalb der return-Anweisung der ActivityItemContainer-Funktion eine Oracle JET-Listenansichtskomponente hinzu, in der das Datenproviderobjekt, das von ParentContainer2 übergeben wird, über props im Attribut data der Listenansicht aufgerufen wird.

return (
  <div
    id="activityItemsContainer"
    class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
    <div id="container">
      <h3>Activity Items</h3>
      <oj-list-view
        id="activitiesList"
        class="item-display"
        aria-labelledby="activitiesHeader"
        data={props.data}
        gridlines={gridlinesItemVisible}
        selectionMode="single"
        scrollPolicy="loadMoreOnScroll"
        scrollPolicyOptions={scrollPolicyOpts}>
      </oj-list-view>
    </div>
  </div>
 );

Fügen Sie in der Komponente "Listenansicht" ein template-Element mit einem slot-Attribut hinzu, um jedes Element in der Liste wiederzugeben.
```
. . .
    <template slot="itemTemplate" render={listItemRenderer}></template>
</oj-list-view>
```
Speichern Sie die Datei. Ihr Code sollte ungefähr wie activity-item-container-1-tsx.txt aussehen.

Aufgabe 3: Virtuelle DOM-App ausführen

Navigieren Sie im Terminalfenster zum Verzeichnis JET_Virtual_DOM_app, und führen Sie die Anwendung aus.
```
 npx ojet serve
```
Die App wird im Webbrowser ausgeführt, und in der Liste "Aktivitätselemente" werden die Baseball-Aktivitätselemente mit ihren kurzen Beschreibungen und Miniaturansichten angezeigt.
Lassen Sie das Terminalfenster und den Browser, der Ihre App anzeigt, geöffnet.

Aufgabe 4: Artikeldetaildiagramm und Avatarkomponenten erstellen

Übergeben Sie die Artikeldetails des Aktivitätselements SureCatch Baseball Glove von der Komponente ParentContainer2 an die Komponente ItemDetailContainer über props. Binden Sie die Daten an die Oracle JET Chart- und Avatar-Komponenten sowie an mehrere Textfelder.

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components, und öffnen Sie die Datei ParentContainer2.tsx in einem Editor.
Fügen Sie unter der Instanz activityItemDP eine Variable specificItem hinzu, um die Artikeldetaildaten für das Aktivitätselement SureCatch Baseball Glove zu speichern.
```
 // Create an object variable holding the item details for the SureCatch Baseball Glove 
 const specificItem: Item = activityData[0].items[0]
```
Fügen Sie dem Element ItemDetailContainer ein Attribut item hinzu, um die Artikeldetails über props an die untergeordnete Komponente weiterzuleiten.
```
 <ItemDetailContainer item={specificItem} />
```
Speichern Sie die Datei. Ihr Code sollte ungefähr wie parent-container2-2-tsx.txt aussehen.
Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/ItemDetailContainer, und öffnen Sie die Datei ItemDetailContainer.tsx in einem Editor.

Entfernen Sie diese import-Anweisungen vom Anfang der Datei.

 import { useState, useCallback } from "preact/hooks";
 import "ojs/ojlabel";
 import "ojs/ojselectsingle";
 import { ojSelectSingle } from "ojs/ojselectsingle";
 import * as storeData from "text!../store_data.json";
 import "ojs/ojlistview";
 import { ojListView } from "ojs/ojlistview";
 import "ojs/ojlistitemlayout";

Fügen Sie eine import-Anweisung für das Modul ojavatar hinzu.
```
 import "ojs/ojavatar";
```
Entfernen Sie den Alias des Typs ChartType, die Variablen chartTypeData und chartData sowie die Datenproviderinstanzen chartTypesDP und chartDataProvider.

Fügen Sie Aliasnamen vom Typ Props und Item hinzu.

 type Props = {
   item?: Item;
 };

 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 innerhalb der Funktion ItemDetailContainer die folgenden Codezeilen.

 const [val, setVal] = useState("bar" as ChartProps['type']);

 const valChangeHandler = useCallback(
   (event: ojSelectSingle.valueChanged<ChartType['value'], ChartType>) => {
     setVal(event.detail.value as ChartProps['type']);
   },
   [val, setVal]
 );

Ersetzen Sie die Vorlagenvariable chartItem.

const chartItem = (
  item: ojChart.ItemTemplateContext<ChartItem["id"], ChartItem>
) => {
  return (
    <oj-chart-item
      value={item.data.value}
      groupId={[0]}
      seriesId={item.data.series}
    ></oj-chart-item>
  );
};

Fügen Sie props zur Funktionsdefinition ItemDetailContainer hinzu.
```
const ItemDetailContainer = (props: Props) => {
```

Fügen Sie eine pieDataProvider-Instanz einer MutableArrayDataProvider vor der return-Anweisung hinzu.

const pieDataProvider: MutableArrayDataProvider<ChartItem["id"], ChartItem> = new MutableArrayDataProvider(
  [
    { series: "Quantity in Stock", value: props.item.quantity_instock },
    { series: "Quantity shipped", value: props.item.quantity_shipped },
  ],
  { keyAttributes: "id" }
);

Löschen Sie innerhalb der return-Anweisung unter der Überschrift h3 für Artikeldetails die Elemente oj-label und oj-select-single. Ersetzen Sie diesen Code durch eine horizontale Regel, ein oj-avatar-Element und div-Elemente, um datengebundene Elementdetails anzuzeigen.

<hr class="hr-margin" />
<oj-avatar role="img" size="lg" aria-label={"product image for" + props.item.name} 
    src={props.item?.image?.replace("css", "styles")} class="float-right"></oj-avatar>
<div id="itemName" class="data-name">{props.item.name}</div>
<div id="itemDesc" class="data-desc">{props.item.short_desc}</div>
<div id="itemPrice">{"Price: " + props.item.price + " each"}</div>
<div id="itemId">{"Item Id: " + props.item.id}</div>

Ersetzen Sie die Attribute id, type und data im Element oj-chart. Fügen Sie auch ein div-Element hinzu, das das oj-chart-Element umgibt.

<div>
  <oj-chart id="pieChart" type="pie" data={pieDataProvider} animationOnDisplay="auto"
            animationOnDataChange="auto" hoverBehavior="dim" class="chartStyle">
    <template slot="itemTemplate" render={chartItem}></template>
    </oj-chart>
   </div>
  </div>
 );
};

Speichern Sie die Datei. Ihr Code sollte ungefähr wie item-detail-container-tsx.txt aussehen.

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/styles, und öffnen Sie die Datei app.css in einem Editor.

Fügen Sie der Datei die folgenden Stilklassen hinzu, die zur Formatierung der Artikeldetails verwendet werden.

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

Speichern Sie die Datei. Ihr Code sollte ungefähr wie app.css aussehen.

Aufgabe 5: Änderungen in der App anzeigen

Kehren Sie zum Browser zurück, um die Änderungen in Ihrer virtuellen DOM-App anzuzeigen.

Im Container für Artikeldetails zeigen databound-Textfelder und die Oracle JET Avatar- und Diagrammkomponenten die Daten für den Baseballhandschuhartikel SureCatch an. Die Listen im Aktivitätsartikelcontainer und im Aktivitätscontainer reagieren jedoch nicht auf die Auswahl. Im nächsten Tutorial fügen Sie Auswahlfunktionen hinzu.
Schließen Sie das Browserfenster oder die Registerkarte, in der die ausgeführte App angezeigt wird.
Drücken Sie im Terminalfenster Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Batchjob für Oracle JET-Tooling zu beenden.

Nächsten Schritt

Fahren Sie mit dem nächsten Tutorial in diesem Modul fort.

Dieses Tutorial ist Teil des Moduls Masterdetailansichten in Oracle JET.

Masteransicht in einer Oracle JET Virtual DOM-App erstellen
Detailansicht in einer Oracle JET Virtual DOM-App erstellen
Auswahlereignisse in einer Oracle JET Virtual DOM-App verarbeiten

Sie können zur Hauptseite des virtuellen DOM-Lernpfads zurückkehren, um auf alle Module zum Erstellen virtueller DOM-Apps zuzugreifen.

Weitere Lernressourcen

Sehen Sie sich weitere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning YouTube-Kanal zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um ein Oracle Learning Explorer zu werden.

Die Produktdokumentation finden Sie im Oracle Help Center.

Titel und Copyright-Informationen

Create the detail view in an Oracle JET virtual DOM app

F72833-02

Oracle und/oder verbundene Unternehmen.