USO DE PRIMEFACES NO DESENVOLVIMENTO DE APLICAOES

RICAS PARA WEB

1

Cleverson Leocir Ross1, Beatriz Terezinha Borsoi1

Grupo de Estudos e Pesquisa em Tecnologias de Informao e Comunicao
Cmpus Pato Branco
1
Universidade Tecnolgica Federal do Paran - UTFPR
Via do Conhecimento Km 01. CEP 85503-390 - Pato Branco-PR

primeiro.autor@dainf.ct.utfpr.edu.br, {segundo.autor, terceiro.autor}@utfpr.edu.br

Resumo - Aplicaes web, denominadas Rich Internet Applications (RIA), em que ricas est relacionado aos
recursos e s funcionalidades de interao com o usurio, permitem vincular a interatividade de uma aplicao
desktop com as facilidades proporcionadas pela Internet. Considerando que a nfase dessas aplicaes est na
sua interface, so vrias as tecnologias que esto surgindo visando facilitar o trabalho dos desenvolvedores.
Dentre essas tecnologias esto JavaServer Faces e Adobe Flex e bibliotecas como a PrimeFaces, para citar
algumas. Com o objetivo de exemplificar o desenvolvimento de uma RIA utilizando PrimeFaces foi
implementado um sistema para gerenciamento de transportadoras.
Palavras-chave: PrimeFaces; Rich Internet Application. Java para web.
Abstract In Rich Internet Applications (RIA), rich is related to the resources of the interface and user
interactions. These resources refer to the interactivity of desktop application with facilities of the Internet.
Considering that RIA emphasizes the interface there are many new technologies to facilitate the development of
them. Among these technologies are JavaServer Faces, Adobe Flex and libraries, such as PrimeFaces. Aiming to
instance the development of RIAs using PrimeFaces, this paper presents the development of an RIA using the
framework or library PrimeFaces. The system is to manager carriers.
Keywords: PrimeFaces; Rich Internet Application. Java web.

INTRODUO
A interface de um sistema, seja grfica ou no, pode ser entendida como a estrutura
que transmite ao usurio a ideia real do que possvel realizar com aquele determinado
aplicativo computacional. Uma forma de implementar uma interface grfica para web que
possam ser denominada como interface rica por meio do uso do framework PrimeFaces.
Esse framework de cdigo fonte aberto, utilizado para auxiliar no desenvolvimento de
pginas web que utilizem a tecnologia JSF (JavaServer Faces).
Os aplicativos computacionais baseados em navegadores web e servidor, denominados
Browser/Server por Tang e Wang [1], so restringidos pelas limitaes desses navegadores e
da prpria HTML (Hipertext Markup Language). Como so aplicativos baseados em
hipertexto, fazem com que o usurio navegue pela informao por meio de pginas que
precisam ser atualizadas a cada submisso de dados. Esse processo pode ocasionar demora no
carregamento das pginas pelo aumentando do trfego na rede.
As aplicaes web tradicionais, assim denominadas as baseadas em HTML, enfrentam
problemas relacionados ao processamento de eventos. Aplicaes complexas podem requerer

vrias pginas para completar o processamento de um evento e diversos acessos ao servidor

