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

Introducción

En este tutorial, aprenderá a personalizar una aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET) para admitir diferentes tamaños de pantalla mediante clases de ayuda 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 pantallas pequeñas, medianas, grandes y extra grandes. Puede definir el ancho mínimo de pantalla asignado para el 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 elige 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 solo se aplica a ese tamaño de pantalla. Mediante el uso de clases auxiliares en su aplicación DOM virtual, puede controlar la visualización y 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

Objetivos

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

Requisitos

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

Tarea 1: Agregar 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 del 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 de 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 mostrar una pantalla pequeña, haga clic en el icono Retrato de teléfono y vea el comportamiento ajustable de Fin de alineación.
Navegue hasta el directorio JET-Virtual-DOM-app/src/components/Activity y abra el archivo ActivityContainer.tsx en un editor.
En la definición de la función ActivityContainer, busque div donde id="activitiesContainer" y agregue la clase de estilo de ayuda 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: Agregar clases auxiliares para relleno

Agregue relleno al componente de contenedor principal 2 y sus componentes secundarios, el contenedor de artículos de actividad y el contenedor de detalles de artículos, mediante las clases de estilo de espaciado ajustable de Oracle JET. Cuando se especifica 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 de Espacio ajustable en la barra lateral.
En la demostración de Oracle JET Cookbook para Espacio ajustable, aprenderá a implementar las clases de espaciado ajustable para agregar relleno a los contenedores en varios tamaños de pantalla.
Navegue hasta el 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 hasta el 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 hasta el 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 hasta el 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 los componentes. Estas clases de estilo permiten definir el ancho mínimo de columna que se asigna 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 con capacidad de respuesta, 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 con capacidad de respuesta para diferentes tamaños de pantalla a la aplicación DOM virtual.
Navegue hasta el 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 tenga 12 columnas de 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 más grandes.

Guarde el archivo. Su código debe tener un aspecto similar a activity-container-tsx.txt.
Vaya 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. Su código debe tener un aspecto similar a activity-item-container-tsx.txt.
Vaya 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. Su código debe tener un aspecto similar a item-detail-container-tsx.txt.
En 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. Su 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 ojet 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 abrir la vista de página en las herramientas de desarrollador.
En la barra de herramientas de Chrome DevTools, haga clic en para cambiar al modo de dispositivo.
A continuación, seleccione un dispositivo con un tamaño de pantalla pequeño, como el Pixel 7, 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 actividades.
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

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

Este tutorial forma parte del módulo Responsive Design.

Adición de Contenedores a la Aplicación Oracle JET Virtual DOM
Formatear los contenedores para la aplicación Oracle JET Virtual DOM
Mostrar u ocultar contenido en la aplicación Oracle JET Virtual DOM
Prueba de la aplicación Oracle JET Virtual DOM en diferentes tamaños de pantalla

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.

Título e Información de Copyright

Format the component containers for different screen sizes

F74310-02

Oracle y/o sus filiales.