Formular zum Erstellen von Datensätzen in einer virtuellen Oracle JET-DOM-App erstellen

Einführung

In diesem Tutorial erfahren Sie, wie Sie mit Ihrer virtuellen DOM-App von Oracle JavaScript Extension Toolkit (Oracle JET) einen Datensatz erstellen und an einen REST-Service weiterleiten.

Ziele

In diesem Tutorial erfahren Sie, wie Sie Daten in einen REST-Service schreiben.

Voraussetzungen

Eine Entwicklungsumgebung zum Erstellen virtueller Oracle JET-DOM-Apps, die eine Installation von Node.js umfasst
Abschluss des vorherigen Tutorials in diesem Lernpfad: Daten aus einer REST-API in einer Oracle JET Virtual DOM-App abrufen

Aufgabe 1: Komponenten zur Verwaltung von Formularinformationen erstellen

Erstellen Sie neue Komponenten, die eine Schaltfläche anzeigen, mit der die Funktionalität zum Erstellen eines neuen Datensatzes aufgerufen wird. Eine ItemActionsContainer-Komponente enthält die Schaltfläche, mit der virtuelle DOM-Anwendungsbenutzer die Komponente CreateNewItemDialog aufrufen können, die die Funktionalität zum Erstellen eines neuen Datensatzes enthält.

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/ActivityItem, erstellen Sie eine neue Datei CreateNewItemDialog.tsx, und öffnen Sie sie in einem Editor.

Fügen Sie die Platzhaltereinträge hinzu, die einen Funktionsnamen (CreateNewItemDialog) für die neue Komponente definieren.

import { h } from 'preact';

type Props = {
  message?: string;
};

const CreateNewItemDialog = (props: Props) => {
  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <p>content</p>
    </div>
  );
};

export default CreateNewItemDialog;

Erstellen Sie im selben Verzeichnis eine ItemActionsContainer.tsx-Datei, und öffnen Sie sie in einem Editor.

Fügen Sie die Platzhaltereinträge hinzu, die einen Funktionsnamen (ItemActionsContainer) für die neue Komponente definieren.

import { h } from 'preact';

type Props = {
  message?: string;
};

const ItemActionsContainer = (props: Props) => {
  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <p>content</p>
    </div>
  );
};

export default ItemActionsContainer;

Aufgabe 2: Dialog öffnen

Importieren Sie die Oracle JET-Module, und deklarieren Sie die Funktionen, mit denen die virtuelle Oracle JET-DOM-App ein Dialogfeld erfolgreich öffnen kann.

Importieren Sie oben in der geöffneten Datei ItemActionsContainer.tsx das Oracle JET-Modul für die Schaltflächenkomponente.
```
import { h } from 'preact';
import 'ojs/ojbutton';
```
Definieren Sie eine Eigenschaft create im Alias des Typs Props, um das Öffnen eines Erstellungsdialogfelds zu verwalten.
```
import { h } from 'preact';
import 'ojs/ojbutton';

type Props = {
  create: () => void;
};
```
Ersetzen Sie in der return-Anweisung das vorhandene div-Element durch ein neues div-Element, das ein oj-button-Element mit einem onojAction-Attribut wiedergibt, das die create-Eigenschaft referenziert.
```
const ItemActionsContainer = (props: Props) => {
   return (
      <div>
         <oj-button id="createButton" onojAction={props.create}>
         Create
         </oj-button>
      </div>
```
Speichern Sie die Datei ItemActionsContainer.tsx. Ihr Code sollte ItemActionsContainer.tsx.txt ähneln

Importieren Sie oben in der geöffneten Datei CreateNewItemDialog.tsx die Oracle JET-Module für die Dialogkomponente und den MutableRef-Hook.

import { h } from 'preact';
import 'ojs/ojdialog';
import { ojDialog } from 'ojs/ojdialog';
import { MutableRef } from 'preact/hooks';

Definieren Sie die Eigenschaften isOpened und closeDialog im Alias des Typs Props.

type Props = {
  isOpened: boolean;
  closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
};

Ersetzen Sie in der return-Anweisung das vorhandene div-Element durch ein span-Element, das das benutzerdefinierte oj-dialog-Element umschließt.

   return (
   <span>
      <oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
         <div slot="body">
         <p>dialog open</p>
         </div>
      </oj-dialog>
   </span>
   );

Importieren Sie oben in der Datei CreateNewItemDialog.tsx die Preact-Hooks useRef und useEffect.

import { h } from 'preact';
import { useRef, useEffect } from 'preact/hooks';
import 'ojs/ojdialog';
import { ojDialog } from 'ojs/ojdialog';

Deklarieren Sie vor der return-Anweisung die Variablen createDialogRef und closeDialog, die den Verweis enthalten, den der useRef Preact-Hook abruft.

