Eliminare i record di dati in un'applicazione Web Oracle JET

Introduzione

Questa esercitazione descrive come utilizzare l'applicazione Web Oracle JavaScript Extension Toolkit (Oracle JET) per eliminare un record di dati esistente e sottomettere la modifica a un servizio REST.

Obiettivi

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

Prerequisiti

Task 1: Crea un pulsante Elimina nella vista

  1. Passare alla directory JET_Web_Application/src/ts/views e aprire il file dashboard.html in un editor.

  2. Trovare l'elemento oj-button id="updateButton" e aggiungere un elemento oj-button sottostante. Impostare l'attributo on-oj-action su "[[deleteItem]]" e l'attributo disabled su "[[!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. Salvare il file dashboard.html.

    Il codice dovrebbe risultare simile al file final-delete-dashboard-html.txt.

Task 2: Gestione eliminazione record in ViewModel

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_Web_Application/src/ts/viewModels e aprire il file dashboard.ts in un editor.

  2. All'interno della classe DashboardViewModel, sotto il codice precedente che aggiorna i record, creare un metodo denominato deleteItem.

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

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

};

  3. Nel metodo deleteItem creato, dichiarare una variabile currentRow e utilizzare un'istruzione if per confermare che un elemento è stato selezionato.

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

 const currentRow = this.selectedRow;

 if (currentRow != null) {
   }

};

  4. Aggiungere un'altra istruzione if per controllare la conferma dell'utente, quindi aggiungere il codice per inviare una richiesta di eliminazione dell'elemento selezionato al servizio REST e infine aggiornare l'istanza RESTDataProvider.

    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. Salvare il file dashboard.ts.

    Il codice dovrebbe risultare simile al file final-delete-dashboard-ts.txt.

Task 3: eseguire l'applicazione Web ed eliminare un record

  1. Nella finestra del terminale eseguire l'applicazione Web.

    $ ojet serve

  2. Nell'applicazione fare clic sull'attività Baseball, quindi fare clic 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 in cui viene visualizzata l'applicazione Web in esecuzione.

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

Task 4: (facoltativo) Esecuzione di un'applicazione Web da un'applicazione ripristinata

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

  1. Scaricare il file jet_rest_crud_application_final.zip ed estrarre il contenuto dell'applicazione completata nella cartella jet_rest_crud_application_final.

  2. Nella finestra del terminale, accedere alla cartella jet_rest_crud_application_final e ripristinare l'applicazione Web Oracle JET.

    $ ojet restore

  3. Attendere la conferma.

    Success: Restore complete

    L'applicazione è pronta per essere eseguita.

  4. Eseguire l'applicazione Web ed eseguire il test nel browser.

    $ ojet serve

  5. Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.

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

Altre risorse di apprendimento

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

Per la documentazione del prodotto, visitare il sito Oracle Help Center.