Formatear los contenedores para diferentes tamaños de pantalla

Introducción

En este tutorial, aprenderá a personalizar una aplicación web de Oracle JET para soportar diferentes tamaños de pantalla mediante clases de ayuda de Oracle JET.

Puede utilizar las clases de ayuda de Oracle JET para definir condiciones para varios tamaños de pantalla. En un diseño flexible, un artículo 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 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 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. Si selecciona un tamaño de pantalla pero omite una condición de tamaño de pantalla mayor, la condición se aplica al tamaño de pantalla seleccionado y a todos los tamaños de pantalla mayores subsiguientes. Al utilizar clases auxiliares en la aplicación, puede controlar la visualización y alineación del texto y los elementos, personalizar el relleno alrededor de los paneles y definir 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 web de Oracle JET para especificar la alineación de texto, agregar relleno a paneles y definir columnas para diferentes tamaños de pantalla.

Requisitos

Tarea 1: Adición de clases auxiliares para la alineación de contenido

Modifique la alineación del contenido en el diseño de la aplicación web de Oracle JET especificando clases auxiliares para diferentes tamaños de pantalla en el elemento div.

  1. Abra Oracle JET Cookbook 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.

  2. En la demostración de Oracle JET Cookbook para Fin de texto, aprenda 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 de retrato de teléfono y vea el comportamiento ajustable de Fin de alineación S.

  3. Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.

  4. Busque el elemento div donde id="activitiesContainer", antes de la cabecera Actividades y, a continuación, agregue la clase de estilo auxiliar ajustable de Oracle JET oj-sm-only-text-align-end.

    <!-- The responsive helper style class aligns the Activities container text to the
 end of the screen when the screen size is small -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
  <h3 id="activitiesHeader">Activities</h3>

    La clase de estilo oj-sm-only-text-align-end alinea el contenido del contenedor al final del ancho de pantalla solo si el tamaño de la pantalla es pequeño.

  5. Guarde el archivo dashboard.html.

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

Tarea 2: Adición de clases auxiliares para relleno

Agregue relleno al contenido mediante las clases de estilo de espaciado ajustable de Oracle JET. Cuando especifica la clase de espaciado ajustable en el elemento principal div, el relleno se aplica a todos los elementos secundarios div de ese elemento principal.

  1. Busque el elemento div donde id="parentContainer2" y agregue la clase de estilo de espaciado ajustable de Oracle JET oj-lg-padding-pad-6x.

    <!-- The style class is specified in the parent div element -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x">

  2. Guarde el archivo dashboard.html. El código debe ser similar a padding-dashboard-html.txt.

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

En la aplicación web de Oracle JET, especifique las clases de estilo de tamaño en el elemento div. Estas clases de estilo Oracle JET permiten definir el ancho de columna mínimo asignado para el tamaño de pantalla especificado.

  1. Busque el elemento div donde id="activitiesContainer", antes de la cabecera Actividades, y agregue las clases de estilo que especifiquen el número mínimo de columnas para diferentes tamaños de pantalla.

    <!-- The oj-md-4 and oj-sm-12 style classes specify the column width for small and medium screen sizes -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-md-4 oj-sm-12">
  <h3 id="activitiesHeader">Activities</h3>

    La clase de estilo oj-sm-12 hace que las columnas 12 del contenedor div se amplíen en una pantalla pequeña y oj-md-4 hace que el contenedor div tenga cuatro columnas anchas cuando tiene un tamaño de pantalla medio o superior.

  2. Busque los elementos div que rodean la cabecera Detalles de elemento, que tienen atributos id con los valores parentContainer2, activityItemsContainer y itemDetailsContainer. A continuación, agregue las siguientes clases de estilo para especificar su ancho de columna mínimo para diferentes tamaños de pantalla.

    <!-- The style class in the div elements specifies the column width for different screen sizes -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  </div>
  <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">

  3. Guarde el archivo dashboard.html. El código debe ser similar a final-columns-dashboard-html.txt.

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

  1. 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 su explorador web local, donde puede ver el contenido del panel de control. 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. 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 los elementos de la lista Actividades.

    El diseño ajustable en una pantalla pequeña

    Descripción de la ilustración content-alignment.png

  2. Cierre la ventana o separador del explorador que muestra la aplicación web 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.

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.