Datensätze in einer virtuellen DOM-App von Oracle JET aktualisieren

Einführung

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

Ziele

In diesem Tutorial erfahren Sie, wie Sie einen vorhandenen Datensatz aktualisieren und an einen REST-Service weiterleiten.

Voraussetzungen

Aufgabe 1: Komponenten zur Verwaltung von Formularinformationen erstellen

Erstellen Sie eine neue Komponente, die ein Dialogfeld anzeigt, in dem Sie die Funktionalität zum Aktualisieren eines Records aufrufen können.

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

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

    import { h } from "preact";

type Props = {
  message?: string;
};

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

export default EditItemDialog;

Aufgabe 2: Dialog öffnen

Deklarieren Sie den Typ und die Funktion in der Komponente ItemActionsContainer, um die Komponente EditItemDialog aufzurufen, die die Funktionalität zum Aktualisieren eines Datensatzes enthält.

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

  2. Importieren Sie oben in der Datei die Hooks useState und useEffect Preact, definieren Sie die zusätzlichen Eigenschaften in einem Alias des Typs Props, den Sie zur Verwendung der Komponente EditItemDialog benötigen, und definieren Sie dann einen Alias des Typs Item.

     import { h } from "preact";
 import "ojs/ojbutton";
 import { useState, useEffect } from "preact/hooks";

 type Props = {
     create: () => void;
     edit: () => void;
     itemSelected: Partial<Item>;
 };

 type Item = {
     id: number;
     name: string;
     short_desc?: string;
     price?: number;
     quantity?: number;
     quantity_shipped?: number;
     quantity_instock?: number;
     activity_id?: number;
     image?: string;
 };

  3. Verwenden Sie vor der return-Anweisung die Preact-Hooks, die Sie importiert haben, um zu bestimmen, ob ein Aktivitätselement ausgewählt ist.

     const ItemActionsContainer = (props: Props) => {
     const [hideActions, setHideActions] = useState<boolean>(true);

         if (props.itemSelected?.id) {
     console.log("Selected: " + JSON.stringify(props.itemSelected));
     }

     useEffect(() => {
     if (props.itemSelected?.id) {
         setHideActions(false);
     } else {
         setHideActions(true);
     }
     }, [props.itemSelected]);

     return (

  4. Fügen Sie in der Anweisung return ein neues oj-button-Element mit einem onojAction-Attribut hinzu, das die Eigenschaft edit referenziert.

    const ItemActionsContainer = (props: Props) => {
 return (
   <div>
     <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
     <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
   </div>

    Speichern Sie die Datei ItemActionsContainer.tsx. Ihr Code sollte ItemActionsContainer.tsx.txt ähneln

  5. Importieren Sie oben in der Datei EditItemDialog.tsx die Module für die Oracle JET Dialog-Komponente sowie die Hooks useRef, useEffect, MutableRef und useState Preact.

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

  6. Erstellen Sie im Alias des Typs Props die folgenden Eigenschaften.

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

  7. 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="editDialog" ref={editDialogRef as MutableRef<ojDialog>} 
                 dialogTitle="Update Item Details" onojClose={closeDialog} cancelBehavior="icon">
         <div slot="body">
         <oj-label-value labelEdge="inside">
             <oj-label for="itemid" slot="label">
             Item ID
             </oj-label>
             <div id="itemid" slot="value" class="slot-line">
             {editFormData?.id}
             </div>
         </oj-label-value>
     <oj-form-layout>
         <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler} value={editFormData?.name}></oj-input-text>
         <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler} value={editFormData?.price}></oj-input-text>
         <oj-input-text id="short_desc" labelHint="Description" 
                     onvalueChanged={onChangeHandler} value={editFormData?.short_desc}></oj-input-text>
         </oj-form-layout>
         </div>
         <div slot="footer">
         <oj-button id="submitBtn" onojAction={editItem}>
             Submit
         </oj-button>
         </div>
     </oj-dialog>
 </span>
 );

  8. Fügen Sie vor der Anweisung return die Methoden hinzu, mit denen die Attributwerte in den untergeordneten benutzerdefinierten Elementen der benutzerdefinierten Elementreferenz oj-dialog angegeben werden. Beispiel: Die Methode onChangeHandler wird aufgerufen, wenn eine Komponente oj-input-text eine Änderung über das Attribut onvalueChanged erkennt.

     const EditItemDialog = (props: Props) => {
     const editDialogRef = useRef<ojDialog>();
     const [editFormData, setEditFormData] = useState<Partial<Item>>({});

     const onChangeHandler = (event: any) => {
     if (event.detail.updatedFrom === "internal") {
         setEditFormData({
         ...editFormData,
         [event.currentTarget.id]: event.detail.value,
         });
     }
     };

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

     const editItem = () => {
     console.log("data: " + JSON.stringify(editFormData));
     props.editItem(editFormData, editDialogRef as MutableRef<ojDialog>);
     };

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

     return (

  9. Definieren Sie vor der Deklaration der Funktion EditItemDialog einen Alias des Typs Item, der Felder für die Daten enthält, die Sie aktualisieren und an den REST-Service senden.

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

 const EditItemDialog = (props: Props) => {

    Speichern Sie die Datei EditItemDialog.tsx. Ihr Code sollte EditItemDialog.tsx.txt ähneln

Aufgabe 3: Komponente EditItemDialog verbrauchen

  1. Öffnen Sie die Datei ActivityItemContainer.tsx, und importieren Sie die Komponente EditItemDialog, die Sie in der letzten Aufgabe erstellt haben, sowie den Preact-Hook MutableRef und das Oracle JET-Modul für die Dialogkomponente.

     import { useState, useCallback, MutableRef, useRef } from "preact/hooks";
 import EditItemDialog from "./EditItemDialog";

  2. Aktualisieren Sie im Props-Typalias den Eintrag für data, um den any-Typ für RESTDataProvider zu unterstützen, und löschen oder kommentieren Sie den ActivityItem-Typ aus, den die Komponente nicht mehr verwendet.

     type Props = {
   data?: RESTDataProvider<any, any>;
   selectedActivity: Item | null;
  	  onItemChanged: (item: Item) => void;
 };

// type ActivityItem = {
 //   id: number;
 //   name: string;
 //   items: Array<Item>;
 //   short_desc: string;
 //   image: string;
 // };

  3. Aktualisieren Sie in der return-Anweisung das Element ItemActionsContainer mit den Attributwerten itemSelected und edit. Fügen Sie nach dem Element CreateNewItemDialog ein neues Element für die Komponente EditItemDialog hinzu, die Sie importiert haben.

     <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer create={openCreateDialog} itemSelected={activityItemValue} edit={openEditDialog} />
       . . . 
</div>
 <CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
 <EditItemDialog isOpened={isEditOpened} editItem={editItem} closeDialog={handleDialogClose} itemData={itemData} />
  . . .

  4. Fügen Sie vor der return-Anweisung die Funktion openEditDialog hinzu, um das Dialogfeld "Bearbeiten" zu öffnen, und die Funktion editItem, um das aktualisierte Aktivitätselement an den REST-Service zu senden.

     const openEditDialog = () => {
     console.log("Item: " + JSON.stringify(itemData));
     setIsEditOpened(true);
     console.log("Edit dialog opened");
     };

 const editItem = async (newItemData:Partial<Item>, editDialogRef = useRef<ojDialog>()) => {
     if (newItemData != null) {
     const row = {
         itemId: newItemData.id,
         name: newItemData.name,
         price: newItemData.price,
         short_desc: newItemData.short_desc,
     };

     // Create and send request to update row on rest service
     const request = new Request(`${restServerURLItems}${itemData.id}`, {
         headers: new Headers({
         "Content-type": "application/json; charset=UTF-8",
         }),
         body: JSON.stringify(row),
         method: "PUT",
     });
     const response = await fetch(request);
     const updatedRow = await response.json();

     // Create update mutate event and call mutate method
     // to notify dataprovider consumers that a row has been
     // updated
     const updatedRowKey = itemData.id;
     const updatedRowMetaData = { key: updatedRowKey };
     props.data?.mutate({
         update: {
         data: [updatedRow],
         keys: new Set([updatedRowKey]),
         metadata: [updatedRowMetaData],
         },
     });
     } // End if statement
     console.log("Edited item");
     editDialogRef.current?.close();
     };

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

Aufgabe 4: Code testen und Datensatz aktualisieren

  1. Wechseln Sie im Terminalfenster in das Verzeichnis JET-Virtual-DOM-app, und führen Sie die virtuelle DOM-App aus.

     npx ojet serve
  2. Zeigen Sie im Browser die dynamischen Änderungen in Ihrer virtuellen DOM-App an.
  3. Klicken Sie in der virtuellen DOM-App auf die Baseball-Aktivität und dann auf das Element SureFire Ball (4er Set).

  4. Klicken Sie auf die Schaltfläche Aktualisieren.

    Das Dialogfeld "Elementdetails aktualisieren" wird angezeigt.

  5. Ändern Sie den Preis von 20.5 in 21, und klicken Sie auf Weiterleiten.

    Der Abschnitt wird aktualisiert, und der Preis des Artikels wurde aktualisiert.

    Artikeldetails aktualisieren

  6. Schließen Sie das Browserfenster oder die Registerkarte, in der die ausgeführte virtuelle DOM-App angezeigt wird.
  7. 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.

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.