Webkomponente in einer Oracle JET-Webanwendung verwenden

Einführung

Eine Webkomponente ist eine wiederverwendbare Benutzeroberfläche, die Sie als benutzerdefiniertes HTML-Element in Ihre Webanwendung einbetten können. Webkomponenten können Oracle JavaScript Extension Toolkit-(Oracle JET-)Komponenten, andere Webkomponenten, HTML, JavaScript und Cascading Style Sheets (CSS) enthalten. Mit dem Oracle JET-Tooling können Sie die Webkomponente erstellen. Mit einer Oracle JET-Startvorlage können Sie die HTML- und TypeScript- oder JavaScript-Dateien generieren, die Sie zum Hinzufügen der Webkomponente ändern.

Die in diesem Tutorial verwendete Startvorlage für die Oracle JET-Webanwendung (Webkomponente mit Consumer-App) zeigt den Bereich "Produktinformationen" mit dem Abschnitt "Aktivitäten und Aktivitätselemente" an. Im Abschnitt "Aktivitätselemente" werden die Schaltflächen "Erstellen", "Aktualisieren" und "Löschen" angezeigt. Die Schaltfläche "Aktualisieren" zeigt das Dialogfeld "Elementdetails aktualisieren" mit einem Formular an, das aus vier Eingabetextfeldern besteht. Die Webkomponente, die Sie dieser Startvorlage hinzufügen, ersetzt den Inhalt des Dialogfelds "Elementdetails aktualisieren".

Ziele

In diesem Tutorial verwenden Sie eine Webkomponente in einer Oracle JET-Webanwendung. Außerdem erfahren Sie, wie Sie Attribute in der HTML-Datei Ihrer Webanwendung definieren, um Daten aus einem REST-Endpunkt zu verwenden.

Voraussetzungen