const CreateNewItemDialog = (props: Props) => {

   const createDialogRef = useRef<ojDialog>(null);

   const closeDialog = () => {
      props.closeDialog(createDialogRef as MutableRef<ojDialog>, "create");
    }

 return (
	

Verwenden Sie auch vor der return-Anweisung den useEffect-Hook, um einen Ausdruck zu schreiben, der einen Wert für die Eigenschaft isOpened festlegt.

 const CreateNewItemDialog = (props: Props) => {
     const createDialogRef = useRef<ojDialog>(null);

     const closeDialog = () => {
     props.closeDialog(createDialogRef as MutableRef<ojDialog>, "create");
     }

     useEffect(() => {
      props.isOpened
         ? createDialogRef.current?.open()
         : createDialogRef.current?.close();
     }, [props.isOpened]);

 return (

Speichern Sie die Datei CreateNewItemDialog.tsx. Ihr Code sollte CreateNewItemDialog-1.tsx.txt ähneln

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/ActivityItem, und öffnen Sie die Datei ActivityItemContainer.tsx.

Importieren Sie oben in ActivityItemContainer.tsx die Komponenten ItemActionsContainer und CreateNewItemDialog, die Sie gerade erstellt haben, und importieren Sie auch die Module für die Komponenten "Oracle JET-Formularlayout" und "Eingabetext".

import ItemActionsContainer from "./ItemActionsContainer";
import CreateNewItemDialog from "./CreateNewItemDialog";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
import { ojDialog } from "ojs/ojdialog";
import { MutableRef} from "preact/hooks"

Erstellen Sie nach der Deklaration der Funktion ActivityItemContainer Variablen, die den useState-Hook von Preact und eine Funktion (openCreateDialog) verwenden, um das Dialogfeld zu öffnen.

Wir enthalten auch einen Eintrag, der den offenen Status eines Bearbeitungsdialogs verwaltet, den wir in einem späteren Tutorial erstellen.

const ActivityItemContainer = (props: Props) => {
 const [isCreateOpened, setIsCreateOpened] = useState<boolean>(false);
 const [isEditOpened, setIsEditOpened] = useState<boolean>(false);

  const openCreateDialog = () => {
     console.log("CreateNewItemDialog called");
     setIsCreateOpened(true);
  };

Nehmen Sie vor der return-Anweisung auch eine Funktion auf, die ein geöffnetes Dialogfeld schließt.

const handleDialogClose = (ref: MutableRef<ojDialog>, type: string) => {
   type === "create" ? setIsCreateOpened(false) : setIsEditOpened(false);
   ref.current.close();
};

return (
   <div id="activityItemsContainer" class=. . .>

Nehmen Sie in der return-Anweisung die neu erstellten Komponenten ItemActionsContainer und CreateNewItemDialog auf.

return (
<div id="activityItemsContainer" . . .>
 <div id="container">
   <h3>Activity Items</h3>
    <ItemActionsContainer create={openCreateDialog} />
    <CreateNewItemDialog isOpened={isCreateOpened} closeDialog={handleDialogClose} />

Speichern Sie die Datei ActivityItemContainer.tsx. Ihr Code sollte ActivityItemContainer-1.tsx.txt ähneln

Aufgabe 3: Weiterleitung der Dialogeingabe

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/ActivityItem, und öffnen Sie die Datei CreateNewItemDialog.tsx.

Importieren Sie oben in der geöffneten Datei CreateNewItemDialog.tsx den Preact-Hook useState.

import { ojDialog } from 'ojs/ojdialog';
import { MutableRef, useRef, useEffect, useState } from "preact/hooks"

Definieren Sie im Alias des Typs Props eine Eigenschaft createNewItem.

type Props = {
     isOpened: boolean;
     closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
     createNewItem: (data: Partial<Item>, ref: MutableRef<ojDialog>) => void;
 };

Definieren Sie einen Alias des Typs Item, der Felder für die Daten enthält, die Sie an den REST-Service senden.

type Item = {
  name?: string | undefined;
  short_desc?: string;
  price?: number;
  quantity_shipped?: number;
  quantity_instock?: number;
};

Suchen Sie das benutzerdefinierte Element oj-dialog in der Anweisung return, und ersetzen Sie den Inhalt von <div slot="body"> durch ein Element oj-form-layout und Elemente oj-input-text für die Eingabefelder, um ein neues Element zu erstellen. Nehmen Sie auch eine <div slot="footer"> mit einem oj-button-Element auf.

<oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
    <div slot="body">
       <oj-form-layout>
       <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="short_desc" labelHint="Description" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="quantity_instock" labelHint="Quantity: In-Stock" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="quantity_shipped" labelHint="Quantity: Shipped" onvalueChanged={onChangeHandler}></oj-input-text>
       </oj-form-layout>
    </div>
    <div slot="footer">
       <oj-button id="submitBtn" onojAction={createItem}>Submit</oj-button>
    </div>
 </oj-dialog>

Verwenden Sie vor der return-Anweisung den Hook useState, und nehmen Sie die Funktionen onChangeHander und createItem auf, die von den Oracle JET-Elementen referenziert werden.

const [formData, setFormData] = useState<Partial<Item>>({});

 const onChangeHandler = (event: any) => {
    setFormData({
       ...formData,
       [event.currentTarget.id]: event.detail.value,
    });
 }

 const createItem = () => {
    console.log("data: " + JSON.stringify(formData));
    props.createNewItem(formData, createDialogRef as MutableRef<ojDialog>);
 };

 return (
   <span>. . .

Speichern Sie die Datei CreateNewItemDialog.tsx. Ihr Code sollte CreateNewItemDialog-2.tsx.txt ähneln

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/ActivityItem, und öffnen Sie die Datei ActivityItemContainer.tsx.
Aktualisieren Sie in der return-Anweisung die Klasse CreateNewItemDialog so, dass sie die Methode createNewItem enthält, die Sie in der Komponente CreateNewItemDialog definiert haben.
```
<CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
```

Nehmen Sie vor der return-Anweisung eine neue createItem-Funktion auf, die ein neues Element erstellt und an den Backend-REST-Service sendet.

const createItem = async (data: Partial<Item>, createDialogRef: MutableRef<ojDialog>) => {
  //process create command and close dialog on success
  if (data?.name) {
     let quantity = Number(data.quantity_instock) + Number(data.quantity_shipped);
     const row = {
       name: data.name,
       short_desc: data.short_desc,
       price: data.price,
       quantity_instock: data.quantity_instock,
       quantity_shipped: data.quantity_shipped,
       quantity: quantity,
       activity_id: props.selectedActivity?.id,
       image: "css/images/product_images/jet_logo_256.png",
     };

     // Create and send request to REST service to add row
     const request = new Request(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();

     activityItemDataProvider?.refresh();
     // Close dialog
     console.log("Created new item");
     createDialogRef.current.close();
   }
 };

Definieren Sie nach der Deklaration der Funktion ActivityItemContainer eine Variable, die den URL referenziert, mit dem das Element an den REST-Service gesendet werden soll.

const ActivityItemContainer = (props: Props) => {
    const activityItemDataProvider = props.data;
    const restServerURLItems = "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/" + props.selectedActivity?.id + "/items/";

Speichern Sie die Datei ActivityItemContainer.tsx. Ihr Code sollte ActivityItemContainer-2.tsx.txt ähneln

Aufgabe 4: Code testen und Datensatz erstellen

Wechseln Sie im Terminalfenster in das Verzeichnis JET-Virtual-DOM-app, und führen Sie die virtuelle DOM-App aus.
```
npx ojet serve
```
Zeigen Sie im Browser die dynamischen Änderungen in Ihrer virtuellen DOM-App an.
Klicken Sie in der virtuellen DOM-App auf die Baseball-Aktivität.
Klicken Sie auf Erstellen.

Das Dialogfeld Neues Element erstellen wird geöffnet.
Geben Sie Details für einen neuen Artikel ein.
- Name: SureFire Ball (Set of 4)
- Preis: 20.5
- Beschreibung: Canvas balls for practice
- Menge: Auf Lager: 35
- Menge: Geliefert: 61
Klicken Sie auf Weiterleiten.

Der Abschnitt wird aktualisiert, und das Element ist Teil der Liste der Baseballaktivitä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, in der die ausgeführte virtuelle DOM-App angezeigt wird.
Drücken Sie im Terminalfenster Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Batchjob für Oracle JET-Tooling zu beenden.

Nächsten Schritt

Fahren Sie mit dem nächsten Tutorial in diesem Modul fort.

Dieses Tutorial ist Teil des Moduls CRUD-Vorgänge mit einem REST-Service.

Daten aus der REST-API in Oracle JET abrufen
Formular zum Erstellen von Datensätzen in einer Oracle JET Virtual DOM-App erstellen
Datensätze in einer Oracle JET Virtual DOM-App aktualisieren
Datensätze in einer Oracle JET Virtual DOM-App löschen

Sie können zur Hauptseite des virtuellen DOM-Lernpfads zurückkehren, um auf alle Module zum Erstellen virtueller DOM-Apps zuzugreifen.

Weitere Lernressourcen

Sehen Sie sich weitere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning YouTube-Kanal zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um ein Oracle Learning Explorer zu werden.

Die Produktdokumentation finden Sie im Oracle Help Center.

Titel und Copyright-Informationen

Create a form to create data records in an Oracle JET virtual DOM app

F70641-02

Oracle und/oder verbundene Unternehmen.