podem ser necessrios para atualizar os dados das pginas. O modelo proposto pelas
aplicaes Internet ricas visa atender essa necessidade de otimizar a transmisso de dados pela
rede ou entre cliente e servidor [1].
As Rich Internet Applications (RIA) so aplicaes web que oferecem caractersticas e
capacidades similares s disponveis em aplicaes desktop, como, por exemplo, robustez,
adaptao dinmica de acordo com o perfil do usurio e recursos multimdia [2]. Linaje,
Preciado e Snchez-Figueroa [3] complementam que as RIAs combinam os benefcios do
modelo de distribuio web com multimdia altamente interativa disponvel nas atuais
aplicaes desktop. Tan e Wang [1] caracterizam as RIAs como aplicaes que so de uso
mais intuitivo e provem uma melhor experincia de uso. Isso ocorre devido aos recursos de
interface que elas possuem.
Pelas suas caractersticas, as RIAs definem uma nova gerao de aplicaes web que
exploram tecnologias web especficas para superar as limitaes de usabilidade das aplicaes
web tradicionais e oferecer maior interatividade, capacidade de resposta e dinamicidade aos
seus usurios [4]. A partir desse ponto de vista, as RIAs podem ser consideradas similares s
aplicaes desktop, mas com a vantagem de serem acessveis pela Internet.
As caractersticas de interface e de recursos de interao tornam os aplicativos
baseados na Internet mais fceis de usar e mais funcionais; alm de superar problemas com
aplicaes web tradicionais, como baixo desempenho e interatividade com o usurio limitada
[5]. Essa limitao decorre de as aplicaes web baseadas em HTML e HTTP (Hypertext
Transfer Protocol) serem constitudas basicamente de textos vinculados (hipertexto) e links
entre pginas.
As aplicaes RIA geralmente possuem clientes que realizam atividades relacionadas
interface, enquanto o servidor de aplicao processa e armazena dados e simplifica as
atualizaes de dados enviados para o cliente [5]. Essa simplificao ocorre porque apenas
partes da interface que sofrem alteraes so atualizadas. Isso tambm reduz o trfego de
dados entre cliente e servidor, resultando em desempenho melhor da aplicao.
Uma RIA tipicamente, embora no sempre, executa em um navegador web e no
requer a instalao da aplicao no cliente. Por segurana, a maioria das RIAs executa os seus
elementos cliente em uma sandbox [5], como ocorre com a mquina virtual Java, por
exemplo. Mesmo que no seja necessrio instalar a aplicao no cliente, como geralmente
ocorre com uma aplicao web, pode ser necessrio instalar uma mquina virtual (como a
Flash Player para RIAs desenvolvidas em Flex) ou outro aplicativo.
Para Tan e Wang (2010) as RIAs combinam vantagens da arquitetura Cliente/Servidor
e da arquitetura de aplicaes web que eles denominam Browser/Server. Essa combinao
visa facilitar a interao do cliente com a aplicao e de benefcios tcnicos, como reduo de
trfego de rede e de processamento.
Uma das tecnologias utilizadas para implementar uma RIA o PrimeFaces que uma
sute de componentes de cdigo fonte aberto para Java Server Faces 2.0 com um conjunto de
mais de cem componentes JSF para o desenvolvimento de interfaces ricas. PrimeFaces possui,
ainda, um mdulo adicional, o PrimeFaces Mobile, que um conjunto de componentes de
interface com o usurio para desenvolvimento de aplicaes web para dispositivos mveis.
Dentre as caractersticas de PrimeFaces, destacam-se [6]: um conjunto de componentes de
interface grfica com o usurio denominados ricos pela caracterizao de RIAs, como, por
exemplo, DataTable, AutoComplete, HtmlEditor e Charts (grficos); a construo de Ajax
baseado no padro JSF 2.0 Ajax APIs (Application Programming Interface); e Skinning
Framework com mais de 25 temas.
Como forma de facilitar o controle da frota de uma transportadora e para exemplificar
o desenvolvimento de uma RIA utilizando JSF e o framework PrimeFaces, este trabalho

expe o desenvolvimento de uma aplicativo web que utiliza essas tecnologias e se destina a
uma transportadora.
Este texto est organizado em sees, das quais est a primeira e apresenta o contexto
de trabalho desenvolvido. Na Seo 2 est o referencial terico. A Seo 3 apresenta os
materiais e o mtodo utilizados. Na Seo 4, o sistema desenvolvido apresentado visando
mostrar o uso da tecnologia PrimeFaces. Por fim, esto as consideraes finais e as
referncias bibliogrficas.
METODOLOGIA
As ferramentas e as tecnologias utilizadas para as atividades de modelagem,
implementao e execuo do sistema foram: Astah Community para modelagem do sistema;
Eclipse 6.9.1 para a IDE (Integrated Development Environment) de desenvolvimento; Java
como linguagem de programao; PrimeFaces como biblioteca de componentes para a
interface; EJB 3.1 (Enterprise Java Beans) como uma camada entre o ManagedBean e o
DAO (Data Access Objetct); Visual Architect para a modelagem do banco de dados;
PostgreSQL 8.4 para banco de dados; Hibernate para o mapeamento entre os objetos da
aplicao (classes java) e as tabelas do banco de dados PostgreSQL, que relacional; JBoss 7
como servidor web para a aplicao; e Maven para gerenciamento do projeto.
No mtodo utilizado para o desenvolvimento do sistema so consideradas as trs fases
- anlise, projeto e implementao - propostas por Rumbaugh [7].
RESULTADOS E DISCUSSO
Para ter acesso ao sistema, o usurio dever informar seu login e a respectiva senha.
Na parte superior da tela principal do sistema est a opo de Logout para finalizar a
execuo do aplicativo e apresentado o nome do usurio que est acessando o sistema. No
topo da tela esto, tambm, os menus de acesso s funes do sistema. Ao ser acessada a
opo de cadastro de veculos aberta a tela (Figura 1) com a listagem dos veculos.

