Mostra o nasconde il contenuto nell'applicazione DOM virtuale di Oracle JET

Introduzione

Oracle JavaScript Extension Toolkit (Oracle JET) include un modulo ResponsiveUtils che contiene utility per l'utilizzo di larghezze e intervalli di schermate reattivi. Ad esempio, una larghezza o un intervallo di schermate specifici è descritto da una chiave di query framework, che può essere passata al metodo getFrameworkQuery() per produrre una stringa di query media framework.

L'interfaccia Window contiene la variabile window che rappresenta la finestra in cui è in esecuzione l'applicazione DOM virtuale. Il passaggio della query sui supporti del framework nel metodo window.matchmedia() restituisce un oggetto con proprietà che è possibile utilizzare per verificare se la larghezza dello schermo della finestra in cui è in esecuzione l'applicazione DOM virtuale corrisponde alla larghezza o all'intervallo specificati.

Con questo oggetto e l'uso di ganci Preact, stato e listener di eventi, è possibile monitorare le dimensioni dello schermo in cui è in esecuzione l'applicazione DOM virtuale e visualizzare in modo reattivo contenuti diversi quando le dimensioni dello schermo cambiano.

Obiettivi

In questa esercitazione verrà descritto come utilizzare gli hook di Preact e il modulo ResponsiveUtils di Oracle JET per monitorare le modifiche alle dimensioni della finestra in cui è in esecuzione l'applicazione DOM virtuale. Quindi regolerai il componente Contenitore elemento attività dell'applicazione per caricare in modo reattivo contenuti diversi quando si utilizzano schermate medie o piccole.

Prerequisiti

Task 1: Monitorare la larghezza dello schermo e visualizzare in modo responsabile il contenuto condizionale

Utilizzare gli hook di Preact e il modulo ResponsiveUtils di Oracle JET per trovare la larghezza dello schermo della finestra del browser e monitorare quando la dimensione cambia in media o più piccola. Utilizzare quindi lo stato per tenere traccia delle dimensioni dello schermo nel componente ActivityItemContainer e visualizzare un contenitore Elementi attività ricolori con un elenco abbreviato di elementi per schermi medi o più piccoli.

  1. Aprire il ricettario Oracle JET e andare alla home page del ricettario. Fare clic su Framework nella barra dei menu, quindi fare clic su Funzionamento rispondente, quindi su Caricamento rispondente.

  2. È possibile accedere alla documentazione API per lo spazio di nomi ResponsiveUtils. Scorrere fino alla sezione Metodi e leggere il metodo getFrameworkQuery.

  3. Passare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire il file ActivityItemContainer.tsx in un editor.

  4. Nella parte superiore del file, aggiungere le istruzioni import per gli hook useRef, useState e useEffect, nonché il modulo Oracle JET ResponsiveUtils.

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

  5. Al di sopra della funzione ActivityItemContainer, aggiungere la variabile sm_md_view per contenere il contenuto che il contenitore visualizzerà quando lo schermo è di medie o piccole dimensioni, piuttosto che una dimensione 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: come procedura ottimale, si consiglia di definire gli stili CSS in un file separato, non in linea come sono qui.

  6. Prima dell'istruzione return della funzione ActivityItemContainer, aggiungere il codice seguente per utilizzare gli hook di Preact importati e il modulo 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. Sotto il gancio useEffect, aggiungere le seguenti due funzioni.

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

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

  8. Infine, modificare l'istruzione return della funzione ActivityItemContainer per eseguire il rendering del contenuto degli elementi attività correnti, se si utilizza una dimensione dello schermo grande o extra-grande, oppure eseguire il rendering del contenuto nella variabile sm_md_view, se si utilizza una dimensione dello schermo media o inferiore.

     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. Salvare e chiudere il file.

    Il codice dovrebbe essere simile a responsive-screen-activity-items.txt.

Task 2: Esecuzione dell'applicazione DOM virtuale

  1. Nella finestra del terminale, passare alla directory JET-Virtual-DOM-app ed eseguire l'applicazione DOM virtuale.

    npx ojet serve

    Gli strumenti Oracle JET eseguono l'applicazione DOM virtuale nel browser Web locale. La visualizzazione del contenuto su un grande schermo mostra lo stesso contenuto visualizzato alla fine dell'esercitazione precedente.

    L'app viene visualizzata per schermi di grandi dimensioni

  2. Per visualizzare i contenuti nella variabile sm_md_view, trascinare il bordo della finestra del browser finché non è di medie dimensioni. Nel contenitore Elementi attività, tenere presente l'elenco di elementi attività abbreviato sotto una nuova intestazione Dettagli attività, nonché il nuovo colore ciano chiaro del contenitore.

    L'app viene visualizzata per una dimensione media dello schermo

  3. Successivamente, visualizza l'app DOM virtuale in una piccola dimensione dello schermo utilizzando Chrome DevTools. Ingrandire lo schermo, quindi fare clic con il pulsante destro del mouse sulla pagina e selezionare Ispeziona per visualizzare la vista della pagina negli strumenti di sviluppo.

  4. Nella barra degli strumenti di Chrome DevTools, fare clic su Attiva/disattiva pulsante nella barra degli strumenti per passare alla modalità del dispositivo.

    Localizzatore per pulsante Attiva/disattiva barra degli strumenti del dispositivo

  5. Fare clic sul menu a discesa Dimensioni nell'emulatore di schermo della modalità dispositivo.

    Vengono visualizzate varie finestre

  6. Nel menu a discesa, selezionare un dispositivo con dimensioni ridotte dello schermo, ad esempio Pixel 7, per verificare le modifiche al contenuto nell'emulatore schermo.

    L'app viene visualizzata per uno schermo di piccole dimensioni

    Nelle dimensioni ridotte dello schermo, l'orientamento e il layout dell'applicazione vengono modificati e un elenco ridotto di elementi è visibile sotto l'intestazione Dettagli attività. Il contenitore è colorato ciano chiaro.

  7. Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.

  8. Chiudere la finestra o la scheda del browser.

  9. L'app Virtual DOM completata con funzionalità di progettazione reattiva dovrebbe essere simile a jet-virtual-dom-app-responsive-design-final.zip.

Task 3: (facoltativo) eseguire un'applicazione DOM virtuale da un'applicazione ripristinata

Se si desidera eseguire l'applicazione DOM virtuale Oracle JET completata dal codice fornito, è possibile ripristinare l'applicazione dal file di archivio scaricato. Per utilizzare un'applicazione DOM virtuale Oracle JET stripped and zipped, è necessario ripristinare le dipendenze del progetto, inclusi gli strumenti Oracle JET e le librerie e i moduli richiesti, all'interno dell'applicazione estratta.

  1. Scaricare il file jet-virtual-dom-app-responsive-design-final.zip ed estrarre il contenuto dell'applicazione completata nella cartella JET-Virtual-DOM-app.

  2. Nella finestra del terminale, passare alla cartella JET-Virtual-DOM-app e ripristinare l'applicazione Oracle JET Virtual DOM.

    npm install

  3. Attendere la conferma.

    Success: Restore complete

    L'app è pronta per essere eseguita.

  4. Eseguire l'app e testarla nel browser.

    npx ojet serve

  5. Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione in esecuzione.

  6. Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Responsive Design.

Puoi tornare alla pagina principale del percorso di apprendimento DOM virtuale per accedere a tutti i moduli sulla creazione di app DOM virtuali.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di formazione gratuiti sul canale YouTube di Oracle Learning. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare Oracle Help Center.