Aggiornare 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 aggiornare un record di dati esistente e sottometterlo a un servizio REST.

Obiettivi

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

Prerequisiti

Ambiente di sviluppo impostato per creare applicazioni DOM virtuali Oracle JET che include un'installazione di Node.js
Completamento dell'esercitazione precedente in questo percorso di apprendimento, Creare un form per creare record di dati in un'applicazione Oracle JET Virtual DOM

Task 1: Creazione componenti per gestione informazioni maschera

Creare un nuovo componente che visualizzerà una finestra di dialogo per richiamare la funzionalità di aggiornamento di un record.

Passare alla directory JET-Virtual-DOM-app/src/components/ActivityItem, creare un nuovo file EditItemDialog.tsx e aprirlo in un editor.

Aggiungere le voci segnaposto che definiscono un nome di funzione (EditItemDialog) per il nuovo componente.

import { h } from "preact";

type Props = {
  message?: string;
};

const EditItemDialog = (props: Props) => {
  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <p>content</p>
    </div>
  );
};

export default EditItemDialog;

Task 2: gestire l'apertura della finestra di dialogo

Dichiarare il tipo e la funzione nel componente ItemActionsContainer per richiamare il componente EditItemDialog che contiene la funzionalità per aggiornare un record.

Andare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire il file ItemActionsContainer.tsx.

Nella parte superiore del file, importare gli hook di useState e useEffect Preact, definire le proprietà aggiuntive in un alias di tipo Props necessario per utilizzare il componente EditItemDialog, quindi definire un alias di tipo Item.

 import { h } from "preact";
 import "ojs/ojbutton";
 import { useState, useEffect } from "preact/hooks";

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

 type Item = {
     id: number;
     name: string;
     short_desc?: string;
     price?: number;
     quantity?: number;
     quantity_shipped?: number;
     quantity_instock?: number;
     activity_id?: number;
     image?: string;
 };

