Manejar eventos de selección en una aplicación web de Oracle JET

Introducción

Puede utilizar la API de Oracle JavaScript Extension Toolkit (Oracle JET) en viewModel de la aplicación web Oracle JET para crear manejadores de eventos que respondan al listener de cambio de atributo selected del componente Vista de Lista de Oracle JET. Cuando el usuario selecciona o anula la selección de un elemento de la lista, el listener de cambio dispara el manejador de eventos. Puede utilizar el manejador de eventos para rellenar el proveedor de datos de Oracle JET y enlazar el proveedor de datos a los observables que puede utilizar el componente de vista. El manejador de eventos también puede definir la variable booleana que utiliza el componente de enlace Oracle JET If para representar condicionalmente sus elementos HTML anidados en la vista. Si el atributo selected del componente de vista de lista de Oracle JET para la lista maestra no está vacío, la variable se define en true y la vista representa la lista de detalles de la base de datos. Si el atributo selected está vacío debido a un evento de anulación de selección, la variable se define en false y la vista presenta un contenedor en la vista sin la lista de detalles de la base de datos.

Objetivos

En este tutorial, actualizará la interfaz de usuario de una aplicación web de Oracle JET para que pueda mostrar los datos maestro-detalle. Aprenderá a crear un manejador de eventos de JavaScript mediante un listener de cambio de propiedad de Oracle JET. También aprenderá a utilizar un componente de enlace de Oracle JET If para mostrar condicionalmente la lista de detalles para manejar las selecciones de lista.

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 la versión de Oracle JET
Finalización de los tutoriales anteriores en esta ruta de aprendizaje, para que haya creado la aplicación web de Oracle JET en la carpeta JET_Web_Application
La aplicación finalizada jet_web_application_masterdetail_final.zip se descargó de manera opcional

Tarea 1: Definición del comportamiento de selección en la vista

Actualice la vista para personalizar los componentes de vista de lista para manejar una selección de fila en la lista Actividades y en la lista Ítems de actividad. El componente Vista de Lista de Oracle JET define el atributo first-selected-item que el componente rellena con los elementos de datos de la selección de filas del usuario y que puede leer en un observable mediante un enlace bidireccional. Utilice el atributo on-selection-changed del componente para capturar y procesar eventos de selección/anulación de selección de lista enlazando un listener de evento que defina en viewModel.

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

Debajo de la cabecera Actividades, busque el elemento HTML personalizado oj-list-view donde id="activitiesList" y, a continuación, agregue los atributos de comportamiento de selección después del atributo gridlines.item.

   
<h3 id="activitiesHeader">Activities</h3>
   <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
     data="[[activityDataProvider]]" gridlines.item="visible" selection-mode="single" selected="{{selectedActivity}}"
     on-first-selected-item-changed="[[selectedActivityChanged]]" first-selected-item="{{firstSelectedActivity}}"
     scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
     <template slot="itemTemplate">
. . .
   

Debajo de la cabecera Ítems de actividad, busque el elemento HTML personalizado oj-list-view donde id="itemsList" y, a continuación, agregue los atributos de comportamiento de selección después del atributo gridlines.item.

   
<h3 id="itemsListHeader">Activity Items</h3>
     <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader"
       gridlines.item="visible" selection-mode="single" selected="{{selectedItem}}"
       on-first-selected-item-changed="[[selectedItemChanged]]" first-selected-item="{{firstSelectedItem}}"
       scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
       <template slot="itemTemplate">
. . .
   

Guarde el archivo dashboard.html.

El archivo debe ser similar a event-task1-dashboard-html.txt.

Tarea 2: Creación de manejadores de eventos en ViewModel

Actualice viewModel para agregar manejadores de eventos para los componentes de vista de lista a fin de responder a las selecciones en la lista Actividades y en la lista Ítems de actividad. El componente de vista de lista de Oracle JET define un atributo selected, en el que la API de vista de lista de Oracle JET define un listener de cambio de propiedad. El manejador de eventos define los observables selectedActivity y selectedItem cuando el usuario realiza una selección de lista y el valor del atributo selected cambia.

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

