Creare un form per creare record di dati in un'applicazione DOM virtuale di Oracle JET

Introduzione

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

Obiettivi

In questa esercitazione verrà descritto come scrivere i dati in 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, Recupera dati da un'API REST in un'applicazione Oracle JET Virtual DOM

Task 1: Creazione componenti per gestione informazioni maschera

Creare nuovi componenti che visualizzeranno un pulsante utilizzato per richiamare la funzionalità per creare un nuovo record. Un componente ItemActionsContainer contiene il pulsante che consente agli utenti dell'applicazione DOM virtuale di richiamare il componente CreateNewItemDialog che contiene la funzionalità per creare un nuovo record.

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

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

import { h } from 'preact';

type Props = {
  message?: string;
};

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

export default CreateNewItemDialog;

Nella stessa directory, creare un file ItemActionsContainer.tsx e aprirlo in un editor.

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

import { h } from 'preact';

type Props = {
  message?: string;
};

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

export default ItemActionsContainer;

Task 2: gestire l'apertura della finestra di dialogo

Importare i moduli Oracle JET e dichiarare le funzioni che consentiranno all'applicazione DOM virtuale Oracle JET di aprire correttamente una finestra di dialogo.

Nella parte superiore del file ItemActionsContainer.tsx aperto, importare il modulo Oracle JET per il componente Pulsante.
```
import { h } from 'preact';
import 'ojs/ojbutton';
```
Definire una proprietà create nell'alias di tipo Props per gestire l'apertura di una finestra di dialogo di creazione.
```
import { h } from 'preact';
import 'ojs/ojbutton';

type Props = {
  create: () => void;
};
```
Nell'istruzione return sostituire l'elemento div esistente con un nuovo elemento div che visualizza un elemento oj-button con un attributo onojAction che fa riferimento alla proprietà create.
```
const ItemActionsContainer = (props: Props) => {
   return (
      <div>
         <oj-button id="createButton" onojAction={props.create}>
         Create
         </oj-button>
      </div>
```
Salvare il file ItemActionsContainer.tsx. Il codice deve essere simile a ItemActionsContainer.tsx.txt

Nella parte superiore del file CreateNewItemDialog.tsx aperto, importare i moduli Oracle JET per il componente Finestra di dialogo e l'hook MutableRef.

import { h } from 'preact';
import 'ojs/ojdialog';
import { ojDialog } from 'ojs/ojdialog';
import { MutableRef } from 'preact/hooks';

Definire le proprietà isOpened e closeDialog nell'alias di tipo Props.

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

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="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
         <div slot="body">
         <p>dialog open</p>
         </div>
      </oj-dialog>
   </span>
   );

Nella parte superiore del file CreateNewItemDialog.tsx, importare gli hook useRef e useEffect Preact.

import { h } from 'preact';
import { useRef, useEffect } from 'preact/hooks';
import 'ojs/ojdialog';
import { ojDialog } from 'ojs/ojdialog';

Prima dell'istruzione return, dichiarare le variabili createDialogRef e closeDialog che conterranno il riferimento recuperato dall'hook useRef Preact.

