Utilizar el componente web en una aplicación 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 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 el componente web.

La plantilla inicial de la aplicación web de Oracle JET (aplicación que consume componentes web) que utiliza en este tutorial muestra el panel Información del producto con la sección Actividades y elementos de actividad. La sección Ítems de actividad muestra los botones Crear, Actualizar y Suprimir. El botón Actualizar muestra el cuadro de diálogo Actualizar detalles de elemento con un formulario que consta de cuatro campos de texto de entrada. El componente web que agregue a esta plantilla inicial sustituye el contenido del cuadro de diálogo Actualizar detalles de elemento.

Objetivos

En este tutorial, utilizará un componente web en una aplicación web de Oracle JET. También aprenderá a definir atributos en el archivo HTML de su aplicación web para utilizar datos de un punto final de REST.

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
(Opción 1) Finalización de la ruta de aprendizaje anterior en esta serie: Desarrollo de una aplicación web con soporte de CRUD en Oracle JavaScript Extension Toolkit
(Opción 2) Si no completó la ruta de aprendizaje anterior en esta serie: jet_web_application_temp.zip descargado
Finalización de los tutoriales anteriores en esta ruta de aprendizaje, para que haya creado un archivo demo-update-item.zip de su componente web
La aplicación finalizada jet_web_component_application_final.zip se ha descargado de manera opcional

Tarea 1: Descarga de la aplicación de inicio

Omita esta tarea si continúa trabajando en una aplicación creada en la ruta de aprendizaje anterior.

Cambie el nombre de jet_web_application_temp.zip por JET_Web_Application.zip. Extraiga el contenido de la carpeta JET_Web_Application.
En la ventana de terminal, verifique que ha instalado la última versión de Oracle JET. Si aún no lo ha hecho, actualice la versión de Oracle JET.
```
$ npm list -g @oracle/ojet-cli
$ npm install -g @oracle/ojet-cli
```
Navegue a la carpeta JET_Web_Application y restaure la aplicación Oracle JET.
```
$ ojet restore
```
La aplicación está lista para su uso.
En la ventana de terminal, ejecute la aplicación.
```
$ ojet serve
```
El explorador muestra la aplicación web que muestra el panel Información de producto con la lista de actividades en la sección Actividades.

Descripción de la ilustración product-information-page.png
En el explorador que muestra la aplicación web, haga clic en una de las actividades y, a continuación, seleccione uno de los elementos de la sección Elementos de actividad.

Descripción de la ilustración activity-items-buttons.png

La sección Elementos de actividad muestra los botones Crear, Actualizar y Suprimir.
Haga clic en Actualizar para ver el contenido del cuadro de diálogo Actualizar detalles de elemento.
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 o el separador del explorador.

Tarea 2: Adición de la carpeta de componentes web

Navegue al directorio JET_Web_Application/src/ts y cree una nueva carpeta denominada jet-composites.
Extraiga el archivo demo-update-item.zip en la carpeta jet-composites.

La nueva carpeta tiene la ruta JET_Web_Application/src/ts/jet-composites/demo-update-item y contiene los archivos de origen del componente web.

Tarea 3: Edición de la aplicación ViewModel

Para utilizar el componente web en la aplicación web, agregue el módulo de cargador de componentes web al archivo JavaScript de la aplicación web.

Navegue al directorio JET_Web_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.

Tarea 4: Editar la vista de aplicación

Para utilizar el componente web en la aplicación web, también debe agregar el elemento de componente web con los atributos definidos al archivo HTML de la aplicación web.

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

Busque el elemento HTML personalizado oj-dialog con id="editDialog" y comente las referencias de elemento HTML personalizado oj-label-value y oj-input-text para los campos de texto de entrada en el elemento div slot="body".

   
<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
<div slot="body">

   <!-- <oj-label-value label-edge="inside">
      <oj-label for="chatWindow" slot="label">Item ID</oj-label>
      <div slot="value" class="slot-line">
      <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
      </div>
   </oj-label-value>
   <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
