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

Einführung

In diesem Tutorial wird gezeigt, wie Sie mit Ihrer virtuellen DOM-App für Oracle JavaScript Extension Toolkit (Oracle JET) einen Datensatz erstellen und an einen REST-Service senden können.

Ziele

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

Voraussetzungen

Eine Entwicklungsumgebung, die zum Erstellen virtueller Oracle JET-DOM-Anwendungen eingerichtet wird, einschließlich einer Installation von Node.js
Abschluss des vorherigen Tutorials in diesem Lernpfad: Daten aus einer REST-API in einer virtuellen Oracle JET-DOM-App abrufen

Aufgabe 1: Komponenten zur Verwaltung von Formularinformationen erstellen

Erstellen Sie neue Komponenten, in denen eine Schaltfläche angezeigt wird, 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: Öffnen des Dialogs bearbeiten

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 Dialogfelds zum Erstellen 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 wiedergibt, durch ein onojAction-Attribut, 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 ungefähr ItemActionsContainer.tsx.txt sein.
Importieren Sie oben in der geöffneten Datei CreateNewItemDialog.tsx die Oracle JET-Module für die Dialogkomponente.
```
import { h } from "preact";
import "ojs/ojdialog";
import { ojDialog } from "ojs/ojdialog";
```

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

type Props = {
  isOpened: boolean;
  closeDialog: (ref:any,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 useRef- und useEffect Preact-Hooks.

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 Preact Hook useRef abruft.

const CreateNewItemDialog = (props: Props) => {

  const createDialogRef = useRef<ojDialog>(null);

  const closeDialog = () => {
     props.closeDialog(createDialogRef,'create')
   }

return (

Verwenden Sie außerdem vor der return-Anweisung den Hook useEffect, 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,'create')
   }

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

return (

Speichern Sie die Datei CreateNewItemDialog.tsx. Ihr Code sollte ungefähr CreateNewItemDialog-1.tsx.txt sein.

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 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";
```

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

Außerdem ist ein Eintrag enthalten, der den Status "Offen" eines Dialogfelds "Bearbeiten" verwaltet, das wir in einem späteren Tutorial erstellen.

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

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

Bevor Sie die return-Anweisung ausführen, müssen Sie auch eine Funktion angeben, die ein geöffnetes Dialogfeld schließt.

const handleDialogClose = (ref, type) => {
   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 ungefähr ActivityItemContainer-1.tsx.txt sein.

Aufgabe 3: Weiterleiten der Dialog-Eingabe bearbeiten

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 CreateNewItemDialog.tsx-Datei den Hook useState von Preact.

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

Definieren Sie im Alias des Typs Props eine Eigenschaft createNewItem.

type Props = {
  isOpened: boolean;
  closeDialog: (ref:any,type:string) => void;
  createNewItem: (data:Partial<Item>,ref:any) => 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 return-Anweisung, und ersetzen Sie den Inhalt von <div slot="body"> durch ein oj-form-layout-Element und oj-input-text-Elemente für die Eingabefelder, um ein neues Element zu erstellen. Fügen Sie außerdem eine <div slot="footer"> mit einem oj-button-Element hinzu.

<oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" 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>

Fügen Sie vor der return-Anweisung die Funktionen onChangeHander und createItem ein, die von den Oracle JET-Elementen referenziert werden.

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

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

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

return (
  <span>. . .

Speichern Sie die Datei CreateNewItemDialog.tsx. Ihr Code sollte ungefähr CreateNewItemDialog-2.tsx.txt sein.

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, um die Methode createNewItem aufzunehmen, die Sie in der Komponente CreateNewItemDialog definiert haben.
```
<CreateNewItemDialog isOpened={isCreateOpened}  createNewItem={createItem} closeDialog={handleDialogClose} />
```

Fügen Sie vor der return-Anweisung eine neue createItem-Funktion hinzu, mit der ein neues Element erstellt und an den Backend-REST-Service gesendet wird.

const createItem = async (data: Partial<Item>, createDialogRef: any) => {
  //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 die die URL referenziert, mit der 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 ungefähr ActivityItemContainer-2.tsx.txt sein.

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 @oracle/ojet-cli 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 ein neues Element ein.
- Name: SureFire Ball (Set of 4)
- Preis: 20.5
- Beschreibung: Canvas balls for practice
- Menge: Vorrätig: 35
- Menge: Versand: 61
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 (Gruppe von 4), und zeigen Sie die zugehörigen Details an.

Beschreibung der Abbildung create_record.png
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 Oracle JET-Tooling-Batchjob zu beenden.

Nächster Schritt

Um mit dem nächsten Tutorial in diesem Lernpfad fortzufahren, klicken Sie hier.

Weitere Lernressourcen

Sehen Sie sich weitere Übungen unter docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning-Kanal YouTube zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um 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

F70628-01

December 2022