USO DE PRIMEFACES NO DESENVOLVIMENTO DE APLICAÇOES RICAS PARA WEB

Cleverson Leocir Ross ¹ , Beatriz Terezinha Borsoi ¹

¹ Grupo de Estudos e Pesquisa em Tecnologias de Informação e Comunicação Câmpus Pato Branco ¹ Universidade Tecnológica 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 - Aplicações web, denominadas Rich Internet Applications (RIA), em que ricas está relacionado aos recursos e às funcionalidades de interação com o usuário, permitem vincular a interatividade de uma aplicação desktop com as facilidades proporcionadas pela Internet. Considerando que a ênfase dessas aplicações está na sua interface, são várias as tecnologias que estão surgindo visando facilitar o trabalho dos desenvolvedores. Dentre essas tecnologias estão 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.

INTRODUÇÃO

A interface de um sistema, seja gráfica ou não, pode ser entendida como a estrutura que transmite ao usuário a ideia real do que é possível realizar com aquele determinado aplicativo computacional. Uma forma de implementar uma interface gráfica para web que possam ser denominada como interface rica é por meio do uso do framework PrimeFaces. Esse framework é de código fonte aberto, utilizado para auxiliar no desenvolvimento de páginas 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], são restringidos pelas limitações desses navegadores e da própria HTML (Hipertext Markup Language). Como são aplicativos baseados em hipertexto, fazem com que o usuário navegue pela informação por meio de páginas que precisam ser atualizadas a cada submissão de dados. Esse processo pode ocasionar demora no carregamento das páginas pelo aumentando do tráfego na rede. As aplicações web tradicionais, assim denominadas as baseadas em HTML, enfrentam problemas relacionados ao processamento de eventos. Aplicações complexas podem requerer

várias páginas para completar o processamento de um evento e diversos acessos ao servidor podem ser necessários para atualizar os dados das páginas. O modelo proposto pelas aplicações Internet ricas visa atender essa necessidade de otimizar a transmissão de dados pela rede ou entre cliente e servidor [1]. As Rich Internet Applications (RIA) são aplicações web que oferecem características e capacidades similares às disponíveis em aplicações desktop, como, por exemplo, robustez, adaptação dinâmica de acordo com o perfil do usuário e recursos multimídia [2]. Linaje, Preciado e Sánchez-Figueroa [3] complementam que as RIAs combinam os benefícios do modelo de distribuição web com multimídia altamente interativa disponível nas atuais aplicações desktop. Tan e Wang [1] caracterizam as RIAs como aplicações que são de uso mais intuitivo e provem uma melhor experiência de uso. Isso ocorre devido aos recursos de interface que elas possuem. Pelas suas características, as RIAs definem uma nova geração de aplicações web que exploram tecnologias web específicas para superar as limitações de usabilidade das aplicações web tradicionais e oferecer maior interatividade, capacidade de resposta e dinamicidade aos seus usuários [4]. A partir desse ponto de vista, as RIAs podem ser consideradas similares às aplicações desktop, mas com a vantagem de serem acessíveis pela Internet. As características de interface e de recursos de interação tornam os aplicativos baseados na Internet mais fáceis de usar e mais funcionais; além de superar problemas com aplicações web tradicionais, como baixo desempenho e interatividade com o usuário limitada [5]. Essa limitação decorre de as aplicações web baseadas em HTML e HTTP (Hypertext Transfer Protocol) serem constituídas basicamente de textos vinculados (hipertexto) e links entre páginas. As aplicações RIA geralmente possuem clientes que realizam atividades relacionadas

à interface, enquanto o servidor de aplicação processa e armazena dados e simplifica as atualizações de dados enviados para o cliente [5]. Essa simplificação ocorre porque apenas partes da interface que sofrem alterações são atualizadas. Isso também reduz o tráfego de dados entre cliente e servidor, resultando em desempenho melhor da aplicação. Uma RIA tipicamente, embora não sempre, executa em um navegador web e não requer a instalação da aplicação no cliente. Por segurança, a maioria das RIAs executa os seus elementos cliente em uma sandbox [5], como ocorre com a máquina virtual Java, por exemplo. Mesmo que não seja necessário instalar a aplicação no cliente, como geralmente ocorre com uma aplicação web, pode ser necessário instalar uma máquina 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 aplicações web que eles denominam Browser/Server. Essa combinação visa facilitar a interação do cliente com a aplicação e de benefícios técnicos, como redução de tráfego de rede e de processamento. Uma das tecnologias utilizadas para implementar uma RIA é o PrimeFaces que é uma suíte de componentes de código 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 módulo adicional, o PrimeFaces Mobile, que é um conjunto de componentes de interface com o usuário para desenvolvimento de aplicações web para dispositivos móveis. Dentre as características de PrimeFaces, destacam-se [6]: um conjunto de componentes de interface gráfica com o usuário denominados ricos pela caracterização de RIAs, como, por exemplo, DataTable, AutoComplete, HtmlEditor e Charts (gráficos); a construção de Ajax baseado no padrão 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