Figura 1. Tela de listagem de veculos cadastrados

Cada linha da tabela (Figura 1) representa um veculo cadastrado com informaes
como: descrio, placa, ano e modelo. No final de cada linha esto disponveis dois botes:
para abrir ou exportar para o computador do usurio os dados visveis na tabela e para abrir
ou exportar todos os veculos que esto cadastros no sistema e no somente os visveis.
Ao ser clicado na linha de cabealho, os dados listados so ordenados crescente ou
decrescentemente. Cliques sucessivos na mesma coluna alternam entre essas duas
possibilidades de ordenao. Para que a imagem armazenada do veculo caiba na linha da
tabela sem alterar o seu tamanho, a mesma apresenta em um tamanho muito reduzido, como
mostra a regio circulada da Figura 2.

Figura 2. Tela de listagem de veculo (imagem do veculo)

Para que o usurio possa visualizar melhor a imagem foi implementada uma forma de
ampliao. Para ampliar a imagem basta um clique sobre a mesma nessa listagem. Ainda
nessa mesma tela est a opo de paginao. Essa funo permite a navegao pelas pginas
de cadastro. O usurio define a quantidade de itens a serem apresentados na tela, por exemplo,
cinco, dez ou quinze. Tambm apresentado o total de veculos cadastrados no sistema.
O cadastro de veculos contm informaes obrigatrias como os campos descrio,
placa, chassi, combustvel, marca, valor da compra, motorista, transportador, equipamento e o
renavam. Ao ser deixado qualquer um desses campos em branco mostrado um alerta na tela
e a insero no ser concluda, conforme apresenta a regio circulada da Figura 3.

Figura 3. Tela de cadastro de veculo

No cadastro de veculo possvel salvar, limpar campos preenchidos e cancelar. Essa
opo fechar a tela de cadastro. Na tela apresentada na Figura 3, ao lado de cada combobox
est um boto. Esse boto abre a tela com o formulrio de cadastro do referido item.
A seguir so apresentados cdigos para exemplificar a implementao de uma RIA
utilizando Java e o framework PrimeFaces, que um sistema para o gerenciamento de frotas
de veculos, cujos exemplos da interface foram apresentados nas Figuras 1 a 3.
Na Listagem 1 est um trecho de cdigo da tela de cadastro de veculo. Esse cdigo
responsvel por fazer a ordenao dos dados na listagem de veculos quando o usurio clicar
sobre o nome da coluna. Esse cdigo permite a ordenao dos dados pelo cdigo de veculo
em ordem crescente ou decrescente.
<p:column id="clnCodVeiculo" sortBy="#{item.codigoveiculo}"
style="max-width: 140px; min-width: 140px; overflow: hidden">
<f:facet name="header">
<h:outputText id="optCodigoVeiculo" value="#{msgs.optTableCodigo}" />
</f:facet>

<h:outputText value="#{item.codigoveiculo}" />

</p:column>

Listagem 1. Ordenao de Dados

A Listagem 2 mostra o cdigo que alm de outras funes, faz com que sejam
mostrados logo aps a paginao dos dados, a quantidade de registros salvos no sistema.
<p:dataTable id="dtVeiculo" value="#{veiculoMBean.lazyModel}" lazy="true"
var="item" paginator="true" rows="5" paginatorAlwaysVisible="false"
resizableColumns="true" emptyMessage="#{msgs.dtVazia}"
rowsPerPageTemplate="5,10,15" scrollable="true"
selection="#{veiculoMBean.selectedVeiculos}"
rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'even-row' : 'oddrowIndexVar="rowIx" rowKey="#{item.codigoveiculo}"
binding="#{veiculoMBean.dtVeiculos}" paginatorPosition="bottom>

