Créer la vue maître dans une application DOM virtuelle Oracle JET

Introduction

Ce tutoriel explique comment lire les données hiérarchiques maître-détail à partir d'un document JSON (Object Notation) JavaScript local et afficher les données dans un composant List View d'une application DOM virtuelle Oracle JavaScript Extension Toolkit (Oracle JET).

Dans Oracle JET, vous pouvez utiliser l'API Oracle JET pour créer un objet de fournisseur de données. L'objet représente un tableau de données que vous renseignez à partir des objets parent d'une banque de données de document JSON. L'attribut data des éléments HTML personnalisés Oracle JET est lié aux données via une instance d'un objet de fournisseur de données MutableArrayDataProvider que vous créez.

Objectifs

Dans ce tutoriel, vous allez lier plusieurs éléments des objets de données parent dans un document JSON local et renseigner les lignes d'un composant Vue Liste Oracle JET dans le composant Conteneur d'activités avec ces données.

Prérequis

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

Ignorez cette tâche si vous continuez à travailler dans une application 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 répertoire JET-Virtual-DOM-app.

  2. Dans la fenêtre de terminal, accédez au répertoire JET-Virtual-DOM-app et restaurez l'application Oracle JET.

    npm install

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

Tâche 2 : télécharger les images du produit

Ignorez cette tâche si vous avez téléchargé l'application de démarrage dans jet-virtual-dom-app-temp.zip.

  1. Si le traitement batch du serveur d'outils Oracle JET est 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 du serveur.

    Le traitement batch du serveur reconnaît uniquement les révisions que vous apportez aux fichiers d'application existants. Après avoir créé de nouveaux fichiers, vous devez exécuter à nouveau l'application DOM virtuelle.

  2. Téléchargez le fichier product_images.zip dans le répertoire JET-Virtual-DOM-app/src/styles/images.

  3. Extrayez le contenu du fichier ZIP dans un nouveau répertoire product_images du répertoire images.

    Le chemin d'accès au nouveau répertoire est JET-Virtual-DOM-app/src/styles/images/product_images et le répertoire contient les images utilisées par votre application.

Tâche 3 : créer un fournisseur de données de tableau mutable dans le conteneur parent 1

  1. Ouvrez le Cookbook Oracle JET et accédez à la page d'accueil du Cookbook. Cliquez sur Framework, Fournisseur de données, puis Fournisseur de données de tableau mutable. Dans la barre d'outils du livre de recettes, cliquez sur Document API.

  2. Dans la documentation de l'API, reportez-vous à la classe MutableArrayDataProvider. Découvrez comment utiliser l'argument facultatif keyAttributes pour créer une instance d'MutableArrayDataProvider en fonction de l'attribut de clé de l'objet de données transmis.

  3. Si vous ne l'avez pas encore fait dans un parcours pédagogique précédent, téléchargez le fichier store_data.json dans le répertoire JET-Virtual-DOM-app/src/components.

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

  5. En haut du fichier, ajoutez des instructions import pour la classe MutableArrayDataProvider et les données JSON dans le fichier store_data.json.

    import MutableArrayDataProvider = require('ojs/ojmutablearraydataprovider');
import * as storeData from 'text!./store_data.json';

  6. Créez un alias de type Activity.

    type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

  7. Créez une instance activityDataProvider d'MutableArrayDataProvider.

    const activityDataProvider = new MutableArrayDataProvider<Activity['id'], Activity>(
  JSON.parse(storeData),
  {
    keyAttributes: 'id',
  }
);

    La propriété keyAttributes de la classe MutableArrayDataProvider alimente un tableau en fonction de l'attribut id de l'objet parent. L'attribut id est l'attribut clé pour les objets de données parent et enfant dans le document JSON.

  8. Dans la fonction ParentContainer1, ajoutez un attribut data à l'élément ActivityContainer qui transmet l'objet de fournisseur de données au composant Conteneur d'activités à l'aide de props.

    return (
    <div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
        <ActivityContainer data={activityDataProvider} />
        <ParentContainer2 />
    </div>
    );
};

    Votre code doit ressembler à parent-container1-1-tsx.txt.

Tâche 4 : créer le composant Vue Liste du conteneur d'activités

Créez un composant Oracle JET List View dans le composant Activity Container pour afficher plusieurs éléments de données pour chaque ligne de liste de l'objet de fournisseur de données transmis via props à partir du composant ParentContainer1. Pour instancier le contenu des éléments de données de ligne de liste lors de l'exécution, le composant Vue de liste utilise un élément HTML template avec un attribut slot comme espace réservé.

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

  2. Ajoutez les instructions import suivantes pour le composant Oracle JET List View et la classe MutableArrayDataProvider en haut du fichier.

    import 'ojs/ojlistview';
import { ojListView } from 'ojs/ojlistview';
import MutableArrayDataProvider = require('ojs/ojmutablearraydataprovider');

  3. Créez des alias de type Props et Activity.

    type Props = {
  data?: MutableArrayDataProvider<Activity['id'], Activity>;
  value?: string;
};

