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

Introduction

Les composants Oracle JavaScript Extension Toolkit (Oracle JET) conservent la relation hiérarchique des objets de données maître et détail, telle que définie par la source de données. Dans viewModel pour l'application Web 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 remplissez à partir des objets de données enfant d'une banque de données de document JavaScript Object Notation (JSON). Le fournisseur de données Oracle JET extrait les objets de données enfant en fonction de l'attribut de clé id de l'objet de données parent en cours. Dans la vue de l'application Web Oracle JET, l'attribut data du composant Vue Liste Oracle JET est lié au fournisseur de données via une observable Knockout. Le Knockout observable est également déclaré dans le code source viewModel de l'application. Ce code renseigne l'élément observable en tant qu'instance du fournisseur de données de liste détaillée.

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 Web Oracle JET. Vous apprendrez à définir des éléments de liaison de données pour les objets de données enfant afin d'alimenter un composant Oracle JET List View, plusieurs composants Oracle JET Input Text et un composant Oracle JET Chart.

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
Réalisation du tutoriel précédent dans ce parcours de formation, afin que vous ayez créé le dossier JET_Web_Application

Tâche 1 : liaison de données à la liste détaillée des éléments d'activité dans la vue

Remplacez la liste Eléments d'activité liée aux données statiques par un composant Vue Liste Oracle JET lié à plusieurs éléments de données des objets enfant Eléments d'activité.

Accédez au répertoire JET_Web_Application/src/ts/views et ouvrez le fichier dashboard.html dans un éditeur.

Recherchez l'élément div où id="container", puis supprimez-le et l'élément personnalisé oj-module qu'il contient.

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
    <div id="container">
      <oj-module config="[[moduleConfig]]"></oj-module>
    </div>
  </div>

<!-- Delete the div element with id="container" so that your code is similar to the following: -->

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">

  </div>
  . . . 

Dans l'élément div où id="activityItemsContainer", ajoutez un élément d'en-tête h3 pour la liste de détails Eléments d'activité.

<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <h3 id="itemsListHeader">Activity Items</h3>
</div>

Après la balise de clôture de l'élément h3 que vous avez créé, ajoutez un élément HTML personnalisé oj-list-view pour afficher la liste de détails des éléments d'activité et un élément template avec un attribut slot à appliquer au contenu de la liste de détails.
```
 <h3 id="itemsListHeader">Activity Items</h3>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
     <template slot="itemTemplate">

     </template>
   </oj-list-view>
```
Le composant Vue Liste Oracle JET utilisé dans un élément HTML template incorporé avec un attribut slot en tant qu'espace réservé instancie le contenu de la liste Détails des éléments d'activité lors de l'exécution.
Dans l'élément template que vous avez créé, ajoutez trois éléments div avec du code pour lier l'image et les éléments de données de nom pour chaque objet enfant Eléments d'activité.
```
<template slot="itemTemplate">
  <div class="oj-flex no-wrap">
    <span class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
    <div class="demo-content oj-flex-item">
      <div>
        <strong>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
        </strong>
      </div>
    </div>
  </div>
</template>
```
Le code $current.data.image et $current.data.name lie les données et un élément HTML template affiche une image et un nom d'élément d'activité pour la liste de détails Eléments d'activité. Le préfixe $current représente l'objet enfant en cours que le fournisseur de données pour le composant Vue Liste Oracle JET transmet au modèle.
Enregistrez le fichier dashboard.html et laissez-le ouvert dans votre éditeur.

Votre fichier doit ressembler à detail-list-task1-dashboard-html.txt.

Tâche 2 : création des objets enfant des éléments d'activité dans ViewModel

Remplacez le modèle en ligne oj-module que vous avez créé dans le parcours de formation précédent pour afficher la liste des éléments d'activité avec un appel de document JSON afin de lire les objets enfant des éléments d'activité à partir d'un document JSON local. Dans itemsDataProvider, créez une instance d'une classe Oracle JET MutableArrayDataProvider qui représente un tableau d'objets enfant défini par le document JSON. Liez ensuite l'instance itemsArray à une instance observable itemsDataProvider. Le composant Vue Liste Oracle JET de la vue référence cet élément observable sur son attribut data pour afficher la liste détaillée des éléments d'activité.

