Iniciando com o Emulador de Dispositivos

O Intel® HTML5 Development Environment inclui uma ferramenta para desenvolvimento e testes de aplicativos móveis HTML5 em plataforma cruzada chamado de Emulador de Dispositivos. Ele permite a você visualizar como sua aplicação se parece e como funciona em diversos dispositivos dentro de um único ambiente baseado em servidor. Isto é mais conveniente do que testar em múltiplos ambientes de hardware e software, um para cada dispositivo suportado pela sua aplicação. Ele permite que você altere rapidamente as dimensões e orientação da tela do dispositivo para verificar que sua aplicação é visualizada de forma apropriada. Você pode executar depuração da linguagem JavaScript*, inspeção no DOM (Document Object Model) do documento HTML, depuração de CSS (Cascading Style Sheet), tudo sem precisar distribuir a sua aplicação.

Se a sua aplicação interage com recursos de hardware comumente encontrados nos dispositivos móveis, como um acelerômetro, utilize uma interface de programação (API) em plataforma cruzada para garantir a portabilidade do seu app. O Emulador de Dispositivos suporta a API Apache Cordova* versão 2.0 e sua predecessora, a  Adobe* PhoneGap* API versão 1.0. Quando a sua aplicação é executada,  ela interage com o simulador que toma o lugar da implementação da API real e específica dos dispositivos utilizada em  uma aplicação empacotada.

A API simulada permite a você testar as interações da sua aplicação com recursos móveis. Utilizando a interface de usuário do Emulador de Dispositivos, você pode configurar o ambiente virtual que sua aplicação irá enxergar quando estiver sendo testada. Por exemplo, você pode especificar qual é a localização que deve ser retornada quando sua aplicação interagir com os serviços de geolocalização do dispositivo. Você também pode disparar eventos simulados para testar como a sua aplicação responde a eles.

Funcionalidades do Emulador de Dispositivos

O Emulador de Dispositivos provê uma série de painéis, e cada um deles controla algum aspecto do ambiente virtual. Os painéis estão divididos em dois grupos, um no lado esquerdo e outro no lado direito da interface. Para expandir ou recolher cada painel, basta clicar em sua barra de títulos. Clique no pequeno sinal de mais do lado direito do painel para arrastar o painel para outra localização dentro de qualquer grupo. Existe uma pequena seta circular no alto do grupo que pode ser utilizada para deslocar o grupo do lado da tela, conservando espaço em tela para o quadro principal onde a aplicação em testes é executada.

Use este PainelPara Fazer Isso

Devices

Seleciona o tamanho e a orientação do dispositivo.

Platform

Seleciona uma API de plataforma cruzada:

  • Cordova 2.0 – Para utilizar a API Cordova/PhoneGap API (veja instruções especiais abaixo)
  • Mobile Web – Escolha esta opção quando a API Cordova não for usada.

Information

Ver um resumo do dispositivo e plataforma selecionados.

Accelerometer

Simular a rotação do dispositivo em três dimensões ou chacoalhar o dispositivo.

Settings

Obter informações e configurar o Emulador de Dispositivos.

Device and Network Settings

Configurar os atributos da camanda de comunicação que sua aplicação está usando, como o International Mobile Equipment Identity (IMEI) ou PIN, e outras configurações de rede. Determinar os valores que sua aplicação recebe se consultar estas informações. Este painel não está disponível caso a plataforma selecionada seja Mobile Web.

Geo Location

Simula alterações na localização física do dispositivo, diminui o tempo de resposta do GPS, simula o timeout do GPS e altera outras configurações de simulação de GPS.

Events

Simula eventos de sistema. Este painel não está disponível caso a plataforma selecionada seja Mobile Web.

Usando a Plataforma Cordova 2.0 com o Emulador de Dispositivos

Programas que usem a plataforma Cordova 2.0 devem incluir uma tag <script src="cordova.js"> que traz o arquivo cordova.js que implementa a API Cordova. Se você fizer o build a sua aplicação utilizando o utilitário PhoneGap Build*, você não precisa ter nenhum arquivo cordova.js, porque o utilitário de build vai fornece-lo a você. Entretanto, se você for executar a sua aplicação no Emulador de Dispositivos com a plataforma setada para Cordova 2.0.0, você deve ter um arquivo cordova.js real.

Usuários que fazem o build de suas aplicações com um SDK específico de plataforma devem estar familiarizados com esta regra, uma vez que você também precisa de um arquivo cordova.js para fazer o build de uma aplicação Cordova usando o SDK. Quando você faz o build de sua aplicação com o SDK, você deve ter uma versão do arquivo cordova.js que seja compatível com aquela plataforma em particular (bem como as outras bibliotecas nativas). Quando você executa sua aplicação dentro do Emulador de Dispositivos, não importa qual é o arquivo cordova.js real que você utilize; arquivos cordova.js para diferentes plataformas são todos aceitáveis.

Depurando dentro do Emulador de Dispositivos

