Agregar componentes a una aplicación web de Oracle JET

Introducción

En este tutorial se muestra cómo agregar componentes de Oracle JavaScript Extension Toolkit (Oracle JET) a la plantilla de inicio de navdrawer de la aplicación web Oracle JET.

Oracle JET es un kit de herramientas de desarrollo que se utiliza para crear aplicaciones web de cliente. Para crear la aplicación web, utilice Oracle JET Cookbook para localizar los ejemplos de componentes que ilustran la funcionalidad específica que desea agregar a la aplicación. Oracle JET Cookbook también proporciona instrucciones que puede seguir para soportar comportamientos específicos de los componentes.

Objetivos

Al finalizar este tutorial, habrá aprendido a utilizar Oracle JET Cookbook para agregar componentes de Oracle JET Select Single y Chart al separador Panel de control de la aplicación web. También aprenderá a conectar estos dos componentes para agregar interactividad entre ellos.

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 Oracle JET instalada
Finalización de los tutoriales anteriores en esta ruta de aprendizaje, para que haya creado la carpeta JET_Web_Application
Acceso al Oracle JET Cookbook

Tarea 1: Agregar clases de estilo

Es una buena práctica colocar los estilos que desea aplicar a los componentes en un archivo CSS independiente en lugar de utilizar el atributo style en línea demostrado en el siguiente ejemplo:

<oj-select-single id="basicSelect" style="max-width:20em" data="[[chartTypesDP]]"value="">

Antes de agregar los componentes Seleccionar Único y Gráfico 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_Web_Application/src/css 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 de los componentes Seleccionar Único y Gráfico.
```
.selectSingleStyle {
   max-width:20em
}

.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}
```
Más adelante en este tutorial, los componentes Seleccionar uno y Gráfico 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: Adición de un solo componente de selección

Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.
En el elemento HTML div del área de contenido del panel de control, agregue un elemento HTML personalizado oj-label y un elemento oj-select-single. Agregue también un atributo id con un valor de parentContainer al elemento div.
```
   
   <h1>Dashboard Content Area</h1>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      <oj-select-single id="basicSelect"
                        class="selectSingleStyle"
                        data="[[chartTypesDP]]"
                        value="{{val}}">
      </oj-select-single>
   </div>
   
```
Los corchetes que rodean a chartTypesDP observable en el atributo data significan que el componente puede leer el valor, pero no actualizarlo. Las llaves que rodean el observable val en el atributo value significan que el componente puede leer y actualizar el valor. Por lo tanto, los corchetes que rodean unobservable definen una unión unidireccional, mientras que las llaves que rodean unobservable definen una unión bidireccional.
Edite el elemento HTML h1 para mostrar la cabecera Product Information.
```
<h1>Product Information</h1>
```
Guarde el archivo dashboard.html. El fragmento de código dashboard.html debe ser similar a add-select-single-dashboard-html.txt.
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 la biblioteca de exclusión, el módulo de proveedor de datos de matriz modificable de Oracle JET y los módulos Oracle JET para el componente Label y el componente Select Single.
```
import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
```

Antes de la clase DashboardViewModel(), agregue un alias de tipo para los tipos de gráfico (ChartType). En la clase DashboardViewModel(), agregue una matriz de datos de tipo de gráfico (chartTypes) y una instancia de proveedor de datos de matriz modificable (chartTypesDP) para permitir el enlace de los datos de tipo de gráfico mediante el componente Select Single.

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

class DashboardViewModel {
   chartTypes: Array<Object>;
   chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;

   constructor() {
   this.chartTypes = [
      { value: "pie", label: "Pie" },
      { value: "bar", label: "Bar" },
      ];

   this.chartTypesDP = new MutableArrayDataProvider<
      ChartType["value"],
      ChartType
      >(this.chartTypes, {
      keyAttributes: "value",
      });
  } // End constructor

Agregue el método ko.observable para mostrar el tipo de gráfico circular como valor por defecto para el punto de salida observable del componente Select Single.

class DashboardViewModel {
   val: ko.Observable<string>;
   . . .

