Mostrar u ocultar contenido en la aplicación DOM virtual de Oracle JET

Introducción

Oracle JavaScript Extension Toolkit (Oracle JET) incluye un módulo ResponsiveUtils que contiene utilidades para trabajar con rangos y anchos de pantalla ajustables. Por ejemplo, un rango o ancho de pantalla específico se describe mediante una clave de consulta de marco, que se puede transferir al método getFrameworkQuery() para producir una cadena de consulta de medios de marco.

La interfaz Window contiene la variable window que representa la ventana en la que se ejecuta la aplicación DOM virtual. Al transferir la consulta de medios de marco al método window.matchmedia(), se devuelve un objeto con propiedades que puede utilizar para comprobar si el ancho de pantalla de la ventana en la que se ejecuta la aplicación DOM virtual coincide con el ancho o rango especificado.

Con este objeto y el uso de los enganches, el estado y los listeners de evento de Preact, puede supervisar el tamaño de la pantalla en la que se ejecuta la aplicación DOM virtual y mostrar de forma receptiva diferentes contenidos cuando cambia el tamaño de la pantalla.

Objetivos

En este tutorial, aprenderá a utilizar los enlaces de Preact y el módulo ResponsiveUtils de Oracle JET para supervisar los cambios en el tamaño de la ventana en la que se ejecuta la aplicación DOM virtual. A continuación, ajustará el componente Contenedor de elemento de actividad de su aplicación para cargar de forma ajustable contenido diferente cuando utilice pantallas medianas o más pequeñas.

Requisitos

Tarea 1: Supervisión del ancho de pantalla y visualización responsable del contenido condicional

