Dados vinculam um componente em um aplicativo Web Oracle JET

Introdução

Este tutorial mostra como usar um documento JSON local em seu aplicativo Web Oracle JavaScript Extension Toolkit (Oracle JET).

O Oracle JET é um kit de ferramentas de desenvolvimento que fornece várias classes de provedores de dados para gerenciar dados de várias origens. Em viewModel, você preencherá uma instância de MutableArrayDataProvider com os dados lidos em um arquivo JSON e, em seguida, vinculará a instância MutableArrayDataProvider aos elementos HTML personalizados do Oracle JET na view.

Objetivos

Ao concluir este tutorial, você aprenderá a ler dados de um documento JSON em um provedor de dados, adicionar um componente de View de Lista do Oracle JET e vincular os dados ao componente aos objetos de dados JSON.

Pré-requisitos

Um ambiente de desenvolvimento configurado para criar aplicativos Oracle JET, com o runtime JavaScript, Node.js e a interface de linha de comando da release mais recente do Oracle JET instalada
Conclusão dos tutoriais anteriores nesta programação de estudo, para que você tenha criado a pasta JET_Web_Application
O download do store_data.json foi feito para o diretório JET_Web_Application/src/ts/

Tarefa 1: Fazer Download do Documento JSON e Examinar os Dados

Faça download do arquivo store_data.json para o diretório JET_Web_Application/src/ts/.
Abra o arquivo store_data.json no seu Web browser e exiba a estrutura de dados. O arquivo store_data.json contém uma lista de objetos de atividade e suas propriedades. Cada atividade inclui uma matriz de itens com suas próprias propriedades.

Tarefa 2: Preencher um Provedor de Dados no ViewModel

Você envia dados do arquivo JSON para um objeto ojmutablearraydataprovider do Oracle JET.

Navegue até o diretório JET_Web_Application/src/ts/viewModels e abra o arquivo dashboard.ts em um editor.

Importe os dados do arquivo store_data.json para que estejam disponíveis no 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";

Se não estiver presente, importe o módulo ojmutablearraydataprovider que você usará para armazenar os dados JSON.
```
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
```
Antes da classe DashboardViewModel(), defina um alias de tipo, Activity, que inclua o campo id do tipo number.
```
...
type Activity = {
  id: number;
}

class DashboardViewModel {
```

Na classe DashboardViewModel(), adicione um tipo para o activityDataProvider que você criará na próxima etapa.

class DashboardViewModel {

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

No método constructror da classe DashboardViewModel(), crie uma instância de MutableArrayDataProvider (activityDataProvider) e use o método JSON.parse para ler os dados JSON.

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

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

Importe o módulo do componente Oracle JET List View.

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

O módulo ojlistview suporta a exibição na próxima seção deste tutorial.

Salve o arquivo dashboard.ts. Seu arquivo dashboard.ts deve ser semelhante a final-data-bind-dashboard-ts.txt.

Tarefa 3: Vincular Dados ao Componente de Exibição de Lista na Exibição

O elemento oj-list-view é um elemento HTML personalizado do Oracle JET com recursos interativos que é uma versão aprimorada de uma lista HTML. Você fornece os dados à lista vinculando a variável activityDataProvider preenchida em viewModel ao atributo data da View em Lista.

Navegue até o diretório JET_Web_Application/src/ts/views e abra o arquivo dashboard.html em um editor.

No arquivo dashboard.html, adicione um elemento div com um valor de atributo id de activitiesContainer acima do elemento itemDetailsContainer div que contém os componentes Selecionar Único e Gráfico do Oracle JET.

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

No elemento activitiesContainer div, adicione um elemento oj-list-view com um atributo data que use uma vinculação unidirecional para obter os dados da 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>
```
Também especificamos o valor visible para o atributo gridlines de forma que uma linha de grade apareça entre os itens da lista e o atributo aria-labelledby como uma melhor prática de acessibilidade.

No elemento oj-list-view criado, adicione um elemento HTML template com um atributo slot para renderizar cada item na 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>

No elemento de modelo, adicione outro elemento div que contenha um elemento HTML personalizado oj-bind-text com um atributo value que use uma vinculação unidirecional para obter os dados da lista do objeto de dados atual.

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

Adicione um elemento HTML h3 para fornecer um cabeçalho para a lista de atividades.

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

No itemDetailsContainer div, adicione um elemento h3 e um elemento oj-label para fornecer um cabeçalho para o gráfico.

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

Salve o arquivo dashboard.html. Seu arquivo dashboard.html deve ser semelhante a final-data-bind-dashboard-html.txt.

Tarefa 4: Executar o Aplicativo Web

Na janela do terminal, altere para o diretório JET_Web_Application e execute o aplicativo.
```
$ ojet serve
```
Seu browser exibe a lista de atividades visíveis na guia Painel do seu aplicativo Web.

Descrição da ilustração output.png
Feche a janela ou guia do browser que exibe seu aplicativo Web em execução.
Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair do job em batch de ferramentas do Oracle JET.
Deixe a janela do terminal aberta para o seu próximo tutorial.

Mais Recursos de Aprendizagem

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal YouTube do Oracle Learning. Além disso, visite education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.

Título e Informações de Copyright

Data bind a component in an Oracle JET web app

F53098-01

February 2022