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

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.

  1. Navegue al directorio JET-Virtual-DOM-app/src/styles y abra el archivo app.css en un editor.
  2. 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

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

  2. 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");
    
  3. En el elemento HTML div de la función Content(), agregue un elemento HTML h1 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>
       );
    }
    
  4. Dentro del elemento HTML div de la función Content(), agregue otro elemento div y, dentro de este elemento más nuevo div, agregue un elemento oj-label y un elemento oj-select-single. Agregue también un atributo id con un valor 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>  
    
  5. 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 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() {
       . . .
    
  6. Guarde el archivo index.tsx.

    El código index.tsx debe ser similar a add-select-single-index-tsx.txt.

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

    Imagen que muestra una aplicación DOM virtual de JET que presenta un componente Select Single con una lista desplegable. Pie y Bar son las opciones de la lista desplegable.

    Descripción de la ilustración select-single.png

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

  1. 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";
    . . .
    
  2. 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 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() {
     . . .
    
    
  3. 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 para que los dos elementos aparezcan dentro del elemento HTML itemDetailsContainer 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>   
    
  4. En el elemento HTML personalizado oj-chart, agregue un elemento HTML template con un atributo slot 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>   
    
  5. 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 (
    
  6. Guarde el archivo index.tsx.

    El archivo index.tsx debe tener un aspecto similar a final-chart-index-tsx.txt.

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

    Imagen que muestra un componente de gráfico

    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.

  8. Deje abierta la ventana de terminal y el explorador que muestra la aplicación DOM virtual.

Tarea 4: Conexión de los dos componentes

  1. En el archivo index.tsx abierto del 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";
    . . . 
    
  2. 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() {
    . . . 
    
  3. En la función Content(), agregue el 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áficos 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]
       );
    . . . 
    
  4. En el elemento itemDetailsContainer HTML div de la función Content(), actualice los valores de atributo personalizado oj-select-single y oj-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}
          . . .>
    
  5. Guarde el archivo index.tsx.

    El archivo index.tsx debe tener un aspecto similar a final-connect-index-tsx.txt.

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

    Imagen que muestra el formato de tarta del componente de gráfico

    Descripción de la ilustración connect-select-and-chart.png

  7. Para ver los diferentes formatos de gráfico, seleccione entre las opciones de la lista desplegable Seleccionar gráfico.

  8. Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual en ejecución.

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

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