Oracle JET-Webkomponente verbessern und archivieren

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, TypeScript 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 ändern, um die Webkomponente hinzuzufügen und zu konfigurieren.

Im vorherigen Tutorial haben Sie eine Webkomponente erstellt, in der vier Eingabetextfelder angezeigt werden. In diesem Tutorial lernen Sie, wie Sie das Feld "Artikel-ID" in ein schreibgeschütztes Feld ändern, dem Feld "Artikelpreis" einen Währungsumrechner hinzufügen und dem Feld "Artikelbeschreibung" einen Längenvalidator hinzufügen. Um Werte an diese Felder zu übergeben, definieren Sie die Attribute für die vier Eingabetextfelder in der HTML-Quelle der Webanwendung. Die verwendeten Attribute müssen über eine entsprechende Eigenschaft verfügen, die in der Metadaten-Datei der Webkomponente definiert ist. Sie können statische Werte an die Attribute übergeben oder die datengebundene Ausdruckssyntax für ein unidirektionales oder wechselseitiges Daten-Binding zwischen der Webanwendung und der Webkomponente verwenden.

Ziele

In diesem Tutorial verbessern Sie die Webkomponente mit zusätzlichen Features in einer Oracle JET-Webanwendung. Außerdem erfahren Sie, wie Sie die Webkomponente verpacken und für die Freigabe mit einer anderen App vorbereiten.

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
Abschluss des vorherigen Tutorials in diesem Lernpfad, sodass Sie die Webkomponente demo-update-item im Ordner JET_Web_Component_Application erstellt haben

Aufgabe 1: Element-ID schreibgeschützt bearbeiten

Das Feld Element-ID in Ihrer Webkomponente muss schreibgeschützt sein. Ersetzen Sie aus Gründen der Barrierefreiheit das benutzerdefinierte HTML-Element oj-input-text für das Feld Element-ID durch das benutzerdefinierte HTML-Element oj-label-value. Das Element oj-label-value definiert einen Slot, der das Element oj-bind-text verwendet, um das Feld Element-ID schreibgeschützt zu ändern.

Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei demo-update-item-view.html in einem Editor.

Suchen Sie das benutzerdefinierte HTML-Element oj-input-text mit dem Attribut value="ID number", und ersetzen Sie das Element oj-input-text durch das Element oj-label-value.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
  <oj-label-value>
    <oj-label slot="label">Item ID</oj-label>
    <div slot="value">
      <oj-bind-text value="ID number"></oj-bind-text>
    </div>
  </oj-label-value>
  <oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
. . . 
</oj-form-layout>

Speichern Sie die Datei demo-update-item-view.html.

Der Code demo-update-item-view.html sollte in etwa readonly-itemid.txt aussehen.
Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei demo-update-item-viewModel.ts in einem Editor.

Importieren Sie in der Datei demo-update-item-viewModel.ts das ojs/ojlabelvalue-Loader-Modul nach dem Eintrag, der das Modul ojs/ojinputtext importiert.

"use strict";

import * as ko from "knockout";
import componentStrings = require("ojL10n!./resources/nls/demo-update-item-strings");
import Context = require("ojs/ojcontext");
import Composite = require("ojs/ojcomposite");
import "ojs/ojknockout";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";

Speichern Sie die Datei demo-update-item-viewModel.ts.
Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Component_Application, und führen Sie die App aus.
```
$ ojet serve
```
Der Browser zeigt die Webkomponente mit den vier Eingabetextfeldern in der Registerkarte Dashboard der Webanwendung an. Das Feld Element-ID ist jetzt ein schreibgeschütztes Feld.

Beschreibung der Abbildung form-wc-itemid-readonly.png
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 2: Währungsumrechner hinzufügen

Verwenden Sie einen Währungsumrechner für das Feld Artikelpreis.

Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei demo-update-item-view.html in einem Editor.

Suchen Sie das benutzerdefinierte HTML-Element oj-input-text mit dem Attribut value="Price", und aktualisieren Sie es, um einen Währungsumrechner zu verwenden, den wir in einem späteren Schritt definieren. Wir geben 00 anstelle von Price als Platzhalterwert für die Eigenschaft value ein, da der Converter eine gültige Zahl anstelle einer Zeichenfolge benötigt.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
...
<oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
<oj-input-text value="00" 
               help.instruction="enter an amount with or without grouping separator"
               converter="[[currency]]" 
               label-hint="Item Price">
         </oj-input-text> 
<oj-input-text value="Description" label-hint="Item Description"></oj-input-text>
</oj-form-layout>   

Speichern Sie die Datei demo-update-item-view.html. Ihr demo-update-item-view.html-Code sollte in etwa currency-code-html.txt aussehen.
Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei demo-update-item-viewModel.ts in einem Editor.

Importieren Sie oben in der Datei demo-update-item-viewModel.ts IntlNumberConverter aus dem Modul ojs/ojconverter-number:

"use strict";

import * as ko from "knockout";
. . .
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";
import { IntlNumberConverter } from "ojs/ojconverter-number";

