Crear la vista de detalles en una aplicación web 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 lo definido por el origen de datos. En viewModel para la aplicación web de Oracle JET, puede utilizar la API de Oracle JET para crear un objeto de proveedor de datos. El objeto representa una matriz de datos que se rellena a partir de los objetos de datos secundarios de un almacén de datos de documentos JavaScript Object Notation (JSON). El proveedor de datos de Oracle JET recupera los objetos de datos secundarios según el atributo de clave id del objeto de datos principal actual. En la vista de la aplicación web Oracle JET, el atributo data del componente Vista de lista de Oracle JET se enlaza al proveedor de datos a través de un observable Knockout. El observable Knockout también se declara en el código fuente viewModel de la aplicación. Este código rellena el valor observable como una instancia del proveedor de datos de la lista de detalles.

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 web de Oracle JET. Aprenderá a enlazar datos de elementos de los objetos de datos secundarios para rellenar un componente de vista de lista de Oracle JET, varios componentes de texto de entrada de Oracle JET y un componente de gráfico de Oracle JET.

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

Tarea 1: Enlace de datos a la lista de detalles de ítems de actividad en la vista

Sustituya la lista Ítems de actividad enlazada a datos estáticos por un componente Vista de lista de Oracle JET enlazado a varios elementos de datos de objetos secundarios Ítems de actividad.

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

Busque el elemento div donde id="container" y, a continuación, suprímalo y el elemento personalizado oj-module que contiene.

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
    <div id="container">
      <oj-module config="[[moduleConfig]]"></oj-module>
    </div>
  </div>

<!-- Delete the div element with id="container" so that your code is similar to the following: -->

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">

  </div>
  . . . 

En el elemento div donde id="activityItemsContainer", agregue un elemento de cabecera h3 para la lista de detalles Ítems de actividad.

<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <h3 id="itemsListHeader">Activity Items</h3>
</div>

Después de la etiqueta de cierre del elemento h3 que ha creado, agregue un elemento HTML personalizado oj-list-view para mostrar la lista de detalles de elementos de actividad y un elemento template con un atributo slot para aplicarlo al contenido de la lista de detalles.
```
 <h3 id="itemsListHeader">Activity Items</h3>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
     <template slot="itemTemplate">

     </template>
   </oj-list-view>
```
El componente de vista de lista de Oracle JET utilizado en un elemento HTML en línea template con un atributo slot como marcador de posición instancia el contenido de la lista de detalles de elementos de actividad en tiempo de ejecución.
En el elemento template que ha creado, agregue tres elementos div con código para enlazar la imagen y los elementos de datos de nombre para cada objeto secundario Ítems de actividad.
```
<template slot="itemTemplate">
  <div class="oj-flex no-wrap">
    <span class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
    <div class="demo-content oj-flex-item">
      <div>
        <strong>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
        </strong>
      </div>
    </div>
  </div>
</template>
```
El código $current.data.image y $current.data.name enlaza los datos, y un elemento HTML template expone un nombre de elemento de imagen y actividad para la lista de detalles de elementos de actividad. El prefijo $current representa el objeto secundario actual que el proveedor de datos del componente Vista de Lista de Oracle JET transfiere a la plantilla.
Guarde el archivo dashboard.html y déjelo abierto en el editor.

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

Tarea 2: Creación de objetos secundarios de elementos de actividad en ViewModel

Reemplace la plantilla en línea oj-module que creó en la ruta de aprendizaje anterior para mostrar la lista Ítems de actividad con una llamada de documento JSON para leer los objetos secundarios Ítems de actividad de un documento JSON local. En itemsDataProvider, cree una instancia de una clase MutableArrayDataProvider de Oracle JET que represente una matriz de objetos secundarios definidos por el documento JSON. A continuación, enlace la instancia itemsArray a un observable itemsDataProvider. El componente Vista de lista de Oracle JET de la vista hace referencia a este observable en su atributo data para mostrar la lista de detalles de elementos de actividad.

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, después de la declaración de tipo Activity, declare el siguiente tipo Item.

type Activity = {
   id: number;
};

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

