Manejar eventos de selección en una aplicación DOM virtual de Oracle JET

Introducción

En la aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET), puede utilizar una combinación de recursos de Preact, incluidos el estado, las propiedades y los enlaces, para crear listeners de cambio y manejadores de eventos que respondan a la selección y anulación de la selección en los componentes de la vista de lista de Oracle JET. Cuando el usuario selecciona una actividad o un elemento de actividad en las vistas de lista maestra o de detalles de la aplicación, el listener de cambio dispara el manejador de eventos, que crea el objeto de proveedor de datos de Oracle JET que rellena los componentes de vista de lista en los contenedores de actividad e ítem de actividad.

En los componentes del contenedor principal, implante una representación condicional de los componentes secundarios de modo que si determinados atributos selected de los componentes de la vista de lista de Oracle JET no están vacíos, una variable se defina en true y la vista muestre 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 los componentes secundarios se representan sin vista de detalles.

Objetivos

En este tutorial, actualizará la interfaz de usuario de una aplicación DOM virtual de Oracle JET para que pueda mostrar datos maestro-detalle que respondan a los eventos de selección de componentes de vista de lista de Oracle JET.

Requisitos

Tarea 1: Modificar contenedor principal 1 para selección

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

  2. Agregue una sentencia import para el enlace useState en la parte superior del archivo.

    import { useState } from 'preact/hooks';

  3. Cree un alias de tipo Item y una variable INIT_SELECTEDACTIVITY.

    type Item = {
  id: number;
  name: string;
  short_desc?: string;
  price?: number;
  quantity?: number;
  quantity_shipped?: number;
  quantity_instock?: number;
  activity_id?: number;
  image?: string;
};

let INIT_SELECTEDACTIVITY: Item | null = null;

  4. Antes de la sentencia return en la función ParentContainer1, agregue el siguiente código.

    const [selectedActivity, setSelectedActivity] = useState(INIT_SELECTEDACTIVITY);

const showActivityItems = () => {
  return selectedActivity != null ? true : false;
};

const activityChangedHandler = (value: Item) => {
  setSelectedActivity(value);
};

  5. Agregue el atributo onActivityChanged al elemento ActivityContainer y sustituya el elemento ParentContainer2 por un par de sentencias condicionales utilizadas para mostrar el elemento ParentContainer2 con un valor de propiedad selectedActivity procedente del componente ActivityContainer o para mostrar una cabecera con instrucciones para seleccionar una actividad. Suprima también las clases de estilo oj-bg-warning-20 y oj-panel del elemento div para eliminar el color de fondo amarillo y el borde del contenedor.

    return (
  <div id="parentContainer1" class="oj-flex oj-flex-init">
    <ActivityContainer data={activityDataProvider} onActivityChanged={activityChangedHandler} />
    {showActivityItems() && <ParentContainer2 activity={selectedActivity} />}
    {!showActivityItems() && (
      <h4 class="oj-typography-subheading-sm">Select activity to view items</h4>
    )}
  </div>
);

    Guarde el archivo. El código debe tener un aspecto similar a parent-container1-1-tsx.txt

Tarea 2: Modificación del contenedor de actividad para selección

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

  2. Agregue las siguientes sentencias import a la parte superior del archivo.

    import { KeySetImpl, KeySet } from 'ojs/ojkeyset';
import { useMemo } from 'preact/hooks';

  3. Agregue la propiedad onActivityChanged al alias de tipo Props. Cree también un alias de tipo Item.

    type Props = {
  data?: MutableArrayDataProvider<Activity['id'], Activity>;
  value?: string;
  onActivityChanged: (value: Item) => void;
};

type Item = {
  id: number;
  name: string;
  short_desc?: string;
  price?: number;
  quantity?: number;
  quantity_shipped?: number;
  quantity_instock?: number;
  activity_id?: number;
  image?: string;
};

  4. Antes de la sentencia return en la función ActivityContainer, agregue el siguiente código.

    const selectedActivityChanged = (
  event: ojListView.firstSelectedItemChanged<Item['id'], Item>
) => {
  props.onActivityChanged(event.detail.value.data);
};