Accédez au répertoire JET_Web_Application/src/ts/viewModels et ouvrez le fichier dashboard.ts dans un éditeur.

En haut du fichier dashboard.ts, après la déclaration de type Activity, déclarez le type Item suivant.

type Activity = {
   id: number;
};

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

Supprimez le code de la déclaration de const lg_xl_view jusqu'à ce qu'il n'inclue pas la déclaration de this.chartTypes. Le bloc de code se termine par une ligne de commentaire qui indique End of oj-module code. Un appel de document JSON remplacera les données statiques et le code de modèle en ligne.

Votre fichier doit ressembler à detail-list-task2a-dashboard-ts.txt.
A partir des imports de module en haut de dashboard.ts, supprimez les instructions import HtmlUtils, ResponsiveUtils, ResponsiveKnockoutUtils et ojmodule-element non utilisées.

Ajoutez une instruction import pour le module ojs/ojavatar à la liste d'import. Le module ojavatar prend en charge la vue dans la section suivante de ce tutoriel.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import "ojs/ojavatar";

Après la définition this.activityDataProvider, dans la fonction constructor, ajoutez des définitions pour activitiesArray et itemsArray. Déclarez ensuite this.itemsDataProvider en tant qu'instance de MutableArrayDataProvider. Cette opération analyse les données du magasin et rend les objets enfant du premier objet parent Activité disponibles dans le composant Vue Liste Oracle JET. Dans le tutoriel suivant, vous allez définir l'objet Activité de façon dynamique à l'aide de gestionnaires d'événements.

. . . 
let activitiesArray = JSON.parse(storeData);
let itemsArray = activitiesArray[0].items;

this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
  itemsArray,
  { keyAttributes: "id" }
  );

} // closing bracket of constructor function
. . . 

Enlevez ensuite les annotations de type non utilisées pour large et moduleConfig, puis ajoutez des annotations de type pour itemsArray et itemsDataProvider.

class DashboardViewModel {
    chartTypes: Array<Object>;
    chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
    chartData: Array<Object>;
    chartDataProvider: MutableArrayDataProvider<string, {}>;
    activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
    val: ko.Observable<string>;
    itemsArray: Array<Object>;
    itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

Votre fichier doit ressembler à detail-list-task2b-dashboard-ts.txt.

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

La commande ojet serve permet d'apporter des modifications à votre code d'application qui sont immédiatement reflétées dans le navigateur Web.

Dans la fenêtre de terminal, accédez au répertoire JET_Web_Application et exécutez l'application.
```
$ ojet serve
```
Dans l'onglet Tableau de bord, le navigateur Web affiche la liste des détails liés aux données avec l'en-tête Eléments d'activité.

Description de l'image formatted_master_detail_list.png
Laissez la fenêtre de terminal et le navigateur qui affiche votre application Web ouverts.

Tâche 4 : Détails de l'élément de liaison de données et graphique à secteurs dans la vue

Remplacez les graphiques à secteurs et à barres Détails article par les éléments suivants :

Composant Avatar Oracle JET lié à l'image d'article d'un objet enfant Eléments d'activité
Plusieurs composants Champ de texte Oracle JET liés aux éléments de données de cet objet enfant Eléments d'activité
Composant de graphique à secteurs lié aux éléments de données de graphique du même objet enfant Eléments d'activité

Dans le fichier dashboard.html, dans l'élément div où id="itemDetailsContainer", recherchez l'en-tête Détails de l'élément. Sous l'en-tête, ajoutez une règle horizontale suivie d'un élément HTML personnalisé oj-avatar lié à l'élément de données d'image pour un objet enfant Eléments d'activité.
```
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
  <h3>Item Details</h3>
  <hr class="hr-margin" />
  <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
    :src="[[itemData().image]]" class="float-right">
  </oj-avatar>
```
L'observable itemData remplit le composant Avatar Oracle JET à l'aide d'une instance de fournisseur de données que vous créez dans l'application viewModel. La fonction itemData().image est la notation observable Knockout permettant de lire la valeur en cours d'un élément de données. L'élément de données est identifié par la propriété image de l'objet enfant Eléments d'activité.
Dans dashboard.html, sous la balise de fermeture de l'élément oj-avatar que vous avez créé, supprimez l'élément HTML personnalisé oj-label for="basicSelect" et l'élément oj-select-single.
Sous la balise de clôture de l'élément oj-avatar que vous avez créé, ajoutez quatre éléments div avec des éléments HTML personnalisés oj-bind-text liés aux éléments de données de nom, de description abrégée, de prix et d'ID d'un objet enfant Eléments d'activité.
```
. . . 
</oj-avatar>
  <div id="itemName" class="data-name">
    <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
  </div>
  <div id="itemDesc" class="data-desc">
    <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
  </div>
  <div id="itemPrice">
    <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
  </div>
  <div id="itemId">
    <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
  </div>
. . . 
```
Les observables itemData alimentent le composant de liaison de texte Oracle JET à l'aide d'un fournisseur de données que vous créez dans l'application viewModel. La fonction itemData().<prop_name> lit la valeur en cours de l'élément de données nommé. Les éléments de données sont identifiés par les propriétés name, short_desc, price et id de l'objet enfant Eléments d'activité.

Accédez au répertoire JET_Web_Application/src/css et ouvrez le fichier app.css pour ajouter les définitions de style suivantes.

.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;
}

