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 de DOM virtual de Oracle JET.
Oracle JET es un kit de herramientas de desarrollo que se utiliza para crear aplicaciones DOM virtuales de cliente. Para utilizar componentes de Oracle JET en la aplicación DOM virtual, utilice Oracle JET Cookbook 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 que utilizan las aplicaciones DOM virtuales), Cookbook 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 necesita utilizar para incluir el componente en la aplicación DOM virtual.
Objetivos
En este tutorial, aprenderá a utilizar Oracle JET Cookbook para agregar 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 incluya 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}>
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 al directorio
JET-Virtual-DOM-app/src/styles
y abra el archivoapp.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">. . .
Tarea 2: agregar un único componente de selección
-
Navegue al directorio
JET-Virtual-DOM-app/src/components/content
y abra el archivoindex.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 HTML
div
de la funciónContent()
, agregue un elemento HTMLh1
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> ); }
-
Dentro del elemento HTML
div
de la funciónContent()
, agregue otro elementodiv
y, dentro de este elemento más nuevodiv
, agregue un elementooj-label
y un elementooj-select-single
. Agregue también un atributoid
con un valoritemDetailsContainer
al nuevo elementodiv
.. . . <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ónContent()
, agregue una instancia de la claseMutableArrayDataProvider
(chartTypesDP
) para permitir el enlace de los datos de tipo de gráfico por el componente Seleccionar Único.. . . 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 ser 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 @oracle/ojet-cli 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 directorioJET-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 ejecutarnpx @oracle/ojet-cli serve
para ver el cambio reflejado en el explorador. El comandoserve
crea y sirve el contenido del directorioJET-Virtual-DOM-app/src
al directorioJET-Virtual-DOM-app/web
. No realice cambios en el código del directorioJET-Virtual-DOM-app/web
porque sobrescribirá estos cambios la próxima vez que ejecute el comandonpx @oracle/ojet-cli serve
.
Tarea 3: agregar un componente de gráfico
-
En el archivo
index.tsx
abierto del directorioJET-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 del gráfico (ChartItem
), una matriz de datos del gráfico (chartData
) y una instancia de la claseMutableArrayDataProvider
(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ónContent()
que tiene un valor de atributoid
deitemDetailsContainer
, agregue el elemento HTML personalizadooj-chart
debajo del elemento HTML personalizadooj-select-single
para que los dos elementos aparezcan dentro del elemento HTMLitemDetailsContainer
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 . . .></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 HTMLtemplate
con un atributoslot
para representar cada elemento en el 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ónContent()
, 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 a final-chart-index-tsx.txt. -
Vuelva al explorador para ver los cambios en la aplicación DOM virtual.
El explorador muestra la plantilla de inicio
basic
con el componente de gráfico que representa un gráfico de barras en la aplicación DOM virtual.Descripción de la ilustración select-chart.png
Observe que la aplicación DOM virtual solo muestra el formato de gráfico de barras para cada opción de lista desplegable Seleccionar gráfico. Debe añadir una dependencia entre los dos componentes para que el componente Tabla responda al evento de selección en el componente Selección de Soltero.
-
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 del directorioJET-Virtual-DOM-app/src/components/content
, importe los enlacesuseState
yuseCallback
yComponentProps
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 el código para definir un valor inicial debar
para el componente Select Single mediante el enlaceuseState
de Preact e incluya el enlaceuseCallback
de Preact para devolver los tipos de gráficos recién seleccionados al enlaceuseState
.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
itemDetailsContainer
HTMLdiv
de la funciónContent()
, actualice los valores de atributo personalizadooj-select-single
yoj-chart
para hacer referencia al valor seleccionado actual (val
) y a un manejador de eventos (valChangeHandler
) 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 explorador para ver los cambios en la aplicación DOM virtual.
El explorador ahora 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 abierta la ventana de terminal para su siguiente tutorial.
Siguiente paso
Para continuar con el siguiente tutorial en esta ruta de aprendizaje, haga clic aquí.
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 Oracle Learning Explorer.
Para obtener documentación sobre el producto, visite Oracle Help Center.
Add components to an Oracle JET virtual DOM app
F61017-01
December 2022
Copyright © 2022, Oracle and/or its affiliates.