Iniciando um projeto Java Web com Hibernate, JSF e Primefaces

Iniciando um Projeto com Java Web e Hibernate/JSF/Primefaces

Uma das dificuldades para quem est� começando ou que tem interesse de programar Java para Web, � a escolha de ferramentas adequadas para elaboraç�o de um projeto.

Existem muitas ferramentas e frameworks que podem ser utilizados por equipes de desenvolvimento. Outro desafio est� em encontrar material de apoio, que auxilie equipes a conhecerem formas diferentes de executar tarefas, abordando t�cnicas, ferramentas e modelos distintos. Este artigo tem como principal objetivo auxiliar na configuraç�o de ambiente de desenvolvimento NetBeans IDE 7.2.1, juntamente com a preparaç�o dos frameworks, Hibernate, JSF e PrimeFaces, que ser�o utilizados no projeto. O conte�do ser� descrito em nove passos.

Passo Um � Download de Instalaç�o NetBeans Full

Para desenvolver o aplicativo, � recomendado utilizar o NetBeans na vers�o Full, por essa ser considerada uma �tima ferramenta para desenvolvimento web, tendo em vista que essa vers�o usada no artigo j� vem em portugu�s, � de f�cil usabilidade, vem com os frameworks Spring Web MVC, JavaServer Faces, Struts 1.3.10 e Hibernate 3.2.5 j� integrados na IDE.

O Download da vers�o Full do NetBeans, � poss�vel pela p�gina http://netbeans.org/downloads/, onde deve ser buscada a �ltima vers�o dispon�vel, conforme apresentado pela Figura 1. Depois disso, basta seguir os passos da instalaç�o do IDE.

Figura 1: Download Netbeans full

Na p�gina, deve ser clicado no bot�o de �Download�, encontrado abaixo da coluna �Tudo�, completando assim a instalaç�o da ferramenta.

Passo Dois � Iniciar Projeto

Para iniciar o projeto, � fundamental que a ferramenta esteja aberta, ent�o deve ser acessado o menu Arquivo, e em sequ�ncia, a opç�o Novo Projeto, como apresentado pela Figura 2.

Figura 2: Criar novo projeto

� importante ressaltar que as ferramentas adequadas para o desenvolvimento web est�o dispon�veis, por isso devem ser adicionadas ao projeto, conforme as configuraç�es pertinentes, detalhadas na sequ�ncia.

Passo Tr�s � Escolher o tipo de Projeto

Quando � iniciada a criaç�o de um novo projeto, com o passo 2, o sistema direciona o usu�rio a telas de configuraç�o, como pode ser observado na Figura 3.

Figura 3: Escolher o Tipo de Projeto

A escolha do tipo de projeto deve ser realizada conforme necessidade do usu�rio, no caso ser� selecionada em �Categorias� a opç�o �Java Web�, j� o projeto selecionado ser� �Aplicaç�o Web�. Pelo bot�o �Pr�ximo >� deve ser seguido para a pr�xima fase de configuraç�o.

Passo Quatro - Definir nome do Projeto

O usu�rio pode ent�o escolher o nome para seu projeto, como apresentado pela Figura 4.

Figura 4: Definir nome de Projeto

Na tela �Novo Aplicaç�o Web�, no campo �Nome do Projeto:� o usu�rio informa o nome do projeto, no exemplo, adotado �OlaMundoWeb�. Tamb�m deve ser definida a �Localizaç�o do Projeto:�, que no exemplo � �C:\Projetos�, destacando que o bot�o �Procurar� possibilita a busca da pasta a ser evidenciada, sendo ent�o o campo �Pasta do Projeto:� e preenchido automaticamente.

A confirmaç�o d�-se pelo bot�o �Pr�ximo >�. Lembrando que na �rea �Etapas� o usu�rio pode acompanhar a em que se encontra. Caso o mesmo queira voltar a anterior basta clicar no bot�o �< Voltar�. Pelo bot�o �Cancelar� � poss�vel abortar o processo e o �Ajuda� direciona o usu�rio a tela de auxilio.

Passo Cinco � Definir Servidor

A escolha do servidor fica a crit�rio do usu�rio, conforme Figura 5.

Figura 5: Escolha do Servidor

No exemplo apresentado foi clicado nas opç�es dispon�veis na seta, do lado do campo �Servidor� e escolhido o �GlassFish Server 3.1.2.1�.

O bot�o �Adicionar...� permite inserir um servidor diferenciado, da prefer�ncia do usu�rio.

Passo Seis � Escolher os frameworks que ser�o utilizados no projeto

Nesse passo � escolhido o framework compat�vel com as necessidades do usu�rio, como na Figura 6.

Figura 6: Escolha de FrameWork

No exemplo apresentado foram selecionados os FrameWorks �JavaServer Faces� e �Hibernate 3.2.5�.

Em �Configuraç�o JavaServer Faces� � selecionada a �Biblioteca do Servidor: JSF 2.1�, sendo que essa vers�o possui alguns recursos que poder�o ser vistos na continuaç�o desse artigo.