Votre fichier doit ressembler à app-css-final.txt.

Sous les éléments div que vous avez créés, supprimez l'élément HTML personnalisé oj-chart id="barChart".
Après la balise </div> de fermeture de l'élément div id="itemId", ajoutez un nouvel élément div et un élément HTML personnalisé oj-chart liés à une série de graphiques à secteurs pour un objet enfant Eléments d'activité.
```
. . . 
<div id="itemId">
  <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
</div>
<div>
  <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
    animation-on-data-change="auto"
    hover-behavior="dim" legend.position="bottom" class="chartStyle">
  </oj-chart>
</div>
. . . 
```
L'élément observable pieSeriesValue remplit le composant Graphique à secteurs Oracle JET à l'aide d'un tableau de données que vous créez dans l'application viewModel.
Enregistrez le fichier dashboard.html.

Votre fichier doit ressembler à final-detail-list-dashboard-html.txt.

Tâche 5 : Définition d'observables pour les détails d'article et les composants de graphique à secteurs dans ViewModel

Obtenir un élément de données à partir de l'objet enfant Eléments d'activité et remplir les objets observables pour les composants de vue de liaison de données. Dans la vue, l'attribut value des différents composants Détails de l'article référence le paramètre observable itemData. L'attribut series du composant Graphique à secteurs référence le lien observable pieSeriesValue aux données du graphique à partir du même élément de données.

Dans le fichier dashboard.ts, supprimez le bloc de code qui commence par this.val et se termine par this.chartTypesDP. Supprimez également les annotations de type non utilisées pour les variables supprimées. Votre liste d'annotations de type et le début de votre fonction constructor() doivent ressembler à l'exemple suivant.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

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

Ajoutez les annotations de type itemData et pieSeriesValue à la classe DashboardViewModel.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
  itemData: ko.Observable<any>;
  pieSeriesValue: ko.ObservableArray;

  constructor() {
. . . 

Après l'instruction this.itemsDataProvider, définissez itemData observable avec une référence au premier objet parent Activité et au premier objet enfant Elément d'activité associé à cette activité dans le document JSON.

  this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
    itemsArray,
    { keyAttributes: "id" }
  );

  this.itemData = ko.observable(''); 
  this.itemData(activitiesArray[0].items[0]);

}   // End of constructor function

Enfin, sous la déclaration observable itemData, définissez this.pieSeriesValue comme observable.

this.itemData = ko.observable(''); 
this.itemData(activitiesArray[0].items[0]);

this.pieSeriesValue = ko.observableArray([]);

let pieSeries = [
  { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
  { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
];
this.pieSeriesValue(pieSeries);

Tâche 6 : afficher les listes maître et détail

Revenez au navigateur pour visualiser les modifications apportées à votre application Web.

Dans l'onglet Tableau de bord de votre application Web, les champs de texte, l'avatar et le graphique à secteurs Oracle JET liés aux données sont affichés dans le conteneur Détails de l'élément, mais les listes ne répondent pas aux sélections. Dans le tutoriel suivant, les gestionnaires d'événements que vous créez ajouteront une fonctionnalité de sélection.

Description de l'image formatted_master_detail_items_list.png
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

Create the detail view in an Oracle JET web app

F53165-01

February 2022