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

Introducción

En este tutorial se describe cómo leer los datos jerárquicos maestro-detalle de un documento local de notación de objetos (JSON) JavaScript y mostrar los datos en un componente de vista de lista de una aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET).

En 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 rellena a partir de los objetos principales de un almacén de datos de documentos JSON. 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 de proveedor de datos MutableArrayDataProvider que cree.

Objetivos

En este tutorial, enlazará 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 en el componente de contenedor de actividad con esos datos.

Requisitos

Tarea 1: Descarga la aplicación Starter Virtual DOM

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

  1. Cambie el nombre de jet-virtual-dom-app-temp.zip a JET-Virtual-DOM-app.zip. Extraiga el contenido al directorio JET-Virtual-DOM-app.

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

    npm install

    La aplicación está lista para usarse.

Tarea 2: Descargar las imágenes del producto

Omita esta tarea si ha descargado la aplicación de inicio en jet-virtual-dom-app-temp.zip.

  1. 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 realiza en los archivos de aplicación existentes. Después de crear nuevos archivos, debe volver a ejecutar la aplicación DOM virtual.

  2. Descargue el archivo product_images.zip en el directorio JET-Virtual-DOM-app/src/styles/images.

  3. Extraiga el contenido del archivo zip en un nuevo directorio product_images en el directorio images.

    La ruta al nuevo directorio es JET-Virtual-DOM-app/src/styles/images/product_images y el directorio contiene las imágenes que utiliza la aplicación.

Tarea 3: Creación de un proveedor de datos de matriz modificable en el contenedor principal 1

  1. Abra el libro de cocina de Oracle JET y vaya a la página inicial del libro de cocina. Haga clic en Marco, Proveedor de datos y, a continuación, en Proveedor de datos de matriz móvil. En la barra de herramientas del libro de cocina, haga clic en Documento de API.

  2. En la documentación de la API, lea sobre la clase MutableArrayDataProvider. Tenga en cuenta cómo puede utilizar el argumento opcional keyAttributes para crear una instancia de MutableArrayDataProvider basada en el atributo de clave del objeto de datos transferido.

  3. Si aún no lo ha hecho en una ruta de aprendizaje anterior, descargue el archivo store_data.json en el directorio JET-Virtual-DOM-app/src/components.

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

  5. 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';

  6. Cree un alias de tipo Activity.

    type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

  7. Cree una instancia activityDataProvider de MutableArrayDataProvider.

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

    La propiedad keyAttributes de la clase MutableArrayDataProvider rellena una matriz basada en 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.

  8. En la función ParentContainer1, agregue un atributo data al elemento ActivityContainer que transfiera el objeto de proveedor de datos al componente de contenedor de actividad mediante props.

    return (
    <div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
        <ActivityContainer data={activityDataProvider} />
        <ParentContainer2 />
    </div>
    );
};

    Su código debe tener un aspecto similar a parent-container1-1-tsx.txt.

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

Cree un componente de vista de lista de Oracle JET en el componente Contenedor de actividad para mostrar varios elementos de datos para cada fila de lista del objeto de proveedor de datos transferido a través de props desde el componente ParentContainer1. Para instanciar el contenido de los elementos de datos de fila de lista en tiempo de ejecución, el componente de vista de lista utiliza un elemento template HTML con un atributo slot como marcador de posició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 de importación 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');

  3. Cree alias de tipo Props y Activity.

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

type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

  4. Busque el elemento div con id="activitiesContainer" y suprima la clase de ayuda oj-sm-only-text-align-end para evitar la realineación del contenido del contenedor de actividad.

  5. 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.

    Defina también una variable image para asegurarse de que la aplicación DOM virtual puede localizar las imágenes del producto en el directorio styles de la aplicación.

    const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
  let 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>
  );
};

  6. Bajo la función listItemRenderer, agregue el siguiente 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 };

  7. Agregue props a la definición de función ActivityContainer.

    const ActivityContainer = (props: Props) => {

  8. Dentro de la sentencia return de la función ActivityContainer, suprima el elemento div donde id="activitiesItems y la lista dentro de él. Reemplácelos por el siguiente componente de vista de lista, donde se accede al objeto del proveedor de datos a través de props en el atributo data de la vista de lista.

    <h3 id="activitiesHeader">Activities</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>

  9. 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-container-tsx-1.txt.

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

  1. En la ventana de terminal, navegue hasta el directorio JET_Virtual_DOM_app y ejecute la aplicación.

    npx ojet serve

    Las herramientas de Oracle JET ejecutan la aplicación DOM virtual en el explorador web local, donde puede ver los cambios en el componente Contenedor de actividad. Las imágenes que se muestran a la izquierda de los nombres de actividad y las descripciones cortas solo 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 el directorio images/product_images.

    Las imágenes en miniatura solo se muestran parcialmente

  2. En el explorador de Google Chrome, haga clic con el botón derecho en la imagen parcial de la actividad Soccer y seleccione Inspeccionar. El explorador muestra las herramientas de desarrollador de Chrome (DevTools), donde puede inspeccionar el origen de página HTML.

  3. En el panel Elementos, el elemento span donde se debe seleccionar class="demo-thumbnail oj-flex-item". En el panel Estilos, localice 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.

    Inspeccionar el origen de la imagen en el panel Orígenes

  4. El panel Orígenes DevTools de Chrome muestra que la imagen es de 300 x 300 píxeles y, por lo tanto, el tamaño es demasiado grande para que se muestre en la vista de lista. Para representar una imagen en miniatura a partir de una imagen de tamaño completo, puede definir una clase de estilo de hojas de estilo en cascada (CSS).

    Ver las propiedades de la imagen en el panel Orígenes

  5. Cierre la ventana de Chrome DevTools y vuelva a la aplicación en el explorador.

Tarea 6: Corrija el CSS y vea los cambios en la lista de actividades

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

  2. Defina las propiedades para el selector de clase .demo-thumbnail. En la lista de propiedades, defina una propiedad background-repeat en no-repeat para mostrar la imagen solo una vez.

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

    En la función listItemRenderer del archivo ActivityContainer.tsx, el elemento span hace referencia al selector de clases para dar formato a las imágenes de la lista Actividades como miniaturas definiendo el estilo CSS demo-thumbnail en el atributo class.

  3. Guarde y cierre el archivo app.css. El archivo debe tener un aspecto similar a app-css.txt.

  4. Vuelva al explorador y consulte las actualizaciones.

    La aplicación muestra la lista Actividades con imágenes en miniatura.

    Las imágenes del contenedor de actividades se muestran correctamente

  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

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

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

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.