O Emulador de Dispositivos é por si só uma aplicação web que é executada dentro do navegador Google Chrome. Sua aplicação é executada dentro de um frame HTML cujo tamanho depende do dispositivo atualmente selecionado. Você pode utilizar as Ferramentas para o desenvolvedor padrão do Google Chrome (CDT) para depurar a sua aplicação. Inicie a depuração de qualquer uma das seguintes formas:

  • Pressione Ctrl+Shift+I..
  • Clique no ícone no canto direito superior do navegador Chrome e selecione Ferramentas > Ferramentas do desenvolvedor.
  • Clique com o botão da direita do mouse na janela principal do navegador e selecione Inspecionar elemento no menu de contexto.

Usuários não familiarizados com as Ferramentas para o desenvolvedor (CDT) podem consultar a documentação do Google para as Ferramentas para o desenvolvedor do Chrome

Por favor note que o CDT não é capaz de distinguir entre o código HTML5 que corresponde à aplicação que está sendo testada (o seu código)  do código do Emulador de Dispositivos, tendo em vista que os dois estão sendo executados em conjunto dentro da mesma aba do navegador. Isso pode ser confuso, mas não é difícil se orientar utilizando as seguintes dicas:

  • No painel Elements, concentre sua atenção no elemento iframe HTML principal, conntendo a sua aplicação. Você pode identificar facilmente este elemento; ele se parece com isso:

    <iframe id="document" src="xxx">

    Aqui, xxx representa a URL simulada.

    Provavelmente o modo mais rápido para encontrar este elemento é digitar iframe na caixa de busca na parte direita superior da bara de ferramentas do CDT.

  • No painel Sources, ignore o arquivo ripple.js. Ele contém o código em JavaScript do Emulador.
  • No painel Console, selecione document da lista drop-down de frames perto do lado esquerdo inferior da tela. Isto faz com que comandos digitados sejam executados no contexto da sua aplicação. Também, ignore qualquer saída do arquivo ripple.js, pois ela traz informações de diagnóstico do Emulador de Dispositivos, não da sua aplicação.

Você pode mover a interface de usuário do CDT para uma janela separada do navegador, clicando no botão undock into separate window no canto esquerdo inferior. Isto pode te permitir a utilização mais eficiente do espaço da tela, pois as interfaces do Emulador e do CDT poderão ser colocados lado a lado ao invés de acima e abaixo. 

Interação do Emulador de Dispositivos com a Intel HTML5 Development Environment IDE

Para executar o emulador dentro da  IDE:

  1. Selecione um arquivo HTML (usualmente o arquivo de mais alto nível na aplicação, tipicamente chamado index.html).
  2. Faça uma das seguintes operações:
  • Selecione o menu Tools > Device Emulator.
  • Clique no botão Device Emulator   na barra de menu principal.

Resultado: A IDE lança o Emulador de Dispositivos em uma nova aba do navegador.

Pode ser útil destacar esta aba (clique na aba e arraste-a para o desktop), porque isso irá te permitir ver o Emulador de Dispositivos e a IDE ao mesmo tempo.

A aba do Emulador de dispositivos trabalha em uma URL com o seguinte formato:

emulator-url?url=project-file-url

onde:

  • emulator-url especifica o HTML do próprio Emulador. Este valor é o mesmo para todos os projetos.
  • project-file-url especifica o arquivo que você selecionou para a emulação na IDE.

A string project-file-url possui a forma project-home/path-to-file, onde:

  • project-home é a URL que a IDE atribuiu ao seu projeto.
  • path-to-file é o arquivo que você selecionou, com o path relativo à raiz da sua árvore de projeto.

Se a sua aplicação mostra um hiperlink e se você clicar neste hiperlink dentro do Emulador de Dispositivos, a página selecionada será renderizada no frame principal, exatamente como ocorreria em um dispositivo real.

NOTA: A URL da barra de endereços do Chrome não muda quando a sua aplicação faz a transição para uma nova página. Isto significa que a parte project-file-url da URL que você vê na barra de endereços do Chrome pode não ser sempre a mesma URL que está sendo visualizada no emulador.

Se você estiver em dúvida, é sempre possível determinar a project-file-url iniciando as Ferramentas para o desenvolvedor do Chrome, selecionando o painel Elements, e encontrando o elemento iframe da janela principal do Emulador de Dispositivos. Ela vai se parecer com isso:

<iframe id="document" src="xxx">

O atributo src (xxx) sempre será equivalente ao project-file-url.

Outra forma de trocar para outra página de aplicação é editar a URL na barra de endereços e selecionar um project-file-url diferente (e apertar Enter para atualizar a página). O frame principal do Emulador de Dispositivos será atualizada para a nova página. Isso deve ser mais rápido do que sair do Emulador, abrir o novo arquivo na IDE e executar o Emulador novamente.

Segurança no Emulador de Dispositivos

