Teste o aplicativo DOM virtual do Oracle JET em diferentes tamanhos de tela

Introdução

Um layout responsivo se ajusta aos tamanhos das telas em uma ampla variedade de dispositivos. Quando você executa seu aplicativo DOM virtual do Oracle JavaScript Extension Toolkit (Oracle JET) no navegador da Web do Google Chrome, pode usar as ferramentas de desenvolvedor do Chrome (Chrome DevTools) para testar a capacidade de resposta do aplicativo com diferentes tamanhos de tela.

Objetivos

Neste tutorial, você testará o design responsivo do aplicativo Oracle JET DOM virtual desenvolvido em vários tamanhos de tela.

Pré-requisitos

Tarefa 1: Executar o Aplicativo DOM Virtual

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

  1. Na janela do terminal, altere para o diretório JET-Virtual-DOM-app e execute o aplicativo.

    npx ojet serve

    O conjunto de ferramentas do Oracle JET executa seu aplicativo DOM virtual no browser.

    O aplicativo com um layout responsivo

Tarefa 2: Alterar o Tamanho da Tela

Você pode testar o aplicativo com vários tamanhos de tela e dispositivos no modo de depuração do navegador Chrome. Quando você usa o aplicativo em diferentes dispositivos, os componentes e o conteúdo do aplicativo se ajustam ao tamanho da tela fornecida. Por exemplo, o alinhamento de texto do conteúdo do Contêiner de Atividades será alterado para um tamanho de tela pequeno, bem como para a cor e os itens da lista do Contêiner de Itens de Atividade.

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

    Depurador do Google Chrome ativado

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

    Localizador de barra de ferramentas no modo de dispositivo

  3. Clique no menu drop-down Dimensões no emulador de tela do modo de dispositivo.

    Vários visores são exibidos

  4. No menu suspenso, selecione o Pixel 7, com um tamanho de tela pequeno, e exiba o aplicativo no emulador de tela.

    No Contêiner de Atividades, o conteúdo está alinhado à direita. No Contêiner do Item de Atividade, a lista abreviada de itens para telas pequenas e médias é exibida, e o cabeçalho Detalhes da Atividade substitui o cabeçalho Itens da Atividade. A cor do recipiente é ciano claro.

    O aplicativo exibido para um tamanho de tela pequeno

  5. No menu drop-down Dimensões, selecione iPad Air, com um tamanho de tela médio.

    No Contêiner de Atividades, o conteúdo é alinhado à esquerda. No Contêiner do Item de Atividade, a lista abreviada de itens para telas pequenas e médias é exibida, e o cabeçalho Detalhes da Atividade substitui o cabeçalho Itens da Atividade. A cor do recipiente é ciano claro.

    O aplicativo exibido para um tamanho de tela médio

  6. No menu drop-down Dimensões, selecione o Nest Hub Max, com um tamanho de tela grande.

    No Contêiner de Atividades, o conteúdo é alinhado à esquerda. No Contêiner do Item de Atividade, os itens da lista para telas grandes e extragrandes são exibidos. No Contêiner Pai 2, o preenchimento é aplicado no lado esquerdo do Contêiner do Item de Atividade e no lado direito do Contêiner de Detalhes do Item.

    O aplicativo exibido para um tamanho de tela grande

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

  8. Feche a janela ou guia do navegador que exibe seu aplicativo DOM virtual em execução.

  9. Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair da tarefa em batch de ferramentas do Oracle JET.

Próxima Etapa

Este tutorial conclui o módulo Design Responsivo nesta programação de estudo sobre a criação de aplicativos Web DOM virtuais.

Você pode prosseguir para o próximo tutorial na programação de estudo, Criar a View Mestre em um Aplicativo Oracle JET Virtual DOM, no módulo Views de Detalhes Mestres no Oracle JET.

Você também pode retornar à página principal da programação de estudo do DOM virtual para acessar todos os módulos na criação de aplicativos DOM virtuais.

Mais Recursos de Aprendizado

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal do Oracle Learning YouTube. Além disso, acesse education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.