Crear la vista de detalles en una aplicación DOM virtual de Oracle JET

Introducción

Los componentes de Oracle JavaScript Extension Toolkit (Oracle JET) conservan la relación jerárquica de los objetos de datos maestros y detallados, según la definición del origen de datos. En el tutorial anterior, ha creado un objeto de proveedor de datos mediante una instancia de la clase MutableArrayDataProvider. Con props, ha transferido el objeto de proveedor de datos al componente de vista de lista en el componente ActivityContainer y ha representado los elementos de datos. Ahora, al utilizar el mismo almacén de datos JSON, creará la vista de detalles de la aplicación rellenando los componentes ActivityItemContainer y ItemDetailContainer, respectivamente, con los elementos de actividad de una actividad determinada y los detalles de elemento específicos de un elemento de actividad transfiriéndolos datos de un contenedor principal mediante props.

Objetivos

En este tutorial, leerá los datos jerárquicos maestro-detalle de un documento JSON local y mostrará la vista de detalles en una aplicación DOM virtual de Oracle JET. Los datos enlazarán varios elementos de los objetos de datos secundarios de un documento JSON local y rellenarán las filas de un componente de vista de lista de Oracle JET en el componente ActivityItemContainer con esos datos, así como los componentes Avatar y Gráfico de Oracle JET en el componente ItemDetailContainer.

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones DOM virtuales de Oracle JET que incluye una instalación de Node.js
Finalización del tutorial anterior en esta ruta de aprendizaje, Creación de la vista maestra en una aplicación Oracle JET Virtual DOM

Tarea 1: Creación de un proveedor de datos en el contenedor principal 2

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

En la parte superior del archivo, agregue sentencias import para la clase MutableArrayDataProvider y los datos JSON en el archivo store_data.json.

 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
 import * as storeData from "text!./store_data.json";

Cree alias de tipo Item y ActivityItem.

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

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

Agregue una instancia activityItemDP de MutableArrayDataProvider, así como dos variables utilizadas para proporcionar al proveedor de datos los elementos de la actividad de béisbol desde el origen de datos JSON.

 const activityData = JSON.parse(storeData);
 let activityItemsArray = activityData[0].items

 // Create data provider instance for the array of activity items for the Baseball activity
 const activityItemDP = new MutableArrayDataProvider<ActivityItem["id"], ActivityItem>(activityItemsArray, {
   keyAttributes: "id",
 });

En la función ParentContainer2, agregue un atributo data al elemento ActivityItemContainer para transferir el objeto de proveedor de datos al componente ActivityItemContainer mediante props.
```
 <ActivityItemContainer data={activityItemDP} />
```
Guarde el archivo. Su código debe tener un aspecto similar a parent-container2-1-tsx.txt.

Tarea 2: Creación del componente de vista de lista del contenedor de elementos de actividad

Navegue hasta el directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx en un editor.
En la parte superior del archivo, suprima las sentencias import para el módulo ResponsiveUtils y los enlaces useRef, useState y useEffect. También suprima la variable sm_md_view.

Dentro de la función ActivityItemContainer, elimine el código que utiliza enlaces y estados y que permite la visualización condicional del contenido en la sentencia return. La función debe tener un aspecto similar al siguiente código.

 const ActivityItemContainer = () => {

   return (
     <div
       id="activityItemsContainer"
       class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
       <div id="container" class="item-display no-wrap">
         <h3>Activity Items</h3>
         <ul>
           <li class="li-item">Louisville Slugger Bat</li>
           . . .
         </ul>
       </div>
     </div>
   );
 };

Suprima el elemento ul de la sentencia return y, en el elemento div donde id="container", elimine el atributo class. La función ActivityItemContainer debe tener un aspecto similar al siguiente código.

 const ActivityItemContainer = () => {

   return (
     <div
       id="activityItemsContainer"
       class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
       <div id="container">
         <h3>Activity Items</h3>
       </div>
     </div>
   );
 };

Agregue las siguientes sentencias import para el componente de vista de lista de Oracle JET y la clase MutableArrayDataProvider a la parte superior del archivo.

 import "ojs/ojlistview";
 import { ojListView } from "ojs/ojlistview";
 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

Agregue alias de tipo Props, ActivityItem y Item debajo del bloque de sentencias import.

 type Props = {
   data?: MutableArrayDataProvider<ActivityItem["id"], ActivityItem>;
   value?: string;
 };

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

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

