Visual JSF no Netbeans

outubro 26, 2009

Introdução

Esse mini-tutorial tem o intuito de servir como pontapé inicial ao desenvolvimento de JSF com o plugin visual do NetBeans. Veja que não é intuito explicar JSF, e sim, e tão apenas, mostrar como usar o Visual JSF. A versão do NetBeans que estamos utilizando para esse blog é a 6.7.1.

Instalando os plugins necessários

Inicialmente, é necessário que se instale os plugins para desenvolvimento de aplicações com o Visual JSF. Para fazer isso, siga os seguintes passos:

  1. Vá em Ferramentas -> Plugins;
  2. Clique na aba Plugins Disponíveis;
  3. Coloque o cursor na área de Pesquisa no canto direito e digite Visual JSF;
  4. Escolhe, dos plugins que aparecem, o Visual JSF e Visual JSF Runtime;
  5. Clique no botão Instalar;

Configurando um projeto com o Visual JSF

Após instalados os plugins, iremos criar um projeto web com o Visual JSF. Para isto, siga os passos abaixo:

  1. Clique em Arquivo -> Novo Projeto;
  2. Em Categorias escolha Java Web e em Projetos escolha Aplicação Web;
  3. Clique no botão Seguinte (Next);
  4. Digite o nome do projeto, escolha o nome do pacote padrão e clique em Seguinte;
  5. Nos plugins disponíveis, selecione Visual Web JSF e clique em Finalizar.

Um projeto é criado com uma estrutura similar a mostrada nas figuras abaixo:

Estrutura projeto Visual JSF 1.

Estrutura projeto Visual JSF 1.

Estrutura projeto Visual JSF 2.

Estrutura projeto Visual JSF 2.

Veja que a primeira figura mostra as páginas web, neste caso a Page1, que é criada como padrão, e a segunda figura mostra a estrutura de código em Java. Veja que, também por padrão, o plugin do Visual JSF cria para você 4 backing beans (BB): um backing bean chamado Page1, representando o BB  da Page1.jsp, e os BBs ApplicationBean1, SessionBean1 e RequestBean1, representando, respectivamente, BBs de Aplicação, Sessão e Requisição. Você pode criar outros BBs e configurá-los no faces-config.xml. O plugin gera esses BBs apenas para facilitar a vida do programador, não sendo este obrigado a usá-los.

Criando Páginas Web

Para criar uma nova página, siga os passos da figura abaixo.

criandoPaginaVJsf1

Escolha o nome da página, o pacote onde o backing bean da página irá ficar e clique em finalizar. Veja que o nome do BB, por padrão, é o mesmo nome da página. Para alterar é necessário mudar no faces-config.xml.

Após criada a página a tela abaixo é mostrada.

editorVisual

Ela representa a área visual de sua página. Tudo que você colocar aí, visualmente, será mostrado na mesma posição e com as mesmas configurações escolhidas, ou seja, esse é um editor wysiwyg (What You See Is What You Get). Perceba na figura que o botão Design no canto esquerdo superior está selecionado, que é exatamente a visão de design que temos. Se quisermos visualizar o JSP (ou JSF, como queira) por trás dessa tela, clique em JSP. Se você quiser ver o BB desta página, clique em Java. Isso tudo serve para diminuir o temp0 de desenvolvimento com opções de edição integradas.

Configurando componentes em páginas web

Para adicionar componentes a uma página, basta clicar no componente JSF na paleta do lado direito do editor, quanto estiver no modo de visualização Design, e arrastar e soltar na área que se deseja da página, como pode ser visto na figura abaixo. Na paleta propriedades pode-se configurar qualquer propriedade do componente. Isso facilita a vida do programador JSF, pois não é mais necessário fazer isso em código.

Screen shot 2009-10-26 at 4.18.17 PM

Fazendo binding de componentes

Para se fazer o binding do componente com o BB, ou faz-se no próprio código JSF ou visualmente, clicando com o botão direito do mouse em cima do componente e escolhendo a opção Add Binding Attribute (traduza se seu Netbeans estiver em português), como mostrado na figura abaixo.

Acrescentando binding attribute

A partir deste momento este componente está referenciando no BB desta página (veja figura abaixo), podendo ser editado da forma que se aprover.

Screen shot 2009-10-26 at 4.26.21 PM

Trabalhando com o componente Table

Para se trabalhar com o componente Table, inicialmente clique na paleta de componentes Woodstock Basic, selecione o componente Table, arraste e solte na área que se deseja na página (Veja figura abaixo).

Screen shot 2009-10-26 at 4.27.33 PM

Para se configurar quais elementos irão ser mostrados nas colunas, é necessário configurar o layout da tabela. Para isso, clique com botão direito do mouse em cima da tabela e clique em Table Layout. Eu configurei previamente, no BB da página Page1, um atributo chamado Clientes, que nada mais é que uma lista de objetos do tipo Cliente. Assim, iremos linkar os dados da tabela à lista de clientes. Quando aparecer a tela de Table Layout, escolha a propriedade Clientes. Veja que por padrão todas as colunas serão preenchiadas com os atributos da classe Cliente, que são CPF e nome. Se desejar remover alguma coluna, basta colocá-la como disponível. Veja a figura abaixo mostrando como configurar a tabela.

Screen shot 2009-10-26 at 4.59.40 PM

Requisitando referências para backing beans (BB)

Por último, para esse primeiro post de Visual JSF, iremos ver como se pode pegar referências de qualquer BB, quer seja de Aplicação, Sessão ou Requisição. Suponha que você tenha um BB de requisição (request) chamado BBR, e um BB de application (aplicação) chamado BBAp. Para você pegar uma referência do BBAp estando dentro do BBR, basta executar o método getBean(String nomeBB). Esse método encontra-se implementado na classe AbstractPageBean que todo BB do Visual JSF herda. Assim, para o exemplo acima, a linha abaixo resolveria:

BBAp bbDeAplicacao = (BBAp) getBean(“BBApp”);

A partir daí pode-se chamar qualquer método de bbDeAplicacao.

Referências

Anúncios