1/12

Conhecendo o Richfaces
O Framework Ajax para JSF
Richfaces um biblioteca de aplicaes ricas para web desenvolvida em Java, voltada para atender a grande demanda e necessidade existente dentro do mercado JavaServer Faces. ALVES JNIOR, PAULO Em meados de 2005 a web passava por um grande impulso, cada vez mais servios eram disponibilizados pela internet. O desenvolvimento para web estava bastante evoludo, porm ainda existia uma grande carncia em relao a design e usabilidade dos sites/sistemas. Nesse perodo houve ento o surgimento da WEB2.0, que trazia a idia de servios e aplicaes sobre uma mesma plataforma, a WEB. A partir da necessidade que existia dentro do mercado web de se ter GUIs mais dinmicas e interativas, houve ento um grande nmero de pessoas e empresas desenvolvendo frameworks para facilitar e automatizar o trabalho com esse novo conceito. Alexander Smirnov deu incio a um projeto chamado Ajax4JSF e logo depois outro projeto integrado com o A4J denominado Richfaces. No mesmo perodo em que surgia a WEB 2.0, onde a combinao de Requisies Assncronas com JavaScript, a leveza e o design dado pelo CSS e as marcaes HTML se expandiam e permitiam a criao de interfaces ricas e dinmicas na web, Alexander Smirnov lanava ento o Richfaces. Logo depois, fez parceria com a Exadel, e juntos continuaram o investimento e desenvolvimento do mesmo. Com esse projeto, desenvolvido especialmente para JSF, as aplicaes JSF poderiam ento usufruir de novos recursos tecnolgicos, como Ajax de forma fcil e rpida e interfaces ricas e dinmicas.

O funcionamento do framework
O Richfaces um dos poucos frameworks que desde seu incio no mercado j trabalhava completamente com todo o fluxo de requisies do JSF. Por ser feito para respeitar o ciclo de vida do JSF ele conseguiu uma integrao completa e que passava por todas as fases do JSF. Atravs de uma taglib de componentes, richfaces d a capacidade de requisies AJAX a pginas j existentes, sem a necessidade de se escrever uma linha em javascript. Assim, voc poder definir o evento da pgina que invocar a requisio Ajax e que reas da pgina devero ser sincronizadas com a rvore de componentes JSF depois que a requisio Ajax retornar os dados do servidor. A Figura 1 ilustra esse fluxo.

Tags de referncia
Dentro da taglib do Richfaces, podemos destacar algumas tags que so essenciais para se ter uma pgina realmente dinmica e atraente. Essas tags sero usadas em 95% de nossas pginas Ajax.
Dica: A grande maioria das tags Richfaces possuem os mesmo atributos e eventos para serem utilizado, os mais comuns so (reRender, oncomplete, eventsQueue, status, dentre outros..). Busque conhecer o funcionamento desses atributos comuns para facilitar us-los no futuro.

Vejamos abaixo a tabela com as principais tags: <a4j:form /> Principais TAGS Richfaces Cria um form HTML para enviar e receber as requisies de forma assncrona. Abaixo os principais atributos da tag.

