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

Introducción

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

Objetivos

Al finalizar este tutorial, habrá aprendido a escribir datos en un servicio REST.

Requisitos

• Entorno de desarrollo configurado para crear aplicaciones de Oracle JET con el tiempo de ejecución de JavaScript, Node.js y la última interfaz de línea de comandos de Oracle JET instalada
• Finalización del tutorial anterior en esta ruta de aprendizaje, para que haya creado la aplicación web de Oracle JET en la carpeta JET_Web_Application con un proveedor de datos REST para recuperar datos

Tarea 1: Crear un cuadro de diálogo en la vista

Utilice el elemento HTML personalizado oj-dialog para recopilar la información del formulario que se transfiere a un observable.

1. Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.

2. Busque el elemento h3 donde id="itemsListHeader". A continuación, agregue un elemento oj-button y defina el atributo on-oj-action en "[[showCreateDialog]]".

   <h3 id="itemsListHeader">Activity Items</h3>
    <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
   

3. Busque el elemento oj-bind-if test="[[itemSelected()]]" y, sobre él, agregue un elemento oj-dialog. Defina el atributo id en "createDialog" y el estilo en "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">
   . . .
   

4. Dentro del elemento oj-dialog que ha creado, agregue dos elementos div secundarios con los atributos slot="body" y 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>
   

5. Agregue un elemento oj-button dentro del elemento div slot="footer" que ha creado y defina el atributo on-oj-action="[[createItem]]".

   <div slot="footer">
      <oj-button id="submitBtn" on-oj-action="[[createItem]]">Submit</oj-button>
   </div>
   

6. Dentro del elemento div slot="body" que ha creado, agregue un elemento oj-label y un elemento oj-input-text para cada uno de los valores Activity ID y 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>
      
   

   Tenga en cuenta que enlaza el valor activityKey mediante corchetes, que indica un enlace unidireccional, porque el usuario no debe editar el valor de ID de actividad. El valor itemName se enlaza mediante llaves, lo que indica un enlace bidireccional y permite al usuario sobrescribir el valor.

7. Del mismo modo, debajo del elemento HTML personalizado oj-input-text id="createNewName" que ha creado, agregue elementos oj-input-text para los valores Price, Description, Quantity: In-Stock y 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>
      
   

8. Guarde el archivo dashboard.html.

   El código debe ser similar a este archivo final-create-dashboard-html.txt.

Tarea 2: Manejo de la apertura del diálogo en ViewModel

Declare los nuevos observables y funciones a los que se hace referencia en la vista para que la aplicación web de Oracle JET se inicialice correctamente al servirla.

1. Navegue al directorio JET_Web_Application/src/ts/viewModels y abra el archivo dashboard.ts en un editor.

2. En la parte superior del archivo dashboard.ts, importe los módulos de Oracle JET para los componentes Botón, Cuadro de diálogo y Texto de entrada.

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

3. En la lista de observables, declare e inicialice los observables de los campos del cuadro de diálogo de creación.

   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
   

4. Debajo del método constructor(), agregue un método denominado showCreateDialog para abrir el cuadro de diálogo.

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

5. Debajo del método showCreateDialog que ha creado, agregue un método denominado createItem para enviar los datos del cuadro de diálogo y agregue un comando de cierre.

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

6. Guarde el archivo dashboard.ts.

   El código debe ser similar a este archivo create-dashboard-ts.txt.

7. En la ventana de terminal, ejecute y pruebe la aplicación web.

   $ ojet serve
   

   El panel Ítems de actividad ahora contiene un botón Crear. Al hacer clic en él, se abre un cuadro de diálogo.

   

   Descripción de la ilustración create_dialog.png

8. Deje abierta la ventana de terminal y la ventana del explorador que muestra la aplicación web.

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

Recupere los datos del cuadro de diálogo de ViewModel, envíelos al servicio REST mediante la API de recuperación y el método HTTP POST y, finalmente, utilice el método mutate de RESTDataProvider para actualizar la instancia RESTDataProvider.

1. En el archivo dashboard.ts abierto, en el método createItem situado encima de la llamada close(), declare variables para contener los valores de entrada del cuadro de diálogo Crear nuevo elemento. Además, calcule el valor de quantity en función de los valores de entrada para quantity_instock y 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();
   } 
   

2. Debajo de la declaración de variable row, cree una solicitud para enviar los datos al servicio 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();
    . . .
   

3. Debajo de la variable addedRow, cree un evento mutado add y llame al método RESTDataProvider mutate para notificar a la instancia RESTDataProvider que se ha agregado una nueva fila. También llama al método RESTDataProvider refresh() para refrescar la visualización.

      . . .
      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();
   
   } 
   

4. Guarde el archivo dashboard.ts.

   El código debe ser similar a este archivo final-create-dashboard-ts.txt.

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

1. En el explorador, vea los cambios dinámicos en la aplicación web.

2. En la aplicación web, haga clic en la actividad de Béisbol.

3. Haga clic en Crear.

   Se abre el cuadro de diálogo Crear nuevo elemento.

4. Rellene los detalles de un nuevo artículo.

   • Nombre: SureFire Ball (Set of 4)
   • Precio: 20.5
   • Descripción: Canvas balls for practice
   • Cantidad: en stock: 35
   • Cantidad: Enviada: 61

5. Haga clic en Ejecutar.

   La sección se refresca y el elemento forma parte de la lista de elementos de actividad de béisbol.

6. Haga clic en el elemento SureFire Ball (Juego de 4) de la lista y vea sus detalles.

   

   Descripción de la ilustración create_record.png

7. Cierre la ventana o separador del explorador que muestra la aplicación web en ejecución.

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

Más recursos de aprendizaje

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

Para obtener documentación sobre los productos, visite Oracle Help Center.

---

Título e Información de Copyright

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

F49682-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.