Datensätze in einer virtuellen DOM-App von Oracle JET löschen

Einführung

In diesem Tutorial erfahren Sie, wie Sie mit der virtuellen DOM-App von Oracle JavaScript Extension Toolkit (Oracle JET) einen vorhandenen Datensatz löschen und die Änderung an einen REST-Service weiterleiten.

Ziele

In diesem Tutorial erfahren Sie, wie Sie einen vorhandenen Datensatz löschen und die Änderung an einen REST-Service weiterleiten.

Voraussetzungen

Aufgabe 1: Schaltfläche "Löschen" erstellen

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

  2. Definieren Sie im Typalias Props eine zusätzliche Eigenschaft delete.

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

  3. Suchen Sie das Element <oj-button id="updateButton", und fügen Sie ein Element oj-button darunter hinzu. Setzen Sie das Attribut onojAction auf {props.delete} und das Attribut disabled auf hideActions.

    return (
   <div>
      <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
      <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      <oj-button id="deleteButton" disabled={hideActions} onojAction={props.delete}>Delete</oj-button>
   </div>

  4. Speichern Sie die Datei ItemActionsContainer.tsx.

    Der Code sollte der Datei final-ItemActionsContainer.tsx.txt ähneln.

Aufgabe 2: Löschen von Datensätzen verarbeiten

Mit der Fetch-API und der HTTP-Methode DELETE können Sie einen Datensatz aus dem REST-Service löschen. Verwenden Sie die Methode mutate der RESTDataProvider, um die RESTDataProvider-Instanz zu aktualisieren.

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

  2. Erstellen Sie in der Funktion ActivityItemContainer unter dem vorherigen Code, der Datensätze aktualisiert, eine Methode mit dem Namen deleteItem.

    Diese Methode fordert eine Bestätigung des Benutzers an, ein Element zu löschen, und erstellt nach erfolgreicher Bestätigung eine DELETE-Anforderung, die an den REST-Service gesendet wird. Wenn der Vorgang DELETE erfolgreich ist, ruft die Methode ein Ereignis RESTDataProvider mutate auf, um Datenprovider-Consumer zu benachrichtigen, dass ein Element gelöscht wurde.

    const deleteItem = async () => {
  const really = confirm("Do you really want to delete this item?");
  if (really) {
    // Create and send request to REST service to delete item
    const request = new Request(`${restServerURLItems}${itemData.id}`, {
       method: "DELETE",
     });
    const response = await fetch(request);
    // Call  mutate method to notify dataprovider consumers that an 
    // item has been removed
    if (response.status === 200) {
      const removedRowKey = itemData.id;
      const removedRowMetaData = { key: removedRowKey };

      props.data?.mutate({
        remove: {
          data: [itemData.id],
          keys: new Set([removedRowKey]),
          metadata: [removedRowMetaData],
         },
       });
      } 
      else {
          alert(
             "Delete failed with status " 
             + response.status + " : " + response.statusText
          );
     }
  console.log("Deleted item.");
  } 
  else {
    console.log("OK, we canceled that delete.");
   }
  };

  3. Aktualisieren Sie in der return-Anweisung das Element ItemActionsContainer mit einem Attribut delete.

     <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer edit={openEditDialog} delete={deleteItem} itemSelected={activityItemValue} create={openCreateDialog} />
       . . . 
 </div>

  4. Speichern Sie die Datei ActivityItemContainer.tsx.

    Der Code sollte der Datei final-delete-ActivityItemContainer.tsx.txt ähneln.

Aufgabe 3: Virtuelle DOM-App ausführen und Datensatz löschen

  1. Führen Sie im Terminalfenster Ihre virtuelle DOM-App aus. 
    npx ojet serve

  2. Klicken Sie in der App auf die Aktivität Baseball, und klicken Sie dann auf das Element SureFire Ball (Set mit 4).

  3. Klicken Sie auf die Schaltfläche Löschen. Ein Bestätigungsfenster wird geöffnet.

  4. Klicken Sie auf OK.

    Der Abschnitt wird aktualisiert, und das Element wurde gelöscht.

  5. Schließen Sie das Browserfenster oder die Registerkarte, in der die ausgeführte virtuelle DOM-App angezeigt wird.

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

Aufgabe 4: (Optional) Virtuelle DOM-App aus einer wiederhergestellten App ausführen

Wenn Sie die ausgefüllte virtuelle Oracle JET-DOM-App aus dem bereitgestellten Code ausführen möchten, können Sie die App aus der heruntergeladenen Archivdatei wiederherstellen. Um mit einer virtuellen Oracle JET-DOM-App zu arbeiten, die "gestrippt und komprimiert" ist, müssen Sie Projektabhängigkeiten, einschließlich Oracle JET-Tools und den erforderlichen Librarys und Modulen, in der extrahierten App wiederherstellen.

  1. Laden Sie die Datei JET-Virtual-DOM-app-final.zip herunter, und extrahieren Sie den Inhalt der abgeschlossenen App in das Verzeichnis JET-Virtual-DOM-app-final.
  2. Navigieren Sie im Terminalfenster zum Verzeichnis JET-Virtual-DOM-app-final, und stellen Sie die virtuelle Oracle JET-DOM-App wieder her. 
    npm install
  3. Auf Bestätigung warten 
    Success: Restore complete

    Die App ist bereit zur Ausführung.

  4. Führen Sie die virtuelle DOM-App aus und testen Sie sie im Browser. 
    npx ojet serve

  5. Schließen Sie das Browserfenster oder die Registerkarte, in der die ausgeführte virtuelle DOM-App angezeigt wird.

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

In diesem Tutorial wird das Modul CRUD-Vorgänge mit einem REST-Service in diesem Lernpfad zum Erstellen virtueller DOM-Webanwendungen abgeschlossen.

Sie können mit dem nächsten Tutorial im Lernpfad Testumgebung in Oracle JET einrichten im Modul End-to-End-Tests in Oracle JET fortfahren.

Sie können auch zur Hauptseite des virtuellen DOM-Lernpfads zurückkehren, um auf alle Module zum Erstellen virtueller DOM-Apps sowie auf andere Lernpfade 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.