| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> | |
| <!-- Use is subject to license terms.--> | |
| <html> | |
| <head> | |
| <title>Componentes personalizados do Visual Mobile Designer: Usando telas de splash em aplicativos Java ME - Tutorial do NetBeans IDE</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content="NetBeans Visual Mobile Designer"> | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Componentes personalizados do Visual Mobile Designer: Usando telas de splash em aplicativos Java ME</h1> | |
| <p>As telas de splash são usadas para aprimorar a aparência de um aplicativo. Geralmente, uma tela de splash é usada no início do programa ou para exibir informações de marca ou logotipo. Oferece aos usuários a impressão de seus aplicativos. O Visual Mobile Designer (VMD) do NetBeans inclui o componente personalizado Tela de splash na paleta do VMD. Este breve exemplo mostra como criar um novo projeto Java ME com o componente Tela de splash usando o NetBeans. Também explicará como usar os recursos para planejar e implementar suas próprias telas de splash usando este recurso.</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/splashscreen.html">Usando telas de splash em aplicativos Java ME em 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 e posterior" title="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e posterior" > | |
| <ul> | |
| <li><a href="#sample" title="Instalando e executando o aplicativo de amostra">Instalando e executando o aplicativo de amostra</a></li> | |
| <li><a href="#create" title="Criando um aplicativo móvel com o componente Tela de splash personalizado">Criando um aplicativo móvel com o componente Tela de splash personalizado</a> | |
| <div> | |
| <ul> | |
| <LI><A HREF="#create">Criando o projeto SplashScreenExample</A> </LI> | |
| <LI><A HREF="#add">Adicionando pacotes e um MIDlet visual ao projeto</A> </LI> | |
| <li><a href="#addcomponent">Adicionando componentes a MySplashScreenMidlet</a></li> | |
| <li><a href="#timeout">Alterando a propriedade Tempo de espera do componente SplashScreen</a></li> | |
| <li><a href="#addexit">Adicionando comandos Sair e Voltar ao componente Formulário</a></li> | |
| <li><a href="#addimage">Adicionando um recurso de imagem</a></li> | |
| <li><a href="#bindimage">Vinculando uma imagem a um componente</a></li> | |
| <li><a href="#connect">Conectando os componentes</a></li> | |
| <LI><A HREF="#run">Executando o projeto</A> </LI> | |
| </ul> | |
| </div> | |
| </li> | |
| <li><a href="#javadoc-splashscreen" title="Javadoc para o componente SplashScreen">Javadoc para o componente SplashScreen</a></li> | |
| <li><a href="#nextsteps" 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 e 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="sample"></a>Instalando e executando o aplicativo de amostra</h2> | |
| <p>Antes de começar, talvez você queira ver o resultado final do | |
| tutorial. <br> | |
| Siga as etapas a seguir para instalar o aplicativo <tt>SplashScreenExample</tt>:</p> | |
| <ol> | |
| <li>Baixe o arquivo <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/SplashScreenExample.zip"> SplashScreenExample.zip.</a></li> | |
| <li>Descompacte o arquivo. </li> | |
| <li>A janela Projetos deve ter uma aparência semelhante a esta: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-open.png" border=1 alt="Janela Abrir projeto com o projeto SplashScreen. " > </p> | |
| </li> | |
| <li>Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Executar projeto (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 uma tela de splash, conforme mostrado: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-emulator.png" border=1 alt="Emulador de dispositivos com uma tela de splash que pede aos usuários que aguardem dez segundos ou pressionem uma tecla para fechar"></p> | |
| </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="create"></a>Criando um aplicativo móvel com o componente Tela de splash personalizado </h2> | |
| <div class="indent"> | |
| <p>Agora que você viu o componente Tela de splash em ação, vamos | |
| voltar para o início e criar esse aplicativo. Para criar o aplicativo, faça o seguinte: </p> | |
| </div> | |
| <ol> | |
| <li> <a href="#creating">Crie o projeto SplashScreen</a></li> | |
| <li> <a href="#addpackage">Adicionar pacotes e um MIDlet visual ao projeto</a> | |
| </li> | |
| <li><a href="#addcomponent">Adicione os componentes a MySplashScreenMidlet</a></li> | |
| <li><a href="#timeout">Altere a propriedade Tempo de espera do componente Tela de splash</a></li> | |
| <li><a href="#addexit">Adicione comandos Sair e Voltar ao componente Formulário</a></li> | |
| <li><a href="#addimage">Adicione um recurso de imagem</a></li> | |
| <li><a href="#bindimage">Vincule uma imagem a um componente</a></li> | |
| <li><a href="#connect">Conecte os componentes</a></li> | |
| <li><a href="#run">Executar o projeto</a></li> | |
| </ol> | |
| <h3 class="tutorial"><a name="creating"></a>Criando o projeto SplashScreen</h3> | |
| <ol> | |
| <li> Escolha <tt>Arquivo</tt> > <tt>Novo projeto (Ctrl-Shift-N)</tt>. Em Categorias, selecione Java ME. Em Projetos, selecione Aplicativo móvel e clique em Próximo. </li> | |
| <li> Indique <code>SplashScreenExample</code> no campo Nome do projeto. Altere a Localização do projeto para um diretório em seu sistema. Este diretório é chamado de <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 on the Add Additional Configurations dialog to create the project. | |
| The Projects window displays the project sources and 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"><a name="addpackage"></a>Adicionando pacotes e um | |
| MIDlet visual ao projeto</h3> | |
| <ol> | |
| <li> Selecione o projeto <code>SplashScreenExample</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 Avançar. </li> | |
| <li> Indique <code>splashscreenexample</code> no campo Nome do pacote. Clique em Terminar. </li> | |
| <li> Selecione o pacote <code>splashscreenexample</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 Avançar. </li> | |
| <li> Indique <code>MySplashScreenMIDlet</code> nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar. </li> | |
| </ol> | |
| <h3 class="tutorial"><a name="addcomponent"></a>Adicione os componentes a MySplashScreenMidlet</h3> | |
| <ol> | |
| <li> Alterne seu Visual MIDlet para a janela | |
| de fluxo. Arraste os componentes Tela seguintes da paleta e solte-os no Designer de fluxo: | |
| <ul> | |
| <li>Tela de splash</li> | |
| <li>Formulário</li> | |
| </ul> | |
| </li> | |
| <li> Componente Tela de splash exibido no Designer de fluxo: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-flowscreen.png" border=1 alt="Exibição da aba Fluxo no VMD mostrando os componentes selecionados" ></p></li> | |
| <li>Selecione o componente <tt>splashScreen1</tt>. Nas propriedades deste componente, altere o Título para <code>Tela de splash</code> e insira <code>Aguarde 10 segundos ou pressione uma tecla para fechar</code> na propriedade <tt>Texto</tt>.</li> | |
| <li>Selecione o componente Formulário e altere sua propriedade Título para <code>Formulário</code>.</li> | |
| <li>Clique duas vezes no componente Formulário na janela Fluxo para alterar para o Designer de tela</li> | |
| <li>Selecione o componente <tt>StringItem</tt> na seção Itens do formulário da Paleta e arraste e solte-o no form1.</li> | |
| <li>Clique duas vezes no <tt>stringItem1</tt> no Designer de tela. Exclua o título <tt>stringItem1</tt> e altere <code><Inserir texto></code> para <code>Pressione Sair para fechar o aplicativo</code>.</li> | |
| </ol> | |
| <h3 class="tutorial">Alterando a propriedade Tempo de espera do componente Tela de splash<a name="timeout"></a></h3> | |
| <ol> | |
| <li>Escolha Fluxo na parte superior da janela do Visual Mobile Designer para abrir a exibição da aba Fluxo.</li> | |
| <li>Selecione o componente Tela de splash. </li> | |
| <li>Na janela Propriedades, localize a propriedade <tt>Tempo de espera</tt> e altere-a de <tt>5.000</tt> para <tt>10.000</tt> milissegundos.</li> | |
| </ol> | |
| <h3 class="tutorial"><a name="addexit">Adicionando comandos Sair e Voltar ao componente Formulário</a></h3> | |
| <p>Escolha o <tt>comando Sair</tt> na seção Comandos da Paleta e arraste-o para o componente form1. </p> | |
| <h3 class="tutorial">Adicionando uma recurso de imagem<a name="addimage"></a></h3> | |
| <ol> | |
| <li> | |
| Copie o arquivo <tt>splash.png</tt> na pasta <code>$PROJECTHOME/src/splashscreenexample</code>. | |
| </li> | |
| <li> No navegador, clique com o botão direito do mouse no componente <tt>splashScreen</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/splashscreen/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 image1 é adicionado.</li> | |
| <li>Na caixa de diálogo Abrir especifique o caminho do arquivo <tt>splash.png</tt> copiado.<br> | |
| A imagem é adicionada.</li> | |
| <li>Clique em OK para fechar a caixa de diálogo aberta.</li> | |
| <li>Clique em Fechar para fechar a caixa de diálogo Propriedades.</li> | |
| </ol> | |
| <a name="bindimage"></a> | |
| <h3 class="tutorial">Vinculando uma imagem a um componente</h3> | |
| <ol> | |
| <li> Selecione o componente <tt>splashScreen1</tt>. </li> | |
| <li> Na janela Propriedades, use o menu suspenso para alterar a propriedade imagem para image1. Clique duas vezes no componente para abrir a tela de splash no Designer de tela Deveria ser semelhante a tela abaixo. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-screendesigner.png" border=1 alt="Tela de splash com uma imagem e o texto "Aguarde 10 segundos ou pressione uma tecla para fechar."" ></p> | |
| </li> | |
| </ol> | |
| <h3 class="tutorial">Conectando componentes <a name="connect"></a></h3> | |
| <p>Na exibição Fluxo, clique no Ponto de início e arraste a seta para o componente <tt>splashscreen1</tt>. Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-flow.png" border=1></p> | |
| <h3 class="tutorial">Executando o projeto<a name="run"></a></h3> | |
| <p>Pressione F6 para executar o projeto principal. Como alternativa, você pode selecionar <tt>Executar</tt> > <tt>Executar projeto principal</tt>.</p> | |
| <h2><a name="javadoc-splashscreen"></a>Javadoc para o componente splashScreen</h2> | |
| <P>O NetBeans IDE oferece Javadocs de API do componente <tt>SplashScreen</tt>, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs do componente <tt>SplashScreen</tt>: | |
| </P> | |
| <OL> | |
| <li>Coloque o cursor no componente <tt>SplashScreen</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/70/mobility/splashscreen/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>SplashScreen</tt> em seu navegador.</li> | |
| </OL> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Using%20Splash%20Screens%20in%20Java%20ME%20Applications">Envie-nos seus comentários</a></div> | |
| <br style="clear:both;" > | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="nextsteps"></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 personalizados do Visual Mobile Designer: Criando um navegador de arquivos de dispositivos móveis</a></li> | |
| <li><a href="pimbrowser.html">Componentes personalizados do Visual Mobile Designer: Criando um aplicativo gerenciador de informações pessoais</a></li> | |
| <li><a href="loginscreen.html">Componentes personalizados do Visual Mobile Designer: Criando telas de logon móveis</a></li> | |
| <li><a href="waitscreen.html">Componentes personalizados do Visual Mobile Designer: Criando telas de espera para aplicativos móveis</a></li> | |
| <li><a href="tableitem.html">Componentes personalizados 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> |