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

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

Con este objeto y el uso de listeners de eventos, estado y enlaces de Preact, puede supervisar el tamaño de la pantalla en la que se está ejecutando la aplicación DOM virtual y mostrar de forma ajustable contenido diferente cuando cambia el tamaño de la pantalla.

Objetivos

En este tutorial, aprenderá a utilizar los enlaces de Preact y el módulo Oracle JET ResponsiveUtils 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 elementos de actividad de la aplicación para cargar de forma ajustable contenido diferente al utilizar pantallas medianas o más pequeñas.

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones DOM virtuales que incluya una instalación de Node.js
Navegador web de Google Chrome instalado y configurado como explorador web predeterminado
Acceso al Oracle JET Developer Cookbook
Finalización del tutorial anterior en esta ruta de aprendizaje: Formato de los contenedores de componentes para diferentes tamaños de pantalla
La aplicación completa jet-virtual-dom-app-responsive-design-final.zip se descargó opcionalmente

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

Utilice los enlaces Preact y el módulo ResponsiveUtils de Oracle JET para buscar el ancho de pantalla de la ventana del explorador y supervisar cuándo el tamaño cambia a medio o menor. 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 más pequeñas.

Abra Oracle JET Cookbook y vaya a la página inicial de Cookbook. Haga clic en Marco en la barra de menús y, a continuación, haga clic en Comportamientos de respuesta y, a continuación, haga clic en Carga de respuesta.
Allí puede acceder a la documentación de API para el espacio de nombres ResponsiveUtils. Desplácese a la sección Métodos y lea sobre el método getFrameworkQuery.
Navegue al directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx en un editor.
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";
```

Encima de 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 práctica recomendada, se recomienda definir estilos CSS en un archivo independiente, no en línea como están aquí.

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]);     

En el enlace useEffect, agregue las dos funciones siguientes.

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

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

Por último, modifique la sentencia return de la función ActivityItemContainer para representar el contenido de elementos de actividad actual, si se utiliza un tamaño de pantalla grande o extra grande, o para representar el contenido en la variable sm_md_view, si se utiliza un tamaño de pantalla medio o menor.

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;

Guarde y cierre el archivo.

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

Tarea 2: 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 @oracle/ojet-cli 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 el que se muestra al final del tutorial anterior.

Descripción de la ilustración large_screen_view.png
Para mostrar el contenido en la variable sm_md_view, arrastre el borde de la ventana del explorador hasta que tenga un tamaño medio. En el contenedor de elementos de actividad, anote la lista de elementos de actividad abreviada en una nueva cabecera Detalles de actividad, así como el nuevo color de cian ligero del contenedor.

Descripción de la ilustración medium_screen_view.png
A continuación, vea la aplicación DOM virtual en un tamaño de pantalla pequeño mediante Chrome DevTools. Maximice la pantalla y, a continuación, haga clic con el botón derecho en la página y seleccione Inspeccionar para mostrar la vista de página en las herramientas del desarrollador.
En la barra de herramientas Chrome DevTools, haga clic en para cambiar al modo de dispositivo.

Descripción de la ilustración device_mode_lens.png
Haga clic en el menú desplegable Dimensiones en el emulador de pantalla del modo de dispositivo.

Descripción de la ilustración viewport.png
En el menú desplegable, seleccione un dispositivo con un tamaño de pantalla pequeño, como Pixel 5, para verificar los cambios de contenido en el emulador de pantalla.

Descripción de la ilustración small_screen_view.png

En el tamaño de pantalla pequeño, 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 cian ligero de color.
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.
Cierre la ventana o el separador del explorador.
La aplicación DOM virtual completa con funcionalidad de diseño ajustable debe ser similar a jet-virtual-dom-app-responsive-design-final.zip.

Tarea 3: (Opcional) Ejecución de una aplicación de 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 de DOM virtual de Oracle JET comprimida y comprimida, 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.

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.
En la ventana de terminal, navegue hasta la carpeta JET-Virtual-DOM-app y restaure la aplicación DOM virtual de Oracle JET.
```
npx @oracle/ojet-cli restore
```
Espere la confirmación.
```
$ Success: Restore complete
```
La aplicación está lista para ejecutarse.
Ejecute la aplicación y pruébela en el explorador.
```
npx @oracle/ojet-cli serve
```
Cierre la ventana o el separador del explorador que muestra la aplicación 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

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

Título e Información de Copyright

Show or hide content in the Oracle JET virtual DOM app

F72923-01

December 2022