Eliminare i record di dati in un'applicazione Oracle JET Virtual DOM

Introduzione

In questa esercitazione viene descritto come utilizzare l'applicazione DOM virtuale Oracle JavaScript Extension Toolkit (Oracle JET) per eliminare un record di dati esistente e sottomettere la modifica a un servizio REST.

Obiettivi

In questa esercitazione verrà descritto come eliminare un record di dati esistente e sottomettere la modifica a un servizio REST.

Prerequisiti

Task 1: Crea pulsante Elimina

  1. Passare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire il file ItemActionsContainer.tsx in un editor.

  2. Nell'alias di tipo Props, definire una proprietà delete aggiuntiva.

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

  3. Trovare l'elemento <oj-button id="updateButton" e aggiungere un elemento oj-button sotto di esso. Impostare l'attributo onojAction su {props.delete} e l'attributo disabled su 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. Salvare il file ItemActionsContainer.tsx.

    Il codice dovrebbe essere simile al file final-ItemActionsContainer.tsx.txt.

Task 2: Gestisci eliminazione record

Utilizzare l'API Fetch e il metodo HTTP DELETE per eliminare un record dal servizio REST. Utilizzare il metodo mutate di RESTDataProvider per aggiornare l'istanza RESTDataProvider.

  1. Passare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire il file ActivityItemContainer.tsx in un editor.

  2. Nella funzione ActivityItemContainer, sotto il codice precedente che aggiorna i record, creare un metodo denominato deleteItem.

    Questo metodo richiede all'utente la conferma dell'eliminazione di un elemento e, alla conferma riuscita, crea una richiesta DELETE che invia al servizio REST. Se l'operazione DELETE è riuscita, il metodo richiama un evento RESTDataProvider mutate per notificare ai consumer del provider di dati che un elemento è stato eliminato.

    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. Nell'istruzione return aggiornare l'elemento ItemActionsContainer con un attributo delete.

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

  4. Salvare il file ActivityItemContainer.tsx.

    Il codice dovrebbe essere simile al file final-delete-ActivityItemContainer.tsx.txt.

Task 3: Eseguire l'applicazione DOM virtuale ed eliminare un record

  1. Nella finestra del terminale, esegui la tua applicazione DOM virtuale. 
    npx ojet serve

  2. Nell'app fare clic sull'attività Baseball, quindi sull'elemento SureFire Ball (set di 4).

  3. Fare clic sul pulsante Elimina. Viene visualizzata una finestra di conferma.

  4. Fare clic su OK.

    La sezione viene aggiornata e l'elemento è stato eliminato.

  5. Chiudere la finestra o la scheda del browser che visualizza l'applicazione DOM virtuale in esecuzione.

  6. Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.

Task 4: (facoltativo) eseguire un'applicazione DOM virtuale da un'applicazione ripristinata

Se si desidera eseguire l'applicazione DOM virtuale Oracle JET completata dal codice fornito, è possibile ripristinare l'applicazione dal file di archivio scaricato. Per utilizzare un'applicazione DOM virtuale Oracle JET "stripped and zipped", è necessario ripristinare le dipendenze del progetto, inclusi gli strumenti Oracle JET e le librerie e i moduli richiesti, all'interno dell'applicazione estratta.

  1. Scaricare il file JET-Virtual-DOM-app-final.zip ed estrarre il contenuto dell'applicazione completata nella directory JET-Virtual-DOM-app-final.
  2. Nella finestra del terminale, passare alla directory JET-Virtual-DOM-app-final e ripristinare l'applicazione Oracle JET Virtual DOM. 
    npm install
  3. Attendere la conferma. 
    Success: Restore complete

    L'app è pronta per essere eseguita.

  4. Esegui l'app DOM virtuale e prova nel browser. 
    npx ojet serve

  5. Chiudere la finestra o la scheda del browser che visualizza l'applicazione DOM virtuale in esecuzione.

  6. Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.

Passo successivo

In questa esercitazione viene descritto il modulo CRUD Operations Using a REST Service in questo percorso formativo sulla creazione di applicazioni Web DOM virtuali.

È possibile passare all'esercitazione successiva nel percorso di apprendimento Impostare un ambiente di test in Oracle JET, nel modulo Test end-to-end in Oracle JET.

Puoi anche tornare alla pagina principale del percorso di apprendimento DOM virtuale per accedere a tutti i moduli sulla creazione di app DOM virtuali, nonché ad altri percorsi di apprendimento.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di formazione gratuiti sul canale YouTube di Oracle Learning. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare Oracle Help Center.