Crear un formulario para crear registros de datos en una aplicación DOM virtual de Oracle JET

Introducción

En este tutorial se muestra cómo utilizar la aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET) para crear un registro de datos y enviarlo a un servicio REST.

Objetivos

En este tutorial, aprenderá a escribir datos en un servicio REST.

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones DOM virtuales de Oracle JET que incluye una instalación de Node.js
Finalización del tutorial anterior en esta ruta de aprendizaje, Recuperación de datos de una API de REST en una aplicación Oracle JET Virtual DOM

Tarea 1: Creación de componentes para gestionar la información del formulario

Cree nuevos componentes que muestren un botón utilizado para llamar a la funcionalidad para crear un nuevo registro. Un componente ItemActionsContainer contiene el botón que permite a los usuarios de la aplicación DOM virtual llamar al componente CreateNewItemDialog que contiene la funcionalidad para crear un nuevo registro.

Navegue hasta el directorio JET-Virtual-DOM-app/src/components/ActivityItem, cree un nuevo archivo CreateNewItemDialog.tsx y ábralo en un editor.

Agregue las entradas de marcador de posición que definen un nombre de función (CreateNewItemDialog) para el nuevo 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;

En el mismo directorio, cree un archivo ItemActionsContainer.tsx y ábralo en un editor.

Agregue las entradas de marcador de posición que definen un nombre de función (ItemActionsContainer) para el nuevo 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;

Tarea 2: Manejar la apertura del cuadro de diálogo

Importe los módulos de Oracle JET y declare las funciones que permitirán que la aplicación DOM virtual de Oracle JET abra correctamente un cuadro de diálogo.

En la parte superior del archivo ItemActionsContainer.tsx abierto, importe el módulo de Oracle JET para el componente Button.
```
import { h } from 'preact';
import 'ojs/ojbutton';
```
Defina una propiedad create en el alias de tipo Props para gestionar la apertura de un cuadro de diálogo de creación.
```
import { h } from 'preact';
import 'ojs/ojbutton';

type Props = {
  create: () => void;
};
```
En la sentencia return, sustituya el elemento div existente por un nuevo elemento div que represente un elemento oj-button con un atributo onojAction que haga referencia a la propiedad create.
```
const ItemActionsContainer = (props: Props) => {
   return (
      <div>
         <oj-button id="createButton" onojAction={props.create}>
         Create
         </oj-button>
      </div>
```
Guarde el archivo ItemActionsContainer.tsx. Su código debe ser similar a ItemActionsContainer.tsx.txt

En la parte superior del archivo CreateNewItemDialog.tsx abierto, importe los módulos de Oracle JET para el componente Dialog y el enlace MutableRef.

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

Defina las propiedades isOpened y closeDialog en el alias de tipo Props.

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

En la sentencia return, sustituya el elemento div existente por un elemento span que ajuste el elemento personalizado 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>
   );

En la parte superior del archivo CreateNewItemDialog.tsx, importe los enlaces useRef y useEffect Preact.

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

Antes de la sentencia return, declare las variables createDialogRef y closeDialog que contendrán la referencia que recupera el enlace de precisión useRef.

const CreateNewItemDialog = (props: Props) => {

   const createDialogRef = useRef<ojDialog>(null);

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

 return (
	

También antes de la sentencia return, utilice el enlace useEffect para escribir una expresión que defina un valor para la propiedad 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 (

Guarde el archivo CreateNewItemDialog.tsx. Su código debe ser similar a CreateNewItemDialog-1.tsx.txt

Vaya al directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx.

En la parte superior de ActivityItemContainer.tsx, importe los componentes ItemActionsContainer y CreateNewItemDialog que acaba de crear y también importe los módulos para los componentes de diseño de formularios y texto de entrada de 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"

Después de la declaración de función ActivityItemContainer, cree variables que utilicen el enlace useState de Preact y una función (openCreateDialog) para abrir el cuadro de diálogo.

También incluimos una entrada que gestiona el estado abierto de un cuadro de diálogo Editar que creamos en un tutorial posterior.

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

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

Antes de la sentencia return, incluya también una función que cierre un cuadro de diálogo abierto.

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

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

En la sentencia return, incluya los componentes ItemActionsContainer y CreateNewItemDialog recién creados.

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

Guarde el archivo ActivityItemContainer.tsx. Su código debe ser similar a ActivityItemContainer-1.tsx.txt

Tarea 3: Manejo del envío de la entrada del cuadro de diálogo

Vaya al directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo CreateNewItemDialog.tsx.

En la parte superior del archivo CreateNewItemDialog.tsx abierto, importe el enlace useState de Preact.

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

En el alias de tipo Props, defina una propiedad createNewItem.

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

Defina un alias de tipo Item que incluya campos para los datos que envía al servicio REST.

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

Busque el elemento personalizado oj-dialog en la sentencia return y sustituya el contenido de <div slot="body"> por un elemento oj-form-layout y elementos oj-input-text para que los campos de entrada creen un nuevo elemento. También incluya un elemento <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>

Antes de la sentencia return, utilice el enlace useState e incluya las funciones onChangeHander y createItem a las que hacen referencia los elementos de 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>. . .

Guarde el archivo CreateNewItemDialog.tsx. Su código debe ser similar a CreateNewItemDialog-2.tsx.txt

Vaya al directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx.
En la sentencia return, actualice la clase CreateNewItemDialog para incluir el método createNewItem que ha definido en el componente CreateNewItemDialog.
```
<CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
```

Antes de la sentencia return, incluya una nueva función createItem que cree un nuevo elemento y lo envíe al servicio REST de 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();
   }
 };

Después de la declaración de función ActivityItemContainer, defina una variable que haga referencia a la URL que se va a utilizar para enviar el artículo al servicio REST.

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

Guarde el archivo ActivityItemContainer.tsx. Su código debe ser similar a ActivityItemContainer-2.tsx.txt

Tarea 4: Prueba del código y creación de un registro

En la ventana de terminal, cambie al directorio JET-Virtual-DOM-app y ejecute la aplicación DOM virtual.
```
npx ojet serve
```
En el explorador, vea los cambios dinámicos en la aplicación DOM virtual.
En la aplicación DOM virtual, haga clic en la actividad Béisbol.
Haga clic en Crear.

Se abre el cuadro de diálogo Crear nuevo elemento.
Rellene los detalles de un nuevo elemento.
- Name: SureFire Ball (Set of 4)
- Price: 20.5
- Description: Canvas balls for practice
- Quantity: In-Stock (Cantidad: En stock): 35
- Cantidad: Enviado: 61
Haga clic en Ejecutar.

La sección se refresca y el elemento forma parte de la lista de elementos de actividad de béisbol.
Haga clic en el elemento SureFire Ball (Juego de 4) de la lista y vea sus detalles.
Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual en ejecución.
En la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes de herramientas de Oracle JET.

Siguiente paso

Continúe con el siguiente tutorial de este módulo.

Este tutorial forma parte del módulo Operaciones de CRM mediante un servicio REST.

Recuperación de Datos de la API de REST en Oracle JET
Creación de una Pantalla para Crear Registros de Datos en una Aplicación Oracle JET Virtual DOM
Actualización de registros de datos en una aplicación Oracle JET Virtual DOM
Supresión de registros de datos en una aplicación Oracle JET Virtual DOM

Puede volver a la página principal de la ruta de aprendizaje de DOM virtual para acceder a todos los módulos de creación de aplicaciones de DOM virtuales.

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de Oracle Learning.

Para obtener documentación sobre el producto, visite Oracle Help Center.

Título e Información de Copyright

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

F70643-02

Oracle y/o sus filiales.