Creare un form per creare 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 creare un record di dati e sottometterlo a un servizio REST.

Obiettivi

Al termine di questa esercitazione, verrà descritto come scrivere i dati in 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 l'applicazione Web Oracle JET nella 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 da passare a un osservabile.

Passare alla directory JET_Web_Application/src/ts/views e aprire il file dashboard.html in un editor.
Trovare l'elemento h3 in cui id="itemsListHeader". Al di sotto, aggiungere un elemento oj-button e impostare l'attributo on-oj-action su "[[showCreateDialog]]".
```
<h3 id="itemsListHeader">Activity Items</h3>
 <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
```

Trovare l'elemento oj-bind-if test="[[itemSelected()]]" e, sopra di esso, aggiungere un elemento oj-dialog. Impostare l'attributo id su "createDialog" e lo stile su "display:none".

. . .
   </oj-list-view>
</div>
<oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" cancel-behavior="icon">
   </oj-dialog>
<oj-bind-if test="[[itemSelected()]]">
   <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
. . .

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

<oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" 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="[[createItem]]".
```
<div slot="footer">
   <oj-button id="submitBtn" on-oj-action="[[createItem]]">Submit</oj-button>
</div>
```
All'interno dell'elemento div slot="body" creato, aggiungere un elemento oj-label e un elemento oj-input-text ciascuno per i valori Activity ID e Name.
```
   
<div slot="body">
   <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label>
   <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text>
   <oj-label class="oj-label" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text>
</div>
   
```
Tenere presente che il valore activityKey viene associato utilizzando parentesi quadre, che indica l'associazione unidirezionale, in quanto l'utente non deve modificare il valore dell'ID attività. Il valore itemName viene associato utilizzando parentesi graffe, che indica l'associazione bidirezionale e consente all'utente di sovrascrivere il valore.

In modo analogo, sotto l'elemento HTML personalizzato oj-input-text id="createNewName" creato, aggiungere gli elementi oj-input-text per i valori Price, Description, Quantity: In-Stock e Quantity: Shipped.

   
<div slot="body">
   <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label>
   <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text>
   <oj-label class="oj-label" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{price}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{short_desc}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewInStock">Quantity: In-Stock</oj-label>
   <oj-input-text id="createNewInStock" value="{{quantity_instock}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewShipped">Quantity: Shipped</oj-label>
   <oj-input-text id="createNewShipped" value="{{quantity_shipped}}"></oj-input-text>

</div>
   

Salvare il file dashboard.html.

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

Task 2: Gestione apertura finestra di dialogo in ViewModel

Dichiarare i nuovi osservabili e le nuove funzioni 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 importare i moduli Oracle JET per i componenti Pulsante, Finestra di dialogo e Testo di input.

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

Nell'elenco degli osservabili, dichiarare e inizializzare gli osservabili per i campi nella finestra di dialogo di creazione.

class DashboardViewModel {
   . . .

   //  Fields in Create dialog
   itemName: ko.Observable<string>;
   price: ko.Observable<number>;
   short_desc: ko.Observable<string>;
   quantity_instock: ko.Observable<number>;
   quantity_shipped: ko.Observable<number>;
   quantity: number;
   inputImageFile: string = 'css/images/product_images/jet_logo_256.png'
   . . .