Eine Entwicklungsumgebung, die zum Erstellen von Oracle JET-Apps eingerichtet wurde und die JavaScript-Laufzeit, Node.js sowie die aktuellste Befehlszeilenschnittstelle des Oracle JET-Release installiert ist
(Option 1) Abschluss des vorherigen Lernpfads in dieser Serie: Webanwendung mit CRUD-Unterstützung 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
Abschluss der vorherigen Tutorials in diesem Lernpfad, sodass Sie eine demo-update-item.zip-Datei Ihrer Webkomponente erstellt haben
Die abgeschlossene App jet_web_component_application_final.zip wurde optional 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 Sie die neueste Version von Oracle JET installiert haben. Falls noch nicht geschehen, aktualisieren Sie Ihre Version von Oracle JET.
```
$ 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.
Führen Sie die App im Terminalfenster aus.
```
$ ojet serve
```
Der Browser zeigt Ihre Webanwendung an, in dem der Bereich Produktinformationen mit der Liste der Aktivitäten im Abschnitt Aktivitäten angezeigt wird.

Beschreibung der Abbildung product-information-page.png
Klicken Sie im Browser, der Ihre Webanwendung anzeigt, auf eine der Aktivitäten, und wählen Sie eines der Elemente im Abschnitt Aktivitätselemente aus.

Beschreibung der Abbildung Activity-items-buttons.png

Im Abschnitt Aktivitätselemente werden die Schaltflächen Erstellen, Aktualisieren und Löschen angezeigt.
Klicken Sie auf Aktualisieren, um den Inhalt des Dialogfelds "Elementdetails aktualisieren" anzuzeigen.
Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.
Schließen Sie das Browserfenster oder die Browserregisterkarte.

Aufgabe 2: Webkomponentenordner hinzufügen

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts, und erstellen Sie einen neuen Ordner mit dem Namen jet-composites.
Extrahieren Sie die Datei demo-update-item.zip in den Ordner jet-composites.

Der neue Ordner hat den Pfad JET_Web_Application/src/ts/jet-composites/demo-update-item und enthält die Quelldateien der Webkomponente.

Aufgabe 3: Anwendung bearbeiten ViewModel

Um die Webkomponente in Ihrer Webanwendung zu verwenden, fügen Sie das Webkomponenten-Loader-Modul der JavaScript-Datei der Webanwendung hinzu.

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 das Webkomponenten-Loader-Modul.

import * as AccUtils from "../accUtils";
. . .
import "demo-update-item/loader";

Speichern Sie die Datei dashboard.ts.

Aufgabe 4: Anwendungsansicht bearbeiten

Um die Webkomponente in Ihrer Webanwendung zu verwenden, müssen Sie auch das Webkomponentenelement mit den definierten Attributen zur HTML-Datei der Webanwendung hinzufügen.

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

Suchen Sie das benutzerdefinierte HTML-Element oj-dialog mit id="editDialog", und kommentieren Sie die benutzerdefinierten HTML-Elementreferenzen oj-label-value und oj-input-text für die Eingabetextfelder im Element div slot="body" aus.

   
<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
<div slot="body">

   <!-- <oj-label-value label-edge="inside">
      <oj-label for="chatWindow" slot="label">Item ID</oj-label>
      <div slot="value" class="slot-line">
      <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
      </div>
   </oj-label-value>
   <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
-->
</div>
. . . 
</oj-dialog>

   

Fügen Sie im Element div slot="body" der Schaltfläche editDialog unter den kommentierten Elementen das Webkomponentenelement demo-update-item mit den Attributwerten für jedes Eingabetextfeld hinzu.

<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
   <div slot="body">
   . . .
   <demo-update-item item-id="34" item-name="John" item-price="3434.55" 
                     item-desc="This is an updated item">
      </demo-update-item>
   </div>      
   <div slot="footer">
      <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit</oj-button>
   </div> 
</oj-dialog>

Speichern Sie die Datei dashboard.html.

Aufgabe 5: App testen

Im Dialogfeld "Elementdetails aktualisieren" werden statische Werte in den Eingabetextfeldern angezeigt. Diese Werte können nicht bearbeitet werden. Sie müssen die Attributwerte an die Eigenschaftsreferenzen binden, um die Felder zu bearbeiten.

Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Application, und führen Sie die Webanwendung aus.
```
$ ojet serve
```
Im Browser wird Ihre Webanwendung mit dem Fensterbereich Produktinformationen angezeigt.
Wählen Sie im Browser, der Ihre Webanwendung anzeigt, eine Aktivität im Abschnitt Aktivitäten aus, wählen Sie ein Element im Abschnitt Aktivitätselemente aus, und klicken Sie auf Aktualisieren.

Beschreibung der Abbildung update-button-passed-values.png

In der nächsten Aufgabe dieses Tutorials ersetzen Sie die statischen Daten durch Daten aus einem REST-Endpunkt.
Lassen Sie das Terminalfenster und das Browserfenster oder die Registerkarte, in dem bzw. der Ihre Webanwendung geöffnet wird.

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

Aufgabe 6: REST-Daten in der Anwendungsansicht verwenden

JET_Web_Application verwendet Daten aus einem REST-Endpunkt. Sie müssen die Attributwerte des Webkomponentenelements demo-update-item ändern, das in der HTML-Datei der Webanwendung definiert ist, um Daten aus dem REST-Endpunkt anzuzeigen.

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

Bearbeiten Sie die im Element demo-update-item definierten Attribute, um Werte aus dem REST-Endpunkt der JET_Web_Application zu verwenden.

   
<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
 <div slot="body">
   <demo-update-item item-id="[[itemData().id]]" item-name="{{inputItemName}}" 
	      item-price="{{inputPrice}}" item-desc="{{inputShortDesc}}">
     </demo-update-item>
   </div>      
 <div slot="footer">
   <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit</oj-button>
 </div> 
</oj-dialog>
   

Die Eigenschaftsnamensreferenzen für die Attributwerte verwenden {{}} doppelte geschweifte Klammern für das wechselseitige Daten-Binding und [[]] doppelte geschweifte Klammern für ein unidirektionales Daten-Binding.

Speichern Sie die Datei dashboard.html.

Der dashboard.html-Code sollte in etwa final-use-wc-dashboard-html.txt aussehen.
Kehren Sie zum Browser zurück, um die Änderungen in Ihrer Webanwendung anzuzeigen.
Wählen Sie im Browser, der Ihre Webanwendung anzeigt, eine Aktivität im Abschnitt Aktivitäten aus, wählen Sie ein Element im Abschnitt Aktivitätselemente aus, und klicken Sie auf Aktualisieren.

Beschreibung der Abbildung update-button-rest-values.png

Im Dialogfeld "Elementdetails aktualisieren" werden die Attributwerte aus dem REST-Endpunkt in den Eingabetextfeldern angezeigt. Sie können jetzt die Artikeldetails aktualisieren und auf Weiterleiten klicken.
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. Schließen Sie das Terminalfenster.

Aufgabe 7: (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 gestreiften und komprimierten Oracle JET-App zu arbeiten, müssen Sie Projektabhängigkeiten, einschließlich Oracle JET-Tooling, und die erforderlichen Librarys und Module, innerhalb der extrahierten App wiederherstellen.

Laden Sie die Datei jet_web_component_application_final.zip herunter, und extrahieren Sie den Inhalt der abgeschlossenen App in den Ordner jet_web_component_application_final.
Navigieren Sie im Terminalfenster zum Ordner jet_web_component_application_final, und stellen Sie die Oracle JET-Webanwendung wieder her.
```
$ ojet restore
```
Warten Sie auf eine Bestätigung.
```
Restore complete
```
Die App ist einsatzbereit.
Führen Sie die Webanwendung aus, und testen Sie sie im Browser.
```
$ ojet serve
```
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

Use the web component in an Oracle JET web app

F53215-01

February 2022