Desenvolvendo uma aplicação JSF Visual Web

Duração esperada: 25 minutos

Conteúdo

• Criando um projeto
• Desenhando uma página
• Adicionando alguns comportamentos
• Executando a aplicação
• Substituindo o campo de texto por uma lista suspensa
• Vinculando a lista suspensa à tabela de banco de dados
• Adicionando alguns comportamentos
• Executando a aplicação
• Fazendo mais

Este tutorial funciona com as tecnologias e os recursos seguintes

Componentes do JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* 1.1 com J2EE 1.4
Banco de dados Viagem (instalado)	Necessário

* Para tirar vantagem dos recursos Java EE 5 do NetBeans IDE 6.0, use um servidor da aplicação que seja totalmente compatível com a especificação Java EE 5, tal como o Sun Java System Application Server 9 (projeto GlassFish).

Se você estiver usando MySQL, consulte as Perguntas freqüentes How do I enable the sample Travel database for MySQL in NetBeans IDE 6.0 (Como ativo o banco de dados de amostra Viagem para MySQL no NetBeans IDE 6.0) para obter instruções apropriadas.

Este tutorial foi adaptado ao uso com o servidor da aplicação GlassFish v2. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para verificar problemas conhecidos e soluções alternativas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Requisitos do tutorial

Antes de prosseguir, revise os requisitos nesta seção.

Criando um projeto

1. No menu principal, escolha Arquivo > Novo arquivo.
2. No assistente para Novo projeto, selecione Web na lista Categorias e selecione Web Application na lista Projetos. Clique em Próximo.
3. Chame o projeto de HelloWeb e clique em Próximo.

4. Selecione o framework JavaServer Faces Visual Web e clique em Terminar

   Seu projeto aparece com a página inicial (Page1) aberta no Visual Designer.

Desenhando uma página

Para começar, você desenha uma página como a ilustrada na figura abaixo.

Figura 1: Design de Page1

1. Na janela Propriedades, digite Hello Web na caixa de texto da propriedade Title como mostrado na figura seguinte.

   O valor da propriedade Title aparece na barra de título do navegador quando essa página (ou projeto) é implantada.

   Figura 2: Propriedades da página na janela Propriedades

   
   

   Dica: você pode acessar as propriedades de um componente na janela Propriedades, selecionando o componente no Visual Designer ou na janela Navegador. Para abrir a janela Navegador, escolha Janela > Navegando > Navegador.

   Para acessar as propriedades da página, clique em uma parte em branco da página.

2. Se o nó Básico da janela Paleta não estiver expandido, expanda-o.

   Todos os componentes usados neste exemplo estão na seção Básico da Paleta.

   Se a janela Paleta não estiver visível, escolha Janela > Paleta para que ela seja exibida.

3. Arraste um componente Rótulo da seção Básico da Paleta para o lado esquerdo da página no Visual Designer, digite Nome: e pressione Enter.

   Observe que o componente se alinha à grade na página. Além disso, observe que o valor da propriedade text na janela Propriedades muda para Nome:.

   Dica: você pode alternar o componente para o modo de edição, clicando com o botão direito do mouse no componente e escolhendo Editar texto do rótulo no menu pop-up.
4. Arraste um componente Campo de texto da seção Básico da Paleta para o Visual Designer, digite Inserir seu nome e pressione Enter.
5. Na janela Propriedades, altere a propriedade id do Campo de texto de textField1 para nameField.

6. Selecione o componente Rótulo e pressione Control+Shift e arraste do componente Rótulo para o componente Campo de texto.

   Observe que a propriedade for do componente Rótulo agora está definida como nameField.
7. Arraste o componente Botão à direita do componente Campo de texto, digite Diga olá e pressione Enter.
   • Observação importante: existe um problema conhecido que afeta a largura do componente Botão do JSF 1.2 no IE7. A solução alternativa é colocar o componente Botão em um componente de layout (Painel de grade, Painel de grupo ou Painel de layout). Redimensionar o componente de layout redimensiona automaticamente o componente Botão.
8. Na janela Propriedades, altere a propriedade id do componente Botão de button1 para helloButton.
9. Arraste um componente Texto estático para um lugar abaixo do componente Rótulo.
10. Altere a propriedade id do componente Texto estático de staticText1 para helloText.

11. Arraste um componente Grupo de mensagens para fora da página, por exemplo, embaixo do componente Texto estático.

    A adição de um componente Grupo de mensagens, que exibe erros em tempo de execução entre outros tipos de mensagens, é útil para diagnosticar erros de programação.

12. Na barra de ferramentas de edição, clique em JSP para passar para o Editor de código-fonte do JavaServer Pages (JSP).

    Examine o código e observe como foram salvas as alterações feitas na janela Propriedades. Quando um página é exibida pela primeira vez no navegador, a página aparece exatamente conforme indicado pelas marcas na página JSP. Se o seu Bean de página tiver códigos que alteram os valores da propriedade, tais alterações aparecem somente em solicitações em que a página é enviada e subseqüentemente reexibida.

Adicionando alguns comportamentos

