Créer la vue détaillée dans une application DOM virtuelle Oracle JET

Introduction

Les composants Oracle JavaScript Extension Toolkit (Oracle JET) préservent la relation hiérarchique entre les objets de données maître et de détail, telle que définie par la source de données. Dans le tutoriel précédent, vous avez créé un objet de fournisseur de données à l'aide d'une instance de la classe MutableArrayDataProvider. A l'aide de props, vous avez transmis l'objet de fournisseur de données au composant Vue Liste dans le composant ActivityContainer et affiché les éléments de données. A présent, en utilisant la même banque de données JSON, vous allez créer la vue détaillée de votre application en renseignant les composants ActivityItemContainer et ItemDetailContainer, respectivement, avec les éléments d'activité d'une activité donnée et les détails d'élément spécifique d'un élément d'activité en les transmettant à partir d'un conteneur parent à l'aide de props.

Objectifs

Dans ce tutoriel, vous allez lire les données hiérarchiques maître-détail à partir d'un document JSON local et afficher la vue détaillée dans une application DOM virtuelle Oracle JET. Les données lieront plusieurs éléments des objets de données enfant à partir d'un document JSON local et alimenteront les lignes d'un composant Vue de liste Oracle JET dans le composant ActivityItemContainer avec ces données, ainsi que les composants Avatar et Graphique Oracle JET dans le composant ItemDetailContainer.

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET Virtual DOM incluant une installation de Node.js
Achèvement du tutoriel précédent dans ce parcours de formation, Créer la vue maître dans une application Oracle JET Virtual DOM

Tâche 1 : création d'un fournisseur de données dans le conteneur parent 2

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

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";

Créez des alias de type Item et ActivityItem.

 type Item = {
   id: number;
   name: string;
   short_desc?: string;
   price?: number;
   quantity?: number;
   quantity_shipped?: number;
   quantity_instock?: number;
   activity_id?: number;
   image?: string;
 };

 type ActivityItem = {
   id: number;
   name: string;
   items: Array<Item>;
   short_desc: string;
   image: string;
 };

Ajoutez une instance activityItemDP d'MutableArrayDataProvider, ainsi que deux variables utilisées pour fournir au fournisseur de données les éléments de l'activité Baseball de la source de données JSON.

 const activityData = JSON.parse(storeData);
 let activityItemsArray = activityData[0].items

 // Create data provider instance for the array of activity items for the Baseball activity
 const activityItemDP = new MutableArrayDataProvider<ActivityItem["id"], ActivityItem>(activityItemsArray, {
   keyAttributes: "id",
 });

Dans la fonction ParentContainer2, ajoutez un attribut data à l'élément ActivityItemContainer pour transmettre l'objet de fournisseur de données au composant ActivityItemContainer à l'aide de props.
```
 <ActivityItemContainer data={activityItemDP} />
```
Enregistrez le fichier. Votre code doit ressembler à parent-container2-1-tsx.txt.

Tâche 2 : créer le composant Vue Liste du conteneur d'éléments d'activité

Accédez au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ActivityItemContainer.tsx dans un éditeur.
En haut du fichier, supprimez les instructions import pour le module ResponsiveUtils et les hooks useRef, useState et useEffect. Supprimez également la variable sm_md_view.

Dans la fonction ActivityItemContainer, enlevez le code qui utilise des points d'accrochage et un état et qui permet l'affichage conditionnel du contenu dans l'instruction return. Votre fonction doit ressembler au code suivant.

 const ActivityItemContainer = () => {

   return (
     <div
       id="activityItemsContainer"
       class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
       <div id="container" class="item-display no-wrap">
         <h3>Activity Items</h3>
         <ul>
           <li class="li-item">Louisville Slugger Bat</li>
           . . .
         </ul>
       </div>
     </div>
   );
 };