Fügen Sie in der Klasse ViewModel ein Währungsfeld für den Währungsumrechner hinzu, den Sie im nächsten Schritt initialisieren möchten.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
   busyResolve: (() => void);
   . . . 
   currency: IntlNumberConverter;

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {
. . .       

Fügen Sie in der Methode constructor() nach den beobachtbaren Beispieleinträgen den Währungsumrechner hinzu.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

Speichern Sie die Datei demo-update-item-viewModel.ts.

Der demo-update-item-viewModel.ts-Code sollte in etwa currency-code-ts.txt aussehen.
Kehren Sie zum Browser zurück, um die Änderungen in Ihrer Webanwendung anzuzeigen.
Geben Sie den Preis in das Feld Artikelpreis ein, und drücken Sie die Eingabetaste, um die Änderungen zu prüfen.

Beschreibung der Abbildung form-wc-currency-converter.png

Der von Ihnen eingegebene Preis zeigt ein USD-Präfix an. Wenn Sie einen nicht numerischen Wert eingeben, wird im Feld Artikelpreis ein Fehler angezeigt.
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 3: Längenvalidator hinzufügen

Verwenden Sie einen Längenvalidator für das Feld Artikelbeschreibung.

Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei demo-update-item-view.html in einem Editor.

Suchen Sie das benutzerdefinierte HTML-Element oj-input-text mit dem Attribut value="Description", und aktualisieren Sie es, um einen Längenvalidator zu verwenden, den wir in einem späteren Schritt definieren.

   
<oj-form-layout id="form-container">
...
<oj-input-text value="00" 
            help.instruction="enter an amount with or without grouping separator"
            converter="[[currency]]" 
            label-hint="Item Price">
      </oj-input-text> 
<oj-input-text
     value="{{lengthValue1}}" validators="[[validators]]"
     placeholder="Enter a description of 5-50 characters"
     label-hint="Item Description"
   ></oj-input-text>
</oj-form-layout>
   

Speichern Sie die Datei demo-update-item-view.html.

Der demo-update-item-view.html-Code sollte in etwa validator-code-html.txt aussehen.
Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei demo-update-item-viewModel.ts in einem Editor.

Importieren Sie oben in der Datei demo-update-item-viewModel.ts AsyncLengthValidator aus dem Modul ojs/ojasyncvalidator-length:

import * as ko from "knockout";
. . .
import { IntlNumberConverter } from "ojs/ojconverter-number";
import AsyncLengthValidator = require("ojs/ojasyncvalidator-length");

Fügen Sie in der Klasse ViewModel Felder für die Knockout-Beobachtungen hinzu, die Sie im nächsten Schritt initialisieren.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
 busyResolve: (() => void);
 . . . 
 currency: IntlNumberConverter;
 lengthValue1: ko.Observable<string>;
 validators: ko.ObservableArray<AsyncLengthValidator<string>>;

Fügen Sie in der Methode constructor nach dem Währungsumrechner den Längenvalidator hinzu.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

   this.lengthValue1 = ko.observable("");
   this.validators = ko.observableArray([
      new AsyncLengthValidator({ min: 5, max: 50 }),
    ]);

Der Längenvalidator definiert eine Mindestzeichenlänge von 5 und eine maximale Zeichenlänge von 50 für das Feld Artikelbeschreibung.

Speichern Sie die Datei demo-update-item-viewModel.ts.

Ihr demo-update-item-viewModel.ts-Code sollte in etwa final-demo-update-item-viewModel-ts.txt aussehen.
Kehren Sie zum Browser zurück, um die Änderungen in Ihrer Webanwendung anzuzeigen.
Geben Sie eine Beschreibung in das Feld Artikelbeschreibung ein, und drücken Sie die Eingabetaste. Drücken Sie dann die Tabulatortaste, um die QuickInfo zu löschen.

Beschreibung der Abbildung form-wc-length-validator.png

Wenn die Beschreibung länger ist als der festgelegte Bereich, wird im Feld Artikelbeschreibung ein Fehler angezeigt.
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 4: Webkomponenten-Metadaten definieren

Die Metadaten-Datei der Webkomponente definiert die erforderlichen Eigenschaften der Webkomponente. Jedem Eingabetextfeld der Webkomponente muss eine Eigenschaft zugeordnet sein, mit der Updates aus der Webkomponente zurückgeschrieben werden.

Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei component.json in einem Editor.

Definieren Sie die Metadateneigenschaften displayName und description.

{
"name": "demo-update-item",
"version": "1.0.0",
"jetVersion": "^12.0.0",
"displayName": "demo-update-item",
"description": "A Web Component with form layout",
...
}

Verwenden Sie unter der Metadateneigenschaft description die Namenskonvention in Camel-Case, um die Eigenschaften zu definieren, die an die Felder in der Webkomponentenansicht gebunden sind.
```
"description": "A Web Component with form layout",
"properties": {
   "itemId": {
      "type": "number"
   },
   "itemName": {
      "type": "string",
      "description": "Description for the item-name attribute",
      "writeback": true
   },
   "itemPrice": {
      "type": "number",
      "writeback": true
   },
   "itemDesc": {
      "type": "string",
      "writeback": true
   }
},
```
Die auf true gesetzte Eigenschaft writeback stellt sicher, dass diese Eigenschaften Aktualisierungen von der Webkomponente erhalten, die diese Eigenschaft in einem bidirektionalen Daten-Binding-Ausdruck referenziert.
Speichern Sie die Datei component.json.

Der component.json-Code sollte in etwa component-json.txt aussehen.

Aufgabe 5: Attribute und Attributwerte definieren

Attribute des Webkomponentenelements können die Eigenschaften referenzieren, die Sie in der Metadatendatei der Webkomponente deklariert haben. In der HTML-Quelle der Webanwendung werden Eigenschaftsreferenzen als Attributnamen von HTML-Elementen ohne Beachtung der Groß-/Kleinschreibung mit Bindestrichen angezeigt.

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

Definieren Sie im Element demo-update-item die Attribute mit statischen Werten für die vier Eingabetextfelder.

<div class="oj-hybrid-padding">
   <div class="oj-panel oj-sm-margin-2x demo-mypanel">
      <h1 class="oj-header-border">Update Item Details</h1>
      <div>
         <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>
</div>

Speichern Sie die Datei dashboard.html.

Aufgabe 6: Webkomponenten-View definieren

Sie können auf jede in der Metadatendatei der Webkomponente definierte Eigenschaft zugreifen, indem Sie die Variable $properties des View Binding-Kontexts verwenden.

Navigieren Sie zum Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, und öffnen Sie die Datei demo-update-item-view.html in einem Editor.

Binden Sie in den benutzerdefinierten HTML-Elementen des Elements oj-form-layout die Attribute value mit den Eigenschaften, die in der Datei component.json definiert sind, indem Sie die Variable $properties verwenden.

   
<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
. . .
<div slot="value">
      <oj-bind-text value="[[$properties.itemId]]"></oj-bind-text>
  </div>
</oj-label-value>  
   <oj-input-text value="{{$properties.itemName}}" label-hint="Item Name"></oj-input-text>
   <oj-input-text value="{{$properties.itemPrice}}" 
      help.instruction="enter an amount with or without grouping separator"
      ...> 
   </oj-input-text>
   <oj-input-text
      value="{{$properties.itemDesc}}"
      . . .>
   </oj-input-text>
</oj-form-layout>
   

Um Attributwerte zu definieren, verwenden Sie die Syntax [[]] zur Definition eines unidirektionalen Daten-Bindings und die Syntax {{}} für das wechselseitige Daten-Binding.

Speichern Sie die Datei demo-update-item-view.html.

Ihr demo-update-item-view.html-Code sollte in etwa final-demo-update-item-view-html.txt aussehen.
Kehren Sie zum Browser zurück, um die Änderungen in Ihrer Webanwendung anzuzeigen.

Der Browser zeigt die Webkomponente mit den statischen Werten in den vier Eingabetextfeldern an.
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: Web-Komponente archivieren

Nachdem Sie die Webkomponente konfiguriert haben, müssen Sie die Webkomponente für andere Apps vorbereiten.

Öffnen Sie ein Terminalfenster, wechseln Sie in das Verzeichnis JET_Web_Component_Application, und führen Sie den Befehl ojet package component mit dem Namen der Komponente demo-update-item als Befehlsparameter aus:

$ ojet package component demo-update-item

Oracle JET verpackt den Inhalt des Verzeichnisses JET_Web_Component_Application/src/ts/jet-composites/demo-update-item in eine ZIP-Datei (demo-update-item_1-0-0.zip), die im Verzeichnis JET_Web_Component_Application/dist erstellt wird. Im Rahmen der Packaging-Aufgabe überträgt Oracle JET den TypeScript-Code im Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item in JavaScript-Code. Wenn Sie beispielsweise die Datei JET_Web_Component_Application/dist/demo-update-item_1-0-0.zip öffnen, sehen Sie, dass sie eine Datei demo-update-item-viewModel.js enthält, die vom Oracle JET-Tooling aus der Datei demo-update-item-viewModel.ts im Verzeichnis JET_Web_Component_Application/src/ts/jet-composites/demo-update-item übertragen wurde.

Sie verteilen die Datei demo-update-item_1-0-0.zip aus dem Verzeichnis JET_Web_Component_Application/dist an Consumer, die Ihre Webkomponente in ihrer Webanwendung wiederverwenden möchten. Um die Webkomponente in ihrer Webanwendung zu verwenden, extrahieren Consumer den Inhalt der ZIP-Datei in ein demo-update-item-Verzeichnis in ihrer Webanwendung. Diese letzte Aufgabe wird im nächsten Tutorial ausführlich behandelt.

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

Enhance and archive the Oracle JET web component

F53207-01

February 2022