Posts Tagged Faces
Hello World RichFaces
Posted by Diego Ferreira da Silva in Java EE on 1 de maio de 2009
E ai pessoal, hoje famos fazer um exemplo passo a passo de uma aplicação Hello World utilizando o RichFaces.
Para quem não conhece o RichFaces ele é uma biblioteca de componentes para aplicações web que utilizam o framework JSF. Os componentes desta biblioteca possuem um incrível suporte AJAX, e ela, pode ser considerada uma extensão do Ajax4jsf com inúmeros componentes com Ajax “embutido” e com um suporte a Skins que podem deixar as interfaces da sua aplicação com um visual padronizado.
O ambiente que utilizamos neste post é o seguinte:
- Eclipse Ganymede
- Tomcat 6.0
- RichFaces 3.3.0
Vamos por a mão na massa, primeiro criamos um projeto web no eclipse e damos o nome a ele de HelloRichFaces.
Efetue o download do arquivo richfaces-ui-3.3.0.GA-bin.zip no seguinte link . Descompacte o arquivo e copie os arquivos richfaces-api-3.3.0.GA.jar, richfaces-impl-3.3.0.GA.jar, richfaces-ui-3.3.0.GA.jar para do diretório WEB-INF/lib da nossa aplicação.
Precisamos também copiar os seguintes jars para o diretório WEB-INF/lib da nossa aplicação:
jsf-api.jar, jsf-impl.jar(Jar’s do framework JSF).
jstl.jar, standard.jar.
commons-beanutils-1.8.0.jar, commons-collections-3.2.1.jar, commons-digester-1.8.jar, commons-logging-1.1.1.jar.
Vamos criar agora dentro da nossa pasta WEB-INF um arquivo com o nome faces-config.xml, neste arquivo ficará nossas configurações referente ao JSF(Managed beans, Regras de navegação, etc…).
Agora criaremos dentro da pasta WebContent uma página jsp com o nome: helloWorldRichFaces.jsp
Vamos criar um pacote dentro da pasta src do nosso projeto com o seguinte nome br.com.diegosilva.helloworld
Pronto, nossa estrutura para o helloWorld já está criada, se você chegou até aqui veja abaixo como deve ficar a estrutura de seu projeto.
Imagem-01
Agora que já temos nossa estrutura do projeto pronta, vamos criar um simples managed bean dentro do pacote br.com.diegosilva.helloworld como o nome de Bean.
Abaixo o código da classe Bean:
package br.com.diegosilva.helloworld;
public class Bean {
private String text;
public Bean() {
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
O managed bean criado acima será utilizado na nossa página JSF, mas para que possamos utilizá-lo precisamos confirar nosso arquivo faces-config.xml inserindo as confirações necessárias para que nosso manage bean seja reconhecido pela nossa página.
Segue abaixo a configuração do nosso faces-config.xml do nosso exemplo:
<?xml version="1.0" encoding="UTF-8"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xi="http://www.w3.org/2001/XInclude" 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-facesconfig_1_2.xsd"> <managed-bean> <managed-bean-name>bean</managed-bean-name> <managed-bean-class>br.com.diegosilva.helloworld.Bean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>text</property-name> <value/> </managed-property> </managed-bean> </faces-config>
O arquivo acima está informando ao JSF que estamos criando um managed bean, que seu nome será bean que a classe será a que está no caminho br.com.diegosilva.helloworld.Bean que o escopo utilizado será como atributo de request e que este bean tem uma propriedade que se chama text.
Agora vamos criar nossa página que utilizará nosso managed bean criado.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>Hello World RichFaces</title>
</head>
<body>
<f:view>
<h:form>
<rich:panel header="Simples Impressão">
<h:inputText size="50" value="#{bean.text}">
<a4j:support event="onkeyup" reRender="rep" />
</h:inputText>
<h:outputText value="#{bean.text}" id="rep" />
</rich:panel>
</h:form>
</f:view>
</body>
</html>
Na nossa página acima primeiramente fazemos os imports das taglibs utilizadas pelo JSF e RichFaces, dentro ta tag <body> criamos um <f:view>, todos os componentes JSF devem vir dentro de uma tag <f:view>, dentro da nossa tag <f:view> criamos um formulário e dentro desse formulário um painel no qual terá o título de Simples Impressão, dentro desse painel temos um input que irá setar a propriedade text do nosso bean com o valor digitado no input, nesse input adicionamos um evento onkeyup utilizando a api de ajax que o richfaces utiliza, neste evento setamos o atributo reRender=”rep”, no qual rep é o id do nosso outputText declarado logo abaixo, o nosso outputText recebe o valor da propriedade text do nosso bean. O que acontece aqui é que a cada evento de onkeyup nosso bean recebe o valor e o componente de id rep e recebe a atualização desse valor sem refresh na página, totalmente ajax.
Não podemos esquecer de configurar o arquivo web.xml do nosso projeto para que tudo funcione belezinha tem que ser feito algumas configurações neste arquivo.
Segue abaixo nosso arquivo web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" 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>HelloRichFaces</display-name> <!-- Rich Faces --> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param> <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> <!-- Java SErver Faces --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>0</load-on-startup> </servlet> <!-- Faces Servlet Mapping --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>helloWorldRichFaces.faces</welcome-file> </welcome-file-list> </web-app>
Imagem 2
Download do projeto(Sem os Jars).
Bom pessoal é isso ai espero que tenham gostado deste post, e qualquer dúvida é só entrarem em contato.
Abraço.
