Formatear los contenedores de componentes para diferentes tamaños de pantalla

Introducción

En este tutorial, aprenderá a personalizar una aplicación de DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET) para soportar diferentes tamaños de pantalla mediante clases auxiliares de Oracle JET.

Puede utilizar clases auxiliares de Oracle JET para definir condiciones para varios tamaños de pantalla. En un diseño flexible, un elemento de un contenedor crece o se reduce para llenar el espacio del contenedor. Oracle JET proporciona clases de estilo para tamaños de pantalla pequeños, medianos, grandes y extragrandes. Puede definir el ancho mínimo de pantalla asignado al contenido especificando el número de columnas lógicas de 1 a 12 que el contenido debe utilizar para el tamaño de pantalla seleccionado. Si selecciona un tamaño de pantalla pero omite una condición de tamaño de pantalla más grande, la condición se aplica al tamaño de pantalla seleccionado y a todos los tamaños de pantalla más grandes. Si selecciona un tamaño de pantalla al especificar la palabra clave only en la condición, la condición se aplica solo a ese tamaño de pantalla. Mediante el uso de clases auxiliares en la aplicación DOM virtual, puede controlar la visualización y la alineación del texto y los elementos, personalizar el relleno alrededor de los paneles y establecer columnas para diferentes tamaños de pantalla.

Los tamaños de pantalla se dividen lógicamente en 12 columnas

Descripción de la ilustración screen_sizes.png

Objetivos

En este tutorial, agregará clases auxiliares a la aplicación DOM virtual para especificar la alineación de texto, agregar relleno a paneles y definir columnas para diferentes tamaños de pantalla.

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones DOM virtuales de Oracle JET que incluya una instalación de Node.js
Navegador web de Google Chrome instalado y configurado como explorador web predeterminado
Acceso al Oracle JET Developer Cookbook
Finalización del tutorial anterior en esta ruta de aprendizaje, Agregar contenedores a la aplicación Oracle JET Virtual DOM

Tarea 1: Adición de una clase auxiliar para la alineación de contenido

Modifique el posicionamiento del contenido en el componente Contenedor de actividad especificando una clase auxiliar de Oracle JET en el elemento div para ajustar la alineación de contenido al utilizar un tamaño de pantalla pequeño.

Abra el libro de cocina de Oracle JET y haga clic en Marco en la barra de menús. A continuación, haga clic en Utilidades de CSS, haga clic en Diseño y seleccione la demostración Fin de texto en la barra lateral.
En la demostración de Oracle JET Cookbook para Text End, descubra cómo puede implantar la clase de estilo oj-sm-only-text-align-end para alinear el contenido de texto al final de una pantalla pequeña. Para hacer una demostración de una pantalla pequeña, haga clic en el icono de retrato de teléfono y vea el comportamiento ajustable para alinear fin.
Navegue al directorio JET-Virtual-DOM-app/src/components/Activity y abra el archivo ActivityContainer.tsx en un editor.
En la definición de función ActivityContainer, busque div donde id="activitiesContainer" y agregue la clase de estilo auxiliar ajustable oj-sm-only-text-align-end.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
```
Guarde y cierre el archivo.

Tarea 2: Adición de clases auxiliares para el relleno

Agregue relleno al componente Contenedor Principal 2 y sus componentes secundarios, Contenedor de Elemento de Actividad y Contenedor de Detalle de Elemento, utilizando clases de estilo de espaciado sensibles a Oracle JET. Al especificar la clase de espaciado ajustable en un elemento principal div, el estilo de relleno se aplica a todos los elementos secundarios div de ese elemento principal.

Abra el libro de cocina de Oracle JET y haga clic en Marco en la barra de menús. A continuación, haga clic en Utilidades de CSS, haga clic en Márgenes y relleno y seleccione la demostración Espacio de respuesta en la barra lateral.
En la demostración de Oracle JET Cookbook para Espacio de respuesta, descubra cómo puede implantar las clases de espaciado de respuesta para agregar relleno a los contenedores en varios tamaños de pantalla.
Navegue al directorio JET-Virtual-DOM-app/src/components y abra el archivo ParentContainer2.tsx en un editor.
En la definición de función ParentContainer2, busque div donde id="parentContainer2" y agregue la clase de espaciado ajustable oj-lg-padding-6x-horizontal.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal">
```
Navegue al directorio JET-Virtual-DOM-app/src/components/Activity y abra el archivo ActivityContainer.tsx en un editor.
En la definición de función ActivityContainer, busque div donde id="activitiesContainer" y agregue la clase de espaciado ajustable oj-sm-padding-4x-start.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start">
```
Navegue al directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx en un editor.
En la definición de función ActivityItemContainer, busque div donde id="activityItemsContainer" y agregue la clase de estilo de espaciado ajustable oj-sm-padding-4x-start.
```
<div  id="activityItemsContainer"
      class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start">
