| <!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 Abertura em Aplicações 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 Abertura em Aplicações Java ME</h1> | |
| <p>As telas de abertura são usadas para aprimorar a aparência de uma aplicação. Geralmente, uma tela de abertura é usada no início do programa ou para exibir informações de marca ou logotipo. Oferece aos usuários a impressão de suas aplicações. O Visual Mobile Designer (VMD) do NetBeans inclui o componente personalizado Tela de Abertura na paleta do VMD. Este breve exemplo mostra como criar um novo projeto Java ME com o componente Tela de Abertura usando o NetBeans. Também explicará como usar as funcionalidades para planejar e implementar suas próprias telas de abertura usando esta funcionalidade.</p> | |
| <p>Se você é novo no desenvolvimento de aplicações 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 Abertura em Aplicações Java ME no NetBeans IDE 6.8</a>.</p>--> | |
| <h3>Conteúdo</h3> | |
| <img alt="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e versão mais recente" class="stamp" src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" title="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e versão mais recente"> | |
| <ul> | |
| <li><a href="#sample" title="Instalando e Executando a Aplicação de Amostra">Instalando e Executando a Aplicação de Amostra</a></li> | |
| <li><a href="#create" title="Criando uma Aplicação Móvel com o Componente Personalizado Tela de Abertura">Criando uma Aplicação Móvel com o Componente Personalizado Tela de Abertura</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 ao MySplashScreenMidlet</a></li> | |
| <li><a href="#timeout">Alterando a Propriedade de Time-out do Componente Tela de Abertura</a></li> | |
| <li><a href="#addexit">Adicionando Comandos Sair e Voltar ao Componente Form</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 do Componente Tela de Abertura">Javadoc do Componente Tela de Abertura</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 a Aplicação 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 a aplicação <tt>SplashScreenExample</tt>:</p> | |
| <ol> | |
| <li>Faça o download do <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 a seguinte aparência: | |
| <p class="align-center"><img alt="Abrir janela Projeto exibindo o projeto Tela de Abertura." border="1" src="../../../images_www/articles/70/mobility/splashscreen/splash-open.png"> </p> | |
| </li> | |
| <li>Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar Projeto (ou pressione F6). Conforme a aplicação é executada, uma janela do emulador se abre e exibe a aplicação que está sendo executada no emulador do dispositivo default. </li> | |
| <li>Na janela Emulador, clique no botão abaixo de "Acionar". O emulador exibe uma tela de abertura, conforme mostrado: | |
| <p class="align-center"><img alt="Dispositivo emulador exibindo uma tela de abertura que diz aos usuários para aguardar dez segundos ou pressionar uma chave para fechar" border="1" src="../../../images_www/articles/70/mobility/splashscreen/splash-emulator.png"></p> | |
| </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="create"></a>Criando uma Aplicação Móvel com o Componente Personalizado Tela de Abertura </h2> | |
| <div class="indent"> | |
| <p>Agora que você viu o componente Tela de Abertura em ação, vamos voltar para o início e criar essa aplicação. Para criar a aplicação, faça o seguinte: </p> | |
| </div> | |
| <ol> | |
| <li> <a href="#creating">Crie o projeto Tela de Abertura</a></li> | |
| <li> <a href="#addpackage">Adicione Pacotes e um MIDlet Visual ao Projeto</a> | |
| </li> | |
| <li><a href="#addcomponent">Adcione componentes ao MySplashScreenMidlet</a></li> | |
| <li><a href="#timeout">Altere a Propriedade de Time-out do Componente Tela de Abertura</a></li> | |
| <li><a href="#addexit">Adicione Comandos Sair e Voltar ao Componente Form</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">Execute o Projeto</a></li> | |
| </ol> | |
| <h3 class="tutorial"><a name="creating"></a>Criando o Projeto Tela de Abertura</h3> | |
| <ol> | |
| <li> Selecione <tt>Arquivo</tt> > <tt>Novo Projeto (Ctrl-Shift-N)</tt>. Em Categorias, selecione Java ME. Em Projetos, selecione Aplicação Móvel e clique em Próximo. </li> | |
| <li> Insira <code>SplashScreenExample</code> no campo Nome do Projeto. Altere o Local do Projeto para um diretório em seu sistema. Este diretório é chamado de <tt>$PROJECTHOME</tt>. </li> | |
| <li> Desmarque a caixa de seleçã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 Finalizar. </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, em seguida, 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>splashscreenexample</code> no campo Nome do Pacote. Clique em Finalizar. </li> | |
| <li> Selecione o pacote <code>splashscreenexample</code> na janela Projeto e, em seguida, selecione<tt>Arquivo</tt> > <tt>Novo Arquivo (Ctrl-N)</tt>. Em Categorias, selecione MIDP. Em Tipos de Arquivo, selecione Visual MIDlet. Clique em Próximo. </li> | |
| <li> Insira <code>MySplashScreenMIDlet</code> nos campos Nome do MIDlet e Nome da Classe MIDP. Clique em Finalizar. </li> | |
| </ol> | |
| <h3 class="tutorial">Adicionando Componentes ao MySplashScreenMidlet<a name="addcomponent"></a></h3> | |
| <ol> | |
| <li> Alterne seu MIDlet Visual para a janela de Fluxo. Arraste os seguintes componentes Tela da paleta e solte-os no Designer de Fluxo: | |
| <ul> | |
| <li>Tela de Abertura</li> | |
| <li>Form</li> | |
| </ul> | |
| </li> | |
| <li> Componente Tela de Abertura exibido no Designer de Fluxo: | |
| <p class="align-center"><img alt="View do design de fluxo no VMD mostrando os componentes selecionados" border="1" src="../../../images_www/articles/70/mobility/splashscreen/splash-flowscreen.png"></p></li> | |
| <li>Selecione o componente <tt>splashScreen1</tt>. Nas Propriedades deste componente, altere o Título para <code>Tela de Abertura</code> e insira <code>Aguarde 10 segundos ou pressione uma tecla para fechar</code> na propriedade <tt>Texto</tt>.</li> | |
| <li>Selecione o componente form e altere sua propriedade Título para <code>Form</code>.</li> | |
| <li>Clique duas vezes no componente form na janela Fluxo para alterar para o Designer de Tela</li> | |
| <li>Selecione o componente <tt>StringItem</tt> na seção Itens do Form da Paleta e arraste e solte-o no form1.</li> | |
| <li>Clique duas vezes no <tt>stringItem1</tt> no Designer de Tela. Delete o título <tt>stringItem1</tt> e altere <code><Inserir texto></code> para <code>Pressione Sair para fechar a aplicação</code>.</li> | |
| </ol> | |
| <h3 class="tutorial">Alterando a Propriedade de Time-out do Componente Tela de Abertura<a name="timeout"></a></h3> | |
| <ol> | |
| <li>Selecione Fluxo na parte superior da janela do Visual Mobile Designer para abrir a exibição do Designer de Fluxo.</li> | |
| <li>Selecione o componente Tela de Abertura </li> | |
| <li>Na Janela Propriedades, localize a propriedade <tt>Time-out</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 Form</a></h3> | |
| <p>Selecione o <tt>Comando Sair</tt> na seção Comandos da Paleta e arraste-o para o componente form1. </p> | |
| <h3 class="tutorial">Adicionando um Recurso de Imagem<a name="addimage"></a></h3> | |
| <ol> | |
| <li> | |
| Copie o arquivo <tt>splash.png</tt> para a pasta <code>$PROJECTHOME/src/splashscreenexample</code>. | |
| </li> | |
| <li> Clique com o botão direito do mouse no componente <tt>Tela de Abertura</tt> e selecione Propriedades no menu pop-up. </li> | |
| <li> | |
| Na caixa de diálogo Propriedades, clique no botão de elipse (<img alt="Botão de elipse" border="1" src="../../../images_www/articles/70/mobility/splashscreen/ellipsis-button.png">) na propriedade da Imagem. </li> | |
| <li> Na caixa de diálogo Imagem, clique em Adicionar.<br> O componente image1 foi adicionado.</li> | |
| <li>Na caixa de diálogo Abrir especifique o caminho do arquivo <tt>splash.png</tt> copiado.<br> A imagem foi adicionada.</li> | |
| <li>Clique em OK para fechar a caixa de diálogo Abrir.</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 drop-down para alterar a propriedade Imagem para image1. Clique duas vezes no componente para abrir a tela de abertura no Designer de Tela. Agora deve ter a seguinte aparência. | |
| <p class="align-center"><img alt="Tela de Abertura com uma imagem e texto "Aguarde 10 seg. ou pressione uma chave para fechar"." border="1" src="../../../images_www/articles/70/mobility/splashscreen/splash-screendesigner.png"></p> | |
| </li> | |
| </ol> | |
| <h3 class="tutorial">Conectando Componentes <a name="connect"></a></h3> | |
| <p>Na view do 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/70/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 do Componente Tela de Abertura</h2> | |
| <P>O NetBeans IDE oferece Javadocs de API para o componente <tt>Tela de Abertura</tt>, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs do componente <tt>Tela de Abertura</tt>: | |
| </P> | |
| <OL> | |
| <li>Coloque o cursor no componente <tt>Tela de Abertura</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 Mostrar documentação no ícone do browser Web externo (<img alt="Exibir documentação no browser Web externo" src="../../../images_www/articles/70/mobility/splashscreen/show-doc-button.png">) na janela pop-up para exibir as informações detalhadas sobre o componente <tt>Tela de Abertura</tt> no seu browser.</li> | |
| </OL> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Using%20Splash%20Screens%20in%20Java%20ME%20Applications">Envie-nos Seu Feedback</a></div> | |
| <br style="clear:both;" > | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="nextsteps"></a>Consulte Também</h2> | |
| <ul> | |
| <li><a href="../../71/javame/smscomposer.html">Componentes Personalizados do Visual Mobile Designer: criando uma aplicação SMS Composer</a></li> | |
| <li><a href="../../71/javame/filebrowser.html">Componentes Personalizados do Visual Mobile Designer: Criando um Browser de Arquivos de Dispositivos Móveis</a></li> | |
| <li><a href="../../71/javame/pimbrowser.html">Componentes Personalizados do Visual Mobile Designer: criando uma Aplicação do Gerenciador de Informações Pessoais</a></li> | |
| <li><a href="../../71/javame/loginscreen.html">Componentes Personalizados do Visual Mobile Designer: criando Telas de Log-in Móveis</a></li> | |
| <li><a href="../../71/javame/waitscreen.html">Componentes Personalizados do Visual Mobile Designer: criando Telas de Espera para Aplicações Móveis</a></li> | |
| <li><a href="../../71/javame/tableitem.html">Componentes Personalizados do Visual Mobile Designer: Usando Itens de Tabela em Aplicações Java ME</a></li> | |
| <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Referência:Guia da Paleta do Visual Mobile Designer</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| </body> | |
| </html> |