Componentes padrão do Visual Designer: criando telas de logon no dispositivo móvel
O Visual Mobile Designer (VMD) é uma interface gráfica do NetBeans Mobility que permite criar aplicações móveis usando componentes de arrastar e soltar. O VMD permite definir o fluxo da aplicação e criar a GUI usando os componentes fornecidos pelo IDE ou os componentes criados por você. 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 splash, Itens de tabela, etc.
O componente personalizado Tela de logon oferece uma interface útil com os elementos padrão como campo para nome do usuário, campo para senha e botão de logon. Você pode usar esse componente personalizado para criar a interface de logon para acessar recursos protegidos, tal como GSM banking.
Se ainda não estiver familiarizado com o NetBeans Mobility ou J2EE, antes de continuar seria recomendável ler o Guia de início rápido do NetBeans Java ME MIDP.
Nota: se estiver utilizando o NetBeans IDE 6.8, consulte o tutorial Criando telas de logon no NetBeans IDE 6.8.
Conteúdo
Para levar a cabo este tutorial, são necessários os seguintes recursos e softwares.
Instalando e executando o aplicativo de amostra
Antes de começar, talvez você queira ver o resultado final do
tutorial.
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.
Siga as etapas seguintes para instalar o aplicativo LoginScreenExample:
- Baixe LoginScreenExample.zip
. Este download contém o projeto do NetBeans Mobility concluído.
- Baixe
LoginScreenServletExample.zip
. Este download contém o projeto da Web NetBeans concluído.
- Descompacte os arquivos.
- No IDE, escolha Arquivo > Abrir projeto e vá para a pasta que contém o arquivo descompactado com o projeto LoginScreenExample.
- Clique em Abrir projeto.
- Repita as etapas 4 e 5 acima para abrir o projeto LoginScreenServletExample.
- A visualização Projetos deve ter uma aparência semelhante a esta:
- 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).
- Clique com o botão direito do mouse no nó do projeto LoginScreenExample 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.
- Na janela Emulador, clique no botão abaixo de
"Iniciar".
O emulador exibe um componente Tela de splash,
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.
- Ao clicar no botão central, é possível editar o campo de texto selecionado.
- 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 o aplicativo se conectar ao servidor, você verá o componente
alert1 exibido na tela com uma mensagem "Login Successful" (Logon bem sucedido).
início
Criando um aplicativo 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 precisar saber mais sobre o lado do servidor desta aplicativo,
examine os códigos-fonte do projeto LoginScreenServletExample. Para
criar um aplicativo cliente Java ME, adote um dos seguintes procedimentos:
- Criar o projeto LoginScreenExample
- Adicionar pacotes e um MIDlet visual ao projeto LoginScreenExample
- Adicionar componentes ao LoginScreenExample
- Adicionar comandos ao componente Tela de logon
- Conectar os componentes para criar um fluxo de aplicativo
- Adicionar código-fonte extra
- Executar o projeto
Criando o projeto
LoginScreenExample
- Escolha Arquivo > Novo projeto (Ctrl-Shift-N). Em Categorias, selecione Java ME. Em Projetos, selecione Aplicativo móvel 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 do emulador selecionada. Clique em Próximo e, em seguida, em Terminar.
Nota: 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.
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 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
MIDlet visual. 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 splash
- Tela de espera
- Tela de logon
- Alerta (2x)
- Clique em slashScreen e, na janela Propriedades, altere o valor da propriedade Texto de null (nulo) para Exemplo de tela de logon.
- Clique com o botão direito do mouse no componente de alerta e escolha Renomear no menu pop-up.
- Na caixa de diálogo Renomear, insira alertFailure e clique em OK.
- Repita as etapas 3 e 4 para renomear o componente alert1 como alertSuccess.
- Volte para o componente alertFailure e, na janela Propriedades, altere o valor da propriedade String para Erro.
- Clique no componente waitScreen e, na janela Propriedades, altere o valor da propriedade Texto para Aguarde....
- Na janela Propriedades do componente waitScreen, clique no botão de reticências (
) na propriedade Tarefa.
- Na caixa de diálogo Tarefa, clique em Adicionar.
O componente task1 é adicionado.
- Clique em Ir para o código-fonte.
A visualização Código-fonte exibe o código-fonte do método getTask ().
- Clique em OK para fechar a caixa de diálogo Tarefa.
- Na visualização Código-fonte, localize // write task-execution user code here (escreva aqui o código do usuário para execução da tarefa) e substitua-lo por login();.
- Pressione Ctrl-S para salvar suas edições.
Adicionando comandos ao
LoginScreenExample
- Abra a visualização Fluxo.
- Escolha o comando Sair na seção
Comandos da Paleta do componente. Arraste e solte-o no componente loginScreen na visualização Fluxo.
Conectando componentes
Na visualização Fluxo, clique no texto Iniciado 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
- Na seção da declaração do código-fonte de LoginScreenExample.java, adicione o seguinte código-fonte:
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:8084/LoginScreenExample/"
+ "?username=" + getLoginScreen().getUsername()
+ "&password=" + getLoginScreen().getPassword();
//Clean up alertSuccess
getAlert1().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) {
getAlert1().setString("Login Succesfull");
} else {
getAlert1().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 o aplicativo cliente, verifique se o aplicativo do lado do servidor está implantada e em execução.
Para executar o aplicativo cliente móvel, selecione Executar > Executar projeto principal ou pressione F6 para executar o projeto principal.
início
Javadoc para 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, complete as etapas abaixo:
- No código-fonte, coloque o cursor no componente LoginScreen e pressione Ctrl-Shift-Barra de espaço (ou escolha Código-fonte > Mostrar documentação).
O Javadoc para este elemento é exibido em uma janela suspensa.
- Clique em Mostrar documentação no ícone do navegador da Web externo (
) na janela pop-up para visualizar informações detalhadas sobre o componente LoginScreen no seu navegador.
início
Consulte também
início
