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

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.

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

  2. Suchen Sie das Element h3 mit id="itemsListHeader". Fügen Sie darunter ein oj-button-Element hinzu, und setzen Sie das Attribut on-oj-action auf "[[showCreateDialog]]".

    <h3 id="itemsListHeader">Activity Items</h3>
 <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>

  3. Suchen Sie das Element oj-bind-if test="[[itemSelected()]]", und fügen Sie darüber ein oj-dialog-Element hinzu. Setzen Sie das Attribut id 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">
. . .

  4. Fügen Sie im von Ihnen erstellten oj-dialog-Element zwei untergeordnete div-Elemente mit den Attributen slot="body" und slot="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>

  5. Fügen Sie ein oj-button-Element innerhalb des von Ihnen erstellten div slot="footer"-Elements hinzu, und legen Sie das Attribut on-oj-action="[[createItem]]" fest.

    <div slot="footer">
   <oj-button id="submitBtn" on-oj-action="[[createItem]]">Submit</oj-button>
</div>

  6. Fügen Sie im von Ihnen erstellten div slot="body"-Element jeweils ein oj-label-Element und ein oj-input-text-Element für die Werte Activity ID und Name 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 Wert itemName mit geschweiften Klammern. Dadurch wird das wechselseitige Binding angegeben, und der Benutzer kann den Wert überschreiben.

  7. Fügen Sie auch unter dem von Ihnen erstellten benutzerdefinierten HTML-Element oj-input-text id="createNewName" oj-input-text für die Werte Price, Description, Quantity: In-Stock und Quantity: 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>

  8. 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.

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

  2. 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";
. . .

  3. 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

  4. Fügen Sie unter der Methode constructor() eine Methode namens showCreateDialog 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();
}

  5. Fügen Sie unter der von Ihnen erstellten Methode showCreateDialog eine Methode mit dem Namen createItem 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();
}

  6. Speichern Sie die Datei dashboard.ts.

    Der Code sollte in etwa wie in der Datei create-dashboard-ts.txt angezeigt werden.

  7. 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.

    Dialogfeld "Neues Element erstellen"

    Beschreibung der Abbildung create_dialog.png

  8. 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.

  1. Deklarieren Sie in der geöffneten Datei dashboard.ts in der Methode createItem über dem Aufruf close() Variablen zur Aufnahme der Eingabewerte im Dialogfeld "Neues Element erstellen". Berechnen Sie außerdem den Wert von quantity basierend auf den Eingabewerten für quantity_instock und quantity_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();
}

  2. 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();
 . . .

  3. Erstellen Sie unter der Variable addedRow ein add-Mutate-Ereignis, und rufen Sie die Methode RESTDataProvider mutate auf, um Ihre RESTDataProvider-Instanz darüber zu benachrichtigen, dass eine neue Zeile hinzugefügt wurde. Sie rufen auch die Methode RESTDataProvider 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();

}

  4. 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

  1. Zeigen Sie im Browser die dynamischen Änderungen in Ihrer Webanwendung an.

  2. Klicken Sie in der Webanwendung auf die Baseball-Aktivität.

  3. Klicken Sie auf Erstellen.

    Das Dialogfeld Neues Element erstellen wird geöffnet.

  4. 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

  5. Klicken Sie auf Weiterleiten.

    Der Abschnitt wird aktualisiert, und das Element ist Teil der Liste der Baseball-Aktivitätselemente.

  6. Klicken Sie in der Liste auf das Element SureFire Ball (Set mit 4), und zeigen Sie die zugehörigen Details an.

    Dialogfeld "Neues Element erstellen"

    Beschreibung der Abbildung create_record.png

  7. Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.

  8. 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.