Agregar contenedores a la aplicación web Oracle JET

Introducción

Un diseño de página ajustable se puede ampliar de forma flexible para adaptarse a una amplia gama de tamaños de pantalla, desde teléfonos pequeños hasta monitores de escritorio. Un diseño flexible de Oracle JavaScript Extension Toolkit (JET) tiene elementos secundarios que puede organizar en cualquier dirección. Cuando cambia el tamaño de la pantalla, estos elementos se ajustan a sí mismos y crecen para llenar el espacio no utilizado o la reducción para evitar el desbordamiento de elementos principales o secundarios en el diseño. Puede utilizar las clases de diseño de Oracle JET oj-flex y oj-flex-item para crear contenedores ajustables para diseñar un diseño de página ajustable. Las clases de estilo Oracle JET oj-panel y oj-panel-bg agregan bordes y color a los contenedores. Puede utilizar estas clases de estilo para ayudar en la visualización del diseño y puede eliminarlas en la aplicación final.

La aplicación web que creará en este tutorial tiene una estructura de diseño de página con un contenedor principal que rodea a un segundo contenedor principal y un contenedor secundario, el contenedor Actividades. El segundo contenedor principal contiene dos contenedores secundarios: los contenedores Ítems de actividad y Detalles de artículo.

Plan de diseño para la página de diseño ajustable

Descripción de la ilustración layout-plan.png

Un contenedor principal es aquel que contiene contenedores secundarios. Sin embargo, un contenedor secundario también puede ser un contenedor principal si contiene un contenedor secundario, por ejemplo, el contenedor principal 2 anterior.

En la siguiente ilustración del diseño de página que creará, un elemento principal div contiene el contenedor principal 1. El contenedor principal 1 abarca el contenedor secundario 1 y el contenedor principal 2. El contenedor principal 2 contiene dos contenedores secundarios: el contenedor secundario 2 y el contenedor secundario 3.

Diseño ajustable con contenedores principales y secundarios

Descripción de la ilustración ajustable-layout-containers.png

Objetivos

En este tutorial, agregará contenedores y paneles para convertir un diseño de página en un diseño de página ajustable en una aplicación web de Oracle JET mediante el diseño y las clases de estilo 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
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 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

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 ha instalado la última versión de Oracle JET. Si no lo ha hecho, actualice su versión de Oracle JET.
```
$ 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: Agregar contenedores de actividades

Modifique el diseño de la aplicación web Oracle JET para agregar un diseño de caja flexible. Para crear el diseño flexible, agregue una clase oj-flex de Oracle JET al elemento div principal y una clase oj-flex-item al elemento div secundario. El contenedor principal 1 es el contenedor principal que contiene todos los demás contenedores. El contenedor secundario 1 es el primer contenedor secundario y contiene la lista Actividades.

El contenedor principal 1 y el contenedor secundario 1 forman los contenedores de actividades

Descripción de la ilustración activity-containers.png

Abra Oracle JET Cookbook, haga clic en Diseño y navegación en la barra de menús y seleccione el componente Diseño flexible. En la barra de herramientas, haga clic en Documento de API y, a continuación, seleccione flex.
En la documentación de la API de diseño flexible, desplácese a la tabla que describe las clases de diseño de Oracle JET y lea sobre la clase oj-flex.
Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.

Busque el elemento de cabecera de información de producto h1 y, debajo, agregue un elemento div externo con el valor de atributo id parentContainer1 junto con la clase de contenedor Oracle JET. Este elemento div incluye todos los demás contenedores que contiene. Agregue una etiqueta de cierre </div> sobre el último cierre </div> al final del archivo.

<div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <!-- Parent Container 1 contains all the panels in the app -->
  <div id="parentContainer1" class="oj-flex oj-flex-init">
    <div id="activitiesContainer">
      <h3 id="activitiesHeader">Activities</h3>
      . . .
      </oj-chart>
    </div>
  </div>
</div>

Busque el elemento div donde id="activitiesContainer", antes de la cabecera Actividades, y agregue una clase de elemento de contenedor de Oracle JET.

<!-- The Activities container displays the Activities list -->
<div id="activitiesContainer" class="oj-flex-item">
  <h3 id="activitiesHeader">Activities</h3>

Guarde el archivo dashboard.html.

El código debe ser similar a parent-containers-dashboard-html.txt.

Tarea 3: Agregar contenedores de detalles de artículo

Modifique el diseño ajustable de la aplicación web Oracle JET para agregar los contenedores Item Details. El contenedor principal 2 contiene los dos contenedores secundarios. El contenedor secundario 2 se deja vacío, pero en los tutoriales posteriores contendrá la lista Ítems de actividad. El contenedor secundario 3 contiene el gráfico Detalles de artículo.

El contenedor principal 2, el contenedor secundario 2 y el contenedor secundario 3 forman juntos los contenedores de detalles de artículo.

Descripción de la ilustración item-details-containers.png

Busque el elemento div donde id="itemDetailsContainer". Por encima, agregue un elemento div externo con un atributo id con el valor parentContainer2, así como una clase de contenedor Oracle JET y una clase de elemento de contenedor. Agregue una etiqueta de cierre </div> sobre el cierre segundo a último </div> en el archivo.

<!-- Parent Container 2 surrounds the Item Details container -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .
        </oj-chart>
      </div>
    </div>
  </div>
</div>

Debajo del elemento div donde id="parentContainer2", agregue un elemento div vacío con un atributo id con el valor activityItemsContainer, así como una clase de elemento de contenedor Oracle JET.

<!-- Parent Container 2 surrounds the Activity Items and Item Details child containers -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="activityItemsContainer" class="oj-flex-item">
      </div>
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .

Por último, agregue una clase de elemento de contenedor Oracle JET al elemento div donde id="itemDetailsContainer".

<!-- Item Details container displays a chart upon selection -->
<div id="itemDetailsContainer" class="oj-flex-item">
  <h3>Item Details</h3>

Guarde el archivo dashboard.html.

El código debe ser similar a containers-dashboard-html.txt.

Tarea 4: Agregar paneles y color de panel

Aplique las clases de estilo Oracle JET para agregar paneles y colores de panel a los contenedores y elementos de contenedor de la aplicación web para ayudar a visualizar el diseño.

Busque el elemento div donde id="parentContainer1" y, a continuación, agregue dos clases de estilo para especificar un panel con un borde y un color de fondo.
```

<div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
```

Busque el elemento div donde id="activitiesContainer" y, a continuación, agregue dos clases de estilo para especificar un panel con un borde y un color de fondo.

<!-- The border and color for the Activities container -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
  <h3 id="activitiesHeader">Activities</h3>

Busque el elemento div donde id="parentContainer2" y, a continuación, agregue dos clases de estilo para especificar un panel con un borde y un color de fondo.
```

<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">
```
Busque el elemento div donde id="itemDetailsContainer" y, a continuación, agregue dos clases de estilo para especificar el color del panel y del panel.
```

<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30">
```
Guarde el archivo dashboard.html.

El código debe ser similar al final-containers-dashboard-html.txt.

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

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 el contenido del panel de control.

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

Add containers to the Oracle JET web app

F53132-01

February 2022