Ajouter des conteneurs à l'application DOM virtuelle Oracle JET

Introduction

Une mise en page réactive peut s'adapter à une grande variété de tailles d'écran, des petits téléphones aux écrans de bureau. Une disposition 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 eux-mêmes en augmentant pour remplir l'espace inutilisé ou en diminuant pour éviter le débordement des éléments parent ou enfant dans la disposition. 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 mise en page pour la page multi-écran

Description de l'illustration layout_plan.png

Objectifs

Dans ce tutoriel, vous allez ajouter des classes de style de mise en page flexible Oracle JET à votre application DOM virtuelle pour convertir sa mise en page en cours en mise en page multi-écran.

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 du dossier JET-Virtual-DOM-app.

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

    npx @oracle/ojet-cli restore

    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 mise en page flexible Oracle JET aux composants Conteneur parent 1 et Conteneur d'activité pour créer une mise en page flexible.

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

  2. Dans la documentation de l'API Flex Layout, faites défiler l'affichage jusqu'au tableau qui décrit les classes de disposition flexible et consultez 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'élément de 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 mise en page flexible Oracle JET au conteneur parent 2, au conteneur de détails d'article et aux composants du conteneur d'activité pour créer une mise en page 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'élément de 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'élément de 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 DOM virtuelle

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

    npx @oracle/ojet-cli 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 à travers la fenêtre et le redimensionnement de la largeur de la fenêtre entraîne le réglage des conteneurs pour maintenir leurs positions respectives et leurs affichages de contenu.

    La mise en page multi-écran

    Description de l'illustration responsive_layout.png

  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 travail par lots d'outils Oracle JET.

Etape suivante

Pour passer au tutoriel suivant de ce parcours de formation, cliquez ici.

Ressources de formation supplémentaires

Explorez d'autres exercices sur docs.oracle.com/learn ou accédez à davantage de contenu de formation gratuit sur le canal Oracle Learning YouTube. En outre, accédez à education.oracle.com/learning-explorer pour devenir explorateur Oracle Learning.

Pour consulter la documentation du produit, consultez Oracle Help Center.