Tratar eventos de seleção em um aplicativo Web Oracle JET

Introdução

Você pode usar a API do Oracle JavaScript Extension Toolkit (Oracle JET) no viewModel do aplicativo Web Oracle JET para criar handlers de evento que respondam ao listener de alteração de atributo selected do componente Oracle JET List View. Quando o usuário seleciona ou desmarca um item na lista, o listener de alterações aciona o processador de eventos. Você pode usar o processador de eventos para preencher o provedor de dados do Oracle JET e pode vincular o provedor de dados aos observáveis que o componente de exibição pode usar. O processador de eventos também pode definir a variável booliana que o componente Oracle JET If Binding usa para renderizar condicionalmente seus elementos HTML aninhados na view. Se o atributo selected do componente View de Lista do Oracle JET para a lista mestre não estiver vazio, a variável será definida como true e a view renderizará a lista de detalhes do limite de dados. Se o atributo selected estiver vazio devido a um evento de desmarcação, a variável será definida como falsa e a view renderizará um contêiner na view sem a lista de detalhes do limite de dados.

Objetivos

Neste tutorial, você atualizará a interface de usuário de um aplicativo Web Oracle JET para que possa exibir dados de detalhes mestres. Você aprende a criar um handler de evento JavaScript usando um listener de alteração de propriedade do Oracle JET. Você também aprenderá a usar um componente Oracle JET If Binding para exibir condicionalmente a lista de detalhes para tratar as seleções da lista.

Pré-requisitos

Tarefa 1: Definir Comportamento de Seleção na Exibição

Atualize a exibição para personalizar os componentes de Exibição de Lista para tratar uma seleção de linha na lista Atividades e na lista Itens de Atividade. O componente View de Lista do Oracle JET define o atributo first-selected-item que o componente preenche com os itens de dados da seleção de linha do usuário e que você pode ler em um observável usando uma vinculação bidirecional. Use o atributo on-selection-changed do componente para capturar e processar eventos de seleção/desmarcação da lista vinculando um listener de eventos definido em viewModel.

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

  2. Abaixo do cabeçalho Atividades, localize o elemento HTML personalizado oj-list-view em que id="activitiesList" e adicione os atributos de comportamento de seleção após o atributo gridlines.item.

       
<h3 id="activitiesHeader">Activities</h3>
   <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
     data="[[activityDataProvider]]" gridlines.item="visible" selection-mode="single" selected="{{selectedActivity}}"
     on-first-selected-item-changed="[[selectedActivityChanged]]" first-selected-item="{{firstSelectedActivity}}"
     scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
     <template slot="itemTemplate">
. . .

  3. Abaixo do cabeçalho Itens de Atividade, localize o elemento HTML personalizado oj-list-view em que id="itemsList" e adicione os atributos de comportamento de seleção após o atributo gridlines.item.

       
<h3 id="itemsListHeader">Activity Items</h3>
     <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader"
       gridlines.item="visible" selection-mode="single" selected="{{selectedItem}}"
       on-first-selected-item-changed="[[selectedItemChanged]]" first-selected-item="{{firstSelectedItem}}"
       scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
       <template slot="itemTemplate">
. . .

  4. Salve o arquivo dashboard.html.

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

Tarefa 2: Criar Handlers de Eventos no ViewModel