Passo Sete � Arquivos dos Projetos

Nesse passo � adicionada a biblioteca .jar do primefaces, como detalhado na sequ�ncia. Essa biblioteca ir� permitir que voc� possa trabalhar com todos os componentes avançados do primefaces.

Ap�s o projeto ter sido gerado as configuraç�es, apresentadas na Figura 7, devem aparecer ao usu�rio.

Figura 7: Arquivos dispon�veis

O arquivo index.xhtml ser� a primeira p�gina que o usu�rio ver� ao abrir o site, o hibernate.cfg � o arquivo de conex�o com o banco de dados, pode ser alterado a qualquer momento, a pasta de bibliotecas cont�m todos os arquivos que est�o sendo utilizados no projeto, sendo que podem ser acrescentadas novas bibliotecas no decorrer do projeto.

Para baixar a �ltima vers�o do primefaces, pode ser acessado o site http://www.primefaces.org/downloads.html e ent�o realizar o download, com mostrado na Figura 8.

Figura 8: Download Primefaces

Baixado o primefaces, deve ent�o ser adicionado o .jar do primefaces ao projeto, como Figura 9.

Figura 9: Adiç�o do .jar

Procurar o .jar do primefaces e adicionar ao projeto. Para adicionar o Jar, deve ser clicado com o bot�o direito sobre a pasta bibliotecas e clicar na opç�o destacada na Figura 9. Localizar a pasta onde foi baixado o jar do primefaces e clicar em abrir, sendo assim o jar ser� adicionado a sua biblioteca, ap�s isso todos os componentes do primefaces poder�o ser utilizados no xhtml.

Figura 10: Busca do arquivo a ser selecionado

Ap�s o primefaces ser adicionado com sucesso, esse estar� pronto para uso.

Aqui pode ser o passo Oito � Conex�o com BD.

Para realizar a conex�o com o banco de dados, � imprescind�vel identificar o arquivo respons�vel para se conectar com o banco de dados, no caso o hibernate.cfg.xml, o qual deve ser configurado.

No exemplo, Listagem 1, � demostrada a configuraç�o do hibernate.cfg.xml para MySQL. Os dados descritos no arquivo de configuraç�o hibernate.cfg.xml s�o informaç�es do banco de dados, caso utilize outro banco de dados poder� buscar na internet as propriedades do banco que ser� utilizado.

Listagem 1: Conex�o com o Banco de dados


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
  <session-factory>
    <property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
    <property name="hibernate.connection.driver_class">com.mysql.jdbc.Driver</property>
    <property name="hibernate.connection.url">jdbc:mysql://localhost:3306/OlaMundo</property>
    <property name="hibernate.connection.username">root</property>
    <property name="hibernate.connection.password">senha</property>
    <property name="hibernate.show_sql">true</property>
    <property name="hibernate.format_sql">true</property>
  </session-factory>
</hibernate-configuration>

O Arquivo Hibernate.cfg pode ser manipulado tanto por c�digo fonte ou por design, como pode se notar na Figura 11, a parte de Design e C�digo fonte.sd.

Figura 11: Editar/ Adicionar as propriedades de conex�o

Na Figura 11 � poss�vel alterar as propriedades do banco de dados, tanto configurar a conex�o com outro SGDB, como colocar o usu�rio e senha do banco, e n�o se esquecer de verificar a URL de conex�o, garantindo que o caminho � o mesmo do banco que ser� conectado.

Passo Oito � Ediç�o do arquivo �ndex.xhtml

O arquivo index.xhtml ser� editado para que tenha o titulo "Ol� Mundo" e acrescentado um bot�o, onde ser� utilizado um dos componentes do primafaces.

Listagem 2: Arquivo �ndex.xhtml


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Ol� Mundo</title>
    </h:head>
    <h:body>
       Ol� Mundo
    <br/>
       <p:button value="Ol� Mundo Primefaces"/>
    </h:body>
</html>

Selecionar o arquivo index.xhtml, dentro da pasta P�ginas Web, como na Figura 12.

Figura 12: index.xhtml

Duplo clique sobre o arquivo index.xhtml, permitem sua ediç�o, permitindo ao usu�rio o acesso a tela de ediç�o, ilustrada pela Figura 13.

Figura 13: Editando o arquivo index.xhtml

Basta utilizar os comandos b�sicos em HTML , no caso da tag <br/> que significa a quebra de linha, ou utilizar o <h:NomeDoComponente> sendo que referenciado com o componente desejado.

O acesso aos componentes do primefaces, s�o: <p: nome do componente>. Sendo que a finalidade � mostrar um componente na tela como alterar suas configuraç�es, como pode ser visto nessa tag <p:Button value="Ola Mundo Primefaces"/>.

A criaç�o de um novo arquivo xhtml, como mostrado pela Figura 14. O exemplo ser� usado para entender como funciona o acesso das p�ginas utilizando o arquivo faces-config, que ser� visto no passo nove.

