<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
<!-- | |
Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
--> | |
<html> | |
<head> | |
<title>Componentes padrão do Visual Mobile Designer: criando telas de espera para aplicativos móveis - Tutorial do - NetBeans Java ME</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
<link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
<meta name="author" content="Karol Harezlak"> | |
</head> | |
<body> | |
<a name="top"></a> | |
<h1>Componentes padrão do Visual Mobile Designer: criando telas de espera para aplicativos móveis</h1> | |
<p> 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? </p> | |
<p>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.</p> | |
<p>Se você é novo no desenvolvimento de aplicativos móveis no NetBeans, deveria começar pelo<A HREF="quickstart.html"> Guia de início rápido do NetBeans Java ME MIDP</A> antes de continuar.</p> | |
<!--<p class="notes"><b>Observação:</b> Se você estiver usando o NetBeans IDE 6.8, consulte o tutorial <a href="../../68/javame/waitscreen.html">: criando telas de espera para aplicativos móveis no NetBeans IDE 6.8</a>.</p>--> | |
<h3>Conteúdo</h3> | |
<img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="O conteúdo desta página se aplica ao NetBeans IDE 6.9 ou posterior" title="O conteúdo desta página se aplica ao NetBeans IDE 6.9 ou posterior" > | |
<ul> | |
<li><a href="#intro" title="Introdução: como funciona o componente Tela de espera">Introdução: como funciona o componente Tela de espera</a></li> | |
<li><a href="#sample" title="Instalando e executando o aplicativo de amostra">Instalando e executando o aplicativo de amostra</a></li> | |
<li><a href="#creating" title="Criando um aplicativo móvel com o componente Tela de espera personalizado">Criando um aplicativo móvel com o componente Tela de espera personalizado</a> | |
<ul> | |
<li> <a href="#create">Criando o projeto WaitScreenExample</a> </li> | |
<li><a href="#add">Adicione pacotes e um Visual MIDlet ao projeto MyWaitScreen</a></li> | |
<li><a href="#addcomponent">Adicionando componentes ao MyWaitScreenMidlet</a></li> | |
<li><a href="#addimage">Adicionando recursos de imagem</a></li> | |
<li><a href="#addcomponents">Adicionando os comandos OK, Voltar e Sair nos componentes Caixa de texto e Tela de espera</a></li> | |
<li><a href="#createflow">Criando o Fluxo do Aplicativo</a></li> | |
<li><a href="#backgroundtask">Criando uma tarefa em segundo plano para a Tela de espera</a></li> | |
<li><a href="#run">Executando o projeto</a></li> | |
</ul></li> | |
<li><a href="#javadoc-waitscreen">Javadoc dos componentes da tela de espera e SimpleCancellableTask</a></li> | |
<li><a href="#seealso" title="Consulte também">Consulte também</a></li> | |
</ul> | |
<p><b>Para concluir este tutorial, são necessários os seguintes recursos e softwares:</b></p> | |
<table> | |
<tbody> | |
<tr> | |
<th class="tblheader" scope="col">Software ou recurso</th> | |
<th class="tblheader" scope="col">Versão necessária</th> | |
</tr> | |
<tr> | |
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE com Java ME</a></td> | |
<td class="tbltd1">Versão 6.9 ou posterior</td> | |
</tr> | |
<tr> | |
<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> | |
<td class="tbltd1">Versão 6 ou versão 7</td> | |
</tr> | |
</tbody> | |
</table> | |
<h2><a name="intro"></a>Como funciona o componente Tela de espera</h2> | |
<p> Há duas formas para criar tarefas em segundo plano para o componente Tela de espera. Você pode escrever uma classe que implemente a interface <code>CancellableTask</code> ou apenas usar o recurso <code>SimpleCancellableTask</code>. Você atribui tarefas em segundo plano na Tela de espera usando o método <code>setTask()</code>. </p> | |
<p>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 <code>setNextDisplayable()</code>. Se a tarefa falha, a Tela de espera alterna para uma exibição fornecida pelos métodos <code>setFailureDisplayable()</code>. 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 <code>setNextDisplayable()</code>. Se não houver uma próxima tela exibível, a Tela de espera alterna de volta para a tela que foi anteriormente exibida. </p> | |
<p>Observe que este componente está disponível para aplicativos que suportam somente o perfil de dispositivo MIDP 2.0.</p> | |
<p class="align-center"><a href="#top">início</a></p> | |
<h2><a name="sample"></a>Instalando e executando o aplicativo de amostra</h2> | |
<div class="indent"> Antes de começar, talvez você queira ver o resultado final do | |
tutorial. | |
<p>Siga as etapas seguintes para instalar o aplicativo de amostra waitscreensample:</p> | |
<ol> | |
<li> Download <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/WaitScreenExample.zip">WaitScreenExample.zip.</a></li> | |
<li> Descompacte o arquivo. </li> | |
<li> No IDE, selecione <tt>Arquivo</tt> > <tt>Abrir projeto</tt>e navegue até a pasta que contém os arquivos descompactados. </li> | |
<li>Clique em Abrir projeto.<br>A vista do Projeto deve ter uma aparência semelhante a esta: | |
<p class="align-center"><img src="../../../images_www/articles/71/mobility/waitscreen/ws-project-window.png" alt="Janela Projetos com os arquivos WaitScreenExample" border=1> | |
</p> </li> | |
<li>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. </li> | |
<li>Na janela Emulador, clique no botão abaixo de | |
"Iniciar." O emulador exibe o endereço URL do website do NetBeans:: http://netbeans.org.</li> | |
<li>Clique no botão abaixo de "OK." A tela pergunta se está de acordo em usar tempo de conexão. </li> | |
<li>Clique no botão "Sim" abaixo para continuar. Quando o emulador tenta se conectar ao site, ele exibe a Tela de espera. | |
<p class="align-center"> <img src="../../../images_www/articles/71/mobility/waitscreen/ws-emulator.png" alt="Emulador DefaultColorPhone exibindo o aplicativo de tela de espera de amostra" border=1> </p> | |
</li> | |
<li>Após o emulador se conectar, feche o aplicativo. </li> | |
</ol> | |
</div> | |
<p class="align-center"><a href="#top">início</a></p> | |
<h2><a name="creating"></a>Criando um aplicativo móvel com o componente Tela de espera personalizado </h2> | |
<div class="indent"> | |
<p>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: </p> | |
<ol> | |
<li> <a href="#create">Crie o projeto WaitScreenExample</a> </li> | |
<li><a href="#add">Adicione pacotes e um Visual MIDlet ao projeto MyWaitScreen</a></li> | |
<li><a href="#addcomponent">Adicione componentes ao MyWaitScreenMIDlet</a></li> | |
<li><a href="#addimage">Adicione recursos de imagem</a></li> | |
<li><a href="#addcomponents">Adicione os comandos OK, Voltar e Sair nos componentes TextBox e WaitScreen</a></li> | |
<li><a href="#createflow">Criar o fluxo do aplicativo</a></li> | |
<li><a href="#backgroundtask">Crie uma tarefa em segundo plano para a Tela de espera </a></li> | |
<li><a href="#run">Executar o projeto</a></li> | |
</ol> | |
<p class="notes"><strong>OBSERVAÇÃO:</strong> 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. </p> | |
</div> | |
<div class="indent"> | |
<h3 class="tutorial">Criando o projeto WaitScreenExample<a name="create"></a></h3> | |
<ol> | |
<li> Escolha <tt>Arquivo</tt> > <tt>Novo projeto (Ctrl-Shift-N)</tt>. Em Categorias, selecione <tt>Java ME</tt>. Em Projetos, selecione <tt>Aplicativo móvel</tt> e clique em Próximo. </li> | |
<li> Insira <code>WaitScreenExample</code> 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 <tt>$PROJECTHOME</tt>. </li> | |
<li> Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo. </li> | |
<li> Deixe o Sun Java Wireless Toolkit 2.5.2 como a plataforma do emulador selecionada. Clique em Terminar. </li> | |
<!--li> Click Finish. The project folder contains all of your sources and project metadata, such as the project Ant script. The application itself is displayed in the Flow Design window of the Visual Mobile Designer. </li--> | |
</ol> | |
<h3 class="tutorial">Adicionando pacotes em um Visual MIDlet ao projeto WaitScreenExample<a name="add"></a></h3> | |
<ol> | |
<li> Selecione o projeto <code>WaitScreenExample</code> na janela Projeto e, a seguir, selecione<tt>Arquivo</tt> > <tt>Novo arquivo (Ctrl-N)</tt> . Em Categorias, selecione Java. Em Tipos de arquivo, | |
selecione Pacote Java. Clique em Próximo. </li> | |
<li> Insira <code>waitscreenexample</code> no campo Nome do pacote. Clique em Terminar. </li> | |
<li> Selecione o pacote <code>waitscreenexample</code> na janela Projeto e, a seguir, selecione<tt>Arquivo</tt> > <tt>Novo arquivo (Ctrl-N)</tt>. Em Categorias, selecione MIDP. Em Tipos de arquivo, selecione | |
MIDlet visual. Clique em Próximo. </li> | |
<li> Insira <code>MyWaitScreenMidlet</code> nos campos Nome MIDlet e Nome da classe MIDP. Clique em Terminar. </li> | |
</ol> | |
<h3 class="tutorial">Adicionando componentes ao MyWaitScreenMidlet<a name="addcomponent"></a></h3> | |
<p>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. </p> | |
<ol> | |
<li> 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: | |
<ul> | |
<li> | |
<div class="indent"> Caixa de texto</div> | |
</li> | |
<li> | |
<div class="indent">Tela de espera</div> | |
</li> | |
<li> | |
<div class="indent">Lista</div> | |
</li> | |
<li> | |
<div class="indent">Alerta | |
</div> | |
</li> | |
</ul></li> | |
<li>Escolha <tt>textBox</tt>. Na janela Propriedades (abaixo da paleta de componentes), altere a propriedade Título para <code>Caixa de texto</code>.</li> | |
<li>Use o mesmo processo para alterar os títulos dos seguintes componentes: | |
<ul> | |
<li> | |
<div class="indent">Altere <tt>waitScreen</tt> para <code>Wait Screen</code></div> | |
</li> | |
<li> | |
<div class="indent">Altere <tt>list</tt> para <code>List</code></div> | |
</li> | |
<li> | |
<div class="indent">Altere <tt>alert</tt> para <code>Alert</code></div> | |
</li> | |
</ul> | |
</li> | |
<li>Use os valores da propriedade para cada um dos seguintes componentes: | |
<ul> | |
<li> | |
<div class="indent">Altere a propriedade de texto <tt>textBox</tt> para <code>http://netbeans.org</code></div> | |
</li> | |
<li> | |
<div class="indent">Altere a String <tt>alert</tt> para <code>Falha na conexão</code></div> | |
</li> | |
<li> | |
<div class="indent">Altere a propriedade de texto <tt>WaitScreen</tt> para <code>Aguarde...</code></div> | |
</li> | |
</ul> | |
</li> | |
</ol> | |
<p>A visualização Fluxo deve se parecer com a seguinte imagem: </p> | |
<p class="align-center"> | |
<a href="../../../images_www/articles/71/mobility/waitscreen/ws-flowdesigner.png" rel="lytebox" | |
title="Visualização de Fluxo com os ícones dos componentes"> <img src="../../../images_www/articles/71/mobility/waitscreen/ws-flowdesigner-small.png" | |
alt="Visualização de Fluxo com os ícones dos componentes" border=1></a></p> | |
<h3 class="tutorial">Adicionando recursos de imagem<a name="addimage" id="addimage"></a></h3> | |
<p>Nesta seção, você adiciona imagens que são usadas pela Tela de espera e pela Tela de alerta. </p> | |
<ol> | |
<li>Faça o download e copie os arquivos <a href="../../../images_www/articles/71/mobility/waitscreen/alert.png">alert.png</a> e <a href="../../../images_www/articles/71/mobility/waitscreen/sandglass.png">sandglass.png</a> na pasta <code>$PROJECTHOME/src/waitscreenexample</code>.</li> | |
<li>No navegador, clique com o botão direito do mouse no componente <tt>alert</tt> e escolha Propriedades no menu pop-up.</li> | |
<li>Na caixa de diálogo, Propriedades, clique no botão de elipse (<img src="../../../images_www/articles/71/mobility/waitscreen/ellipsis-button.png" border=1 alt="botão Elipse" >) contra a propriedade Imagem.</li> | |
<li>Na caixa de diálogo Imagem, clique em Adicionar.<br> | |
O componente </tt>image1<tt> é adicionado.</li> | |
<li>Clique em Procurar e na caixa de diálogo Abrir especifique o caminho do arquivo alert.png copiado.</li> | |
<li>Clique em Abrir.<br>A imagem é adicionada.</li> | |
<li>Clique em OK para fechar a caixa de diálogo Imagem.</li> | |
<li>Clique em Fechar para fechar a caixa de diálogo Propriedades.<br>A imagem alert.png é vinculada ao componente <tt>alert</tt>.</li> | |
<li>Repita as etapas 2 a 8, para o componente <tt>waitScreen</tt>, adicione o sandglass.png com uma <tt>image2</tt> e vincule-o ao componente. </li> | |
</ol> | |
</div> | |
<div class="indent"> | |
<h3 class="tutorial">Adicionando os comandos OK, Voltar e Sair nos componentes TextBox e WaitScreen<a name="addcommands" id="addcommands"></a></h3> | |
<ol> | |
<li>Escolha o <tt>comando OK</tt> na seção Comandos da Paleta. Arraste-o e solte-o na <tt>textBox</tt>.</li> | |
<li> Escolha o <tt>comando Voltar</tt> na seção Comandos da Paleta. Arraste-o e solte-o na </tt>lista<tt>.</li> | |
<li> Escolha o <tt>comando Sair</tt> na seção Comandos da Paleta. Arraste-o e solte-o na </tt>lista<tt>.</li> | |
</ol> | |
<h3 class="tutorial">Criando o Fluxo do Aplicativo<a name="createflow" id="createflow"></a></h3> | |
<p>Agora você está pronto para criar o fluxo do aplicativo.</p> | |
<ol> | |
<li>Na visualização Fluxo, clique em <tt>Started</tt> no Dispositivo móvel e arraste-o para o componente <tt>textBox</tt>.</li> | |
<li>Da mesma forma, conecte os componentes como mostrado no gráfico seguinte. | |
<p class="align-center"> | |
<a href="../../../images_www/articles/71/mobility/waitscreen/ws-flow.png" rel="lytebox" | |
title="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"> <img src="../../../images_www/articles/71/mobility/waitscreen/ws-flow-small.png" | |
alt="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" border=1></a></p> | |
</li> | |
</ol> | |
<h3 class="tutorial">Criando uma tarefa em segundo plano para a Tela de espera <a name="backgroundtask" id="backgroundtask"></a></h3> | |
<ol> | |
<li>Na visualização de fluxo, clique com o botão direito do mouse no componente<tt>waitScreen</tt> e escolha Propriedades no menu pop-up.</li> | |
<li>Na caixa de diálogo Propriedades, selecione <tt><NewCancellableTask></tt> do menu suspenso Tarefa e clique em Fechar. <br> | |
Agora <tt>simpleCancellableTask</tt> é uma tarefa em segundo plano do componente <tt>waitScreen</tt>.</li> | |
<li>Clique no botão Código-fonte na parte superior da do Visual Mobile Designer para alternar para o código-fonte do aplicativo. </li> | |
<li>Adicione um método da tarefa em segundo plano ao colar o seguinte código no código-fonte <code>MyWaitScreenMIDlet</code> após <code>public void destroyapp(boolean unconditional) { }</code>: | |
<pre class="examplecode"> | |
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(); | |
} | |
</pre></li> | |
<li>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).</li> | |
<li>Encontre a string <tt>public class MyWaitScreenMidlet extends MIDlet implements CommandListener {</tt> (linha 18) e insira <tt>final</tt> de forma que leia: | |
<pre class="examplecode"> public final class MyWaitScreenMidlet extends MIDlet implements CommandListener {</pre></li> | |
<li>Encontre o método <tt>public MyWaitScreenMidlet()</tt> no código-fonte (linha 38) e insira o código a seguir após <tt>public MyWaitScreenMidlet() {</tt>:<br> | |
<pre class="examplecode"> List list1 = getList();</pre> </li> | |
<li>Clique na Tela para alternar para a visualização da Tela e selecione <tt>SimpleCancellableTask</tt>.</li> | |
<li>Na janela Propriedades, clique no botão de reticências <img src="../../../images_www/articles/71/mobility/waitscreen/ellipsis-button.png" border=1 alt="botão de reticências" > contra a propriedade <tt>Código Executável</tt>.</li> | |
<li>Clique em Ir para código-fonte na caixa de diálogo do código Executável.</li> | |
<li>Encontre o método <tt>getSimpleCancellableTask()</tt> no código-fonte (linha 328) e insira o seguinte código após <tt>public void execute() throws Exception {</tt> onde se lê <tt>// write task-execution user code here</tt>:<br> | |
<pre class="examplecode"> getServerInfo();</pre></li> | |
</ol> | |
</div> | |
<div class="indent"> | |
<h3 class="tutorial">Executando o projeto<a name="run"></a></h3> | |
<p>Pressione F6 para executar o projeto principal.</p> | |
<p> Como alternativa, você pode selecionar Executar > Executar projeto principal.</p> | |
</div> | |
<p class="align-center"><a href="#top">início</a></p> | |
<div class="indent"> | |
<a name="javadoc-waitscreen"></a> | |
<h2>Javadoc dos componentes da WaitScreen e SimpleCancellableTask</h2> | |
<P>O NetBeans IDE oferece Javadocs de API dos componentes <tt>WaitScreen</tt> e <tt>SimpleCancellableTask</tt>, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs dos componentes <tt>WaitScreen</tt> e <tt>simpleCancellableTask</tt>, realize as etapas abaixo:</P> | |
<OL> | |
<li>Coloque o cursor no componente <tt>WaitScreen</tt> ou </tt>SimpleCancellableTask<tt> no código-fonte e pressione Ctr-Shift-Espaço (ou selecione <tt>Código-fonte</tt> > <tt>Exibir documentação</tt>).<br> | |
O Javadoc deste elemento é exibido em uma janela pop-up. </li> | |
<li>Clique em Exibir documentação no ícone de navegador da Web externo (<img src="../../../images_www/articles/71/mobility/smscomposer/show-doc-button.png" alt="Exibir documentação no navegador da Web externo">) na janela pop-up para obter informações detalhadas sobre o componente <tt>WaitScreen</tt> ou </tt>SimpleCancellableTask<tt> em seu navegador.</li> | |
</OL> | |
</div> | |
<p class="align-center"><a href="#top">início</a></p> | |
<div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=VMD%20Custom%20Components:%20Creating%20Wait%20Screens">Envie-nos seus comentários</a> | |
</div> | |
<br style="clear:both;" > | |
<br> | |
<h2><a name="seealso"></a>Veja também</h2> | |
<ul> | |
<li><a href="smscomposer.html">Componentes padrão do Visual Mobile Designer: criando um aplicativo SMS Composer</a></li> | |
<li><a href="filebrowser.html">Componentes padrão do Visual Mobile Designer: criando um navegador de arquivo de dispositivo móvel</a></li> | |
<li><a href="pimbrowser.html">Componentes padrão do Visual Mobile Designer: criando um aplicativo de gerenciador de informações pessoais</a></li> | |
<li><a href="loginscreen.html">Componentes padrão do Visual Mobile Designer: criando telas de logon no dispositivo móvel</a></li> | |
<li><a href="splashscreen.html">Componentes padrão do Visual Mobile Designer: usando telas de splash em aplicativos Java ME</a></li> | |
<li><a href="tableitem.html">Componentes padrão do Visual Mobile Designer: usando itens de tabela em aplicativos Java ME</a></li> | |
<li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li> | |
</ul> | |
<p class="align-center"><a href="#top">início</a></p> | |
</body> | |
</html> |