   constructor() {
      . . . 
      // Initialize fields in create dialog
      this.itemName = ko.observable<string>();
      this.price = ko.observable<number>();
      this.short_desc = ko.observable<string>();
      this.quantity_instock = ko.observable<number>();
      this.quantity_shipped = ko.observable<number>();
      this.quantity = 0;
      // inputImageFile has already been initialized.
   } // Closing bracket for constructor method

Sotto il metodo constructor(), aggiungere un metodo denominato showCreateDialog per aprire la finestra di dialogo.

. . .
constructor() {
. . . 
  } // Closing bracket for constructor method

// Open dialog
public showCreateDialog(event: ojButtonEventMap["ojAction"]) {
   (document.getElementById("createDialog") as ojDialog).open();
}

Sotto il metodo showCreateDialog creato, aggiungere un metodo denominato createItem per sottomettere i dati della finestra di dialogo e aggiungere un comando di chiusura.

// Create item and close dialog
public createItem = async (event: ojButtonEventMap["ojAction"]) => {
 (document.getElementById("createDialog") as ojDialog).close();
} 

Salvare il file dashboard.ts.

Il codice dovrebbe risultare simile al file create-dashboard-ts.txt.
Nella finestra del terminale eseguire ed eseguire il test dell'applicazione Web.
```
$ ojet serve
```
Il pannello Elementi attività contiene ora un pulsante Crea. Quando si fa clic su di esso, viene visualizzata una finestra di dialogo.

Descrizione dell'immagine create_dialog.png
Lasciare aperta la finestra del terminale e la finestra del browser in cui è visualizzata l'applicazione Web.

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

Recuperare i dati dalla finestra di dialogo in ViewModel, inviarli al servizio REST utilizzando l'API Fetch e il metodo HTTP POST, quindi utilizzare il metodo mutate dell'istanza RESTDataProvider per aggiornare l'istanza RESTDataProvider.

Nel file dashboard.ts aperto, nel metodo createItem sopra la chiamata close(), dichiarare le variabili per contenere i valori di input dalla finestra di dialogo Crea nuovo elemento. Inoltre, calcolare il valore di quantity in base ai valori di input per quantity_instock e quantity_shipped.

// Create item and close dialog
public createItem = async (event: ojButtonEventMap["ojAction"]) => {

   this.quantity = (Number(this.quantity_instock()) + Number(this.quantity_shipped()));

   const row = {
      name: this.itemName(),
      short_desc: this.short_desc(),
      price: this.price(),
      quantity_instock: this.quantity_instock(),
      quantity_shipped: this.quantity_shipped(),
      quantity: this.quantity,
      activity_id: this.activityKey,
      image: this.inputImageFile,
      };

  (document.getElementById("createDialog") as ojDialog).close();
} 

Sotto la dichiarazione della variabile row, creare una richiesta per inviare i dati al servizio REST.

. . .
 const row = {
. . .
   image: this.inputImageFile,
 };
// Create and send request to REST service to add row
 const request = new Request(this.restServerURLItems, {
   headers: new Headers({
     "Content-type": "application/json; charset=UTF-8",
   }),
   body: JSON.stringify(row),
   method: "POST",
 });

 const response = await fetch(request);
 const addedRow = await response.json();
 . . .

Sotto la variabile addedRow, creare un evento di modifica add e chiamare il metodo RESTDataProvider mutate per notificare all'istanza RESTDataProvider che è stata aggiunta una nuova riga. Per aggiornare la visualizzazione, è inoltre necessario chiamare il metodo RESTDataProvider refresh().

   . . .
   const addedRow = await response.json();
   // Create add mutate event and call mutate method
   // to notify dataprovider that a row has been
   // added
   const addedRowKey = addedRow[this.keyAttributes];
   const addedRowMetaData = { key: addedRowKey };
   this.itemsDataProvider.mutate({
   add: {
      data: [addedRow],
      keys: new Set([addedRowKey]),
      metadata: [addedRowMetaData],
   },
   });
   this.itemsDataProvider.refresh();
   // Close dialog      
   (document.getElementById("createDialog") as ojDialog).close();

} 

Salvare il file dashboard.ts.

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

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

Nel browser visualizzare le modifiche dinamiche nell'applicazione Web.
Nell'applicazione Web fare clic sull'attività Baseball.
Fare clic su Crea.

Viene visualizzata la finestra di dialogo Crea nuovo elemento.
Inserire i dettagli per un nuovo articolo.
- Nome: SureFire Ball (Set of 4)
- Prezzo: 20.5
- Descrizione: Canvas balls for practice
- Quantità: In magazzino: 35
- Quantità: spedizione: 61
Fare clic su Sottometti.

La sezione viene aggiornata e l'articolo fa parte dell'elenco degli elementi dell'attività Baseball.
Fare clic sull'elemento SureFire Ball (Set di 4) nella lista e visualizzarne i dettagli.

Descrizione dell'immagine create_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

Create a form to create data records in an Oracle JET web app

F49676-01

February 2022