Aggiornare i record dei dati in un'applicazione Web Oracle JET

Introduzione

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

Obiettivi

Al termine di questa esercitazione, verrà descritto come aggiornare un record di dati esistente e sottometterlo a un servizio REST.

Prerequisiti

Un ambiente di sviluppo impostato per creare applicazioni Oracle JET con runtime JavaScript, Node.js e l'interfaccia della riga di comando Oracle JET più recente installata
Completamento dell'esercitazione precedente in questo percorso di apprendimento, in modo da creare la cartella JET_Web_Application con un provider di dati REST per recuperare i dati

Task 1: Crea una finestra di dialogo nella vista

Utilizzare l'elemento HTML personalizzato oj-dialog per raccogliere le informazioni sul modulo, che è quindi possibile passare a un elemento osservabile.

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

Trovare l'elemento oj-button id="createButton" e aggiungervi un secondo elemento oj-button. Impostare l'attributo on-oj-action su "[[showEditDialog]]" e l'attributo disabled su "[[!itemSelected()]]".

. . .
<h3 id="itemsListHeader">Activity Items</h3>
 <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-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]"
. . . 

Trovare il tag oj-bind-if test="[[itemSelected()]]" e aggiungere un elemento oj-dialog al suo interno. Impostare l'attributo id su "editDialog" e l'attributo class su no-display.

. . . 
<oj-bind-if test="[[itemSelected()]]">
   <oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
      </oj-dialog>
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .

All'interno dell'elemento oj-dialog creato, aggiungere due tag div con gli attributi slot="body" e slot="footer".

<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
<div slot="body">
  </div>
<div slot="footer">
  </div>
</oj-dialog>

Aggiungere un elemento oj-button all'interno dell'elemento div slot="footer" creato e impostare l'attributo on-oj-action="[[updateItemSubmit]]".

<div slot="footer">
           <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit
           </oj-button>
         </div>

Nella tag div slot="body" creata, aggiungere un elemento oj-label-value, un elemento oj-label e un elemento oj-input-text per il valore inputItemID.

<div slot="body">
  <oj-label-value label-edge="inside">
   <oj-label for="chatWindow" slot="label">Item ID</oj-label>
   <div slot="value" class="slot-line">
     <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
   </div>
 </oj-label-value>
</div>

Sotto l'elemento oj-label-value, aggiungere gli elementi oj-input-text per i valori Name, Price e Description.

   
<div slot="body">
   . . .
   </oj-label-value>
   <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
</div>
   

Tenere presente che il valore inputItemID viene associato utilizzando parentesi quadre, che indica l'associazione unidirezionale, in quanto l'utente non deve modificare il valore ID. Associare i valori inputItemName e altri mediante parentesi graffe, che indica l'associazione bidirezionale e consente all'utente di sovrascrivere il valore.

Verificare che il componente Vista lista con id="itemsList" specifichi selectedItemChanged come valore per l'attributo on-first-selected-item-changed.
Salvare il file dashboard.html.

Il codice dovrebbe risultare simile al file final-update-dashboard-html.txt.
Passare alla directory JET_Web_Application/src/css e aprire il file app.css. Aggiungere le seguenti definizioni di stile alla fine del file.
```
. . .
.no-display {
   display: none;
}

.slot-line {
   line-height: 2.4em;
}

.text-width {
   width: 100%;
   min-width: 100%;
}
```
Il codice dovrebbe risultare simile al file final-css.txt.

Task 2: Gestione apertura finestra di dialogo in ViewModel

Dichiarare i nuovi osservabili e metodi a cui si fa riferimento nella vista in modo che l'applicazione Web Oracle JET venga inizializzata correttamente quando viene utilizzata.

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

Nella parte superiore del file dashboard.ts verificare che i moduli Oracle JET per il componente Finestra di dialogo e il componente Testo input vengano importati.

import * as AccUtils from "../accUtils";
. . .
import { ojDialog } from "ojs/ojdialog";
import "ojs/ojdialog";
import "ojs/ojinputtext";
. . . 

Nella classe DashboardViewModel, sotto il codice precedente per la creazione di un nuovo elemento attività, creare un metodo denominato showEditDialog per aprire la finestra di dialogo e recuperare i valori dei campi che si desidera aggiornare.

. . .
public createItem = async (event: ojButtonEventMap["ojAction"]) => {
. . .
 } // end createItem

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

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

