O Visual Web JavaServer Faces é um editor visual de páginas JavaServer Faces, no estilo WYSIWYG (What You See Is What You Get), baseado no Java Studio Creator IDE, da Sun Microsystems. Adaptado como pacote para o NetBeans IDE 5.5, ao qual podia ser instalado separadamente, foi incorporado na versão 6.0 do NetBeans IDE, tornando-se parte de seu assistente de criação de páginas Web.
Como seu desenvolvimento é baseado em componentes visuais arrastáveis, com pouco código, o desenvolvedor pode criar páginas totalmente funcionais, integradas com banco de dados através do uso de JDBC. Embora o Visual Web JSF possa ser utilizado para desenvolver aplicações integradas a outros frameworks, não há assistentes ou componentes visuais que o façam até o momento. Neste artigo vamos usar esta ferramenta, examinando alguns de seus recursos, guiando o leitor na construção de uma aplicação integrada ao Spring Framework 2.5, Java Persistence API e Hibernate.
Visual Web JavaServer Faces na prática
O projeto utilizado neste artigo está baseado em apenas uma entidade, que é o suficiente para ilustrar como integrar o Visual Web JSF com os demais frameworks. Esta aplicação fará um CRUD (Create, Read, Update and Delete) de uma tabela proposta de contatos e seu resultado final, em execução, será similar a Figura 1.

Preparando o ambiente de desenvolvimento
Para acompanhar este artigo, será necessário a instalação do NetBeans (6.0 ou superior) em conjunto com um servidor suportado de aplicações Web Java. O NetBeans pode ser baixado em seu pacote específico para o desenvolvimento Web (Web & Java EE), ao qual já inclui o GlassFish V2 e o Apache Tomcat 6, os quais são pré-configurados na instalação.
Outros servidores poderão ser usados, desde que sejam suportados pelo NetBeans. Neste caso, será preciso adicioná-lo manualmente, através do menu Tools > Servers > Add Server. Para o exemplo, será utilizado o Apache Tomcat que já vem integrado ao programa.
Os plugins do Spring Framework e Hibernate para o NetBeans
O NetBeans possui um plugin para trabalhar com o Spring Framework, automatizando tarefas como a geração dos arquivos e a adição das bibliotecas exigidas pelo Spring.
No NetBeans 6.0, Através do menu Tools > Plugins selecione “Spring Framework Support” em Available Plugins e clique em Install (Figura 2). Após a instalação, poderá ser necessário reiniciar o NetBeans.
No NetBeans 6.1 não é preciso fazer nada: o suporte ao Spring já vem instalado por padrão, sendo que o plugin mudou de nome para “Spring Web MVC Support”.

Criando o projeto e adicionando suporte ao Spring
Com o NetBeans aberto, selecione File > New Project > Web > Web Application. Preencha o Project Name, ex.: “VisualWebJM”. Altere Server para Apache Tomcat 6.0.14, conforme a Figura 3.

Na terceira etapa, conforme ilustrado na Figura 4, selecione o framework Visual Web JavaServer Faces. Altere o nome do pacote em Default Java Package e, em Servlet URL Mapping, mude para “*.faces”.

Após a criação do projeto, adicione o suporte ao Spring Framework através do botão direito do mouse sobre Libraries, em Add Library > spring-framework-2.5 > Add Library. O plugin que fora instalado possui as bibliotecas do Hibernate e do Spring. Algumas bibliotecas podem estar faltando. Para adicioná-las, acesse Tools > Libraries > Libraries e selecione spring-framework-2.5. Clique no botão Add JAR/Folder e selecione as bibliotecas faltantes. No momento em que escrevo, foi preciso adicionar as bibliotecas do Hibernate, que estão separadas em três downloads diferentes: jboss-archive-browsing.jar, hibernate-validator.jar (Hibernate EntityManager 3.3.1) e javassist.jar (Hibernate Core 3.2.5), que devem ser baixadas no site oficial do Hibernate (veja a seção “Links”)
No NetBeans IDE 6.1, foram separadas as bibliotecas, sendo necessário instalar os plugins Hibernate Support e Hibernate 3.2.5 Library. Além dos plugins, será necessário adicionar as bibliotecas citadas anteriormente.
O banco de dados utilizado e seu driver JDBC
Utilizaremos como banco de dados o MySQL, que já possui o driver JDBC pré-configurado com o NetBeans IDE (versão 6.0 ou superior). A Listagem 1 mostra o script para a criação da tabela que será usada no exemplo.
CREATE TABLE contato(
id int NOT NULL auto_increment,
nome varchar(50),
email varchar(50),
nascimento date,
telefone varchar(20),
PRIMARY KEY id_contato(id)
);
Após criar o banco de dados no MySQL e sua respectiva tabela (veja o quadro “Executando instruções SQL pelo NetBeans”), volte ao NetBeans, na janela Services, e com o botão direito do mouse sobre Databases selecione New Connection. Em Basic setting > Name selecione MySQL (Connector/J driver). Preencha Database URL com o acesso ao seu banco de dados e, em seguida, com o nome de usuário e senha (veja Figura 5).

Executando instruções SQL pelo NetBeans
É possível gerar a tabela pelo NetBeans executando o script da Listagem 1. Para isso, siga os passos descritos a seguir:
- Através da janela Services, em Databases, vá com o direito do mouse sobre a conexão criada e selecione Connect;
- Com o direito do mouse sobre Tables>Execute Command, digite o script da tabela na janela SQL Command 1 e clique no botão Run SQL(Ctrl+Shift+E);
- Verifique a saída na janela Output>SQL Command 1 Execution;
- Para exibir a tabela criada em Services>“Sua conexão”>Tables, clique novamente com o direito e selecione Refresh.
Por fim, será necessário adicionar o driver JDBC do MySQL ao projeto. Com o botão direito do mouse em Libraries, selecione Add Library > MySQL JDBC Driver > Add Library.
Criando a entidade Contato
Sem aprofundar na JPA, para o exemplo, teremos apenas uma entidade, chamada de ...