Améliorer et archiver le composant Web Oracle JET

Introduction

Un composant Web est une interface utilisateur réutilisable que vous pouvez intégrer en tant qu'élément HTML personnalisé dans votre application Web. Les composants Web peuvent contenir des composants Oracle JavaScript Extension Toolkit (Oracle JET), d'autres composants Web, HTML, JavaScript, TypeScript et CSS (Cascading Style Sheets). Vous utilisez l'outil Oracle JET pour créer le composant Web et vous pouvez utiliser un modèle de démarrage Oracle JET pour générer les fichiers HTML et Typescript ou JavaScript que vous modifiez pour ajouter et configurer le composant Web.

Dans le tutoriel précédent, vous avez créé un composant Web qui affiche quatre champs de texte d'entrée. Dans ce tutoriel, vous allez apprendre à modifier le champ ID article en lecture seule, à ajouter un convertisseur de devises au champ Prix de l'article et à ajouter un validateur de longueur au champ Description de l'article. Pour transmettre des valeurs à ces champs, définissez les attributs des quatre champs de texte d'entrée dans la source HTML de l'application Web. Les attributs que vous utilisez doivent avoir une propriété correspondante définie dans le fichier de métadonnées du composant Web. Vous pouvez transmettre des valeurs statiques aux attributs ou utiliser la syntaxe d'expression liée aux données pour une liaison de données unidirectionnelle ou bidirectionnelle entre l'application Web et le composant Web.

Objectifs

Dans ce tutoriel, vous allez améliorer le composant Web avec des fonctionnalités supplémentaires dans une application Web Oracle JET. Vous apprendrez également à packager le composant Web et à le préparer à le partager avec une autre application.

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 installée
Achèvement du tutoriel précédent dans ce parcours de formation, de sorte que vous ayez créé le composant Web demo-update-item dans le dossier JET_Web_Component_Application

Tâche 1 : modifier l'ID d'élément en lecture seule

Le champ ID article de votre composant Web doit être en lecture seule. Pour des raisons d'accessibilité, remplacez l'élément HTML personnalisé oj-input-text pour le champ ID d'élément par l'élément HTML personnalisé oj-label-value. L'élément oj-label-value définit un emplacement qui utilise l'élément oj-bind-text pour modifier le champ ID d'élément en lecture seule.

Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier demo-update-item-view.html dans un éditeur.

Localisez l'élément HTML personnalisé oj-input-text avec l'attribut value="ID number" et remplacez l'élément oj-input-text par l'élément oj-label-value.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
  <oj-label-value>
    <oj-label slot="label">Item ID</oj-label>
    <div slot="value">
      <oj-bind-text value="ID number"></oj-bind-text>
    </div>
  </oj-label-value>
  <oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
. . . 
</oj-form-layout>

Enregistrez le fichier demo-update-item-view.html.

Votre code demo-update-item-view.html doit ressembler à readonly-itemid.txt.
Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier demo-update-item-viewModel.ts dans un éditeur.

Dans le fichier demo-update-item-viewModel.ts, importez le module de chargement ojs/ojlabelvalue après l'entrée qui importe le module ojs/ojinputtext.

"use strict";

import * as ko from "knockout";
import componentStrings = require("ojL10n!./resources/nls/demo-update-item-strings");
import Context = require("ojs/ojcontext");
import Composite = require("ojs/ojcomposite");
import "ojs/ojknockout";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";

Enregistrez le fichier demo-update-item-viewModel.ts.
Dans la fenêtre de terminal, accédez au répertoire JET_Web_Component_Application et exécutez l'application.
```
$ ojet serve
```
Le navigateur affiche le composant Web avec les quatre champs de texte d'entrée dans l'onglet Tableau de bord de votre application Web. Le champ ID article est désormais en lecture seule.

Description de l'illustration form-wc-itemid-readonly.png
Laissez la fenêtre de terminal et la fenêtre ou l'onglet du navigateur qui affiche l'application Web ouverte.

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

Tâche 2 : Ajouter un convertisseur de devises

Utilisez un convertisseur de devises pour le champ Prix article.

Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier demo-update-item-view.html dans un éditeur.

Localisez l'élément HTML personnalisé oj-input-text avec l'attribut value="Price" et mettez-le à jour pour utiliser un convertisseur de devises que nous allons définir ultérieurement. Nous saisissons 00 plutôt que Price comme valeur de réserve pour la propriété value car le convertisseur requiert un nombre valide plutôt qu'une chaîne.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
...
<oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
<oj-input-text value="00" 
               help.instruction="enter an amount with or without grouping separator"
               converter="[[currency]]" 
               label-hint="Item Price">
         </oj-input-text> 
<oj-input-text value="Description" label-hint="Item Description"></oj-input-text>
</oj-form-layout>   

