Testar o aplicativo Web Oracle JET em diferentes tamanhos de tela

Introdução

Um layout responsivo se ajusta para se ajustar a diferentes tamanhos de tela em uma ampla variedade de dispositivos. Ao executar seu aplicativo Web Oracle JET no navegador Web do Google Chrome, você pode testar a capacidade de resposta do aplicativo Web com diferentes tamanhos de tela selecionados no Google Chrome Developer Tools (Cromo DevTools).

Objetivos

Neste tutorial, você testará o design responsivo do aplicativo Web Oracle JET desenvolvido em diferentes tamanhos de tela.

Pré-requisitos

Tarefa 1: Executar o Aplicativo Web

O aplicativo Web Oracle JET tem um layout e componentes responsivos e pode ser executado em vários navegadores Web diferentes. Para este tutorial, usaremos o navegador Chrome e DevTools para exibir o aplicativo em vários tamanhos de tela.

  1. 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 no Google Chrome.

    A aparência do aplicativo final

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

Tarefa 2: Alterar o Tamanho da Tela

Você pode testar a capacidade de resposta do aplicativo Web para diferentes tamanhos de tela e dispositivos no modo depurador do navegador do Google Chrome. Quando você executa o aplicativo em diferentes dispositivos, o conteúdo do aplicativo Web é exibido para o tamanho de tela selecionado e o alinhamento de texto é baseado no tamanho da tela.

  1. No Google Chrome, pressione Ctrl+Shift+I para exibir a janela Chrome DevTools.

    Depurador do Google Chrome ativado

    Descrição da ilustração chrome-debmode.png

  2. Na barra de ferramentas do Chrome DevTools, clique em Botão Alternar barra de ferramentas do dispositivo para alternar para o modo de dispositivo.

    Localizador da barra de ferramentas do modo de dispositivo

    Descrição da ilustração device-mode-lens.png

  3. No emulador de tela do modo de dispositivo, selecione um dispositivo ou tamanho de tela específico para testar o aplicativo.

    Várias viewsports são exibidas

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

  4. Selecione Pixel 5.

    No contêiner Atividades, o conteúdo é alinhado ao final da tela. No contêiner Itens da Atividade, os itens da lista para telas pequenas e médias são exibidos.

    O aplicativo exibido para um tamanho de tela pequeno

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

  5. Selecione iPad Air.

    No contêiner Atividades, o conteúdo é alinhado à esquerda. No contêiner Itens da Atividade, os itens da lista para telas pequenas e médias são exibidos. Para o contêiner Itens de Atividade, o preenchimento é aplicado.

    O aplicativo exibido para um tamanho médio de tela

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

  6. Selecione Nest Hub Max.

    No contêiner Atividades, o conteúdo é alinhado à esquerda. No contêiner Itens de Atividade, os itens da lista para telas grandes e extra-grandes são exibidos.

    O aplicativo exibido para um tamanho de tela grande

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

  7. Na barra de ferramentas do Chrome DevTools, clique em Botão Alternar barra de ferramentas do dispositivo para sair do modo de dispositivo.

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

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