Conhecendo o RichFaces - Parte I

Introdução

RichFaces é 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.

Instalação

Primeiramente é necessário fazer o download do RichFaces de http://labs.jboss.com/jbossrichfaces. Logo após adicione as bibliotecas “richfaces-3.0.x.jar”, “ajax4jsf-1.1.0” e “oscache2.3.jar” na pasta WEB-INF/lib da sua aplicação.

O código da Listagem 01 mostra as configurações do filtro que devem ser inseridas no arquivo web.xml da aplicação.

<context-param>

  <param-name>org.ajax4jsf.SKIN</param-name>

  <param-value>blueSky</param-value>

</context-param>

<filter>

  <display-name>Ajax4jsf Filter</display-name>

  <filter-name>ajax4jsf</filter-name>

  <filter-class>org.ajax4jsf.Filter</filter-class>

</filter>

<filter-mapping>

  <filter-name>ajax4jsf</filter-name>

   <servlet-name>Faces Servlet</servlet-name>

   <dispatcher>REQUEST</dispatcher>

   <dispatcher>FORWARD</dispatcher>

   <dispatcher>INCLUDE</dispatcher>

</filter-mapping>

Listagem 01. Configuração do filtro.

Agora quando for necessário usar um componente do RichFaces basta adicionar uma das seguintes linhas no topo de suas paginas.

Para paginas JSP:

<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>

Para paginas XHTML (Facelets!):

<xmlns:rich="http://richfaces.ajax4jsf.org/rich">

Conhecendo alguns componentes

Nessa seção mostrarei como utilizar alguns dos principais componentes do RichFaces. Você irá notar a facilidade de implementação desses componentes e também a gama de aplicações em que eles podem ser empregados.

SuggestionBox

Tag: <rich:suggestionbox>

O SuggestionBox adiciona a capacidade de autocomplete em componentes h:inputText. Os atributos suggestionAction, for e var são os mais importantes desse componente. O primeiro aponta para uma action do managed bean que retorna uma coleção (List por exemplo), o segundo aponta em qual inputText será usado o suggestionbox, e o ultimo é a variável que representa um Objeto da coleção (similar ao var do dataTable).

<h:form>

<h:panelGrid columns="2">

        <h:outputText value="Nome:"/>

        <h:inputText value="" id="text"/>

        <rich:suggestionbox id="suggestionBoxId" for="text"

               suggestionAction="#{suggestionboxbean.complemento}"

               width="200" height="150" var="result">

        <h:column>

               <h:outputText value="#{result}"/>

        </h:column>

        </rich:suggestionbox>

</h:panelGrid>

</h:form>

Listagem 02. suggestionbox.jsp.

O código da Listagem 03 refere-se ao managed-bean que é usado pelo componente na Listagem 02.

public class SuggestionboxBean {   

    private List<String> lista;   

    public SuggestionboxBean() {

      lista = new ArrayList();

      //Aqui preencher a lista com nomes para testar.

    }

    public List<String> complemento(Object event){

      String prefixo = event.toString().toLowerCase();        

      List<String> retorno = new ArrayList();

      for(int pos = 0; pos < lista.size(); pos++){

          if(lista.get(pos).toLowerCase().startsWith(prefixo)){               

              retorno.add(lista.get(pos));

          }

      }

      return retorno;

    }

}

Listagem 03. SuggestionboxBean.java.

DataTableScroller

Tag: <rich:datascroller>

Este componente prove a funcionalidade de paginação a tabelas sendo que ele, diferentemente do componente do tomahawk, faz os requests via Ajax. O código da Listagem 04 mostra um exemplo de uso do datascroller que faz a paginação de uma tabela do richfaces.

<h:form>

<rich:dataTable value="#{datatablebean.lista}" var="pessoa"

id="tabela" rows ="4">

<h:column>

<f:facet name="header">

<h:outputText value="Nome"/>                           

</f:facet>

<h:outputText value="#{pessoa.nome}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="Idade"/>

</f:facet>

<h:outputText value="#{pessoa.idade}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="Sexo"/>

</f:facet>

<h:outputText value="#{pessoa.sexo}"/>

</h:column>

</rich:dataTable>

<rich:datascroller for="tabela" maxPages="20" />

</h:form>

Listagem 04. datascroller.jsp

PanelBar e PanelBarItem

Tag: <rich:panelBar> e <rich:panelBarItem>

O PanelBar é um componente em que você têm um agrupamento de painéis (PanelBarItens) onde, enquanto um painel está expandido os outros estão contraídos. Este componente não necessita de nenhum managed bean, pois ele não faz requests. Veja um exemplo na Listagem 05.

<f:view>

           <h:outputText value="Exemplo de uso do Panelbar."/><br/>

           <rich:panelBar>

               <rich:panelBarItem label="Produto 1">

                   <%--Conteúdo aqui--%>

               </rich:panelBarItem>

               <rich:panelBarItem label="Produto 2">

                   <%--Conteúdo aqui--%>

               </rich:panelBarItem>

               <rich:panelBarItem label="Produto 3">

                  <%--Conteúdo aqui--%>

               </rich:panelBarItem>

               <rich:panelBarItem label="Produto 4">

                   <%--Conteúdo aqui--%>

               </rich:panelBarItem>

           </rich:panelBar>

</f:view>

Listagem 05. panelbar.jsp

TabPanel

Tag: <rich:tabPanel>

O TabPanel adiciona páginas “com abas” a sua aplicação. A navegação entre essas abas pode ser feita de três maneiras, e para isso, basta mudar o valor do atributo switchType para um dos seguintes modos:

• Modo normal: é feita uma requisição completa, onde toda página é recarregada.
• Modo ajax: é feita uma requisição via Ajax, onde somente o painel é recarregado (reRender).
• Modo client: nenhuma requisição é feita e o conteúdo das abas já deve estar previamente definido.

Na Listagem 06 é exemplificado o uso do componente tabPanel no modo Ajax.

<h:form id="form1">

<rich:tabPanel switchType="ajax">

<rich:tab label="Descrição">

<h:graphicImage value="#{bean.produto.imagem}"/><br/>

<h:outputText value="#{bean.produto.descricao}"/>

</rich:tab>

<rich:tab label="Detalhes">

<h:outputText value="#{bean.produto.preco}"/><br/>

<h:outputText value="#{bean.produto.parcelas}"/><br/>

<h:outputText value="#{bean.produto.peso}"/>

</rich:tab>                   

</rich:tabPanel>

</h:form>

Listagem 06. tabpanel.jsp

Conclusão

Neste artigo vimos como instalar o RichFaces em uma aplicação web que utiliza JavaServer Faces, bem como as facilidades na utilização de seus componentes e o incrível suporte Ajax que estes possuem. Nos próximos artigos desta série, irei mostrar mais componentes e também exemplos de como explorar o suporte a Skins que esta fantástica biblioteca possui.