Crear la vista maestra en una aplicación web de Oracle JET

Introducción

En este tutorial se describe cómo leer datos jerárquicos maestro-detalle de un documento local de JavaScript Object Notation (JSON) y mostrar los datos en una vista maestra en una aplicación web de Oracle JavaScript Extension Toolkit (Oracle JET).

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 principales de un almacén de datos de documentos JSON. En la vista de la aplicación web Oracle JET, el atributo data de los elementos HTML personalizados de Oracle JET se enlaza a los datos a través de una instancia de un objeto MutableArrayDataProvider que se declara y rellena en el código fuente viewModel de la aplicación.

Objetivos

En este tutorial, enlazará datos de varios elementos de los objetos de datos principales en un documento JSON local y rellenará las filas de un componente de vista de lista de Oracle JET con esos datos.

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
Explorador web de Google Chrome instalado y definido como explorador web por defecto
Acceso a Oracle JET Developer Cookbook
(Opción 1) Finalización de la ruta de aprendizaje anterior en esta serie: Desarrollo de una aplicación web con diseño ajustable en Oracle JavaScript Extension Toolkit
(Opción 2) Si no completó la ruta de aprendizaje anterior en esta serie: jet_web_application_temp.zip descargado
product_images.zip descargado en el directorio JET_Web_Application/src/css/images/

Tarea 1: Descarga de la aplicación de inicio

Omita esta tarea si continúa trabajando en una aplicación creada en la ruta de aprendizaje anterior.

Cambie el nombre de jet_web_application_temp.zip por JET_Web_Application.zip. Extraiga el contenido de la carpeta JET_Web_Application.
En la ventana de terminal, verifique que Oracle JET esté instalado y actualizado a la última versión.
```
$ npm list -g @oracle/ojet-cli
```
```
$ npm install -g @oracle/ojet-cli
```
Navegue a la carpeta JET_Web_Application y restaure la aplicación Oracle JET.
```
$ ojet restore
```
La aplicación está lista para su uso.

Tarea 2: Descarga de imágenes de producto

Omita esta tarea si ha descargado la aplicación de inicio en jet_web_application_temp.zip.

Si el trabajo por lotes del servidor de herramientas de Oracle JET se está ejecutando en la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes del servidor.

El trabajo por lotes del servidor solo reconoce las revisiones que realice en los archivos de aplicación existentes. Después de crear nuevos archivos, debe volver a ejecutar la aplicación web.
Descargue el archivo product_images.zip en el directorio JET_Web_Application/src/css/images/.
Extraiga el contenido del archivo zip en una nueva carpeta product_images de la carpeta images.

La ruta de acceso a la nueva carpeta es JET_Web_Application/src/css/images/product_images y la carpeta contiene las imágenes que utiliza la aplicación.

Tarea 3: Mejora de la lista de actividades en la vista

Modifique el componente Vista de Lista de Oracle JET para mostrar varios elementos de datos del origen de datos de matriz Actividades para cada fila de lista. Para instanciar el contenido de los elementos de datos de fila de lista en tiempo de ejecución, el componente Vista de lista de actividades utiliza un elemento HTML template con un atributo slot como marcador de posición.

Busque el elemento div con id="activityItemsContainer" y suprima la clase auxiliar oj-sm-only-text-align-end para evitar la reordenación del contenido de la lista de actividades.
```
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-md-4 oj-sm-12">
```
Busque el elemento HTML personalizado oj-list-view donde id="activitiesList" y agregue un atributo class con el valor item-display.
```
<oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
  data="[[activityDataProvider]]" gridlines.item="visible">
```
Para proporcionar el origen de datos de vista de lista, el atributo data enlaza el observable activityDataProvider como un enlace de datos unidireccional.
Navegue al directorio JET_Web_Application/src/css y abra el archivo app.css. Aquí puede agregar estilos CSS específicos de la aplicación. Cree una definición de estilo .item-display con las propiedades width, height y overflow-x para soportar la visualización de varios elementos de datos en las filas de la lista.
```
.item-display {
      width: 100%;
      height: 500px;
      overflow-x: hidden;
      }
```
En el elemento oj-list-view donde id="activitiesList", busque el elemento de plantilla donde slot="itemTemplate" y suprima el elemento div y el elemento oj-bind-text contenido.
```
<template slot="itemTemplate">

</template>
```

En el elemento template vacío, agregue tres elementos div con código para rellenar las filas del componente de vista de lista con una imagen de fondo, un nombre y una descripción corta.

<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>
  <span class="demo-metadata">
   <oj-bind-text value="[[$current.data.short_desc]]"></oj-bind-text>
  </span>
  </div>
 </div>
</template>