Prima dell'istruzione return, utilizzare gli hook di Preact importati per determinare se è selezionato un elemento attività.

 const ItemActionsContainer = (props: Props) => {
     const [hideActions, setHideActions] = useState<boolean>(true);

         if (props.itemSelected?.id) {
     console.log("Selected: " + JSON.stringify(props.itemSelected));
     }

     useEffect(() => {
     if (props.itemSelected?.id) {
         setHideActions(false);
     } else {
         setHideActions(true);
     }
     }, [props.itemSelected]);

     return (

Nell'istruzione return aggiungere un nuovo elemento oj-button con un attributo onojAction che fa riferimento alla proprietà edit.

const ItemActionsContainer = (props: Props) => {
 return (
   <div>
     <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
     <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
   </div>

Salvare il file ItemActionsContainer.tsx. Il codice deve essere simile a ItemActionsContainer.tsx.txt

Nella parte superiore del file EditItemDialog.tsx, importare i moduli per il componente Finestra di dialogo Oracle JET, nonché gli hook precedenti useRef, useEffect, MutableRef e useState.

import { h } from "preact";
import { useRef, useEffect, useState, MutableRef  } from "preact/hooks";
import "ojs/ojdialog";
import { ojDialog } from "ojs/ojdialog";

Nell'alias di tipo Props, creare le seguenti proprietà.

type Props = {
   isOpened: boolean;
   closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
   editItem: (data: Partial<Item>, ref: MutableRef<ojDialog>) => void;
   itemData: Partial<Item>;
 };

Nell'istruzione return sostituire l'elemento div esistente con un elemento span che esegue il wrapping dell'elemento personalizzato oj-dialog.

 return (
     <span>
     <oj-dialog id="editDialog" ref={editDialogRef as MutableRef<ojDialog>} 
                 dialogTitle="Update Item Details" onojClose={closeDialog} cancelBehavior="icon">
         <div slot="body">
         <oj-label-value labelEdge="inside">
             <oj-label for="itemid" slot="label">
             Item ID
             </oj-label>
             <div id="itemid" slot="value" class="slot-line">
             {editFormData?.id}
             </div>
         </oj-label-value>
     <oj-form-layout>
         <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler} value={editFormData?.name}></oj-input-text>
         <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler} value={editFormData?.price}></oj-input-text>
         <oj-input-text id="short_desc" labelHint="Description" 
                     onvalueChanged={onChangeHandler} value={editFormData?.short_desc}></oj-input-text>
         </oj-form-layout>
         </div>
         <div slot="footer">
         <oj-button id="submitBtn" onojAction={editItem}>
             Submit
         </oj-button>
         </div>
     </oj-dialog>
 </span>
 );

Prima dell'istruzione return, aggiungere i metodi che l'attributo valorizza negli elementi personalizzati figlio del riferimento elemento personalizzato oj-dialog. Ad esempio, il metodo onChangeHandler viene richiamato quando un componente oj-input-text rileva una modifica tramite il relativo attributo onvalueChanged.

 const EditItemDialog = (props: Props) => {
     const editDialogRef = useRef<ojDialog>();
     const [editFormData, setEditFormData] = useState<Partial<Item>>({});

     const onChangeHandler = (event: any) => {
     if (event.detail.updatedFrom === "internal") {
         setEditFormData({
         ...editFormData,
         [event.currentTarget.id]: event.detail.value,
         });
     }
     };

     const closeDialog = () => {
     props.closeDialog(editDialogRef as MutableRef<ojDialog>, "edit");
     };

     const editItem = () => {
     console.log("data: " + JSON.stringify(editFormData));
     props.editItem(editFormData, editDialogRef as MutableRef<ojDialog>);
     };

     useEffect(() => {
     setEditFormData(props.itemData);
     props.isOpened ? editDialogRef.current?.open() : editDialogRef.current?.close();
     }, [props.isOpened]);

     return (

Prima della dichiarazione della funzione EditItemDialog, definire un alias di tipo Item che includa i campi per i dati aggiornati e inviati al servizio REST.

type Item = {
  id: number;
  name: string | undefined;
  short_desc?: string;
  price?: number;
  quantity?: number;
  quantity_shipped?: number;
  quantity_instock?: number;
  activity_id?: number;
  image?: string;
 };

 const EditItemDialog = (props: Props) => {

Salvare il file EditItemDialog.tsx. Il codice deve essere simile a EditItemDialog.tsx.txt

Task 3: utilizzare il componente EditItemDialog

Aprire il file ActivityItemContainer.tsx e importare il componente EditItemDialog creato nell'ultimo task più l'hook MutableRef di Preact e il modulo Oracle JET per il componente Finestra di dialogo.
```
 import { useState, useCallback, MutableRef, useRef } from "preact/hooks";
 import EditItemDialog from "./EditItemDialog";
```

Nell'alias di tipo Props, aggiornare la voce per data per supportare il tipo any per RESTDataProvider ed eliminare o commentare il tipo ActivityItem che il componente non utilizza più.

 type Props = {
   data?: RESTDataProvider<any, any>;
   selectedActivity: Item | null;
  	  onItemChanged: (item: Item) => void;
 };

// type ActivityItem = {
 //   id: number;
 //   name: string;
 //   items: Array<Item>;
 //   short_desc: string;
 //   image: string;
 // };

Nell'istruzione return aggiornare l'elemento ItemActionsContainer con i valori degli attributi itemSelected e edit. Dopo l'elemento CreateNewItemDialog, aggiungere un nuovo elemento per il componente EditItemDialog importato.

 <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer create={openCreateDialog} itemSelected={activityItemValue} edit={openEditDialog} />
       . . . 
</div>
 <CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
 <EditItemDialog isOpened={isEditOpened} editItem={editItem} closeDialog={handleDialogClose} itemData={itemData} />
  . . . 

Prima dell'istruzione return, aggiungere la funzione openEditDialog per aprire la finestra di dialogo di modifica e la funzione editItem per inviare l'elemento attività aggiornato al servizio REST.

 const openEditDialog = () => {
     console.log("Item: " + JSON.stringify(itemData));
     setIsEditOpened(true);
     console.log("Edit dialog opened");
     };

 const editItem = async (newItemData:Partial<Item>, editDialogRef = useRef<ojDialog>()) => {
     if (newItemData != null) {
     const row = {
         itemId: newItemData.id,
         name: newItemData.name,
         price: newItemData.price,
         short_desc: newItemData.short_desc,
     };

     // Create and send request to update row on rest service
     const request = new Request(`${restServerURLItems}${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();

     // Create update mutate event and call mutate method
     // to notify dataprovider consumers that a row has been
     // updated
     const updatedRowKey = itemData.id;
     const updatedRowMetaData = { key: updatedRowKey };
     props.data?.mutate({
         update: {
         data: [updatedRow],
         keys: new Set([updatedRowKey]),
         metadata: [updatedRowMetaData],
         },
     });
     } // End if statement
     console.log("Edited item");
     editDialogRef.current?.close();
     };

Salvare il file ActivityItemContainer.tsx. Il codice deve essere simile a ActivityItemContainer.tsx.txt

Task 4: Esegui test del codice e aggiorna un record

Nella finestra del terminale, passare alla directory JET-Virtual-DOM-app ed eseguire l'applicazione DOM virtuale.
```
 npx ojet serve
```
Nel browser, visualizza le modifiche dinamiche nella tua applicazione DOM virtuale.
Nell'app virtuale DOM fare clic sull'attività Baseball, quindi sull'elemento SureFire Ball (Set di 4).
Fare clic sul pulsante Aggiorna.

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

La sezione viene aggiornata e il prezzo dell'articolo è stato aggiornato.
Chiudere la finestra o la scheda del browser che visualizza l'applicazione DOM virtuale in esecuzione.
Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Operazioni CRUD mediante un servizio REST.

Recupera dati dall'API REST in Oracle JET
Creare un form per creare record di dati in un'applicazione Oracle JET Virtual DOM
Aggiorna record dati in un'applicazione Oracle JET Virtual DOM
Elimina record dati in un'applicazione Oracle JET Virtual DOM

Puoi tornare alla pagina principale del percorso di apprendimento DOM virtuale per accedere a tutti i moduli sulla creazione di app DOM virtuali.

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.

Titolo e informazioni sul copyright

Update data records in an Oracle JET virtual DOM app

F70659-02

Oracle e/o relative consociate.