type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

  4. Recherchez l'élément div avec id="activitiesContainer" et supprimez la classe d'aide oj-sm-only-text-align-end pour empêcher le réalignement du contenu du conteneur d'activités.

  5. Créez la fonction listItemRenderer qui affiche chaque élément de liste et inclut les éléments span et div pour remplir les lignes du composant de vue de liste avec une image d'arrière-plan, un nom et une brève description.

    Définissez également une variable image pour vous assurer que l'application DOM virtuelle peut localiser les images de produit dans le répertoire styles de l'application.

    const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
  let image = item.data.image.replace('css', 'styles');
  return (
    <div class="oj-flex no-wrap">
      <span
        class="demo-thumbnail oj-flex-item"
        style={'background-image:url(' + image + ')'}></span>
      <div class="demo-content oj-flex-item">
        <div>
          <strong>{item.data.name}</strong>
        </div>
        <span class="demo-metadata">{item.data.short_desc}</span>
      </div>
    </div>
  );
};

  6. Sous la fonction listItemRenderer, ajoutez l'alias de type ListViewProps suivant et deux variables pour définir les propriétés de quadrillage et de défilement du composant Vue Liste.

    type ListViewProps = ComponentProps<'oj-list-view'>;
const gridlinesItemVisible: ListViewProps['gridlines'] = { item: 'visible' };
const scrollPolicyOpts: ListViewProps['scrollPolicyOptions'] = { fetchSize: 5 };

  7. Ajoutez props à la définition de fonction ActivityContainer.

    const ActivityContainer = (props: Props) => {

  8. Dans l'instruction return de la fonction ActivityContainer, supprimez l'élément div où id="activitiesItems et la liste qui s'y trouve. Remplacez-les par le composant List View suivant, dans lequel l'objet de fournisseur de données est accessible via props dans l'attribut data de la vue Liste.

    <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
                data={props.data} gridlines={gridlinesItemVisible} selectionMode="single"
                scrollPolicy="loadMoreOnScroll" scrollPolicyOptions={scrollPolicyOpts}>
  </oj-list-view>

  9. Dans le composant Vue Liste, ajoutez un élément template avec un attribut slot pour afficher chaque élément de la liste.

    . . .
    <template slot="itemTemplate" render={listItemRenderer}></template>
</oj-list-view>

    Enregistrez le fichier. Votre code doit ressembler à activity-container-tsx-1.txt.

Tâche 5 : exécuter l'application et déboguer la feuille de style en cascade de l'application

  1. Dans la fenêtre de terminal, accédez au répertoire JET_Virtual_DOM_app et exécutez l'application.

    npx ojet serve

    L'outil Oracle JET exécute votre application DOM virtuelle dans votre navigateur Web local, où vous pouvez visualiser les modifications apportées au composant Conteneur d'activités. Les images affichées à gauche des noms d'activité et des descriptions courtes ne sont que partiellement affichées car elles sont trop volumineuses.

    Si vous redimensionnez votre navigateur et que vous ne voyez toujours pas de page similaire à cette capture d'écran, vérifiez que vous avez extrait les images d'application dans le répertoire images/product_images.

    Les images miniatures ne sont affichées que partiellement

  2. Dans votre navigateur Google Chrome, cliquez avec le bouton droit de la souris sur l'image partielle de l'activité Football et sélectionnez Inspecter. Le navigateur affiche les outils de développement Chrome (DevTools) où vous pouvez inspecter la source de page HTML.

  3. Dans le panneau Eléments, élément span où class="demo-thumbnail oj-flex-item" doit être sélectionné. Dans le panneau Styles, localisez le style element.style background-image en surbrillance. Cliquez avec le bouton droit de la souris sur l'URL de l'image jrsoccerball.jpg et sélectionnez Afficher dans le panneau Sources.

    Inspecter la source de l'image dans le panneau Sources

  4. Le panneau Sources de Chrome DevTools indique que l'image est de 300 x 300 pixels et que, par conséquent, la taille est trop grande pour être affichée dans la vue de liste. Pour afficher une image de taille miniature à partir d'une image de taille réelle, vous pouvez définir une classe de style CSS (Cascading Style Sheets).

    Afficher les propriétés de l'image dans le panneau Sources

  5. Fermez la fenêtre Chrome DevTools et revenez à l'application dans le navigateur.

Tâche 6 : corriger le CSS et afficher les modifications de la liste des activités

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

  2. Définissez les propriétés du sélecteur de classe .demo-thumbnail. Dans la liste des propriétés, définissez une propriété background-repeat sur no-repeat pour afficher l'image une seule fois.

    .demo-thumbnail {
  border-radius: 5px;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  margin-right: 10px;
}

    Dans la fonction listItemRenderer du fichier ActivityContainer.tsx, l'élément span référence le sélecteur de classe pour formater les images de liste d'activités sous forme de miniatures en définissant le style CSS demo-thumbnail sur l'attribut class.

  3. Enregistrez et fermez le fichier app.css. Votre fichier doit ressembler à app-css.txt.

  4. Retournez dans le navigateur et consultez les mises à jour.

    L'application affiche la liste Activités avec des images miniatures.

    Les images du conteneur Activité s'affichent correctement.

  5. Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application DOM virtuelle en cours d'exécution.

  6. 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 Vues maître-détail dans Oracle JET.

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.