Criar a view de detalhes em um aplicativo Web do Oracle JET

Introdução

Os componentes do Oracle JavaScript Extension Toolkit (Oracle JET) preservam o relacionamento hierárquico de objetos de dados mestre e detalhados, conforme definido pela origem de dados. No viewModel do aplicativo Web Oracle JET, você pode usar a API do Oracle JET para criar um objeto de provedor de dados. O objeto representa um array de dados que você preenche a partir dos objetos de dados filhos de um armazenamento de dados de documentos JSON (JavaScript Object Notation). O provedor de dados do Oracle JET extrai os objetos de dados filhos com base no atributo-chave id do objeto de dados pai atual. Na view do aplicativo Web Oracle JET, o atributo data do componente View de Lista do Oracle JET se vincula ao provedor de dados por meio de um observável Knockout. O observável do Knockout também é declarado no código-fonte viewModel do aplicativo. Esse código preenche o observável como uma instância do provedor de dados da lista de detalhes.

Objetivos

Neste tutorial, você lerá dados hierárquicos detalhados mestres de um documento JSON local e exibirá a view de detalhes em um aplicativo Web Oracle JET. Você aprenderá a vincular itens de dados dos objetos de dados filhos para preencher um componente View de Lista do Oracle JET, vários componentes de Texto de Entrada do Oracle JET e um componente Gráfico do Oracle JET.

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 mais recente do Oracle JET instalada
Conclusão do tutorial anterior nesta programação de estudo, para que você tenha criado a pasta JET_Web_Application

Tarefa 1: Vincular Dados à Lista Detalhada de Itens de Atividade na Exibição

Substitua a lista Itens da Atividade vinculada aos dados estáticos por um componente de Exibição de Lista do Oracle JET vinculado a vários itens de dados dos objetos filhos Itens da Atividade.

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

Localize o elemento div em que id="container" e, em seguida, exclua-o e o elemento personalizado oj-module que ele contém.

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
    <div id="container">
      <oj-module config="[[moduleConfig]]"></oj-module>
    </div>
  </div>

<!-- Delete the div element with id="container" so that your code is similar to the following: -->

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">

  </div>
  . . . 

No elemento div em que id="activityItemsContainer", adicione um elemento de cabeçalho h3 para a lista de detalhes Itens de Atividade.

<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <h3 id="itemsListHeader">Activity Items</h3>
</div>

Após a tag de fechamento do elemento h3 criado, adicione um elemento HTML personalizado oj-list-view para exibir a lista de detalhes Itens de Atividade e um elemento template com um atributo slot para aplicar ao conteúdo da lista de detalhes.
```
 <h3 id="itemsListHeader">Activity Items</h3>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
     <template slot="itemTemplate">

     </template>
   </oj-list-view>
```
O componente View de Lista do Oracle JET usado em um elemento HTML template em linha com um atributo slot como placeholder instancia o conteúdo da lista de detalhes Itens de Atividade no runtime.
No elemento template criado, adicione três elementos div com código para vincular a imagem e os itens de dados de nome para cada objeto filho Itens de Atividade.
```
<template slot="itemTemplate">
  <div class="oj-flex no-wrap">
    <span class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
    <div class="demo-content oj-flex-item">
      <div>
        <strong>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
        </strong>
      </div>
    </div>
  </div>
</template>
```
O código $current.data.image e $current.data.name vincula os dados e um elemento HTML template expõe uma imagem e um nome de item de atividade para a lista de detalhes Itens de Atividade. O prefixo $current representa o objeto filho atual que o provedor de dados do componente View de Lista do Oracle JET passa para o modelo.
Salve o arquivo dashboard.html e deixe-o aberto no seu editor.

Seu arquivo deve ser semelhante a detail-list-task1-dashboard-html.txt.

Tarefa 2: Criar os Objetos Filhos de Itens de Atividade no ViewModel

Substitua o modelo em linha oj-module criado na programação de estudo anterior para exibir a lista Itens de Atividade por uma chamada de documento JSON para ler os objetos filhos Itens de Atividade de um documento JSON local. Em itemsDataProvider, crie uma instância de uma classe MutableArrayDataProvider do Oracle JET que represente um array de objetos filhos definidos pelo documento JSON. Em seguida, vincule a instância itemsArray a um observável itemsDataProvider. O componente View da Lista do Oracle JET na view faz referência a este observável em seu atributo data para exibir a lista de detalhes Itens da Atividade.

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

