HOME / Docs & Support / NetBeans 6.0 / Mobility Documentation

Componentes personalizados do Visual Mobile Designer: Tela de logon

Contribuição de Karol Harezlak

O Visual Mobile Designer (VMD) é uma interface gráfica do NetBeans Mobility pack que permite a você criar aplicações móveis usando componentes de arrastar e soltar. O VMD permite que você defina o fluxo da aplicação e crie a sua GUI usando os componentes fornecidos pelo Mobility pack, ou componentes que você mesmo cria. O VMD contém muitos componentes Interface de usuário (IU) padrão que você pode usar para criar aplicações 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.

O conteúdo desta página se aplica ao NetBeans IDE 6.0

O componente personalizado Tela de logon 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.

Visão geral da aplicação

Este exemplo mostra como usar o componente personalizado Tela de logon em uma aplicação 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. Se não tiver experiência com o NetBeans Mobility ou J2EE, você deve começar com o NetBeans 6.0 Mobility CLDC/MIDP Quick Start Guide e a Introdução ao desenvolvimento de aplicações Web antes de continuar.

Instalando e executando a aplicação de amostra

Antes de começar, talvez você queira ver o resultado final do tutorial.

Requisitos

Os softwares seguintes devem estar instalados em seu computador para começar:

NetBeans IDE 6.0 com Mobility Pack e J2EE e suporte a Web (download)
Java Standard Development Kit (JDK) versão 6.0 (download)
Acesso remoto ou local a um servidor da aplicação Web

Siga as etapas seguintes para instalar a aplicação LoginScreenExample:

Baixe LoginScreenExample.zip . Esse download contém o projeto do NetBeans Mobility.
Baixe LoginScreenServletExample.zip . Esse download contém o projeto da Web do NetBeans.
Descompacte o arquivo.
No IDE, abra o projeto, escolhendo Arquivo > Abrir projeto e vá para a pasta que contém os arquivos descompactados com os projetos.
A janela Projeto deve ter uma aparência semelhante a esta:
A janela Navegador do projeto do Mobility LoginScreenExample deve ter esta aparência:
Na janela Projetos, clique com o botão direito do mouse no nó do projeto LoginScreenServletExample e escolha Executar projeto (ou pressione a tecla F6). Verifique se o seu servidor da aplicação funciona na porta 8080. O segundo passo é clicar com o botão direito do mouse no nó LoginScreenExample do projeto e escolher Executar projeto. Conforme a aplicação é executada, uma janela do emulador se abre e exibe a aplicação que está sendo executada no emulador do dispositivo padrão.
Na janela Emulador, clique no botão abaixo de "Iniciar."
O emulador exibe um componente Tela de abertura, em seguida, Tela de logon, como mostrado:

Mover o cursor para cima e para baixo permite que você navegue entre os campos Logon e Senha.
Clique no campo Nome do usuário e digite "john", em seguida, pressione o botão "OK" no emulador.
Clique no campo Senha e digite "amendoim", em seguida, pressione o botão "OK" no emulador.
Clique no botão abaixo de "Logon" para terminar.
Se a aplicação se conectar ao servidor, você verá o componente alertSuccess exibido na tela com uma mensagem "Login Successful" (Logon bem sucedido).

Criando uma aplicação com o componente personalizado Tela de logon

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 aplicação, examine os códigos-fonte do projeto LoginScreenServletExample. Para criar uma aplicação cliente Java ME, adote um dos seguintes procedimentos:

Criando o projeto LoginScreenExample
Adicionando pacotes e um MIDlet visual ao projeto LoginScreenExample
Adicionando componentes ao LoginScreenExample
Adicionando comandos ao componente Tela de logon
Conectando os componentes para criar um fluxo de aplicação
Adicionando código-fonte adicional
Executar o projeto

Criando o projeto LoginScreenExample

Escolha Arquivo > Novo projeto (Ctrl-Shift-N). Em Categorias, selecione Móvel. Em Projetos, selecione Aplicação MIDP e clique em Próximo.
Indique LoginScreenExample no campo Nome do projeto. Altere a Localização do projeto para um diretório em seu sistema. Vamos chamar este diretório de $PROJECTHOME.
Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo.
Deixe o Sun Java Wireless Toolkit como a Plataforma de destino selecionada. Clique em Próximo e, em seguida, em Terminar.

Adicionando pacotes e um MIDlet visual ao projeto LoginScreenExample

Escolha o projeto LoginScreenExample na janela Projeto, em seguida, escolha Arquivo > Novo arquivo (Ctrl-N) . Em Categorias, selecione Classes Java. Em Tipos de arquivo, selecione Pacote Java. Clique em Próximo.
Indique loginscreenexample no campo Nome do pacote. Clique em Terminar.
Escolha o pacote loginscreenexample na janela Projeto, em seguida, escolha Arquivo > Novo arquivo (Ctrl-N) . Em Categorias, selecione MIDP. Em Tipos de arquivo, selecione Visual MIDlet. Clique em Próximo.
Indique LoginScreenExample nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar.

Adicionando componentes ao LoginScreenExample

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:

Tela de abertura
Tela de espera
Tela de logon
Alerta (duas vezes)

Clique em slashScreen e, na janela Propriedades, altere o valor da propriedade Texto de "null" para "Exemplo da Tela de logon"
Clique no componente Alerta e, na janela Propriedades, altere o valor da propriedade Instance Name para "alertError". Semelhantemente, altere a propriedade Instance Name de alert1 para "alertSuccess"
Volte para o componente alertError e, na janela Propriedades, altere o valor da propriedade String para "Error".
Clique no componente waitScreen e, na janela Propriedades, altere o valor da propriedade Text para "Please Wait...".

Adicionando comandos ao LoginScreenExample

Abra a janela Designer de fluxo.
Escolha o comando Sair na seção Comandos da Paleta do componente. Arraste-o e solte na janela Designer de fluxo (componente loginScreen).

Conectando componentes

Na janela Design de fluxo, clique em Ponto de início no Dispositivo móvel e arraste-o para o componente splashScreen. Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.

Adicionando código-fonte extra

Na seção da declaração do código-fonte de LoginScreenExample.java, adicione o seguinte código: private boolean login = false;.
No final do código-fonte, cole o seguinte código:

 private void login() throws IOException {
   //URL
   String url = "http://localhost:8080/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 {
        getAlertSuccess().setString("Wrong Username or Password");
   }
   login = false;
 }

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.

Executando o projeto

Antes de executar a aplicação cliente, verifique se a aplicação do lado do servidor está implantada e em execução.

Para executar a aplicação cliente móvel, selecione Executar > Executar projeto principal ou pressione <F6> para executar o projeto principal.

Para saber mais sobre o componente Tela de logon

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 logon:

Escolha Ajuda > Referências de Javadocs > org.netbeans.microediton.lcdui. O arquivo é aberto em um navegador da Web.
Clique em org.netbeans.microedition.lcdui para ver os links das informações do componente.

Envie-nos seus comentários