Mejora y archivado del componente web de Oracle JET

Introducción

Un componente web es una parte reutilizable de la interfaz de usuario que puede embeber como elemento HTML personalizado en la aplicación web. Los componentes web pueden contener componentes de Oracle JavaScript Extension Toolkit (Oracle JET), otros componentes web, HTML, JavaScript, TypeScript y Hojas de Estilo en Cascada (CSS). Utilice las herramientas de Oracle JET para crear el componente web y puede utilizar una plantilla de inicio de Oracle JET para generar los archivos HTML y Typescript o JavaScript que modifique para agregar y configurar el componente web.

En el tutorial anterior, ha creado un componente web que muestra cuatro campos de texto de entrada. En este tutorial, aprenderá a cambiar el campo ID de artículo a un campo de solo lectura, agregar un conversor de moneda al campo Precio del artículo y agregar un validador de longitud al campo Descripción del artículo. Para transferir valores a estos campos, defina los atributos de los cuatro campos de texto de entrada en el origen HTML de la aplicación web. Los atributos que utilice deben tener una propiedad correspondiente definida en el archivo de metadatos del componente web. Puede transferir valores estáticos a los atributos o utilizar la sintaxis de expresión enlazada a datos para el enlace de datos unidireccional o bidireccional entre la aplicación web y el componente web.

Objetivos

En este tutorial, mejorará el componente web con funciones adicionales en una aplicación web de Oracle JET. También aprenderá a empaquetar el componente web y a prepararlo para compartirlo con otra aplicación.

Requisitos

Entorno de desarrollo configurado para crear aplicaciones de Oracle JET con el tiempo de ejecución de JavaScript, Node.js y la última interfaz de línea de comandos de la versión de Oracle JET instalada
Finalización del tutorial anterior en esta ruta de aprendizaje, para que haya creado el componente web demo-update-item en la carpeta JET_Web_Component_Application

Tarea 1: Editar ID de elemento a solo lectura

El campo ID de artículo del componente web debe ser de solo lectura. Para fines de accesibilidad, sustituya el elemento HTML personalizado oj-input-text para el campo ID de elemento por el elemento HTML personalizado oj-label-value. El elemento oj-label-value define una ranura que utiliza el elemento oj-bind-text para modificar el campo ID de elemento a solo lectura.

Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo demo-update-item-view.html en un editor.

Localice el elemento HTML personalizado oj-input-text con el atributo value="ID number" y sustituya el elemento oj-input-text por el elemento 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>

Guarde el archivo demo-update-item-view.html.

El código demo-update-item-view.html debe ser similar a readonly-itemid.txt.
Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo demo-update-item-viewModel.ts en un editor.

En el archivo demo-update-item-viewModel.ts, importe el módulo del cargador ojs/ojlabelvalue después de la entrada que importa el módulo 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";

Guarde el archivo demo-update-item-viewModel.ts.
En la ventana de terminal, cambie al directorio JET_Web_Component_Application y ejecute la aplicación.
```
$ ojet serve
```
El explorador muestra el componente web con los cuatro campos de texto de entrada en el separador Panel de control de la aplicación web. El campo ID de artículo ahora es un campo de solo lectura.

Descripción de la ilustración form-wc-itemid-readonly.png
Deje abierta la ventana de terminal y la ventana o separador del explorador que muestra la aplicación web.

El comando ojet serve permite realizar cambios en el código de la aplicación que se reflejan inmediatamente en el explorador.

Tarea 2: Adición de un conversor de monedas

Use un conversor de moneda para el campo Precio de artículo.

Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo demo-update-item-view.html en un editor.

Localice el elemento HTML personalizado oj-input-text con el atributo value="Price" y actualícelo para utilizar un conversor de monedas que definiremos en un paso posterior. Introducimos 00 en lugar de Price como valor de marcador de posición para la propiedad value porque el convertidor necesita un número válido en lugar de una cadena.

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

Guarde el archivo demo-update-item-view.html. El código demo-update-item-view.html debe ser similar a currency-code-html.txt.
Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo demo-update-item-viewModel.ts en un editor.

En la parte superior del archivo demo-update-item-viewModel.ts, importe IntlNumberConverter del módulo ojs/ojconverter-number:

"use strict";

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

En la clase ViewModel, agregue un campo de moneda para el convertidor de monedas que inicializará en el siguiente paso.

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

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

En el método constructor() después de las entradas observables de ejemplo, agregue el convertidor de moneda.

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

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

Guarde el archivo demo-update-item-viewModel.ts.

El código demo-update-item-viewModel.ts debe ser similar a currency-code-ts.txt.
Vuelva al explorador para ver los cambios en la aplicación web.
Introduzca el precio en el campo Precio de artículo y pulse Intro para verificar los cambios.

Descripción de la ilustración form-wc-currency-converter.png

El precio introducido muestra un prefijo de USD. Si introduce un valor no numérico, el campo Precio de artículo muestra un error.
Deje abierta la ventana de terminal y la ventana o separador del explorador que muestra la aplicación web.

El comando ojet serve permite realizar cambios en el código de la aplicación que se reflejan inmediatamente en el explorador.

Tarea 3: Agregar un validador de longitud

Use un validador de longitud para el campo Descripción del artículo.

Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo demo-update-item-view.html en un editor.

Busque el elemento HTML personalizado oj-input-text con el atributo value="Description" y actualícelo para utilizar un validador de longitud que definiremos en un paso posterior.

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

