Actualizar 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 actualizar un registro de datos existente y enviarlo a un servicio REST.

Objetivos

Al finalizar este tutorial, habrá aprendido a actualizar un registro de datos existente y enviarlo a 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 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 información de formulario, que después se transfiere a un observable.

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

Busque el elemento oj-button id="createButton" y agregue un segundo elemento oj-button debajo. Defina el atributo on-oj-action en "[[showEditDialog]]" y el atributo disabled en "[[!itemSelected()]]".

. . .
<h3 id="itemsListHeader">Activity Items</h3>
 <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
<!-- If itemSelected is set to false, disabled is true, and vice versa. -->
<oj-button id="updateButton" disabled="[[!itemSelected()]]" on-oj-action="[[showEditDialog]]">Update
  </oj-button>
<oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]"
. . . 

Busque la etiqueta oj-bind-if test="[[itemSelected()]]" y agregue un elemento oj-dialog dentro de ella. Defina el atributo id en "editDialog" y el atributo class en no-display.

. . . 
<oj-bind-if test="[[itemSelected()]]">
   <oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
      </oj-dialog>
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .

Dentro del elemento oj-dialog que ha creado, agregue dos etiquetas div con los atributos slot="body" y slot="footer".

<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
<div slot="body">
  </div>
<div slot="footer">
  </div>
</oj-dialog>

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

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

Dentro de la etiqueta div slot="body" que ha creado, agregue un elemento oj-label-value, un elemento oj-label y un elemento oj-input-text para el valor inputItemID.

<div slot="body">
  <oj-label-value label-edge="inside">
   <oj-label for="chatWindow" slot="label">Item ID</oj-label>
   <div slot="value" class="slot-line">
     <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
   </div>
 </oj-label-value>
</div>

Debajo del elemento oj-label-value, agregue elementos oj-input-text para los valores Name, Price y Description.

   
<div slot="body">
   . . .
   </oj-label-value>
   <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
</div>
   

Tenga en cuenta que enlaza el valor inputItemID mediante corchetes, que indica un enlace unidireccional, porque el usuario no debe editar el valor de ID. Se enlaza inputItemName y otros valores mediante paréntesis angulares, que indica el enlace bidireccional y permite al usuario sobrescribir el valor.

Verifique que el componente de vista de lista con id="itemsList" especifique selectedItemChanged como valor para el atributo on-first-selected-item-changed.
Guarde el archivo dashboard.html.

El código debe ser similar a este archivo final-update-dashboard-html.txt.
Navegue al directorio JET_Web_Application/src/css y abra el archivo app.css. Agregue las siguientes definiciones de estilo al final del archivo.
```
. . .
.no-display {
   display: none;
}

.slot-line {
   line-height: 2.4em;
}

.text-width {
   width: 100%;
   min-width: 100%;
}
```
El código debe ser similar a este archivo final-css.txt.

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

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

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

En la parte superior del archivo dashboard.ts, verifique que se importen los módulos de Oracle JET para el componente Diálogo y el componente Texto de entrada.

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

En la clase DashboardViewModel, debajo del código anterior para crear un nuevo elemento de actividad, cree un método denominado showEditDialog para abrir el cuadro de diálogo y recuperar los valores de los campos que desea actualizar.

. . .
public createItem = async (event: ojButtonEventMap["ojAction"]) => {
. . .
 } // end createItem

public showEditDialog = (event: ojButtonEventMap["ojAction"]) => {

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

Debajo del método showEditDialog, cree un método denominado updateItemSubmit para enviar los datos del cuadro de diálogo y agregue un comando close.

public showEditDialog = (event: ojButtonEventMap["ojAction"]) => {

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
   (document.getElementById("editDialog") as ojDialog).close();
}  

Guarde el archivo dashboard.ts. El código debe ser similar a este archivo update-dashboard-ts.txt.

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

Cree objetos para contener los datos que recupera del cuadro de diálogo de su vista y envíelos al servicio REST mediante la API de recuperación y el método HTTP PUT. Por último, utilice el método mutate de RESTDataProvider en la instancia RESTDataProvider.

En el archivo dashboard.ts abierto, en la clase DashboardViewModel, declare los tipos e inicialice las siguientes variables que utilizará en el método que envía los datos.

class DashboardViewModel {
   . . .
   // Fields in update dialog
   inputItemID: ko.Observable<number>;
   inputItemName: ko.Observable<string>;
   inputPrice: ko.Observable<number>;
   inputShortDesc: ko.Observable<string>; 

   //  Fields for delete button and update dialog, among others
   selectedRow = ko.observable<number>();
   . . .

   constructor() {
   . . .
      // Initialize fields in update dialog
      this.inputItemID = ko.observable();
      this.inputItemName = ko.observable();
      this.inputPrice = ko.observable();
      this.inputShortDesc = ko.observable();

   } // End constructor

En el método updateItemSubmit anterior a la llamada close(), declare una variable, row, para contener los valores de entrada del cuadro de diálogo Actualizar detalles de elemento. También incluya una sentencia if para comprobar que se han seleccionado datos.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
    const currentRow = this.selectedRow; 
         if (currentRow != null) {
            const row = {
               itemId: this.itemData().id,
               name: this.inputItemName(),
               price: this.inputPrice(),
               short_desc: this.inputShortDesc()
            };
   }; // End if statement
 (document.getElementById("editDialog") as ojDialog).close();
}  

Encima de la llamada close(), cree una solicitud para enviar los datos al servicio REST.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {

 const currentRow = this.selectedRow;

 if (currentRow != null) {

   const row = {
   	. . .
      short_desc: this.inputShortDesc()
   };

// Create and send request to update row on rest service
   const request = new Request(

     `${this.restServerURLItems}${this.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();  
 } // End if statement
 (document.getElementById("editDialog") as ojDialog).close();

}  // update-item-end

Debajo de la solicitud para enviar datos al servicio REST, cree un mutante update y llame al método mutate para notificar a la instancia RESTDataProvider que se han actualizado los datos. También llame al método refresh() para refrescar los datos que se muestran en el explorador.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {

const currentRow = this.selectedRow; 

   if (currentRow != null) {
      . . .

   };

   const request = new Request(

   `${this.restServerURLItems}${this.itemData().id}`,
      {
         . . .
      }
      );

. . . 
   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 = this.itemData().id;
   const updatedRowMetaData = { key: updatedRowKey };
   this.itemsDataProvider.mutate({
   update: {
      data: [updatedRow.items[0]],
      keys: new Set([updatedRowKey]),
      metadata: [updatedRowMetaData],
   },
   });
   this.itemsDataProvider.refresh();

   } // End if statement
   (document.getElementById("editDialog") as ojDialog).close();
}  // update-item-end

Guarde el archivo dashboard.ts.

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

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

En el explorador, vea los cambios dinámicos en la aplicación web.
En la aplicación web, haga clic en la actividad de Béisbol y, a continuación, haga clic en el elemento SureFire Ball (Juego de 4).
Haga clic en el botón Actualizar.

Aparece el cuadro de diálogo Actualizar detalles de elemento.
Cambie el precio de 20.5 a 21 y haga clic en Enviar.

La sección se refresca y el precio del artículo se ha actualizado.

Descripción de la ilustración update_record.png
Cierre la ventana o separador del explorador que muestra la aplicación web 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.

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

Update data records in an Oracle JET web app

F49653-01

February 2022