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

Introducción

Una disposición ajustable se ajusta para ajustarse 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 de Google Chrome, puede utilizar las herramientas para desarrolladores 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 ajustable de la aplicación Oracle JET virtual DOM desarrollada en varios tamaños de pantalla.

Requisitos

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

La aplicación de 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 explorador 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 @oracle/ojet-cli serve

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

    La aplicación con un diseño ajustable

    Descripción de la ilustración final_app.png

Tarea 2: Cambiar el tamaño de la pantalla

Puede probar la aplicación con varios dispositivos y tamaños de pantalla en el modo de depuración del explorador Chrome. Al utilizar 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 de texto del contenido del contenedor de actividad cambiará para un tamaño de pantalla pequeño, así como para los elementos de lista y el color del contenedor de elementos de actividad.

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

    Depurador de Google Chrome activado

    Descripción de la ilustración chrome_debmode.png

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

    Localizador de barra de herramientas de modo dispositivo

    Descripción de la ilustración device_mode_lens.png

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

    Se muestran varios viewports

    Descripción de la ilustración viewport.png

  4. En el menú desplegable, seleccione el Pixel 5, 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 el cian claro.

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

    Descripción de la ilustración small_screen_view.png

  5. En el menú desplegable Dimensiones, seleccione iPad Air, 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 el cian claro.

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

    Descripción de la ilustración medium_screen_view.png

  6. En el menú desplegable Dimensiones, seleccione Máx. de nido de hub, 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 de las pantallas grandes y extragrandes. En el contenedor principal 2, el relleno se aplica en el lado izquierdo del contenedor de artículo de actividad y en el lado derecho del contenedor de detalles de artículo.

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

    Descripción de la ilustración large_screen_view.png

  7. En la barra de herramientas Chrome DevTools, haga clic en Botón Alternar barra de herramientas de 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

Para continuar con el primer tutorial en la siguiente ruta de aprendizaje de esta serie, 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.