Na parte superior do arquivo dashboard.ts, após a declaração de tipo Activity, declare o tipo Item a seguir.

type Activity = {
   id: number;
};

type Item = {
   id: number;
   name: string;
   short_desc: string;
   price: number;
   quantity: number;
   quantity_shipped: number;
   quantity_instock: number;
   activity_id: number;
   image: string;
};
. . . 

Exclua o código da declaração de const lg_xl_view até, mas não incluindo, a declaração de this.chartTypes. O bloco de código termina com uma linha de comentário que lê End of oj-module code. Uma chamada de documento JSON substituirá os dados estáticos e o código do modelo em linha.

Seu arquivo deve ser semelhante a detail-list-task2a-dashboard-ts.txt.
No módulo, importa na parte superior de dashboard.ts, exclua as instruções de importação HtmlUtils, ResponsiveUtils, ResponsiveKnockoutUtils e ojmodule-element não usadas.

Adicione uma instrução de importação para o módulo ojs/ojavatar à lista de importação. O módulo ojavatar suporta a exibição na próxima seção deste tutorial.

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";
import "ojs/ojlistview";
import "ojs/ojavatar";

Depois da definição this.activityDataProvider, na função constructor, adicione definições para activitiesArray e itemsArray. Em seguida, declare this.itemsDataProvider como uma instância de MutableArrayDataProvider. Isso analisa os dados de armazenamento e disponibiliza os objetos filhos do primeiro objeto pai Atividade no componente Oracle JET List View. No próximo tutorial, você define o objeto Atividade dinamicamente usando handlers de eventos.

. . . 
let activitiesArray = JSON.parse(storeData);
let itemsArray = activitiesArray[0].items;

this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
  itemsArray,
  { keyAttributes: "id" }
  );

} // closing bracket of constructor function
. . . 

Em seguida, remova as anotações de tipo não usadas para large e moduleConfig e adicione anotações de tipo para itemsArray e itemsDataProvider.