const CreateNewItemDialog = (props: Props) => {

   const createDialogRef = useRef<ojDialog>(null);

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

 return (
	

Anche prima dell'istruzione return, utilizzare l'hook useEffect per scrivere un'espressione che imposta un valore per la proprietà isOpened.

 const CreateNewItemDialog = (props: Props) => {
     const createDialogRef = useRef<ojDialog>(null);

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

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

 return (

Salvare il file CreateNewItemDialog.tsx. Il codice deve essere simile a CreateNewItemDialog-1.tsx.txt

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

Nella parte superiore di ActivityItemContainer.tsx, importare i componenti ItemActionsContainer e CreateNewItemDialog appena creati e anche i moduli per i componenti Layout form e Testo input di Oracle JET.

import ItemActionsContainer from "./ItemActionsContainer";
import CreateNewItemDialog from "./CreateNewItemDialog";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
import { ojDialog } from "ojs/ojdialog";
import { MutableRef} from "preact/hooks"

Dopo la dichiarazione della funzione ActivityItemContainer, creare variabili che utilizzano l'hook useState di Preact e una funzione (openCreateDialog) per aprire la finestra di dialogo.

Includiamo anche una voce che gestisce lo stato aperto di una finestra di dialogo Modifica che creiamo in un'esercitazione successiva.

const ActivityItemContainer = (props: Props) => {
 const [isCreateOpened, setIsCreateOpened] = useState<boolean>(false);
 const [isEditOpened, setIsEditOpened] = useState<boolean>(false);

  const openCreateDialog = () => {
     console.log("CreateNewItemDialog called");
     setIsCreateOpened(true);
  };

Prima dell'istruzione return, includere anche una funzione che chiude una finestra di dialogo aperta.

const handleDialogClose = (ref: MutableRef<ojDialog>, type: string) => {
   type === "create" ? setIsCreateOpened(false) : setIsEditOpened(false);
   ref.current.close();
};

return (
   <div id="activityItemsContainer" class=. . .>

Nell'istruzione return includere i componenti ItemActionsContainer e CreateNewItemDialog appena creati.

return (
<div id="activityItemsContainer" . . .>
 <div id="container">
   <h3>Activity Items</h3>
    <ItemActionsContainer create={openCreateDialog} />
    <CreateNewItemDialog isOpened={isCreateOpened} closeDialog={handleDialogClose} />

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

Task 3: Gestisci sottomissione input finestra di dialogo

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

Nella parte superiore del file CreateNewItemDialog.tsx aperto, importare l'hook useState di Preact.

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

Nell'alias di tipo Props, definire una proprietà createNewItem.

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

Definire un alias di tipo Item che includa i campi per i dati inviati al servizio REST.

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

Trovare l'elemento personalizzato oj-dialog nell'istruzione return e sostituire il contenuto di <div slot="body"> con un elemento oj-form-layout e gli elementi oj-input-text per i campi di input per creare un nuovo elemento. Includere anche un <div slot="footer"> con un elemento oj-button.

<oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
    <div slot="body">
       <oj-form-layout>
       <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="short_desc" labelHint="Description" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="quantity_instock" labelHint="Quantity: In-Stock" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="quantity_shipped" labelHint="Quantity: Shipped" onvalueChanged={onChangeHandler}></oj-input-text>
       </oj-form-layout>
    </div>
    <div slot="footer">
       <oj-button id="submitBtn" onojAction={createItem}>Submit</oj-button>
    </div>
 </oj-dialog>

Prima dell'istruzione return, utilizzare l'hook useState e includere le funzioni onChangeHander e createItem a cui fanno riferimento gli elementi Oracle JET.

const [formData, setFormData] = useState<Partial<Item>>({});

 const onChangeHandler = (event: any) => {
    setFormData({
       ...formData,
       [event.currentTarget.id]: event.detail.value,
    });
 }

 const createItem = () => {
    console.log("data: " + JSON.stringify(formData));
    props.createNewItem(formData, createDialogRef as MutableRef<ojDialog>);
 };

 return (
   <span>. . .

Salvare il file CreateNewItemDialog.tsx. Il codice deve essere simile a CreateNewItemDialog-2.tsx.txt

Andare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire il file ActivityItemContainer.tsx.
Nell'istruzione return, aggiornare la classe CreateNewItemDialog in modo da includere il metodo createNewItem definito nel componente CreateNewItemDialog.
```
<CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
```

Prima dell'istruzione return, includere una nuova funzione createItem che crei un nuovo elemento e lo invii al servizio REST backend.

const createItem = async (data: Partial<Item>, createDialogRef: MutableRef<ojDialog>) => {
  //process create command and close dialog on success
  if (data?.name) {
     let quantity = Number(data.quantity_instock) + Number(data.quantity_shipped);
     const row = {
       name: data.name,
       short_desc: data.short_desc,
       price: data.price,
       quantity_instock: data.quantity_instock,
       quantity_shipped: data.quantity_shipped,
       quantity: quantity,
       activity_id: props.selectedActivity?.id,
       image: "css/images/product_images/jet_logo_256.png",
     };

     // Create and send request to REST service to add row
     const request = new Request(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();

     activityItemDataProvider?.refresh();
     // Close dialog
     console.log("Created new item");
     createDialogRef.current.close();
   }
 };

Dopo la dichiarazione della funzione ActivityItemContainer, definire una variabile che fa riferimento all'URL da utilizzare per inviare l'elemento al servizio REST.

const ActivityItemContainer = (props: Props) => {
    const activityItemDataProvider = props.data;
    const restServerURLItems = "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/" + props.selectedActivity?.id + "/items/";

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

Task 4: Test del codice e creazione di 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.
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à: spedita: 61
Fare clic su Sottometti.

La sezione viene aggiornata e l'elemento fa parte dell'elenco degli elementi attività Baseball.
Fare clic sull'elemento SureFire Ball (set di 4) nell'elenco e visualizzarne i dettagli.
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

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

F70647-02

Oracle e/o relative consociate.