Cree la función listItemRenderer que representa cada elemento de lista e incluye elementos span y div para rellenar las filas del componente de vista de lista con una imagen de fondo, un nombre y una descripción corta.

 const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
   const image = item.data.image.replace("css", "styles");
   return (
     <div class="oj-flex no-wrap">
       <span
         class="demo-thumbnail oj-flex-item"
         style={"background-image:url(" + image + ")"}></span>
       <div class="demo-content oj-flex-item">
         <div>
           <strong>{item.data.name}</strong>
         </div>
         <span class="demo-metadata">{item.data.short_desc}</span>
       </div>
     </div>
   );
 };

Bajo la función listItemRenderer, agregue un alias de tipo ListViewProps y dos variables para definir las propiedades de cuadrícula y desplazamiento para el componente de vista de lista.

 type ListViewProps = ComponentProps<"oj-list-view">;
 const gridlinesItemVisible: ListViewProps["gridlines"] = { item: "visible" };
 const scrollPolicyOpts: ListViewProps["scrollPolicyOptions"] = { fetchSize: 5 };

Agregue props a la definición de función ActivityItemContainer.
```
 const ActivityItemContainer = (props: Props) => {
```

Dentro de la sentencia return de la función ActivityItemContainer, agregue un componente de vista de lista de Oracle JET, donde se accede al objeto del proveedor de datos que se transfiere desde ParentContainer2 mediante props en el atributo data de la vista de lista.

return (
  <div
    id="activityItemsContainer"
    class="oj-flex-item oj-bg-success-20 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={props.data}
        gridlines={gridlinesItemVisible}
        selectionMode="single"
        scrollPolicy="loadMoreOnScroll"
        scrollPolicyOptions={scrollPolicyOpts}>
      </oj-list-view>
    </div>
  </div>
 );

En el componente de vista de lista, agregue un elemento template con un atributo slot para representar cada elemento de la lista.
```
. . .
    <template slot="itemTemplate" render={listItemRenderer}></template>
</oj-list-view>
```
Guarde el archivo. Su código debe tener un aspecto similar a activity-item-container-1-tsx.txt.

Tarea 3: Ejecución de la aplicación DOM virtual

En la ventana de terminal, navegue hasta el directorio JET_Virtual_DOM_app y ejecute la aplicación.
```
 npx ojet serve
```
La aplicación se ejecuta en el explorador web y la lista Elementos de actividad muestra los elementos de actividad de béisbol con sus descripciones cortas e imágenes en miniatura.
Deje abierta la ventana de terminal y el explorador que muestra la aplicación.

Tarea 4: Creación del gráfico de detalles del artículo y componentes del avatar

Transfiera los detalles del elemento de la actividad Guante de béisbol SureCatch del componente ParentContainer2 al componente ItemDetailContainer a través de props, enlazando los datos a los componentes Gráfico y Avatar de Oracle JET, así como a varios campos de texto.

Navegue hasta el directorio JET-Virtual-DOM-app/src/components y abra el archivo ParentContainer2.tsx en un editor.
Debajo de la instancia activityItemDP, agregue una variable specificItem para contener los datos de detalles del elemento para el elemento de actividad SureCatch Baseball Glove.
```
 // Create an object variable holding the item details for the SureCatch Baseball Glove 
 const specificItem: Item = activityData[0].items[0]
```
Agregue un atributo item al elemento ItemDetailContainer para transferir los detalles del elemento al componente secundario mediante props.
```
 <ItemDetailContainer item={specificItem} />
```
Guarde el archivo. Su código debe tener un aspecto similar a parent-container2-2-tsx.txt.
Navegue hasta el directorio JET-Virtual-DOM-app/src/components/ItemDetailContainer y abra el archivo ItemDetailContainer.tsx en un editor.

Elimine estas sentencias import de la parte superior del archivo.

 import { useState, useCallback } from "preact/hooks";
 import "ojs/ojlabel";
 import "ojs/ojselectsingle";
 import { ojSelectSingle } from "ojs/ojselectsingle";
 import * as storeData from "text!../store_data.json";
 import "ojs/ojlistview";
 import { ojListView } from "ojs/ojlistview";
 import "ojs/ojlistitemlayout";

