Adicionar contêineres ao aplicativo Web Oracle JET

Introdução

Um layout de página responsivo pode ser dimensionado com flexibilidade para se ajustar a uma ampla variedade de tamanhos de tela, de pequenos telefones para monitores de desktop. Um layout flexível do Oracle JavaScript Extension Toolkit (JET) tem elementos filhos que você pode organizar em qualquer direção. Quando o tamanho da tela é alterado, esses elementos se ajustam e crescem para preencher o espaço não utilizado ou diminuem para evitar o excesso de elementos pai ou filho no layout. Você pode usar as classes de layout do Oracle JET oj-flex e oj-flex-item para criar contêineres responsivos para projetar um layout de página responsivo. As classes de estilo oj-panel e oj-panel-bg do Oracle JET adicionam bordas e cor aos contêineres. Você pode usar essas classes de estilo para auxiliar na visualização do layout e pode removê-las no aplicativo final.

O aplicativo Web que você criará neste tutorial tem uma estrutura de layout de página com um contêiner pai principal em torno de um segundo contêiner pai e um contêiner filho, o contêiner Atividades. O segundo contêiner pai contém dois contêineres filhos: os contêineres Itens de Atividade e Detalhes do Item.

O plano de layout da página de layout responsivo

Descrição da ilustração layout-plan.png

Um contêiner pai é aquele que contém contêineres filhos. No entanto, um contêiner filho também pode ser um contêiner pai se contiver um contêiner filho - por exemplo, Contêiner Pai 2 acima.

Na ilustração a seguir do layout de página que você criará, um elemento principal div contém o Contêiner Pai 1. O Contêiner Pai 1 envolve o Contêiner Filho 1 e o Contêiner Pai 2. O Contêiner Pai 2 contém dois contêineres filhos, Contêiner Filho 2 e Contêiner Filho 3.

O layout responsivo com contêineres pai e filho

Descrição da ilustração responsive-layout-containers.png

Objetivos

Neste tutorial, você adicionará contêineres e painéis para converter um layout de página em um layout de página responsivo em um aplicativo Web Oracle JET usando o layout e as classes de estilo 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
Navegador Web do Google Chrome instalado e definido como o navegador Web padrão
Acesso ao Oracle JET Developer Cookbook
(Opção 1) Conclusão da programação de estudo anterior nesta série: Desenvolver um Aplicativo Web no Oracle JavaScript Extension Toolkit
(Opção 2) Se você não tiver concluído a programação de estudo anterior nesta série: O download do jet_web_application_temp.zip

Tarefa 1: Fazer Download do Aplicativo Inicial

Ignore esta tarefa se estiver continuando a trabalhar em um aplicativo que você criou na programação de estudo anterior.

Renomeie jet_web_application_temp.zip como JET_Web_Application.zip. Extraia o conteúdo para a pasta JET_Web_Application.
Na janela do terminal, verifique se você instalou a versão mais recente do Oracle JET. Se você não tiver feito isso, atualize sua versão do Oracle JET.
```
$ npm list -g @oracle/ojet-cli
```
```
$ npm install -g @oracle/ojet-cli
```
Navegue até a pasta JET_Web_Application e restaure o aplicativo Oracle JET.
```
$ ojet restore
```
Seu aplicativo está pronto para ser usado.

Tarefa 2: Adicionar Contêineres de Atividades

Modifique o layout do aplicativo Web Oracle JET para adicionar um layout de caixa flexível. Para criar o layout flex, adicione uma classe oj-flex do Oracle JET ao elemento div pai e uma classe oj-flex-item ao elemento div filho. O Contêiner Pai 1 é o contêiner pai que inclui todos os outros contêineres dentro dele. O Contêiner Filho 1 é o primeiro contêiner filho e contém a lista Atividades.

Os Contêineres Pai 1 e Filho 1 formam os Contêineres de Atividades

Descrição da ilustração Activities-containers.png

Abra o Oracle JET Cookbook, clique em Layout e Nav na barra de menus e selecione o componente Layout Flex. Na barra de ferramentas, clique em Documento da API e selecione flex.
Na documentação da API de Layout Flex, role até a tabela que descreve as classes de layout do Oracle JET e leia sobre a classe oj-flex.
Navegue até o diretório JET_Web_Application/src/ts/views e abra o arquivo dashboard.html em um editor.

