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

8 Respostas to “Visual JSF no Netbeans”

  1. Olá Gustavo!
    Ótima iniciativa, muito legal o artigo.
    Só vale lembrar que os componentes para desenvolvimento visual no Netbeans são baseados no Woodstock, e esta implementação, infelizmente, foi descontinuada.
    Já trabalhei em um projeto grande utilizando o Woodstock, e a descontinuidade desta implementação foi trágica.
    Para novos projetos aconselho outras implementações, como Richfaces e Icefaces.

    Abraços!

  2. gugawag said

    É verdade Luiz. É uma pena que as empresas façam isso, mas é o mercado. :/ Uma boa discussão sobre Netbeans e Icefaces, provocada por um dos desenvolvedores da Sun do Visual Web, pode ser vista em: http://www.icefaces.org/JForum/posts/list/13622.page
    Resumindo, se se quiser trabalhar com o Visual Web no Netbeans com o Icefaces, tem que ser instalada a versão 6.5.1 do Netbeans. Talvez seja essa alternativa que darei a meus alunos. Mas com certeza, pelo menos por enquanto que os ventos não mudam de lado, não mais indicarei o uso do Visual Web com as versões mais novas do Netbeans em meu trabalho, que estava sendo uma tendência. Todo mundo perde com isso. :/

    Abraços.

  3. Qual a solução ideal para substituir Woodstoc?

    Será que não haverá volta? Não compreendo porque foi descontinuado.

    Fui pego de surpresa quando já estava desenvolvendo um aplicativo, e ai, na versão 6.8 não mais encontrei o Visual JSF.

    • gugawag said

      Olá Laércio.

      Acredito que virá alguma ferramenta visual JSF que a Oracle irá investir, mas hoje eu usaria NB 6.8 com JSF e Facelets. A descontinuidade de ferramentas é realmente um grande problema. :/

  4. Hoje é 23/05/2011, e ainda não vi nenhuma soluçução que substitua Visaul Web JSF.
    Temos alguma novidade?

  5. Rulian said

    tem sim e é antiga, voce pode usar o jsf toolbox e desnvolver seus jsf no dreamwaver

  6. Neste momento estou instalando o NetBeans 7.0 (versão final) e JavaFX Beta. será esta a solução para VisualWeb?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s

%d blogueiros gostam disto: