Mostrar ou ocultar conteúdo no aplicativo Web Oracle JET

Introdução

O componente Oracle JET oj-module e as classes de utilitário responsivo do JavaScript podem carregar diferentes exibições com base no tamanho da tela. Você pode usar o componente oj-module para substituir o conteúdo dentro de uma região de uma página vinculando uma view e o viewModel correspondente a um elemento.

Objetivos

Ao concluir este tutorial, você personalizará um aplicativo Web Oracle JET para vincular uma view e o viewModel correspondente usando um componente Oracle JET oj-module e um código TypeScript responsivo.

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
Acesso ao Oracle JET Developer Cookbook
Conclusão do tutorial anterior nesta programação de estudo para que você tenha criado a pasta JET_Web_Application
O download opcional do aplicativo jet_web_application_responsive_design_final.zip concluído

Tarefa 1: Adicionar o Componente do Módulo à Exibição

Defina a view e o viewModel correspondente no componente oj-module do Oracle JET usando o objeto de configuração.

Navegue até o diretório JET_Web_Application/src/ts/views e abra o arquivo dashboard.html em um editor.
Localize o elemento div com id="activityItemsContainer". No div vazio, adicione um contêiner div que circunda um elemento HTML personalizado oj-module com o atributo config que define a região de navegação.
```
<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <div id="container">
    <oj-module config="[[moduleConfig]]"></oj-module>
  </div>
</div>
```
Salve o arquivo dashboard.html.

Seu código deve ser semelhante ao final-dashboard-html.txt.

Tarefa 2: Atualizar a Lista de Módulos Importados no ViewModel

Na parte superior do arquivo dashboard.ts, importe módulos que suportem os componentes do Oracle JET.

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

Após o módulo ojlistview, adicione os três módulos de utilitários HTML responsivos do JET e o módulo ojmodule-element.

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 * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import * as HtmlUtils from "ojs/ojhtmlutils";
import "ojs/ojmodule-element";

Salve o arquivo dashboard.ts.

Seu bloco de importação deve ser semelhante a import-block-ts.txt.

Tarefa 3: Adicionar o Código para Carregamento Responsivo no ViewModel

Você deseja carregar conteúdo diferente para diferentes tamanhos de tela em um layout responsivo. Você pode usar oj-module para carregar diferentes views usando um observável, uma consulta de mídia ou uma consulta de mídia personalizada observável.

Abra o Cookbook do Oracle JET e navegue até a home page do Cookbook. Clique em Estrutura na barra de menus, depois clique em Comportamentos Responsivos e, em seguida, clique em Carregamento Responsivo.
Lá você pode acessar a documentação da API para o namespace ResponsiveUtils. Em seguida, role até a seção Métodos e leia sobre o método getFrameworkQuery.

No arquivo dashboard.ts, abaixo da declaração chartDataProvider, adicione um bloco de código de modelo em linha para passar para o elemento HTML personalizado oj-module.

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

// Define the oj-module inline template for Activity Items list
const lg_xl_view =
      '<h3 id="activityItemsHeader">Activity Items</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityItemsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>Air-Lift Tire Pump</p>" +
      "<p>Intact Bike Helmet</p>" +
      "<p>Nimbus Bike Tire</p>" +
      "<p>Refill Water Bottle</p>" +
      "<p>Swift Boys 21 Speed</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>";

O nó de dados em linha para telas grandes e extras grandes é passado pela variável lg_xl_view.

Abaixo da definição da variável lg_xl_view, defina o código para informar o nó de dados em linha para telas pequenas e médias por meio da variável sm_md_view.

// Display this content for small and medium screen sizes
const sm_md_view =
      '<div id="sm_md" style="background-color:lightcyan; padding: 10px; font-size: 10px">' +
      '<h3 id="activityDetailsHeader">Activity Details</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityDetailsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>" +
      "</div>";

Abaixo da definição da variável sm_md_view, defina o código para carregar a exibição de diferentes tamanhos de tela usando uma consulta de mídia this.large observável.
```
// Identify the screen size and display the content for that screen size
const lgQuery = ResponsiveUtils.getFrameworkQuery(
   ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP
);

this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
this.moduleConfig = ko.pureComputed(() => {
   let viewNodes = HtmlUtils.stringToNodeArray(
   this.large() ? lg_xl_view : sm_md_view
   );
   return { view: viewNodes };
});

/**
 * End of oj-module code
 */
```
Usando a função do utilitário HTML, você pode obter a string de consulta de mídia da estrutura na variável this.large. O código HTML na variável lg_xl_view será carregado se o valor da string de consulta de mídia em this.large() for igual a LG_UP, grande ou acima. O código HTML na variável sm_md_view será carregado se o valor da string de consulta de mídia em this.large() não for igual a LG_UP.

Adicione declarações de tipo para large e moduleConfig à classe.

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>;
   large: ko.Observable<boolean>;
   moduleConfig: ko.PureComputed<any>;

Salve o arquivo dashboard.ts.

Seu arquivo deve ser semelhante a final-dashboard-ts.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
```
As ferramentas do Oracle JET executam seu aplicativo Web em um web browser local no qual você pode exibir o conteúdo do painel de controle.

Descrição da ilustração final-app.png

Para exibir o conteúdo na variável sm_md_view, ajuste a tela para um tamanho pequeno ou médio. Observe a lista reduzida de itens no cabeçalho Detalhes da Atividade, que é realçado como um ciano claro.

Descrição da ilustração Small-screen.png

Para exibir o conteúdo na variável lg_xl_view, altere o tamanho da tela para grande ou extra-grande.

Descrição da ilustração Large-screen.png
Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair do job em batch de ferramentas do Oracle JET.
Fechar a janela ou guia do browser.
Seu aplicativo concluído com a funcionalidade de design responsivo deve ser semelhante a jet_web_application_responsive_design_final.zip.

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.

Faça download do arquivo jet_web_application_responsive_design_final.zip e extraia o conteúdo do aplicativo concluído para a pasta jet_web_application_responsive_design_final.
Na janela do terminal, navegue até a pasta jet_web_application_responsive_design_final e restaure o aplicativo Web Oracle JET.
```
$ ojet restore
```
Aguarde a confirmação.
```
$ Restore complete
```
O aplicativo está pronto para ser executado.
Execute o aplicativo Web e teste no browser.
```
$ ojet serve
```
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

Show or hide content in the Oracle JET web application

F53140-01

February 2022