Localize o elemento h1 do cabeçalho Informações do Produto e, abaixo dele, adicione um elemento div externo com o valor de atributo id parentContainer1 juntamente com a classe de contêiner Oracle JET. Este elemento div contém todos os outros contêineres dentro dele. Adicione uma tag de fechamento </div> acima do último </div> de fechamento no final do arquivo.

<div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <!-- Parent Container 1 contains all the panels in the app -->
  <div id="parentContainer1" class="oj-flex oj-flex-init">
    <div id="activitiesContainer">
      <h3 id="activitiesHeader">Activities</h3>
      . . .
      </oj-chart>
    </div>
  </div>
</div>

Localize o elemento div em que id="activitiesContainer", antes do cabeçalho Atividades, e adicione uma classe de item de contêiner do Oracle JET.

<!-- The Activities container displays the Activities list -->
<div id="activitiesContainer" class="oj-flex-item">
  <h3 id="activitiesHeader">Activities</h3>

Salve o arquivo dashboard.html.

Seu código deve ser semelhante a parent-containers-dashboard-html.txt.

Tarefa 3: Adicionar Contêineres de Detalhes do Item

Modifique o layout responsivo do aplicativo Web do Oracle JET para adicionar os contêineres de Detalhes do Item. O Contêiner Pai 2 contém os dois contêineres filhos. O Contêiner Filho 2 é deixado vazio, mas nos tutoriais posteriores conterão a lista Itens de Atividade. O Contêiner-Filho 3 contém o gráfico Detalhes do Item.

O Contêiner Pai 2, o Contêiner Filho 2 e o Contêiner Filho 3 juntos formam os Contêineres de Detalhes do Item

Descrição da ilustração item-details-containers.png

Localize o elemento div em que id="itemDetailsContainer". Acima, adicione um elemento div externo com um atributo id com o valor parentContainer2, bem como uma classe de contêiner e uma classe de item de contêiner do Oracle JET. Adicione uma tag de fechamento </div> acima do segundo para último fechamento </div> no arquivo.

<!-- Parent Container 2 surrounds the Item Details container -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .
        </oj-chart>
      </div>
    </div>
  </div>
</div>

Sob o elemento div em que id="parentContainer2", adicione um elemento div vazio com um atributo id com o valor activityItemsContainer, bem como uma classe de item de contêiner Oracle JET.

<!-- Parent Container 2 surrounds the Activity Items and Item Details child containers -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="activityItemsContainer" class="oj-flex-item">
      </div>
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .

Por fim, adicione uma classe de item de contêiner do Oracle JET ao elemento div em que id="itemDetailsContainer".

<!-- Item Details container displays a chart upon selection -->
<div id="itemDetailsContainer" class="oj-flex-item">
  <h3>Item Details</h3>

Salve o arquivo dashboard.html.

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

Tarefa 4: Adicionar Painéis e Cor do Painel

Aplique as classes de estilo do Oracle JET para adicionar painéis e cores de painel aos contêineres e itens de contêiner no aplicativo Web para ajudar a visualizar o layout.

Localize o elemento div em que id="parentContainer1" e adicione duas classes de estilo para especificar um painel com uma cor de borda e de plano de fundo.
```

<div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
```

Localize o elemento div em que id="activitiesContainer" e adicione duas classes de estilo para especificar um painel com uma cor de borda e de plano de fundo.

<!-- The border and color for the Activities container -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
  <h3 id="activitiesHeader">Activities</h3>

Localize o elemento div em que id="parentContainer2" e adicione duas classes de estilo para especificar um painel com uma cor de borda e de plano de fundo.
```

<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">
```

Localize o elemento div em que id="itemDetailsContainer" e adicione duas classes de estilo para especificar a cor do painel e do painel.

<!-- The border and color for the Item Details container -->
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30">

Salve o arquivo dashboard.html.

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

Tarefa 5: 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 container-panel.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

Add containers to the Oracle JET web app

F53129-01

February 2022