expõe o desenvolvimento de uma aplicativo web que utiliza essas tecnologias e se destina a uma transportadora. Este texto está organizado em seções, das quais está é a primeira e apresenta o contexto de trabalho desenvolvido. Na Seção 2 está o referencial teórico. A Seção 3 apresenta os materiais e o método utilizados. Na Seção 4, o sistema desenvolvido é apresentado visando mostrar o uso da tecnologia PrimeFaces. Por fim, estão as considerações finais e as referências bibliográficas.

METODOLOGIA

As ferramentas e as tecnologias utilizadas para as atividades de modelagem, implementação e execução 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 programação; 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 aplicação (classes java) e as tabelas do banco de dados PostgreSQL, que é relacional; JBoss 7 como servidor web para a aplicação; e Maven para gerenciamento do projeto. No método utilizado para o desenvolvimento do sistema são consideradas as três fases - análise, projeto e implementação - propostas por Rumbaugh [7].

RESULTADOS E DISCUSSÃO

Para ter acesso ao sistema, o usuário deverá informar seu login e a respectiva senha. Na parte superior da tela principal do sistema está a opção de “Logout” para finalizar a execução do aplicativo e é apresentado o nome do usuário que está acessando o sistema. No topo da tela estão, também, os menus de acesso às funções do sistema. Ao ser acessada a opção de cadastro de veículos é aberta a tela (Figura 1) com a listagem dos veículos.

Figura 1. Tela de listagem de veículos cadastrados

Cada linha da tabela (Figura 1) representa um veículo cadastrado com informações como: descrição, placa, ano e modelo. No final de cada linha estão disponíveis dois botões:

para abrir ou exportar para o computador do usuário os dados visíveis na tabela e para abrir ou exportar todos os veículos que estão cadastros no sistema e não somente os visíveis. Ao ser clicado na linha de cabeçalho, os dados listados são ordenados crescente ou decrescentemente. Cliques sucessivos na mesma coluna alternam entre essas duas possibilidades de ordenação. Para que a imagem armazenada do veículo caiba na linha da tabela sem alterar o seu tamanho, a mesma é apresenta em um tamanho muito reduzido, como mostra a região circulada da Figura 2.

Figura 2. Tela de listagem de veículo (imagem do veículo)

Para que o usuário possa visualizar melhor a imagem foi implementada uma forma de ampliação. Para ampliar a imagem basta um clique sobre a mesma nessa listagem. Ainda nessa mesma tela está a opção de paginação. Essa função permite a navegação pelas páginas

de cadastro. O usuário define a quantidade de itens a serem apresentados na tela, por exemplo, cinco, dez ou quinze. Também é apresentado o total de veículos cadastrados no sistema.

O cadastro de veículos contém informações obrigatórias como os campos descrição,

placa, chassi, combustível, 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 inserção não será concluída, conforme apresenta a região circulada da Figura 3.

Figura 3. Tela de cadastro de veículo

No cadastro de veículo é possível salvar, limpar campos preenchidos e cancelar. Essa

opção fechará a tela de cadastro. Na tela apresentada na Figura 3, ao lado de cada combobox está um botão. Esse botão abre a tela com o formulário de cadastro do referido item.

A seguir são apresentados códigos para exemplificar a implementação de uma RIA

utilizando Java e o framework PrimeFaces, que é um sistema para o gerenciamento de frotas de veículos, cujos exemplos da interface foram apresentados nas Figuras 1 a 3. Na Listagem 1 está um trecho de código da tela de cadastro de veículo. Esse código é responsável por fazer a ordenação dos dados na listagem de veículos quando o usuário clicar

sobre o nome da coluna. Esse código permite a ordenação dos dados pelo código de veículo 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. Ordenação de Dados

A Listagem 2 mostra o código que além de outras funções, faz com que sejam mostrados logo após a paginação 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' : 'odd- rowIndexVar="rowIx" rowKey="#{item.codigoveiculo}" binding="#{veiculoMBean.dtVeiculos}" paginatorPosition="bottom>

row'}"

Listagem 2. Exibição de quantidade de registro salvos no sistema

O código da Listagem 3 também é responsável pela paginação por demanda da tabela e pela quantidade de registros que o usuário poderá visualizar nela. Nesse caso, foi definido que o usuário visualizará a tabela de veículos com 5, 10 ou 15 linhas. Paginação por demanda significa carregar os dados do banco somente quando requisitados. O framework PrimeFaces facilita muito o desenvolvimento da paginação por demanda. O método da classe “VeiculoMBean”, conforme mostra a Listagem 3, faz a busca no banco dados apenas dos veículos que deverão 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. Paginação por demanda