Atualize o viewModel para adicionar handlers de eventos dos componentes Exibição de Lista para responder às seleções na lista Atividades e na lista Itens de Atividade. O componente View de Lista do Oracle JET define um atributo selected, no qual a API de View de Lista do Oracle JET define um listener de alteração de propriedade. Seu handler de eventos define os observáveis selectedActivity e selectedItem quando o usuário faz uma seleção de lista e o valor do atributo selected é alterado.

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

  2. Abaixo da definição observável pieSeriesValue, antes de constructor(), adicione observáveis para a seleção da Lista de Atividades e a seleção da lista Itens da Atividade.

    class DashboardViewModel {
   . . . 
   pieSeriesValue: ko.ObservableArray;
   // Observables for Activities
   selectedActivity = new ObservableKeySet();
   activitySelected = ko.observable(false);  // Controls display of Activity Items
   firstSelectedActivity = ko.observable();
   selectedActivityIds = ko.observable();

   // Observables for Activity Items
   itemSelected = ko.observable(false);
   selectedItem = ko.observable();
   firstSelectedItem = ko.observable();

   constructor() {
   . . .

  3. Na parte superior do arquivo dashboard.ts, importe a classe ObservableKeySet do módulo ojs/ojknockout-keyset e a classe ojListView do módulo ojs/ojlistview.

    import * as ko from "knockout";
. . . 
import "ojs/ojavatar";
import { ObservableKeySet } from "ojs/ojknockout-keyset";
import { ojListView } from "ojs/ojlistview";

  4. Antes da classe DashboardViewModel, adicione o alias do tipo ActivityItems.

    . . . 
type ActivityItems = {
   id: number;
   name: string;
   items: Array<Item>;
   short_desc: string;
   image: string;
};

class DashboardViewModel {
. . .

  5. Após a declaração do método constructor() da classe DashboardViewModel, adicione o handler de evento selectedActivityChanged com condições de teste para tratar os eventos de seleção e desseleção.

    } // End of constructor function

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
   *  If no items are selected then the firstSelectedItem property  returns an object 
   *  with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list

   } else {
         // If deselection, hide list          
   }
};

    Implemente esse gerenciador de eventos nas próximas etapas.

  6. Na instrução if do handler de eventos selectedActivityChanged, preencha o observável itemsDataProvider usando a variável itemsArray e defina o estado de seleção activitySelected e itemSelected observáveis como true para o evento de seleção.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected, then this property firstSelectedItem 
    *  will return an object with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list
      // Hide currently-selected activity item
      this.activitySelected(false);

      let itemsArray = itemContext.items;
      this.itemsDataProvider.data = itemsArray;
      // Set List View properties
      this.activitySelected(true);
      this.itemSelected(false);
      this.selectedItem();
      this.itemData();

   } else {
         // If deselection, hide list
   }
};

  7. Na instrução else do handler de evento selectedActivityChanged, defina os observáveis de estado de seleção activitySelected e itemSelected como false para o evento de desseleção.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected then this property firstSelectedItem will return an 
    *  object with both key and data properties set to null.
   */

   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      . . .
   } 

   else {
      // If deselection, hide list
      this.activitySelected(false);
      this.itemSelected(false);
   }
};

  8. Após o handler de eventos selectedActivityChanged, adicione um handler de eventos selectedItemChanged com condições de teste para tratar os eventos de seleção e desseleção.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   . . .
};

/**
* Handle selection from Activity Items list
*/
selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

       // If selection, populate and display list
   }
   else {
   // If deselection, hide list
   }
};

    Implemente esse gerenciador de eventos nas próximas etapas.

  9. Na instrução if do handler de eventos selectedItemChanged, preencha o observável itemData, preencha o observável pieSeriesValue usando a variável de array pieSeries e defina o estado de seleção itemSelected observável como true para o evento de seleção.

    selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

      // If selection, populate and display list
      this.itemData(event.detail.value.data);

      // Create variable and get attributes of the items list to set pie chart values
      let pieSeries = [
      { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
      { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
      ];
      // Update the pie chart with the data
      this.pieSeriesValue(pieSeries);

      this.itemSelected(true);

   }
   else {
   // If deselection, hide list

   }
};

  10. Na instrução else do handler de evento selectedItemChanged, defina o estado de seleção itemSelected observável como false para o evento de desseleção.

    selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   if (isClicked != null) {
   . . . 
   }
   else {
   // If deselection, hide list
   this.itemSelected(false);        
   }
};

  11. Salve o arquivo dashboard.ts.

    Seu arquivo deve ser semelhante a final-event-dashboard-ts.txt.

Tarefa 3: Condicionalizar Renderização de Lista na Exibição