const activityValue = useMemo(() => {
  return new KeySetImpl([props.value]) as KeySet<Activity['name']>;
}, [props.value]);

  5. Agregue los atributos selected y onfirstSelectedItemChanged al componente Oracle JET List View. Suprima también oj-bg-info-30 del elemento div para eliminar el color de fondo azul del contenedor.

    selected = { activityValue };
onfirstSelectedItemChanged = { selectedActivityChanged };

    Guarde el archivo. Su código debe tener un aspecto similar a activity-container-1-tsx.txt.

Tarea 3: Modificar contenedor principal 2 para selección

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

  2. Agregue una sentencia import para los siguientes enlaces de Preact en la parte superior del archivo.

    import { useState, useEffect, useCallback } from 'preact/hooks';

  3. Agregue un alias de tipo Props.

    type Props = {
  activity: Item | null;
};

  4. Cambie el nombre de const activityItemDP a const INIT_DATAPROVIDER y suprima la variable const specificItem.

  5. Agregue props a la definición de función ParentContainer2

    const ParentContainer2 = (props: Props) => {

  6. Agregue enlaces de estado y de precisión antes de la sentencia return de la función.

    const [selectedItemVal, setSelectedItemVal] = useState<Item | null>(null);
const [activityItemDP, setactivityItemDP] = useState(INIT_DATAPROVIDER);

const activityItemChangeHandler = useCallback(
  (item: Item) => {
    setSelectedItemVal(item);
  },
  [selectedItemVal]
);

const showItems = useCallback(() => {
  return selectedItemVal === null ? false : true;
}, [selectedItemVal]);

  7. Agregue un enlace useEffect antes de la sentencia return.

    useEffect(() => {
  let actID = props.activity.id - 1;
  let activityItemsArray = activityData[actID].items;
  setactivityItemDP(
    new MutableArrayDataProvider<ActivityItem['id'], ActivityItem>(activityItemsArray, {
      keyAttributes: 'id',
    })
  );
}, [props.activity]);

  8. Agregue los atributos de datos selectedActivity y onItemChanged al elemento ActivityItemContainer. Sustituya el elemento ItemDetailContainer por un par de sentencias condicionales para mostrar el elemento ItemDetailContainer con el valor de elemento de actividad seleccionado o mostrar una cabecera con instrucciones para seleccionar un elemento de actividad. Suprima también las clases de estilo oj-panel y oj-bg-danger-30 del elemento div para eliminar el color de fondo rojo y el borde del contenedor.

    <div
  id="parentContainer2"
  class="oj-flex oj-flex-item oj-lg-padding-6x-horizontal oj-md-8 oj-sm-12">
  <ActivityItemContainer
    selectedActivity={props.activity}
    data={activityItemDP}
    onItemChanged={activityItemChangeHandler}
  />
  {showItems() && <ItemDetailContainer item={selectedItemVal} />}
  {!showItems() && (
    <h4 class="oj-typography-subheading-sm">Select activity item to see details</h4>
  )}
</div>

    El código debe tener un aspecto similar a parent-container2-1-tsx.txt

Tarea 4: Modificación del contenedor de elementos de actividad para su selección

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

  2. Agregue una sentencia import para los siguientes enlaces de Preact en la parte superior del archivo.

    import { useState, useCallback } from 'preact/hooks';

  3. Sustituya el alias de tipo Props.

    type Props = {
  data?: MutableArrayDataProvider<ActivityItem['id'], ActivityItem>;
  selectedActivity: Item | null;
  onItemChanged: (item: Item) => void;
};

  4. Agregue una variable DEFAULT_ACTIVITY_ITEM_STATE.

    const DEFAULT_ACTIVITY_ITEM_STATE: Partial<Item> = {};

  5. Agregue el siguiente código antes de la sentencia return en la definición de función ActivityItemContainer.

    // new code
const activityItemDataProvider = props.data;

const [activityItemValue, setActivityItemValue] = useState(DEFAULT_ACTIVITY_ITEM_STATE);

const [itemData, setItemData] = useState<Item>(props.selectedActivity!);

const selectedActivityItemChanged = useCallback(
  (event: ojListView.firstSelectedItemChanged<Item['id'], Item>) => {
    let tempItem = event.detail.value.data;
    props.onItemChanged(tempItem);
    setActivityItemValue(tempItem);
    setItemData(tempItem);
  },
  [activityItemValue]
);

  6. En el elemento Oracle JET List View, agregue un atributo onFirstSelectedItemChanged y sustituya el atributo data. Suprima también la clase de estilo oj-bg-success-20 del elemento div donde id="activityItemsContainer" elimina el color de fondo verde del contenedor.

     <div
 id="activityItemsContainer"
 class="oj-flex-item oj-sm-padding-4x-start oj-md-6 oj-sm-12">
 <div id="container">
   <h3>Activity Items</h3>
   <oj-list-view
     id="activitiesList"
     class="item-display"
     aria-labelledby="activitiesHeader"
     data={activityItemDataProvider}
     gridlines={gridlinesItemVisible}
     selectionMode="single"
     onfirstSelectedItemChanged={selectedActivityItemChanged}
     scrollPolicy="loadMoreOnScroll"
     scrollPolicyOptions={scrollPolicyOpts}>
     <template slot="itemTemplate" render={listItemRenderer}></template>
   </oj-list-view>

    Guarde el archivo. El código debe tener un aspecto similar a activity-item-container-tsx.txt

  7. Navegue hasta el directorio JET-Virtual-DOM-app/src/components/ItemDetail y abra el archivo ItemDetailContainer.tsx en un editor.

  8. En la sentencia return de la función ItemDetailContainer, suprima la clase de estilo oj-bg-neutral-30 del elemento div para eliminar el color de fondo gris del contenedor. Guarde el archivo.

Tarea 5: Probar eventos de selección en la aplicación DOM virtual

  1. En la ventana de terminal, cambie al directorio JET-Virtual-DOM-app y ejecute la aplicación DOM virtual.

    npx ojet serve

  2. En la aplicación DOM virtual, haga clic en la actividad Béisbol.

    La selección de la lista Actividades dispara el manejador de eventos selectedActivityChanged. La aplicación DOM virtual representa los datos del ítem de actividad de la actividad seleccionada.

    Elementos de actividad representados para la actividad de béisbol

  3. En la lista Elementos de actividad, haga clic en SureCatch Guante de béisbol.

    La selección de lista Ítems de actividad dispara el manejador de eventos selectedActivityItemChanged. La aplicación DOM virtual presenta el contenedor de detalles de artículo con los datos del artículo de actividad seleccionado.

    Detalles de elementos representados para el guante de béisbol SureCatch

  4. En la lista Elementos de actividad, pulse Ctrl y haga clic en SureCatch Guante de béisbol para anular la selección.

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

    Elementos de actividad representados para la actividad de béisbol

  5. Pulse Ctrl+Shift+I o haga clic con el botón derecho en la página y seleccione Inspeccionar para abrir la vista de página en las herramientas de desarrollador.

  6. En la barra de herramientas de Chrome DevTools, haga clic en Botón Alternar barra de herramientas del dispositivo para cambiar al modo de dispositivo.

  7. En el menú desplegable Dimensiones del emulador de pantalla, seleccione un dispositivo con un tamaño de pantalla pequeño, como el Pixel 5, para verificar los cambios de contenido.

    Elementos de actividad representados para la actividad de béisbol

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

  9. 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 6: (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 DOM virtual desde el archivo de almacenamiento descargado. Para trabajar con una aplicación de DOM virtual de Oracle JET stripped and zipped, debe restaurar las dependencias del proyecto, incluidas las herramientas de Oracle JET y las bibliotecas y módulos necesarios, dentro de la aplicación de DOM virtual extraída.

  1. Descargue el archivo jet-virtual-dom-app-temp.zip, cámbiele el nombre a JET-Virtual-DOM-app.zip y extraiga el contenido en el directorio JET-Virtual-DOM-app.

  2. En la ventana de terminal, navegue hasta el directorio JET-Virtual-DOM-app y restaure la aplicación Oracle JET Virtual DOM.

    npm install

  3. Espere la confirmación.

    Success: Restore complete

    La aplicación DOM virtual está lista para ejecutarse.

  4. Ejecute la aplicación DOM virtual y pruébela 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 Master Detail Views in Oracle JET 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, Recuperación de datos de la API de REST en Oracle JET, en el módulo Operaciones de CRUD mediante un servicio REST.

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.

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.