Na Listagem 4 é apresentado o código que faz com que a imagem do veículo 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

140px;

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. Ampliação da imagem (1)

O framework PrimeFaces permite ampliar uma imagem com muita facilidade. Sem nenhuma complexidade, foi implementado um método que apanha o código do veículo juntamente com sua respectiva imagem. Assim, ao clicar na imagem reduzida que aparece na listagem de veículo abrirá outra tela com a imagem em seu tamanho original. A Listagem 5 apresenta um trecho de código também da página “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="

<p:dataExporter type="pdf" target="dtVeiculo" fileName="#{msgs.dtEptVeiculo}"

/

/

/resources/imagens/pdf2.png" /

/>

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. Ampliação da imagem (2)

O framework PrimeFaces permite a criação de componentes de forma bastante simplificada. Na implementação do sistema resultado deste trabalho foi criado um componente para filtrar os dados dos veículos por qualquer campo do registro que o usuário desejar. Depois de criado, o componente pode ser utilizado em qualquer página do sistema. Para isso basta referenciá-lo no cabeçalho no qual ele será utilizado e criar um botão para chamá-lo no local que se deseja que o filtro seja apresentado. A Listagem 6 apresenta como referenciar o componente no cabeçalho da página.

<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. Referência do componente

Um

componente criado

somente

poderá

ser

utilizado após

ser referenciado.

Na

Listagem 7 é apresentado, como criar o botão que irá abrir esse filtro na tela para o usuário.

<p:toolbarGroup align="right"> <filtro:filtroVeiculo /> </p:toolbarGroup>

Listagem 7. Utilização do componente criado

Todos os cadastros têm campos obrigatórios. Essa funcionalidade é relativamente fácil de implementar, mas dependendo da maneira como é feita pode causar certa lentidão no sistema, devido ao número de requisições no servidor para fazer a validação dos campos obrigatórios. Usando o PrimeFaces, todas essas validações são feitas em tela, isso significa que se o usuário deixar de preencher um campo obrigatório do cadastro, a validação desse campo é feita antes de os dados serem enviados para o servidor, evitando assim as várias requisições sem necessidade e consequentemente evitando lentidão do sistema. A Listagem 8 mostra como é realizada a validação do campo descrição que é obrigatório no cadastro de veículos. Informando o valor “true” na propriedade “required” torna o campo obrigatório. Na

propriedade “requiredMessage” foi definida a mensagem que será apresentada para o usuário 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 obrigatório

A seguir é comentado sobre três componentes do PrimeFaces que são utilizados no

cadastro de veículos e que são muito interessantes do ponto de vista de programação. Esses componentes são: p:fileUpload, p:calendar e p:spinner. O p:fileUpload permite realizar upload de imagens simplesmente criando o componente na página (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 método “uploadImagem”, que é usado na propriedade “fileUploadListener” deste. A Listagem 10 mostra o método que é responsável pelo upload da imagem no cadastro de veículo.

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. Método uploadImagem

O método “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 máximo de uploads de arquivos que o usuário pode fazer ao mesmo tempo e “allowTypes” que define os tipos de arquivos permitidos ao usuário realizar upload.

O componente p:calendar do PrimeFaces simplifica o trabalho com datas. Um botão

ao lado do campo da data abrirá um calendário que também será aberto quando esse campo data receber o foco, como se estivesse clicado no botão para abri-lo. A Listagem 11 mostra como foi implementado o campo “Data da Compra” no cadastro de veículo.

<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 botões, 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 números a cada clique do usuário no botão, isso é definido pela propriedade “stepFactor”. Também foi definido que o valor mínimo do campo é 26 e o máximo 30 com as propriedades “min” e “max” respectivamente. A propriedade “maxlength” impede que seja informado um número com mais do que dois algarismos.

CONCLUSÕES

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 segurança ao usuário, no sentido de ele saber que está fazendo o que efetivamente pretende. As RIAs, além de otimizar a forma de atualização da tela e de possibilitar comunicação assíncrona entre cliente e servidor, permite ao usuário fazer uma nova requisição (interação) antes de obter a resposta da anterior. Para a implementação do sistema diversas tecnologias foram utilizadas, mas o framework PrimeFaces foi a principal. Esse framework é de fácil configuração e possui uma grande variedade de componentes com uso simplificado, além de permitir que o desenvolvedor crie seus próprios componentes. Com PrimeFaces, as telas ficam com aparência de aplicação 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 relação ao uso de eventos que os componentes realizam utilizando Ajax. Se utilizados dois ou mais eventos Ajax, muito provavelmente o componente não funcionará como esperado. Esse é um aspecto que ainda necessita de uma solução adequada.

REFERÊNCIAS

[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] MARTÍNEZ-RUIZ, F. J.; VANDERDONCKT, J.; GONZÁLEZ-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.; SÁNCHEZ-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. Disponível 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.