Ajouter des conteneurs à l'application Web Oracle JET

Introduction

Une mise en page réactive peut s'adapter de manière flexible à un large éventail de tailles d'écran, des petits téléphones aux écrans de bureau. Une présentation flexible Oracle JavaScript Extension Toolkit (JET) comporte des éléments enfant que vous pouvez organiser dans n'importe quel sens. Lorsque la taille de l'écran change, ces éléments s'ajustent et se développent pour remplir l'espace inutilisé ou réduire afin d'éviter le débordement des éléments parent ou enfant dans la présentation. Vous pouvez utiliser les classes de disposition oj-flex et oj-flex-item d'Oracle JET pour créer des conteneurs réactifs afin de concevoir une mise en page réactive. Les classes de style Oracle JET oj-panel et oj-panel-bg ajoutent des bordures et des couleurs aux conteneurs. Vous pouvez utiliser ces classes de style pour faciliter la visualisation de la présentation et les supprimer dans l'application finale.

L'application Web que vous allez créer dans ce tutoriel a une structure de mise en page avec un conteneur parent principal entourant un deuxième conteneur parent et un conteneur enfant, le conteneur Activités. Le deuxième conteneur parent contient deux conteneurs enfant : les conteneurs Articles d'activité et Détails article.

Plan de présentation de la page de présentation multi-écran

Description de l'illustration Layout-plan.png

Un conteneur parent contient des conteneurs enfant. Toutefois, un conteneur enfant peut également être un conteneur parent s'il contient un conteneur enfant, par exemple, le conteneur parent 2 ci-dessus.

Dans l'illustration suivante de la mise en page que vous allez créer, un élément div principal contient le conteneur parent 1. Le conteneur parent 1 s'enroule autour du conteneur enfant 1 et du conteneur parent 2. Le conteneur parent 2 contient deux conteneurs enfant, le conteneur enfant 2 et le conteneur enfant 3.

Disposition réactive avec conteneurs parent et enfant

Description de l'illustration réactive-layout-containers.png

Objectifs

Dans ce tutoriel, vous allez ajouter des conteneurs et des panneaux pour convertir une mise en page en mise en page réactive dans une application Web Oracle JET à l'aide de classes de style et de disposition Oracle JET.

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
Navigateur Web Google Chrome installé et défini comme navigateur Web par défaut
Accès au cookbook Oracle JET pour les développeurs
(Option 1) Fin du parcours d'apprentissage précédent dans cette série : Develop a Web Application in Oracle JavaScript Extension Toolkit
(Option 2) Si vous n'avez pas terminé le parcours de formation précédent dans cette série : jet_web_application_temp.zip téléchargé

Tâche 1 : téléchargement de l'application de démarrage

Ignorez cette tâche si vous continuez à travailler dans une application que vous avez créée dans le parcours de formation précédent.

Renommez jet_web_application_temp.zip en JET_Web_Application.zip. Extrayez le contenu dans le dossier JET_Web_Application.
Dans la fenêtre de terminal, vérifiez que vous avez installé la dernière version d'Oracle JET. Si vous ne l'avez pas fait, mettez à jour votre version d'Oracle JET.
```
$ npm list -g @oracle/ojet-cli
```
```
$ npm install -g @oracle/ojet-cli
```
Accédez au dossier JET_Web_Application et restaurez l'application Oracle JET.
```
$ ojet restore
```
L'application est prête à être utilisée.

Tâche 2 : Ajouter des conteneurs d'activités

Modifiez la présentation de l'application Web Oracle JET pour ajouter une disposition de zone flexible. Pour créer la présentation flexible, ajoutez une classe Oracle JET oj-flex à l'élément div parent et une classe oj-flex-item à l'élément div enfant. Le conteneur parent 1 est le conteneur parent qui contient tous les autres conteneurs. Le conteneur enfant 1 est le premier conteneur enfant et contient la liste Activités.

Le conteneur parent 1 et le conteneur enfant 1 forment les conteneurs d'activités

Description de l'illustration activités-containers.png

Ouvrez le Cookbook Oracle JET, cliquez sur Présentation et navigation dans la barre de menus et sélectionnez le composant Présentation flexible. Dans la barre d'outils, cliquez sur Document d'API, puis sélectionnez Flex.
Dans la documentation de l'API Flex Layout, faites défiler l'affichage jusqu'au tableau décrivant les classes de disposition Oracle JET et lisez les informations relatives à la classe oj-flex.
Accédez au répertoire JET_Web_Application/src/ts/views et ouvrez le fichier dashboard.html dans un éditeur.