Supprimez l'élément ul de l'instruction return et, dans l'élément div où id="container", enlevez l'attribut class. La fonction ActivityItemContainer doit ressembler au code suivant.

 const ActivityItemContainer = () => {

   return (
     <div
       id="activityItemsContainer"
       class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
       <div id="container">
         <h3>Activity Items</h3>
       </div>
     </div>
   );
 };

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");

Ajoutez des alias de type Props, ActivityItem et Item sous le bloc d'instructions import.

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

 type Item = {
   id: number;
   name: string;
   short_desc?: string;
   price?: number;
   quantity?: number;
   quantity_shipped?: number;
   quantity_instock?: number;
   activity_id?: number;
   image?: string;
 };

 type ActivityItem = {
   id: number;
   name: string;
   items: Array<Item>;
   short_desc: string;
   image: string;
 };

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.

 const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
   const 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>
   );
 };

Sous la fonction listItemRenderer, ajoutez un alias de type ListViewProps 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 };

Ajoutez props à la définition de fonction ActivityItemContainer.
```
 const ActivityItemContainer = (props: Props) => {
```

Dans l'instruction return de la fonction ActivityItemContainer, ajoutez un composant Vue de liste Oracle JET, dans lequel l'objet de fournisseur de données transmis à partir de ParentContainer2 est accessible via props dans l'attribut data de la vue de liste.

return (
  <div
    id="activityItemsContainer"
    class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
    <div id="container">
      <h3>Activity Items</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>
    </div>
  </div>
 );

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-item-container-1-tsx.txt.

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

Dans la fenêtre de terminal, accédez au répertoire JET_Virtual_DOM_app et exécutez l'application.
```
 npx ojet serve
```
L'application s'exécute dans le navigateur Web et la liste Eléments d'activité affiche les éléments d'activité Baseball avec leurs courtes descriptions et images miniatures.
Laissez la fenêtre de terminal et le navigateur qui affiche votre application ouverts.

Tâche 4 : créer le graphique de détails de l'élément et les composants d'avatar

Transmettez les détails de l'élément d'activité SureCatch Baseball Glove du composant ParentContainer2 au composant ItemDetailContainer via props, en liant les données aux composants Oracle JET Chart et Avatar, ainsi qu'à plusieurs champs de texte.

Accédez au répertoire JET-Virtual-DOM-app/src/components et ouvrez le fichier ParentContainer2.tsx dans un éditeur.
Sous l'instance activityItemDP, ajoutez une variable specificItem afin de stocker les données de détails de l'élément d'activité SureCatch Baseball Glove.
```
 // Create an object variable holding the item details for the SureCatch Baseball Glove 
 const specificItem: Item = activityData[0].items[0]
```
Ajoutez un attribut item à l'élément ItemDetailContainer pour transmettre les détails de l'élément au composant enfant via props.
```
 <ItemDetailContainer item={specificItem} />
```
Enregistrez le fichier. Votre code doit ressembler à parent-container2-2-tsx.txt.
Accédez au répertoire JET-Virtual-DOM-app/src/components/ItemDetailContainer et ouvrez le fichier ItemDetailContainer.tsx dans un éditeur.

Enlevez ces instructions import du haut du fichier.

 import { useState, useCallback } from "preact/hooks";
 import "ojs/ojlabel";
 import "ojs/ojselectsingle";
 import { ojSelectSingle } from "ojs/ojselectsingle";
 import * as storeData from "text!../store_data.json";
 import "ojs/ojlistview";
 import { ojListView } from "ojs/ojlistview";
 import "ojs/ojlistitemlayout";

Ajoutez une instruction import pour le module ojavatar.
```
 import "ojs/ojavatar";
```
Supprimez l'alias de type ChartType, les variables chartTypeData et chartData, ainsi que les instances de fournisseur de données chartTypesDP et chartDataProvider.

Ajoutez des alias de type Props et Item.

 type Props = {
   item?: Item;
 };

 type Item = {
   id: number;
   name: string;
   short_desc?: string;
   price?: number;
   quantity?: number;
   quantity_shipped?: number;
   quantity_instock?: number;
   activity_id?: number;
   image?: string;
 };