Utilice los enlaces de Preact y el módulo ResponsiveUtils de Oracle JET para buscar el ancho de pantalla de la ventana del explorador y supervisar cuando el tamaño cambie a medio o más pequeño. A continuación, utilice el estado para realizar un seguimiento del tamaño de la pantalla en el componente ActivityItemContainer y representar un contenedor de elementos de actividad con una lista abreviada de elementos para pantallas medianas o pequeñas.

  1. Abra el libro de cocina de Oracle JET y vaya a la página inicial del libro de cocina. Haga clic en Marco en la barra de menús, haga clic en Comportamientos receptivos y, a continuación, en Carga receptiva.

  2. Allí puede acceder a la documentación de la API para el espacio de nombres ResponsiveUtils. Desplácese hasta la sección Methods y lea sobre el método getFrameworkQuery.

  3. Navegue hasta el directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx en un editor.

  4. En la parte superior del archivo, agregue sentencias import para los enlaces useRef, useState y useEffect, así como el módulo ResponsiveUtils de Oracle JET.

    import { useRef, useState, useEffect } from "preact/hooks";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";

  5. Sobre la función ActivityItemContainer, agregue la variable sm_md_view para contener el contenido que mostrará el contenedor cuando la pantalla tenga un tamaño medio o menor, en lugar de un tamaño grande o extra grande.

    // Display this content for medium and narrower screen widths
 const sm_md_view =
   <div id="sm_md" class="oj-flex-item oj-sm-padding-4x-start oj-md-6 oj-sm-12" 
                   style="background-color:lightcyan; padding: 10px; font-size: 10px">
     <h3 id="activityDetailsHeader">Activity Details</h3>
     <div class="item-display no-wrap">
       <ul>
         <li class="li-item">SureCatch Baseball Glove</li>
         <li class="li-item">Western R16 Helmet</li>
         <li class="li-item">Western C1 Helmet</li>
         <li class="li-item">Western Bat</li>
       </ul>
     </div>
   </div>;

    Nota: Como mejor práctica, le recomendamos que defina estilos CSS en un archivo independiente, no en línea, ya que están aquí.

  6. Antes de la sentencia return de la función ActivityItemContainer, agregue el siguiente código para utilizar los enlaces de Preact importados y el módulo ResponsiveUtils.

     const ActivityItemContainer = () => {

   const mediaQueryRef = useRef<MediaQueryList>(window.matchMedia(ResponsiveUtils.getFrameworkQuery("md-down")!));

   const [isSmallMediumWidth, setIsSmallMediumWidth] = useState(mediaQueryRef.current.matches);

   useEffect(() => {
     mediaQueryRef.current.addEventListener("change", handleMediaQueryChange);
     return (() => mediaQueryRef.current.removeEventListener("change", handleMediaQueryChange));
   }, [mediaQueryRef]);

  7. En el enlace useEffect, agregue las dos funciones siguientes.

    function handleMediaQueryChange(e: MediaQueryListEvent) {
  setIsSmallMediumWidth(e.matches);
}

function getDisplayType() {
  return isSmallMediumWidth ? false : true;
}

  8. Por último, modifique la sentencia return de la función ActivityItemContainer para que represente el contenido actual de los elementos de actividad, si utiliza un tamaño de pantalla grande o extra grande, o para que represente el contenido en la variable sm_md_view, si utiliza un tamaño de pantalla medio o más pequeño.

     return getDisplayType() ? (
   <div
     id="activityItemsContainer"
     class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
     <div id="container" class="item-display no-wrap">
       <h3>Activity Items</h3>
       <ul>
         <li class="li-item">Louisville Slugger Bat</li>
         <li class="li-item">SureCatch Baseball Glove</li>
         <li class="li-item">Baseball</li>
         <li class="li-item">Western R16 Helmet</li>
         <li class="li-item">Western C1 Helmet</li>
         <li class="li-item">Sure Fire Ball (Set of 4)</li>
       </ul>
     </div>
   </div>
 ) : sm_md_view;

  9. Guarde y cierre el archivo.

    Su código debe tener un aspecto similar a responsive-screen-activity-items.txt.

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

  1. 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. La visualización del contenido en una pantalla grande muestra el mismo contenido que se muestra al final del tutorial anterior.

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

  2. Para mostrar el contenido en la variable sm_md_view, arrastre el borde de la ventana del explorador hasta que sea de tamaño medio. En el contenedor de elementos de actividad, observe la lista de elementos de actividad abreviada bajo un nuevo encabezado Detalles de actividad, así como el nuevo color cian claro del contenedor.

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

  3. A continuación, vea la aplicación DOM virtual en un tamaño de pantalla pequeño utilizando Chrome DevTools. Maximice la pantalla y, a continuación, 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.

  4. 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 para el botón Alternar dispositivo de la barra de herramientas

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

    Se muestran varias ventanas de visualización

  6. En el menú desplegable, seleccione un dispositivo con un tamaño de pantalla pequeño, como el Pixel 7, para verificar los cambios de contenido en el emulador de pantalla.

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

    En el tamaño de pantalla pequeña, la orientación y el diseño de la aplicación cambian y una lista abreviada de elementos está visible en la cabecera Detalles de actividad. El contenedor es de color cian claro.

  7. 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.

  8. Cierre la ventana o el separador del explorador.

  9. La aplicación DOM virtual completada con una funcionalidad de diseño ajustable debe tener un aspecto similar al de jet-virtual-dom-app-responsive-design-final.zip.

Tarea 3: (Opcional) Ejecutar una aplicación DOM virtual desde una aplicación restaurada

Si desea ejecutar la aplicación DOM virtual de Oracle JET completa desde el código proporcionado, puede restaurar la aplicación desde el archivo de almacenamiento descargado. Para trabajar con una aplicación DOM virtual de Oracle JET stripped and zipped, debe restaurar las dependencias del proyecto, incluidas las herramientas de Oracle JET y las bibliotecas y módulos necesarios, dentro de la aplicación extraída.

  1. Descargue el archivo jet-virtual-dom-app-responsive-design-final.zip y extraiga el contenido de la aplicación terminada en la carpeta JET-Virtual-DOM-app.

  2. En la ventana de terminal, vaya a la carpeta JET-Virtual-DOM-app y restaure la aplicación Oracle JET Virtual DOM.

    npm install

  3. Espere la confirmación.

    Success: Restore complete

    La aplicación está lista para ejecutarse.

  4. Ejecute la aplicación y pruébela en el explorador.

    npx ojet serve

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

  6. 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.

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.