-->
</div>
. . . 
</oj-dialog>

   

En el elemento div slot="body" del botón editDialog, debajo de los elementos comentados, agregue el elemento de componente web demo-update-item con los valores de atributo para cada campo de texto de entrada.

<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
   <div slot="body">
   . . .
   <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 slot="footer">
      <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit</oj-button>
   </div> 
</oj-dialog>

Guarde el archivo dashboard.html.

Tarea 5: Prueba de la aplicación

El cuadro de diálogo Actualizar detalles de elemento muestra valores estáticos en los campos de texto de entrada. Estos valores no se pueden editar. Debe enlazar los valores de atributo a las referencias de propiedad para editar los campos.

En la ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación web.
```
$ ojet serve
```
El explorador muestra la aplicación web con el panel Información de producto.
En el explorador que muestra la aplicación web, seleccione una actividad en la sección Actividades, elija un elemento en la sección Elementos de actividad y, a continuación, haga clic en Actualizar.

Descripción de la ilustración update-button-passed-values.png

En la siguiente tarea de este tutorial, puede sustituir los datos estáticos por datos de un punto final de REST.
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 6: Uso de datos REST en la vista de aplicación

JET_Web_Application utiliza datos de un punto final REST. Debe modificar los valores de atributo del elemento de componente web demo-update-item definido en el archivo HTML de la aplicación web para mostrar datos del punto final de REST.

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

Edite los atributos definidos en el elemento demo-update-item para utilizar valores del punto final de REST de JET_Web_Application.

   
<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
 <div slot="body">
   <demo-update-item item-id="[[itemData().id]]" item-name="{{inputItemName}}" 
	      item-price="{{inputPrice}}" item-desc="{{inputShortDesc}}">
     </demo-update-item>
   </div>      
 <div slot="footer">
   <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit</oj-button>
 </div> 
</oj-dialog>
   

Las referencias de nombre de propiedad para los valores de atributo utilizan {{}} llaves dobles para el enlace de datos bidireccional y [[]] llaves dobles para el enlace de datos unidireccional.

Guarde el archivo dashboard.html.

El código dashboard.html debe ser similar a final-use-wc-dashboard-html.txt.
Vuelva al explorador para ver los cambios en la aplicación web.
En el explorador que muestra la aplicación web, seleccione una actividad en la sección Actividades, elija un elemento en la sección Elementos de actividad y, a continuación, haga clic en Actualizar.

Descripción de la ilustración update-button-rest-values.png

El cuadro de diálogo Actualizar detalles de elemento muestra los valores de atributo del punto final de REST en los campos de texto de entrada. Ahora puede actualizar los detalles del elemento y hacer clic en Enviar.
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 terminar el trabajo por lotes de herramientas de Oracle JET. Cierre la ventana de terminal.

Tarea 7: (Opcional) Ejecutar una aplicación web desde una aplicación restaurada

Si desea ejecutar la aplicación web de Oracle JET completa desde el código proporcionado, puede restaurar la aplicación desde el archivo de almacenamiento descargado. Para trabajar con una aplicación Oracle JET stripped and zipped, debe restaurar las dependencias del proyecto, incluidas las herramientas de Oracle JET y las bibliotecas y los módulos necesarios, en la aplicación extraída.

Descargue el archivo jet_web_component_application_final.zip y extraiga el contenido de la aplicación finalizada en la carpeta jet_web_component_application_final.
En la ventana de terminal, navegue hasta la carpeta jet_web_component_application_final y restaure la aplicación web Oracle JET.
```
$ ojet restore
```
Espere la confirmación.
```
Restore complete
```
La aplicación está lista para utilizarse.
Ejecute la aplicación web y realice la prueba en el explorador.
```
$ ojet serve
```
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

Use the web component in an Oracle JET web app

F53214-01

February 2022