row'}"

Listagem 2. Exibio de quantidade de registro salvos no sistema

O cdigo da Listagem 3 tambm responsvel pela paginao por demanda da tabela
e pela quantidade de registros que o usurio poder visualizar nela. Nesse caso, foi definido
que o usurio visualizar a tabela de veculos com 5, 10 ou 15 linhas. Paginao por demanda
significa carregar os dados do banco somente quando requisitados. O framework PrimeFaces
facilita muito o desenvolvimento da paginao por demanda. O mtodo da classe
VeiculoMBean, conforme mostra a Listagem 3, faz a busca no banco dados apenas dos
veculos que devero ser mostrados na tela naquele instante.
lazyModel = new LazyDataModel<Veiculo>() {
@Override
public List<Veiculo> load(final int index, final int count,
final String sortField, final SortOrder sortOrder,
final Map<String, String> filters) {
final List<Veiculo> toReturn = veiculoService.getListaPaginada(filtro,
index, count, sortField, sortOrder, filters);
veiculo.setVeiculoproprio(true);
veiculo.setStatus(true);
if (ehParaContar) {
rowCount = veiculoService.count();
lazyModel.setRowCount(rowCount);
ehParaContar = false;
}
return toReturn;
}
};

Listagem 3. Paginao por demanda

Na Listagem 4 apresentado o cdigo que faz com que a imagem do veculo salvo
fique com o seu tamanho original.
<p:column id="clnFoto" sortBy="#{item.foto}" style="max-width: 140px; min-width:
overflow: hidden">
<f:facet name="header">
<h:outputText id="optFoto" value="#{msgs.optTableFoto}" />
</f:facet>
<p:commandLink id="cbtImg" update=":frmImagem:dImgAmpliada" process="@this"
oncomplete="dialogIng.show()">
<f:setPropertyActionListener value="#{item}"
target="#{veiculoMBean.selectedVeiculo}"/>
<p:graphicImage
value="#{veiculoMBean.exibeImagem.concat(item.codigoveiculo)}"
cache="false" height="18"/>
</p:commandLink>
<p:tooltip for="cbtImg" value="#{msgs.tpFoto}" showEffect="slide"
hideEffect="slide" styleClass="tpPdf" />
</p:column>

Listagem 4. Ampliao da imagem (1)

140px;

O framework PrimeFaces permite ampliar uma imagem com muita facilidade. Sem
nenhuma complexidade, foi implementado um mtodo que apanha o cdigo do veculo
juntamente com sua respectiva imagem. Assim, ao clicar na imagem reduzida que aparece na
listagem de veculo abrir outra tela com a imagem em seu tamanho original. A Listagem 5
apresenta um trecho de cdigo tambm da pgina cadastroVeiculo.xhtml.
<h:commandLink id="clPdfTudo">
<p:graphicImage value="../../../../resources/imagens/pdf1.png" />
<p:dataExporter type="pdf" target="dtVeiculo"
fileName="#{msgs.dtEptVeiculo}"
excludeColumns="0,5,6,7,8,9,11,12,13,17,18,19,23,24,25,26"/>
</h:commandLink>
<p:tooltip for="clPdfTudo" value="#{msgs.tpPdfTudo}" showEffect="slide"
hideEffect="slide" styleClass="tpPdf" />
<p:spacer height="10" />
<h:commandLink id="clPdfSelecao">
<p:graphicImage value="../../../../resources/imagens/pdf2.png" />
<p:dataExporter type="pdf" target="dtVeiculo"
fileName="#{msgs.dtEptVeiculo}"
excludeColumns="0,5,6,7,8,9,11,12,13,17,18,19,23,24,25,26"
pageOnly="true" />
</h:commandLink>
<p:tooltip for="clPdfSelecao" value="#{msgs.tpPdfSelecao}" showEffect="slide"
hideEffect="slide" styleClass="tpPdf" />

Listagem 5. Ampliao da imagem (2)