Suprima el código de la declaración de const lg_xl_view hasta la declaración de this.chartTypes, pero sin incluirlo. El bloque de código termina con una línea de comentario que indica End of oj-module code. Una llamada de documento JSON sustituirá los datos estáticos y el código de plantilla en línea.

El archivo debe ser similar a detail-list-task2a-dashboard-ts.txt.
Desde las importaciones del módulo en la parte superior de dashboard.ts, suprima las sentencias de importación HtmlUtils, ResponsiveUtils, ResponsiveKnockoutUtils y ojmodule-element no utilizadas.

Agregue una sentencia de importación para el módulo ojs/ojavatar a la lista de importación. El módulo ojavatar soporta la vista en la siguiente sección de este tutorial.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import "ojs/ojavatar";

Después de la definición this.activityDataProvider, en la función constructor, agregue definiciones para activitiesArray y itemsArray. A continuación, declare this.itemsDataProvider como una instancia de MutableArrayDataProvider. Analiza los datos del almacén y hace que los objetos secundarios del primer objeto principal Actividad estén disponibles en el componente Vista de lista de Oracle JET. En el siguiente tutorial, puede definir el objeto Activity de forma dinámica mediante manejadores de eventos.

. . . 
let activitiesArray = JSON.parse(storeData);
let itemsArray = activitiesArray[0].items;

this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
  itemsArray,
  { keyAttributes: "id" }
  );

} // closing bracket of constructor function
. . . 

A continuación, elimine las anotaciones de tipo no utilizadas para large y moduleConfig, y agregue anotaciones de tipo para itemsArray y itemsDataProvider.

