Componentes padrão do Visual Designer: criando telas de login no dispositivo móvel

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.

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.

Se ainda não estiver familiarizado com o NetBeans Mobility nem com o J2EE, antes de continuar seria recomendável ler o Guia de início rápido do NetBeans Java ME MIDP.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 6.9 e posterior

Para acompanhar este tutorial, são necessários os recursos e softwares listados abaixo.

Software ou recurso Versão necessária
NetBeans IDE com Java ME Versão 6.9 ou posterior
Java Development Kit (JDK) Versão 6 ou versão 7
GlassFish ou Tomcat Incluído no Java EE e em todas as instalações do IDE

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 de amostra LoginScreenExample:

  1. Baixe LoginScreenExample.zip . Esse download contém o projeto completo do NetBeans Mobility.
  2. Baixe LoginScreenServletExample.zip . Esse download contém o projeto completo do NetBeans Web.
  3. Descompacte os arquivos.
  4. No IDE, selecione Arquivo > Abrir projeto e navegue até a pasta que contém os arquivos descompactados com o projeto LoginScreenExample.
  5. Clique em Abrir projeto.
  6. Repita as etapas 4 e 5 acima para abrir o projeto LoginScreenServletExample.
  7. Os projetos devem se parecer visualmente com o seguinte:

    Janela Projeto com o exemplo da Tela de logon e do Servlet da tela de logon aberto

  8. Na janela Projetos, clique com o botão direito no nó do projeto LoginScreenServletExample e selecione Executar projeto (ou pressione a tecla F6).
  9. 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.
  10. Na janela Emulador, clique no botão abaixo de "Executar".
    O emulador exibe um componente Tela de abertura, em seguida, Tela de logon, como mostrado:

    Emulador WTK 2.5 exibindo o aplicativo de amostra Tela de login

  • Mover o cursor para cima e para baixo permite que você navegue entre os campos Logon e Senha.
  • Clique no botão central para habilitar o campo de texto selecionado para edição.
  • 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" (Login bem-sucedido).

início

Criando um aplicativo com o componente personalizado Tela de login

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 LoginScreenServletExample. Para criar um aplicativo cliente Java ME, adote um dos seguintes procedimentos:

  1. Crie o projeto LoginScreenExample
  2. Adicione pacotes e um MIDlet visual ao projeto LoginScreenExample
  3. Adicione componentes ao LoginScreenExample
  4. Adicione comandos ao componente Tela de login
  5. Conecte os componentes para criar um fluxo de aplicativo
  6. Adicione código-fonte extra
  7. Executar o projeto

Criando o projeto LoginScreenExample

  1. Escolha Arquivo > Novo projeto (Ctrl-Shift-N). Em Categorias, selecione Java ME. Em Projetos, selecione Aplicativo móvel e clique em Próximo.
  2. 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.
  3. Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo.
  4. Deixe o Sun Java Wireless Toolkit como a Plataforma do emulador selecionada. Clique em Próximo e em Terminar.

    Observação: 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

  1. Selecione o projeto LoginScreenExample na janela Projeto e, a seguir, selecioneArquivo > Novo arquivo (Ctrl-N) . Em Categorias, selecione Java. Em Tipos de arquivo, selecione Pacote Java. Clique em Próximo.
  2. Indique loginscreenexample no campo Nome do pacote. Clique em Terminar.
  3. Selecione o pacote loginscreenexample na janela Projeto e, a seguir, selecioneArquivo > Novo arquivo (Ctrl-N). Em Categorias, selecione MIDP. Em Tipos de arquivo, selecione MIDlet visual. Clique em Próximo.
  4. Indique LoginScreenExample nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar.

Adicionando componentes ao LoginScreenExample

  1. 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 (x2)
  2. Clique em splashScreen e, na janela Propriedades, altere o valor da propriedade Texto de null para Exemplo da Tela de login
  3. No navegador, clique com o botão direito do mouse no componente alert e escolha Renomear no menu pop-up.
  4. Na caixa de diálogo Renomear, digite alertFailure e clique em OK.
  5. Repita as etapas 3 e 4 para renomear o componente alert1 como alertSuccess.
  6. Volte para o componente alertFailure e, na janela Propriedades, altere o valor da propriedade String para Erro.
  7. Clique no componente waitScreen e, na janela Propriedades, altere o valor da propriedade Text para Aguarde....
  8. Na janela Propriedades do componente waitScreen, clique no botão de reticências botão de reticências contra a propriedade Tarefa.
  9. Na caixa de diálogo Tarefa, clique em Adicionar.
    É adicionado o componente task1.
  10. Clique em Ir para código-fonte.
    A Visualização do código-fonte mostra o código do método getTask().
  11. Clique em OK para fechar a caixa de diálogo Tarefa.
  12. Na janela Visualização do código-fonte, localize a seção // write task-execution user code here e substitua-a por login();.
  13. Pressione Ctrl + S para salvar as edições.

Adicionando comandos ao LoginScreenExample

  1. Abra a Visualização de fluxo.
  2. Escolha o comando Sair na seção Comandos da Paleta do componente. Arraste-o e solte-o no componente loginScreen em Visualização de fluxo.

Conectando componentes

Na Visualização de fluxo, clique no texto Started no Dispositivo móvel e arraste-o até o componente splashScreen. Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.

Mostra o Designer de fluxo com componentes conectados por linhas de comando

Adicionando código-fonte

  1. Na seção da declaração do código-fonte de LoginScreenExample.java adicione o seguinte código: private boolean login = false;.
  2. 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 
       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;
     }

    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 o projeto principal ou pressione F6 para executar o projeto principal.

início

Javadocs do componente Tela de login

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:

  1. Coloque o cursor no componente LoginScreen no código-fonte e pressione Ctr-Shift-Espaço (ou selecione Código-fonte > Exibir documentação).
    O Javadoc deste elemento é exibido em uma janela pop-up.
  2. Clique em Exibir documentação no ícone de navegador da Web externo (Exibir documentação no navegador da Web externo) na janela pop-up para obter informações detalhadas sobre o componente LoginScreen em seu navegador.

início


Consulte também

início

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo