Tester l'application Oracle JET Virtual DOM sur différentes tailles d'écran

Introduction

Une disposition réactive s'ajuste pour s'adapter aux tailles d'écran sur un large éventail d'appareils. Lorsque vous exécutez votre application DOM virtuelle Oracle JavaScript Extension Toolkit (Oracle JET) dans le navigateur Web Google Chrome, vous pouvez utiliser les outils de développement Chrome (Chrome DevTools) pour tester la réactivité de l'application avec différentes tailles d'écran.

Objectifs

Dans ce tutoriel, vous allez tester la conception réactive de l'application DOM virtuelle Oracle JET développée sur différentes tailles d'écran.

Prérequis

Tâche 1 : exécution de l'application DOM virtuelle

L'application Oracle JET Virtual DOM dispose d'une mise en page et de composants réactifs. Elle peut s'exécuter sur de nombreux navigateurs Web et appareils. Pour ce tutoriel, nous utiliserons le navigateur Chrome et DevTools pour afficher l'application dans différentes tailles d'écran.

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

    npx @oracle/ojet-cli serve

    Les outils Oracle JET exécutent votre application DOM virtuelle dans le navigateur.

    L'application avec une mise en page multi-écran

    Description de l'illustration final_app.png

Tâche 2 : modifier la taille de l'écran

Vous pouvez tester l'application avec différentes tailles d'écran et périphériques en mode débogueur du navigateur Chrome. Lorsque vous utilisez l'application sur différents appareils, les composants et le contenu de l'application s'adaptent à la taille de l'écran donné. Par exemple, l'alignement du texte du contenu du conteneur d'activité change pour une petite taille d'écran, ainsi que les éléments de liste et la couleur du conteneur d'éléments d'activité.

  1. Dans Google Chrome, appuyez sur Ctrl+Shift+I pour afficher le Chrome DevTools.

    Débogueur Google Chrome activé

    Description de l'illustration chrome_debmode.png

  2. Dans la barre d'outils Chrome DevTools, cliquez sur Activer/Désactiver le bouton de la barre d'outils de l'appareil pour passer en mode périphérique.

    Localisation de la barre d'outils du mode appareil

    Description de l'illustration device_mode_lens.png

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

    Différentes fenêtres sont affichées

    Description de l'illustration viewport.png

  4. Dans le menu déroulant, sélectionnez Pixel 5, avec une petite taille d'écran, et affichez l'application dans l'émulateur d'écran.

    Dans le conteneur d'activités, le contenu est aligné à droite. Dans le conteneur d'éléments d'activité, la liste abrégée des éléments des écrans de petite et moyenne taille s'affiche et l'en-tête Détails d'activité remplace l'en-tête Eléments d'activité. La couleur du conteneur est le cyan clair.

    Application affichée pour une petite taille d'écran

    Description de l'illustration small_screen_view.png

  5. Dans le menu déroulant Dimensions, sélectionnez iPad Air, avec une taille d'écran moyenne.

    Dans le conteneur d'activités, le contenu est aligné à gauche. Dans le conteneur d'éléments d'activité, la liste abrégée des éléments des écrans de petite et moyenne taille s'affiche et l'en-tête Détails d'activité remplace l'en-tête Eléments d'activité. La couleur du conteneur est le cyan clair.

    Application affichée pour une taille moyenne d'écran

    Description de l'illustration medium_screen_view.png

  6. Dans le menu déroulant Dimensions, sélectionnez Nest Hub Max, avec une taille d'écran élevée.

    Dans le conteneur d'activités, le contenu est aligné à gauche. Dans le conteneur d'éléments d'activité, les éléments de liste des écrans volumineux et extra-large sont affichés. Dans le conteneur parent 2, le remplissage est appliqué sur le côté gauche du conteneur d'éléments d'activité et sur le côté droit du conteneur de détails d'élément.

    Application affichée pour une grande taille d'écran

    Description de l'illustration large_screen_view.png

  7. Dans la barre d'outils Chrome DevTools, cliquez sur Activer/Désactiver le bouton de la barre d'outils de l'appareil pour quitter le mode du périphérique.

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

  9. Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le travail par lots d'outils Oracle JET.

Etape suivante

Pour passer au premier tutoriel du prochain parcours de formation de cette série, cliquez ici.

Ressources de formation supplémentaires

Explorez d'autres exercices sur docs.oracle.com/learn ou accédez à davantage de contenu de formation gratuit sur le canal Oracle Learning YouTube. En outre, accédez à education.oracle.com/learning-explorer pour devenir explorateur Oracle Learning.

Pour consulter la documentation du produit, consultez Oracle Help Center.