O framework PrimeFaces permite a criao de componentes de forma bastante
simplificada. Na implementao do sistema resultado deste trabalho foi criado um
componente para filtrar os dados dos veculos por qualquer campo do registro que o usurio
desejar. Depois de criado, o componente pode ser utilizado em qualquer pgina do sistema.
Para isso basta referenci-lo no cabealho no qual ele ser utilizado e criar um boto para
cham-lo no local que se deseja que o filtro seja apresentado. A Listagem 6 apresenta como
referenciar o componente no cabealho da pgina.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:filtro=http://java.sun.com/jsf/composite/filtro
template="/templates/main.xhtml">

Listagem 6. Referncia do componente

Um componente criado somente poder ser utilizado aps ser referenciado. Na
Listagem 7 apresentado, como criar o boto que ir abrir esse filtro na tela para o usurio.
<p:toolbarGroup align="right">
<filtro:filtroVeiculo />
</p:toolbarGroup>

Listagem 7. Utilizao do componente criado

Todos os cadastros tm campos obrigatrios. Essa funcionalidade relativamente fcil
de implementar, mas dependendo da maneira como feita pode causar certa lentido no
sistema, devido ao nmero de requisies no servidor para fazer a validao dos campos
obrigatrios. Usando o PrimeFaces, todas essas validaes so feitas em tela, isso significa
que se o usurio deixar de preencher um campo obrigatrio do cadastro, a validao desse
campo feita antes de os dados serem enviados para o servidor, evitando assim as vrias
requisies sem necessidade e consequentemente evitando lentido do sistema. A Listagem 8
mostra como realizada a validao do campo descrio que obrigatrio no cadastro de
veculos. Informando o valor true na propriedade required torna o campo obrigatrio. Na

propriedade requiredMessage foi definida a mensagem que ser apresentada para o usurio
quando ele tentar salvar o cadastro sem ter preenchido esse campo.
<p:inputText id="itDescricao" value="#{veiculoMBean.selectedVeiculo.descricao}"
required="true"
requiredMessage="#{msgs.itDescricaoVeiculo}"/>

size="30"

Listagem 8. Campo obrigatrio

A seguir comentado sobre trs componentes do PrimeFaces que so utilizados no
cadastro de veculos e que so muito interessantes do ponto de vista de programao. Esses
componentes so: p:fileUpload, p:calendar e p:spinner. O p:fileUpload permite realizar
upload de imagens simplesmente criando o componente na pgina (Listagem 9).
<p:fileUpload fileUploadListener="#{veiculoMBean.uploadImagem}" fileLimit="100000"
mode="advanced" fileLimitMessage="#{msgs.fuLimite}"
label="#{msgs.fuLabel}" invalidFileMessage="#{msgs.fuTipoImg}"
invalidSizeMessage="#{msgs.fuSize}"
allowTypes="/(\.|\/)(jpe?g|png|gif)$/">
</p:fileUpload>

Listagem 9. Componente fileUpload

Para fazer o upload da imagem selecionada, o componente usa o mtodo
uploadImagem, que usado na propriedade fileUploadListener deste. A Listagem 10
mostra o mtodo que responsvel pelo upload da imagem no cadastro de veculo.
public void uploadImagem(FileUploadEvent event) {
try {
DefaultStreamedContent imagem = new
DefaultStreamedContent(event.getFile().getInputstream());
byte[] foto = new byte[imagem.getStream().available()];
imagem.getStream().read(foto);
this.veiculo.setFoto(foto);
} catch (IOException ex) {
ex.printStackTrace();
}
}

Listagem 10. Mtodo uploadImagem

O mtodo uploadImagem basicamente apanha o byte da foto, l o mesmo e o insere
no campo da tabela do banco de dados em que ser armazenado. O componente p:fileUpload
possui duas propriedades relevantes: fileLimit que define o limite mximo de uploads de
arquivos que o usurio pode fazer ao mesmo tempo e allowTypes que define os tipos de
arquivos permitidos ao usurio realizar upload.
O componente p:calendar do PrimeFaces simplifica o trabalho com datas. Um boto
ao lado do campo da data abrir um calendrio que tambm ser aberto quando esse campo
data receber o foco, como se estivesse clicado no boto para abri-lo. A Listagem 11 mostra
como foi implementado o campo Data da Compra no cadastro de veculo.
<p:calendar id="cDtCompra" value="#{veiculoMBean.selectedVeiculo.dtcompra}"
maxlength="10" navigator="true" showOtherMonths="true"
locale="pt_BR" onblur="validateDate(this);"
onkeyup="formataData(this,event)" size="30" />

