| <!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 personalizados do Visual Mobile Designer: criando um aplicativo gerenciador de informações pessoais - 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 Harelzak"> | |
| </HEAD> | |
| <BODY> | |
| <a name="top"></a> | |
| <H1>Componentes personalizados do Visual Mobile Designer: Criando um aplicativo gerenciador de informações pessoais</H1> | |
| <P>O Visual Mobile Designer (VMD) é uma interface gráfica do NetBeans Mobility que permite criar aplicativos móveis usando componentes de arrastar e soltar. O VMD permite definir o fluxo do aplicativo e criar a GUI usando os componentes fornecidos pelo IDE ou componentes que você mesmo criar. O VMD contém muitos componentes de Interface de usuário (IU) padrão que você pode usar para criar aplicativos como Listas, Alertas, Formulários e Imagens. Ele também inclui componentes personalizados que simplificam a criação de recursos mais complexos, tais como Telas de espera, Telas de abertura, Itens de tabela, etc. </P> | |
| <p>O Navegador PIM é um componente personalizado que fornece acesso fácil a funções de dispositivos móveis padrão como calendário, bloco de endereços ou lista de tarefas. Você pode usar o componente Navegador PIM para ativar aplicativos Java móveis para acessar os bancos de dados de informações pessoais armazenados localmente. Este componente utiliza os Pacotes opcionais de PDA da API do PIM (Personal Information Management) que é uma parte da <a href="http://jcp.org/en/jsr/detail?id=75">especificação JSR-75s</a> para a Plataforma | |
| Java ME. Como a JSR-75 não é uma parte da especificação MIDP 2.0, ela é por definição um componente personalizado e só pode ser usada com os dispositivos ativados por JSR-75.</p> | |
| <P>Este tutorial mostra como usar o componente Navegador PIM em um aplicativo móvel para dispositivos ativados por JSR-75. Ela demonstra os recursos básicos do componente , tal como a navegação de conteúdo de um banco de dados de contados, Calendário ou Lista de tarefas pendentes. Além do Navegador PIM, também precisamos usar três outros componentes: Tela de abertura, Caixa de texto e Alerta. | |
| </P> | |
| <!--<p class="notes"><b>Observação:</b> Se você estiver usando o NetBeans IDE 6.8, consulte o tutorial <a href="../../68/javame/pimbrowser.html">: criando um aplicativo gerenciador de informações pessoais no NetBeans IDE 6.8</a>.</p>--> | |
| <p><b>Conteúdo</b></p> | |
| <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 class="class"> | |
| <li><a href="#sample-app">Instalando e executando o aplicativo de amostra</a></li> | |
| <li></a>Criando um aplicativo com o componente personalizado Navegador PIM<a href="#create-app"></li><div> | |
| <ul> | |
| <LI><A HREF="#create">Criando o projeto PIMBrowserExample</A> </LI> | |
| <LI><A HREF="#add">Adicionando pacotes e um MIDlet visual ao projeto</A> </LI> | |
| <LI><A HREF="#addcomponent">Adicionando componentes ao projeto</A> </LI> | |
| <LI><A HREF="#addcommands">Adicionando comandos ao projeto</A> </LI> | |
| <LI><A HREF="#connect">Conectando os componentes para criar um fluxo de aplicativo</A> </LI> | |
| <LI><A HREF="#storage">Adicionando contatos ao banco de dados de contatos do Wireless Toolkit</A></LI> | |
| <LI><A HREF="#run">Executando o projeto</A> </LI> | |
| </ul></div> | |
| <li><a href="#javadoc-pim">Javadoc do componente do Navegador PIM</a></li> | |
| <li><a href="#see-also">Consulte também</a></li> | |
| </ul> | |
| <p><b>Para acompanhar este tutorial, são necessários os recursos e softwares listados abaixo.</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 e 7 </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p>Se ainda não estiver familiarizado com o NetBeans Mobility, antes de continuar seria recomendável ler o <A HREF="../../docs/javame/quickstart.html">Guia de início rápido do NetBeans Java ME MIDP</A>.</p> | |
| <a name="sample-app"></a> | |
| <H2>Instalando e executando o aplicativo de amostra</H2> | |
| <P>Antes de começar, talvez você queira ver o resultado final do | |
| tutorial. | |
| </P> | |
| <P>Siga as etapas seguintes para instalar o aplicativo PIMBrowserExample:</P> | |
| <OL> | |
| <LI>Baixe <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/PIMBrowserExample.zip">PIMBrowserExample.zip</A></LI> | |
| <LI>Descompacte o arquivo.</LI> | |
| <LI>No IDE, escolha <tt> Arquivo</tt> > <tt>Abrir projeto</tt>e navegue até a pasta que contém os arquivos descompactados com o projeto <tt>PIMBrowserExample</tt>.</li> | |
| <li>Clique em Abrir projeto.<br> | |
| A janela Projetos deve ter uma aparência semelhante a esta: </li> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/pimbrowser/pim-project.png" border=1 alt="Projeto com o exemplo do Navegador PIM aberto"> </p> | |
| <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."<BR>O emulador exibe um componente Tela de abertura, | |
| em seguida, Navegador PIM, como mostrado:</li> | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/pimbrowser/pim-emulator70.png" border=1 alt="Emulador SDK 3.0 exibindo o aplicativo Navegador PIM de amostra"></p> | |
| <li>Clique no botão superior direito do emulador para exibir os itens do menu como indicado abaixo: | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/pimbrowser/pim-emulator70-menu.png" border=1 alt="Emulador SDK 3.0 exibindo os ítems do menu"></p></li> | |
| <LI>Com o item Detalhes selecionado, clique no botão central no emulador para exibir os detalhes do contato: </li> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/pimbrowser/pim-emulator2-70.png" border=1 alt="Emulador WTK 2.5 exibindo o aplicativo Navegador PIM de amostra"></p> | |
| </OL> | |
| <UL> | |
| <LI>Mova o cursor para cima e para baixo para | |
| navegar pelas posições disponíveis. </LI> | |
| <LI>Clique no botão abaixo de "Voltar" para voltar para a lista de contatos. </LI> | |
| <LI>Clique no botão abaixo de "Sair" para fechar o aplicativo. </LI> | |
| </UL> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <a name="create-app"></a> | |
| <H2 >Criando um aplicativo com o componente personalizado Navegador PIM</H2> | |
| <P>Agora que você viu o componente Navegador PIM em ação, vamos | |
| voltar para o início e criar essa aplicativo. Para criar o aplicativo, faça o seguinte: </P> | |
| <OL> | |
| <LI><A HREF="#create">Crie o projeto PIMBrowserExample</A> </LI> | |
| <LI><A HREF="#add">Adicione pacotes e um MIDlet visual ao projeto</A> </LI> | |
| <LI><A HREF="#addcomponent">Adicione componentes ao projeto</A> </LI> | |
| <LI><A HREF="#addcommands">Adicione comandos ao projeto</A> </LI> | |
| <LI><A HREF="#connect">Conecte os componentes para criar um fluxo de aplicativo</A> </LI> | |
| <LI><A HREF="#storage">Adicionar contatos ao banco de dados de contatos do Wireless Toolkit</A></LI> | |
| <LI><A HREF="#run">Executar o projeto</A> </LI> | |
| </OL> | |
| <H3 ><A NAME="create"></A>Criando o projeto | |
| PIMBrowserExample</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>PIMBrowserExample</CODE> | |
| no campo Nome do projeto. Altere a Localização do projeto para um diretório em seu sistema. A partir de agora, vamos chamar esse diretório de <tt>$PROJECTHOME</tt>. </LI> | |
| <LI>Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo. </LI> | |
| <LI>Selecione o Java (TM) Platform Micro Edition SDK 3.0 como a plataforma do emulador. Clique em Próximo. </LI> | |
| <LI>Na Seleção de mais configurações, clique em Terminar. </li> | |
| <p class="notes"><b>Observação:</b> a pasta do projeto contém todos os códigos-fonte e metadados do projeto, como o script Ant do projeto.</p> | |
| </OL> | |
| <H3 ><A NAME="add"></A>Adicionando pacotes e um | |
| MIDlet visual ao projeto</H3> | |
| <OL> | |
| <LI>Escolha o projeto <CODE>PIMBrowserExample</CODE> na vista do Projeto e, a seguir, escolha <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>Indique <CODE>pimbrowserexample</CODE> | |
| no campo Nome do pacote. Clique em Terminar. | |
| </LI> | |
| <LI>Escolha o pacote <CODE>pimbrowserexample</CODE> na vista do Projeto e, a seguir, escolha <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>Indique <CODE>PIMBrowserExample</CODE> nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar.<br> O aplicativo é exibida na janela Design de fluxo do Visual Mobile Designer. | |
| </LI> | |
| </OL> | |
| <H3><A NAME="addcomponent"></A>Adicionando componentes ao projeto </H3> | |
| <OL> | |
| <LI>No Design de fluxo, arraste e solte os seguintes componentes da Paleta de componentes: </LI> | |
| <UL> | |
| <li><tt>Tela de abertura</tt></li> | |
| <li><tt>Alerta</tt></li> | |
| <li><tt>Navegador PIM</tt></li> | |
| </UL> | |
| <LI>Clique em <tt>splashScreen</tt> e, na janela Propriedades, altere o valor <tt>Texto</tt> de <tt>null</tt> (nulo) para o <tt>PIM Browser Example</tt>. | |
| <LI>Clique em <tt>alert</tt> e, na janela Propriedades, altere o valor da propriedade <tt>Sting</tt> para </tt>Contact selected<tt>. | |
| </OL> | |
| <H3><A NAME="addcommands"></A>Adicionando comandos ao projeto</H3> | |
| <OL> | |
| <li>No Design de fluxo Escolha o </tt>comando Sair<tt> na seção comandos da Paleta do componente.</li> | |
| <li>Arraste-o e solte-o no componente <tt>pimBrowser</tt>.</li> | |
| </OL> | |
| <H3><A NAME="connect"></A>Conectando os componentes para criar um fluxo de aplicativo </H3> | |
| <p>No Design de fluxo, clique em <tt>Ponto de início</tt> no Dispositivo móvel e arraste-o para o componente </tt>splashScreen<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/pimbrowser/pim-flow.png" border=1 alt="Mostra o Designer de fluxo com componentes conectados por linhas de comando"></p> | |
| <H3><A NAME="storage"></A>Adicionando contatos ao banco de dados de contatos do Wireless Toolkit</H3> | |
| <P> Copie o <A HREF="https://netbeans.org/files/documents/4/1613/SAMPLE.VCF">sample contact</A> para a pasta <tt>javame-sdk</tt> no diretório do usuário <tt>$JAVAME-SDKHOME/3.0/work/0/appdb/PIM/contacts/Contacts/</tt>.<br> | |
| Esta pasta contém os três seguintes métodos como padrão: | |
| <li> 1.vcf</li> | |
| <li> 2.vcf</li> | |
| <li>categories.txt</li> | |
| </P> | |
| <H3><A NAME="run"></A>Executando o projeto</H3> | |
| <div> | |
| <p>Pressione F6 para executar o projeto principal ou selecione <tt>Executar</tt> > <tt>Executar projeto principal</tt>.</p> | |
| </div> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <a name="javadoc-pim"></a> | |
| <H2>Javadoc do componente do Navegador PIM</H2> | |
| <P>O NetBeans IDE oferece Javadocs de API do componente <tt>PIMBrowser</tt>, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs do componente <tt>pimBrowser</tt>, faça o seguinte: | |
| </P> | |
| <OL> | |
| <li>Coloque o cursor no componente <tt>PIMBrowser</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/pimbrowser/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>PIMBrowser</tt> em seu navegador.</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=NetBeans%20Java%20ME%20Custom%20Component:%20PIM%20Browser">Envie-nos seus comentários</a></div> | |
| <br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <H2>Consulte 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="loginscreen.html">Componentes padrão do Visual Mobile Designer: criando telas de logon no dispositivo móvel</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="splashscreen.html">Componentes padrão do Visual Mobile Designer: usando telas de splash em aplicativos Java ME</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 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> |