Crear componentes de contenedor principal 2 y contenedor de artículos de actividad

Introducción

En este tutorial, completará la composición de la aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET) creando y conectando los componentes ParentContainer2 y ActivityItemContainer.

En la versión final de la aplicación DOM virtual, el componente ActivityContainer permite seleccionar una actividad de la lista Actividades, que luego muestra una lista Elementos de actividad en el componente ActivityItemContainer. A continuación, la selección de un elemento de actividad de la última lista muestra la información de precio y nivel de stock en el componente ItemDetailContainer. ItemDetailContainer se ha creado en la primera ruta de aprendizaje de esta serie y ahora la representará dentro del componente ParentContainer2.

Objetivos

En este tutorial, completará la composición de los componentes en la aplicación DOM virtual y, para ayudar a visualizar el diseño de la aplicación, también aplicará las clases de estilo oj-panel y oj-bg de Oracle JET para agregar bordes y color a los componentes.

Requisitos

Tarea 1: Creación del componente de contenedor 2 principal

Cree el componente ParentContainer2, que se representa en el componente ParentContainer1 y contiene los componentes ItemDetailContainer y ActivityItemContainer.

  1. En el directorio JET-Virtual-DOM-app/src/components, cree un archivo ParentContainer2.tsx.

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

    import { h } from "preact";
import ItemDetailContainer from "./ItemDetail/ItemDetailContainer";

  3. Cree la definición de función del componente ParentContainer2, que devuelve un elemento div que contiene el elemento ItemDetailContainer. El elemento div incluye una clase de estilo oj-panel de Oracle JET para crear un borde y una clase de estilo oj-bg para agregar un color de fondo rojo claro al contenedor.

    const ParentContainer2 = () => {
  return (
    <div id="parentContainer2" class="oj-panel oj-bg-danger-30">
      <ItemDetailContainer />
    </div>
  );
};

  4. Agregue una sentencia export para el componente ParentContainer2 al final del archivo.

    export default ParentContainer2;

  5. Guarde y cierre el archivo.

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

  6. En el directorio JET-Virtual-DOM-app/src/components, abra el archivo ParentContainer1.tsx en el editor. Agregue una sentencia import para el componente ParentContainer2 en la parte superior del archivo.

    import ParentContainer2 from "./ParentContainer2";

  7. Dentro de la sentencia return de la función ParentContainer1, agregue el componente ParentContainer2.

    const ParentContainer1 = () => {
  return (
    <div id="parentContainer1" class="oj-panel oj-bg-warning-20">
      <ActivityContainer />
      <ParentContainer2 />
    </div>
  );
};

  8. Guarde y cierre el archivo.

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

Tarea 2: Creación del componente Contenedor del elemento de actividad

Cree el componente ActivityItemContainer, un componente secundario representado por el componente ParentContainer2. El componente ActivityItemContainer representa una cabecera y una lista de elementos de actividad.

  1. En el directorio JET-Virtual-DOM-app/src/components, cree un directorio ActivityItem con un ActivityItemContainer.tsx en él.

  2. Agregue la siguiente sentencia import a la parte superior del archivo.

    import { h, ComponentProps } from "preact";

  3. Cree el componente ActivityItemContainer, que devuelve una cabecera h3, elementos de actividad y una lista de elementos de actividad. El elemento principal div incluye una clase de estilo oj-bg de Oracle JET para agregar un color de fondo verde al contenedor.

    const ActivityItemContainer = () => {
  return (
    <div id="activityItemsContainer" class="oj-bg-success-20">
      <div id="container" class="item-display no-wrap">
        <h3>Activity Items</h3>
        <ul>
          <li class="li-item">Louisville Slugger Bat</li>
          <li class="li-item">SureCatch Baseball Glove</li>
          <li class="li-item">Baseball</li>
          <li class="li-item">Western R16 Helmet</li>
          <li class="li-item">Western C1 Helmet</li>
          <li class="li-item">Sure Fire Ball (Set of 4)</li>
        </ul>
      </div>
    </div>
  );
};

  4. Agregue una sentencia export para el componente al final del archivo.

    export default ActivityItemContainer;

  5. Guarde y cierre el archivo.

    Su código debe tener un aspecto similar a activity-item-container-tsx.txt.

  6. En el directorio JET-Virtual-DOM-app/src/components, abra el archivo ParentContainer2.tsx en el editor. En la parte superior del archivo, importe el componente ActivityItemContainer.

    import ActivityItemContainer from "./ActivityItem/ActivityItemContainer";

  7. Dentro de la sentencia return de la función ParentContainer2, agregue el componente ActivityItemContainer.

    const ParentContainer2 = () => {
  return (
    <div id="parentContainer2" class="oj-panel oj-bg-danger-30">
      <ActivityItemContainer />
      <ItemDetailContainer />
    </div>
  );
};

  8. Guarde y cierre el archivo.

    Su código debe tener un aspecto similar a parent-container2-2-tsx.txt.

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

  1. En la ventana de terminal, ejecute la aplicación DOM virtual desde el directorio JET-Virtual-DOM-app.

    npx ojet serve

    El Contenedor Ítem Actividad se presenta con un fondo verde, en el componente Contenedor Principal 2 y junto al componente Contenedor Detalle Artículo. Se muestra la lista de elementos de actividad para la actividad de béisbol.

    Componente Contenedor de ítem de actividad presentado

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

  3. 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 Compose Components 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, Adición de contenedores a la aplicación Oracle JET Virtual DOM, en el módulo Diseño ajustable.

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.