Atualize a view usando o Oracle JET If Binding de componentes para renderizar condicionalmente a lista de detalhes. O componente If Binding do Oracle JET usa uma variável Booliana em seu atributo test. Dentro de um componente If Binding, aninhe o contêiner Activity Items e, em outro componente If Binding, aninhe o contêiner Item Details. Em seguida, use os componentes de Vinculação If para testar o estado dos observáveis activitySelected e itemSelected. O conteúdo aninhado do componente de Vinculação If será renderizado se a condição de teste for true. Exiba a lista de limites de dados se o observável for true, conforme definido pelo handler de eventos da lista. Use outro componente Se Vinculação para testar se o observável é false e, em seguida, exiba um contêiner com uma mensagem direcionando o usuário para fazer uma seleção de lista.

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

  2. Localize o elemento div em que id="parentContainer2". Acima, adicione a tag de abertura do elemento HTML personalizado oj-bind-if, com o atributo test definido para o estado do observável activitySelected.

    . . .
   </oj-list-view>
</div>
<oj-bind-if test="[[activitySelected()]]">
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
   <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
   <h3 id="itemsListHeader">Activity Items</h3>
. . .

    Quando o usuário seleciona uma atividade na lista Atividades, o handler de eventos viewModel Atividade Alterada define o valor do observável activitySelected como true. Nesse caso, a condição de teste oj-bind-if é satisfeita e o aplicativo renderiza o contêiner Itens de Atividade para a seleção da atividade. A notação () na propriedade observável é a convenção da função Knockout para obter o valor do observável em vez de obter a instância do objeto observável.

  3. Localize o elemento div em que id="itemDetailsContainer" e, acima dele, adicione a tag de abertura do elemento HTML personalizado oj-bind-if, com o atributo test definido como o estado do observável itemSelected.

    . . .
   </oj-list-view>
</div>
<oj-bind-if test="[[itemSelected()]]">
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .

    Quando o usuário seleciona um item na lista Itens de Atividade, o handler de eventos viewModel Item Alterado define o observável itemSelected como true. Nesse caso, a condição de teste oj-bind-if é satisfeita e o aplicativo renderiza o contêiner Detalhes do Item para a seleção do item da atividade.

  4. Na parte inferior do arquivo dashboard.html, conte duas tags de fechamento </div> para cima e, em seguida, adicione a tag de fechamento </oj-bind-if> para corresponder à tag de abertura <oj-bind-if test ="[[activitySelected()]]">. Conte mais uma tag de fechamento </div> e, em seguida, adicione a tag de fechamento </oj-bind-if> para a tag de abertura <oj-bind-if test ="[[itemSelected()]]">.

    . . . 
            </oj-chart>
            </div>
         </div>
      </oj-bind-if>
      </div>
   </oj-bind-if>
   </div>