2/12 <String> uma boa prtica sempre atribuir um id para os componentes JSF/Richfaces ajaxSubmit <true/false> Habilita ou no a submisso do form em Ajax. O normal para uma pgina dinmica manter esse atributo habilitado true. reRender <String> Esse atributo est presente em 90% dos componentes Richfaces. Ele usado para que aps o retorno de uma requisio Ajax, o componente de id informado nesse campo seja re-renderizado e seus valores atualizados. oncomplete <String> Uma funo JS que ser chamada quando o requisio Ajax for finalizada. Nesse mtodo voc recebe como parmetro uma varivel que contem a resposta da requisio, de onde possvel obter o cdigo de retorno da requisio, informando se a requisio foi feita com sucesso ou ouve falhar no processo. Essa tag gera um boto html que pode disparar eventos AJAX e realizar tarefas direto no servidor. <String> Informa qual o mtodo do BackingBean ser chamado para executar a ao, ou ainda pode ser informado uma string mapeada no facesconfig.xml. eventsQueue <String> Cria uma fila de requisies assncronas. Evita que sejam realizadas vrias requisies ao mesmo tempo e consequentemente sobrecarregue o servidor. Esse atributo exige um nome de um componente do tipo <a4j:queue /> status <String> Atualiza o status da requisio Ajax sempre que houver mudana de forma dinmica. Exemplo: (Carregando, Finalizado). Com esse componente podemos colocar uma imagem animada para informar ao usurio que uma requisio est em andamento na pgina. image <String> O caminho da imagem. Mesmo estilo de uma imagem html normal. Esse componente muito simples porm d um ar diferente na pgina. Informando ao usurio que est sendo realizada requisies Ajax, o usurio tem a sensao de carregamento rpido e sabe quando suas requisies foram finalizadas. <String> Texto que ser exibido ao se iniciar uma requisio. Exemplo: Carregando... stopText <String> Texto que ser exibido na finalizao da requisio. Exemplo: Sucesso... Simula a criao de uma funo JavaScript. Umas das tags mais legais do Richfaces, pois uma funo JS que executa Ajax, e pode ser invocada por outras funes JavaScript dentro da pgina. startText action id

<a4j:commandButton />

<a4j:status />

<a4j:jsfFunction />

3/12 name <String> O atributo name dessa tag usado como o nome da funo js a ser chamada. Se o name for calculaJuros a funo ser chamada calculaJuros(); <String> A mesma idia de action do commandButton. Pode realizar a chamada a um mtodo do bean. <true/false> Essa tag possibilita a limitao do processamento da rvore de componentes JSF (decoding, conversasion/validation, value applying) apenas ao componente que est enviando a requisio.

action ajaxSingle

Figura 1. Fluxo de requisio do Richfaces para eventos disparados pelo cliente

4/12

Principais Recursos do Richfaces

Os recursos do Richfaces vm evoluindo desde a sua primeira verso, e agora est em um alto nvel de soluo tcnica, facilidade de utilizao e interface WEB2.0. Isso d a nossas aplicaes uma caracterstica extremamente profissional por mais simples que ela seja. Vamos aprender como utilizar os principais componentes, que tornam nossa aplicao bonita e leve 100% Ajax. Vamos criar um drop-down menu e conhecer a utilizao dos menus Richfaces. Veja na Listagem 1, o cdigo que gera um menu horizontal que desliza para baixo com o passar do mouse. Perceba tambm que existe na Listagem 1 um <a4j:form />, pois ele necessrio para que o menu funcione corretamente. Ao clicar no menu, voc ser direcionado para a pgina que est sendo mapeada pelo atributo action da tag <rich:menuItem />. Voc precisa mapear todas as Strings (actions) no arquivo facesconfig.xml para ir a uma pgina vlida. Veja a Listagem 2 um exemplo de mapeamento para o menu onde a tag from-view-id diz que a requisio pode ser de qualquer parte da aplicao e dependendo da string que receba, direcionar a aplicao para a pgina referente. possvel personalizar as imagens do menu, atravs do atributo icon, qualquer cone pode ser inserido no menu. Veja um exemplo do menu criado na Figura 2. O menu Richfaces tambm aceita receber dados direto do bean, sendo montado de forma dinmica, para isso, basta fazer um binding com o componente <rich:toolBar /> com toda a estrutura e o mesmo ser montado na sua pgina JSF.
Dica: A grande maioria dos componentes Richfaces exigem um form (h:form ou a4j:form) para a correta execuo.

Listagem 1. Criao de um menu Drop-Down com Richfaces

<a4j:form ajaxSubmit="true" id="menuForm"> <rich:toolBar> <rich:dropDownMenu> <f:facet name="label"> <h:panelGroup> <h:graphicImage value="../imagens/copy.gif" /> <h:outputText value="Cadastro"/> </h:panelGroup> </f:facet> <rich:menuItem submitMode="ajax" value="Produtos" action="cadastroProduto" icon="../imagens/open.gif" /> <rich:menuItem submitMode="ajax" value="Fornecedores" action="cadastroFornecedor" icon="../imagens/open.gif" /> </rich:dropDownMenu> </rich:toolBar> </a4j:form>
Listagem 2. Exemplo de mapeamento do faces-config.xml para o menu

