Adicionar componentes a um aplicativo Web Oracle JET

Introdução

Este tutorial mostra como adicionar componentes do Oracle JavaScript Extension Toolkit (Oracle JET) ao modelo inicial do navdrawer do seu aplicativo Web Oracle JET.

O Oracle JET é um kit de ferramentas de desenvolvimento que você usa para criar aplicativos Web do cliente. Para criar seu aplicativo Web, use o Oracle JET Cookbook para localizar as amostras de componentes que ilustram a funcionalidade específica que você deseja adicionar ao seu aplicativo. O Oracle JET Cookbook também fornece instruções que podem ser seguidas para suportar comportamentos específicos dos componentes.

Objetivos

Ao concluir este tutorial, você aprenderá a usar o Oracle JET Cookbook para adicionar os componentes Oracle JET Select Single and Chart à guia Painel de Controle de seu aplicativo Web. Você também aprenderá a conectar esses dois componentes para adicionar interatividade entre eles.

Pré-requisitos

Tarefa 1: Adicionar Classes de Estilo

É uma boa prática colocar estilos que você deseja aplicar a componentes em um arquivo CSS separado em vez de usar o atributo style em linha demonstrado no seguinte exemplo:

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

Antes de adicionarmos os componentes Selecionar Único e Gráfico à nossa página, criaremos classes de estilo no arquivo CSS do aplicativo a que os componentes podem fazer referência.

  1. Navegue até o diretório JET_Web_Application/src/css e abra o arquivo app.css em um editor.

  2. No final do arquivo app.css, adicione as classes de estilo a seguir que determinarão as propriedades de estilo para os componentes Selecionar Único e Gráfico.

    .selectSingleStyle {
   max-width:20em
}

.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}

    Posteriormente neste tutorial, os componentes Selecionar Único e Gráfico fazem referência a esses estilos usando o atributo class do componente:

    <oj-select-single id="basicSelect" . . . class="selectSingleStyle" >. . .
<oj-chart id="barChart" . . . class="chartStyle">. . .

Tarefa 2: Adicionar um Componente Único de Seleção

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

  2. No elemento HTML div da Área de Conteúdo do Painel, adicione um elemento HTML personalizado oj-label e um elemento oj-select-single. Adicione também um atributo id com um valor de parentContainer ao 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>

    Os colchetes ao redor do chartTypesDP observável no atributo data significam que o valor pode ser lido, mas não atualizado pelo componente. As chaves ao redor do val observável no atributo value significam que o valor pode ser lido e atualizado pelo componente. Assim, os colchetes em torno de um observável definem uma ligação unidirecional, enquanto as chaves em torno de um observável definem uma ligação bidirecional.

  3. Edite o elemento HTML h1 para exibir as Informações do Produto do cabeçalho.

    <h1>Product Information</h1>

  4. Salve o arquivo dashboard.html. Seu trecho de código dashboard.html deve ser semelhante a add-select-single-dashboard-html.txt.

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

  6. Na parte superior do arquivo dashboard.ts, importe a biblioteca de knockout, o módulo do provedor de dados do array mutável do Oracle JET e os módulos do Oracle JET para o componente Label e o componente Selecionar Único.

    import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";

  7. Antes da classe DashboardViewModel(), adicione um alias de tipo para os tipos de gráfico (ChartType). Na classe DashboardViewModel(), adicione um array de dados do tipo de gráfico (chartTypes) e uma instância do provedor de dados do array mutável (chartTypesDP) para permitir a vinculação dos dados do tipo de gráfico pelo componente Selecionar Único.

    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

  8. Adicione o método ko.observable para exibir o tipo de gráfico de pizza como o valor padrão para o Knockout observável do componente Selecionar Único.

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

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

  9. Salve o arquivo dashboard.ts. Seu trecho de código dashboard.ts deve ser semelhante a add-select-single-dashboard-ts.txt.

  10. Abra uma janela de terminal, altere para o diretório JET_Web_Application e execute o aplicativo.

    $ ojet serve

    O browser exibe o modelo inicial do navdrawer com o componente Selecionar Único visível na guia Painel de Controle do seu aplicativo Web.

    Imagem mostrando um aplicativo Web JET que renderiza um componente Selecionar Único com uma lista drop-down. Pizza e Barras são as opções da lista suspensa.

    Descrição da ilustração dashboard-with-select.png

  11. Deixe a janela do terminal e o browser que exibe seu aplicativo Web aberto.

    O comando ojet serve permite fazer alterações no código do aplicativo no JET_Web_Application/src que são refletidas imediatamente no browser. Uma exceção é que se você adicionar ou excluir um arquivo, será necessário executar ojet serve para ver a alteração refletida no browser. Não faça alterações no código do aplicativo na pasta JET_Web_Application/web porque você substituirá essas alterações na próxima vez que executar o comando ojet serve. O comando ojet serve cria e serve o conteúdo da pasta JET_Web_Application/src para a pasta JET_Web_Application/web.

