Komponenten zu einer Oracle JET-Webanwendung hinzufügen

Einführung

In diesem Tutorial wird gezeigt, wie Sie Oracle JavaScript Extension Toolkit-(Oracle JET-)Komponenten zur Navdrawer-Startvorlage Ihrer Oracle JET-Webanwendung hinzufügen.

Oracle JET ist ein Entwicklungstoolkit, mit dem Sie clientseitige Webanwendungen erstellen können. Um Ihre Webanwendung zu erstellen, verwenden Sie das Oracle JET Cookbook, um die Komponentenbeispiele zu suchen, welche die spezifische Funktionalität darstellen, die Sie Ihrer App hinzufügen möchten. Das Oracle JET Cookbook enthält auch Anweisungen, nach denen Sie das spezifische Verhalten der Komponenten unterstützen können.

Ziele

Nach Abschluss dieses Tutorials haben Sie gelernt, wie Sie mit dem Oracle JET Cookbook Oracle JET Select Single- und Chart-Komponenten zur Registerkarte Dashboard der Webanwendung hinzufügen. Außerdem erfahren Sie, wie Sie diese beiden Komponenten verbinden, um Interaktivität zwischen ihnen zu erhöhen.

Voraussetzungen

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

Aufgabe 1: Stilklassen hinzufügen

Es ist empfehlenswert, Formatvorlagen zu platzieren, die Sie auf Komponenten in einer separaten CSS-Datei anwenden möchten, anstatt das Inline-Attribut style zu verwenden, das im folgenden Beispiel gezeigt wird:

<oj-select-single id="basicSelect" style="max-width:20em" data="[[chartTypesDP]]"value="">

Bevor wir die Komponenten "Einzeln auswählen" und "Diagramm" zu unserer Seite hinzufügen, erstellen wir Stilklassen in der CSS-Datei unserer App, die dann von den Komponenten referenziert werden kann.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/css, und öffnen Sie die Datei app.css in einem Editor.
Fügen Sie am Ende der Datei app.css die folgenden Stilklassen hinzu, die Stileigenschaften für die Komponenten "Einzeln auswählen" und "Diagramm" bestimmen.
```
.selectSingleStyle {
   max-width:20em
}

.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}
```
Später in diesem Tutorial referenzieren die Komponenten "Einzeln auswählen" und "Diagramm" diese Stile mit dem Attribut class der Komponente:
```
<oj-select-single id="basicSelect" . . . class="selectSingleStyle" >. . .
<oj-chart id="barChart" . . . class="chartStyle">. . .
```

Aufgabe 2: Einzelne Komponente auswählen

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.
Fügen Sie im HTML-Element div des Dashboard-Inhaltsbereichs ein benutzerdefiniertes oj-label-HTML-Element und ein oj-select-single-Element hinzu. Fügen Sie außerdem ein id-Attribut mit dem Wert parentContainer zum div-Element hinzu.
```
   
   <h1>Dashboard Content Area</h1>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      <oj-select-single id="basicSelect"
                        class="selectSingleStyle"
                        data="[[chartTypesDP]]"
                        value="{{val}}">
      </oj-select-single>
   </div>
   
```
Die eckigen Klammern um chartTypesDP, die für das Attribut data sichtbar sind, bedeutet, dass der Wert von der Komponente gelesen, aber nicht aktualisiert werden kann. Die geschweiften Klammern um val, die im Attribut value beobachtet werden können, bedeutet, dass der Wert von der Komponente gelesen und aktualisiert werden kann. So definieren eckige Klammern, die ein beobachtbares Binding umgeben, eine unidirektionale Bindung, während geschwungene Klammern um ein beobachtbares Binding definieren.
Bearbeiten Sie das HTML-Element h1, um den Header "Produktinformationen" anzuzeigen.
```
<h1>Product Information</h1>
```
Speichern Sie die Datei dashboard.html. Das Code-Snippet dashboard.html sollte in etwa wie folgt aussehen: add-select-single-dashboard-html.txt.
Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/viewModels, und öffnen Sie die Datei dashboard.ts in einem Editor.

Importieren Sie oben in der Datei dashboard.ts die Knockout-Library, das Oracle JET-Modul für veränderbare Arraydatenprovider und die Oracle JET-Module für die Label-Komponente und die Select Single-Komponente.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";