<navigation-rule> <from-view-id>/*</from-view-id> <navigation-case> <from-outcome>cadastroProduto</from-outcome> <to-view-id>/pages/produtos.xhtml</to-view-id> <redirect /> </navigation-case> <navigation-case> <from-outcome>registrarVenda</from-outcome> <to-view-id>/pages/vendas.xhtml</to-view-id>

5/12
<redirect /> </navigation-case> </navigation-rule>

Figura 2. Menu Drop-Down do Richfaces

Outro componente que utilizaremos nas nossas aplicaes JSF o <rich:dataTable />. Uma tabela Ajax completa de recursos para executar inmeras funes, como por exemplo, ordenao de colunas, filtragem de dados ao digitar, carregamento dinmico com scroll, paginao e vrios outros recursos, tudo isso sem nenhum refresh de pgina. A Listagem 3 mostra um exemplo de cdigo da <rich:dataTable /> com paginao e ordenao de dados em algumas colunas. Podemos ver a tabela na Figura 3.
Listagem 3. Criao de uma tabela dinmica com paginao e ordenao dinmica

<rich:dataTable id="listagemProdutos" value="#{produtosBean.produtos}" var="row" styleClass="tabelaDados" rows="10" onRowMouseOut="this.className='tabelaDadosLinha1'" onRowMouseOver="this.className='tabelaDadosLinhaHover'; this.style.cursor='pointer'"> <rich:column sortBy="#{row.nome}"> <f:facet name="header">Nome</f:facet> <h:outputText value="#{row.nome}" /> </rich:column> <rich:column sortBy="#{row.descricao}"> <f:facet name="header">Descricao</f:facet> <h:outputText value="#{row.descricao}" /> </rich:column> <rich:column sortBy="#{row.quantidade}"> <f:facet name="header">Quantidade</f:facet> <h:outputText value="#{row.quantidade}" /> </rich:column> <rich:column> <f:facet name="header">Valor de Compra</f:facet> <h:outputText value="#{row.valorCompra}"><f:convertNumber pattern="###,###,###.00" /> </h:outputText> </rich:column> <rich:column> <f:facet name="header">Data da Compra</f:facet> <h:outputText value="#{row.dataCompra}"><f:convertDateTime pattern="dd/MM/yyyy" /> </h:outputText> </rich:column> <f:facet name="footer"> <rich:datascroller id="ds"></rich:datascroller> </f:facet> </rich:dataTable>

6/12

Figura 3. Tabela do Richfaces com ordenao de campos e paginao

Um terceiro exemplo que gostaria de demonstrar o uso das abas. Abas so muito utilizadas nas aplicaes hoje e comum ter abas para separar formulrios e etc. Veja na Listagem 4 o cdigo que gerar as abas. possvel ainda ter o carregamento das abas completamente no cliente, modificando para isso apenas o atributo switchType=client. Veja um exemplo das abas na Figura 4.
Listagem 4. Criao das abas que so carregadas por Ajax

<rich:tabPanel switchType="ajax"> <rich:tab label="Parte 1"> Primeira aba com carregamento Ajax </rich:tab> <rich:tab label="Parte 2"> Segunda aba com carregamento Ajax </rich:tab> <rich:tab label="Parte 3"> Terceira aba com carregamento Ajax </rich:tab> </rich:tabPanel>

Figura 4. Abas que so carregadas de forma dinmica com Ajax

O componente que chama bastante ateno quando utilizado em nossas aplicaes o ModalPanel. Ter a possibilidade de simular uma tela modal (conceito desktop) em uma aplicao web traz um mar de possibilidades aos sistemas. A dificuldade de criar tal estrutura a mesma que tivemos nos componentes anteriores, como mostra a Listagem 5.
Dica: Voc pode aninhar inmeros ModalPanel.Essa funcionalidade interessante quando temos telas de confirmao de dados dentre outros. Mas cuidado para sua aplicao no abusar do uso de modals, chega um momento em que o usurio no suporta mais telas saltando o monitor.

Voc pode ver um exemplo do ModalPanel em funcionamento na Figura 5.

Listagem 5. Montagem de um ModalPanel com seus controles

<rich:modalPanel id="modalForm" shadowOpacity="true" resizeable="true" width="500" height="500" showWhenRendered="#{produtosBean.showModal}"> <f:facet name="header">

7/12
<h:outputText value="#{msgs['produtoForm.titulo']}" /> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage value="${basePath}imagens/fechar.jpg" style="cursor:pointer" id="hidelink2" onclick="cancelModal();" /> <rich:componentControl for="modalForm" attachTo="hidelink2" operation="hide" event="onclick" /> </h:panelGroup> </f:facet> <h:form id="produtosForm"> <a4j:jsFunction name="cancelModal" action="#{produtosBean.cancelarModal}" immediate="true" ajaxSingle="true" reRender="modalForm" /> <rich:messages showSummary="true" styleClass="validationError" ></rich:messages> <table><tr> <td class="label">#{msgs['produto.nome']}:</td> <td><h:inputText value="#{produtosBean.produto.nome}" id="nomeProduto" required="true" label="#{msgs['produto.nome']}" /></td> </tr> <tr> <td class="label">#{msgs['produto.descricao']}:</td> <td> <h:inputTextarea value="#{produtosBean.produto.descricao}" id="descricao" required="true" label="#{msgs['produto.descricao']}" /></td> </tr> <!-- Podem sem incluidos mais campos --> </table> </h:form> </rich:modalPanel>

8/12

Figura 5. Um ModalPanel construdo em Ajax

E finalizando a demonstrao de componentes, quero mostrar um componente que a forma de utilizao um pouco distinta dos demais por ser mais complexo, mas os resultados obtidos com ele so fantsticos, o AjaxUpload. Um ponto relevante a dizer, a necessidade de inserir o atributo enctype="multipart/formdata" no form do AjaxUpload, informando dessa forma que esse form envia dados binrios e no apenas string na requisio. Veja na listagem Listagem 6 como se declara o AjaxUpload na JSP e a Listagem 7 o backing bean relacionado a JSP. A Listagem 8, mostra a configurao que se faz necessrio no web.xml para que o AjaxUpload funcione corretamente, perceba que so valores de inicializao para o filtro do Ajax4Jsf. E a Figura 6 a tela quando o upload est ocorrendo e logo depois a listagem do arquivo.
Listagem 6. Criao do componente AjaxUpload na JSP

<h:form enctype="multipart/form-data"> <rich:fileUpload fileUploadListener="#{fileUploadBean.uploadListener}" maxFilesQuantity="5" id="upload" immediateUpload="false" allowFlash="false"></rich:fileUpload> </h:form>

Listagem 7. Criao das abas que so carregadas por Ajax

public class FileUploadBean { public void listener(UploadEvent event) throws Exception{ UploadItem item = event.getUploadItem(); ByteArrayOutputStream b = new ByteArrayOutputStream(); b.write(item.getData()); File file = new File("D://" + item.getFileName()); b.writeTo(new FileOutputStream(file)); }

9/12
}
Listagem 8. Configurao adicional para funcionamento do AjaxUpload

<filter> <display-name>Ajax4jsf Filter</display-name> <filter-name>ajax4jsf</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> <init-param> <param-name>createTempFiles</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>maxRequestSize</param-name> <param-value>10000000</param-value> <!-- O valor acima em Kb, define o tamanho mximo do upload --> </init-param> <init-param> <param-name>forceparser</param-name> <param-value>false</param-value> </init-param> </filter>

Figura 6. Um ModalPanel construdo em Ajax

Richfaces na prtica
Vamos ento demonstrar na prtica os recursos do Richfaces em um pequeno projeto com dois casos de uso simples. O sistema ser um controle de vendas para um loja. Os casos de uso esto definidos como, Cadastrar Produto, seria a simulao de um CRUD Ajax, e Registrar Venda, que um caso de uso de controle do sistema. Segue abaixo uma especificao simples de cada caso de uso.
Detalhamento do Caso de Uso Manter Produto

O caso de uso ter os seguintes campos de tela: Nome (50) Descrio (1000) Fornecedor (10) Nome do produto a ser cadastrado. Campo texto. Descrio do produto, como especificaes tcnicas, o que o produto possui, quais as vantagens e limitaes que o mesmo oferece, etc. Campo texto. Aquele que fornece o produto. Existe uma tabela com vrios fornecedores j cadastrados. Esse campo um combo-box de

10/12 Fornecedores. A quantidade pedida ao fornecedor. Campo numrico que aceita apenas caracteres numricos. Valor de custo pago pelo produto. Campo decimal que aceita apenas caracteres numricos. Data em que a compra foi realizada. Se o fornecedor for enviar pelos correios, a data da compra poder ser diferente da data de recebimento. Campo do tipo Date ou Timestamp. Valor de venda do item. Campos decimal que aceita apenas caracteres numricos. A data de recebimento diminudo da data de compra, calcula o tempo que o item demorou a chegar. Campo do tipo Date ou Timestamp.

Quantidade (6) Valor de Compra (12,2) Data da Compra (10) Valor de Venda (12,2) Data de Recebimento (10)

A idia do caso de uso manter a entidade Produto. Inserindo, alterando, excluindo e consultado produtos para serem usados e controlados pelo sistema. Quando o usurio entra na tela ele tem uma lista de produtos j cadastrados onde poder efetuar buscas para a listagem dos itens. Ao selecionar um item, ser aberto em uma modal panel os dados do produto selecionado para serem alterados se for o caso. Aps inserir, alterar ou excluir, o sistema executa a operao e mostra o resultado na tela e re-lista os produtos que aparecem listados. Veja no projeto para download o cdigo completo da pgina produtos.xhtml que realiza toda a operao de CRUD. importante notar que aqui mostrada a integrao entre os diversos componentes j descritos acima e outros novos. Temos o RichModalPanel sendo utilizado para realizar as operaes com os dados do produto e podemos controlar o modal panel a partir do Bean.
Detalhamento do Caso de Uso Registrar Venda

O caso de uso ter os seguintes campos de tela como somente leitura, carregados do caso de uso de produtos: Nome Descrio Valor de Venda Campos novos editveis para o usurio: Nome do Comprador (50) Data/Hora da Venda (20) Nome do cliente que comprou o produto atual. Campo texto. Campo carregado automaticamente pelo sistema com a data e hora atual do sistema, porm caso o usurio deseje, pode alterar esses dados. Campo Timestamp. Caso o usurio venda por um valor maior ou menor que o registrado no sistema inicialmente. Campo decimal. Registra se a venda para entrega ou no. Caso seja para entrega, carregar as informaes do formulrio de entrega que se encontra abaixo. Campo booleano. Somente leitura Somente leitura Somente leitura

Valor Real de Venda (12,2) Para entrega? (1)

Formulrio de entrega:

11/12

Logradouro (100) Nmero (6) Complemento (50) Bairro (25) Cidade (25) Estado (2)

Rua, avenida, etc, onde ser realizada a entrega. Campo texto. O nmero da residncia no determinado logradouro. Campo inteiro. Complemento do endereo Campo texto. Bairro para entrega. Campo texto. Cidade para entrega. Campo texto. Estado para entrega. Deve ser uma lista de estados para o usurio selecionar o que desejar. Campo texto de 2 caracteres apenas.

A idia do registro de vendas que exista uma listagem de produtos previamente cadastrados e que no foram vendidos ainda. Quando o usurio seleciona um desses produtos, ento exibida a ele a tela de registrar venda com os campos acima. Aps registrar uma venda, caso o produto ainda possua itens disponveis, possvel registrar mais vendas para ele, at que o nmero de vendas seja igual a quantidade de produtos que a loja possui. Veja no projeto para download o cdigo da pgina de vendas vendas.xhtml. Perceba a utilizao do componente a4j:outputPanel que serve como um painel de sada que pode ficar escutando quando requisies Ajax acontecerem e ento se auto atualizar, isso se d pelo atributo ajaxRendered=true, por padro o componente utiliza false. No nosso projeto, ele foi utilizado para que quando usurio clicar no boto entrega?, o sistema automaticamente abrir as opes para digitar os dados de entrega.
Sugestes de implementao

Aps a implementao do sistema, voc pode tentar implementar alguns outros casos de uso para treinar suas habilidades no framework. Manter estoque: Uma tabela de estoque que fosse alimentada pelo registro de produtos e removido pela venda de produtos. Relatrio de Vendas: Quando falamos em relatrio, no estamos nos referindo a um arquivo pdf, ento um relatrio pode ser uma pgina com alguns filtros para consulta e mostrando os dados resultantes da consulta em uma tabela de dados. Cadastro de Clientes: Registrar os clientes que compram na loja, e assim reaproveitar dados sem precisar pegar tudo novamente com o cliente cada vez que ele efetuar uma compra na loja. Essas so minhas dicas, mas no se limite a elas, procure novos recursos para incorporar o sistema, e caso voc no queira implementar todas as opes, faa uma, comece pela que considerar mais simples ou mais interessante, assim voc poder ir evoluindo gradualmente no framework.

Concluses
Podemos ver durante o desenvolver do artigo as facilidades do Richfaces e quantidade de recursos que temos a disposio quando utilizamos uma biblioteca de tags to poderosa. Como fizemos em algumas partes do sistema de exemplo, nossa lojinha, possvel ver tambm que a combinao das tags Richfaces trs resultados excelentes e nos do imensa flexibilidade para trabalhar nos sistemas. Sempre que possvel utilize esses recursos exaustivamente, com o objetivo de manter uma interface limpa e navegvel para o usurio. Um ponto extremamente importante a observar saber quais dados voc est enviando ao BackingBean. Em alguns projetos, foi possvel observar que o desenvolvedor estava enviando a pgina inteira para requisio Ajax, quando somente necessitava de um ou dois campos. Isso mata o desempenho que seria possvel obter com requisies Ajax, independente de framework utilizado. A

12/12 idia realmente enviar pequenos pedaos de pgina que sejam necessrios ao servidor e receber de volta apenas o que tenha sido modificado. Dessa forma o desempenho Ajax poder obter seu pice. Foi possvel ento desenvolvermos um pequeno projeto com vrias recursos que facilitam a vida do usurio sem a necessidade de uma nica linha em JavaScript em todo nosso cdigo. Espero que voc utilize sem moderao o que foi passado aqui e que esse artigo lhe traga boas experincias e um esclarecimento maior sobre o assunto.

Agradecimento
Agradeo ao meu amigo Rafael Alves (dobau) que disps do seu tempo e fim de semana para juntos implementarmos o projeto pilo do artigo.

Links
http://livedemo.exadel.com/richfaces-demo/index.jsp Demonstrao on-line de todos os componentes Richfaces sendo utilizados. http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/index.html Guia do desenvolvedor que revela recursos especiais e customizao. Sugiro que seja dada uma olhada para se ter idia do funcionamento geral das tags. simples e est bem estruturado. http://pt.wikipedia.org/wiki/Web_2.0 Histrico da WEB2.0, quando surgiu e o seu conceito.

Paulo Alves Jnior (paulojribp@gmail.com) desenvolvedor web a mais de 5 anos e trabalha com JavaEE a 3 deles. Trabalha atualmente no Instituto Atlntico (www.atlantico.com.br) como Analista de Sistemas e concludente do curso de Sistemas de Informao na Faculdade 7 de Setembro onde j ministrou treinamento de JSF. Possui certificao de Programador Java - SCJP.