Afficher ou masquer du contenu dans l'application DOM virtuelle Oracle JET

Introduction

Oracle JavaScript Extension Toolkit (Oracle JET) inclut un module ResponsiveUtils qui contient des utilitaires permettant d'utiliser des largeurs et des plages d'écran réactives. Par exemple, une plage ou une largeur d'écran spécifique est décrite par une clé de requête de structure, qui peut être transmise à la méthode getFrameworkQuery() pour produire une chaîne de requête de média de structure.

L'interface Window contient la variable window qui représente la fenêtre dans laquelle votre application DOM virtuelle est exécutée. La transmission de la requête de média de structure à la méthode window.matchmedia() renvoie un objet avec des propriétés que vous pouvez utiliser pour vérifier si la largeur de l'écran de la fenêtre dans laquelle votre application DOM virtuelle est exécutée correspond à la largeur ou à la plage spécifiée.

Avec cet objet et l'utilisation de crochets, d'états et d'écouteurs d'événements Preact, vous pouvez surveiller la taille de l'écran dans lequel votre application DOM virtuelle s'exécute et afficher de manière réactive un contenu différent lorsque la taille de l'écran change.

Objectifs

Dans ce tutoriel, vous apprendrez à utiliser les hooks Preact et le module Oracle JET ResponsiveUtils pour surveiller les modifications de la taille de la fenêtre dans laquelle votre application DOM virtuelle est exécutée. Ensuite, vous ajusterez le composant Conteneur d'éléments d'activité de votre application pour charger du contenu différent en mode réactif lors de l'utilisation d'écrans moyens ou plus petits.

Prérequis

Tâche 1 : surveiller la largeur de l'écran et afficher le contenu conditionnel en mode réactif

Utilisez les points d'accrochage Preact et le module ResponsiveUtils d'Oracle JET pour rechercher la largeur d'écran de la fenêtre du navigateur et surveiller le passage de la taille à moyenne ou petite. Utilisez ensuite l'état pour suivre la taille de l'écran dans le composant ActivityItemContainer et afficher un conteneur d'éléments d'activité recolorés avec une liste abrégée d'éléments pour les écrans moyens ou plus petits.

  1. Ouvrez le livre de recettes Oracle JET et accédez à la page d'accueil du livre de recettes. Cliquez sur Cadre dans la barre de menus, puis sur Comportements réactifs, puis sur Chargement réactif.

  2. Vous pouvez accéder à la documentation de l'API pour l'espace de noms ResponsiveUtils. Faites défiler la page jusqu'à la section Methods et lisez les informations sur la méthode getFrameworkQuery.

  3. Accédez au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ActivityItemContainer.tsx dans un éditeur.

  4. En haut du fichier, ajoutez des instructions import pour les hooks useRef, useState et useEffect, ainsi que le module Oracle JET ResponsiveUtils.

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

  5. Au-dessus de la fonction ActivityItemContainer, ajoutez la variable sm_md_view pour contenir le contenu que le conteneur affichera lorsque l'écran aura une taille moyenne ou plus petite, plutôt qu'une taille grande ou extra-large.

    // 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>;

    Remarque : Nous vous recommandons de définir des styles CSS dans un fichier distinct, et non en ligne tel qu'il est ici.

  6. Avant l'instruction return de la fonction ActivityItemContainer, ajoutez le code suivant pour utiliser les points d'accrochage Preact et le module ResponsiveUtils importés.

     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. Sous le hook useEffect, ajoutez les deux fonctions suivantes.

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

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

  8. Enfin, modifiez l'instruction return de la fonction ActivityItemContainer pour afficher le contenu des éléments d'activité en cours, si vous utilisez une taille d'écran grande ou extra-large, ou pour afficher le contenu dans la variable sm_md_view, si vous utilisez une taille d'écran moyenne ou plus petite.

     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. Enregistrez et fermez le fichier.

    Votre code doit ressembler à responsive-screen-activity-items.txt.

