Los datos enlazan un componente en una aplicación web de Oracle JET

Introducción

En este tutorial se muestra cómo utilizar un documento JSON local en la aplicación web Oracle JavaScript Extension Toolkit (Oracle JET).

Oracle JET es un kit de herramientas de desarrollo que proporciona una serie de clases de proveedores de datos para gestionar datos de distintos orígenes. En viewModel, rellenará una instancia de MutableArrayDataProvider con los datos leídos de un archivo JSON y, a continuación, enlazará la instancia MutableArrayDataProvider a los elementos HTML personalizados de Oracle JET en la vista.

Objetivos

Al finalizar este tutorial, aprenderá a leer datos de un documento JSON en un proveedor de datos, agregar un componente de vista de lista de Oracle JET y enlazar los datos del componente a los objetos de datos JSON.

Requisitos

Tarea 1: Descarga del documento JSON y examen de los datos

  1. Descargue el archivo store_data.json en el directorio JET_Web_Application/src/ts/.
  2. Abra el archivo store_data.json en el explorador web y visualice la estructura de datos. El archivo store_data.json contiene una lista de objetos de actividad y sus propiedades. Cada actividad incluye una matriz de elementos con sus propias propiedades.

Tarea 2: Rellenar un proveedor de datos en ViewModel

Transfiere datos del archivo JSON a un objeto ojmutablearraydataprovider de Oracle JET.

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

  2. Importe los datos del archivo store_data.json para que estén disponibles en ViewModel.

    import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";

  3. Si no está presente, importe el módulo ojmutablearraydataprovider que utilizará para contener los datos JSON.

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

  4. Antes de la clase DashboardViewModel(), defina un alias de tipo, Activity, que incluya el campo id de tipo number.

    ...
type Activity = {
  id: number;
}

class DashboardViewModel {

  5. En la clase DashboardViewModel(), agregue un tipo para activityDataProvider que creará en el siguiente paso.

    class DashboardViewModel {

   val: ko.Observable<string>;
   . . .
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   chartData: Array<Object>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;    
   . . .

  6. En el método constructror de la clase DashboardViewModel(), cree una instancia de MutableArrayDataProvider (activityDataProvider) y utilice el método JSON.parse para leer los datos JSON.

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

   this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
      >(JSON.parse(storeData), {
         keyAttributes: "id", 
      });
 . . .

  7. Importe el módulo de componente de vista de lista de Oracle JET.

    import * as storeData from "text!../store_data.json";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojlistview";

    El módulo ojlistview soporta la vista en la siguiente sección de este tutorial.

  8. Guarde el archivo dashboard.ts. El archivo dashboard.ts debe ser similar a final-data-bind-dashboard-ts.txt.

Tarea 3: Enlace de datos del componente de vista de lista en la vista

El elemento oj-list-view es un elemento HTML personalizado de Oracle JET con funciones interactivas que es una versión mejorada de una lista HTML. Para proporcionar los datos a la lista, enlace la variable activityDataProvider rellenada en viewModel al atributo data de la vista de lista.

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

  2. En el archivo dashboard.html, agregue un elemento div con un valor de atributo id de activitiesContainer sobre el elemento itemDetailsContainer div que contiene los componentes Oracle JET Select Single y Chart.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      ...
   </div>

  3. En el elemento activitiesContainer div, agregue un elemento oj-list-view con un atributo data que utilice un enlace unidireccional para obtener los datos de la lista.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
 <div id="activitiesContainer">
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
   </oj-list-view>
 </div>

    También se especifica el valor visible para el atributo gridlines para que aparezca una línea de cuadrícula entre los elementos de la lista y el atributo aria-labelledby como una mejor práctica de accesibilidad.

  4. En el elemento oj-list-view que ha creado, agregue un elemento template HTML con un atributo slot para representar cada elemento de la lista.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
         </template>
   </oj-list-view>
</div>

  5. En el elemento de plantilla, agregue otro elemento div que contenga un elemento HTML personalizado oj-bind-text con un atributo value que utilice un enlace unidireccional para obtener los datos de lista del objeto de datos actual.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
            <div>
               <strong>
                  <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
               </strong>
            </div>
         </template>
   </oj-list-view>
</div>

  6. Agregue un elemento HTML h3 para proporcionar una cabecera para la lista de actividades.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
. . .

  7. En itemDetailsContainer div, agregue un elemento h3 y un elemento oj-label para proporcionar una cabecera para el gráfico.

    . . .
<div id="itemDetailsContainer">
  <h3>Item Details</h3>
    <oj-label for="basicSelect">Select Chart:</oj-label>
. . .

  8. Guarde el archivo dashboard.html. El archivo dashboard.html debe ser similar a final-data-bind-dashboard-html.txt.

Tarea 4: Ejecución de la aplicación web

  1. En la ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación.

    $ ojet serve

    El explorador muestra la lista de actividades visibles en el separador Panel de control de la aplicación web.

    Área Product Information.

    Descripción de la ilustración output.png

  2. Cierre la ventana o separador del explorador que muestra la aplicación web en ejecución.

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

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