Fügen Sie vor der Klasse DashboardViewModel() einen Typalias für die Diagrammtypen (ChartType) hinzu. Fügen Sie in der Klasse DashboardViewModel() ein Diagrammtyp-Datenarray (chartTypes) und eine Instanz des veränderbaren Array-Datenproviders (chartTypesDP) hinzu, um das Binding der Diagrammtypdaten durch die Komponente "Einzeln auswählen" zu ermöglichen.

type ChartType = {
   value: string;
   label: string;
};

class DashboardViewModel {
   chartTypes: Array<Object>;
   chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;

   constructor() {
   this.chartTypes = [
      { value: "pie", label: "Pie" },
      { value: "bar", label: "Bar" },
      ];

   this.chartTypesDP = new MutableArrayDataProvider<
      ChartType["value"],
      ChartType
      >(this.chartTypes, {
      keyAttributes: "value",
      });
  } // End constructor

Fügen Sie die Methode ko.observable hinzu, um den Tortendiagrammtyp als Standardwert für den Knockout anzuzeigen, der von der Komponente "Einzeln auswählen" beobachtet werden kann.

class DashboardViewModel {
   val: ko.Observable<string>;
   . . .

      constructor() {
        this.val = ko.observable("pie");
        . . .

Speichern Sie die Datei dashboard.ts. Das Code-Snippet dashboard.ts sollte in etwa add-select-single-dashboard-ts.txt aussehen.
Öffnen Sie ein Terminalfenster, wechseln Sie in das Verzeichnis JET_Web_Application, und führen Sie die App aus.
```
$ ojet serve
```
Der Browser zeigt die Startvorlage für das Navdrawer an, wobei die Komponente "Einzeln auswählen" auf der Registerkarte "Dashboard" Ihrer Webanwendung angezeigt wird.

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

Mit dem Befehl ojet serve können Sie Änderungen am App-Code in JET_Web_Application/src vornehmen, die sofort im Browser angezeigt werden. Eine Ausnahme ist, dass Sie beim Hinzufügen oder Löschen einer Datei ojet serve ausführen müssen, um die im Browser wiedergegebene Änderung anzuzeigen. Nehmen Sie keine Änderungen am App-Code im Ordner JET_Web_Application/web vor, da Sie diese Änderungen bei der nächsten Ausführung des Befehls ojet serve überschreiben. Der Befehl ojet serve erstellt den Inhalt des Ordners JET_Web_Application/src und dient dem Ordner JET_Web_Application/web.

Aufgabe 3: Diagrammkomponente hinzufügen

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

Fügen Sie das benutzerdefinierte HTML-Element oj-chart unter dem benutzerdefinierten HTML-Element oj-select-single hinzu, sodass die beiden Elemente innerhalb desselben HTML-Elements div des Elements Dashboard Content Area angezeigt werden.

<oj-select-single id="basicSelect"
  . . .
 </oj-select-single>
<oj-chart id="barChart"
          type="bar"
          data="[[chartDataProvider]]"
          animation-on-display="auto"
          animation-on-data-change="auto"
          hover-behavior="dim"
          class="chartStyle">
</oj-chart>

Fügen Sie im benutzerdefinierten HTML-Element oj-chart ein HTML-Element template mit einem Attribut slot hinzu, um jedes Element im Diagramm wiederzugeben.

<oj-chart id="barChart"
          . . .
          class="chartStyle">
  <template slot='itemTemplate' data-oj-as='item'>
  </template>
</oj-chart>

Fügen Sie im Vorlagenelement ein benutzerdefiniertes oj-chart-item-HTML-Element mit Attributen hinzu, die unidirektionale Bindings verwenden, um die Diagrammdaten aus dem aktuellen Objekt abzurufen.

<oj-chart id="barChart"
          . . .
          class="chartStyle">
  <template slot='itemTemplate' data-oj-as='item'>
    <oj-chart-item value='[[item.data.value]]'
                  group-id='[[ [item.data.group] ]]'
                  series-id='[[item.data.series]]'>
    </oj-chart-item>
  </template>
</oj-chart>

Speichern Sie die Datei dashboard.html. Das Code-Snippet dashboard.html sollte in etwa add-chart-dashboard-html.txt aussehen.
Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/viewModels, und öffnen Sie die Datei dashboard.ts in einem Editor.

Fügen Sie das beobachtbare Set chartDataProvider einem neuen Oracle JET MutableArrayDataProvider-Objekt hinzu, das die Diagrammdaten enthält.

class DashboardViewModel {
. . .	
   chartDataProvider: MutableArrayDataProvider<string, {}>;

constructor() {

   . . .
   this.val = ko.observable("pie");

   this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
   keyAttributes: "id",
   });
   . . .
}

Fügen Sie in der Klasse DashboardViewModel() das chartData-Array unter dem beobachtbaren Knockout hinzu. Sie deklarieren den Typ dieses Arrays als Array<Object>.

chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
chartData: Array<Object>;

constructor() {
   this.val = ko.observable("pie");

   this.chartData = [
      { "id": 0, "series": "Baseball", "group": "Group A", "value": 42 },
      { "id": 1, "series": "Baseball", "group": "Group B", "value": 34 },
      { "id": 2, "series": "Bicycling", "group": "Group A", "value": 55 },
      { "id": 3, "series": "Bicycling", "group": "Group B", "value": 30 },
      { "id": 4, "series": "Skiing", "group": "Group A", "value": 36 },
      { "id": 5, "series": "Skiing", "group": "Group B", "value": 50 },
      { "id": 6, "series": "Soccer", "group": "Group A", "value": 22 },
      { "id": 7, "series": "Soccer", "group": "Group B", "value": 46 }
   ];

Importieren Sie das Modul für die Oracle JET Chart-Komponente.

import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojknockout";
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";

Speichern Sie die Datei dashboard.ts. Die Datei dashboard.ts sollte in etwa final-chart-dashboard-ts.txt aussehen.
Kehren Sie zum Browser zurück, um die Änderungen in Ihrer Webanwendung anzuzeigen.

Der Browser zeigt die Startvorlage für den Navdrawer an, wobei die Komponente Balkendiagramm in der Registerkarte Dashboard der Webanwendung angezeigt wird.

Beschreibung der Abbildung Dashboard-with-select-chart.png

Beachten Sie, dass in der Registerkarte Dashboard nur das Balkendiagrammformat für jede Dropdown-Listenoption "Diagramm auswählen" angezeigt wird. Sie müssen eine Abhängigkeit zwischen den beiden Komponenten hinzufügen, um jedes Diagrammformat anzuzeigen.
Lassen Sie das Terminalfenster und den Browser, in dem die Webanwendung geöffnet wird.

Aufgabe 4: Zwei Komponenten verbinden

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.
Bearbeiten Sie in der Datei dashboard.html das benutzerdefinierte HTML-Element oj-chart, um das Attribut type der Diagrammkomponente mit dem Attribut value der Komponente "Einzeln auswählen" mit einem unidirektionalen Binding zu verbinden.
```
<oj-chart id="barChart"
       type="[[val]]"
       . . .
 </oj-chart>
```
Die eckigen geschweiften Klammern um val, die im Attribut type beobachtet werden können, bedeutet, dass der Wert von der Komponente gelesen, aber nicht aktualisiert werden kann. Quadratische Klammern um einen beobachtbaren Bereich definieren eine unidirektionale Bindung.
Speichern Sie die Datei dashboard.html. Die Datei dashboard.html sollte in etwa final-connect-dashboard-html.txt aussehen.
Kehren Sie zum Browser zurück, um die Änderungen in Ihrer Webanwendung anzuzeigen.

Der Browser zeigt jetzt die Startvorlage für das Navdrawer an, wobei die Komponenten Einzeln auswählen und Kreisdiagramm in der Registerkarte Dashboard der Webanwendung angezeigt werden.

Beschreibung der Abbildung connect-select-and-chart.png
Um die verschiedenen Diagrammformate anzuzeigen, wählen Sie zwischen den Optionen in der Dropdown-Liste Diagramm auswählen.
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.
Lassen Sie das Terminalfenster für Ihr nächstes Tutorial geöffnet.

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

Add components to an Oracle JET web app

F53087-01

February 2022