Crear un 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). Las herramientas de Oracle JET se utilizan para crear el componente web. Puede utilizar una plantilla de inicio de Oracle JET para generar los archivos HTML y JavaScript o TypeScript que modifique para agregar el componente web.

Objetivos

En este tutorial, creará y configurará un componente web de Oracle JET en una aplicación web que utilice la plantilla inicial de navdrawer. También aprenderá a modificar los archivos de componentes web para agregar un componente de diseño de formulario con cuatro campos de texto de entrada.

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
Acceso a Oracle JET Developer Cookbook

Tarea 1: Creación de una aplicación web de Oracle JET

Utilice la plantilla de inicio de navdrawer y las herramientas de Oracle JET para crear la carpeta de la aplicación en la que creará el componente web de Oracle JET.

Abra una ventana de terminal como administrador y cree una aplicación web denominada JET_Web_Component_Application con la plantilla de inicio de navdrawer.
```
$ ojet create JET_Web_Component_Application --template=navdrawer --typescript  
```
Cambie al directorio JET_Web_Component_Application y ejecute la aplicación.
```
$ ojet serve
```
El explorador muestra la plantilla de inicio de navdrawer con el contenido por defecto visible en el separador Panel de control de la aplicación web.

Descripción de la ilustración Dashboard_default_message.png
Cierre la ventana o separador del explorador que muestra la aplicación web en ejecución.

Tarea 2: Creación de un Componente Web de Oracle JET

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.
En el directorio JET_Web_Component_Application, cree el componente web demo-update-item.
```
$ ojet create component demo-update-item
```
Las herramientas de Oracle JET crean el componente web demo-update-item en el directorio JET_Web_Component_Application/src/ts/jet-composites. El nombre del componente web contiene un guión y está en minúsculas, según lo requieran las convenciones de nomenclatura W3C para los componentes web.

Tarea 3: Adición del componente web a la aplicación

Para utilizar el componente web en la aplicación web, agregue el módulo del cargador de componentes web al archivo TypeScript de la aplicación web y agregue el elemento del componente web al archivo HTML de la aplicación web.

Navegue al directorio JET_Web_Component_Application/src/ts/viewModels y abra el archivo dashboard.ts en un editor.
En la parte superior del archivo dashboard.ts, importe el módulo del cargador de componentes web.
```
import * as AccUtils from "../accUtils";
import "demo-update-item/loader";
```
Guarde el archivo dashboard.ts.
Navegue al directorio JET_Web_Component_Application/src/ts/views y abra el archivo dashboard.html en un editor.

Sustituya el contenido del elemento div en Dashboard Content Area por el elemento demo-update-item.

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

Edite el elemento h1 para mostrar Update Item Details como título y agregue la clase 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>

Agregue una div con una clase oj-panel alrededor del contenido que ha modificado para mostrar un borde de selección para el componente 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>

Guarde el archivo dashboard.html.
En la ventana de terminal, cambie al directorio JET_Web_Component_Application y ejecute la aplicación.
```
$ ojet serve
```
El explorador muestra el panel Actualizar detalles de elemento del componente web en el separador Panel de control de la aplicación web. El panel muestra un borde y un mensaje predeterminado.

Descripción de la ilustración update_item_details_message.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 4: Adición de un formulario al componente web

Configure el componente web para que muestre un formulario con cuatro campos de texto de entrada. Modifique los archivos HTML y TypeScript del componente web para agregar un componente de diseño de formulario.

Abra Oracle JET Cookbook y vaya a la página inicial de Cookbook y, a continuación, haga clic en Formularios en la barra de menús y seleccione el componente Diseño de formulario. Lea sobre cómo gestionar el diseño de etiquetas y campos en un formulario.
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.

Sustituya el contenido del archivo demo-update-item-view.html por el componente de diseño de formulario de Oracle JET y cuatro campos de texto de entrada de Oracle JET para que se muestren en el panel Actualizar detalles de elemento.

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

Guarde el archivo demo-update-item-view.html.
En el directorio JET_Web_Component_Application/src/ts/jet-composites/demo-update-item, abra el archivo demo-update-item-viewModel.ts en un editor.

En la clase ViewModel, agregue un isSmall observable Knockout que utilice la utilidad ResponsiveKnockoutUtils con el método createMediaQueryObservable() para crear un observable basado en el ancho de pantalla.

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

Agregue también un observable calculado de Knockout que devuelva top si el tamaño de la pantalla es pequeño y start de lo contrario.

. . .
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 la parte superior del archivo demo-update-item-viewModel.ts, importe los siguientes módulos necesarios para ejecutar el código que ha agregado en los pasos anteriores.

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


. . . 

Guarde el archivo demo-update-item-viewModel.ts. El código demo-update-item-viewModel.ts debe ser similar a demo-update-item-viewModel-ts.txt.
Vuelva al explorador para ver los cambios en la aplicación web.

El explorador muestra el componente web con cuatro campos de texto de entrada en el separador Panel de control de la aplicación web.

Descripción de la ilustración update_item_details_formlayout.png
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.

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

Create an Oracle JET web component

F53193-01

February 2022