Formular zum Erstellen von Datensätzen in einer Oracle JET-Webanwendung erstellen
Einführung
In diesem Tutorial wird dargestellt, wie Sie mit der Oracle JavaScript Extension Toolkit-(Oracle JET-)Webanwendung einen Datensatz erstellen und an einen REST-Service weiterleiten.
Ziele
Nach Abschluss dieses Tutorials haben Sie gelernt, wie Sie Daten in einen REST-Service schreiben.
Voraussetzungen
- Eine Entwicklungsumgebung zum Erstellen von Oracle JET-Anwendungen mit der JavaScript-Laufzeit, Node.js und der neuesten installierten Oracle JET-Befehlszeilenschnittstelle
- Abschluss des vorherigen Tutorials in diesem Lernpfad, sodass Sie die Oracle JET-Webanwendung im Ordner
JET_Web_Application
mit einem REST-Datenprovider erstellt haben, um Daten abzurufen
Aufgabe 1: Dialogfeld in der Ansicht erstellen
Verwenden Sie das benutzerdefinierte HTML-Element oj-dialog
, um Formularinformationen zu erfassen, die Sie dann an ein beobachtbares Element übergeben.
-
Navigieren Sie zum Verzeichnis
JET_Web_Application/src/ts/views
, und öffnen Sie die Dateidashboard.html
in einem Editor. -
Suchen Sie das Element
h3
mitid="itemsListHeader"
. Fügen Sie darunter einoj-button
-Element hinzu, und setzen Sie das Attributon-oj-action
auf"[[showCreateDialog]]"
.<h3 id="itemsListHeader">Activity Items</h3> <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
-
Suchen Sie das Element
oj-bind-if test="[[itemSelected()]]"
, und fügen Sie darüber einoj-dialog
-Element hinzu. Setzen Sie das Attributid
auf"createDialog"
und den Stil auf"display:none"
.. . . </oj-list-view> </div> <oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" cancel-behavior="icon"> </oj-dialog> <oj-bind-if test="[[itemSelected()]]"> <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12"> . . .
-
Fügen Sie im von Ihnen erstellten
oj-dialog
-Element zwei untergeordnetediv
-Elemente mit den Attributenslot="body"
undslot="footer"
hinzu.<oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" cancel-behavior="icon"> <div slot="body"> </div> <div slot="footer"> </div> </oj-dialog>
-
Fügen Sie ein
oj-button
-Element innerhalb des von Ihnen erstelltendiv slot="footer"
-Elements hinzu, und legen Sie das Attributon-oj-action="[[createItem]]"
fest.<div slot="footer"> <oj-button id="submitBtn" on-oj-action="[[createItem]]">Submit</oj-button> </div>
-
Fügen Sie im von Ihnen erstellten
div slot="body"
-Element jeweils einoj-label
-Element und einoj-input-text
-Element für die WerteActivity ID
undName
hinzu.<div slot="body"> <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label> <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text> <oj-label class="oj-label" for="createNewName">Name</oj-label> <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text> </div>
Beachten Sie, dass Sie den Wert
activityKey
mit eckigen Klammern binden, die ein unidirektionales Binding angibt, da der Benutzer den Aktivitäts-ID-Wert nicht bearbeiten darf. Sie binden den WertitemName
mit geschweiften Klammern. Dadurch wird das wechselseitige Binding angegeben, und der Benutzer kann den Wert überschreiben. -
Fügen Sie auch unter dem von Ihnen erstellten benutzerdefinierten HTML-Element
oj-input-text id="createNewName"
oj-input-text
für die WertePrice, Description, Quantity: In-Stock
undQuantity: Shipped
hinzu.<div slot="body"> <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label> <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text> <oj-label class="oj-label" for="createNewName">Name</oj-label> <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text> <oj-label class="oj-label" for="createNewPrice">Price</oj-label> <oj-input-text id="createNewPrice" value="{{price}}"></oj-input-text> <oj-label class="oj-label" for="createNewDesc">Description</oj-label> <oj-input-text id="createNewDesc" value="{{short_desc}}"></oj-input-text> <oj-label class="oj-label" for="createNewInStock">Quantity: In-Stock</oj-label> <oj-input-text id="createNewInStock" value="{{quantity_instock}}"></oj-input-text> <oj-label class="oj-label" for="createNewShipped">Quantity: Shipped</oj-label> <oj-input-text id="createNewShipped" value="{{quantity_shipped}}"></oj-input-text> </div>
-
Speichern Sie die Datei
dashboard.html
.Der Code sollte in etwa in der Datei final-create-dashboard-html.txt enthalten sein.
Aufgabe 2: Öffnen des Dialogfelds in ViewModel bearbeiten
Deklarieren Sie die neuen in der Ansicht referenzierten Observables und Funktionen, damit Ihre Oracle JET-Web-App erfolgreich initialisiert wird, wenn Sie sie bedienen.
-
Navigieren Sie zum Verzeichnis
JET_Web_Application/src/ts/viewModels
, und öffnen Sie die Dateidashboard.ts
in einem Editor. -
Importieren Sie oben in der Datei
dashboard.ts
die Oracle JET-Module für die Komponenten "Schaltfläche", "Dialog" und "Eingabetext".import * as AccUtils from "../accUtils"; . . . import { ojDialog } from "ojs/ojdialog"; import "ojs/ojdialog"; import "ojs/ojinputtext"; import { ojButtonEventMap } from "ojs/ojbutton"; . . .
-
Deklarieren und initialisieren Sie in der Liste der Beobachtungen für die Felder im Dialogfeld "Erstellen".
class DashboardViewModel { . . . // Fields in Create dialog itemName: ko.Observable<string>; price: ko.Observable<number>; short_desc: ko.Observable<string>; quantity_instock: ko.Observable<number>; quantity_shipped: ko.Observable<number>; quantity: number; inputImageFile: string = 'css/images/product_images/jet_logo_256.png' . . . constructor() { . . . // Initialize fields in create dialog this.itemName = ko.observable<string>(); this.price = ko.observable<number>(); this.short_desc = ko.observable<string>(); this.quantity_instock = ko.observable<number>(); this.quantity_shipped = ko.observable<number>(); this.quantity = 0; // inputImageFile has already been initialized. } // Closing bracket for constructor method
-
Fügen Sie unter der Methode
constructor()
eine Methode namensshowCreateDialog
hinzu, um das Dialogfeld zu öffnen.. . . constructor() { . . . } // Closing bracket for constructor method // Open dialog public showCreateDialog(event: ojButtonEventMap["ojAction"]) { (document.getElementById("createDialog") as ojDialog).open(); }
-
Fügen Sie unter der von Ihnen erstellten Methode
showCreateDialog
eine Methode mit dem NamencreateItem
zum Weiterleiten der Dialogdaten hinzu, und fügen Sie einen Abschlussbefehl hinzu.// Create item and close dialog public createItem = async (event: ojButtonEventMap["ojAction"]) => { (document.getElementById("createDialog") as ojDialog).close(); }
-
Speichern Sie die Datei
dashboard.ts
.Der Code sollte in etwa wie in der Datei create-dashboard-ts.txt angezeigt werden.
-
Führen Sie im Terminalfenster Ihre Webanwendung aus, und testen Sie sie.
$ ojet serve
Der Bereich "Aktivitätselemente" enthält jetzt die Schaltfläche Erstellen. Wenn Sie darauf klicken, wird ein Dialogfeld geöffnet.
-
Lassen Sie das Terminalfenster und das Browserfenster, in dem die Webanwendung geöffnet wird.
Aufgabe 3: Weiterleitung der Dialogeingabe in ViewModel verarbeiten
Rufen Sie die Daten aus dem Dialogfeld in ViewModel ab, senden Sie sie mit der Abruf-API und der HTTP-Methode POST
an Ihren REST-Service, und aktualisieren Sie schließlich die RESTDataProvider
-Instanz mit der Methode mutate
der RESTDataProvider
.
-
Deklarieren Sie in der geöffneten Datei
dashboard.ts
in der MethodecreateItem
über dem Aufrufclose()
Variablen zur Aufnahme der Eingabewerte im Dialogfeld "Neues Element erstellen". Berechnen Sie außerdem den Wert vonquantity
basierend auf den Eingabewerten fürquantity_instock
undquantity_shipped
.// Create item and close dialog public createItem = async (event: ojButtonEventMap["ojAction"]) => { this.quantity = (Number(this.quantity_instock()) + Number(this.quantity_shipped())); const row = { name: this.itemName(), short_desc: this.short_desc(), price: this.price(), quantity_instock: this.quantity_instock(), quantity_shipped: this.quantity_shipped(), quantity: this.quantity, activity_id: this.activityKey, image: this.inputImageFile, }; (document.getElementById("createDialog") as ojDialog).close(); }
-
Erstellen Sie unter der Variablendeklaration
row
eine Anforderung zum Senden der Daten an den REST-Service.. . . const row = { . . . image: this.inputImageFile, }; // Create and send request to REST service to add row const request = new Request(this.restServerURLItems, { headers: new Headers({ "Content-type": "application/json; charset=UTF-8", }), body: JSON.stringify(row), method: "POST", }); const response = await fetch(request); const addedRow = await response.json(); . . .
-
Erstellen Sie unter der Variable
addedRow
einadd
-Mutate-Ereignis, und rufen Sie die MethodeRESTDataProvider
mutate
auf, um IhreRESTDataProvider
-Instanz darüber zu benachrichtigen, dass eine neue Zeile hinzugefügt wurde. Sie rufen auch die MethodeRESTDataProvider
refresh()
auf, um die Anzeige zu aktualisieren.. . . const addedRow = await response.json(); // Create add mutate event and call mutate method // to notify dataprovider that a row has been // added const addedRowKey = addedRow[this.keyAttributes]; const addedRowMetaData = { key: addedRowKey }; this.itemsDataProvider.mutate({ add: { data: [addedRow], keys: new Set([addedRowKey]), metadata: [addedRowMetaData], }, }); this.itemsDataProvider.refresh(); // Close dialog (document.getElementById("createDialog") as ojDialog).close(); }
-
Speichern Sie die Datei
dashboard.ts
.Der Code sollte in etwa in der Datei final-create-dashboard-ts.txt enthalten sein.
Aufgabe 4: Code testen und Datensatz erstellen
-
Zeigen Sie im Browser die dynamischen Änderungen in Ihrer Webanwendung an.
-
Klicken Sie in der Webanwendung auf die Baseball-Aktivität.
-
Klicken Sie auf Erstellen.
Das Dialogfeld Neues Element erstellen wird geöffnet.
-
Geben Sie Details für ein neues Element ein.
- Name:
SureFire Ball (Set of 4)
- Preis:
20.5
- Beschreibung:
Canvas balls for practice
- Menge: Bestand:
35
- Menge: Versand:
61
- Name:
-
Klicken Sie auf Weiterleiten.
Der Abschnitt wird aktualisiert, und das Element ist Teil der Liste der Baseball-Aktivitätselemente.
-
Klicken Sie in der Liste auf das Element SureFire Ball (Set mit 4), und zeigen Sie die zugehörigen Details 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.
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.
Create a form to create data records in an Oracle JET web app
F49683-01
February 2022
Copyright © 2022, Oracle and/or its affiliates.