1. Na barra de ferramentas Edição, clique em Design para alternar para o Visual Designer.

2. Clique duas vezes no componente Botão.

   A área de edição alterna para o editor de Java e mostra o Bean de página da Page1. O manipulador de eventos do botão, helloButton_action, foi adicionado ao Bean de página.

3. Substitua o corpo do método helloButton_action pelas linhas de código abaixo (mostradas em negrito). Em seguida, pressione Alt-Shift-F para reformatar o código.

   Exemplo de código 1: código helloButton_action()

   public String helloButton_action() { String name = (String)nameField.getText(); helloText.setText("Hello, " + name + "!"); return null;

   
   

   A primeira linha em negrito obtém o valor da propriedade text do componente Campo de texto nameField por meio do método getText. Esse valor é um objeto do tipo Object, que precisa ser uma string, portanto, ele é convertido para um objeto String. O objeto é, então, atribuído à variável name.

   A segunda linha em negrito define o valor da propriedade text do componente Texto estático helloText. Este valor contém o nome que o usuário inseriu no componente Campo de texto nameField. Por exemplo, se o usuário indicar Fred, essa linha de código define a propriedade text do componente Texto estático como Olá, Fred!

Executando a aplicação

1. No editor Java, garanta que o seu código Java não contém erros.

   Os erros são indicados por sublinhados ou caixas em vermelho no lado esquerdo do código. Seu projeto não será construído se houver erros no código.

   Diga: mantenha o cursor sobre a caixa vermelha no lado esquerdo do código para ver uma descrição do erro.

2. Clique no botão Executar projeto principal .

   O IDE salva seus arquivos e constrói seu projeto. A janela Saída de construção aparece na parte inferior da tela e exibe as mensagens de status relevantes. Quando a sua aplicação é construída e implantada, o IDE inicia seu navegador da Web padrão (caso ele ainda não esteja sendo executado), e sua aplicação Web aparece.

3. Indique seu nome no campo de texto e clique em Diga, olá.

   "Olá seu nome" é exibido abaixo.

O navegador envia o formulário ao servidor Web, que chama a sua aplicação Web. A aplicação executa o método de ação do botão, atualiza os elementos da página, renderiza novamente a mesma página com os dados alterados e a envia de volta ao navegador da Web. A figura abaixo ilustra o resultado se o nome enviado for Gus Townsend.

Figura 3: Hello Web, com resultado

Substituindo o campo de texto por uma lista suspensa

O restante deste tutorial mostra como usar o componente Lista suspensa, em vez do Campo de texto, para receber a entrada do usuário, como mostrado na figura abaixo. Este componente Lista suspensa obtém sua lista de opções da tabela de banco de dados incorporada PERSON.

Figura 4: : Hello Web, versão final

1. Na barra de ferramentas Edição, clique em Design para alternar para o Visual Designer.
2. Na janela Visual Designer, clique com o botão direito do mouse no componente Campo de texto nameField e escolha Excluir no menu pop-up.

3. Arraste um componente Lista suspensa da seção Básico da Paleta para a sua página no Visual Designer. Mova o componente para a área onde estava o componente Campo de texto.

   Observe, como mostrado na figura seguinte, que a janela Navegador mostra um componente dropDown1 e um objeto dropDown1DefaultOptions. A propriedade items do componente Lista suspensa identifica o objeto que contém as opções da lista. Quando um componente Lista suspensa é adicionado, o IDE cria o objeto de opções padrão (dropDown1DefaultOptions) e define esse objeto como o valor da propriedade items do componente Lista suspensa. Somente o componente Lista suspensa fica visível no Visual Designer. O objeto de opções padrão simplesmente fornece as opções que aparecem na lista. Mais adiante neste tutorial, você modifica o componente Lista suspensa para obter as opções de diferentes fontes.

   Figura 5: Componentes na janela Navegador

4. Na janela Propriedades, altere o id do componente para nameDropDown.

5. Selecione o componente Rótulo e pressione Control+Shift e arraste do componente Rótulo para o componente Lista suspensa.

   Observe que a propriedade for do componente Rótulo agora é nameDropDown.

Vinculando a lista suspensa à tabela de banco de dados

1. Na janela Serviços, expanda o nó Bancos de dados e verifique se o banco de dados Viagem está conectado.

   Se o nó jdbc do emblema do banco de dados VIAGEM estiver partido e você não puder expandir o nó, o IDE não está conectado ao banco de dados. Para conectar ao banco de dados VIAGEM, clique com o botão direito do mouse no nó jdbc de VIAGEM e escolha Conectar no menu pop-up. Indique viagem para a Senha, selecione Lembrar senha durante esta sessão e clique em OK. Se você não vir um nó jdbc no banco de dados VIAGEM, consulte Instruções de instalação do NetBeans para obter informações sobre como disponibilizar o banco de dados para o IDE.

2. Expanda o nó Tabelas do banco de dados VIAGEM.

   Em Tabelas, você vê os nós de cada tabela no banco de dados, como ALUGUELDECARRO e VÔO. A figura abaixo mostra a janela Tempo de execução com o nó Tabelas expandido.

   Figura 6: Janela Serviços

3. Arraste PERSON da janela Serviços e solte na Lista suspensa.

   A exibição na lista se altera de item 1 para abc, indicando que a lista está exibindo dados vinculados e que os dados que estão sendo exibidos são do tipo String.

   O IDE adiciona um componente personDataProvider não visual na tabela do banco de dados. O componente personDataProvider aparece na janela Navegador. O IDE adiciona também uma propriedade personRowSet ao SessionBean1.

4. Clique com o botão direito do mouse em Lista suspensa e escolha Vincular aos dados no menu pop-up. A caixa de diálogo Vincular aos dados é exibida, como mostrado na figura abaixo.

   Dados Total Lista suspensa

   
   Ao vincular dados a um componente Lista suspensa, você deve especificar o que será exibido na lista (o Campo de exibição) e que valores serão usados no programa subjacente (o Campo de valor). Normalmente, opta-se por exibir valores significativos da tabela de banco de dados, como o nome da pessoa, mas você quer usar um identificador exclusivo no programa subjacente, como o ID da pessoa. Com esta aplicação, no entanto, você opta por vincular os campos Valor e Exibição à mesma coluna de banco de dados, a coluna PERSON.NAME, conforme descrito nas duas etapas seguintes.
5. Defina o campo Valor na caixa de diálogo como PERSON.NAME, deixe o campo Exibição definido como PERSON.NAME, e clique em OK.

Adicionando alguns comportamentos

1. No Visual Designer, clique duas vezes no componente Botão.

   A área de edição alterna para o editor de Java e se move para o método helloButton_action.

2. Substitua o corpo do método helloButton_action pelas linhas de código abaixo (mostradas em negrito).

   Exemplo de código 2: código helloButton_action Replacement

   public String helloButton_action() { String name = (String)nameDropDown.getSelected(); String splitnames[] = name.split(","); helloText.setText("Hello, " + splitnames[1] + "!"); return null;

   
   

   A primeira linha usa o método getSelected para obter o valor atual do componente Lista suspensa, que corresponde ao nome atualmente selecionado na lista.

   Devido ao fato de os dados serem armazenados como sobrenome, nome, a string deve ser modificada antes de ser exibida. Caso contrário, a aplicação imprimirá "Olá, sobrenome, nome!" A segunda linha usa o método split para dividir a string dentro de uma matriz, com a vírgula como delimitadora. O primeiro item da matriz (na posição 0) contém o sobrenome e a posição 1 contém o nome.

   Na terceira linha, a propriedade text do componente Texto estático é definida como um valor que inclui o nome.

   Observação: esse método presume que todos os valores nesta tabela estãono formato sobrenome, nome. E não manipula com determinação as seqüências que não seguem este formato.

3. Adicione o seguinte código ao método prerender. Este código define o primeiro item da lista como a seleção padrão.

   Amostra de código 3: código do método prerender

   public void prerender() { // If no selection, set default selection if (nameDropDown.getSelected() == null) { personDataProvider.cursorFirst(); nameDropDown.setSelected ((String)personDataProvider.getValue("person.name")); } }

Executando a aplicação

1. Clique no botão Executar projeto principal.

   O IDE constrói e implanta a aplicação e exibe a página no navegador da Web.

2. Selecione o nome da lista e clique em Diga olá.

   O navegador envia ao servidor o valor selecionado do componente Lista suspensa e o servidor executa o método helloButton_action do botão.

Fazendo mais

Experimente. Um componente Caixa de listagem é semelhante a um componente Lista suspensa. Tente substituir um componente Lista suspensa por um componente Caixa de listagem. Nesta aplicação, a propriedade multiple do componente Caixa de listagem não deve ser marcada porque é possível selecionar apenas um item de cada vez. Lembre-se de vincular a Caixa de listagem à tabela do banco de dados e de alterar o método helloButton_action para obter o valor selecionado do componente Caixa de listagem.

Experimente. Usando etapas que sejam semelhantes as que você aprendeu neste tutorial, tente construir uma aplicação Web que tenha um componente Drop Down List que mostre todos os valores DESCRIPTION na tabela TRIPTYPE. Faça a página exibir o TRIPTYPEID do tipo de viagem quando o usuário clicar no botão Exibir id do tipo. Para isso, você deve vincular o campo Exibição do componente Lista suspensa ao TRIPTYPE.DESCRIPTION e o campo Valor ao TRIPTYPE.TRIPTYPEID.

Resumo

1. Criar a página.
2. Determinar o lugar dos componentes, como o componente Campo de texto e o componente Botão, na página.
3. Editar as propriedades dos componentes para alterar a aparência e o comportamento destes.
4. Vincular os componentes à conexão de dados, quando apropriado.
5. Editar o código-fonte Java para controlar o comportamento no lado do cliente, como a manipulação de eventos.
6. Construir e executar a aplicação.

Veja também

• Desenvolvendo uma aplicação JSF Visual Web
• Introdução ao desenvolvimento de aplicações Web no NetBeans IDE 6.0
• Tutorial do NetBeans IDE 6.0 para aplicações Web