Datensätze in einer Oracle JET-Webanwendung löschen

Einführung

In diesem Tutorial wird gezeigt, wie Sie mit der Webanwendung Oracle JavaScript Extension Toolkit (Oracle JET) einen vorhandenen Datensatz löschen und die Änderung an einen REST-Service weiterleiten.

Ziele

Nach Abschluss dieses Tutorials haben Sie gelernt, wie Sie einen vorhandenen Datensatz löschen und die Änderung an einen REST-Service weiterleiten.

Voraussetzungen

Aufgabe 1: Schaltfläche "Löschen" in der Ansicht erstellen

  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 oj-button id="updateButton", und fügen Sie darunter ein oj-button-Element hinzu. Setzen Sie das Attribut on-oj-action auf "[[deleteItem]]" und das Attribut disabled auf "[[!itemSelected()]]".

    <oj-bind-if test="[[activitySelected()]]">
. . .
<oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
<!-- If itemSelected is set to false, disabled is true, and vice versa. -->
<oj-button id="updateButton" disabled="[[!itemSelected()]]" on-oj-action="[[showEditDialog]]">Update</oj-button>
<oj-button id="deleteButton" disabled="[[!itemSelected()]]" on-oj-action="[[deleteItem]]">Delete</oj-button>
<oj-list-view id="itemsList" 
. . .

  3. Speichern Sie die Datei dashboard.html.

    Der Code sollte in etwa in der Datei final-delete-dashboard-html.txt enthalten sein.

Aufgabe 2: Löschen von Datensätzen in ViewModel verarbeiten

Verwenden Sie die Abruf-API und die HTTP-Methode DELETE, um einen Datensatz aus dem REST-Service zu löschen. Verwenden Sie die Methode mutate von RESTDataProvider, um die RESTDataProvider-Instanz zu aktualisieren.

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

  2. Erstellen Sie in der Klasse DashboardViewModel unter Ihrem vorherigen Code, der Datensätze aktualisiert, eine Methode namens deleteItem.

    . . . 
public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
 . . .
 };

public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

};

  3. Deklarieren Sie in der von Ihnen erstellten deleteItem-Methode eine currentRow-Variable, und verwenden Sie eine if-Anweisung, um zu bestätigen, dass ein Element ausgewählt wurde.

    public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

 const currentRow = this.selectedRow;

 if (currentRow != null) {
   }

};

  4. Fügen Sie eine weitere if-Anweisung hinzu, um die Bestätigung des Benutzers zu prüfen. Fügen Sie dann Code hinzu, um eine Anforderung zum Löschen des ausgewählten Elements an den REST-Service zu senden, und aktualisieren Sie schließlich die RESTDataProvider-Instanz.

    public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

 let itemID = this.firstSelectedItem().data.id;

 const currentRow = this.selectedRow;
 if (currentRow != null) {
   let really = confirm("Are you sure you want to delete this item?");
   if (really) {
     // Create and send request to delete row on REST service
     const request = new Request(
       `${this.restServerURLItems}${itemID}`,
       { method: "DELETE" }
     );
     const response = await fetch(request);
     // Create remove mutate event and call mutate method
     // to notify data-provider consumers that a row has been
     // removed
     if (response.status === 200) {
       const removedRowKey = itemID;
       const removedRowMetaData = { key: removedRowKey };

       this.itemsDataProvider.mutate({
         remove: {
           data: [itemID],
           keys: new Set([removedRowKey]),
           metadata: [removedRowMetaData],
         },
       });
       this.itemsDataProvider.refresh();

     }
     else {
       alert("Delete failed with status " + response.status + " : " + response.statusText)
     }
   }
 }
}; // End deleteItem

  5. Speichern Sie die Datei dashboard.ts.

    Der Code sollte in etwa in der Datei final-delete-dashboard-ts.txt enthalten sein.

Aufgabe 3: Webanwendung ausführen und Datensatz löschen

  1. Führen Sie im Terminalfenster die Webanwendung aus.

    $ ojet serve

  2. Klicken Sie in der App auf die Baseball-Aktivität und 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, auf der Ihre aktive Webanwendung angezeigt wird.

  6. Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.

Aufgabe 4: (Optional) Webanwendung aus einer wiederhergestellten App ausführen

Wenn Sie die abgeschlossene Oracle JET-Webanwendung aus dem angegebenen Code ausführen möchten, können Sie die App aus der heruntergeladenen Archivdatei wiederherstellen. Um mit einer Oracle JET-App zu arbeiten, müssen Sie Projektabhängigkeiten, einschließlich Oracle JET-Tooling und der erforderlichen Librarys und Module, innerhalb der extrahierten App wiederherstellen.

  1. Laden Sie die Datei jet_rest_crud_application_final.zip herunter, und extrahieren Sie den Inhalt der abgeschlossenen App in den Ordner jet_rest_crud_application_final.

  2. Navigieren Sie im Terminalfenster zum Ordner jet_rest_crud_application_final, und stellen Sie die Oracle JET-Webanwendung wieder her.

    $ ojet restore

  3. Warten Sie auf eine Bestätigung.

    Success: Restore complete

    Die App kann jetzt ausgeführt werden.

  4. Führen Sie die Webanwendung aus, und testen Sie sie im Browser.

    $ ojet serve

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

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