Criando uma aplicação JSF 2.0 com Primefaces

Olá pessoal, estou estreiando o blog com este post, como desenvolvo utilizando Java Server Faces há algum tempo então decidi fazer um post sobre como configurar uma aplicação JSF 2.0 simples utilizando Primefaces, que é uma suite de componentes para JSF e possui código fonte aberto.
Sei que existem muitos outros posts pela intenet com este tema, mas a minha intenção é dar um ponta pé inicial com este post para depois poder evoluir e criar uma aplicação maior e mostrar alguns componentes mais complexos do primefaces e alguns criados por mim.

Downloads

Eclipse Helios
Servidor de aplicação JBoss 6.0
Primefaces 2.2.1
JBoss Tools

Configurando o Eclipse

Faça o download do Eclipse Helios para seu tipo de sistema operacional levando em consideração se é 32 ou 64 bits. Descompacte o arquivo baixado, não é preciso executar nenhum tipo de instalação, basta executar o arquivo eclipse dentro da pasta descompactada, você pode criar um atalho para este arquivo no seu Desktop.

Quando abrir o eclipse você deve definir um caminho para que ele crie uma workspace. Após criado a workspace vamos instalar o JBoss Tools.
Com o eclipse aberto vá em “Help -> Install New Software -> Add -> Archive”. Então navegue até a pasta onde você fez o download do JBoss Tools e selecione o arquivo zip, após isso dê um nome por exemplo JBossTools, assim como visto na imagem abaixo.

Após feito isso clique em “Ok”.  Selecione “Web and Java EE Development”, desmarque a opção “Contact all update sites during install to find  required software”  e clique em “Next” e “Next” novamente.

Aceite os termos da licença, clique em “Finish” e espere o eclipse terminar de instalar o software, isso pode demorar um pouco. Se aparecer alguma mensagem de alerta durante a instalação é so clicar em “OK”. Após a instalação você deve reiniciar o eclipse.
Agora devemos configurar o servidor de aplicação. Descompacte o arquivo zip do JBoss 6.0 em alguma pasta da sua escolha. Então na aba Servers clique com o botão direito e “New -> Server”. Escolha o servidor JBoss AS 6.0 e clique em “Next”.

Clique em “Browse” e selecione a pasta que você extraiu do arquivo zip do JBoss e clique em “Finish”.

Pronto agora temos o nosso ambiente de desenvolvimento configurado.

Criando uma aplicação de exemplo

Agora que temos o nosso ambiente configurado vamos criar o nosso projeto JSF 2.0 de exemplo. Vá em “File -> New -> Other -> JSF Project”. Digite “jsf2-hello-world” em “Project name” e escolha “JSF 2.0″ no combobox “JSF Enviroment” e clique em “Finish”.

Dentro da pasta JavaSource existe um arquivo chamado resources.properties, renomeie ele para resources_pt_BR.properties e o copie e cole na mesma pasta com o nome resources_en_US.properties.
Após criado o projeto vamos configurar o Primefaces para podemos usar seus componentes,  a configuração do Primefaces é muito simples.
Descompacte o arquivo zip do Primefaces e copie o arquivo primefaces-2.2.1.jar para debaixo da pasta “WebContent -> WEB-INF -> lib”.

Altere o arquivo web.xml para que fique igual como está descrito abaixo.

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" 
		       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
                       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

        <display-name>jsf2-hello-world</display-name>

        <context-param>
            <param-name>javax.faces.PROJECT_STAGE</param-name>
            <param-value>Development</param-value>
        </context-param>

        <servlet>
            <servlet-name>Faces Servlet</servlet-name> 
            <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
            <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet>
	    <servlet-name>Resource Servlet</servlet-name>
	    <servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
        </servlet>

	<servlet-mapping>
            <servlet-name>Faces Servlet</servlet-name>
	    <url-pattern>*.jsf</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
	    <servlet-name>Resource Servlet</servlet-name>
	    <url-pattern>/primefaces_resource/*</url-pattern>
	</servlet-mapping>

	<welcome-file-list>
	    <welcome-file>index.html</welcome-file>
	</welcome-file-list>

</web-app>

Após isso altere o arquivo inputname.xhtml para que fique igual ao código abaixo.

<!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:f="http://java.sun.com/jsf/core"	
      xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
</h:head>

<h:body>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>

    <p:panel header="Hello World JSF 2 with Primefaces!">
        <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;
                 height:400px" />
    </p:panel>	

</h:body>

</html>

Agora está tudo configurado, basta ir na aba Servers clicar com o botão direito sobre o servidor JBoss e clicar em “Start” e então acessar a url “http://localhost:8080/jsf2-hello-world/pages/inputname.jsf”. Se tudo estiver correto aparecerá uma página no seu browser como a da figura abaixo.