corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

Componentes padrão do Visual Mobile Designer: criando telas de espera para aplicativos móveis

Os aplicativos Java ME oferecem com frequência conexões para uma rede para funcionarem corretamente. Infelizmente, as redes sem-fio ainda são relativamente lentas. Uma tarefa em segundo plano esperando por uma conexão de rede ou a transferência de dados pode pausar seu aplicativo e fazer com que os se perguntem se a tela está indefinidamente congelada ou se é melhor desligar e tentar novamente mais tarde (ou não voltar a conectar). Portanto, como os desenvolvedores evitam esta experiência desagradável, mas muito comum?

A resposta para isso é adicionar uma "tela de espera". As telas de espera permitem que os usuários executem uma tarefa de bloqueio de segundo plano (por exemplo, conexão a uma rede) e mostram o progresso da tarefa ou exibem uma mensagem na tela para informar ao usuário que o aplicativo ainda está funcionando como esperado. Neste tutorial, mostraremos como o Visual Mobile Designer (VMD) simplifica a criação de telas de espera ao incluir um componente Tela de espera personalizado, que você pode personalizar e adicionar em seu fluxo do aplicativo.

Se você é novo no desenvolvimento de aplicativos móveis no NetBeans, deveria começar pelo Guia de início rápido do NetBeans Java ME MIDP antes de continuar.

Conteúdo

O conteúdo desta página se aplica ao IDE NetBeans 6.1, 6.5 e 6.7

Requisitos

Para concluir este tutorial, você precisa dos seguintes recursos e softwares:

Software ou recurso Versão necessária
NetBeans IDE com Java ME Versão 6.1 ou posterior
Java Development Kit (JDK) Versão 6 ou
versão 5

Introdução: como funciona o componente Tela de espera

Há duas formas para criar tarefas em segundo plano para o componente Tela de espera. Você pode escrever uma classe que implemente a interface CancellableTask ou apenas usar o recurso SimpleCancellableTask. Você atribui tarefas em segundo plano na Tela de espera usando o método setTask().

O componente Tela de espera alterna automaticamente para um objeto exibível diferente quando a tarefa em segundo plano é concluída. Se a tarefa termina com êxito, a Tela de espera alterna para uma exibição fornecida pelos métodos setNextDisplayable(). Se a tarefa falha, a Tela de espera alterna para uma exibição fornecida pelos métodos setFailureDisplayable(). Se não houver um padrão exibível definido para falha, a Tela de espera alterna para uma exibição especificada pelo método setNextDisplayable(). Se não houver uma próxima tela exibível, a Tela de espera alterna de volta para a tela que foi anteriormente exibida.

Observe que este componente está disponível para aplicativos que suportam somente o perfil de dispositivo MIDP 2.0.

Instalando e executando o aplicativo de amostra

Antes de começar, talvez você queira ver o resultado final do tutorial.

Siga as etapas seguintes para instalar o aplicativo de amostra waitscreensample:

  1. Faça o download do waitscreen.zip.
  2. Descompacte o arquivo.
  3. No IDE, escolha Arquivo > Abrir projeto e vá para a pasta que contém o arquivo descompactado.
  4. Abra a janela Projetos. Ela deve ser parecida com o seguinte:
  5. Janela Projetos com os arquivos WaitScreenExample

  6. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Executar projeto (ou pressione a tecla F6). Conforme o aplicativo é executado, uma janela do emulador se abre e exibe o aplicativo que está sendo executado no emulador do dispositivo padrão.
  7. Na janela Emulador, clique no botão abaixo de "Iniciar." O emulador exibe o endereço URL do website do NetBeans:: http://netbeans.org.
  8. Clique no botão abaixo de "OK." A tela pergunta se está de acordo em usar tempo de conexão.
  9. Clique no botão "Sim" abaixo para continuar. Quando o emulador tenta se conectar ao site, ele exibe a Tela de espera.

    Emulador DefaultColorPhone exibindo o aplicativo de tela de espera de amostra

  10. Após o emulador se conectar, feche o aplicativo.

Criando um aplicativo móvel com o componente Tela de espera personalizado

