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

Introduction

Une disposition réactive s'ajuste pour s'adapter à différentes tailles d'écran sur un large éventail de périphériques. Lorsque vous exécutez votre application Web Oracle JET dans le navigateur Web Google Chrome, vous pouvez tester la réactivité de l'application Web avec différentes tailles d'écran que vous sélectionnez dans les outils de développement Google Chrome (Chrome DevTools).

Objectifs

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

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET avec l'exécution JavaScript, Node.js et la dernière interface de ligne de commande Oracle JET installée
Accès au cookbook Oracle JET pour les développeurs
Réalisation du tutoriel précédent dans ce parcours de formation afin de créer le dossier JET_Web_Application

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

L'application Web Oracle JET possède une présentation et des composants multi-écrans et peut être exécutée sur de nombreux navigateurs Web. Pour ce tutoriel, nous utiliserons le navigateur Chrome et DevTools pour afficher l'application dans différentes tailles d'écran.

Dans la fenêtre de terminal, accédez au répertoire JET_Web_Application et exécutez l'application.
```
$ ojet serve
```
Les outils Oracle JET exécutent votre application Web dans Google Chrome.

Description de l'illustration final-app.png

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

Vous pouvez tester la réactivité de l'application Web pour différentes tailles d'écran et différents périphériques en mode débogueur du navigateur Google Chrome. Lorsque vous exécutez l'application sur différents appareils, le contenu de l'application Web est affiché pour la taille d'écran sélectionnée et l'alignement du texte est basé sur la taille d'écran.

Dans Google Chrome, appuyez sur Ctrl+Shift+I pour afficher la fenêtre Chrome DevTools.

Description de l'illustration chrome-debmode.png
Dans la barre d'outils Chrome DevTools, cliquez sur pour passer en mode périphérique.

Description de l'illustration device-mode-lens.png ci-après
Dans l'émulateur d'écran du mode de périphérique, sélectionnez un périphérique ou une taille d'écran spécifique pour tester l'application.

Description de l'image viewport.png
Sélectionnez Pixel 5.

Dans le conteneur Activités, le contenu est aligné sur la fin de l'écran. Dans le conteneur Eléments d'activité, les éléments de liste des petits et moyens écrans sont affichés.

Description de l'illustration Small-screen.png
Sélectionnez iPad Air.

Dans le conteneur Activités, le contenu est aligné à gauche. Dans le conteneur Eléments d'activité, les éléments de liste des petits et moyens écrans sont affichés. Pour le conteneur des éléments d'activité, le remplissage est appliqué.

Description de l'illustration middle-screen.png
Sélectionnez Nest Hub Max.

Dans le conteneur Activités, le contenu est aligné à gauche. Dans le conteneur Eléments d'activité, les éléments de liste des écrans de grande taille et des écrans de grande taille sont affichés.

Description de l'illustration large-screen.png
Dans la barre d'outils Chrome DevTools, cliquez sur pour quitter le mode de périphérique.
Fermez la fenêtre ou l'onglet du navigateur qui affiche l'application Web en cours d'exécution.
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.

Ressources de formation supplémentaires

Explorez d'autres exercices sur docs.oracle.com/learn ou accédez à davantage de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez le site education.oracle.com/learning-explorer pour devenir Oracle Learning Explorer.

Pour consulter la documentation du produit, consultez le centre d'aide Oracle.

Informations relatives au titre et au copyright

Test the Oracle JET web application on different screen sizes

F53123-01

February 2022