corner imagecorner image
IDEPlatformPluginsDocs & 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.

Nota: se estiver utilizando o NetBeans IDE 6.8, consulte o tutorial Criando telas de espera para aplicativos móveis no NetBeans IDE 6.8.

Conteúdo

O conteúdo desta página se aplica ao IDE NetBeans 6.9 ou 7.0

Para concluir este tutorial, são necessários os seguintes recursos e softwares:

Software ou recurso Versão necessária
NetBeans IDE com Java ME Versão 6.9 ou superior
Java Development Kit (JDK) Versão 6

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.

início

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 download de WaitScreenExample.zip.
  2. Descompacte o arquivo.
  3. No IDE, escolha Arquivo > Abrir projeto e vá para a pasta que contém o arquivo descompactado.
  4. Clique em Abrir projeto.
    A visualização Projeto deve ter uma aparência semelhante a 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 (ou pressione 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.

início

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

Nota: 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. Este diretório denomina-se $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 textBox. 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 waitScreen para Tela de espera
    • Altere list para Lista
    • Altere alert para Alerta
  4. Use os valores das propriedades em cada um dos componentes seguintes:
    • Altere a propriedade Texto de textBox para http://netbeans.org
    • Altere a propriedade String de alert para Falha de conexão
    • Altere a propriedade Texto de WaitScreen para Aguarde...

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

Visualização Fluxo com ícones dos componentes

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 no componente alert e escolha Propriedades no menu pop-up.
  3. Na caixa de diálogo Propriedades, clique no botão de reticências (botão de reticências) na propriedade Imagem.
  4. Na caixa de diálogo Imagem, clique em Adicionar.
    O componente image1 é adicionado.
  5. Clique em Procurar e, na caixa de diálogo Abrir, especifique o caminho para o arquivo alert.png copiado.
  6. Clique em Abrir.
    A imagem é adicionada.
  7. Clique em OK para fechar a caixa de diálogo Imagem.
  8. Clique em Fechar para sair da caixa de diálogo Propriedades.
    A imagem alert.png está vinculada ao componente alert.
  9. Repita as etapas de 2 a 8 do componente waitScreen, adicione andglass.png como image2, e vincule-a ao componente.

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. Arraste e solte-o em textBox.
  2. Escolha o comando Voltar na seção Comandos da Paleta. Arraste e solte-o em list.
  3. Escolha o comando Sair na seção Comandos da Paleta. Arraste e solte-o em list.

Criando o fluxo do aplicativo

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

  1. Na visualização Fluxo, clique no texto Iniciado no dispositivo móvel e arraste-o para o componente textBox.
  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 list ao MobileDevice.  Uma conexão do comando Falha para alert, que então conecta ao list

Criando uma tarefa em segundo plano para a Tela de espera

  1. Na visualização Fluxo, clique com o botão direito do mouse no componente waitScreen e escolha Propriedades no menu pop-up.
  2. Na caixa de diálogo Propriedades, escolha <NewCancellableTask> no menu suspenso Tarefa e clique em Fechar.
    simpleCancellableTask é agora uma tarefa em segundo plano do componente waitScreen.
  3. Clique no botão Código-fonte na parte superior Visual Mobile Designer para passar para o código-fonte do aplicativo.
  4. 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) { }:
  5.       private void getServerInfo() throws IOException {
          String url = textBox.getString();
          list.deleteAll();
          /**
          * Open an HttpConnection
          */ 
          HttpConnection hc = (HttpConnection) Connector.open(url);
    
          /**
          * Gets a header field key and header field by index and
          * insert it into list.
          */
          list.setTitle(hc.getURL());   
          for (int i=0;hc.getHeaderFieldKey(i)!=null; i++){
          list.insert(i,hc.getHeaderFieldKey(i)+" :"+hc.getHeaderField(i),null);       
          }     
          /**
          * Closing time ...
          */
          hc.close();
          } 
    
  6. Clique com o botão direito do mouse no código-fonte e escolha Corrigir importações no menu pop-up (como alternativa, pressione Ctrl+Shift+I).
  7. Localize a string public class MyWaitScreenMidlet extends MIDlet implements CommandListener { (linha 18) e insira final de modo que fique:
  8.  public final class MyWaitScreenMidlet extends MIDlet implements CommandListener {
  9. Localize o método public MyWaitScreenMidlet() no código-fonte (linha 38) e insira o código a seguir depois de public MyWaitScreenMidlet() {:
  10.  List list1 = getList();
  11. Clique em Tela para passar para a visualização Tela e selecione SimpleCancellableTask.
  12. Na janela Propriedades, clique no botão de reticências (botão de reticências) na propriedade Código executável.
  13. Clique em Ir para o código na caixa de diálogo Código executável.
  14. Localize o método getSimpleCancellableTask() no código-fonte (linha 328) e insira o código a seguir depois de public void execute() throws Exception {, onde se lê // write task-execution user code here (escrever aqui o código do usuário para execução de tarefa):
  15.  getServerInfo();

Executando o projeto

Pressione F6 para executar o projeto principal.

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

início

Javadoc para os componentes Tela de espera e Tarefa cancelável simples

O NetBeans IDE oferece Javadocs da API para os componentes WaitScreen e SimpleCancellableTask, bem como para outros componentes que podem ser usados no VMD. Para ler os Javadocs dos componentes WaitScreen e SimpleCancellableTask, complete a etapas abaixo:

  1. Coloque o cursor no componente WaitScreen ou SimpleCancellableTask e pressione Ctrl-Shift-Barra de espaço (ou escolha Código-fonte > Mostrar documentação).
    O Javadoc para este elemento é exibido em uma janela suspensa.
  2. Clique em Mostrar documentação no ícone do navegador da Web externo (Mostrar documentação no navegador da Web externo) na janela pop-up para visualizar informações detalhadas sobre o componente WaitScreen ou SimpleCancellableTask no seu navegador.

início



Veja também

início