Agora que você viu o componente Tela de espera em ação, vamos voltar para o início e criar este aplicativo. Para criar o aplicativo, faça o seguinte:

  1. Crie o projeto WaitScreenExample
  2. Adicione pacotes e um Visual MIDlet ao projeto MyWaitScreen
  3. Adicione componentes ao MyWaitScreenMIDlet
  4. Adicione recursos de imagem
  5. Adicione os comandos OK, Voltar e Sair nos componentes Caixa de texto e Tela de espera
  6. Criar o fluxo do aplicativo
  7. Crie uma tarefa em segundo plano para a Tela de espera
  8. Executar o projeto

OBSERVAÇÃO: antes de criar este projeto, certifique-se de que o projeto WaitScreenExample executado nas etapas acima esteja fechado ou tenha sido excluído. O NetBeans IDE não permite que projetos identicamente nomeados sejam abertos ao mesmo tempo.

Criando o projeto WaitScreenExample

  1. Escolha Arquivo > Novo projeto (Ctrl-Shift-N). Em Categorias, selecione Java ME. Em Projetos, selecione Aplicativo móvel e clique em Próximo.
  2. Insira WaitScreenExample no campo Nome do projeto. Altere a Localização do projeto para um diretório em seu sistema. Nos referimos a este diretório como $PROJECTHOME.
  3. Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo.
  4. Deixe o Sun Java Wireless Toolkit 2.5.2 como a plataforma do emulador selecionada. Clique em Terminar.

Adicionando pacotes em um Visual MIDlet ao projeto WaitScreenExample

  1. Escolha o projeto WaitScreenExample na janela Projetos, e a seguir escolha Arquivo > Novo arquivo (Ctrl-N). Em Categorias, selecione Java. Em Tipos de arquivo, selecione Pacote Java. Clique em Próximo.
  2. Insira waitscreenexample no campo Nome do pacote. Clique em Terminar.
  3. Escolha o pacote waitscreenexample na janela Projetos e, a seguir, escolha Novo >Novo arquivo (Ctrl-N) . Em Categorias, selecione MIDP. Em Tipos de arquivo, selecione MIDlet visual. Clique em Próximo.
  4. Insira MyWaitScreenMidlet nos campos Nome MIDlet e Nome da classe MIDP. Clique em Terminar.

Adicionando componentes ao MyWaitScreenMidlet

Selecionando o Visual MIDlet abre o Visual Mobile Designer (VMD). Ao clicar na visualização Fluxo na parte superior da janela VMD, o Designer de fluxo se abre, onde você projeta o fluxo do aplicativo.

  1. Alterne seu Visual MIDlet para a visualização Fluxo. Arraste os seguintes componentes Tela da paleta de componentes e solte-os no Designer de fluxo:
    • Caixa de texto
    • Tela de espera
    • Lista
    • Alerta
  2. Escolha textBox1. Na janela Propriedades (abaixo da paleta de componentes), altere a propriedade Título para Caixa de texto.
  3. Use o mesmo processo para alterar os títulos dos seguintes componentes:
    • Altere waitScreen1 para Tela de espera
    • Altere List1 para Lista
    • Altere Alert1 para Alerta
  4. Use a propriedade String em cada um dos seguintes componentes para alterar seus valores:
    • Altere a string textBox1 para http://netbeans.org
    • Altere a string alert1 para Falha de conexão
  5. Altere a propriedade de texto WaitScreen1 para Aguarde...

A visualização Fluxo deve se parecer com a seguinte imagem:

Visualização Fluxo com os ícones dos componentes

Observe que cada componente tem ao menos um quadrado laranja junto ao mesmo. Você pode usá-los para conectar os componentes uns aos outros na sequência desejada para o fluxo do aplicativo. Observe também que waitScreen1 tem dois quadrados a sua direita.

Adicionando recursos de imagem

