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 NetBeans IDE 6.9 ou posterior

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 posterior
Java Development Kit (JDK) Versão 6 ou versão 7

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. Download WaitScreenExample.zip.
  2. Descompacte o arquivo.
  3. No IDE, selecione Arquivo > Abrir projetoe navegue até a pasta que contém os arquivos descompactados.
  4. Clique em Abrir projeto.
    A vista do Projeto deve ter uma aparência semelhante a esta:

    Janela Projetos com os arquivos WaitScreenExample

  5. 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.
  6. Na janela Emulador, clique no botão abaixo de "Iniciar." O emulador exibe o endereço URL do website do NetBeans:: http://netbeans.org.
  7. Clique no botão abaixo de "OK." A tela pergunta se está de acordo em usar tempo de conexão.
  8. 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

  9. 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 TextBox e WaitScreen
  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. Selecione o projeto WaitScreenExample na janela Projeto e, a seguir, selecioneArquivo > 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. Selecione o pacote waitscreenexample na janela Projeto e, a seguir, selecioneArquivo > 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 Wait Screen
    • Altere list para List
    • Altere alert para Alert
  4. Use os valores da propriedade para cada um dos seguintes componentes:
    • Altere a propriedade de texto textBox para http://netbeans.org
    • Altere a String alert para Falha na conexão
    • Altere a propriedade de texto WaitScreen para Aguarde...

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

Visualização de Fluxo com os í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. No navegador, 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 elipse (botão Elipse) contra a 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 do 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 fechar a caixa de diálogo Propriedades.
    A imagem alert.png é vinculada ao componente alert.
  9. Repita as etapas 2 a 8, para o componente waitScreen, adicione o sandglass.png com uma image2 e vincule-o ao componente.

Adicionando os comandos OK, Voltar e Sair nos componentes TextBox e WaitScreen

  1. Escolha o comando OK na seção Comandos da Paleta. Arraste-o e solte-o na textBox.
  2. Escolha o comando Voltar na seção Comandos da Paleta. Arraste-o e solte-o na lista.
  3. Escolha o comando Sair na seção Comandos da Paleta. Arraste-o e solte-o na lista.

Criando o Fluxo do Aplicativo

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

  1. Na visualização Fluxo, clique em Started 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 textBox ao waitScreen ao list1 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 de fluxo, clique com o botão direito do mouse no componentewaitScreen e escolha Propriedades no menu pop-up.
  2. Na caixa de diálogo Propriedades, selecione <NewCancellableTask> do menu suspenso Tarefa e clique em Fechar.
    Agora simpleCancellableTask é uma tarefa em segundo plano do componente waitScreen.
  3. Clique no botão Código-fonte na parte superior da do Visual Mobile Designer para alternar 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) { }:
          private void getServerInfo() throws IOException {
          String url = textBox.getString();
          list.deleteAll();
          /**
          * Open an 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 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();
          } 
    
  5. Clique com o botão direito do mouse no código-fonte e escolha Corrigir importações no menu suspenso (alternativamente, pressione Ctrl+Shift+I).
  6. Encontre a string public class MyWaitScreenMidlet extends MIDlet implements CommandListener { (linha 18) e insira final de forma que leia:
     public final class MyWaitScreenMidlet extends MIDlet implements CommandListener {
  7. Encontre o método public MyWaitScreenMidlet() no código-fonte (linha 38) e insira o código a seguir após public MyWaitScreenMidlet() {:
     List list1 = getList();
  8. Clique na Tela para alternar para a visualização da Tela e selecione SimpleCancellableTask.
  9. Na janela Propriedades, clique no botão de reticências botão de reticências contra a propriedade Código Executável.
  10. Clique em Ir para código-fonte na caixa de diálogo do código Executável.
  11. Encontre o método getSimpleCancellableTask() no código-fonte (linha 328) e insira o seguinte código após public void execute() throws Exception { onde se lê // write task-execution user code here:
     getServerInfo();

Executando o projeto

Pressione F6 para executar o projeto principal.

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

início

Javadoc dos componentes da WaitScreen e SimpleCancellableTask

O NetBeans IDE oferece Javadocs de API dos componentes WaitScreen e SimpleCancellableTask, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs dos componentes WaitScreen e simpleCancellableTask, realize as etapas abaixo:

  1. Coloque o cursor no componente WaitScreen ou SimpleCancellableTask no código-fonte e pressione Ctr-Shift-Espaço (ou selecione Código-fonte > Exibir documentação).
    O Javadoc deste elemento é exibido em uma janela pop-up.
  2. Clique em Exibir documentação no ícone de navegador da Web externo (Exibir documentação no navegador da Web externo) na janela pop-up para obter informações detalhadas sobre o componente WaitScreen ou SimpleCancellableTask em seu navegador.

início



Veja também

início

get support for the NetBeans

Support