Debajo de la definición observable pieSeriesValue, antes de constructor(), agregue observables para la selección de lista de actividades y la selección de lista de elementos de actividad.

class DashboardViewModel {
   . . . 
   pieSeriesValue: ko.ObservableArray;
   // Observables for Activities
   selectedActivity = new ObservableKeySet();
   activitySelected = ko.observable(false);  // Controls display of Activity Items
   firstSelectedActivity = ko.observable();
   selectedActivityIds = ko.observable();

   // Observables for Activity Items
   itemSelected = ko.observable(false);
   selectedItem = ko.observable();
   firstSelectedItem = ko.observable();

   constructor() {
   . . .

En la parte superior del archivo dashboard.ts, importe la clase ObservableKeySet del módulo ojs/ojknockout-keyset y la clase ojListView del módulo ojs/ojlistview.

import * as ko from "knockout";
. . . 
import "ojs/ojavatar";
import { ObservableKeySet } from "ojs/ojknockout-keyset";
import { ojListView } from "ojs/ojlistview";

Antes de la clase DashboardViewModel, agregue el alias de tipo ActivityItems.

. . . 
type ActivityItems = {
   id: number;
   name: string;
   items: Array<Item>;
   short_desc: string;
   image: string;
};

class DashboardViewModel {
. . .

Después de la declaración del método DashboardViewModel class constructor(), agregue el manejador de eventos selectedActivityChanged con condiciones de prueba para manejar los eventos de selección y anulación de selección.

} // End of constructor function

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
   *  If no items are selected then the firstSelectedItem property  returns an object 
   *  with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list

   } else {
         // If deselection, hide list          
   }
};

Implante este manejador de eventos en los siguientes pasos.

En la sentencia if del manejador de eventos selectedActivityChanged, rellene itemsDataProvider observable mediante la variable itemsArray y, a continuación, defina los observables de estado de selección activitySelected y itemSelected en true para el evento de selección.

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected, then this property firstSelectedItem 
    *  will return an object with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list
      // Hide currently-selected activity item
      this.activitySelected(false);

      let itemsArray = itemContext.items;
      this.itemsDataProvider.data = itemsArray;
      // Set List View properties
      this.activitySelected(true);
      this.itemSelected(false);
      this.selectedItem();
      this.itemData();

   } else {
         // If deselection, hide list
   }
};

En la sentencia else del manejador de eventos selectedActivityChanged, defina los observables de estado de selección activitySelected y itemSelected en false para el evento de anulación de selección.

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected then this property firstSelectedItem will return an 
    *  object with both key and data properties set to null.
   */

   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      . . .
   } 

   else {
      // If deselection, hide list
      this.activitySelected(false);
      this.itemSelected(false);
   }
};

Después del manejador de eventos selectedActivityChanged, agregue un manejador de eventos selectedItemChanged con condiciones de prueba para manejar los eventos de selección y anulación de selección.

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   . . .
};

/**
* Handle selection from Activity Items list
*/
selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

       // If selection, populate and display list
   }
   else {
   // If deselection, hide list
   }
};

Implante este manejador de eventos en los siguientes pasos.

En la sentencia if del manejador de eventos selectedItemChanged, rellene el observable itemData, rellene el observable pieSeriesValue mediante la variable de matriz pieSeries y, a continuación, defina el estado de selección itemSelected observable en true para el evento de selección.

selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

      // If selection, populate and display list
      this.itemData(event.detail.value.data);

      // Create variable and get attributes of the items list to set pie chart values
      let pieSeries = [
      { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
      { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
      ];
      // Update the pie chart with the data
      this.pieSeriesValue(pieSeries);

      this.itemSelected(true);

   }
   else {
   // If deselection, hide list

   }
};

En la sentencia else del manejador de eventos selectedItemChanged, defina el estado de selección itemSelected observable en false para el evento de anulación de selección.

selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   if (isClicked != null) {
   . . . 
   }
   else {
   // If deselection, hide list
   this.itemSelected(false);        
   }
};

Guarde el archivo dashboard.ts.

El archivo debe ser similar a final-event-dashboard-ts.txt.

Tarea 3: Condición de la representación de lista en la vista

Actualice la vista mediante los componentes de enlace de Oracle JET If para representar condicionalmente la lista de detalles. El componente Oracle JET If Binding toma una variable booleana en su atributo test. En un componente If Binding, anide el contenedor Activity Items y, en otro componente If Binding, anide el contenedor Item Details. A continuación, utilice los componentes If Binding para probar el estado de los observables activitySelected y itemSelected. El contenido anidado del componente If Binding se representa si la condición de prueba es true. Muestre la lista de límites de datos si el observable es true, según lo definido por el manejador de eventos de lista. Utilice otro componente If Binding para probar si el observable es false y, a continuación, muestre un contenedor con un mensaje que indique al usuario que realice una selección de lista.

Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.
Busque el elemento div donde id="parentContainer2". Por encima, agregue la etiqueta de apertura del elemento HTML personalizado oj-bind-if, con el atributo test definido en el estado del observable activitySelected.
```
. . .
   </oj-list-view>
</div>
<oj-bind-if test="[[activitySelected()]]">
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
   <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
   <h3 id="itemsListHeader">Activity Items</h3>
. . .
```
Cuando el usuario selecciona una actividad de la lista Actividades, el manejador de eventos viewModel Actividad cambiada define el valor de activitySelected observable en true. En este caso, se cumple la condición de prueba oj-bind-if y la aplicación presenta el contenedor de elementos de actividad para la selección de actividad. La notación () en la propiedad observable es la convención de función Knockout para obtener el valor observable en lugar de obtener la instancia del objeto observable.
Busque el elemento div donde id="itemDetailsContainer" y, por encima, agregue la etiqueta de apertura del elemento HTML personalizado oj-bind-if, con el atributo test definido en el estado del observable itemSelected.
```
. . .
   </oj-list-view>
</div>
<oj-bind-if test="[[itemSelected()]]">
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .     
```
Cuando el usuario selecciona un elemento de la lista Ítems de actividad, el manejador de eventos viewModel Elemento cambiado define itemSelected como observable en true. En este caso, se cumple la condición de prueba oj-bind-if y la aplicación presenta el contenedor de detalles de artículo para la selección del elemento de actividad.
En la parte inferior del archivo dashboard.html, cuente dos etiquetas de cierre </div> y, a continuación, agregue la etiqueta de cierre </oj-bind-if> para que coincida con la etiqueta de apertura <oj-bind-if test ="[[activitySelected()]]">. Cuente una etiqueta de cierre </div> más y, a continuación, agregue la etiqueta de cierre </oj-bind-if> para la etiqueta de apertura <oj-bind-if test ="[[itemSelected()]]">.
```
. . . 
            </oj-chart>
            </div>
         </div>
      </oj-bind-if>
      </div>
   </oj-bind-if>
   </div>
</div>
```
Debajo de la etiqueta de cierre </oj-bind-if> que ha agregado, más cercana al final del archivo, inserte un elemento HTML personalizado oj-bind-if test="[[!activitySelected()]]" que contenga un elemento div con clases auxiliares de diseño flexible oj-flex-item oj-sm-6 de Oracle JET.
```
. . . 
            </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>
```
La clase auxiliar oj-sm-6 de Oracle JET especifica que el contenedor de la cabecera Select an Activity to see Items ocupa seis columnas de contenedor para tamaños de pantalla pequeños y más grandes.

Hasta que el usuario seleccione una actividad, el valor observable de activitySelected es false. Asimismo, si el usuario pulsa la tecla Ctrl y hace clic en una actividad ya seleccionada, viewModel trata este evento como una anulación de selección y el manejador de eventos Actividad cambiada define activitySelected como observable en false. En ambos casos, la condición de prueba oj-bind-if se cumple con la condición booleana false y la aplicación presenta la cabecera Select an Activity to see Items.
Debajo de la primera etiqueta de cierre </oj-bind-if> del archivo, agregue un elemento HTML personalizado oj-bind-if test ="[[!itemSelected()]]" que contenga un elemento div con clases auxiliares de diseño de Oracle JET oj-flex-item oj-sm-12 oj-md-6 flex.
```
. . .
                  </oj-chart>
               </div>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!itemSelected()]]">
            <div class="oj-flex-item oj-sm-12 oj-md-6">
               <p>Select an Item to see details</p>
            </div>
         </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>
```
Las clases auxiliares de Oracle JET oj-sm-12 y oj-md-6 especifican que el contenedor de la cabecera Select an Item para ver detalles ocupa seis columnas de contenedor para tamaños de pantalla medios y más grandes o ocupa doce columnas de contenedor para tamaños de pantalla pequeños.

Hasta que el usuario seleccione un elemento de actividad, el valor del observable itemSelected es false. Asimismo, si el usuario pulsa la tecla Ctrl y hace clic en un elemento de actividad ya seleccionado, viewModel trata este evento como una anulación de selección y el manejador de eventos Elemento cambiado establece itemSelected como observable en false. En ambos casos, la condición de prueba oj-bind-if se cumple con la condición booleana false y la aplicación presenta la cabecera Select an Item to see details.
Guarde el archivo dashboard.html.

El archivo debe ser similar a final-event-dashboard-html.txt.

Tarea 4: Prueba de las listas maestras y de detalles

En la ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación.
```
$ ojet serve
```
En el explorador web, haga clic en la actividad de Béisbol de la aplicación.

La selección de la lista Actividades dispara el manejador de eventos selectedActivityChanged. Se representa el contenedor Elementos de actividad para la actividad seleccionada.

Descripción de la ilustración master_detail_list.png
En la lista Elementos de actividad, haga clic en SureCatch Globo de béisbol.

La selección de la lista Elementos de actividad dispara el manejador de eventos selectedItemChanged. La aplicación presenta el contenedor Detalles de elemento para el elemento seleccionado.

Descripción de la ilustración master_detail_item.png
En la lista Elementos de actividad, pulse Ctrl y haga clic en SureCatch Baseball Glove para anular la selección.

La anulación de selección de la lista Elementos de actividad dispara el manejador de eventos selectedItemChanged. El contenedor Detalles de artículo está oculto.

Descripción de la ilustración master_detail_list.png
Cambie el tamaño del explorador o pulse Ctrl+Shift+I para abrir Chrome DevTools y seleccione un tamaño de pantalla más pequeño, como Pixel 5, del emulador de tamaño de pantalla.

Los recipientes estándispuestos de acuerdo con el tamaño de la pantalla.

Descripción de la ilustración resized_master_detail_list.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.

Tarea 5: (Opcional) Ejecutar una aplicación web desde una aplicación restaurada

Si desea ejecutar la aplicación web 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 Oracle JET "stripped and zipped", debe restaurar las dependencias del proyecto, incluidas las herramientas de Oracle JET y las bibliotecas y los módulos necesarios, en la aplicación extraída.

Descargue el archivo jet_web_application_masterdetail_final.zip y extraiga el contenido de la aplicación finalizada en la carpeta jet_web_application_masterdetail_final.
En la ventana de terminal, navegue hasta la carpeta jet_web_application_masterdetail_final y restaure la aplicación web Oracle JET.
```
$ ojet restore
```
Espere la confirmación.
```
. . .
Success: Restore complete
```
La aplicación está lista para ejecutarse.
Ejecute la aplicación web y pruébela en el explorador.
```
$ ojet serve
```
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

Handle selection events in an Oracle JET web app

F53160-01

February 2022