Nesta seção, você adiciona imagens que são usadas pela Tela de espera e pela Tela de alerta.

  1. Faça o download e copie os arquivos alert.png e sandglass.png na pasta $PROJECTHOME/src/waitscreenexample.
  2. Clique com o botão direito do mouse na pasta Recursos e escolha Adicionar > Imagem.
  3. Selecione image1. Na janela Propriedades escolha a propriedade Caminho do recurso e clique no botão de reticências (...). Na caixa de diálogo escolha alert.png.
  4. Selecione o componente alert1.
  5. Na janela Propriedades do alert1 encontre a propriedade Imagem e escolha image1 na lista. Esta ação vincula a imagem alert.png com o componente alert1.
  6. Repetindo as etapas 2 a 5, adicione uma image2, defina o Caminho do recurso como sandglass.png e vincule-o ao componente waitScreen1.

Adicionando os comandos OK, Voltar e Sair nos componentes Caixa de texto e Tela de espera

  1. Escolha o comando OK na seção Comandos da paleta de componentes. Arraste-o e solte-o em textBox1.
  2. Escolha o comando Voltar na seção Comandos da paleta de componentes. Arraste-o e solte-o na list1.
  3. Escolha o comando Sair na seção Comandos da paleta de componentes. Arraste-o e solte-o na list1.

Criar o fluxo do aplicativo

Agora você está pronto para criar o fluxo do aplicativo.

  1. Na visualização Fluxo, clique em Ponto de início no Dispositivo móvel e arraste-o para o componente textbox1.
  2. Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.

    Tela do Designer de fluxo conectada da seguinte forma: dispositivo móvel ao textBox1 ao waitScreen1 ao list1 ao MobileDevice. Uma conexão do comando Falha para alert1, que então conecta ao list1

Criando uma tarefa em segundo plano para a Tela de espera

  1. Clique com o botão direito do mouse em Recursos e escolha Adicionar > Tarefa simplesmente cancelável.
  2. Selecione o componente waitScreen1 na janela Designer de fluxo.
  3. Clique na propriedade Tarefa na janela Propriedades do waitScreen1 e escolha simpleCancellableTask1 no menu suspenso. Agora simpleCancellableTask1 é uma tarefa em segundo plano do componente waitScreen1.
  4. Clique no botão Código-fonte na parte superior da janela VMD. Isso exibe o código-fonte do aplicativo.
  5. Adicione um método da tarefa em segundo plano ao colar o seguinte código no código-fonte MyWaitScreenMIDlet após public void destroyapp(boolean unconditional) { }:
  6.       private void getServerInfo() throws IOException {
          String url = textBox1.getString();
          list1.deleteAll();
          /**
          * Abrir uma HttpConnection
          */ 
          HttpConnection hc = (HttpConnection) Connector.open(url);
    
          /**
          * Obtém uma chave do campo de cabeçalho e campo de cabeçalho por índice e
          * os insere em list1.
          */
          list1.setTitle(hc.getURL());   
          for (int i=0;hc.getHeaderFieldKey(i)!=null; i++){
          list1.insert(0,hc.getHeaderFieldKey(0)+" :"+hc.getHeaderField(0),null);       
          }     
          /**
          * Hora de fechar ...
          */
          hc.close();
          } 
    
  7. Na janela Propriedades de SimpleCancellableTask1 escolha a propriedade Executar.
  8. Na janela Inserir código, digite: getServerInfo();

Executando o projeto

  1. Pressione <F6> para executar o projeto principal.

    Como alternativa, você pode selecionar Executar > Executar projeto principal.

Para aprender mais sobre o componente Tela de espera e o recurso SimpleCancellableTask

O NetBeans IDE fornece a documentação API—javadocs—para o componente Tela de espera e para o recurso SimplecancellableTask, assim como todos os outros componentes que você pode usar no VMD. Para ler os javadocs:

  1. Escolha Ajuda > Referências Javadoc > Componentes MIDP do NetBeans Esta ação exibe um arquivo no navegador.
    • Para aprender mais sobre o componente Tela de espera, clique no link org.netbeans.microedition.lcdui. A seguir, clique no link Tela de espera na tabela Resumo da classe.
    • Para aprender mais sobre SimpleCancellableTask, clique no link org.netbeans.microedition.util. A seguir, clique no link SimpleCancellableTask na tabela Resumo da classe.

Tutoriais adicionais do componente NetBeans Java ME personalizado