Gérer les événements de sélection dans une application Web Oracle JET

Introduction

Vous pouvez utiliser l'API Oracle JavaScript Extension Toolkit (Oracle JET) dans le fichier viewModel de l'application Web Oracle JET pour créer des gestionnaires d'événements qui répondent au processus d'écoute de modification d'attribut selected du composant Vue de liste Oracle JET. Lorsque l'utilisateur sélectionne ou désélectionne un élément dans la liste, le processus d'écoute de modification déclenche votre gestionnaire d'événements. Vous pouvez utiliser le gestionnaire d'événements pour alimenter le fournisseur de données Oracle JET, et vous pouvez lier le fournisseur de données pour observer que le composant de vue peut utiliser. Le gestionnaire d'événements peut également définir la variable booléenne que le composant Oracle JET If Binding utilise pour rendre conditionnellement ses éléments HTML imbriqués dans la vue. Si l'attribut selected du composant Vue Liste Oracle JET pour la liste principale n'est pas vide, la variable est définie sur true et la vue affiche la liste détaillée des données. Si l'attribut selected est vide en raison d'un événement de désélection, la variable est définie sur False et la vue affiche un conteneur dans la vue sans la liste détaillée des données.

Objectifs

Dans ce tutoriel, vous allez mettre à jour l'interface utilisateur d'une application Web Oracle JET afin de pouvoir afficher les données maître-détail. Vous apprendrez à créer un gestionnaire d'événements JavaScript à l'aide d'un processus d'écoute de modification de propriété Oracle JET. Vous apprendrez également à utiliser un composant Oracle JET If Binding pour afficher la liste détaillée de manière conditionnelle afin de gérer les sélections de liste.

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 de la version Oracle JET
Réalisation des tutoriels précédents dans ce parcours de formation, afin que vous ayez créé l'application Web Oracle JET dans le dossier JET_Web_Application
L'application jet_web_application_masterdetail_final.zip terminée peut être téléchargée

Tâche 1 : définir le comportement de sélection dans la vue

Mettez à jour la vue pour personnaliser les composants Vue Liste afin de gérer une sélection de ligne dans la liste Activités et la liste Eléments d'activité. Le composant Vue Liste Oracle JET définit l'attribut first-selected-item que le composant alimente avec les éléments de données de la sélection de ligne de l'utilisateur et que vous pouvez lire dans un observable à l'aide d'une liaison bidirectionnelle. Utilisez l'attribut on-selection-changed du composant pour détecter et traiter les événements de sélection/désélection de liste en liant un processus d'écoute d'événement que vous définissez dans viewModel.

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

Sous l'en-tête Activités, recherchez l'élément HTML personnalisé oj-list-view où id="activitiesList", puis ajoutez les attributs de comportement de sélection après l'attribut gridlines.item.

   
<h3 id="activitiesHeader">Activities</h3>
   <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
     data="[[activityDataProvider]]" gridlines.item="visible" selection-mode="single" selected="{{selectedActivity}}"
     on-first-selected-item-changed="[[selectedActivityChanged]]" first-selected-item="{{firstSelectedActivity}}"
     scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
     <template slot="itemTemplate">
. . .
   

Sous l'en-tête Eléments d'activité, recherchez l'élément HTML personnalisé oj-list-view où id="itemsList", puis ajoutez les attributs de comportement de sélection après l'attribut gridlines.item.

   
<h3 id="itemsListHeader">Activity Items</h3>
     <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader"
       gridlines.item="visible" selection-mode="single" selected="{{selectedItem}}"
       on-first-selected-item-changed="[[selectedItemChanged]]" first-selected-item="{{firstSelectedItem}}"
       scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
       <template slot="itemTemplate">
. . .
   

Enregistrez le fichier dashboard.html.

Votre fichier doit ressembler à event-task1-dashboard-html.txt.

Tâche 2 : créer des gestionnaires d'événements dans ViewModel