Enregistrez le fichier demo-update-item-view.html. Votre code demo-update-item-view.html doit ressembler à currency-code-html.txt.
Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier demo-update-item-viewModel.ts dans un éditeur.

En haut du fichier demo-update-item-viewModel.ts, importez IntlNumberConverter à partir du module ojs/ojconverter-number :

"use strict";

import * as ko from "knockout";
. . .
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";
import { IntlNumberConverter } from "ojs/ojconverter-number";

Dans la classe ViewModel, ajoutez un champ de devise pour le convertisseur de devises que vous allez initialiser à l'étape suivante.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
   busyResolve: (() => void);
   . . . 
   currency: IntlNumberConverter;

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {
. . .       

Dans la méthode constructor() après les exemples d'entrées observables, ajoutez le convertisseur de devises.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

Enregistrez le fichier demo-update-item-viewModel.ts.

Votre code demo-update-item-viewModel.ts doit ressembler à currency-code-ts.txt.
Revenez au navigateur pour visualiser les modifications apportées à votre application Web.
Entrez le prix dans le champ Prix de l'article et appuyez sur Entrée pour vérifier les modifications.

Description de l'illustration form-wc-currency-converter.png ci-après

Le prix saisi affiche un préfixe USD. Si vous entrez une valeur non numérique, le champ Prix article affiche une erreur.
Laissez la fenêtre de terminal et la fenêtre ou l'onglet du navigateur qui affiche l'application Web ouverte.

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

Tâche 3 : ajouter un validateur de longueur

Utilisez un valideur de longueur pour le champ Description de l'article.

Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier demo-update-item-view.html dans un éditeur.

Localisez l'élément HTML personnalisé oj-input-text avec l'attribut value="Description" et mettez-le à jour pour utiliser un validateur de longueur que nous définirons ultérieurement.

   
<oj-form-layout id="form-container">
...
<oj-input-text value="00" 
            help.instruction="enter an amount with or without grouping separator"
            converter="[[currency]]" 
            label-hint="Item Price">
      </oj-input-text> 
<oj-input-text
     value="{{lengthValue1}}" validators="[[validators]]"
     placeholder="Enter a description of 5-50 characters"
     label-hint="Item Description"
   ></oj-input-text>
</oj-form-layout>
   

Enregistrez le fichier demo-update-item-view.html.

Votre code demo-update-item-view.html doit ressembler à validator-code-html.txt.
Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier demo-update-item-viewModel.ts dans un éditeur.

En haut du fichier demo-update-item-viewModel.ts, importez AsyncLengthValidator à partir du module ojs/ojasyncvalidator-length :

import * as ko from "knockout";
. . .
import { IntlNumberConverter } from "ojs/ojconverter-number";
import AsyncLengthValidator = require("ojs/ojasyncvalidator-length");

Dans la classe ViewModel, ajoutez les champs des observables Knockout que vous allez initialiser à l'étape suivante.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
 busyResolve: (() => void);
 . . . 
 currency: IntlNumberConverter;
 lengthValue1: ko.Observable<string>;
 validators: ko.ObservableArray<AsyncLengthValidator<string>>;

Dans la méthode constructor après le convertisseur de devises, ajoutez le validateur de longueur.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

   this.lengthValue1 = ko.observable("");
   this.validators = ko.observableArray([
      new AsyncLengthValidator({ min: 5, max: 50 }),
    ]);

Le validateur de longueur définit une longueur minimum de 5 caractères et une longueur maximum de 50 caractères pour le champ Description de l'article.

Enregistrez le fichier demo-update-item-viewModel.ts.

Votre code demo-update-item-viewModel.ts doit ressembler à final-demo-update-item-viewModel-ts.txt.
Revenez au navigateur pour visualiser les modifications apportées à votre application Web.
Entrez une description dans le champ Description de l'article et appuyez sur Entrée, puis appuyez sur Tabulation pour effacer l'info-bulle.

Description de l'illustration form-wc-length-validator.png ci-après

Si la description est plus longue que la plage définie, le champ Description de l'article affiche une erreur.
Laissez la fenêtre de terminal et la fenêtre ou l'onglet du navigateur qui affiche l'application Web ouverte.

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

Tâche 4 : Définition des métadonnées de composant Web

Le fichier de métadonnées du composant Web définit les propriétés requises du composant Web. Chaque champ de texte d'entrée du composant Web doit être associé à une propriété qui réécrit les mises à jour à partir du composant Web.

Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier component.json dans un éditeur.

Définissez les propriétés des métadonnées displayName et description.

{
"name": "demo-update-item",
"version": "1.0.0",
"jetVersion": "^12.0.0",
"displayName": "demo-update-item",
"description": "A Web Component with form layout",
...
}

Sous la propriété de métadonnées description, utilisez la convention de dénomination camel-case pour définir les propriétés liées aux champs dans la vue de composant Web.

"description": "A Web Component with form layout",
"properties": {
   "itemId": {
      "type": "number"
   },
   "itemName": {
      "type": "string",
      "description": "Description for the item-name attribute",
      "writeback": true
   },
   "itemPrice": {
      "type": "number",
      "writeback": true
   },
   "itemDesc": {
      "type": "string",
      "writeback": true
   }
},

La propriété writeback définie sur true garantit que ces propriétés recevront les mises à jour du composant Web qui référence la propriété dans une expression de liaison de données bidirectionnelle.

Enregistrez le fichier component.json.

Le code component.json doit ressembler à component-json.txt.

Tâche 5 : Définir les attributs et les valeurs d'attribut

Les attributs de l'élément de composant Web peuvent référencer les propriétés déclarées dans le fichier de métadonnées de composant Web. Dans la source HTML de l'application Web, les références de propriété apparaissent sous forme de noms d'attribut d'élément HTML non sensibles à la casse avec des traits d'union.

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

Dans l'élément demo-update-item, définissez les attributs avec des valeurs statiques pour les quatre champs de texte d'entrée.

<div class="oj-hybrid-padding">
   <div class="oj-panel oj-sm-margin-2x demo-mypanel">
      <h1 class="oj-header-border">Update Item Details</h1>
      <div>
         <demo-update-item item-id="34" 
                           item-name="John" 
                           item-price="3434.55" 
                           item-desc="This is an updated item">
                     </demo-update-item>
      </div>
   </div>
</div>

Enregistrez le fichier dashboard.html.

Tâche 6 : Définition de la vue Composant Web

Vous pouvez accéder à toute propriété définie dans le fichier de métadonnées du composant Web à l'aide de la variable $properties du contexte de liaison de vue.

Accédez au répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item et ouvrez le fichier demo-update-item-view.html dans un éditeur.

Dans les éléments HTML personnalisés de l'élément oj-form-layout, liez les attributs value aux propriétés définies dans le fichier component.json à l'aide de la variable $properties.

   
<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
. . .
<div slot="value">
      <oj-bind-text value="[[$properties.itemId]]"></oj-bind-text>
  </div>
</oj-label-value>  
   <oj-input-text value="{{$properties.itemName}}" label-hint="Item Name"></oj-input-text>
   <oj-input-text value="{{$properties.itemPrice}}" 
      help.instruction="enter an amount with or without grouping separator"
      ...> 
   </oj-input-text>
   <oj-input-text
      value="{{$properties.itemDesc}}"
      . . .>
   </oj-input-text>
</oj-form-layout>
   

Pour définir des valeurs d'attribut, utilisez la syntaxe [[]] afin de définir une liaison de données unidirectionnelle et la syntaxe {{}} pour une liaison de données bidirectionnelle.

Enregistrez le fichier demo-update-item-view.html.

Votre code demo-update-item-view.html doit ressembler à final-demo-update-item-view-html.txt.
Revenez au navigateur pour visualiser les modifications apportées à votre application Web.

Le navigateur affiche le composant Web avec les valeurs statiques dans les quatre champs de texte d'entrée.
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. Fermez la fenêtre de terminal.

Tâche 7 : Archiver le composant Web

Une fois le composant Web configuré, vous devez le préparer pour d'autres applications.

Ouvrez une fenêtre de terminal, accédez au répertoire JET_Web_Component_Application et exécutez la commande ojet package component avec le nom du composant, demo-update-item, en tant que paramètre de commande :

$ ojet package component demo-update-item

Oracle JET regroupe le contenu du répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item dans un fichier ZIP (demo-update-item_1-0-0.zip) qu'il crée dans le répertoire JET_Web_Component_Application/dist. Dans le cadre de la tâche de packaging, Oracle JET transpile le code TypeScript du répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item dans le code JavaScript. Si, par exemple, vous ouvrez le fichier JET_Web_Component_Application/dist/demo-update-item_1-0-0.zip, vous remarquerez qu'il contient un fichier demo-update-item-viewModel.js que les outils Oracle JET ont transpilé à partir du fichier demo-update-item-viewModel.ts dans le répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item.

Vous distribuez le fichier demo-update-item_1-0-0.zip du répertoire JET_Web_Component_Application/dist aux consommateurs qui souhaitent réutiliser le composant Web dans leur application Web. Pour utiliser le composant Web dans leur application Web, les consommateurs extraient le contenu du fichier ZIP dans un répertoire demo-update-item de leur application Web. Nous aborderons en détail cette dernière tâche dans 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.

Informations relatives au titre et au copyright

Enhance and archive the Oracle JET web component

F53205-01

February 2022