Figura 14: Criando um novo arquivo xhtml

Escolhido o tipo de arquivo, deve ser registrado, como Figura 15. Basta clicar com o bot�o direito do mouse em p�ginas da web e em novo e escolher a opç�o arquivo xhtml.

Figura 15: Novo arquivo XHTML

A finalizaç�o da criaç�o do arquivo � realizada pelo bot�o �Finalizar.�

Passo Nove - Adicionar o arquivo faces-config.xhtml

Nesse passo � detalhada a adiç�o do arquivo faces-config.xhtml - um dos arquivos de configuraç�es utilizado nesse caso para definir as permiss�es de acesso a p�ginas - sendo que por default as p�ginas criadas s�o bloqueadas, por quest�o de segurança, nesse arquivo ser� poss�vel definir que p�gina poder� ser acessada e qual condiç�o ser� necess�ria para isso, permitindo tamb�m criar uma tela de login, como na Figura 16.

Figura 16: Procurar arquivo de configuraç�o do JSF Faces

Depois de selecionar a aba JavaServer Faces e escolher o arquivo de configuraç�es, deve ser clicado sobre o projeto com o bot�o direto, ap�s ir em novo e procurar pelo arquivo de configuraç�o do JSF Faces.

Figura 17: Adicionando o arquivo de configuraç�o do JSF Faces

Ap�s inserir um arquivo do JavaServerFaces Clicar no Faces-Config.xml, mostrado na Figura 18, que estar� na pasta Arquivos de Configuraç�o.

Figura 18: Abrindo o arquivo faces-config

Com dois cliques no arquivo faces-config.xml dentro desse arquivo ser� poss�vel fazer um controle de que p�gina poder� ser acessada atrav�s da �ndex.xhtml ou da �ndex2.xhtml, possibilitando o acesso de forma visual ou via c�digo.

A Figura19 abaixo mostra que �ndex.xhtml poder� ter acesso ao index2.xhtml atrav�s da palavra senha (que pode ser definida pelo programador).

Figura 19: Exibindo os arquivos xhtml do projeto

Embora a forma que a �ndex.xhtml ir� acessar index2.xhtml ser� implementada na continuaç�o desse post, na Figura 20 pode ser observada a exibiç�o.

Figura 20: Index.xhtml que pode acessar index2.xhtml com a senha: senha

O acesso tamb�m pode ser feito via c�digo, como apresentado na listagem abaixo:

Listagem 3: Configuraç�o de acesso via c�digo


    <navigation-rule>
        <from-view-id>/index.xhtml</from-view-id>
        <navigation-case>
            <from-outcome>senha</from-outcome>
            <to-view-id>/index2.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>

No arquivo de configuraç�o web.xml que pode ser encontrado dentro da pasta Arquivos de Configuraç�o, poder� ser definido qual das duas p�ginas xhtml ser� acessada como p�gina inicial. Isso � feito caso voc� precise criar um login, ent�o logo ser� necess�rio colocar o login como p�gina inicial, para somente depois da validaç�o exibir o �ndex.

Figura 21: Abrindo arquivo web.xml

O comando que ir� alterar a p�gina de inicializaç�o pode ser encontrada nessa parte do c�digo, dentro do arquivo web.xml, mudar o <welcome-file>faces/novapaginaqueseramostra.xhtml</welcome-file>:

Listagem 4: Alterando p�gina inicial e tempo de sess�o


    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
Sendo que o tempo que a sess�o ira se esgotar nessa:
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>

Agora basta executar a aplicaç�o para poder visualizar a p�gina.

Figura 22: P�gina criada (index.xhtml)

A p�gina exibida acima � o arquivo index.xhtml, para fazer novas alteraç�es � necess�rio alterar o mesmo, agora j� � poss�vel fazer uma p�gina com o visual do primefaces, tanto como explorar todos os recursos de seus componentes.

IMPORTANTE

Em relaç�o a conex�o com o banco � preciso verificar se o MySQL ou outro SGBD que esteja configurado no arquivo hibernate.cfg.xml esteja com o banco criado, e as opç�es de usu�rio e senha estejam corretas, caso n�o estejam corretas quando for iniciar o desenvolvimento com banco de dados n�o ser� poss�vel acessar o mesmo.

Conclus�o

As ferramentas descritas e configuradas acima t�m muitos recursos a serem exploradas sendo que j� se tem implementaç�es comerciais com essas ferramentas. A configuraç�o do ambiente � o primeiro passo a programaç�o Java Web, lembrando que outros frameworks dispon�veis podem ser utilizados ou n�o no IDE NetBeans como os vistos no passo um. Conclu�das as configuraç�es, pode ser iniciar a fase de desenvolvimento.

Em relaç�o ao primefaces, � importante ressaltar, que no site do mesmo www.primefaces.org podem ser encontrados muitos exemplos de utilizaç�o de seus componentes.