pattern="dd/MM/yyyy"

Listagem 11. Componente calendar

O p:spinner possui dois botes, um que incremente o valor do campo e o outro que
decrementa esse valor. A Listagem 12 mostra como desenvolvido esse componente.
<p:spinner id="itCapacPalles" value="#{veiculoMBean.selectedVeiculo.capacpalles}"
maxlength="2" min="26" max="30" stepFactor="2"
onblur="impedirDigitacao(this,event);" size="28" />

Listagem 12. Componente spinner

No caso do sistema desenvolvido, o valor do componente incrementa e decrementa em

dois nmeros a cada clique do usurio no boto, isso definido pela propriedade
stepFactor. Tambm foi definido que o valor mnimo do campo 26 e o mximo 30 com as
propriedades min e max respectivamente. A propriedade maxlength impede que seja
informado um nmero com mais do que dois algarismos.
CONCLUSES
O objetivo deste trabalho foi implementar um sistema web com interface rica para
controle de frotas de empresas transportadoras. Uma interface simples e intuitiva auxilia no
aprendizado de uso do sistema, agiliza o uso e oferece segurana ao usurio, no sentido de ele
saber que est fazendo o que efetivamente pretende. As RIAs, alm de otimizar a forma de
atualizao da tela e de possibilitar comunicao assncrona entre cliente e servidor, permite
ao usurio fazer uma nova requisio (interao) antes de obter a resposta da anterior.
Para a implementao do sistema diversas tecnologias foram utilizadas, mas o
framework PrimeFaces foi a principal. Esse framework de fcil configurao e possui uma
grande variedade de componentes com uso simplificado, alm de permitir que o
desenvolvedor crie seus prprios componentes. Com PrimeFaces, as telas ficam com
aparncia de aplicao desktop, implementando o conceito de RIA.
Contudo, esse framework apresenta algumas desvantagens, ainda que poucas do que
pode ser observado no desenvolvimento do sistema resultado deste trabalho e do ponto de
vista do programador. A principal dessas desvantagens em relao ao uso de eventos que os
componentes realizam utilizando Ajax. Se utilizados dois ou mais eventos Ajax, muito
provavelmente o componente no funcionar como esperado. Esse um aspecto que ainda
necessita de uma soluo adequada.
REFERNCIAS
[1] TAN, B.; WANG, J. A devicenet fieldbus data acquisition system based on Flex
technology and RIA model. IEEE International Conference on Progress in Informatics and
Computing (PIC), 2010, p. 1167-1169.
[2] MARTNEZ-RUIZ, F. J.; VANDERDONCKT, J.; GONZLEZ-CALLEROS, J. M.;
ARTEAGA, J. M. Model driven engineering of rich internet applications equipped with
zoomable user interfaces. Latin American Web Congress, IEEE Computer Society, 2009,
p. 44-51.
[3] LINAJE, M.; PRECIADO, J. C.; SNCHEZ-FIGUEROA, F. Engineering rich internet
application user interfaces over legacy web models. RABINOVICH, Michael; VINOSKI,
Steve (editors). Engineering the Web Track. IEEE Computer Society,
November/December 2007, p. 53-59.
[4] AMALFITANO, D.; FASOLINO, A. R.; TRAMONTANA, P. Experimenting a reverse
engineering technique for modelling the behavior of rich internet applications.
International Conference on Software Maintenance (ICSM 2009), 2009, p. 571-574.
[5] LAWTON, G. New ways to build rich internet applications. Industry Tends, IEEE
Computer Society, August 2008, p. 10-12.
[6]
PRIMEFACES.
PrimeFaces
QuickStart
tutorial-part1.
Disponvel
em:
http://java.dzone.com/articles/primefaces-quickstart-tutorial. Acesso em: 09 set. 2012.
[7] RUMBAUGH, J., et al. Modelagem e projeto baseado em objeto. Rio de Janeiro: Campus,
1997.