Agregar componentes a una aplicación DOM virtual de Oracle JET

Introducción

En este tutorial se muestra cómo agregar componentes de Oracle JavaScript Extension Toolkit (Oracle JET) al componente Content en la plantilla de inicio basic de la aplicación DOM virtual de Oracle JET.

Oracle JET es un conjunto de herramientas de desarrollo que se utiliza para crear aplicaciones DOM virtuales del cliente. Para utilizar los componentes de Oracle JET en la aplicación DOM virtual, utilice el libro de cocina de Oracle JET para localizar los ejemplos de componentes que ilustran la funcionalidad específica que desea agregar a la aplicación. Aunque no está optimizado para JSX (la sintaxis de etiqueta utilizada por las aplicaciones DOM virtuales), el libro de cocina muestra los componentes de Oracle JET y el código TypeScript que puede utilizar para inferir el equivalente de JSX en la aplicación DOM virtual de Oracle JET, por ejemplo, mostrando la sentencia de importación que debe utilizar para incluir el componente en la aplicación DOM virtual.

Objetivos

En este tutorial, aprenderá a utilizar Oracle JET Cookbook para agregar los componentes Select Single y Chart de Oracle JET al componente Content de la aplicación DOM virtual. También aprenderá a conectar estos dos componentes para agregar interactividad entre ellos.

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones DOM virtuales de Oracle JET que incluye una instalación de Node.js
Finalización del tutorial anterior en esta ruta de aprendizaje, Creación de una aplicación Oracle JET Virtual DOM mediante una plantilla de inicio
Acceso al Oracle JET Cookbook

Tarea 1: Agregar clases de estilo

Se recomienda colocar los estilos que desea aplicar a los componentes en un archivo CSS independiente en lugar de utilizar el atributo style en línea que se muestra en el siguiente ejemplo:

<oj-select-single
  id="basicSelect"
  style="max-width:20em"
  data="{chartTypesDP}"
></oj-select-single>

Antes de agregar los componentes Select Single y Chart a nuestra página, crearemos clases de estilo en el archivo CSS de nuestra aplicación a las que los componentes pueden hacer referencia.

Navegue hasta el directorio JET-Virtual-DOM-app/src/styles y abra el archivo app.css en un editor.

Al final del archivo app.css, agregue las siguientes clases de estilo que determinarán las propiedades de estilo para los componentes Select Single y Chart.

.selectSingleStyle {
  max-width: 20em;
}

.chartStyle {
  max-width: 500px;
  width: 100%;
  height: 350px;
}

Más adelante en este tutorial, los componentes Select Single y Chart hacen referencia a estos estilos mediante el atributo class del componente:

<oj-select-single id="basicSelect" . . . class="selectSingleStyle"
  >. . .
  <oj-chart id="barChart" . . . class="chartStyle"
    >. . .</oj-chart
  ></oj-select-single
>

Tarea 2: Agregar un único componente de selección

Navegue hasta el directorio JET-Virtual-DOM-app/src/components/content y abra el archivo index.tsx en un editor.

En la parte superior del archivo index.tsx, importe los módulos de Oracle JET para los componentes MutableArrayDataProvider, Label y Select Single, además de la definición de tipo para el componente Select Single.

import { h } from "preact";
import "ojs/ojlabel";
import "ojs/ojselectsingle";
import { ojSelectSingle } from "ojs/ojselectsingle";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

En el elemento div de HTML de la función Content(), agregue un elemento h1 de HTML para mostrar la cabecera Product Information.

. . .
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

export function Content() {
   return (
      <div class="oj-web-applayout-max-width oj-web-applayout-content">
         <h1>Product Information</h1>
      </div>
   );
}

En el elemento HTML div de la función Content(), agregue otro elemento div y, en este elemento div más reciente, agregue un elemento oj-label y un elemento oj-select-single. Agregue también un atributo id con un valor de itemDetailsContainer al nuevo elemento div.

. . .
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="itemDetailsContainer">
 <oj-label for="basicSelect">Select Chart:</oj-label>
 <oj-select-single
      id="basicSelect"
      value="pie"
      class="selectSingleStyle"
      data={chartTypesDP}
   ></oj-select-single>
 </div>
 </div>

Antes de la función Content(), agregue un alias de tipo para los tipos de gráfico (ChartType) y una matriz de datos de tipo de gráfico (chartTypesData). También antes de la función Content(), agregue una instancia de la clase MutableArrayDataProvider (chartTypesDP) para permitir el enlace de los datos de tipo de gráfico mediante el componente Select Single.

. . .
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

type ChartType = {
   id: number;
   value: string;
   label: string;
};

const chartTypeData = [
   { value: "bar", label: "Bar" },
   { value: "pie", label: "Pie" }
];

const chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>
   = new MutableArrayDataProvider(chartTypeData, { keyAttributes: "value" });

export function Content() {
. . .

Guarde el archivo index.tsx.

El código index.tsx debe tener un aspecto similar a add-select-single-index-tsx.txt.
Abra una ventana de terminal, cambie al directorio JET-Virtual-DOM-app y ejecute la aplicación.
```
npx ojet serve
```
El explorador muestra la plantilla de inicio basic con el componente Select Single visible en la aplicación DOM virtual.
Deje abierta la ventana de terminal y el explorador que muestra la aplicación DOM virtual.

El comando serve de la interfaz de línea de comandos de Oracle JET permite realizar cambios en el código del directorio JET-Virtual-DOM-app/src que se reflejan inmediatamente en el explorador. Una excepción es que si agrega o suprime un archivo, debe volver a ejecutar npx @oracle/ojet-cli serve para ver el cambio reflejado en el explorador. El comando serve crea y sirve el contenido del directorio JET-Virtual-DOM-app/src al directorio JET-Virtual-DOM-app/web. No realice cambios en el código del directorio JET-Virtual-DOM-app/web porque sobrescribirá estos cambios la próxima vez que ejecute el comando npx @oracle/ojet-cli serve.

Tarea 3: Agregar un componente de gráfico

En el archivo index.tsx abierto del directorio JET-Virtual-DOM-app/src/components/content, importe el módulo y las definiciones de tipo para el componente de gráfico de Oracle JET.

import { h } from "preact";
import "ojs/ojlabel";
import "ojs/ojselectsingle";
import { ojSelectSingle } from "ojs/ojselectsingle";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojchart";
import { ojChart } from "ojs/ojchart";
. . .

Antes de la función Content(), agregue un alias de tipo para los datos de gráfico (ChartItem), una matriz de datos de gráfico (chartData) y una instancia de la clase MutableArrayDataProvider (chartDataProvider) para hacer referencia a los datos que representa el componente de gráfico.

. . .

type ChartItem = {
   id: number;
   series: string;
   group: string;
   value: number;
   };

const chartData  = [
   { "id": 0, "series": "Baseball", "group": "Group A", "value": 42 },
   { "id": 1, "series": "Baseball", "group": "Group B", "value": 34 },
   { "id": 2, "series": "Bicycling", "group": "Group A", "value": 55 },
   { "id": 3, "series": "Bicycling", "group": "Group B", "value": 30 },
   { "id": 4, "series": "Skiing", "group": "Group A", "value": 36 },
   { "id": 5, "series": "Skiing", "group": "Group B", "value": 50 },
   { "id": 6, "series": "Soccer", "group": "Group A", "value": 22 },
   { "id": 7, "series": "Soccer", "group": "Group B", "value": 46 }
]

const chartDataProvider: MutableArrayDataProvider<ChartItem["id"], ChartItem> =
new MutableArrayDataProvider(chartData, { keyAttributes: "id" });

export function Content() {
. . .

En el elemento HTML div de la función Content() que tiene un valor de atributo id de itemDetailsContainer, agregue el elemento HTML personalizado oj-chart debajo del elemento HTML personalizado oj-select-single de modo que los dos elementos aparezcan dentro del elemento HTML div de itemDetailsContainer HTML.

. . .
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="itemDetailsContainer">
 <oj-label for="basicSelect">Select Chart:</oj-label>
 <oj-select-single . . .></oj-select-single>
   <oj-chart id="barChart" type="bar" data={chartDataProvider} animationOnDisplay="auto"
            animationOnDataChange="auto" hoverBehavior="dim" class="chartStyle"></oj-chart>
 </div>
</div>

En el elemento HTML personalizado oj-chart, agregue un elemento HTML template con un atributo slot para representar cada elemento del gráfico.

. . .
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="itemDetailsContainer">
 <oj-label for="basicSelect">Select Chart:</oj-label>
 <oj-select-single . . .></oj-select-single>
  <oj-chart . . .>
      <template slot="itemTemplate" render={chartItem}></template>
   </oj-chart>
 </div>
</div>

Antes de la sentencia return en la función Content(), agregue el siguiente código para representar los datos del elemento de gráfico.

. . .
export function Content() {

const chartItem = (
   item: ojChart.ItemTemplateContext<ChartItem["id"], ChartItem>
) => {
   return (
      <oj-chart-item
         value={item.data.value}
         groupId={[item.data.group]}
         seriesId={item.data.series}></oj-chart-item>
   );
};

return (

Guarde el archivo index.tsx.

El archivo index.tsx debe tener un aspecto similar al de final-chart-index-tsx.txt.
Vuelva al navegador para ver los cambios en la aplicación DOM virtual.

El explorador muestra la plantilla de inicio basic con el componente Gráfico representando un gráfico de barras en la aplicación DOM virtual.

Observe que la aplicación DOM virtual muestra solo el formato del gráfico de barras para cada opción de lista desplegable Seleccionar gráfico. Debe agregar una dependencia entre los dos componentes para que el componente Documentación responda al evento de selección en el componente Seleccionar único.
Deje abierta la ventana de terminal y el explorador que muestra la aplicación DOM virtual.

Tarea 4: Conexión de los dos componentes

En el archivo index.tsx abierto desde el directorio JET-Virtual-DOM-app/src/components/content, importe los enlaces useState y useCallback y ComponentProps desde Preact.
```
import { h, ComponentProps } from "preact";
import { useState, useCallback } from "preact/hooks";
. . .
```
Antes de la función Content(), agregue un alias de tipo para las propiedades del gráfico (ChartProps).
```
type ChartProps = ComponentProps<"oj-chart">;

export function Content() {
. . .
```

En la función Content(), agregue código para definir un valor inicial de bar para el componente Select Single mediante el enlace useState de Preact e incluya el enlace useCallback de Preact para devolver los tipos de gráfico recién seleccionados al enlace useState.

export function Content() {
   const [val, setVal] = useState("pie" as ChartProps["type"]);

   const valChangeHandler = useCallback(
      (event: ojSelectSingle.valueChanged<ChartType["value"], ChartType>) => {
         setVal(event.detail.value as ChartProps["type"]);
      },
      [val, setVal]
   );
. . .

En el elemento div HTML itemDetailsContainer de la función Content(), actualice los valores de atributos personalizados oj-select-single y oj-chart para hacer referencia al valor seleccionado actual (val) y a un manejador de eventos (valChangeHandler) al que se llama cuando un usuario selecciona un nuevo tipo de gráfico.

<div id="itemDetailsContainer">
   . . .
   <oj-select-single
      id="basicSelect"
      . . .
      value={val}
      onvalueChanged={valChangeHandler}
   ></oj-select-single>

   <oj-chart
      id="barChart"
      type={val}
      . . .>

Guarde el archivo index.tsx.

El archivo index.tsx debe tener un aspecto similar a final-connect-index-tsx.txt.
Vuelva al navegador para ver los cambios en la aplicación DOM virtual.

Ahora, el explorador muestra la plantilla de inicio basic con los componentes Seleccionar único y Gráfico circular visibles en la aplicación DOM virtual.
Para ver los diferentes formatos de gráfico, seleccione entre las opciones de la lista desplegable Seleccionar gráfico.
Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual 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.
Deje la ventana de terminal abierta para su siguiente tutorial.

Siguiente paso

Continúe con el siguiente tutorial de este módulo.

Este tutorial forma parte del módulo Su Primera Aplicación Oracle JET Virtual DOM.

Creación de una Aplicación Oracle JET Virtual DOM mediante una Plantilla de Inicio
Adición de Componentes a una Aplicación Oracle JET Virtual DOM
Enlace de Datos de un Componente en una Aplicación Oracle JET Virtual DOM
Depuración de una Aplicación Oracle JET Virtual DOM
Adición de Pruebas de Unidad a una Aplicación Oracle JET Virtual DOM
Preparación para desplegar una aplicación Oracle JET Virtual DOM

Puede volver a la página principal de la ruta de aprendizaje de DOM virtual para acceder a todos los módulos de creación de aplicaciones de DOM virtuales.

Más recursos de aprendizaje

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

Para obtener documentación sobre el producto, visite Oracle Help Center.

Título e Información de Copyright

Add components to an Oracle JET virtual DOM app

F61049-02

Oracle y/o sus filiales.