Agregue una sentencia import para el módulo ojavatar.
```
 import "ojs/ojavatar";
```
Elimine el alias de tipo ChartType, las variables chartTypeData y chartData y las instancias de proveedor de datos chartTypesDP y chartDataProvider.

Agregue alias de tipo Props y Item.

 type Props = {
   item?: Item;
 };

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

Dentro de la función ItemDetailContainer, suprima las siguientes líneas de código.

 const [val, setVal] = useState("bar" as ChartProps['type']);

 const valChangeHandler = useCallback(
   (event: ojSelectSingle.valueChanged<ChartType['value'], ChartType>) => {
     setVal(event.detail.value as ChartProps['type']);
   },
   [val, setVal]
 );

Sustituya la variable de plantilla chartItem.

const chartItem = (
  item: ojChart.ItemTemplateContext<ChartItem["id"], ChartItem>
) => {
  return (
    <oj-chart-item
      value={item.data.value}
      groupId={[0]}
      seriesId={item.data.series}
    ></oj-chart-item>
  );
};

Agregue props a la definición de función ItemDetailContainer
```
const ItemDetailContainer = (props: Props) => {
```

Agregue una instancia pieDataProvider de MutableArrayDataProvider antes de la sentencia return.

const pieDataProvider: MutableArrayDataProvider<ChartItem["id"], ChartItem> = new MutableArrayDataProvider(
  [
    { series: "Quantity in Stock", value: props.item.quantity_instock },
    { series: "Quantity shipped", value: props.item.quantity_shipped },
  ],
  { keyAttributes: "id" }
);

Dentro de la sentencia return, bajo la cabecera h3 de Item Details, suprima los elementos oj-label y oj-select-single. Sustituya ese código por una regla horizontal, un elemento oj-avatar y elementos div para mostrar los detalles de los elementos enlazados a datos.

<hr class="hr-margin" />
<oj-avatar role="img" size="lg" aria-label={"product image for" + props.item.name} 
    src={props.item?.image?.replace("css", "styles")} class="float-right"></oj-avatar>
<div id="itemName" class="data-name">{props.item.name}</div>
<div id="itemDesc" class="data-desc">{props.item.short_desc}</div>
<div id="itemPrice">{"Price: " + props.item.price + " each"}</div>
<div id="itemId">{"Item Id: " + props.item.id}</div>

Sustituya los atributos id, type y data en el elemento oj-chart. Agregue también un elemento div que rodee el elemento oj-chart.

<div>
  <oj-chart id="pieChart" type="pie" data={pieDataProvider} animationOnDisplay="auto"
            animationOnDataChange="auto" hoverBehavior="dim" class="chartStyle">
    <template slot="itemTemplate" render={chartItem}></template>
    </oj-chart>
   </div>
  </div>
 );
};

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

Navegue hasta el directorio JET-Virtual-DOM-app/src/styles y abra el archivo app.css en un editor.

Agregue las siguientes clases de estilo al archivo que se utilizan para formatear los detalles del elemento.

.hr-margin {
  margin-top: 12px;
}

.data-name {
  font-size: 20px;
  font-weight: bolder;
}

.data-desc {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

Guarde el archivo. El código debe tener un aspecto similar a app.css.

Tarea 5: Ver los cambios en la aplicación

Vuelva al navegador para ver los cambios en la aplicación DOM virtual.

En el contenedor de detalles de artículo, los campos de texto de conexión a datos y los componentes de Avatar y Gráfico de Oracle JET muestran los datos del elemento SureCatch Baseball Glove. Sin embargo, las listas del contenedor de elementos de actividad y del contenedor de actividades no responden a la selección. En el siguiente tutorial, agregará la funcionalidad de selección.
Cierre la ventana o el separador del explorador que muestra la aplicación 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.

Siguiente paso

Continúe con el siguiente tutorial de este módulo.

Este tutorial forma parte del módulo Vistas de detalles maestros en Oracle JET.

Creación de la Vista Maestra en una Aplicación Oracle JET Virtual DOM
Creación de la Vista de Detalle en una Aplicación Oracle JET Virtual DOM
Gestión de Eventos de Selección en una Aplicación Oracle JET Virtual DOM

Puede volver a la página principal de la ruta de aprendizaje de DOM virtual para acceder a todos los módulos de 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.

Título e Información de Copyright

Create the detail view in an Oracle JET virtual DOM app

F72836-02

Oracle y/o sus filiales.