Afficher ou masquer le contenu dans l'application Web Oracle JET

Introduction

Le composant Oracle JET oj-module et les classes d'utilitaire multi-écrans JavaScript peuvent charger différentes vues en fonction de la taille de l'écran. Vous pouvez utiliser le composant oj-module pour remplacer le contenu d'une région de page en liant une vue et le viewModel correspondant à un élément.

Objectifs

A la fin de ce tutoriel, vous aurez personnalisé une application Web Oracle JET pour lier une vue et la vue viewModel correspondante à l'aide d'un composant Oracle JET oj-module et d'un code TypeScript réactif.

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
Accès au cookbook Oracle JET pour les développeurs
Réalisation du tutoriel précédent dans ce parcours de formation afin de créer le dossier JET_Web_Application
L'application jet_web_application_responsive_design_final.zip terminée peut être téléchargée

Tâche 1 : ajout du composant de module à la vue

Définissez la vue et l'élément viewModel correspondant sous le composant Oracle JET oj-module à l'aide de l'objet de configuration.

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 avec id="activityItemsContainer". Dans le fichier div vide, ajoutez un conteneur div qui entoure un élément HTML personnalisé oj-module avec l'attribut config qui définit la région de navigation.
```
<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <div id="container">
    <oj-module config="[[moduleConfig]]"></oj-module>
  </div>
</div>
```
Enregistrez le fichier dashboard.html.

Votre code doit ressembler à final-dashboard-html.txt.

Tâche 2 : mise à jour de la liste des modules importés dans ViewModel

En haut du fichier dashboard.ts, importez les modules qui prennent en charge les composants Oracle JET.

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

Après le module ojlistview, ajoutez les trois modules d'utilitaires HTML réactifs JET et le module ojmodule-element.

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 * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import * as HtmlUtils from "ojs/ojhtmlutils";
import "ojs/ojmodule-element";

Enregistrez le fichier dashboard.ts.

Le bloc d'importation doit ressembler à import-block-ts.txt.

Tâche 3 : ajoutez le code de chargement réactif dans ViewModel

Vous souhaitez charger différents contenus pour différentes tailles d'écran dans une présentation multi-écran. Vous pouvez utiliser oj-module pour charger différentes vues à l'aide d'une opération observable, d'une requête multimédia ou d'une requête multimédia personnalisée observable.

Ouvrez le Cookbook Oracle JET et accédez à la page d'accueil du Cookbook. Cliquez sur Cadre dans la barre de menus, puis sur Comportements multi-écrans, puis sur Chargement multi-écrans.
Vous pouvez y accéder à la documentation de l'API pour l'espace de noms ResponsiveUtils. Faites ensuite défiler la page jusqu'à la section Methods et lisez la méthode getFrameworkQuery.

Dans le fichier dashboard.ts, sous la déclaration chartDataProvider, ajoutez un bloc de code de modèle incorporé à transmettre à l'élément HTML personnalisé oj-module.

this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
      keyAttributes: "id",
});

// Define the oj-module inline template for Activity Items list
const lg_xl_view =
      '<h3 id="activityItemsHeader">Activity Items</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityItemsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>Air-Lift Tire Pump</p>" +
      "<p>Intact Bike Helmet</p>" +
      "<p>Nimbus Bike Tire</p>" +
      "<p>Refill Water Bottle</p>" +
      "<p>Swift Boys 21 Speed</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>";

Le noeud de données en ligne pour les écrans de grande taille et les écrans de grande taille est transmis via la variable lg_xl_view.

Sous la définition de la variable lg_xl_view, définissez le code permettant de transmettre le noeud de données en ligne pour les écrans de petite et moyenne taille via la variable sm_md_view.

// Display this content for small and medium screen sizes
const sm_md_view =
      '<div id="sm_md" style="background-color:lightcyan; padding: 10px; font-size: 10px">' +
      '<h3 id="activityDetailsHeader">Activity Details</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityDetailsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>" +
      "</div>";

Sous la définition de la variable sm_md_view, définissez le code permettant de charger la vue pour différentes tailles d'écran à l'aide d'une requête de média this.large observable.
```
// Identify the screen size and display the content for that screen size
const lgQuery = ResponsiveUtils.getFrameworkQuery(
   ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP
);

this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
this.moduleConfig = ko.pureComputed(() => {
   let viewNodes = HtmlUtils.stringToNodeArray(
   this.large() ? lg_xl_view : sm_md_view
   );
   return { view: viewNodes };
});

/**
 * End of oj-module code
 */
```
En utilisant la fonction utilitaire HTML, vous pouvez obtenir la chaîne de requête de support de structure dans la variable this.large. Le code HTML dans la variable lg_xl_view est chargé si la valeur de chaîne de requête de média dans this.large() est égale à LG_UP, grande ou supérieure. Le code HTML dans la variable sm_md_view est chargé si la valeur de chaîne de requête de média dans this.large() est différente de LG_UP.

Ajoutez des déclarations de type pour large et moduleConfig à la classe.

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>;
   large: ko.Observable<boolean>;
   moduleConfig: ko.PureComputed<any>;

Enregistrez le fichier dashboard.ts.

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

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

Dans la fenêtre de terminal, accédez au répertoire JET_Web_Application et exécutez l'application.
```
$ ojet serve
```
Les outils Oracle JET exécutent votre application Web dans un navigateur Web local où vous pouvez visualiser le contenu du tableau de bord.

Description de l'illustration final-app.png

Pour afficher le contenu de la variable sm_md_view, ajustez l'écran à une taille petite ou moyenne. Notez la liste abrégée des éléments sous l'en-tête Détails de l'activité, qui est en surbrillance cyan léger.

Description de l'illustration Small-screen.png

Pour afficher le contenu dans la variable lg_xl_view, définissez la taille de l'écran sur Large ou Extra Large.

Description de l'illustration large-screen.png
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.
Fermez la fenêtre ou l'onglet du navigateur.
Votre application complète avec la fonctionnalité de conception réactive doit ressembler à jet_web_application_responsive_design_final.zip.

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 préparée 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_responsive_design_final.zip et extrayez le contenu de l'application terminée dans le dossier jet_web_application_responsive_design_final.
Dans la fenêtre de terminal, accédez au dossier jet_web_application_responsive_design_final et restaurez l'application Web Oracle JET.
```
$ ojet restore
```
Attendez la confirmation.
```
$ 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

Show or hide content in the Oracle JET web application

F53137-01

February 2022