Mettez à jour viewModel pour ajouter des gestionnaires d'événements pour les composants Vue Liste afin de répondre aux sélections dans la liste Activités et la liste Eléments d'activité. Le composant Oracle JET List View définit un attribut selected, sur lequel l'API Oracle JET List View définit un processus d'écoute de modification de propriété. Le gestionnaire d'événements définit les éléments observables selectedActivity et selectedItem lorsque l'utilisateur sélectionne une liste et que la valeur de l'attribut selected change.

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

Sous la définition observable pieSeriesValue, avant constructor(), ajoutez des observables pour la sélection de liste d'activités et la sélection de liste d'éléments d'activité.

class DashboardViewModel {
   . . . 
   pieSeriesValue: ko.ObservableArray;
   // Observables for Activities
   selectedActivity = new ObservableKeySet();
   activitySelected = ko.observable(false);  // Controls display of Activity Items
   firstSelectedActivity = ko.observable();
   selectedActivityIds = ko.observable();

   // Observables for Activity Items
   itemSelected = ko.observable(false);
   selectedItem = ko.observable();
   firstSelectedItem = ko.observable();

   constructor() {
   . . .

En haut du fichier dashboard.ts, importez la classe ObservableKeySet à partir du module ojs/ojknockout-keyset et de la classe ojListView à partir du module ojs/ojlistview.

import * as ko from "knockout";
. . . 
import "ojs/ojavatar";
import { ObservableKeySet } from "ojs/ojknockout-keyset";
import { ojListView } from "ojs/ojlistview";

Avant la classe DashboardViewModel, ajoutez l'alias de type ActivityItems.

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

class DashboardViewModel {
. . .

Après la déclaration de la méthode constructor() de classe DashboardViewModel, ajoutez le gestionnaire d'événements selectedActivityChanged avec des conditions de test pour gérer les événements de sélection et de désélection.

} // End of constructor function

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
   *  If no items are selected then the firstSelectedItem property  returns an object 
   *  with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list

   } else {
         // If deselection, hide list          
   }
};

Implémentez ce gestionnaire d'événements dans les étapes suivantes.

Dans l'instruction if du gestionnaire d'événements selectedActivityChanged, remplissez la variable itemsDataProvider observable à l'aide de la variable itemsArray, puis définissez l'état de sélection activitySelected et itemSelected sur true pour l'événement de sélection.

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected, then this property firstSelectedItem 
    *  will return an object with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list
      // Hide currently-selected activity item
      this.activitySelected(false);

      let itemsArray = itemContext.items;
      this.itemsDataProvider.data = itemsArray;
      // Set List View properties
      this.activitySelected(true);
      this.itemSelected(false);
      this.selectedItem();
      this.itemData();

   } else {
         // If deselection, hide list
   }
};

Dans l'instruction else du gestionnaire d'événements selectedActivityChanged, définissez l'état de sélection activitySelected et itemSelected sur false pour l'événement de désélection.

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected then this property firstSelectedItem will return an 
    *  object with both key and data properties set to null.
   */

   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      . . .
   } 

   else {
      // If deselection, hide list
      this.activitySelected(false);
      this.itemSelected(false);
   }
};

Après le gestionnaire d'événements selectedActivityChanged, ajoutez un gestionnaire d'événements selectedItemChanged avec des conditions de test pour gérer les événements de sélection et de désélection.

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   . . .
};

/**
* Handle selection from Activity Items list
*/
selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

       // If selection, populate and display list
   }
   else {
   // If deselection, hide list
   }
};

Implémentez ce gestionnaire d'événements dans les étapes suivantes.

Dans l'instruction if du gestionnaire d'événements selectedItemChanged, remplissez l'élément observable itemData, renseignez l'élément observable pieSeriesValue à l'aide de la variable de tableau pieSeries, puis définissez l'état de sélection itemSelected observable sur true pour l'événement de sélection.

selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

      // If selection, populate and display list
      this.itemData(event.detail.value.data);

      // Create variable and get attributes of the items list to set pie chart values
      let pieSeries = [
      { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
      { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
      ];
      // Update the pie chart with the data
      this.pieSeriesValue(pieSeries);

      this.itemSelected(true);

   }
   else {
   // If deselection, hide list

   }
};

Dans l'instruction else du gestionnaire d'événements selectedItemChanged, définissez l'état de sélection itemSelected observable sur false pour l'événement de désélection.

selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   if (isClicked != null) {
   . . . 
   }
   else {
   // If deselection, hide list
   this.itemSelected(false);        
   }
};

Enregistrez le fichier dashboard.ts.

Votre fichier doit ressembler à final-event-dashboard-ts.txt.

Tâche 3 : Conditionner l'affichage des listes dans la vue

Mettez à jour la vue à l'aide des composants If Binding d'Oracle JET pour afficher la liste détaillée de manière conditionnelle. Le composant Oracle JET If Binding prend une variable booléenne sur son attribut test. Dans un composant de liaison If, imbriquez le conteneur des éléments d'activité et, dans un autre composant de liaison If, imbriquez le conteneur des détails de l'article. Utilisez ensuite les composants de liaison IF pour tester l'état des objets observables activitySelected et itemSelected. Le contenu imbriqué du composant de liaison IF apparaît si la condition de test est true. Affichez la liste liée aux données si l'élément observable est true, comme défini par le gestionnaire d'événements de liste. Utilisez un autre composant de liaison If pour tester si l'élément observable est false, puis affichez un conteneur avec un message indiquant à l'utilisateur d'effectuer une sélection de liste.

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="parentContainer2". Au-dessus, ajoutez la balise d'ouverture de l'élément HTML personnalisé oj-bind-if, avec l'attribut test défini sur l'état de l'élément observable activitySelected.
```
. . .
   </oj-list-view>
</div>
<oj-bind-if test="[[activitySelected()]]">
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
   <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
   <h3 id="itemsListHeader">Activity Items</h3>
. . .
```
Lorsque l'utilisateur sélectionne une activité dans la liste Activités, le gestionnaire d'événements viewModel Activité modifiée définit la valeur de activitySelected observable sur true. Dans ce cas, la condition de test oj-bind-if est satisfaite et l'application affiche le conteneur Eléments d'activité pour la sélection d'activité. La notation () sur la propriété observable est la convention de fonction Knockout permettant d'obtenir la valeur de l'objet observable au lieu d'obtenir l'instance de l'objet observable.
Recherchez l'élément div dans lequel id="itemDetailsContainer", et au-dessus, ajoutez la balise d'ouverture de l'élément HTML personnalisé oj-bind-if, avec l'attribut test défini sur l'état de l'élément observable itemSelected.
```
. . .
   </oj-list-view>
</div>
<oj-bind-if test="[[itemSelected()]]">
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .     
```
Lorsque l'utilisateur sélectionne un élément dans la liste Eléments d'activité, le gestionnaire d'événements viewModel Elément modifié définit itemSelected observable sur true. Dans ce cas, la condition de test oj-bind-if est satisfaite et l'application affiche le conteneur Détails de l'article pour la sélection de l'élément d'activité.
Au bas du fichier dashboard.html, comptez deux balises </div> fermantes vers le haut, puis ajoutez la balise </oj-bind-if> fermante pour qu'elle corresponde à la balise <oj-bind-if test ="[[activitySelected()]]"> ouvrante. Comptez une autre balise </div> de fermeture, puis ajoutez la balise </oj-bind-if> de fermeture pour la balise <oj-bind-if test ="[[itemSelected()]]"> d'ouverture.
```
. . . 
            </oj-chart>
            </div>
         </div>
      </oj-bind-if>
      </div>
   </oj-bind-if>
   </div>
</div>
```
Sous la balise </oj-bind-if> de fermeture que vous avez ajoutée, la plus proche de la fin du fichier, insérez un élément HTML personnalisé oj-bind-if test="[[!activitySelected()]]" contenant un élément div avec les classes d'aide de présentation flexible Oracle JET oj-flex-item oj-sm-6.
```
. . . 
            </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>
```
La classe d'aide Oracle JET oj-sm-6 indique que le conteneur de l'en-tête Select an Activity to see Items occupe six colonnes de conteneur pour les écrans de petite et grande taille.

