Liaison de données d'un composant dans une application Web Oracle JET

Introduction

Ce tutoriel vous explique comment utiliser un document JSON local dans votre application Web Oracle JavaScript Extension Toolkit (Oracle JET).

Oracle JET est un toolkit de développement qui fournit un certain nombre de classes de fournisseurs de données pour gérer les données de différentes sources. Dans viewModel, vous allez remplir une instance de MutableArrayDataProvider avec les données lues à partir d'un fichier JSON, puis lier l'instance MutableArrayDataProvider aux éléments HTML personnalisés Oracle JET dans la vue.

Objectifs

A l'issue de ce tutoriel, vous aurez appris à lire des données d'un document JSON dans un fournisseur de données, à ajouter un composant Oracle JET List View et à lier les données du composant aux objets de données JSON.

Prérequis

Tâche 1 : télécharger le document JSON et examiner les données

  1. Téléchargez le fichier store_data.json dans le répertoire JET_Web_Application/src/ts/.
  2. Ouvrez le fichier store_data.json dans votre navigateur Web et affichez la structure des données. Le fichier store_data.json contient la liste des objets d'activité et leurs propriétés. Chaque activité inclut un tableau d'éléments avec leurs propres propriétés.

Tâche 2 : remplir un fournisseur de données dans ViewModel

Vous propagez les données du fichier JSON vers un objet Oracle JET ojmutablearraydataprovider.

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

  2. Importez les données à partir du fichier store_data.json afin qu'elles soient disponibles dans ViewModel.

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

  3. S'il n'est pas présent, importez le module ojmutablearraydataprovider que vous utiliserez pour contenir les données JSON.

    import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

  4. Avant la classe DashboardViewModel(), définissez un alias de type, Activity, qui inclut le champ id de type number.

    ...
type Activity = {
  id: number;
}

class DashboardViewModel {

  5. Dans la classe DashboardViewModel(), ajoutez un type pour activityDataProvider que vous allez créer à l'étape suivante.

    class DashboardViewModel {

   val: ko.Observable<string>;
   . . .
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   chartData: Array<Object>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;    
   . . .

  6. Dans la méthode constructror de la classe DashboardViewModel(), créez une instance de MutableArrayDataProvider (activityDataProvider) et utilisez la méthode JSON.parse pour lire les données JSON.

    constructor() {
   this.val = ko.observable("pie");
   ...

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

  7. Importez le module de composant Oracle JET List View.

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

    Le module ojlistview prend en charge la vue dans la section suivante de ce tutoriel.

  8. Enregistrez le fichier dashboard.ts. Le fichier dashboard.ts doit ressembler à final-data-bind-dashboard-ts.txt.

Tâche 3 : liaison des données au composant Vue Liste de la vue

L'élément oj-list-view est un élément HTML personnalisé Oracle JET avec des fonctionnalités interactives qui constitue une version améliorée d'une liste HTML. Vous fournissez les données à la liste en liant la variable activityDataProvider remplie dans viewModel à l'attribut data de la vue de liste.

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

  2. Dans le fichier dashboard.html, ajoutez un élément div dont la valeur d'attribut id est activitiesContainer au-dessus de l'élément itemDetailsContainer div qui contient les composants Oracle JET Select Single et Chart.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      ...
   </div>

  3. Dans l'élément activitiesContainer div, ajoutez un élément oj-list-view avec un attribut data qui utilise une liaison unidirectionnelle pour obtenir les données de la liste.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
 <div id="activitiesContainer">
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
   </oj-list-view>
 </div>

    Nous spécifions également la valeur visible pour l'attribut gridlines afin qu'une ligne de grille apparaisse entre les éléments de la liste et l'attribut aria-labelledby comme meilleure pratique en matière d'accessibilité.

  4. Dans l'élément oj-list-view que vous avez créé, ajoutez un élément HTML template avec un attribut slot pour afficher chaque élément de la liste.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
         </template>
   </oj-list-view>
</div>

  5. Dans l'élément de modèle, ajoutez un autre élément div qui contient un élément HTML personnalisé oj-bind-text avec un attribut value qui utilise une liaison unidirectionnelle pour obtenir les données de liste de l'objet de données en cours.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
            <div>
               <strong>
                  <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
               </strong>
            </div>
         </template>
   </oj-list-view>
</div>

  6. Ajoutez un élément HTML h3 pour fournir un en-tête pour la liste des activités.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
. . .

  7. Dans itemDetailsContainer div, ajoutez un élément h3 et un élément oj-label pour fournir un en-tête pour le graphique.

    . . .
<div id="itemDetailsContainer">
  <h3>Item Details</h3>
    <oj-label for="basicSelect">Select Chart:</oj-label>
. . .

  8. Enregistrez le fichier dashboard.html. Le fichier dashboard.html doit ressembler à final-data-bind-dashboard-html.txt.

Tâche 4 : Exécuter l'application Web

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

    $ ojet serve

    Votre navigateur affiche la liste des activités visibles dans l'onglet Tableau de bord de votre application Web.

    Zone Informations sur le produit.

    Description de l'image output.png

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

  4. Laissez la fenêtre de terminal ouverte pour le tutoriel suivant.

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.