USO DE PRIMEFACES NO DESENVOLVIMENTO DE APLICAOES RICAS PARA WEB

Cleverson Leocir Ross1, Beatriz Terezinha Borsoi1 1Grupo de Estudos e Pesquisa em Tecnologias de Informao e Comunicao

Cmpus Pato Branco 1Universidade 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.

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.

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.

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.

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.

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.

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).

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.

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.

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.