Formater les conteneurs pour différentes tailles d'écran

Introduction

Dans ce tutoriel, vous allez apprendre à personnaliser une application Web Oracle JET pour prendre en charge différentes tailles d'écran à l'aide des classes d'aide Oracle JET.

Vous pouvez utiliser les classes d'aide Oracle JET pour définir des conditions pour différentes tailles d'écran. Dans une présentation flexible, un élément d'un conteneur augmente ou diminue pour remplir l'espace du conteneur. Oracle JET fournit des classes de style pour les petites, moyennes, grandes et très grandes tailles d'écran. Vous pouvez définir la largeur d'écran minimale allouée au contenu en indiquant le nombre de colonnes logiques de 1 à 12 que le contenu doit utiliser pour la taille d'écran sélectionnée. Si vous choisissez une taille d'écran lors de la spécification du mot-clé only dans la condition, la condition s'applique uniquement à cette taille d'écran. Si vous choisissez une taille d'écran mais que vous omettez une condition de taille d'écran plus grande, la condition s'applique à la taille d'écran sélectionnée et à toutes les tailles d'écran supérieures suivantes. En utilisant des classes d'aide dans votre application, vous pouvez contrôler l'affichage et l'alignement du texte et des éléments, personnaliser le remplissage autour des panneaux et définir des colonnes pour différentes tailles d'écran.

Les tailles d'écran sont divisées logiquement en 12 colonnes.

Description de l'illustration Screen-sizes.png

Objectifs

Dans ce tutoriel, vous allez ajouter des classes d'aide à votre application Web Oracle JET pour spécifier l'alignement du texte, ajouter un remplissage aux panneaux et définir des colonnes pour différentes tailles d'écran.

Prérequis

Tâche 1 : ajouter des classes d'aide pour l'alignement du contenu

Modifiez l'alignement du contenu dans la présentation de l'application Web Oracle JET en indiquant des classes d'aide pour différentes tailles d'écran dans l'élément div.

  1. Ouvrez le cookie Oracle JET et cliquez sur Cadre dans la barre de menus. Cliquez ensuite sur Utilitaires CSS, puis sur Mise en page et sélectionnez la démonstration Fin du texte dans la barre latérale.

  2. Dans la démonstration Oracle JET Cookbook for Text End, découvrez comment implémenter la classe de style oj-sm-only-text-align-end pour aligner le contenu texte sur la fin d'un petit écran. Pour démo un petit écran, cliquez sur l'icône Portrait téléphonique et affichez le comportement réactif pour S align end.

  3. Accédez au répertoire JET_Web_Application/src/ts/views et ouvrez le fichier dashboard.html dans un éditeur.

  4. Recherchez l'élément div où id="activitiesContainer", avant l'en-tête Activités, puis ajoutez la classe de style d'aide multi-écran Oracle JET oj-sm-only-text-align-end.

    <!-- The responsive helper style class aligns the Activities container text to the
 end of the screen when the screen size is small -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
  <h3 id="activitiesHeader">Activities</h3>

    La classe de style oj-sm-only-text-align-end aligne le contenu du conteneur sur la largeur de l'écran uniquement si la taille de l'écran est petite.

  5. Enregistrez le fichier dashboard.html.

    Votre code doit ressembler à content-alignement-tableau de bord-html.txt.

Tâche 2 : Ajouter des classes d'application d'aide pour remplissage

Ajoutez un remplissage au contenu à l'aide des classes de style d'espacement réactives d'Oracle JET. Lorsque vous spécifiez la classe d'espacement réactive sur l'élément parent div, le remplissage est appliqué à tous les éléments enfant div de ce parent.

  1. Recherchez l'élément div dans lequel id="parentContainer2" et ajoutez la classe de style d'espacement réactif Oracle JET oj-lg-padding-pad-6x.

    <!-- The style class is specified in the parent div element -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x">

  2. Enregistrez le fichier dashboard.html. Le code doit ressembler à padding-dashboard-html.txt.

Tâche 3 : définir des colonnes pour différentes tailles d'écran

Dans l'application Web Oracle JET, indiquez les classes de style de dimensionnement dans l'élément div. Ces classes de style Oracle JET vous permettent de définir la largeur de colonne minimale allouée pour la taille d'écran spécifiée.

  1. Recherchez l'élément div où id="activitiesContainer", avant l'en-tête Activités, et ajoutez les classes de style qui spécifient le nombre minimum de colonnes pour différentes tailles d'écran.

    <!-- The oj-md-4 and oj-sm-12 style classes specify the column width for small and medium screen sizes -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-md-4 oj-sm-12">
  <h3 id="activitiesHeader">Activities</h3>

    La classe de style oj-sm-12 agrandit les colonnes du conteneur div 12 dans un petit écran et oj-md-4 agrandit les colonnes du conteneur div dans des écrans de taille moyenne ou supérieure.

  2. Recherchez les éléments div entourant l'en-tête Détails de l'élément, qui ont des attributs id avec les valeurs parentContainer2, activityItemsContainer et itemDetailsContainer. Ajoutez ensuite les classes de style suivantes pour spécifier leur largeur de colonne minimale pour différentes tailles d'écran.

    <!-- The style class in the div elements specifies the column width for different screen sizes -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  </div>
  <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">

  3. Enregistrez le fichier dashboard.html. Votre code doit ressembler à final-columns-dashboard-html.txt.

Tâche 4 : Exécuter l'application Web

  1. 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 votre navigateur Web local, où vous pouvez visualiser le contenu du tableau de bord. 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. Sélectionnez ensuite un périphérique de petite taille d'écran, tel que Pixel 5, dans le menu déroulant Dimensions pour vérifier les modifications d'alignement de contenu des éléments de liste Activités.

    Disposition réactive sur un petit écran

    Description de l'illustration content-alignement.png ci-après

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

  3. 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.