Tâche 2 : exécution de l'application Virtual DOM

  1. Dans la fenêtre de terminal, accédez au répertoire JET-Virtual-DOM-app et exécutez l'application DOM virtuelle.

    npx ojet serve

    Les outils Oracle JET exécutent l'application DOM virtuelle dans votre navigateur Web local. L'affichage du contenu sur un grand écran affiche le même contenu que celui affiché à la fin du tutoriel précédent.

    L'application affichée pour un grand écran

  2. Pour afficher le contenu de la variable sm_md_view, faites glisser le bord de la fenêtre du navigateur jusqu'à ce qu'il soit de taille moyenne. Dans le conteneur Eléments d'activité, notez la liste abrégée des éléments d'activité sous un nouvel en-tête Détails d'activité, ainsi que la nouvelle couleur cyan clair du conteneur.

    L'application affichée pour une taille d'écran moyenne

  3. Ensuite, affichez l'application DOM virtuelle dans un petit écran à l'aide de Chrome DevTools. Agrandissez l'écran, puis cliquez avec le bouton droit de la souris sur la page et sélectionnez Inspecter pour afficher la vue de page dans les outils de développement.

  4. Dans la barre d'outils Chrome DevTools, cliquez sur Bouton Afficher/Masquer la barre d'outils de l'appareil pour passer en mode périphérique.

    Localisateur pour bouton Activer/Désactiver la barre d'outils de l'appareil

  5. Cliquez sur le menu déroulant Dimensions dans l'émulateur d'écran du mode de périphérique.

    Différentes fenêtres s'affichent

  6. Dans le menu déroulant, sélectionnez un périphérique avec une petite taille d'écran, telle que le pixel 7, pour vérifier les modifications de contenu dans l'émulateur d'écran.

    L'application affichée pour une petite taille d'écran

    Dans la petite taille de l'écran, l'orientation et la présentation de l'application changent et une liste abrégée d'éléments est visible sous l'en-tête Détails d'activité. Le récipient est de couleur cyan clair.

  7. Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le traitement batch des outils Oracle JET.

  8. Fermez la fenêtre ou l'onglet du navigateur.

  9. Votre application DOM virtuelle terminée avec une fonctionnalité de conception réactive doit ressembler à jet-virtual-dom-app-responsive-design-final.zip.

Tâche 3 : (Facultatif) Exécuter une application DOM virtuelle à partir d'une application restaurée

Si vous souhaitez exécuter l'application DOM virtuelle Oracle JET terminée à partir du code fourni, vous pouvez restaurer l'application à partir du fichier d'archive téléchargé. Pour utiliser une application DOM virtuelle Oracle JET stripped and zippée, vous devez restaurer les dépendances du projet, y compris les outils Oracle JET et les bibliothèques et modules requis, dans l'application extraite.

  1. Téléchargez le fichier jet-virtual-dom-app-responsive-design-final.zip et extrayez le contenu de l'application terminée vers le dossier JET-Virtual-DOM-app.

  2. Dans la fenêtre de terminal, accédez au dossier JET-Virtual-DOM-app et restaurez l'application Oracle JET Virtual DOM.

    npm install

  3. Attendez la confirmation.

    Success: Restore complete

    L'application est prête à être exécutée.

  4. Exécutez l'application et testez-la dans le navigateur.

    npx ojet serve

  5. Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application en cours d'exécution.

  6. Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le traitement batch des outils Oracle JET.

Etape suivante

Passez au tutoriel suivant de ce module.

Ce tutoriel fait partie du module Responsive Design.

Vous pouvez revenir à la page principale du parcours de formation DOM virtuel pour accéder à tous les modules sur la création d'applications DOM virtuelles.

Ressources de formation supplémentaires

Explorez d'autres ateliers sur le site docs.oracle.com/learn ou accédez à d'autres contenus d'apprentissage gratuits sur le canal Oracle Learning YouTube. En outre, visitez le site education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

Pour obtenir de la documentation sur le produit, consultez Oracle Help Center.