class DashboardViewModel {
    chartTypes: Array<Object>;
    chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
    chartData: Array<Object>;
    chartDataProvider: MutableArrayDataProvider<string, {}>;
    activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
    val: ko.Observable<string>;
    itemsArray: Array<Object>;
    itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

Seu arquivo deve ser semelhante a detail-list-task2b-dashboard-ts.txt.

Tarefa 3: Executar o Aplicativo Web

O comando ojet serve permite que você faça alterações no código do aplicativo que são refletidas imediatamente no navegador da Web.

Na janela do terminal, altere para o diretório JET_Web_Application e execute o aplicativo.
```
$ ojet serve
```
Na guia Painel de Controle, o web browser exibe a lista de detalhes do limite de dados com o cabeçalho Itens de Atividade.

Descrição da ilustração formatted_master_detail_list.png
Deixe a janela do terminal e o browser que exibe seu aplicativo Web aberto.

Tarefa 4: Detalhes do Item de Bind de Dados e Gráfico de Pizza na Exibição

Substitua os gráficos de pizza e barras Detalhes do Item pelos seguintes elementos:

Um componente Avatar do Oracle JET vinculado à imagem do item de um objeto filho Itens de Atividade
Vários componentes do Campo de Texto do Oracle JET vinculados aos itens de dados desse objeto filho Itens de Atividade
Um componente Gráfico de Pizza vinculado a itens de dados do gráfico do mesmo objeto filho Itens de Atividade

No arquivo dashboard.html, no elemento div em que id="itemDetailsContainer", localize o cabeçalho Detalhes do Item. Sob o cabeçalho, adicione uma regra horizontal seguida por um elemento HTML personalizado oj-avatar vinculado ao item de dados da imagem para um objeto filho Itens da Atividade.
```
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
  <h3>Item Details</h3>
  <hr class="hr-margin" />
  <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
    :src="[[itemData().image]]" class="float-right">
  </oj-avatar>
```
O observável itemData preenche o componente Avatar do Oracle JET usando uma instância do provedor de dados criada no aplicativo viewModel. A função itemData().image é a notação observável Knockout para ler o valor atual de um item de dados. O item de dados é identificado pela propriedade image do objeto filho Itens de Atividade.
Em dashboard.html, abaixo da tag de fechamento do elemento oj-avatar criado, exclua o elemento HTML personalizado oj-label for="basicSelect" e o elemento oj-select-single.
Abaixo da tag de fechamento do elemento oj-avatar criado, adicione quatro elementos div com elementos HTML personalizados oj-bind-text vinculados aos itens de nome, descrição curta, preço e dados de ID de um objeto filho Itens de Atividade.
```
. . . 
</oj-avatar>
  <div id="itemName" class="data-name">
    <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
  </div>
  <div id="itemDesc" class="data-desc">
    <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
  </div>
  <div id="itemPrice">
    <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
  </div>
  <div id="itemId">
    <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
  </div>
. . . 
```
Os observáveis itemData preenchem o componente de Binding de Texto do Oracle JET usando um provedor de dados que você cria no aplicativo viewModel. A função itemData().<prop_name> lê o valor atual do item de dados nomeado. Os itens de dados são identificados pelas propriedades name, short_desc, price e id do objeto filho Itens de Atividade.

Navegue até o diretório JET_Web_Application/src/css e abra o arquivo app.css para adicionar as definições de estilo a seguir.

.hr-margin {
  margin-top: 12px;
}

.data-name {
  font-size: 20px;
  font-weight: bolder;
}

.data-desc {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

Seu arquivo deve ser semelhante a app-css-final.txt.

Abaixo dos elementos div criados, exclua o elemento HTML personalizado oj-chart id="barChart".

Após a tag de fechamento </div> do elemento div id="itemId", adicione um novo elemento div e um elemento HTML personalizado oj-chart vinculado a uma série de gráficos de pizza para um objeto filho Itens de Atividade.

. . . 
<div id="itemId">
  <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
</div>
<div>
  <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
    animation-on-data-change="auto"
    hover-behavior="dim" legend.position="bottom" class="chartStyle">
  </oj-chart>
</div>
. . . 

O observável pieSeriesValue preenche o componente Gráfico de Pizza do Oracle JET usando um array de dados que você cria no aplicativo viewModel.

Salve o arquivo dashboard.html.

Seu arquivo deve ser semelhante a final-detail-list-dashboard-html.txt.

Tarefa 5: Definir Observáveis para Detalhes do Item e Componentes do Gráfico de Pizza no ViewModel

Obtenha um item de dados do objeto filho Itens de Atividade e preencha os observáveis com os componentes de exibição de vínculo de dados. Na view, o atributo value dos vários componentes Detalhes do Item faz referência ao observável itemData. E o atributo series do componente Gráfico de Pizza faz referência ao observável pieSeriesValue vinculado aos dados do gráfico do mesmo item de dados.

No arquivo dashboard.ts, exclua o bloco de código que começa com this.val e termina com this.chartTypesDP. Exclua também as anotações de tipo não utilizadas para as variáveis removidas. A lista de anotações de tipo e o início da função constructor() devem ser semelhantes ao exemplo a seguir.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

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

Adicione as anotações dos tipos itemData e pieSeriesValue à classe DashboardViewModel.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
  itemData: ko.Observable<any>;
  pieSeriesValue: ko.ObservableArray;

  constructor() {
. . . 

Após a instrução this.itemsDataProvider, defina o itemData observável com uma referência ao primeiro objeto pai Atividade e ao primeiro objeto filho do Item de Atividade associado a essa atividade no documento JSON.

  this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
    itemsArray,
    { keyAttributes: "id" }
  );

  this.itemData = ko.observable(''); 
  this.itemData(activitiesArray[0].items[0]);

}   // End of constructor function

Por fim, na declaração observável itemData, defina o observável this.pieSeriesValue.

this.itemData = ko.observable(''); 
this.itemData(activitiesArray[0].items[0]);

this.pieSeriesValue = ko.observableArray([]);

let pieSeries = [
  { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
  { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
];
this.pieSeriesValue(pieSeries);

Tarefa 6: Exibir as Listas-Mestre e de Detalhes

Retorne ao browser para exibir as alterações no seu aplicativo Web.

Na guia Painel de Controle do seu aplicativo Web, os campos de texto, o avatar e o gráfico de pizza do Oracle JET são exibidos no contêiner Detalhes dos Itens, mas as listas não respondem às seleções. No próximo tutorial, os gerenciadores de eventos criados adicionarão a funcionalidade de seleção.

Descrição da ilustração formatted_master_detail_items_list.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.

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

Create the detail view in an Oracle JET web app

F53172-01

February 2022