Ajouter des conteneurs à l'application Oracle JET Virtual DOM

Introduction

Une mise en page réactive peut évoluer de manière flexible pour s'adapter à une large gamme de tailles d'écran, des petits téléphones aux moniteurs de bureau. Une présentation flexible Oracle JavaScript Extension Toolkit (Oracle JET) comporte des éléments enfant que vous pouvez organiser dans n'importe quelle direction. Lorsque la taille de l'écran change, ces éléments s'ajustent pour remplir l'espace inutilisé ou diminuer pour éviter le débordement des éléments parent ou enfant dans la mise en page. Pour concevoir une mise en page réactive pour l'application DOM virtuelle que vous avez composée dans le parcours de formation précédent, utilisez les classes de mise en page Oracle JET oj-flex et oj-flex-item pour créer des conteneurs réactifs. La mise en page modifiée de votre application DOM virtuelle ressemblera à ceci.

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

Objectifs

Dans ce tutoriel, vous allez ajouter des classes de style de présentation flexible Oracle JET à votre application DOM virtuelle pour convertir sa mise en page actuelle en mise en page réactive.

Prérequis

Tâche 1 : télécharger l'application Starter Virtual DOM

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

  1. Renommez jet_virtual_dom_app_temp.zip en JET-Virtual-DOM-app.zip. Extrayez le contenu dans le dossier JET-Virtual-DOM-app.

  2. Accédez au dossier JET-Virtual-DOM-app et restaurez l'application DOM virtuelle Oracle JET.

    npm install

    Votre application DOM virtuelle est prête à être utilisée.

Tâche 2 : ajouter des classes de style au conteneur parent 1 et au conteneur d'activité

Ajoutez des classes de style de présentation flexible Oracle JET aux composants Conteneur parent 1 et Conteneur activité pour créer une présentation flexible.

  1. Ouvrez le livre de recettes Oracle JET, cliquez sur Disposition et navigation dans la barre de menus, puis sélectionnez le composant Disposition flexible. Dans la barre d'outils, cliquez sur Document d'API, puis sélectionnez Flex.

  2. Dans la documentation de l'API de présentation flexible, faites défiler la page jusqu'au tableau décrivant les classes de présentation flexible et lisez les informations sur la classe oj-flex.

  3. Accédez au répertoire JET-Virtual-DOM-app/src/components et ouvrez le fichier ParentContainer1.tsx dans un éditeur.

  4. Recherchez l'élément div où id="parentContainer1". Ajoutez des classes de disposition flexible oj-flex oj-flex-init à l'élément.

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

  5. Accédez au répertoire JET-Virtual-DOM-app/src/components/Activity et ouvrez ActivityContainer.tsx dans un éditeur.

  6. Recherchez l'élément div où id="activitiesContainer". Ajoutez une classe de présentation flexible d'article conteneur Oracle JET oj-flex-item.

    <div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">

  7. Enregistrez et fermez les fichiers ouverts.

Tâche 3 : ajouter des classes de style au conteneur parent 2 et à ses conteneurs enfant

Ajoutez des classes de style de présentation flexible Oracle JET au conteneur parent 2, au conteneur Détails article et aux composants Conteneur activité pour créer une présentation flexible.

  1. Accédez au répertoire JET-Virtual-DOM-app/src/components et ouvrez le fichier ParentContainer2.tsx dans un éditeur.

  2. Recherchez l'élément div où id="parentContainer2". Ajoutez des classes de disposition flexible oj-flex oj-flex-item à l'élément.

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

  3. Accédez au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez ActivityItemContainer.tsx dans un éditeur.

  4. Recherchez l'élément div où id="activityItemsContainer". Ajoutez une classe de présentation flexible d'article conteneur Oracle JET oj-flex-item à l'élément.

    <div id="activityItemsContainer" class="oj-flex-item oj-bg-success-20">

  5. Accédez au répertoire JET-Virtual-DOM-app/src/components/ItemDetail et ouvrez ItemDetailContainer.tsx dans un éditeur.

  6. Recherchez l'élément div où id="itemDetailsContainer". Ajoutez une classe de présentation flexible d'article conteneur Oracle JET oj-flex-item.

    <div id="itemDetailsContainer" class="oj-flex-item oj-bg-neutral-30">

  7. Enregistrez et fermez les fichiers ouverts.

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

  1. Dans la fenêtre de terminal, exécutez l'application DOM virtuelle à partir du répertoire JET-Virtual-DOM-app.

    npx ojet serve

    Les outils Oracle JET exécutent votre application DOM virtuelle dans votre navigateur Web local. Dans la fenêtre du navigateur, la disposition de l'application DOM virtuelle a changé. Les composants sont disposés horizontalement dans la fenêtre, et le redimensionnement de la largeur de la fenêtre entraîne l'ajustement des récipients pour maintenir leurs positions respectives et l'affichage du contenu.

    Mise en page adaptative

  2. Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application DOM virtuelle 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.

Etape suivante

Passez au tutoriel suivant de ce module.

Ce tutoriel fait partie du module Responsive Design.

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