Guarde el archivo dashboard.html.

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

Tarea 4: revisión del proveedor de datos de actividades en ViewModel

Para rellenar el componente Vista de lista de actividades, viewModel crea una instancia de la matriz de datos Actividades mediante una clase MutableArrayDataProvider de Oracle JET. El método JSON.parse analiza el almacén de datos JSON local como un argumento que devuelve los datos.

Abra Oracle JET Cookbook y vaya a la página inicial de Cookbook. Haga clic en Marco, Proveedor de datos y, a continuación, en Proveedor de datos de matriz que se puede mover. En la barra de herramientas de Cookbook, haga clic en Documento de API.
En la documentación de la API, lea sobre la clase MutableArrayDataProvider. Observe cómo puede utilizar el argumento opcional keyAttributes para crear una instancia de una clase MutableArrayDataProvider basada en el atributo clave del objeto de datos transferido.
Navegue al directorio JET_Web_Application/src/ts/viewModels y abra el archivo dashboard.ts en un editor. Busque la declaración de this.activityDataProvider en el método constructor.
```
   this.activityDataProvider = new MutableArrayDataProvider<
   Activity["id"],
   Activity
      >(JSON.parse(storeData), {
         keyAttributes: "id",
   });
}
```
De esta forma se crea el objeto activityDataProvider, una instancia de la clase MutableArrayDataProvider. La propiedad keyAttributes de MutableArrayDataProvider rellena la matriz Actividades según el atributo id del objeto principal. El atributo id es el atributo clave para los objetos de datos principales y secundarios en el documento JSON.
Cierre el archivo dashboard.ts sin realizar ningún cambio.

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

Tarea 5: Ejecución de la aplicación web y depuración de la hoja de estilo en cascada de la aplicación

En la ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación.
```
$ ojet serve
```
Las herramientas de Oracle JET ejecutan la aplicación web en un explorador web local, donde puede ver la lista maestra de datos. Las imágenes que se muestran a la izquierda de los nombres de actividad de la lista Actividades sólo se muestran parcialmente porque son demasiado grandes.

Si cambia el tamaño del explorador y aún no ve una página similar a esta captura de pantalla de ejemplo, confirme que ha extraído las imágenes de la aplicación en la carpeta product_images.

Descripción de la ilustración master_list_with_error.png
En el explorador de Google Chrome, haga clic con el botón derecho en la imagen parcial de la actividad de Soccer y seleccione Inspeccionar. El explorador muestra herramientas de desarrollador para inspeccionar el origen de página HTML.
En el panel Elementos, seleccione el elemento span class="demo-thumbnail". En el panel Estilos, busque el estilo element.style background-image resaltado. Haga clic con el botón derecho en la URL de la imagen jrsoccerball.jpg y seleccione Revelar en el panel Orígenes.

Descripción de la ilustración inspec_image_url.png
El panel Orígenes de Chrome DevTools muestra que la imagen es de 300 x 300 píxeles y el tamaño es demasiado grande para que se muestre en el componente Vista de lista de Oracle JET. Para presentar una imagen en miniatura a partir de una imagen de tamaño completo, puede definir una clase de estilo Cascading Style Sheets (CSS).

Descripción de la ilustración inspec_image_url_contents.png
Cierre la ventana de herramientas del desarrollador y vuelva a la aplicación en el explorador.

Tarea 6: Corrección de CSS y visualización de la lista maestra

Navegue al directorio JET_Web_Application/src/css y abra el archivo app.css en un editor.
Defina las propiedades del selector de clases .demo-thumbnail. En la lista de propiedades, defina una propiedad background-repeat en no-repeat para mostrar la imagen solo una vez. También defina un selector de clases no-wrap con la propiedad flex-wrap definida en nowrap.
```
.demo-thumbnail {
      border-radius: 5px;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      margin-right: 10px;
      }

.no-wrap {
      flex-wrap: nowrap;
      }  
```
En el archivo dashboard.html, el elemento span hace referencia al selector de clases para dar formato a la imagen de lista Actividades como una vista en miniatura definiendo el estilo CSS demo-thumbnail en el atributo class. En el elemento span, la propiedad CSS background-image define la imagen según la URL de la propiedad image del objeto principal Actividad actual.
```
<span class="demo-thumbnail oj-flex-item" 
   :style.background-image="[[' url('+$current.data.image+')']]"></span>
```
Guarde y cierre el archivo app.css.

El archivo debe ser similar a app-css-final.txt.
En el explorador web, vuelva a cargar la página.

El explorador muestra la lista maestra de datos con imágenes en miniatura.

Descripción de la ilustración formatted_master_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 master view in an Oracle JET web app

F53168-01

February 2022