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


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo