frameworks ria - univale.com.br · uma comparação detalhada dos componentes ria mais populares do...

9
53 Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição de Dados. Frameworks RIA JSF é uma especificação desenvolvida pela JCP (Java Community Process) com o propósito de estabelecer um padrão para implementações de frameworks baseados em aplicações ricas para Internet com linguagem Java. Esta tecnologia tem como característica a implementação de sof- twares através de componentes configuráveis, diminuindo o tem- po gasto na conclusão do projeto e aumentando a confiabilidade de funcionamento destes, uma vez que todos os componentes já foram testados antes. Lembrando que o JSF é um framework para interface com o usuário, isto é, ele foi desenvolvido para facilitar a carga de trabalho que envolve escrever e manter aplicações web baseadas em servidores Java garantindo mecanismos ágeis para renderização de interfaces ao cliente, seguindo estas premissas: - construção facilitada baseada em componentes reutilizáveis; - simplificação da troca de informações das camadas internas do aplicativo para a interface com o usuário; - auxílio na gerência dos estados da interface do usuário base- adas em requisições ao servidor; - garantia de um modelo simples de controle de eventos entre cliente e servidor; - permite a construção de componentes de interface com usu- ário customizáveis. Outra questão muito importante é que o JSF estabelece padrões para promover capacidade a suas ferramentas de adaptarem-se a diferentes tipos de desenvolvedores, dos arquitetos de software em grandes corporações aos programadores em fases iniciais. Dentre diversos frameworks utilizados no mercado, o RichFaces 3.3.3, IceFaces 2.0 Beta 1 e PrimeFaces 2.1 foram selecionados para comparar se realmente correspondem a uma interface rica, promovendo diferentes tipos de componentes, disponibilizando múltiplos mecanismos de requisição e adaptados a necessidade do usuário como caracterizado pela especificação da JSF 2.0 na JSR-314. (Exibição de Dados) para JSF 2.0 lado a lado

Upload: ngothu

Post on 12-Dec-2018

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

53

Uma comparação detalhada dos componentes

RIA mais populares do JSF: RichFaces, IceFaces,

PrimeFaces, abordando os seus componentes

de Exibição de Dados.

Frameworks RIA

JSF é uma especificação desenvolvida pela JCP (Java Community Process) com o propósito de estabelecer um padrão para implementações de frameworks baseados

em aplicações ricas para Internet com linguagem Java.

Esta tecnologia tem como característica a implementação de sof-twares através de componentes configuráveis, diminuindo o tem-po gasto na conclusão do projeto e aumentando a confiabilidade de funcionamento destes, uma vez que todos os componentes já foram testados antes. Lembrando que o JSF é um framework para interface com o usuário, isto é, ele foi desenvolvido para facilitar a carga de trabalho que envolve escrever e manter aplicações web baseadas em servidores Java garantindo mecanismos ágeis para renderização de interfaces ao cliente, seguindo estas premissas: - construção facilitada baseada em componentes reutilizáveis; - simplificação da troca de informações das camadas internas

do aplicativo para a interface com o usuário; - auxílio na gerência dos estados da interface do usuário base-

adas em requisições ao servidor; - garantia de um modelo simples de controle de eventos entre

cliente e servidor; - permite a construção de componentes de interface com usu-

ário customizáveis.

Outra questão muito importante é que o JSF estabelece padrões para promover capacidade a suas ferramentas de adaptarem-se a diferentes tipos de desenvolvedores, dos arquitetos de software em grandes corporações aos programadores em fases iniciais.

Dentre diversos frameworks utilizados no mercado, o RichFaces 3.3.3, IceFaces 2.0 Beta 1 e PrimeFaces 2.1 foram selecionados para comparar se realmente correspondem a uma interface rica, promovendo diferentes tipos de componentes, disponibilizando múltiplos mecanismos de requisição e adaptados a necessidade do usuário como caracterizado pela especificação da JSF 2.0 na JSR-314.

(Exibição de Dados)para JSF 2.0 lado a lado

Page 2: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

54

Componentes de interface para exibição de dados

O artigo “Frameworks RIA para JSF lado a lado – Entrada de Dados”, MundoJ 42, tratou dos componentes cujo nome do mesmo faz refe-rência. Neste artigo trataremos de componentes de exibição de dados. Para isto, serão apresentados diversos componentes dos frameworks citados, mostrando suas semelhanças e principais diferenças.