O Emulador de Dispositivos é executado dentro do navegador como uma aplicação web e está sujeito às regras usuais de segurança do navegador. O navegador Chrome força a política de mesma origin (same-origin policy), o que significa que ele não permite que aplicações web de um site mostrem dados de outro site. Normalmente isto é bom, tendo em vista que tanto o Emulador de Dispositivos quanto o programa que está sendo testado tem a mesma origem, que é o servidor da IDE, baseado em nuvem. Entretanto, se sua aplicação abre um link para um servidor diferente, o Emulador de Dispositivos vai tentar seguir este link, mas será impedido de faze-lo pelo navegador. Isso irá gerar um erro no Emulador, e você poderá ver uma mensagem do tipo “Cannot GET ...” no frame do dispositivo. Você também poderá encontrar erros na console de JavaScript.

Aplicações web híbridas podem violar a política de mesma origem pois elas não são executadas em um navegador. Qualquer aplicação híbrida que viole a política de mesma origem quando é distribuída, deverá enfrentar os mesmos problemas quando for executada no Emulador de Dispositivos.

Se você encontrar problemas de segurança, desative a política de mesma origem, reiniciando o Chrome com a opção --disable-web-security na linha de comando de execução do navegador.

Rolagem no Emulador de Dispositivos

Se você abrir muitos painéis (ou escolher um dispositivo grande o suficiente no painel de Dispositivos), a interface gráfica do Emulador  pode ficar maior do que a janela do navegador. Neste caso, toda a janela do navegador pode ser rolada para ajuste. Mesmo que não exista nenhum botão visível para o controle de rolagem, você pode fazer a rolagem usando a roda de rolagem do mouse ou as setas direcionais do  teclado.

Se o programa em testes apresentar uma interface gráfica que seja maior do que a tela do emulador, a janela do dispositivo emulado passa a suportar a rolagem. De novo, não existem botões visíveis para o controle da rolagem (tal como seria em um dispositivo real). Para executar a rolagem dentro da janela do dispositivo, clique na janela (ou dê o foco a ela) e use a roda de rolagem do mouse ou as setas direcionais do  teclado.

Se a máquina onde a IDE está sendo executada possuir tela sensível ao toque, você também executar a rolagem baseada em toque, tanto para o dispositivo quanto para a IDE.

Resolução de tela em plataforma cruzada

Selecionar um dispositivo no Emulador irá determinar as dimensões em pixels do quandro onde a aplicação testada será renderizada. Por exemplo, se você selecionar o dispositivo chamado 320x480 (Quarter VGA, e.g. Apple iPhone), o Emulador cria uma área de renderização com o tamanho de de 320x40 pixels. Você pode se perguntar como esta área se compara com o que você veria em um iPhone* real.

Para responder esta pergunta, você precisa pensar em termos de pixels por polegada (ppi). A tela do iPhone possui 160 ppi, o que significa que o tamanho físico da tela de 320x480 é de 2x3 polegadas.

Como isso se compara com a sua máquina de desenvolvimento? Desde os anos 1980, os monitores possuem algo como 96 ppi. Um monitor confortável de 27” sendo utilizado em 2560x1440 trabalha com 109 ppi. Novos laptops possuem 1920x1080 pixels em um monitor de 14”, que resulta em 157 ppi. Então a tela de um iPhone provavelmente possui uma densidade maior do que o seu monitor. Isto significa que a janela de 320x480 em seu monitor é de maior do que uma tela real de um iPhone.

Novos dispositivos prometem resoluções ainda maiores. Por exemplo, dispositivos da Apple com o Retina* display chegam a 320 ppi. No entanto um outro fator entra no jogo em densidades mais elevadas: escalonamento.

Sem escalonamento, o tamanho físico dos elementos de uma interface gráfica diminuem conforme a densidade aumenta. Isto é bastante significativo em dispositivos com tela de toque, porque em algum momento começa a ficar difícil conseguir tocar em um botão com o seu dedo. Para contornar este problema, o sistema operacional aplica um zoom na interface. O sistema operacional iOS* da Apple aplica um zoom de 200% nos elementos da interface gráfica em dispositivos com 320 ppi. Isto significa que um ícone que possui 32 pixels é escalonado para 64 pixels, o que faz com que ele aparente ter o mesmo tamanho físico que um ícone em um dispositivo com 160 ppi. De modo similar, o sistema operacional Windows*8 suporta zoom de 100%, 140% e 180%.

Do ponto de vista do desenvolvedor, você codifica para o tamanho com o zoom aplicado, também chamado de css-pixels. Por exemplo, você pode usar  a mesma interface gráfica para dispositivos iPad*2 em 160 ppi com tela de 1024x768 e para o iPad 3 com 320 ppi e tela (Retina) de 2048x1536, pois o sistema operacional cuida de tudo para você. O único detalhe é que você talvez queira prover imagens diferentes para cada fator de zoom, caso você utilize imagens em bitmap. Se você utilizar gráficos vetoriais, o sistema operacional irá escalonar estas imagens automaticamente. Se sua aplicação é executada no sistema operacional Windows 8, prepare o zoom para 100%, 140% e 180%.

Atualmente o Emulador de Dispositivos não suporta múltiplos dispositivos com as mesmas dimensões em pixels porém densidades (ppi) diferentes. As dimensões dos dispositivos devem ser entendidas como sendo em pixels css.

Recursos

Nähere Informationen zur Compiler-Optimierung finden Sie in unserem Optimierungshinweis.