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

Introduction

Une mise en page réactive s'adapte 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 Oracle JET Virtual DOM développée sur différentes tailles d'écran.

Prérequis

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

L'application Oracle JET Virtual DOM dispose d'une mise en page et de composants réactifs, et peut s'exécuter sur de nombreux navigateurs Web et périphériques. Pour ce tutoriel, nous allons utiliser 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 ojet serve

    L'outil Oracle JET exécute votre application DOM virtuelle dans le navigateur.

    L'application avec une présentation réactive

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

Vous pouvez tester l'application avec différentes tailles d'écran et appareils dans le mode débogueur du navigateur Chrome. Lorsque vous utilisez l'application sur différents appareils, les composants et le contenu de l'application s'ajustent à la taille de l'écran donné. Par exemple, l'alignement du texte du contenu du conteneur d'activités change pour une petite taille d'écran, ainsi que pour 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é

  2. 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 de barre d'outils du mode Dispositif

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

    Différentes fenêtres s'affichent

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

    Dans le conteneur Activité, le contenu est aligné à droite. Dans le conteneur d'éléments d'activité, la liste abrégée d'éléments pour les é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 cyan clair.

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

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

    Dans le conteneur Activité, le contenu est aligné à gauche. Dans le conteneur d'éléments d'activité, la liste abrégée d'éléments pour les é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 cyan clair.

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

  6. Dans le menu déroulant Dimensions, sélectionnez le nombre maximal de hub, avec une taille d'écran élevée.

    Dans le conteneur Activité, le contenu est aligné à gauche. Dans le conteneur d'éléments d'activité, les éléments de liste pour les écrans de grande et de très grande taille s'affichent. Dans le conteneur parent 2, le remplissage est appliqué sur le côté gauche du conteneur d'articles d'activité et sur le côté droit du conteneur de détails d'articles.

    L'application affichée pour un grand écran

  7. Dans la barre d'outils Chrome DevTools, cliquez sur Bouton Afficher/Masquer la barre d'outils de l'appareil pour quitter le mode 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 traitement batch des outils Oracle JET.

Etape suivante

Ce tutoriel conclut le module Responsive Design dans ce parcours d'apprentissage sur la création d'applications Web DOM virtuelles.

Vous pouvez passer au tutoriel suivant dans le parcours de formation, Créer la vue maître dans une application Oracle JET Virtual DOM, dans le module Vues maître-détail dans Oracle JET.

Vous pouvez également 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.