Dans la fonction ItemDetailContainer, supprimez les lignes de code suivantes.

 const [val, setVal] = useState("bar" as ChartProps['type']);

 const valChangeHandler = useCallback(
   (event: ojSelectSingle.valueChanged<ChartType['value'], ChartType>) => {
     setVal(event.detail.value as ChartProps['type']);
   },
   [val, setVal]
 );

Remplacez la variable de modèle chartItem.

const chartItem = (
  item: ojChart.ItemTemplateContext<ChartItem["id"], ChartItem>
) => {
  return (
    <oj-chart-item
      value={item.data.value}
      groupId={[0]}
      seriesId={item.data.series}
    ></oj-chart-item>
  );
};

Ajoutez props à la définition de fonction ItemDetailContainer.
```
const ItemDetailContainer = (props: Props) => {
```

Ajoutez une instance pieDataProvider d'MutableArrayDataProvider avant l'instruction return.

const pieDataProvider: MutableArrayDataProvider<ChartItem["id"], ChartItem> = new MutableArrayDataProvider(
  [
    { series: "Quantity in Stock", value: props.item.quantity_instock },
    { series: "Quantity shipped", value: props.item.quantity_shipped },
  ],
  { keyAttributes: "id" }
);

Dans l'instruction return, sous l'en-tête h3 de Détails de l'élément, supprimez les éléments oj-label et oj-select-single. Remplacez ce code par une règle horizontale, un élément oj-avatar et des éléments div pour afficher les détails de l'élément lié aux données.

<hr class="hr-margin" />
<oj-avatar role="img" size="lg" aria-label={"product image for" + props.item.name} 
    src={props.item?.image?.replace("css", "styles")} class="float-right"></oj-avatar>
<div id="itemName" class="data-name">{props.item.name}</div>
<div id="itemDesc" class="data-desc">{props.item.short_desc}</div>
<div id="itemPrice">{"Price: " + props.item.price + " each"}</div>
<div id="itemId">{"Item Id: " + props.item.id}</div>

Remplacez les attributs id, type et data dans l'élément oj-chart. Ajoutez également un élément div entourant l'élément oj-chart.

<div>
  <oj-chart id="pieChart" type="pie" data={pieDataProvider} animationOnDisplay="auto"
            animationOnDataChange="auto" hoverBehavior="dim" class="chartStyle">
    <template slot="itemTemplate" render={chartItem}></template>
    </oj-chart>
   </div>
  </div>
 );
};

Enregistrez le fichier. Votre code doit ressembler à item-detail-container-tsx.txt.

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

Ajoutez les classes de style suivantes au fichier qui sont utilisées pour formater les détails de l'élément.

.hr-margin {
  margin-top: 12px;
}

.data-name {
  font-size: 20px;
  font-weight: bolder;
}

.data-desc {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

Enregistrez le fichier. Votre code doit ressembler à app.css.

Tâche 5 : afficher les modifications apportées à l'application

Revenez au navigateur pour voir les modifications dans votre application DOM virtuelle.

Dans le conteneur de détails d'article, les champs de texte liés aux données et les composants Avatar et Graphique Oracle JET affichent les données de l'élément SureCatch Baseball Glove. Toutefois, les listes du conteneur d'éléments d'activité et du conteneur d'activités ne répondent pas à la sélection. Dans le tutoriel suivant, vous allez ajouter une fonctionnalité de sélection.
Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application 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.

Etape suivante

Passez au tutoriel suivant de ce module.

Ce tutoriel fait partie du module Vues maître-détail dans Oracle JET.

Créer la vue maître dans une application Oracle JET Virtual DOM
Créer la vue détaillée dans une application Oracle JET Virtual DOM
Gérer les événements de sélection dans une application Oracle JET Virtual DOM

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.

Informations relatives au titre et au copyright

Create the detail view in an Oracle JET virtual DOM app

F72839-02

Oracle et/ou ses affiliés.