Tant que l'utilisateur n'a pas sélectionné d'activité, la valeur de activitySelected observable est false. De même, si l'utilisateur appuie sur la touche Ctrl et clique sur une activité déjà sélectionnée, l'élément viewModel traite cet événement comme une désélection et le gestionnaire d'événements Activity Changed définit l'élément activitySelected observable sur false. Dans les deux cas, la condition de test oj-bind-if est satisfaite par la condition booléenne false et l'application affiche l'en-tête Select an Activity to see Items.
Sous la première balise </oj-bind-if> de fermeture du fichier, ajoutez un élément HTML personnalisé oj-bind-if test ="[[!itemSelected()]]" contenant un élément div avec des classes d'aide de disposition Oracle JET oj-flex-item oj-sm-12 oj-md-6 flex.
```
. . .
                  </oj-chart>
               </div>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!itemSelected()]]">
            <div class="oj-flex-item oj-sm-12 oj-md-6">
               <p>Select an Item to see details</p>
            </div>
         </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>
```
Les classes d'aide Oracle JET oj-sm-12 et oj-md-6 indiquent que le conteneur de l'en-tête Select an Item pour voir les détails occupe six colonnes de conteneur pour les tailles d'écran moyennes et supérieures ou occupe douze colonnes de conteneur pour les petites tailles d'écran.

Tant que l'utilisateur n'a pas sélectionné d'élément d'activité, la valeur de l'élément observable itemSelected est false. De même, si l'utilisateur appuie sur la touche Ctrl et clique sur un élément d'activité déjà sélectionné, viewModel traite cet événement comme une désélection et le gestionnaire d'événements Item Changed définit itemSelected observable sur false. Dans les deux cas, la condition de test oj-bind-if est satisfaite par la condition booléenne false et l'application affiche l'en-tête Select an Item to see details.
Enregistrez le fichier dashboard.html.

Votre fichier doit ressembler à final-event-dashboard-html.txt.

Tâche 4 : Tester les listes maître et détail

Dans la fenêtre de terminal, accédez au répertoire JET_Web_Application et exécutez l'application.
```
$ ojet serve
```
Dans le navigateur Web, cliquez sur l'activité Baseball dans votre application.

La sélection de la liste Activités déclenche le gestionnaire d'événements selectedActivityChanged. Le conteneur Eléments d'activité est affiché pour l'activité sélectionnée.

Description de l'image master_detail_list.png
Dans la liste Eléments d'activité, cliquez sur SureCatch Baseball Glove.

La sélection de la liste Eléments d'activité déclenche le gestionnaire d'événements selectedItemChanged. L'application affiche le conteneur Détails de l'article pour l'article sélectionné.

Description de l'image master_detail_item.png
Dans la liste Eléments d'activité, appuyez sur Ctrl et cliquez sur SureCatch Baseball Glove pour la désélectionner.

La désélection de la liste Eléments d'activité déclenche le gestionnaire d'événements selectedItemChanged. Le conteneur Détails article est masqué.

Description de l'image master_detail_list.png
Redimensionnez le navigateur ou appuyez sur Ctrl+Shift+I pour afficher Chrome DevTools et sélectionnez une taille d'écran plus petite, telle que Pixel 5, à partir de l'émulateur de taille d'écran.

Les récipients sont disposés en fonction de la taille de l'écran.

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

Tâche 5 : (facultatif) exécution d'une application Web à partir d'une application restaurée

Si vous voulez exécuter l'application Web Oracle JET terminée à partir du code fourni, vous pouvez restaurer l'application à partir du fichier d'archive téléchargé. Pour utiliser une application Oracle JET "mise au point et compressée", vous devez restaurer les dépendances de projet, y compris les outils Oracle JET, ainsi que les bibliothèques et modules requis, dans l'application extraite.

Téléchargez le fichier jet_web_application_masterdetail_final.zip et extrayez le contenu de l'application terminée dans le dossier jet_web_application_masterdetail_final.
Dans la fenêtre de terminal, accédez au dossier jet_web_application_masterdetail_final et restaurez l'application Web Oracle JET.
```
$ ojet restore
```
Attendez la confirmation.
```
. . .
Success: Restore complete
```
L'application est prête à être exécutée.
Exécutez l'application Web et testez-la dans le navigateur.
```
$ ojet serve
```
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

Handle selection events in an Oracle JET web app

F53154-01

February 2022