Biblioteca de Componentes para

Desenvolvimento de Interfaces Ricas em JSF.

Prof. Esp. Fernando Freitas

nando@fimes.edu.br
blog.fimes.edu.br/fernando
Introdução
Embora seja possível desenvolver uma aplicação completa somente
com as bibliotecas básicas do JSF, o uso de componentes prontos,
além de facilitar este trabalho permite um ganho em tempo de
produção e de qualidade visual.

Por esse motivo, vários grupos e/ou empresas trabalham no

desenvolvimento destes componentes, o que gera uma grande gama
destes componentes pelo mundo. Entre os mais conhecidos estão:
Richfaces
Ice Faces
MyFaces
Primefaces

Conheceremos um pouco mais sobre o Primefaces

 Primeiramente, por que o Primefaces?
 A escolha pelo PrimeFaces como a biblioteca de componentes a
ser utilizada não foi por acaso.

 Segundo o Google Trends, desde que foi lançado em 2009, o

Primefaces não para de crescer, enquanto seus principais
concorrentes mais velhos vem perdendo espaço a cada dia.

Fonte: http://www.google.com/trends/explore#q=PrimeFaces,RichFaces,IceFaces,MyFaces
Primeiramente, por que o PrimeFaces?
 Além disso, de acordo com o DevRates.com, o PrimeFaces é
um dos líderes da categoria Framework Web favorito dos
desenvolvedores para criar interfaces ricas com Java, com
média 8,8.

Fonte: http://devrates.com/stats/top?tagName=web+framework
Primeiramente, por que o PrimeFaces?
 Para encerrar, de acordo com o resultado dos testes
realizados no site Patternizando.com.br, o
PrimeFaces:
 Tem a resposta mais veloz para uma requisição
 Possui um tamanho de página menor que os demais.
 É capaz de suportar 3 vezes mais usuários que o Ice Faces.

 O resultado completo do teste pode ser acessado

em:
http://www.patternizando.com.br/2011/04/jsf-2-0-comp
aracao-de-desempenho-icefaces-primefaces-e-richfac
es/
Mas afinal, o que é PrimeFaces?
 O PrimeFaces é um framework open source desenvolvido e
mantido pela PrimeTek Informatics. Criado em 2009, ele
oferece uma gama de componentes ricos para o JSF. Seus
componentes foram construídos com suporte nativo ao
AJAX, ou seja, não é necessário nenhum esforço extra por
parte do desenvolvedor para realização de chamadas
assíncronas ao servidor.
Características
+ de 100 componentes Open Source para JSF
2.0.
Rico conjunto de componentes (HtmlEditor,
Diálogo, AutoComplete, gráficos e muito mais).
Suporte nativo a Ajax e baseado em JQuery.
Leve, com um único arquivo jar, que não possui
dependências e é de fácil configuração.
Kit UI para desenvolvimento de aplicações web
móveis para dispositivos como IOS, Android,
Windows Mobile, etc.
Características
Mais de 30 temas pré-definidos, oferecendo a
possibilidade de criação de temas.
Existe duas opções de download. Uma é para
usuários que auxiliam no desenvolvimento da
biblioteca, e a outra é para a comunidade em
geral. Atualmente a versão disponível para a
comunidade é a 5.3 e pode ser baixado no site
oficial do primefaces http://www.primefaces.org.
Documentação extensa e de fácil acesso inclusive
com demonstração dos componentes disponíveis
no site http://www.primefaces.org/showcase.
Ajax no Primefaces
Devido ao suporte nativo ao ajax, para que uma página
seja atualizada parcialmente, basta especificar o
componente que se deseja atualizar através do atributo
update presente em várias tags do primefaces.
Para especificar um componente a ser atualizado podemos
usar as seguintes formas:
Único componente. Exemplo: update=“form1:nome”
Múltiplos componentes. Exemplo: update=“form1, form2”
Usando palavras chaves. Exemplo: update=“@form”. Ainda
existem as opções: @this, @all, @none, @namingcontainer,
@parente, @composite, @child(n), @row(n), @previous,
@next, @widgetVar(name).
Ajax no Primefaces
Configuração
 Para utilizar o PrimeFaces, tudo o que precisa ser feito é obter o
jar do PrimeFaces, no endereço:
http://primefaces.org/downloads.html
 Em seguida, adicionar o jar ao classpath da aplicação:

 E por fim, importar o namespace para a página onde os

componentes serão utilizados:
Alguns componentes...

Fonte: http://primefaces.org/images/tab-components.jpg
 Temas
Utilize um dos temas
disponíveis em
http://primefaces.org/themes.ht
ml
ou crie um tema personalizado
em
http://jqueryui.com/themeroller
conforme desejado.
Exemplo
 Crie um novo Dinamic Web Project, conforme os
exemplos anteriores.
 Em seguida, copie o arquivo jar do PrimeFaces para
dentro de Web Content > WEB-INF > lib.
 Exemplo
 Crie um novo HTML File, conforme os exemplos anteriores com o nome index.xhtml
Exemplo
 Crie uma nova classe java
dentro do pacote bean
como o nome
ExemploBean.java
Referências
 VARAKSIN, Oleg; ÇALISKAN, Mert. PrimeFaces Cookbook.
Packt Publishing. 2013

 http://www.primefaces.org

 http://primefaces.org/images/tab-components.jpg

 http://brunovasconcelos.files.wordpress.com/2012/06/prime-face
s.pdf