Olá, nesse post pretendo demonstrar como criar um ambiente de desenvolvimento JSF 1.2 utilizando alguns frameworks auxiliares como JBoss Richfaces que nós auxiliam com diversos componentes prontos e integração AJAX (ver Richfaces live demo) como também o Facelets para desenvolver a parte de template e reutilização das páginas.

Requisitos:

  • Bibliotecas JSF -
Download das lib JSF link1 ou link2
  • Biblioteca Commons
Download das lib Commons link1 ou link2
Download das lib Richfaces link1 ou link2
Instalando o Eclipse

Para instalar o eclipse escolha um diretório que será seu ambiente de desenvolvimento. Ex.: C:\Java-Desenv\ e nele descompacte o eclipse ficando C:\Java-Desenv\eclipse3.X . Eclipse não precisa de instalação, na hora que executá-lo defina um workspace dentro de seu ambiente como exemplo C:\Java-Desenv\workspace onde seus projetos irão ficar armazenados

Instalando o Apache Tomcat

O Tomcat que foi baixado não necessita de instalação sendo extraído na pasta de desenvolvimento C:\Java-Desenv\apache-tomcat-6.0.18.
Para integrar com o eclipse faça os seguintes passos:
  1. Execute o Eclipse

  2. Coloque na pespectiva JEE
  3. Depois click na aba Server e com o botão direito adicione um novo server
  4. Escolha a opção Apache Tomcat v6.0. Em Server Runtime click em ADD para adicionar um novo servidor. Na janela que aparecerá aponte para o local que encontra o tomcat como na foto abaixo abaixo



Para os próximos passos precisamos criar um projeto web para então adicionarmos o Richfaces e Facelets.

Criando um projeto web

No eclipse vá em File-New-Dynamic Web Project
  1. Insira um nome para o projeto
  2. Target-Runtime escolha o server Apache Tomcat
  3. Configuration - Escolha JavaServer Faces v1.2 ou click no botão modify e coloque as configurações como na imagem abaixo
  5. Next-Next
  6. Em JSF Capabilities deixaremos por padrão sem nenhuma biblioteca e as configurações padrão do JSF e clicaremos em Finish.


Por padrão o eclipse cria um projeto JSF mas não adiciona nenhuma biblioteca para que a gente possa executar o projeto JSF e as páginas JSF. Para adicionarmos as bibliotecas podemos escolher ela na tela Capabilities(tela acima) configurando em new e adicionar as bibliotecas para que sempre já estejam lá, ou adicionar as Jar's na pasta WebContent\WEB-INF\lib do projeto.

Para baixar as bibliotecas do JSF podemos ir no site Javaserverfaces.dev.java.net e fazer o download das bibliotecas JSF 1.2 (jsf-api.jar and jsf-impl.jar) e das bibliotecas JSTL (standard.jar e jstl.jar, Projeto Jakarta taglib).

Para baixar todas as bibliotecas JSF necessárias utilize um dos seguintes links (Download das lib JSF link1 ou link2)
Devemos também baixar as bibliotecas Commons necessárias utilize um dos seguintes links (Download das lib Commons link1 ou link2)

Vale ressaltar novamente em copiar as jar para pasta WebContent\WEB-INF\lib do projeto. Após copiar podemos criar uma nova página JSF no eclipse.
  1. Botão direito no projeto - New - JSP
  2. Inserir um nome - Ex.: index
  3. Finish
  4. Botão direito no index.jsp - Run As - Run on server
  5. Caso apareça para escolher um server, escolha o tomcat next ... next finish.


Instalando o Richfaces

Após baixar as bibliotecas do richfaces descompactar as lib (richfaces-api,richfaces-imp,richfaces-ui ,*.jar) na pasta WebContent\WEB-INF\lib do nosso projeto.

Depois devemos registrar o richfaces no web.xml da pasta WebContent\WEB-INF do nosso projeto. Para isso devemos copiar e colar no web.xml os seguintes comandos:

<!-- "Blue Sky" skin para o projeto -->
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<!-- Making the RichFaces skin spread to standard HTML controls -->
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>
<!-- Defining and mapping the RichFaces filter -->
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>

<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>

Após salvar o web.xml, podemos atualizar nossa página index.jsp para o seguinte código

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<f:view>
<a4j:form>
<rich:panel header="RichFaces Greeter" style="width: 315px">
<h:outputText value="Your name: " />
<h:inputText value="#{user.name}" >
<f:validateLength minimum="1" maximum="30" />
</h:inputText>
<a4j:commandButton value="Get greeting" reRender="greeting" />
<h:panelGroup id="greeting" >
<h:outputText value="Hello, " rendered="#{not empty user.name}" />
<h:outputText value="#{user.name}" />
<h:outputText value="!" rendered="#{not empty user.name}" />
</h:panelGroup>
</rich:panel>
</a4j:form>
</f:view>
</body>
</html>

Após salvar devemos rodar no servidor, e então nossa página já estará configurada para utilizar o Richfaces finalmente =p



Espero que tenha ajudado,
Abraços Thiago