Sotto il metodo showEditDialog, creare un metodo denominato updateItemSubmit per sottomettere i dati della finestra di dialogo e aggiungere un comando close.

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

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
   (document.getElementById("editDialog") as ojDialog).close();
}  

Salvare il file dashboard.ts. Il codice dovrebbe risultare simile al file update-dashboard-ts.txt.

Task 3: Gestione sottomissione dell'input della finestra di dialogo in ViewModel

Creare oggetti per memorizzare i dati recuperati dalla finestra di dialogo nella vista e inviarli al servizio REST utilizzando l'API Fetch e il metodo HTTP PUT. Infine, utilizzare il metodo mutate dell'istanza RESTDataProvider nell'istanza RESTDataProvider.

Nel file dashboard.ts aperto, nella classe DashboardViewModel, dichiarare i tipi e inizializzare le seguenti variabili che verranno utilizzate nel metodo che sottomette i dati.

class DashboardViewModel {
   . . .
   // Fields in update dialog
   inputItemID: ko.Observable<number>;
   inputItemName: ko.Observable<string>;
   inputPrice: ko.Observable<number>;
   inputShortDesc: ko.Observable<string>; 

   //  Fields for delete button and update dialog, among others
   selectedRow = ko.observable<number>();
   . . .

   constructor() {
   . . .
      // Initialize fields in update dialog
      this.inputItemID = ko.observable();
      this.inputItemName = ko.observable();
      this.inputPrice = ko.observable();
      this.inputShortDesc = ko.observable();

   } // End constructor

Nel metodo updateItemSubmit sopra la chiamata close(), dichiarare una variabile, row, per contenere i valori di input dalla finestra di dialogo Aggiorna dettagli elemento. Includere inoltre un'istruzione if per verificare che i dati siano stati selezionati.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
    const currentRow = this.selectedRow; 
         if (currentRow != null) {
            const row = {
               itemId: this.itemData().id,
               name: this.inputItemName(),
               price: this.inputPrice(),
               short_desc: this.inputShortDesc()
            };
   }; // End if statement
 (document.getElementById("editDialog") as ojDialog).close();
}  

Al di sopra della chiamata close(), creare una richiesta per inviare i dati al servizio REST.

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

 const currentRow = this.selectedRow;

 if (currentRow != null) {

   const row = {
   	. . .
      short_desc: this.inputShortDesc()
   };

// Create and send request to update row on rest service
   const request = new Request(

     `${this.restServerURLItems}${this.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();  
 } // End if statement
 (document.getElementById("editDialog") as ojDialog).close();

}  // update-item-end

Di seguito alla richiesta di invio dei dati al servizio REST, creare una modifica update e chiamare il metodo mutate per notificare all'istanza RESTDataProvider che i dati sono stati aggiornati. Chiamare inoltre il metodo refresh() per aggiornare i dati visualizzati nel browser.

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

const currentRow = this.selectedRow; 

   if (currentRow != null) {
      . . .

   };

   const request = new Request(

   `${this.restServerURLItems}${this.itemData().id}`,
      {
         . . .
      }
      );

. . . 
   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 = this.itemData().id;
   const updatedRowMetaData = { key: updatedRowKey };
   this.itemsDataProvider.mutate({
   update: {
      data: [updatedRow.items[0]],
      keys: new Set([updatedRowKey]),
      metadata: [updatedRowMetaData],
   },
   });
   this.itemsDataProvider.refresh();

   } // End if statement
   (document.getElementById("editDialog") as ojDialog).close();
}  // update-item-end

Salvare il file dashboard.ts.

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

Task 4: eseguire il test del codice e aggiornare un record

Nel browser visualizzare le modifiche dinamiche nell'applicazione Web.
Nell'applicazione Web fare clic sull'attività Baseball, quindi fare clic sull'elemento SureFire Ball (Set di 4).
Fare clic sul pulsante Aggiorna.

Viene visualizzata la finestra di dialogo Aggiorna dettagli articolo.
Modificare il prezzo da 20.5 a 21 e fare clic su Sottometti.

La sezione viene aggiornata e il prezzo dell'articolo è stato aggiornato.

Descrizione dell'immagine update_record.png
Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.
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.

Titolo e informazioni sul copyright

Update data records in an Oracle JET web app

F49650-01

February 2022