Masteransicht in einer Oracle JET-Webanwendung erstellen

Einführung

In diesem Tutorial wird erläutert, wie Sie hierarchische Masterdetaildaten aus einem lokalen JavaScript Object Notation-(JSON-)Dokument lesen und die Daten in einer Masteransicht in einer Oracle JavaScript Extension Toolkit-(Oracle JET-)Webanwendung anzeigen.

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 übergeordneten Objekten eines JSON-Dokumentspeichers auffüllen. In der Ansicht für die Oracle JET-Webanwendung wird das Attribut data von benutzerdefinierten Oracle JET-HTML-Elementen über eine Instanz eines MutableArrayDataProvider-Objekts, das im viewModel-Quellcode der App deklariert und aufgefüllt wird, an die Daten gebunden.

Ziele

In diesem Tutorial binden Sie mehrere Elemente der übergeordneten Datenobjekte in einem lokalen JSON-Dokument und füllen die Zeilen einer Oracle JET List View-Komponente mit diesen Daten auf.

Voraussetzungen

Eine Entwicklungsumgebung zum Erstellen von Oracle JET-Anwendungen mit der JavaScript-Laufzeit, Node.js und der neuesten installierten Oracle JET-Befehlszeilenschnittstelle
Google Chrome-Webbrowser installiert und als Standard-Webbrowser festgelegt
Zugriff auf das Oracle JET Developer Cookbook
(Option 1) Abschluss des vorherigen Lernpfads in dieser Serie: Webanwendung mit Responsive Layout in Oracle JavaScript Extension Toolkit entwickeln
(Option 2) Wenn Sie den vorherigen Lernpfad in dieser Serie nicht abgeschlossen haben: jet_web_application_temp.zip heruntergeladen
Die Datei product_images.zip wurde in das Verzeichnis JET_Web_Application/src/css/images/ heruntergeladen

Aufgabe 1: Startanwendung herunterladen

Überspringen Sie diese Aufgabe, wenn Sie weiterhin in einer App arbeiten, die Sie im vorherigen Lernpfad erstellt haben.

Benennen Sie jet_web_application_temp.zip in JET_Web_Application.zip um. Extrahieren Sie den Inhalt in den Ordner JET_Web_Application.
Prüfen Sie im Terminalfenster, ob Oracle JET installiert und auf die neueste Version aktualisiert wurde.
```
$ npm list -g @oracle/ojet-cli
```
```
$ npm install -g @oracle/ojet-cli
```
Navigieren Sie zum Ordner JET_Web_Application, und stellen Sie die Oracle JET-App wieder her.
```
$ ojet restore
```
Ihre App kann jetzt verwendet werden.

Aufgabe 2: Produktbilder herunterladen

Überspringen Sie diese Aufgabe, wenn Sie die Startanwendung in jet_web_application_temp.zip heruntergeladen haben.

Wenn der Batchjob für den Oracle JET-Tooling-Server im Terminalfenster ausgeführt wird, drücken Sie Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Serverbatchjob zu beenden.

Der Serverbatchjob erkennt nur Revisionen, die Sie an vorhandenen Anwendungsdateien vornehmen. Nachdem Sie neue Dateien erstellt haben, müssen Sie die Webanwendung erneut ausführen.
Laden Sie die Datei product_images.zip in das Verzeichnis JET_Web_Application/src/css/images/ herunter.
Extrahieren Sie den Inhalt der ZIP-Datei in einen neuen Ordner product_images im Ordner images.

Der Pfad zum neuen Ordner lautet JET_Web_Application/src/css/images/product_images, und der Ordner enthält die Bilder, die Ihre App verwendet.

Aufgabe 3: Aktivitätsliste in der Ansicht erweitern

Ändern Sie die Komponente "Oracle JET-Listenansicht", um mehrere Datenelemente der Array-Datenquelle "Aktivitäten" für jede Listenzeile anzuzeigen. Um den Inhalt der Datenelemente der Listenzeile zur Laufzeit zu instanziieren, verwendet die Aktivitätslistenansichtskomponente ein HTML-Element template mit einem slot-Attribut als Platzhalter.

Suchen Sie das Element div mit id="activityItemsContainer", und löschen Sie die Helper-Klasse oj-sm-only-text-align-end, um eine Neuausrichtung des Inhalts der Aktivitätsliste zu verhindern.
```
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-md-4 oj-sm-12">
```
Suchen Sie das benutzerdefinierte HTML-Element oj-list-view mit id="activitiesList", und fügen Sie ein class-Attribut mit dem Wert item-display hinzu.
```
<oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
  data="[[activityDataProvider]]" gridlines.item="visible">
```
Um die Datenquelle der Listenansicht anzugeben, bindet das Attribut data das activityDataProvider, das als unidirektionales Daten-Binding beobachtbar ist.
Navigieren Sie zum Verzeichnis JET_Web_Application/src/css, und öffnen Sie die Datei app.css. Hier können Sie anwendungsspezifische CSS-Stile hinzufügen. Erstellen Sie eine .item-display-Formatdefinition mit den Eigenschaften width, height und overflow-x, um die Anzeige mehrerer Datenelemente in den Listenzeilen zu unterstützen.
```
.item-display {
      width: 100%;
      height: 500px;
      overflow-x: hidden;
      }
```
Suchen Sie im oj-list-view-Element mit id="activitiesList" das Vorlagenelement mit slot="itemTemplate", und löschen Sie das Element div und das enthaltene Element oj-bind-text.
```
<template slot="itemTemplate">

</template>
```

Fügen Sie im leeren template-Element drei div-Elemente mit Code hinzu, um die Komponentenzeilen der Listenansicht mit einem Hintergrundbild, einem Namen und einer Kurzbeschreibung aufzufüllen.