Todos os componentes, independentemente do framework utilizado, quando renderizados são estruturas HTML, definidas esteticamente por CSS, com controle de eventos e troca de mensagem em JavaS-cript. Porém, para o programador Java, são componentes baseados em bibliotecas de tags (JSTL) e Linguagem de Expressão (EL).

Na categoria de exibição de dados, os frameworks auxiliam de maneira ímpar no desenvolvimento, pois eliminam o desenvolvi-mento de diversas ferramentas para facilitar a leitura e tabulação das informações. Conforme veremos a seguir, componentes totalmente configuráveis e de alta versatilidade atendem todas as necessidades de um sistema web tal qual um sistema desktop. Sendo neste artigo abordado os componentes presentes na tabela 1. Para facilitar a di-ferenciação dos componentes, separamos por cor. IceFaces = verde, PrimeFaces = turquesa e RichFaces = vermelho.

RichFaces IceFaces PrimeFaces

<rich:dataTable> <ice:dataTable> <p:dataTable>

<rich:dataGrid> <p:dataGrid>

<rich:datascroller> <ice:dataPaginator>

<rich:column> <ice:column> <p:column>

<rich:dataList> <p:dataList>

<ice:dataExporter> <p:dataExporter>

Tabela 1. Componentes de exibição de dados RichFaces, IceFaces e PrimeFaces.

O framework IceFaces possui menos componentes, já o Prime-Faces e RichFaces são bem parecidos considerando a forma de implementação dos componentes e os recursos disponíveis. Com uma diversificada lista de atributos e configurações para seus componentes, estes últimos se tornam uma boa opção.

A classe Usuario, conforme mostrado na Listagem 1, foi utilizada em todos os exemplos abordando os três frameworks, assim como a classe UsuarioManagedBean (Listagem 2).

Listagem 1. Classe Usuário.

