Probar la aplicación Oracle JET Virtual DOM en diferentes tamaños de pantalla

Introducción

Un diseño responsivo se ajusta para adaptarse a los tamaños de pantalla en una amplia gama de dispositivos. Al ejecutar la aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET) en el explorador web Google Chrome, puede utilizar las herramientas de desarrollador de Chrome (Chrome DevTools) para probar la capacidad de respuesta de la aplicación con diferentes tamaños de pantalla.

Objetivos

En este tutorial, probará el diseño responsivo de la aplicación DOM virtual Oracle JET desarrollada en varios tamaños de pantalla.

Requisitos

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

La aplicación DOM virtual de Oracle JET tiene un diseño y componentes ajustables, y se puede ejecutar en muchos exploradores y dispositivos web. Para este tutorial, utilizaremos el navegador Chrome y DevTools para ver la aplicación en varios tamaños de pantalla.

  1. En la ventana de terminal, cambie al directorio JET-Virtual-DOM-app y ejecute la aplicación.

    npx ojet serve

    Las herramientas de Oracle JET ejecutan la aplicación DOM virtual en el explorador.

    La aplicación con un diseño ajustable

Tarea 2: Cambiar el tamaño de la pantalla

Puedes probar la aplicación con varios tamaños de pantalla y dispositivos en el modo depurador del navegador Chrome. Cuando se utiliza la aplicación en diferentes dispositivos, los componentes y contenidos de la aplicación se ajustarán al tamaño de la pantalla dada. Por ejemplo, la alineación del texto del contenido del contenedor de actividad cambiará para un tamaño de pantalla pequeño, así como los elementos de lista y el color del contenedor de elementos de actividad.

  1. En Google Chrome, pulse Ctrl+Shift+I para mostrar Chrome DevTools.

    Depurador de Google Chrome activado

  2. En la barra de herramientas de Chrome DevTools, haga clic en Botón Alternar barra de herramientas del dispositivo para cambiar al modo de dispositivo.

    Localizador de barras de herramientas de modo dispositivo

  3. Haga clic en el menú desplegable Dimensions (Dimensiones) del emulador de pantalla del modo de dispositivo.

    Se muestran varias ventanas de visualización

  4. En el menú desplegable, seleccione el Pixel 7, con un tamaño de pantalla pequeño, y visualice la aplicación en el emulador de pantalla.

    En el contenedor de actividades, el contenido está alineado a la derecha. En el contenedor de elementos de actividad, se muestra la lista abreviada de elementos para pantallas pequeñas y medianas, y la cabecera Detalles de actividad sustituye a la cabecera Elementos de actividad. El color del contenedor es cian claro.

    La aplicación se muestra para un tamaño de pantalla pequeño

  5. En el menú desplegable Dimensiones, seleccione iPad Aire, con un tamaño de pantalla medio.

    En el contenedor de actividades, el contenido está alineado a la izquierda. En el contenedor de elementos de actividad, se muestra la lista abreviada de elementos para pantallas pequeñas y medianas, y la cabecera Detalles de actividad sustituye a la cabecera Elementos de actividad. El color del contenedor es cian claro.

    La aplicación se muestra para un tamaño de pantalla medio

  6. En el menú desplegable Dimensiones, seleccione el máximo de hub de anidación, con un tamaño de pantalla grande.

    En el contenedor de actividades, el contenido está alineado a la izquierda. En el contenedor de elementos de actividad, se muestran los elementos de lista para pantallas grandes y extra grandes. En el contenedor principal 2, el relleno se aplica en el lado izquierdo del contenedor de artículos de actividad y en el lado derecho del contenedor de detalles de artículos.

    La aplicación se muestra para un tamaño de pantalla grande

  7. En la barra de herramientas de Chrome DevTools, haga clic en Botón Alternar barra de herramientas del dispositivo para salir del modo de dispositivo.

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

  9. 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 Diseño Responsive 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, Creación de la Vista Maestra en una Aplicación Oracle JET Virtual DOM, en el módulo Vistas de Detalle Maestra en Oracle JET.

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.