| <!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 Designer: criando telas de login no dispositivo móvel - 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 padrão do Visual Designer: criando telas de login no dispositivo móvel</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 componente personalizado Tela de login fornece uma interface do usuário útil com elementos padrão como o campo Nome do usuário, o campo Senha e o botão Logon. Você pode usar esse componente personalizado para criar a interface de logon para acessar recursos protegidos, tal como GSM banking.</p> | |
| <p>Se ainda não estiver familiarizado com o NetBeans Mobility nem com o J2EE, 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> | |
| <!--<p class="notes"><b>Observação:</b> se você estiver usando o NetBeans IDE 6.8, consulte o tutorial <a href="../../68/javame/loginscreen.html">Criando telas de login 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 href="#create-app">Criando um aplicativo com o componente personalizado Tela de login</a> | |
| <ul> | |
| <LI><A HREF="#create">Criando o projeto | |
| </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 componente Tela de login</A> | |
| </LI> | |
| <LI><A HREF="#connect">Conectando os componentes para criar um fluxo de aplicativo</A> | |
| </LI> | |
| <LI><A HREF="#storage">Adicionando código-fonte extra</A> | |
| </LI> | |
| <LI><A HREF="#run">Executando o projeto</A> | |
| </LI> | |
| </ul></li> | |
| <li><a href="#javadoc-loginscreen">Javadocs do componente Tela de login</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 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> | |
| <tr> | |
| <td class="tbltd1">GlassFish ou Tomcat </td> | |
| <td class="tbltd1">Incluído no <b>Java EE</b> e em <b>todas</b> as instalações do IDE</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <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>Este exemplo mostra como usar o componente personalizado Tela de logon em um aplicativo cliente e como conectá-la aos recursos do servidor usando acesso autenticado. Além do projeto do NetBeans Mobility, também precisamos do projeto da Web do NetBeans. Para completar este tutorial, é necessário saber como trabalhar com projetos da Web do | |
| NetBeans e ter acesso local ou remoto a um servidor da aplicação Web como | |
| GlassFish ou Tomcat. | |
| </p> | |
| <P>Siga as etapas seguintes para instalar o aplicativo de amostra <tt>LoginScreenExample</tt>:</P> | |
| <OL> | |
| <LI>Baixe <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenExample.zip">LoginScreenExample.zip | |
| </A>. Esse download contém o projeto completo do NetBeans Mobility.</LI> | |
| <LI>Baixe | |
| <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenServletExample.zip">LoginScreenServletExample.zip | |
| </A>. Esse download contém o projeto completo do NetBeans Web.</LI> | |
| <LI>Descompacte os arquivos.</LI> | |
| <LI>No IDE, selecione <tt> Arquivo</tt> > <tt>Abrir projeto</tt> e navegue até a pasta que contém os arquivos descompactados com o projeto <tt>LoginScreenExample</tt>.</LI> | |
| <li>Clique em Abrir projeto.</li> | |
| <li>Repita as etapas 4 e 5 acima para abrir o projeto <tt>LoginScreenServletExample</tt>.</LI> | |
| <LI>Os projetos devem se parecer visualmente com o seguinte: | |
| <p class="align-center"> | |
| <IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-project.png" NAME="graphics1" ALT="Janela Projeto com o exemplo da Tela de logon e do Servlet da tela de logon aberto" BORDER=1> </p></li> | |
| <LI>Na janela Projetos, clique com o botão direito no nó do projeto <tt>LoginScreenServletExample</tt> e selecione Executar projeto (ou pressione a tecla F6).</li> | |
| <li>Clique com o botão direito do mouse no nó do projeto <tt>LoginScreenExample</tt> e escolha Executar projeto. 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 "Executar".<BR>O emulador exibe um componente Tela de abertura, | |
| em seguida, Tela de logon, como mostrado: <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-emulator.png" NAME="graphics3" ALT="Emulador WTK 2.5 exibindo o aplicativo de amostra Tela de login" BORDER=1> </p></li> | |
| </OL> | |
| <UL> | |
| <LI>Mover o cursor para cima e para baixo permite que você navegue entre os campos Logon e Senha. | |
| </LI> | |
| <li>Clique no botão central para habilitar o campo de texto selecionado para edição.</li> | |
| <LI>Clique no campo Nome do usuário e digite "john", em seguida, pressione o botão "OK" no emulador. | |
| </LI> | |
| <LI>Clique no campo Senha e digite "amendoim", em seguida, pressione o botão "OK" no emulador. | |
| </LI> | |
| <LI>Clique no botão abaixo de "Logon" para terminar. | |
| </LI> | |
| <LI>Se o aplicativo se conectar ao servidor, você verá o componente <code>alert1</code> exibido na tela com uma mensagem "Login Successful" (Login bem-sucedido). | |
| </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 Tela de login</H2> | |
| <P>Agora que você viu o componente Tela de logon em ação, vamos | |
| voltar para o início e criar essa aplicação do zero. Neste | |
| tutorial vamos criar apenas um cliente Java ME por meio do NetBeans | |
| Mobility pack. Se você deseja saber mais sobre o lado do servidor desta aplicativo, examine os códigos-fonte do projeto <code>LoginScreenServletExample</code>. Para | |
| criar um aplicativo cliente Java ME, adote um dos seguintes procedimentos:</P> | |
| <OL> | |
| <LI><A HREF="#create">Crie o projeto LoginScreenExample</A> | |
| </LI> | |
| <LI><A HREF="#add">Adicione pacotes e um MIDlet visual ao projeto LoginScreenExample</A> | |
| </LI> | |
| <LI><A HREF="#addcomponent">Adicione componentes ao LoginScreenExample</A> | |
| </LI> | |
| <LI><A HREF="#addcommands">Adicione comandos ao componente Tela de login</A> | |
| </LI> | |
| <LI><A HREF="#connect">Conecte os | |
| componentes para criar um fluxo de aplicativo</A> | |
| </LI> | |
| <LI><A HREF="#storage">Adicione código-fonte extra</A> | |
| </LI> | |
| <LI><A HREF="#run">Executar o projeto</A> | |
| </LI> | |
| </OL> | |
| <H3><A NAME="create"></A>Criando o projeto | |
| LoginScreenExample</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>LoginScreenExample</CODE> | |
| no campo Nome do projeto. Altere a Localização do projeto para um diretório em seu sistema. Vamos chamar este diretório | |
| de <code>$PROJECTHOME</code>. | |
| </LI> | |
| <LI>Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo. | |
| </LI> | |
| <LI>Deixe o Sun Java Wireless Toolkit como a Plataforma do emulador selecionada. Clique em Próximo e em Terminar. | |
| <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. O aplicativo é exibida na janela Design de fluxo do | |
| Visual Mobile Designer. </p></LI> | |
| </OL> | |
| <H3><A NAME="add"></A>Adicionando pacotes e um | |
| MIDlet visual ao projeto LoginScreenExample</H3> | |
| <OL> | |
| <LI>Selecione o projeto <CODE>LoginScreenExample</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>Indique <CODE>loginscreenexample</CODE> | |
| no campo Nome do pacote. Clique em Terminar. | |
| </LI> | |
| <LI>Selecione o pacote <CODE>loginscreenexample</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>Indique <CODE>LoginScreenExample</CODE> nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar. | |
| </LI> | |
| </OL> | |
| <H3><A NAME="addcomponent"></A>Adicionando componentes ao | |
| LoginScreenExample</H3> | |
| <OL> | |
| <LI>Alterne seu Visual MIDlet para a janela | |
| Designer de fluxo. Arraste os seguintes componentes da Paleta de componentes e solte-os no Designer de fluxo: | |
| <UL> | |
| <LI>Tela de splash</LI> | |
| <LI>Tela de espera</LI> | |
| <LI>Tela de logon</LI> | |
| <LI>Alerta (x2)</LI> | |
| </UL></LI> | |
| <LI>Clique em splashScreen e, na janela Propriedades, altere o valor da propriedade Texto de <tt>null</tt> para <tt>Exemplo da Tela de login</tt> | |
| </LI> | |
| <LI>No navegador, clique com o botão direito do mouse no componente alert e escolha Renomear no menu pop-up.</li> | |
| <li>Na caixa de diálogo Renomear, digite <tt>alertFailure</tt> e clique em OK.</li> | |
| <li>Repita as etapas 3 e 4 para renomear o componente alert1 como <tt>alertSuccess</tt>.</LI> | |
| <LI>Volte para o componente alertFailure e, na janela Propriedades, altere o valor da propriedade String para <tt>Erro</tt>. | |
| </LI> | |
| <LI>Clique no componente waitScreen e, na janela Propriedades, altere o valor da propriedade Text para <tt>Aguarde...</tt>. </LI> | |
| <li>Na janela Propriedades do componente waitScreen, clique no botão de reticências <img src="../../../images_www/articles/71/mobility/loginscreen/ellipsis-button.png" border=1 alt="botão de reticências"> contra a propriedade Tarefa.</li> | |
| <li>Na caixa de diálogo Tarefa, clique em Adicionar.<br>É adicionado o componente task1.</li> | |
| <li>Clique em Ir para código-fonte.<br>A Visualização do código-fonte mostra o código do método <tt>getTask()</tt>.</li> | |
| <li>Clique em OK para fechar a caixa de diálogo Tarefa.</li> | |
| <li>Na janela Visualização do código-fonte, localize a seção <tt>// write task-execution user code here</tt> e substitua-a por <tt>login();</tt>. </li> | |
| <li>Pressione Ctrl + S para salvar as edições. </li> | |
| </OL> | |
| <H3><A NAME="addcommands"></A>Adicionando comandos ao | |
| LoginScreenExample</H3> | |
| <OL> | |
| <LI>Abra a Visualização de fluxo.</LI> | |
| <LI>Escolha o comando Sair na seção | |
| Comandos da Paleta do componente. Arraste-o e solte-o no componente <tt>loginScreen</tt> em Visualização de fluxo. </LI> | |
| </OL> | |
| <H3><A NAME="connect"></A>Conectando componentes</H3> | |
| <div> | |
| <p>Na Visualização de fluxo, clique no texto <tt>Started</tt> no Dispositivo móvel e arraste-o até 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/loginscreen/login-flow.png" NAME="graphics4" ALT="Mostra o Designer de fluxo com componentes conectados por linhas de comando" BORDER=1> | |
| </p> | |
| </div> | |
| <H3><A NAME="storage"></A>Adicionando código-fonte</H3> | |
| <OL> | |
| <LI>Na seção da declaração do código-fonte de <CODE>LoginScreenExample.java</tt> adicione o seguinte código: <tt>private boolean login = false;</CODE>.</LI> | |
| <LI>No final do código-fonte, cole o seguinte código: <br> | |
| <PRE> private void login() throws IOException { | |
| //URL | |
| String url = "http://localhost:8084/LoginScreenExample/" | |
| + "?username=" + getLoginScreen().getUsername() | |
| + "&password=" + getLoginScreen().getPassword(); | |
| //Clean up alertSuccess | |
| getAlertSuccess().setString(""); | |
| //Connect to the server | |
| HttpConnection hc = (HttpConnection) Connector.open(url); | |
| //Authentication | |
| if (hc.getResponseCode() == HttpConnection.HTTP_OK) { | |
| login = true; | |
| } | |
| //Closing time... | |
| hc.close(); | |
| //Take action based on login value | |
| if (login) { | |
| getAlertSuccess().setString("Login Succesfull"); | |
| } else { | |
| getAlertFailure().setString("Wrong Username or Password"); | |
| } | |
| login = false; | |
| }</PRE> | |
| <P> | |
| Esse código é responsável por enviar uma solicitação com informações sobre o nome de usuário e a senha para o servidor e por receber uma resposta se o processo de logon tiver sido bem sucedido. Você pode corrigir as importações do código-fonte, pressionando Ctrl+Shift+I.</P></LI> | |
| </OL> | |
| <H3><A NAME="run"></A>Executando o projeto</H3> | |
| <div> | |
| <p>Antes de executar o aplicativo cliente, verifique se o aplicativo do lado do servidor está implantada e em execução.</p> | |
| <p> Para executar o aplicativo cliente móvel, selecione <tt>Executar</tt> > <tt>Executar o projeto principal</tt> ou pressione F6 para executar o projeto principal.</p> | |
| </div> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <a name="javadoc-loginscreen"></a> | |
| <H2>Javadocs do componente Tela de login</H2> | |
| <P>O NetBeans IDE oferece Javadocs de API do componente Tela de logon, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs do componente Tela de login, execute as etapas abaixo:</P> | |
| <OL> | |
| <li>Coloque o cursor no componente <tt>LoginScreen</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/loginscreen/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>LoginScreen</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 ME%20Custom%20Component:%20Login%20Screen">Envie-nos seus comentários</a><br style="clear:both;" ></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="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="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> |