public class Usuario { private int codigo; private String nome; private int idade; public Usuario(String nome, int idade){ this.nome = nome; this.idade = idade; } //métodos getters e setters }

Listagem 2. Bean Gerenciada UsuarioManagedBean.

UsuarioManagedBean//imports necessariospublic class UsuarioManagedBean { private Usuario usuario; public List<Usuario> getListUsuario() { List<Usuario> listUsuarios = new ArrayList<Usuario>(); listUsuarios.add(new Usuario(“Jose”, 21)); listUsuarios.add(new Usuario(“Marcos”, 23)); listUsuarios.add(new Usuario(“Ricardo”, 20)); listUsuarios.add(new Usuario(“Joel”, 21)); listUsuarios.add(new Usuario(“Adriano”, 18)); listUsuarios.add(new Usuario(“Priscila”, 29)); listUsuarios.add(new Usuario(“Luciana”, 25)); return listUsuarios; }//métodos getters e setters}

A classe bean Usuário da Listagem 1 faz parte da camada model da estrutura MVC (Model, View, Controller), e representa o objeto usu-ário com três característica que são: código, nome e idade. É impor-tante salientar que o JSF foi sedimentado na utilização do modelo de três camadas citado, em que o programador deve se preocupar com a camada Controller, uma vez que a camada View é facilitada por uma variedade de componentes que diminuem o tempo dedicado a ela.

Já a classe UsuarioManagedBean, na Listagem 2, camada Controller da estrutura MVC, como o próprio nome descreve, é responsável por controlar a aplicação servindo como acesso entre View e outras ca-madas. Nesta classe foi desenvolvido o método getListUsuario() que retorna uma implementação da interface List, o ArrayList, contendo vários objetos do tipo Usuario. Esta lista será utilizada para popular DataTables, DataGrids, DataLists etc.

Para Saber Mais

A edição 42 da MundoJ traz o artigo “Frameworks RIA para JSF lado a lado – Entrada de Dados”. No qual é descrita as diferenças não só nos componentes de entrada de dados como descrito no título, mas também a instalação dos frameworks utilizados neste artigo e sua compatibilidade de navegadores.

DataTable

O Componente DataTable é comum para os três frameworks. Este componente apresenta atributos em comum em cada implemen-tação JSF, porém cada framework disponibiliza ainda um conjunto de atributos específicos. Dos atributos em comum, podemos des-tacar: o value, com suporte à EL. Em nosso exemplo foi utilizado para receber uma coleção de objetos e popular a DataTable; já o var define um nome a ser utilizado no escopo da requisição para identificar uma linha selecionada e posteriormente processada no Controller, assim, deve receber uma String.

: : www.mundoj.com.br : :

Page 3: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

55

Listagem 3. Datatable para IceFaces.

<ice:dataTable id=”iddatatable” var=”usuario”

value=”#{usuarioManagedBean.listUsuario}”>

<ice:column>

<f:facet name=”header”>

<ice:outputText value=”Nome”/>

</f:facet>

<ice:outputText value=”#{usuario.nome}”/>

</ice:column>

<ice:column>

<f:facet name=”header”>

<ice:outputText value=”Idade”/>

</f:facet>

<ice:outputText value=”#{usuario.idade}”/>

</ice:column>

</ice:dataTable>

O resultado da Listagem 3 pode ser vista na figura 1. Para entender melhor seu funcionamento devemos esquecer o padrão HTML de criação de tabelas (<table> </table>), no qual consideramos cada linha (<tr> </tr>) e coluna (<td> </td>) para cada informação da tabela. Com a DataTable, mesmo este sendo renderizado em HTML, deve-se especificar a origem dos dados, atributo value, um nome para o escopo de requisição (var) e quais são as informações que serão exibidas definindo as colunas (<ice:column>) através de título e conteúdo. O título é definido pela tag <f:facet> com atributo name obrigatoriamente como “header”, já o conteúdo é tudo aquilo interno a tag definida para coluna. Uma observação importante é o uso do nome atribuído ao var para garantir itera-ção dos itens da coleção associada ao componente DataTable.

Para criar esta mesma tabela usando os frameworks RichFaces e PrimeFaces, é necessário alterar somente os prefixos de framework. Para RichFaces devem trocar <ice:dataTable>, <ice:column> e <ice:outputText> por <rich:dataTable>, <rich:column> e <h:outputText>, respectivamente. Já para PrimeFaces os mesmos componentes devem trocar por <p:dataTable>, <p:column> e <h:outputText>. Os parâmetros e atributos podem ser os mesmos, independentemente do framework.

Figura 1. Componente Datatable nos frameworks IceFaces, RichFaces e PrimeFaces.

DataTable com Paginação

O componente de paginação também é comum para os três frameworks. Sua função é subdividir grandes tabelas em várias páginas. Para isso é importante definir por meio do atributo rows a quantidade máxima de linhas por página da tabela.

Conforme mostra a Listagem 4, para paginação com o framework IceFaces deve-se utilizar o componente <ice:dataPaginator>, de-clarar o mesmo com o parâmetro for indicando o id da tabela a ser paginada. Outro atributo importante é o name do <f:facet> que deve obrigatoriamente ser declarado como o exemplo. Este atributo possibilita a modificação do link para movimentação das páginas. A Listagem 4 irá apresentar os valores voltar e próximo para movimentação da tabela, como verificado na figura 2. Na documentação do framework existem muitos outros parâmetros de configuração, proporcionando um componente totalmente customizado.

O framework PrimeFaces não possui um componente exclusivo para a paginação. Este recurso pode ser adquirido por meio de configuração do componente <p:dataTable> com os parâmetros paginator e paginatorPosition. Nos exemplos apresentados na fi-gura 2, o componente de paginação do PrimeFaces não apresenta um link nomeado, assim como o modelo do IceFaces, porém é possível adaptar os rótulos de paginação através dos atributos firstPageLinkLabel, nextPageLinkLabel, lastPageLinkLabel e pre-viousPageLinkLabel de uma maneira mais fácil do que o IceFaces.

O RichFaces apresenta uma maneira semelhante ao IceFaces, sendo dependente da criação do <f:facet> para cada opção de link de navegação. A figura 2 exibe os formatos padrão de navegação para RichFaces e PrimeFaces, cuja navegação pode ser definida via atributos como citado no parágrafo anterior. Existem outras características interessantes nos frameworks, como, por exemplo, busca rápida por página, definição de página inicial, mudança de páginas em lote etc., para mais detalhes procure pela documenta-ção oficial de cada implementação.

Listagem 4. Datatable com paginação no IceFaces.

<h:form>

<ice:dataTable rows=”3”

// restante da implementação da dataTable

</ice:dataTable>

<ice:dataPaginator id=”dataPaginator”

for=” iddatatable” paginator=”true”

paginatorMaxPages=”4”>

<f:facet name=”previous”>

<ice:outputText value=”voltar”/>

</f:facet>

<f:facet name=”next”>

<ice:outputText value=”próximo”/>

</f:facet>

</ice:dataPaginator>

</h:form>

Page 4: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

56

: : www.mundoj.com.br : :

Listagem 5. Datatable com paginação no PrimeFaces.

Listagem 6. Datatable com paginação no RichFaces.

Listagem 7. Datatable com ordenação no IceFaces.

Cont. Listagem 7. Datatable com ordenação no IceFaces.

Listagem 8. Datatable com ordenação no PrimeFaces.

<h:form>

<p:panel header=”DataTable com Paginação” style=”width: 350px”>

<p:dataTable rows=”2”

paginator=”true”

paginatorPosition=”bottom”

var=”usuario”

value=”#{usuarioManagedBean.listUsuario}”>

//implementação das colunas conforme Listagem 3 com alterações de prefixo

<h:form>

<rich:panel

id=”PainelDatatable”

style=”width:210px”

header=”DataTable com Paginação”>

<rich:dataTable

id=”iddatatable”

rows=”2” value=”#{usuarioManagedBean.listUsuario}”

var=”usuario”

reRender="scroll">

//implementação das colunas conforme Listagem 3 com alterações de prefixo

</rich:dataTable>

<rich:datascroller for=”iddatatable” maxPages=”20” id=”scroll”/>

</rich:panel>

<h:form>

<ice:dataTable

id=”dataTbl”

var=”usuario”

value=”#{usuarioManagedBean.listUsuario}”

columnClasses=”columnsColumn”

sortAscending=”true”

sortColumn=”Nome”>

<ice:column>

<f:facet name=”header”>

<h:form>

<p:panel header=”DataTable com Ordenação” style=”width: 300px”>

<p:dataTable

var=”usuario”

value=”#{usuarioManagedBean.listUsuario}”

dynamic=”true”>

<p:column sortBy=”#{usuario.nome}”>

<f:facet name=”header”>

<h:outputText value=”Nome”/>

</f:facet>

<h:outputText value=”#{usuario.nome}”/>

</p:column>

<p:column>

<f:facet name=”header”>

<h:outputText value=”Idade”/>

</f:facet>

<h:outputText value=”#{usuario.idade}”/>

</p:column>

</p:dataTable>

</p:panel>

</h:form>

Figura 2. Componente DataTable com Paginação nos Framework IceFaces, RichFaces

e PrimeFaces.

DataTable com Ordenação

<ice:commandSortHeader

columnName=”Nome”

arrow=”true” >

<ice:outputText value=”Nome”/>

</ice:commandSortHeader>

</f:facet>

<ice:outputText value=”#{usuario.nome}”/>

</ice:column>

...

</ice:dataTable>

</h:form>

A ordenação de uma tabela é um recurso muito interessante, as implementações JSF trazem isso em seus componentes. Para Prime-Faces e RichFaces este recurso é muito simples de ser implementado, bastando inserir o atributo sortBy na coluna da tabela, para que esta seja automaticamente ordenável. Já para o IceFaces, a história muda um pouco. A implementação possui muitos outros atributos para configuração conforme mostra a Listagem 7, inclusive com a neces-sidade de uma tag específica para ordenação. Outra característica do recurso no IceFaces é que deve ser implementado o método de or-denação na sua classe managed bean, tornando o recurso complexo, para muitos um inconveniente, porém pode proporcionar diferentes características de ordenação baseado em múltiplas colunas.

A Listagem 8 exibe a implementação com PrimeFaces, uma obser-vação pertinente é o uso do sortBy apenas na coluna nome, assim apenas a coluna cujo atributo em questão foi inserido irá apresentar possibilidade de ordenação através do clique do usuário em seu ca-beçalho. Outra característica da coluna ordenável é a presença do

Page 5: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

57

ícone que caracteríza a direção da ordenação, seja ela crescente ou decrescente.

Considerando a ordenação, alguns tipos de dados têm sua função comprometida uma vez que para na camada View, por padrão tudo é String. Assim, para a ordenação de tipos diferentes de String, como, por exemplo, datas e valores numéricos é necessário utilizar alguns atributos especiais.

Por exemplo, a seguinte sequência: -1, -10, -20, 10 e 20 está orde-nada de forma alfabética, ou seja, como String, para ordená-la nume-ricamente (-20, -10, -1, 10 e 20) é necessário utilizar uma classe que implemente java.util.Comparator (RichFaces), já com o PrimeFaces é possível utilizar o atributo parser no componente <p:column> com as definições “number” ou “date” para as ordernações corretas para número e data, respectivamente.

Uma característica importante na ordenação é que, por padrão, ocor-re somente no cliente, ou seja, no navegador do usuário. Isso faz com que o processamento referente à ordenação não consuma recursos do servidor. No entanto, caso o desenvolvedor pretenda manter a lista sincronizada entre o servidor e o cliente, isto é, qualquer mudança nas informações seja refletida no cliente após algum evento, ele deve implementar o componente de forma diferente.

Para o PrimeFaces, basta utilizar o atributo dynamic, cujo valor padrão é false, com o valor true para obter a sincronização baseada em Ajax. Já o RichFaces disponibiliza esta possibilidade na chamada <rich:extendedDataTable>, inclusive dotada de um atributo que recupera a organização das colunas para persistência e restauração, muito útil em layouts customizados individualmente pelos usuários.

Figura 3. Componente Datatable com

ordenação no framework PrimeFaces.

O componente dataTable com ordenação para o framework Ri-chFaces é semelhante ao PrimeFaces, alterando somente os prefi-xos do framework para <rich:dataTable> e <rich:column>.

DataTable Com Filtro

O filtro é um recurso que permite ao usuário localizar um deter-minado registro em uma grande tabela, apenas digitando parte ou a referência por completo em um campo de filtragem. Este componente não está presente no IceFaces. Para o RichFaces e PrimeFaces é necessário configurar a coluna da tabela com os atributos filterBy e filterEvent.

O atributo filterBy identifica qual o valor a ser comparado para executar a filtragem, já o filterEvent indica qual o evento que irá

disparar filtragem, sendo os mais comuns “OnKeyUp” e “OnBlur”, após pressionar uma tecla dentro do campo e saída do campo de filtragem, respectivamente. Inclusive é possível definir cada colu-na com um tipo diferente de evento, uma vez que o atributo de filtragem é inserido na coluna, como demonstrado na Listagem 9.

Listagem 9. Datatable com Filtro em RichFaces.At faudac-chum in reo Catiam. Tam est perem videesus vitiem Romnes condit, crum idi pons ficorununit. Catimunia nem. Hos, quam<h:form>

<rich:panel style=”width:300px;” header=”Datatable Filtro”>

<rich:dataTable

id=”dt”

columns=”2” value=”#{usuarioManagedBean.listUsuario}”

var=”usuario”>

<f:facet name=”header”>

<h:outputText value=”DataTable”/>

</f:facet>

<rich:column width=”100px” filterBy=”#{usuario.nome}”

filterEvent=”onkeyup”>

<f:facet name=”header”>

<h:outputText value=”Nome”/>

</f:facet>

<h:outputText value=”#{usuario.nome}”/>

</rich:column>

<rich:column width=”100px” filterBy=”#{usuario.idade}”

filterEvent=”onkeyup”>

<f:facet name=”header”>

<h:outputText value=”Idade”/>

</f:facet>

<h:outputText value=”#{usuario.idade}”/>

</rich:column>

</rich:dataTable>

</rich:panel>

</h:form>

Para o mesmo efeito no PrimeFaces, basta substituir os prefixos da Listagem 9 de rich para p. Na figura 4 é exibida a filtragem com as letras “jo", com RichFaces e “j” com PrimeFaces. É possível observar que antes a lista que continha sete itens agora apresenta apenas os dois iniciados segundo o critério informado.

Figura 4. Componentes Datatable Com Filtro do Framework RichFaces e PrimeFaces.

O framework RichFaces apresenta ainda opções de filtragens avançadas através dos atributos filterExpression e filterMethod, que estão associados, respectivamente, a uma expressão avaliada com resposta booleana e com um método customizado localizado em uma classe.

Page 6: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

58

: : www.mundoj.com.br : :

Listagem 10. Alterando tamanho da coluna com IceFaces.

Listagem 11. Alterando tamanho da coluna com PrimeFaces.

<ice:dataTable

id=”dataTbl”

var=”usuario”

value=”#{usuarioManagedBean.listUsuario}”

columnClasses=”columnsColumn”

resizable="true"

width="200">

<p:dataTable var=”usuario” value=”#{usuarioManagedBean.listUsuario}”>

<p:column resizable=”true”>

<f:facet name=”header”>

<h:outputText value=”Nome”/>

</f:facet>

#{usuario.nome}

</p:column>

<p:column resizable=”true”>

<f:facet name=”header”>

<h:outputText value=”Idade”/>

</f:facet>

#{usuario.idade}

</p:column>

</p:dataTable>

Alterando tmanho de coluna de DataTable

Não só considerando usabilidade, mas também critérios de ajuste pelos usuários, os frameworks apresentam atributos dotados de características para redimensionamento de colunas via CSS ou definição em atributos específicos.

Na Listagem 10 é exibido um código, no qual o redimensionamen-to da tabela é permitido através do atributo resizable com valor true, associado a esta configuração o atributo columnClasses foi especificado a uma classe CSS para definição do estilo das colunas.

A Listagem 11 apresenta a opção de redimensionamento individu-al para coluna, esta é uma característica do PrimeFaces. A figura 5 exibe uma tabela com redimensionamento permitido, em que a coluna nome foi modificada aumentando o seu comprimento.

Figura 5. Configuração de tamanho da coluna

nome modificada com o framework IceFaces.

O RichFaces não possui parâmetro que permita que o usuário altere o tamanho das colunas do componente DataTable, porém ele possui um componente exclusivo (<rich:extendedDataTable>) que por padrão tem esta caracteristica, além de outras como ordenação e seleção de colunas visiveis (conforme figura 6). É importante destacar que a <rich:extendedDataTable>, como já dito, permite a persistência de sua configuração através de um atributo chamado stateVar. Esta tabela também dispara eventos em uma variedade de tipo diferentes das demais apresentadas, por exemplo, o onSelectionChange (quando o usuário modificar de linha selecionada) e onRowMouseOut, quando o ponteiro do mouse sair de determinada linha.

Figura 6. Componente extendedDataTable do Framework RichFaces.

A <rich:extendedDataTable> é o componente de exibição de dados mais completo dentre os comparados, porém o seu desempenho e algumas configurações fazem com o que o desenvolvedor utilize este componente em casos específicos.

DataGrid

Saindo dos modelos de tabelas, porém ainda exibindo dados oriundos de coleções, o DataGrid é um componente que permite a exibição de informação iterando listas, com paginação e requisi-ções Ajax, porém com elementos de layout diferenciados, como, por exemplo, painéis (tag <div> do HTML).

Para Saber Mais

A edição 14 da MundoJ traz o artigo “Ajax – Desenvolvendo uma Web mais interativa”. No qual se apresenta conceitos desta tecnologia, como também usos e vantagens. A edição 22 da MundoJ também trata do assunto.

Page 7: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

59

A Listagem 12 apresenta os dados retornados da coleção de usu-ários utilizados nos outros exemplos em componentes <p:panel> (PrimeFaces). Neste exemplo é possível observar que será criado um painel para cada elemento da coleção associada pelo atributo value. Assim como para as listas é possível determinar paginação, atributo paginator. Além disso, este componente apresenta os atri-butos rows e columns que permitem a configuração da matriz de painéis que será exibida, no caso do exemplo serão quatro linhas e duas colunas, como exibido na figura 7.

Listagem 12. DataGrid para PrimeFaces.

Listagem 13. DataGrid para RichFaces.

Cont. Listagem 13. DataGrid para RichFaces.

<p:panel header=”DataGrid” style=”width: 400px”>

<p:dataGrid

columns=”2”

rows=”4”

paginator=”true”

effect=”true”

value=”#{usuarioManagedBean.listUsuario}”

var=”usuario”>

<p:panel header=”Usuário”>

<h:panelGrid columns=”2”>

<h:outputText value=”Nome: “/>

<h:outputText value=”#{usuario.nome}”/>

<h:outputText value=”Idade: “/>

<h:outputText value=”#{usuario.idade}”/>

</h:panelGrid>

</p:panel>

</p:dataGrid>

</p:panel>

<rich:panel header=”DataGrid” style=”width:400px; height:250px;”> <rich:dataGrid value=”#{usuarioManagedBean.listUsuario}” var=”usuario” columns=”3” elements=”9” > <f:facet name=”header”> <h:outputText value=”Usuário”/> </f:facet> <h:panelGrid columns=”2”>

A Listagem 13 apresenta a codifição para DataGrid baseada no RichFaces, em que a principal diferença com o framework da listagem anterior é a maneira de definição da matriz de compo-nentes, é utilizado o atributo elements para representar o total de elementos por página sendo o atributo columns utilizado como anteriormente na definição de quantidade de colunas como com o PrimeFaces. No caso da Listagem 13 não foi utilizada paginação.

Figura 7. Componente DataGrid nos frameworks PrimeFaces e RichFaces.

Listagem 14. DataList para PrimeFaces.

<p:panel header=”DataList” style=”width: 500px”>

<p:dataList

rows=”4”

itemType=”circle”

value=”#{usuarioManagedBean.listUsuario}”

var=”usuario”>

#{usuario.nome}, #{usuario.idade}

</p:dataList>

//outras implementações modificando o itemType

</p:panel>

O IceFaces não oferece um componente similar ao DataGrid em sua versão atual, IceFaces 2.0 Beta 1.

DataList

É um componente que promove a renderização fora de ordem de uma coleção originária de uma classe, habilitada a ajustes via Ajax. A Listagem 14 apresenta o componente dataList implementado com o PrimeFaces. Na codificação é possível observar o uso do atributo itemType que especifica qual o tipo de marca que separa cada item da lista. Sua saída HTML é semelhante ao <ul>.

<h:outputText value=”Nome: “ styleClass=”label”/> <h:outputText value=”#{usuario.nome}” /> <h:outputText value=”Idade: “ styleClass=”label”/> <h:outputText value=”#{usuario.idade}” /> </h:panelGrid> </rich:dataGrid></rich:panel>

Page 8: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

60

Listagem 16. DataExporter para PrimeFaces.

<h:commandButton value="Exportar em XML">

<p:dataExporter fileName=”tabela” target=”idDate” type=”xml”/>

</h:commandButton>

DataExporter

Figura 8. Componente DataList do frameworks PrimeFaces e RichFaces.

Este componente, existente apenas nos frameworks PrimeFaces e IceFaces, promove a exportação dos dados tabulados por com-ponentes DataTable em arquivos do tipo XLS, PDF, CSV ou XML.

Os componentes citados têm diferentes fucionamentos, inclu-sive devido ao formato de configuração das suas tabelas. Antes, considerado mais complexo, o IceFaces traz uma característica muito importante em seu componente de Exportação de dados, esta característica adiciona flexibilidade e novas capacidades comparados aos componentes RichFaces e PrimeFaces, assim a complexidade se torna robustes. Visto que, como comenta-do, o mecanismo de ordenação é garantido por uma complexa programação (considerando o modelo do PrimeFaces) em uma classe, esta ordenação também é exportada junto com o modelo de dados. Assim, qualquer ordenação, ou ajuste na DataTable, é refletido para o componente de exportação de dados que por sua vez cria os arquivos com os dados ajustados conforme tabela.

Uma característica do PrimeFaces é o uso dos atributos preProcessor e postProcessor, que especificam um método para manipulação da informação exportada, possibilitando a inserção de cabeçalho, rodapé, imagens e até mesmo a manipulação das informações exportada aos arquivos com as informações exportadas. Esta manipulação é útil, por exemplo, nos casos em que a tabela apresenta um ícone ou imagem simbolizando uma situação, mas no relatório deve ser apresentada uma palavra, assim implementa-se um algoritmo para substituição do objeto imagem (exportado) para o conteúdo do tipo texto.

O componente de exportação também apresenta a possibilidade de seleção de colunas, o que promove a exportação dos dados com ex-ceção de colunas com ícones para a seleção, alteração e exclusão do registro relacionado na linha. Após o evento que dispara a exportação ser acionado, é apresentado ao usuário o arquivo para download com as informações.

Uma observação importante é que cada tipo de arquivo para expor-tação, com o uso do PrimeFaces, tem como dependência bibliotecas extras, que não fazem parte do pacote do framework. Por exemplo, para a geração de XLS é necessária a biblioteca Apache POI, versão 3.2. Já o PDF exige a Itext, estritamente na versão 1.4.8

Já o IceFaces apresenta todos os recursos necessários para a exportação, sem nenhuma dependência extra.

Para Saber Mais

A edição 40 da MundoJ traz o artigo “As novidades do JSF 2.0” sobre JSF 2.0 que aborda as características da tecnologia sem considerar o uso de Frameworks, apenas as novidades lançadas na nova versão.

Considerações finais

Todos os componentes apresentaram as vantagens do uso do Ajax, ordenação e diversos recursos extras. O componente extendedDa-taTable, no RichFaces é o mais completo com recurso de customi-zação e maior flexibilidade ao usuário. No entanto, o framework não apresenta possibilidade de exportação, o que perde muito

Listagem 15. DataList para RichFaces.

<rich:panel header=”DataList” style=”width:400px; height:250px;”>

<rich:dataList var=”usuario” value=”#{usuarioManagedBean.listUsuario}”

rows=”10”>

<h:outputText value=”Usuário”></h:outputText><br/>

<h:outputText value=”Nome: “ styleClass=”label”></h:outputText>

<h:outputText value=”#{usuario.nome} “ />

<h:outputText value=” Idade: “ styleClass=”label”></h:outputText>

<h:outputText value=”#{usuario.idade} “ />

</rich:dataList>

</rich:panel>

A Listagem 15 apresentou a codificação do dataList baseado no RichFaces, onde é possível verificar muita semelhança com o Pri-meFaces. O IceFaces não apresenta componente similar ao dataList.

Verificando a figura 8, é possível observar que o primeiro painel de listagem apresentou seis listas, cada uma com um tipo de lista, limitando-se a quatro elementos, porém seis delimitadores diferen-tes, tanto ícones quanto caracteres. Já no painel à direita, a imple-mentação RichFaces, exibe uma listagem com todos os registros da coleção com itens da lista implementados com <h:outputText> e tags HTML como o <br/>.

Já o PrimeFaces, que apresenta facilidades quanto a ordenação e especificação através de atributos como o parser, tem sua orde-nação apenas no cliente, o que faz com que qualquer ordenação não seja exportada, uma vez que o componente de exportação recupera as informações com um estado diferente no servidor. A Listagem 16 apresenta o componente segundo o PrimeFaces, com a especificação de exportação para xml.

: : www.mundoj.com.br : :

Page 9: Frameworks RIA - univale.com.br · Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição

6161

• ICEFaces DataSheet, http://www.icesoft.com/pdf/icefaces-datasheet.pdf

• ICEFaces Developer´s Guide, Versão 1.8, http://www.icefaces.org/docs/v1_8_2/ICE-

facesDevelopersGuide.pdf

• RichFaces Developer Guide, http://docs.jboss.org/richfaces/latest_3_3_X/en/devgui-

de/pdf/richfaces_reference.pdf

• PrimeFaces User´s Guide, http://primefaces.googlecode.com/files/primefaces_

users_guide_190410.pdf

Referências

tratando de aplicações Web, cujos usuários em sua maioria utili-zam análises externas e evita a implementação de relatórios, sendo uma alternativa simples ao já tradicional JasperReports (caso seja um relatório simples).

O IceFaces apresenta menos componentes e uma implementação mais complexa. No entanto, apresenta recursos mais avançados, uma vez que a maioria dos atributos estão associados a beans gerenciáveis, o que aumenta a flexibilidade dos componentes, inclusive torna a exportação dos dados da DataTable semelhante ao estado do cliente. Porém, não apresenta recursos muito popu-lares. As filtragens por coluna, somados a quantidade menor de componentes torna o IceFaces a última opção para escolha entre os componentes.

Finalmente, o PrimeFaces, o mais leve e simples para customizar, com a maior quantidade de atritutos, fato que evita o uso de outros componentes para atingir a configuração desejada. Com exceção da exportação em estados diferentes entre cliente e servidor que deprecia o framework, temos em contrapartida o atributo dyna-mic que torna a tabela atualizada via Ajax de maneira facilitada, apresentando este framework como uma ótima opção para um aplicativo web RIA.

Muitas outras caracterícas e atributos pertencentes aos compo-nentes de exibição de dados não foram abordados neste artigo, por exemplo, componentes para imagem como o ImageCompare, ImageCropper e ImageSwitch, Carousel e principalmente os com-ponentes para gráficos (Charts) presente em todos os conjuntos de componentes comentados neste artigo, sendo necessário um artigo para estes componentes em cada framework, e o intuito deste era comparar de uma forma geral as tecnologias JSF e com-ponentes mais populares do mercado.

Particularmente nos últimos projetos temos utilizado Primefaces 2.1, principalmente pela compatibilidade estável com JSF 2.0, leveza e quantidade de componentes disponíveis. Espero ainda novidades no PrimeFaces 2.2, incluindo novas capacidades para o <p:media>, que poderia ser alvo deste artigo, uma vez que exibe dados, porém dados do tipo multimidia!•