Recherchez l'élément d'en-tête Informations sur le produit h1 et, en dessous, ajoutez un élément div externe avec la valeur d'attribut id parentContainer1 ainsi que la classe de conteneur Oracle JET. Cet élément div contient tous les autres conteneurs. Ajoutez une balise </div> de fermeture au-dessus de la dernière balise </div> de fermeture à la fin du fichier.

<div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <!-- Parent Container 1 contains all the panels in the app -->
  <div id="parentContainer1" class="oj-flex oj-flex-init">
    <div id="activitiesContainer">
      <h3 id="activitiesHeader">Activities</h3>
      . . .
      </oj-chart>
    </div>
  </div>
</div>

Recherchez l'élément div où id="activitiesContainer", avant l'en-tête Activités, et ajoutez une classe d'élément de conteneur Oracle JET.

<!-- The Activities container displays the Activities list -->
<div id="activitiesContainer" class="oj-flex-item">
  <h3 id="activitiesHeader">Activities</h3>

Enregistrez le fichier dashboard.html.

Votre code doit ressembler à parent-containers-dashboard-html.txt.

Tâche 3 : Ajouter des conteneurs de détails d'article

Modifiez la présentation multi-écran de l'application Web Oracle JET pour ajouter les conteneurs Détails de l'article. Le conteneur parent 2 contient les deux conteneurs enfant. Le conteneur enfant 2 est laissé vide mais dans les tutoriels suivants, il contiendra la liste des éléments d'activité. Le conteneur enfant 3 contient le graphique Détails de l'article.

Le conteneur parent 2, le conteneur enfant 2 et le conteneur enfant 3 forment ensemble les conteneurs de détails d'article.

Description de l'illustration item-details-containers.png ci-après

Recherchez l'élément div où id="itemDetailsContainer". Au-dessus, ajoutez un élément div externe avec un attribut id avec la valeur parentContainer2, ainsi qu'une classe de conteneur et une classe d'élément de conteneur Oracle JET. Ajoutez une balise </div> de fermeture au-dessus de la </div> de deuxième à dernière fermeture dans le fichier.
```

    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .
        </oj-chart>
      </div>
    </div>
  </div>
</div>
```

Sous l'élément div où id="parentContainer2", ajoutez un élément div vide avec un attribut id avec la valeur activityItemsContainer, ainsi qu'une classe d'élément de conteneur Oracle JET.

<!-- Parent Container 2 surrounds the Activity Items and Item Details child containers -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="activityItemsContainer" class="oj-flex-item">
      </div>
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .

Enfin, ajoutez une classe d'élément de conteneur Oracle JET à l'élément div, où id="itemDetailsContainer".

<!-- Item Details container displays a chart upon selection -->
<div id="itemDetailsContainer" class="oj-flex-item">
  <h3>Item Details</h3>

Enregistrez le fichier dashboard.html.

Le code doit ressembler à containers-dashboard-html.txt.

Tâche 4 : Ajouter des panneaux et la couleur du panneau

Appliquez les classes de style Oracle JET pour ajouter des panneaux et des couleurs de panneau aux conteneurs et aux éléments de conteneur de l'application Web afin de visualiser la présentation.

Recherchez l'élément div où id="parentContainer1", puis ajoutez deux classes de style pour spécifier un panneau avec une bordure et une couleur d'arrière-plan.
```

<div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
```

Recherchez l'élément div où id="activitiesContainer", puis ajoutez deux classes de style pour spécifier un panneau avec une bordure et une couleur d'arrière-plan.

<!-- The border and color for the Activities container -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
  <h3 id="activitiesHeader">Activities</h3>

Recherchez l'élément div où id="parentContainer2", puis ajoutez deux classes de style pour spécifier un panneau avec une bordure et une couleur d'arrière-plan.
```

<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">
```

Recherchez l'élément div où id="itemDetailsContainer", puis ajoutez deux classes de style pour spécifier la couleur du panneau et du panneau.

<!-- The border and color for the Item Details container -->
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30">

Enregistrez le fichier dashboard.html.

Votre code doit ressembler à final-containers-dashboard-html.txt.

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

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 un navigateur Web local où vous pouvez visualiser le contenu du tableau de bord.

Description de l'illustration container-panel.png ci-après
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

Add containers to the Oracle JET web app

F53133-01

February 2022