</div>

  5. Abaixo da tag de fechamento </oj-bind-if> adicionada, mais próxima do final do arquivo, insira um elemento HTML personalizado oj-bind-if test="[[!activitySelected()]]" que contenha um elemento div com as classes auxiliares de layout flexível do Oracle JET oj-flex-item oj-sm-6.

    . . . 
            </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>

    A classe helper oj-sm-6 do Oracle JET especifica que o contêiner para o cabeçalho Select an Activity to see Items ocupa seis colunas de contêiner para tamanhos de tela pequenos e maiores.

    Até que o usuário selecione uma atividade, o valor do observável activitySelected é false. Da mesma forma, se o usuário pressionar a tecla Ctrl e clicar em uma atividade já selecionada, viewModel tratará esse evento como uma desmarcação, e o manipulador de eventos Atividade Alterada definirá activitySelected observável como false. Em ambos os casos, a condição de teste oj-bind-if é satisfeita pela condição booliana false e o aplicativo renderiza o cabeçalho Select an Activity to see Items.

  6. Abaixo da primeira tag de fechamento </oj-bind-if> no arquivo, adicione um elemento HTML personalizado oj-bind-if test ="[[!itemSelected()]]" que contenha um elemento div com as classes auxiliares de layout oj-flex-item oj-sm-12 oj-md-6 flex do Oracle JET.

    . . .
                  </oj-chart>
               </div>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!itemSelected()]]">
            <div class="oj-flex-item oj-sm-12 oj-md-6">
               <p>Select an Item to see details</p>
            </div>
         </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>

    As classes auxiliares Oracle JET oj-sm-12 e oj-md-6 especificam que o contêiner de Select an Item para ver os detalhes do cabeçalho ocupa seis colunas de contêiner para tamanhos de tela médios e maiores ou ocupa doze colunas de contêiner para tamanhos de tela pequenos.

    Até que o usuário selecione um item de atividade, o valor do observável itemSelected é false. Da mesma forma, se o usuário pressionar a tecla Ctrl e clicar em um item de atividade já selecionado, viewModel tratará esse evento como uma desseleção, e o manipulador de eventos Item Alterado definirá itemSelected observável como false. Em ambos os casos, a condição de teste oj-bind-if é satisfeita pela condição booliana false e o aplicativo renderiza o cabeçalho Select an Item to see details.

  7. Salve o arquivo dashboard.html.

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

Tarefa 4: Testar as Listas Mestre e de Detalhes

  1. Na janela do terminal, altere para o diretório JET_Web_Application e execute o aplicativo.

    $ ojet serve

  2. No Web browser, clique na atividade Baseball em seu aplicativo.

    A seleção da lista Atividades aciona o handler de evento selectedActivityChanged. O contêiner Itens de Atividade é renderizado para a atividade selecionada.

    Itens de Atividade renderizados para a atividade de Baseball

    Descrição da ilustração master_detail_list.png

  3. Na lista Itens de Atividade, clique em SureCatch Globo de Baseball.

    A seleção da lista Itens de Atividade aciona o handler de evento selectedItemChanged. O aplicativo renderiza o contêiner Detalhes do Item para o item selecionado.

    Itens de Atividade renderizados para a atividade de Baseball

    Descrição da ilustração master_detail_item.png

  4. Na lista Itens de Atividade, pressione Ctrl e clique em SureCatch Baseball Glove para desmarcá-la.

    A desseleção da lista Itens de Atividade aciona o handler de evento selectedItemChanged. O contêiner Detalhes do Item está oculto.

    Desmarcar SureCatch Globo de Baseball oculta Detalhes do Item

    Descrição da ilustração master_detail_list.png

  5. Redimensione o navegador ou pressione Ctrl+Shift+I para abrir o Chrome DevTools e selecione um tamanho de tela menor, como Pixel 5, no emulador de tamanho de tela.

    Os contêineres são organizados de acordo com o tamanho da tela.

    Os contêineres se reorganizam para se ajustarem a um pequeno tamanho de tela

    Descrição da ilustração resized_master_detail_list.png

  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, digite y para sair do job em batch de ferramentas do Oracle JET.

Tarefa 5: (Opcional) Executar um Aplicativo Web de um Aplicativo Restaurado

Se quiser executar o aplicativo Web Oracle JET concluído do código fornecido, você poderá restaurar o aplicativo do arquivo compactado baixado. Para trabalhar com um aplicativo Oracle JET "distribuído e compactado", você deve restaurar as dependências do projeto, incluindo o conjunto de ferramentas Oracle JET e as bibliotecas e módulos necessários, dentro do aplicativo extraído.

  1. Faça download do arquivo jet_web_application_masterdetail_final.zip e extraia o conteúdo do aplicativo concluído para a pasta jet_web_application_masterdetail_final.

  2. Na janela do terminal, navegue até a pasta jet_web_application_masterdetail_final e restaure o aplicativo Web Oracle JET.

    $ ojet restore

  3. Aguarde a confirmação.

    . . .
Success: Restore complete

    O aplicativo está pronto para ser executado.

  4. Execute o aplicativo Web e teste-o no browser.

    $ ojet serve

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

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