      constructor() {
        this.val = ko.observable("pie");
        . . .

Guarde el archivo dashboard.ts. El fragmento de código dashboard.ts debe ser similar a add-select-single-dashboard-ts.txt.
Abra una ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación.
```
$ ojet serve
```
El explorador muestra la plantilla de inicio de navdrawer con el componente Select Single visible en el separador Dashboard de la aplicación web.

Descripción de la ilustración panel de control-with-select.png
Deje abierta la ventana de terminal y el explorador que muestra la aplicación web.

El comando ojet serve permite realizar cambios en el código de aplicación en JET_Web_Application/src que se reflejan inmediatamente en el explorador. Una excepción es que si agrega o suprime un archivo, debe ejecutar ojet serve para ver el cambio reflejado en el explorador. No realice cambios en el código de aplicación en la carpeta JET_Web_Application/web porque sobrescribirá estos cambios la próxima vez que ejecute el comando ojet serve. El comando ojet serve crea y sirve el contenido de la carpeta JET_Web_Application/src en la carpeta JET_Web_Application/web.

Tarea 3: Agregar un componente de gráfico

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

Agregue el elemento HTML personalizado oj-chart debajo del elemento HTML personalizado oj-select-single de modo que los dos elementos aparezcan dentro del mismo elemento HTML div de Dashboard Content Area.

<oj-select-single id="basicSelect"
  . . .
 </oj-select-single>
<oj-chart id="barChart"
          type="bar"
          data="[[chartDataProvider]]"
          animation-on-display="auto"
          animation-on-data-change="auto"
          hover-behavior="dim"
          class="chartStyle">
</oj-chart>

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

<oj-chart id="barChart"
          . . .
          class="chartStyle">
  <template slot='itemTemplate' data-oj-as='item'>
  </template>
</oj-chart>

En el elemento de plantilla, agregue un elemento HTML personalizado oj-chart-item con atributos que utilicen enlaces unidireccionales para obtener los datos del gráfico del objeto actual.

<oj-chart id="barChart"
          . . .
          class="chartStyle">
  <template slot='itemTemplate' data-oj-as='item'>
    <oj-chart-item value='[[item.data.value]]'
                  group-id='[[ [item.data.group] ]]'
                  series-id='[[item.data.series]]'>
    </oj-chart-item>
  </template>
</oj-chart>

Guarde el archivo dashboard.html. El fragmento de código dashboard.html debe ser similar a add-chart-dashboard-html.txt.
Navegue al directorio JET_Web_Application/src/ts/viewModels y abra el archivo dashboard.ts en un editor.

Agregue el juego observable chartDataProvider a un nuevo objeto MutableArrayDataProvider de Oracle JET que contendrá los datos del gráfico.

class DashboardViewModel {
. . .	
   chartDataProvider: MutableArrayDataProvider<string, {}>;

constructor() {

   . . .
   this.val = ko.observable("pie");

   this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
   keyAttributes: "id",
   });
   . . .
}

En la clase DashboardViewModel(), agregue la matriz chartData debajo del observable Knockout. El tipo de esta matriz se declara Array<Object>.

chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
chartData: Array<Object>;

constructor() {
   this.val = ko.observable("pie");

   this.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 }
   ];

Importe el módulo para el componente Gráfico de Oracle JET.

import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojknockout";
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";

Guarde el archivo dashboard.ts. El archivo dashboard.ts debe ser similar a final-chart-dashboard-ts.txt.
Vuelva al explorador para ver los cambios en la aplicación web.

El explorador muestra la plantilla de inicio de navdrawer con el componente Gráfico de barras visible en el separador Panel de control de la aplicación web.

Descripción de la ilustración panel de control-with-select-chart.png

Tenga en cuenta que el separador Panel de control muestra solo el formato de gráfico de barras para cada opción de lista desplegable Seleccionar gráfico. Debe agregar una dependencia entre los dos componentes para mostrar cada formato de gráfico.
Deje abierta la ventana de terminal y el explorador que muestra la aplicación web.

Tarea 4: Conexión de los dos componentes

Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.
En el archivo dashboard.html, edite el elemento HTML personalizado oj-chart para conectar el atributo type del componente de gráfico al atributo value del componente Select Single con un enlace unidireccional.
```
<oj-chart id="barChart"
       type="[[val]]"
       . . .
 </oj-chart>
```
Las llaves cuadradas que rodean el observable val en el atributo type significan que el componente puede leer el valor, pero no actualizarlo. Las llaves cuadradas que rodean un observable definen una unión unidireccional.
Guarde el archivo dashboard.html. El archivo dashboard.html debe ser similar a final-connect-dashboard-html.txt.
Vuelva al explorador para ver los cambios en la aplicación web.

El explorador ahora muestra la plantilla de inicio de navdrawer con los componentes Seleccionar único y Gráfico circular visibles en el separador Panel de control de la aplicación web.

Descripción de la ilustración connect-select-and-chart.png
Para ver los diferentes formatos de gráfico, seleccione entre las opciones de la lista desplegable Seleccionar gráfico.
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.
Deje abierta la ventana de terminal para el siguiente tutorial.

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

Add components to an Oracle JET web app

F53085-01

February 2022