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
Requisitos
Para concluir este tutorial, você precisa dos seguintes recursos e softwares:
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:
- Faça o download do waitscreen.zip.
- Descompacte o arquivo.
- No IDE, escolha Arquivo > Abrir projeto e vá para a pasta que contém o arquivo descompactado.
- Abra a janela Projetos. Ela deve ser parecida com o seguinte:
- 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.
- Na janela Emulador, clique no botão abaixo de
"Iniciar." O emulador exibe o endereço URL do website do NetBeans:: http://netbeans.org.
- Clique no botão abaixo de "OK." A tela pergunta se está de acordo em usar tempo de conexão.
- Clique no botão "Sim" abaixo para continuar. Quando o emulador tenta se conectar ao site, ele exibe a Tela de espera.
- Após o emulador se conectar, feche o aplicativo.
Criando um aplicativo móvel com o componente Tela de espera personalizado
Criando o projeto WaitScreenExample
- Escolha Arquivo > Novo projeto (Ctrl-Shift-N). Em Categorias, selecione Java ME. Em Projetos, selecione Aplicativo móvel e clique em Próximo.
- 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.
- Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo.
- 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
- 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.
- Insira
waitscreenexample no campo Nome do pacote. Clique em Terminar.
- 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.
- 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.
- 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
- Escolha textBox1. Na janela Propriedades (abaixo da paleta de componentes), altere a propriedade Título para
Caixa de texto.
- Use o mesmo processo para alterar os títulos dos seguintes componentes:
- Use a propriedade String em cada um dos seguintes componentes para alterar seus valores:
-
Altere a propriedade de texto WaitScreen1 para Aguarde...
A visualização Fluxo deve se parecer com a seguinte imagem:
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.
- Faça o download e copie os arquivos alert.png e sandglass.png na pasta
$PROJECTHOME/src/waitscreenexample.
- Clique com o botão direito do mouse na pasta Recursos e escolha Adicionar > Imagem.
- 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.
- Selecione o componente alert1.
- 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.
- 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
- Escolha o comando OK na seção Comandos da paleta de componentes. Arraste-o e solte-o em textBox1.
- Escolha o comando Voltar na seção Comandos da paleta de componentes. Arraste-o e solte-o na list1.
- 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.
- Na visualização Fluxo, clique em Ponto de início no Dispositivo móvel e arraste-o para o componente textbox1.
- Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.
Criando uma tarefa em segundo plano para a Tela de espera
- Clique com o botão direito do mouse em Recursos e escolha Adicionar > Tarefa simplesmente cancelável.
- Selecione o componente waitScreen1 na janela Designer de fluxo.
- 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.
- Clique no botão Código-fonte na parte superior da janela VMD. Isso exibe o código-fonte do aplicativo.
- 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 = 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();
}
- Na janela Propriedades de SimpleCancellableTask1 escolha a propriedade Executar.
- Na janela Inserir código, digite:
getServerInfo();
Executando o projeto
-
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:
- 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