1/12
Conhecendo o RichfacesO Framework Ajax para JSFRichfaces 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 frameworkO 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 refernciaDentro 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: Principais TAGS
Richfaces Cria um form HTML para enviar e receber as requisies de
forma assncrona. Abaixo os principais atributos da tag.
2/12 uma boa prtica sempre atribuir um id para os componentes
JSF/Richfaces ajaxSubmit Habilita ou no a submisso do form em Ajax.
O normal para uma pgina dinmica manter esse atributo habilitado
true. reRender 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 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. Informa qual o mtodo do BackingBean ser chamado
para executar a ao, ou ainda pode ser informado uma string mapeada
no facesconfig.xml. eventsQueue 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 status 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 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. Texto que ser exibido ao
se iniciar uma requisio. Exemplo: Carregando... stopText 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
3/12 name 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(); A mesma idia de action do commandButton. Pode
realizar a chamada a um mtodo do bean. 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 RichfacesOs 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 , 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 . 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 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
Listagem 2. Exemplo de mapeamento do faces-config.xml para o
menu
/* cadastroProduto /pages/produtos.xhtml registrarVenda
/pages/vendas.xhtml
5/12
Figura 2. Menu Drop-Down do Richfaces
Outro componente que utilizaremos nas nossas aplicaes JSF o .
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 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
Nome Descricao Quantidade Valor de Compra Data da Compra
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
Primeira aba com carregamento Ajax Segunda aba com carregamento
Ajax Terceira aba com carregamento Ajax
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
7/12 #{msgs['produto.nome']}: #{msgs['produto.descricao']}:
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
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
Ajax4jsf Filter ajax4jsf org.ajax4jsf.Filter createTempFiles
false maxRequestSize 10000000 forceparser false
Figura 6. Um ModalPanel construdo em Ajax
Richfaces na prticaVamos 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.
ConclusesPodemos 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.
AgradecimentoAgradeo ao meu amigo Rafael Alves (dobau) que disps
do seu tempo e fim de semana para juntos implementarmos o projeto
pilo do artigo.
Linkshttp://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 ([email protected]) 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.