Tarefa 3: Adicionar um Componente do Gráfico

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

  2. Adicione o elemento HTML personalizado oj-chart abaixo do elemento HTML personalizado oj-select-single para que os dois elementos apareçam dentro do mesmo elemento HTML div do 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>

  3. No elemento HTML personalizado oj-chart, adicione um elemento HTML template com um atributo slot para renderizar cada item no gráfico.

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

  4. No elemento de modelo, adicione um elemento HTML personalizado oj-chart-item com atributos que usam associações unidirecionais para obter os dados do gráfico do objeto atual.

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

  5. Salve o arquivo dashboard.html. Seu trecho de código dashboard.html deve ser semelhante a add-chart-dashboard-html.txt.

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

  7. Adicione o conjunto observável chartDataProvider a um novo objeto MutableArrayDataProvider do Oracle JET que conterá os dados do gráfico.

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

constructor() {

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

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

  8. Na classe DashboardViewModel(), adicione o array chartData abaixo do observável Knockout. Você declara o tipo desse array como 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 }
   ];

  9. Importe o módulo para o componente Gráfico Oracle JET.

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

  10. Salve o arquivo dashboard.ts. Seu arquivo dashboard.ts deve ser semelhante a final-chart-dashboard-ts.txt.

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

    O browser exibe o modelo inicial do navdrawer com o componente Gráfico de Barras visível na guia Painel do seu aplicativo Web.

    Imagem mostrando um componente de Gráfico.

    Descrição da ilustração dashboard-with-select-chart.png

    Observe que a guia Painel exibe apenas o formato do gráfico de barras para cada opção da lista suspensa Selecionar Gráfico. Você deve adicionar uma dependência entre os dois componentes para exibir cada formato de gráfico.

  12. Deixe a janela do terminal e o browser que exibe seu aplicativo Web aberto.

Tarefa 4: Conectar os Dois Componentes

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

  2. No arquivo dashboard.html, edite o elemento HTML personalizado oj-chart para conectar o atributo type do componente Gráfico ao atributo value do componente Selecionar Único com uma vinculação unilateral.

    <oj-chart id="barChart"
       type="[[val]]"
       . . .
 </oj-chart>

    Os colchetes ao redor do val observável no atributo type significam que o valor pode ser lido, mas não atualizado pelo componente. Colchetes ao redor de um observável definem uma ligação unidirecional.

  3. Salve o arquivo dashboard.html. Seu arquivo dashboard.html deve ser semelhante a final-connect-dashboard-html.txt.

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

    O browser agora exibe o modelo inicial do navdrawer com os componentes Selecionar Único e Gráfico de Pizza visíveis na guia Painel do seu aplicativo Web.

    Imagem mostrando um formato de pizza do componente Gráfico.

    Descrição da ilustração connect-select-and-chart.png

  5. Para ver os diferentes formatos de gráfico, escolha entre as opções na lista suspensa Selecionar Gráfico.

  6. Feche a janela ou guia do browser que exibe seu aplicativo Web em execução.

  7. Na janela do terminal, pressione Ctrl+C e, se solicitado, informe y para encerrar o job em batch de ferramentas do Oracle JET.

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