```
Navegue al directorio JET-Virtual-DOM-app/src/components/ItemDetail y abra el archivo ItemDetailContainer.tsx en un editor.
En la definición de función ItemDetailContainer, busque div donde id="itemDetailsContainer" y agregue la clase de estilo de espaciado ajustable oj-sm-padding-4x-start.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start">
```
Guarde y cierre los archivos abiertos.

Tarea 3: Definir columnas para diferentes tamaños de pantalla

Especifique las clases de estilo de diseño de cuadrícula de Oracle JET en los elementos div del contenedor de componentes. Estas clases de estilo permiten definir el ancho mínimo de columna asignado a los contenedores en el tamaño de pantalla especificado.

Abra el libro de cocina de Oracle JET y haga clic en Diseño y navegación en la barra de menús. A continuación, haga clic en Cuadrícula y seleccione la demostración Básica en la barra lateral.
En la demostración de Oracle JET Cookbook para las clases de diseño de cuadrícula ajustables, obtenga información sobre el concepto de una cuadrícula de 12 columnas y cómo puede implantar estas clases de estilo para agregar un comportamiento ajustable para diferentes tamaños de pantalla a la aplicación de DOM virtual.
Navegue al directorio JET-Virtual-DOM-app/src/components/Activity y abra el archivo ActivityContainer.tsx en un editor.
En la definición de función ActivityContainer, busque div donde id="activitiesContainer" y agregue las clases de estilo de tamaño oj-md-4 y oj-sm-12 que especifican el número mínimo de columnas para diferentes tamaños de pantalla.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start oj-md-4 oj-sm-12">
```
La clase oj-sm-12 hace que el contenedor div 12 tenga un ancho en una pantalla pequeña y oj-md-4 hace que el contenedor div tenga cuatro columnas de ancho cuando está en tamaños de pantalla medianos o mayores.

Guarde el archivo. El código debe tener un aspecto similar a activity-container-tsx.txt.
Navegue al directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra ActivityItemContainer.tsx en un editor. En div, donde id="activityItemsContainer", agregue las clases de estilo oj-md-6 y oj-sm-12.
```
<div id="activityItemsContainer"
     class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
Guarde el archivo. El código debe tener un aspecto similar a activity-item-container-tsx.txt.
Navegue al directorio JET-Virtual-DOM-app/src/components/ItemDetail y abra ItemDetailContainer.tsx en un editor. En div, donde id="itemDetailsContainer", agregue las clases de estilo oj-md-6 y oj-sm-12.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
Guarde el archivo. El código debe tener un aspecto similar a item-detail-container-tsx.txt.
Desde el directorio JET-Virtual-DOM-app/src/components, abra ParentContainer2.tsx en un editor. En div, donde id="parentContainer2", agregue las clases de estilo oj-md-8 y oj-sm-12.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal oj-md-8 oj-sm-12">
```
Guarde el archivo. El código debe tener un aspecto similar a parent-container2-tsx.txt.

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

En la ventana de terminal, cambie al directorio JET-Virtual-DOM-app y ejecute la aplicación DOM virtual.
```
npx @oracle/ojet-cli serve
```
Las herramientas de Oracle JET ejecutan la aplicación DOM virtual en el explorador web local.
Haga clic con el botón derecho en la página y seleccione Inspeccionar para mostrar la vista de página en las herramientas del desarrollador.
En la barra de herramientas Chrome DevTools, haga clic en para cambiar al modo de dispositivo.

Descripción de la ilustración device_mode_lens.png
A continuación, seleccione un dispositivo con un tamaño de pantalla pequeño, como Pixel 5, en el menú desplegable Dimensiones para verificar los cambios de alineación de contenido de la lista de actividades y la cabecera en el componente Contenedor de actividad.

Descripción de la ilustración content_alignment.png
Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual 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.

Siguiente paso

Para continuar con el siguiente tutorial de esta ruta de aprendizaje, haga clic aquí.

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 Oracle Learning Explorer.

Para obtener documentación sobre el producto, visite Oracle Help Center.

Título e Información de Copyright

Format the component containers for different screen sizes

F72922-01

December 2022