Créer un 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). Les outils Oracle JET permettent de créer le composant Web. Vous pouvez utiliser un modèle de démarrage Oracle JET pour générer les fichiers HTML et JavaScript ou TypeScript que vous modifiez pour ajouter le composant Web.

Objectifs

Dans ce tutoriel, vous allez créer et configurer un composant Web Oracle JET dans une application Web qui utilise le modèle de démarrage de navdrawer. Vous apprendrez également à modifier les fichiers de composant Web pour ajouter un composant de présentation de formulaire comportant quatre champs de texte d'entrée.

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
Accès au cookbook Oracle JET pour les développeurs

Tâche 1 : création d'une application Web Oracle JET

Utilisez le modèle de démarrage navdrawer et l'outil Oracle JET pour créer le dossier d'application dans lequel vous allez créer le composant Web Oracle JET.

Ouvrez une fenêtre de terminal en tant qu'administrateur et créez une application Web nommée JET_Web_Component_Application avec le modèle de démarrage de navdrawer.
```
$ ojet create JET_Web_Component_Application --template=navdrawer --typescript  
```
Accédez au répertoire JET_Web_Component_Application et exécutez l'application.
```
$ ojet serve
```
Le navigateur affiche le modèle de démarrage de Navdrawer avec le contenu par défaut visible dans l'onglet Tableau de bord de votre application Web.

Description de l'image dashboard_default_message.png
Fermez la fenêtre ou l'onglet du navigateur qui affiche l'application Web en cours d'exécution.

Tâche 2 : Créer un composant Web Oracle JET

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.
Dans le répertoire JET_Web_Component_Application, créez le composant Web demo-update-item.
```
$ ojet create component demo-update-item
```
L'outil Oracle JET crée le composant Web demo-update-item dans le répertoire JET_Web_Component_Application/src/ts/jet-composites. Le nom du composant Web contient un trait d'union et est en minuscules, conformément aux conventions de dénomination W3C des composants Web.

Tâche 3 : ajout du composant Web à l'application

Pour utiliser le composant Web dans votre application Web, ajoutez le module de chargement de composant Web au fichier TypeScript de votre application Web et ajoutez l'élément de composant Web au fichier HTML de votre application Web.

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

En haut du fichier dashboard.ts, importez le module du chargeur de composants Web.

import * as AccUtils from "../accUtils";
import "demo-update-item/loader";

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

Remplacez le contenu de l'élément div dans Dashboard Content Area par l'élément demo-update-item.

<div class="oj-hybrid-padding">
   <h1>Dashboard Content Area</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
</div>

Modifiez l'élément h1 pour afficher Update Item Details comme titre et ajoutez la classe oj-header-border.

<div class="oj-hybrid-padding">
   <h1 class="oj-header-border">Update Item Details</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
</div>

Ajoutez un élément div avec une classe oj-panel autour du contenu que vous avez modifié, afin d'afficher une bordure de sélection pour le composant Web.

<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></demo-update-item>
      </div>
   </div>
</div>

Enregistrez le fichier dashboard.html.
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 panneau Mettre à jour les détails de l'élément de votre composant Web dans l'onglet Tableau de bord de votre application Web. Le panneau affiche une bordure et un message par défaut.

Description de l'image update_item_details_message.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 4 : Ajouter un formulaire au composant Web

Configurez votre composant Web pour afficher un formulaire comportant quatre champs de texte d'entrée. Modifiez les fichiers TypeScript et HTML du composant Web pour ajouter un composant de présentation de formulaire.

Ouvrez le Cookbook Oracle JET et accédez à la page d'accueil du Cookbook, puis cliquez sur Formulaires dans la barre de menus et sélectionnez le composant Présentation de formulaire. Découvrez comment gérer la présentation des libellés et des champs dans un formulaire.
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.

Remplacez le contenu du fichier demo-update-item-view.html par le composant Présentation de formulaire Oracle JET et quatre champs Texte d'entrée Oracle JET à afficher dans le panneau Mettre à jour les détails d'élément.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
   <oj-input-text value="ID number" label-hint="Item ID"></oj-input-text>
   <oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
   <oj-input-text value="Price" 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.
Dans le répertoire JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, ouvrez le fichier demo-update-item-viewModel.ts dans un éditeur.

Dans la classe ViewModel, ajoutez un élément isSmall observable Knockout qui utilise l'utilitaire ResponsiveKnockoutUtils avec la méthode createMediaQueryObservable() pour créer un élément observable en fonction de la largeur de l'écran.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
   busyResolve: (() => void);      
   . . .
   res: { [key: string]: string };
   smallQuery = ResponsiveUtils.getFrameworkQuery( ResponsiveUtils.FRAMEWORK_QUERY_KEY.SM_ONLY);
   isSmall: ko.Observable = ResponsiveKnockoutUtils.createMediaQueryObservable(this.smallQuery);

Ajoutez également un élément observable calculé Knockout qui renvoie top si la taille de l'écran est petite et start dans le cas contraire.

. . .
isSmall: ko.Observable = ResponsiveKnockoutUtils.createMediaQueryObservable(this.smallQuery);

// For small screens: labels on top
// For medium or bigger: labels at the start
labelEdge: ko.Computed = ko.computed(() => {
  return this.isSmall() ? "top" : "start";

}, this);
. . . 

En haut du fichier demo-update-item-viewModel.ts, importez les modules suivants nécessaires à l'exécution du code que vous avez ajouté aux étapes précédentes.

"use strict";
. . .
import "ojs/ojknockout";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import "ojs/ojformlayout";
import "ojs/ojinputtext";


. . . 

Enregistrez le fichier demo-update-item-viewModel.ts. Votre code demo-update-item-viewModel.ts doit ressembler à demo-update-item-viewModel-ts.txt.
Revenez au navigateur pour visualiser les modifications apportées à votre application Web.

Le navigateur affiche le composant Web avec quatre champs de texte d'entrée dans l'onglet Tableau de bord de votre application Web.

Description de l'image update_item_details_formlayout.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 an Oracle JET web component

F53192-01

February 2022