class DashboardViewModel {
    chartTypes: Array<Object>;
    chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
    chartData: Array<Object>;
    chartDataProvider: MutableArrayDataProvider<string, {}>;
    activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
    val: ko.Observable<string>;
    itemsArray: Array<Object>;
    itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

El archivo debe ser similar a detail-list-task2b-dashboard-ts.txt.

Tarea 3: Ejecución de la aplicación web

El comando ojet serve permite realizar cambios en el código de la aplicación que se reflejan inmediatamente en el explorador web.

En la ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación.
```
$ ojet serve
```
En el separador Panel de control, el explorador web muestra la lista de detalles de los datos con la cabecera Elementos de actividad.

Descripción de la ilustración formatted_master_detail_list.png
Deje abierta la ventana de terminal y el explorador que muestra la aplicación web.

Tarea 4: Detalles de ítems de enlace de datos y gráfico circular en la vista

Sustituya los gráficos circulares y de barras de Detalles de artículo por los siguientes elementos:

Un componente Avatar de Oracle JET enlazado a la imagen de artículo de un objeto secundario Ítems de actividad
Varios componentes de campo de texto de Oracle JET enlazados a los elementos de datos de ese objeto secundario Ítems de actividad
Componente de gráfico circular enlazado a elementos de datos de gráfico del mismo objeto secundario Ítems de actividad

En el archivo dashboard.html, en el elemento div donde id="itemDetailsContainer", busque la cabecera Detalles del elemento. Debajo de la cabecera, agregue una regla horizontal seguida de un elemento HTML personalizado oj-avatar enlazado al elemento de datos de imagen para un objeto secundario Ítems de actividad.
```
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
  <h3>Item Details</h3>
  <hr class="hr-margin" />
  <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
    :src="[[itemData().image]]" class="float-right">
  </oj-avatar>
```
El observable itemData rellena el componente Avatar de Oracle JET mediante una instancia de proveedor de datos creada en la aplicación viewModel. La función itemData().image es la notación observable Knockout para leer el valor actual de un elemento de datos. El elemento de datos se identifica mediante la propiedad image del objeto secundario Ítems de actividad.
En dashboard.html, debajo de la etiqueta de cierre del elemento oj-avatar que ha creado, suprima el elemento HTML personalizado oj-label for="basicSelect" y el elemento oj-select-single.
Debajo de la etiqueta de cierre del elemento oj-avatar que ha creado, agregue cuatro elementos div con elementos HTML personalizados oj-bind-text enlazados a los elementos de datos de nombre, descripción corta, precio e ID de un objeto secundario Ítems de actividad.
```
. . . 
</oj-avatar>
  <div id="itemName" class="data-name">
    <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
  </div>
  <div id="itemDesc" class="data-desc">
    <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
  </div>
  <div id="itemPrice">
    <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
  </div>
  <div id="itemId">
    <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
  </div>
. . . 
```
Los observables itemData rellenan el componente de enlace de texto de Oracle JET mediante un proveedor de datos creado en la aplicación viewModel. La función itemData().<prop_name> lee el valor actual del elemento de datos con nombre. Los elementos de datos se identifican mediante las propiedades name, short_desc, price y id del objeto secundario Ítems de actividad.

Navegue al directorio JET_Web_Application/src/css y abra el archivo app.css para agregar las siguientes definiciones de estilo.

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

El archivo debe ser similar a app-css-final.txt.

Debajo de los elementos div que ha creado, suprima el elemento HTML personalizado oj-chart id="barChart".
Después de la etiqueta de cierre </div> del elemento div id="itemId", agregue un nuevo elemento div y un elemento HTML personalizado oj-chart enlazado a una serie de gráficos circulares para un objeto secundario Ítems de actividad.
```
. . . 
<div id="itemId">
  <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
</div>
<div>
  <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
    animation-on-data-change="auto"
    hover-behavior="dim" legend.position="bottom" class="chartStyle">
  </oj-chart>
</div>
. . . 
```
El observable pieSeriesValue rellena el componente de gráfico circular de Oracle JET mediante una matriz de datos creada en la aplicación viewModel.
Guarde el archivo dashboard.html.

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

Tarea 5: Definición de observables para detalles de artículo y componentes de gráfico circular en ViewModel

Obtenga un elemento de datos del objeto secundario Ítems de actividad y rellene los observables en los componentes de vista de enlace de datos. En la vista, el atributo value de los distintos componentes de Detalles de elemento hace referencia al observable itemData. Y el atributo series del componente de gráfico circular hace referencia al límite observable pieSeriesValue enlazado a datos de gráfico del mismo elemento de datos.

En el archivo dashboard.ts, suprima el bloque de código que comienza con this.val y termina con this.chartTypesDP. Suprima también las anotaciones de tipo no utilizadas para las variables eliminadas. La lista de anotaciones de tipo y el inicio de la función constructor() deben tener un aspecto similar al siguiente ejemplo.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

  constructor() {
    this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
    >(JSON.parse(storeData), {
      keyAttributes: "id",
    });
. . . 

Agregue las anotaciones de tipo itemData y pieSeriesValue a la clase DashboardViewModel.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
  itemData: ko.Observable<any>;
  pieSeriesValue: ko.ObservableArray;

  constructor() {
. . . 

Después de la sentencia this.itemsDataProvider, defina el observable itemData con una referencia al primer objeto principal Actividad y al primer objeto secundario Ítem de actividad asociado a esa actividad en el documento JSON.

  this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
    itemsArray,
    { keyAttributes: "id" }
  );

  this.itemData = ko.observable(''); 
  this.itemData(activitiesArray[0].items[0]);

}   // End of constructor function

Por último, debajo de la declaración observable itemData, defina el observable this.pieSeriesValue.

this.itemData = ko.observable(''); 
this.itemData(activitiesArray[0].items[0]);

this.pieSeriesValue = ko.observableArray([]);

let pieSeries = [
  { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
  { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
];
this.pieSeriesValue(pieSeries);

Tarea 6: Ver las listas maestra y detallada

Vuelva al explorador para ver los cambios en la aplicación web.

En el separador Panel de control de la aplicación web, los campos de texto, el avatar y el gráfico circular de Oracle JET relacionados se muestran en el contenedor de detalles de elementos, pero las listas no responden a las selecciones. En el siguiente tutorial, los manejadores de eventos que cree agregarán la funcionalidad de selección.

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

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 the detail view in an Oracle JET web app

F53162-01

February 2022