Guarde el archivo demo-update-item-view.html.

El código demo-update-item-view.html debe ser similar a validator-code-html.txt.
Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo demo-update-item-viewModel.ts en un editor.

En la parte superior del archivo demo-update-item-viewModel.ts, importe AsyncLengthValidator del módulo ojs/ojasyncvalidator-length:

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

En la clase ViewModel, agregue campos para los observables Knockout que inicializará en el siguiente paso.

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

En el método constructor después del convertidor de moneda, agregue el validador de longitud.

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 }),
    ]);

El validador de longitud define una longitud mínima de caracteres de 5 y una longitud máxima de caracteres de 50 para el campo Descripción del artículo.

Guarde el archivo demo-update-item-viewModel.ts.

El código demo-update-item-viewModel.ts debe tener un aspecto similar a final-demo-update-item-viewModel-ts.txt.
Vuelva al explorador para ver los cambios en la aplicación web.
Introduzca una descripción en el campo Descripción del elemento y pulse Intro y, a continuación, pulse Tab para borrar la ayuda flotante.

Descripción de la ilustración form-wc-length-validator.png

Si la descripción supera el rango establecido, el campo Descripción del artículo muestra un error.
Deje abierta la ventana de terminal y la ventana o separador del explorador que muestra la aplicación web.

El comando ojet serve permite realizar cambios en el código de la aplicación que se reflejan inmediatamente en el explorador.

Tarea 4: Definición de los metadatos del componente web

El archivo de metadatos del componente web define las propiedades necesarias del componente web. Cada campo de texto de entrada del componente web debe tener una propiedad asociada que anule las actualizaciones del componente web.

Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo component.json en un editor.

Defina las propiedades de metadatos displayName y description.

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

Debajo de la propiedad de metadatos description, utilice la convención de nomenclatura con mayúsculas/minúsculas para definir las propiedades enlazadas a los campos de la vista del componente 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 propiedad writeback definida en true garantiza que estas propiedades recibirán actualizaciones del componente web que hace referencia a la propiedad en una expresión de enlace de datos bidireccional.
Guarde el archivo component.json.

El código component.json debe ser similar a component-json.txt.

Tarea 5: Definición de atributos y valores de atributos

Los atributos del elemento de componente web pueden hacer referencia a las propiedades que ha declarado en el archivo de metadatos del componente web. En el origen HTML de la aplicación web, las referencias de propiedad aparecen como nombres de atributos de elementos HTML no sensibles a mayúsculas/minúsculas con guiones.

Navegue al directorio JET_Web_Component_Application/src/ts/views y abra el archivo dashboard.html en un editor.

En el elemento demo-update-item, defina los atributos con valores estáticos para los cuatro campos de texto de entrada.

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

Guarde el archivo dashboard.html.

Tarea 6: Definir la vista de componente web

Puede acceder a cualquier propiedad definida en el archivo de metadatos del componente web mediante la variable $properties del contexto de enlace de vista.

Navegue al directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item y abra el archivo demo-update-item-view.html en un editor.

En los elementos HTML personalizados del elemento oj-form-layout, enlace los atributos value a las propiedades definidas en el archivo component.json mediante 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>
   

Para definir valores de atributo, utilice la sintaxis [[]] para definir el enlace de datos unidireccional y la sintaxis {{}} para el enlace de datos bidireccional.

Guarde el archivo demo-update-item-view.html.

El código demo-update-item-view.html debe tener un aspecto similar a final-demo-update-item-view-html.txt.
Vuelva al explorador para ver los cambios en la aplicación web.

El explorador muestra el componente web con los valores estáticos en los cuatro campos de texto de entrada.
Cierre la ventana o separador del explorador que muestra la aplicación web en ejecución.
En la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes de herramientas de Oracle JET. Cierre la ventana de terminal.

Tarea 7: Archivar el componente web

Después de configurar el componente web, debe preparar el componente web para otras aplicaciones.

Abra una ventana de terminal, cambie al directorio JET_Web_Component_Application y ejecute el comando ojet package component con el nombre del componente, demo-update-item, como parámetro de comando:

$ ojet package component demo-update-item

Oracle JET empaqueta el contenido del directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item en un archivo ZIP (demo-update-item_1-0-0.zip) que crea en el directorio JET_Web_Component_Application/dist. Como parte de la tarea de empaquetado, Oracle JET transfiere el código TypeScript del directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item al código JavaScript. Por ejemplo, si abre el archivo JET_Web_Component_Application/dist/demo-update-item_1-0-0.zip, observará que contiene un archivo demo-update-item-viewModel.js que las herramientas de Oracle JET han transpilado del archivo demo-update-item-viewModel.ts en el directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item.

Distribuye el archivo demo-update-item_1-0-0.zip del directorio JET_Web_Component_Application/dist a los consumidores que desean reutilizar el componente web en su aplicación web. Para utilizar el componente web en su aplicación web, los consumidores extraen el contenido del archivo ZIP a un directorio demo-update-item en su aplicación web. Vamos a profundizar en esta última tarea en el siguiente tutorial.

Más recursos de aprendizaje

Explore otras prácticas en docs.oracle.com/learn o acceda a contenido de aprendizaje más gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de formación de Oracle.

Para obtener documentación sobre los productos, visite Oracle Help Center.

Título e Información de Copyright

Enhance and archive the Oracle JET web component

F53185-01

February 2022