<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>
  <span class="demo-metadata">
   <oj-bind-text value="[[$current.data.short_desc]]"></oj-bind-text>
  </span>
  </div>
 </div>
</template>

Speichern Sie die Datei dashboard.html.

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

Aufgabe 4: Aktivitätsdatenprovider in ViewModel prüfen

Um die Komponente "Aktivitätslistenansicht" aufzufüllen, erstellt viewModel eine Instanz des Datenarrays "Aktivitäten" mit einer Oracle JET-Klasse MutableArrayDataProvider. Die Methode JSON.parse parst den lokalen JSON-Datenspeicher als Argument, das die Daten zurückgibt.

Öffnen Sie das Oracle JET Cookbook, und navigieren Sie zur Cookbook-Homepage. Klicken Sie auf Framework, Datenprovider, Mutable Array Data Provider. Klicken Sie in der Cookbook-Symbolleiste auf API-Dokument.
Lesen Sie in der API-Dokumentation Informationen zur Klasse MutableArrayDataProvider. Beachten Sie, wie Sie mit dem optionalen Argument keyAttributes eine Instanz einer MutableArrayDataProvider-Klasse basierend auf dem Schlüsselattribut des übergebenen Datenobjekts erstellen können.
Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/viewModels, und öffnen Sie die Datei dashboard.ts in einem Editor. Suchen Sie die Deklaration von this.activityDataProvider in der Konstruktormethode.
```
   this.activityDataProvider = new MutableArrayDataProvider<
   Activity["id"],
   Activity
      >(JSON.parse(storeData), {
         keyAttributes: "id",
   });
}
```
Dadurch wird das Objekt activityDataProvider erstellt, eine Instanz der Klasse MutableArrayDataProvider. Die Eigenschaft keyAttributes von MutableArrayDataProvider füllt das Aktivitätsarray basierend auf dem Attribut id des übergeordneten Objekts auf. Das Attribut id ist das Schlüsselattribut für übergeordnete und untergeordnete Datenobjekte im JSON-Dokument.
Schließen Sie die Datei dashboard.ts, ohne Änderungen vorzunehmen.

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

Aufgabe 5: Webanwendung ausführen und kaskadierendes Stylesheet der App debuggen

Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Application, und führen Sie die App aus.
```
$ ojet serve
```
Mit Oracle JET Tooling wird Ihre Webanwendung in einem lokalen Webbrowser ausgeführt, in dem Sie die datengebundene Master-Liste anzeigen können. Die Bilder, die links neben den Aktivitätsnamen in der Liste Aktivitäten angezeigt werden, werden nur teilweise angezeigt, da sie zu groß sind.

Wenn Sie die Größe Ihres Browsers ändern und dennoch keine Seite wie in diesem Beispiel-Screenshot sehen, bestätigen Sie, dass Sie die App-Bilder in den Ordner product_images extrahiert haben.

Beschreibung der Abbildung Master_list_with_error.png
Klicken Sie im Google Chrome-Browser mit der rechten Maustaste auf das Teilbild für die Soccer-Aktivität, und wählen Sie Prüfen. Der Browser zeigt Entwicklertools für die Prüfung der HTML-Seitenquelle an.
Wählen Sie im Bereich "Elemente" das Element span class="demo-thumbnail" aus. Suchen Sie im Bereich Stile den hervorgehobenen Stil element.style background-image. Klicken Sie mit der rechten Maustaste auf die URL für das Bild jrsoccerball.jpg, und wählen Sie Im Bereich "Quellen" lesen aus.

Beschreibung der Abbildung insp_image_url.png
Im Bereich für Chrome DevTools-Quellen wird angezeigt, dass das Bild 300 x 300 Pixel beträgt. Die Größe ist zu groß, um in der Komponente "Oracle JET-Listenansicht" angezeigt zu werden. Um ein Thumbnail-Bild aus einem Full-Size-Bild wiederzugeben, können Sie eine CSS-(Cascading Style Sheets-)Stilklasse definieren.

Beschreibung der Abbildung insp_image_url_contents.png
Schließen Sie das Fenster für Entwicklertools, und kehren Sie zur App im Browser zurück.

Aufgabe 6: CSS korrigieren und Master-Liste anzeigen

Navigieren Sie zum Verzeichnis JET_Web_Application/src/css, und öffnen Sie die Datei app.css in einem Editor.
Definieren Sie die Eigenschaften für den Klassenselektor .demo-thumbnail. Setzen Sie in der Eigenschaftsliste die Eigenschaft background-repeat auf no-repeat, um das Bild nur einmal anzuzeigen. Definieren Sie außerdem einen no-wrap-Klassenselektor, bei dem die Eigenschaft flex-wrap auf nowrap gesetzt ist.
```
.demo-thumbnail {
      border-radius: 5px;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      margin-right: 10px;
      }

.no-wrap {
      flex-wrap: nowrap;
      }  
```
In der Datei dashboard.html verweist das Element span auf den Klassenselektor, um das Aktivitätslistenbild als Thumbnail zu formatieren, indem das CSS-Format demo-thumbnail für das Attribut class festgelegt wird. Im Element span legt die CSS-Eigenschaft background-image das Bild basierend auf der URL in der Eigenschaft image des übergeordneten Objekts für die aktuelle Aktivität fest.
```
<span class="demo-thumbnail oj-flex-item" 
   :style.background-image="[[' url('+$current.data.image+')']]"></span>
```
Speichern und schließen Sie die Datei app.css.

Die Datei sollte in etwa app-css-final.txt aussehen.
Laden Sie die Seite im Webbrowser neu.

Der Browser zeigt die datengebundene Master-Liste mit Thumbnail-Bildern an.

Beschreibung der Abbildung formatted_master_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 master view in an Oracle JET web app

F53170-01

February 2022