Suprimir 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 suprimir un registro de datos existente y enviar el cambio a un servicio REST.

Objetivos

En este tutorial, aprenderá a suprimir un registro de datos existente y a enviar el cambio a un servicio REST.

Requisitos

Tarea 1: Crear un botón Eliminar

  1. Navegue hasta el directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ItemActionsContainer.tsx en un editor.

  2. En el alias de tipo Props, defina una propiedad delete adicional.

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

  3. Busque el elemento <oj-button id="updateButton" y agregue un elemento oj-button debajo. Defina el atributo onojAction en {props.delete} y el atributo disabled en hideActions.

    return (
   <div>
      <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
      <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      <oj-button id="deleteButton" disabled={hideActions} onojAction={props.delete}>Delete</oj-button>
   </div>

  4. Guarde el archivo ItemActionsContainer.tsx.

    El código debe tener un aspecto similar a este archivo final-ItemActionsContainer.tsx.txt.

Tarea 2: Manejar la eliminación de registros

Utilice la API de recuperación y el método HTTP DELETE para suprimir un registro del servicio REST. Utilice el método mutate de RESTDataProvider para actualizar la instancia RESTDataProvider.

  1. Navegue hasta el directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx en un editor.

  2. En la función ActivityItemContainer, debajo del código anterior que actualiza los registros, cree un método denominado deleteItem.

    Este método solicita la confirmación del usuario para suprimir un artículo y, una vez confirmada correctamente, crea una solicitud DELETE que envía al servicio REST. Si la operación DELETE es correcta, el método llama a un evento RESTDataProvider mutate para notificar a los consumidores del proveedor de datos que se ha suprimido un elemento.

    const deleteItem = async () => {
  const really = confirm("Do you really want to delete this item?");
  if (really) {
    // Create and send request to REST service to delete item
    const request = new Request(`${restServerURLItems}${itemData.id}`, {
       method: "DELETE",
     });
    const response = await fetch(request);
    // Call  mutate method to notify dataprovider consumers that an 
    // item has been removed
    if (response.status === 200) {
      const removedRowKey = itemData.id;
      const removedRowMetaData = { key: removedRowKey };

      props.data?.mutate({
        remove: {
          data: [itemData.id],
          keys: new Set([removedRowKey]),
          metadata: [removedRowMetaData],
         },
       });
      } 
      else {
          alert(
             "Delete failed with status " 
             + response.status + " : " + response.statusText
          );
     }
  console.log("Deleted item.");
  } 
  else {
    console.log("OK, we canceled that delete.");
   }
  };

  3. En la sentencia return, actualice el elemento ItemActionsContainer con un atributo delete.

     <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer edit={openEditDialog} delete={deleteItem} itemSelected={activityItemValue} create={openCreateDialog} />
       . . . 
 </div>

  4. Guarde el archivo ActivityItemContainer.tsx.

    El código debe tener un aspecto similar al de este archivo final-delete-ActivityItemContainer.tsx.txt.

Tarea 3: Ejecución de la aplicación DOM virtual y eliminación de un registro

  1. En la ventana de terminal, ejecute la aplicación DOM virtual. 
    npx ojet serve

  2. En la aplicación, haga clic en la actividad Béisbol y, a continuación, haga clic en el elemento SureFire Ball (Juego de 4).

  3. Haga clic en el botón Suprimir. Se abre una ventana de confirmación.

  4. Haga clic en Aceptar.

    La sección se refresca y el elemento se ha suprimido.

  5. Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual en ejecución.

  6. 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.

Tarea 4: (Opcional) Ejecutar una aplicación DOM virtual desde una aplicación restaurada

Si desea ejecutar la aplicación DOM virtual de Oracle JET completa desde el código proporcionado, puede restaurar la aplicación desde el archivo de almacenamiento descargado. Para trabajar con una aplicación DOM virtual de Oracle JET "descomprimida y comprimida", debe restaurar las dependencias del proyecto, incluidas las herramientas de Oracle JET y las bibliotecas y módulos necesarios, dentro de la aplicación extraída.

  1. Descargue el archivo JET-Virtual-DOM-app-final.zip y extraiga el contenido de la aplicación completada en el directorio JET-Virtual-DOM-app-final.
  2. En la ventana de terminal, navegue hasta el directorio JET-Virtual-DOM-app-final y restaure la aplicación Oracle JET Virtual DOM. 
    npm install
  3. Espere la confirmación. 
    Success: Restore complete

    La aplicación está lista para ejecutarse.

  4. Ejecute la aplicación DOM virtual y pruebe en el explorador. 
    npx ojet serve

  5. Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual en ejecución.

  6. 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

Este tutorial concluye el módulo CRUD Operations Using a REST Service en esta ruta de aprendizaje sobre la creación de aplicaciones web DOM virtuales.

Puede continuar con el siguiente tutorial de la ruta de aprendizaje, Configuración de un entorno de prueba en Oracle JET, en el módulo Pruebas integrales en Oracle JET.

También puede volver a la página principal de la ruta de aprendizaje de DOM virtual para acceder a todos los módulos sobre la creación de aplicaciones de DOM virtuales, así como a otras rutas de aprendizaje.

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.