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

Documentos relacionados
Introdução ao Desenvolvimento de

Biblioteca de Componentes JSF para Interfaces Ricas

Introdução ao ASP.NET

Aula 17 Introdução ao jquery

Introdução ao ASP.NET

EXERCÍCIOS DE REVISÃO DE CONTEÚDO QUESTÕES DISSERTATIVAS

Frameworks funcionais para JSF que proporciona o desenvolvimento de aplicações computacionais WEB

Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo

Exibindo barra de progresso com JSF e Primefaces

Continuação... Criando a Interface e adiante

Primefaces 3. Laboratório Passo-a-Passo. JSF - Primefaces. Prof. Leandro Rubim de Freitas Versão 1.

Figura 16 Niagara - Visão de grupos de notas.

Utilizando o Framework SubMacro no Desenvolvimento de Aplicações Java para Internet. Kleber Taffarel Novembro de 2008

O que é uma tag Tag tag tag tag tag tags tags HTML O que é uma tag library biblioteca de tags tags Java Standard Tag Library JSTL Tag Library JSTL

Recursos Complementares (Tabelas e Formulários)

Técnico em Informática. Web JavaScript. Profª Ana Paula Mandelli

PROGRAMAÇÃO PARA INTERNET RICA RICH INTERNET APPLICATIONS

Dreamweaver CS6 Plano de Aula - 24 Aulas (Aulas de 1 Hora).

Novo Sistema de Relatórios. Associado. Informação Confidencial

Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina

Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora).

Leonardo Zorzo Carbone. Orientador: Adilson Vahldick

PLATAFORMA SIGA RIO DAS VELHAS MANUAL DO CÓDIGO FONTE

Continuação... Criando a Interface e adiante

M V C, J S O N E X M L P R O F. M E. H É L I O E S P E R I D I Ã O

Iteradores. Iteradores. Isabel Harb Manssour. Roteiro. Coleções

Plano de Aula - Dreamweaver CS5 - cód Horas/Aula

GERAÇÃO DE ARQUIVOS DE SCRIPT EM PHP. Acadêmico: Leonardo Sommariva Orientador: Alexander Roberto Valdameri

Sumário do Plano de Testes

Adicionando mais tags HTML

Programação para Web I Desenvolvendo templates com Facelets. Prof. Eder de Lima Lacerda

Software Para Geração de Consultas e Relatórios

Enums em Java: utilização e persistência

ClassGenerator - Desenvolvendo aplicações em PHP com qualidade e eficiência.

Orientação a Objetos AULA 09

VANTAGENS DE USAR APACHE MAVEN NA PROGRAMAÇÃO.

De Olho na Pista. Documento de Arquitetura. De Olho na Pista Documento de Arquitetura Data: 23/03/2013. AJA Software

Padrões de codificação Java (JSF)

1º No módulo de Gestão Contábil é possível acessar o relatório através do menu Relatórios Diário.

Programação Cliente em. jquery. Fontes: Wendell S. Soares e vinteum.com

Desenvolvimento Web II

ALUNO: RONI FABIO BANASZEWSKI

PROGRAMAÇÃO PARA INTERNET RICA RICH INTERNET APPLICATIONS

DMS - DOCUMENTO DE MODELAGEM DE SISTEMA VERSÃO: [NOME DO SISTEMA] [SIGLA] [AUTORES]

DreamweaverCC Plano de Aula - 24 Aulas (Aulas de 1 Hora).

CENTRO PAULA SOUZA ETEC PADRE JOSÉ NUNES DIAS APLICATIVOS INFORMATIZADOS WORD 2007 PROFESSORA: ALINE PRISCILA SCHMIDT ALUNO:

Tutorial sobre o uso da ferramenta de autoria A Ferramenta de Autoria - Célula

Referência =SOMA(C20:C30) =SOMA(VendasDoPrimeiroTrimestre) Constante =PRODUTO(A5,8.3) =PRODUTO (Preço,ImpostoSobreVendasDeWA)

Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI.

Plano de Aula - DreamWeaver CC - cód Horas/Aula

10. Páginas internas. Note que este poderá não ser o Menu que você está acostumado, pois cada ambiente é customizado de uma maneira diferente.

pgmodeler: muito mais que um modelador de bancos de dados PostgreSQL

Aula 5 POO 1 Encapsulamento. Profa. Elaine Faria UFU

Java Server Faces Navegação de

Versão Melhorias e Correções Patch. Versão Fevereiro de 2018 Versão Correções e Melhorias

Documento de Arquitetura de Software- SGE

Unidade 7: Documentação de Código A Importância dos Comentários Prof. Daniel Caetano

Aula 03 - Trabalhando com listas de dados I. Aula 03 - Trabalhando com listas de dados I. Sumário. Introdução

INFORMÁTICA (PC-SP / ESCRIVÃO / VUNESP / 2014)

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

3 Ferramenta Proposta 3.1. Objetivos

Manual de Versão Sistema Condomínio21

Anexo I. Recomendações para construção de páginas acessíveis para o EAD da Universidade Caixa.

ADIANTI FRAMEWORK PARA PHP

FORMATAÇÃO: WRITER. Avalie esse tutorial

Open Day Bibliotecas ElipseX

5 Arquitetura de implementação

Java Server Faces 2.0 Rich Faces 4.0

Manual do Professor AVA - Moodle/Unesp (versão 3.0) Grupos e agrupamentos

Manual do Aplicativo de Configuração

Utilizando os Custom Data Attributes da HTML5

Dreamweaver CS5 -5- CAPÍTULO 1... Iniciando e conhecendo o dreamweaver...8 Interfaces...23 Criando e confi gurando sites...24 Exercícios...

Projeto Físico. Guia Rápido Do Desenvolvedor

Sumário. 1- Notícias. 1.1 Publicando uma nova notícia Blocos de edição

INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT

Atividade 08 - Utilizando Collections - List

Informática Parte 23 Prof. Márcio Hunecke

Classes e Objetos. Sintaxe de classe em Java

(UFF) JSF (I) TEPIS II

Introdução a Tecnologia da Informação

Com esse novo menu será possível suportar o novo padrão de aplicações desenvolvidas em HTML5 através do Framework HTML.

JavaScript (Elementos de Programação e Programação Básica)

Manual Sistema de Automação de Pedidos Data C

Aula 11 Introdução ao Java Script

Visão geral dos relatórios de tabela dinâmica e de gráfico dinâmico

DESVENDANDO O FRAMEWORK ANGULARJS 1. Ricardo Wiesner 2, Gerson Battisti 3.

Tarlis Portela Web Design HTML

UNIVERSIDADE FEDERAL DO VALE DO SÃO FRANCISCO UNIVASF SECRETARIA DE TECNOLOGIA DA INFORMAÇÃO STI DEPARTAMENTO DE SISTEMAS DE INFORMAÇÕES

Especificações e limites de planilha e de pasta de trabalho

Neste tópico, você conhecerá a ferramenta Solution Packager, usada por parceiros e fornecedores de soluções de software para criar soluções prontas

Desenvolvimento Web II

Introdução ao Javascript

Curso online de. Formação em Front-End. Plano de Estudo

ADIANTI FRAMEWORK PARA PHP

Versão do documento agosto Usando recursos avançados de geração de relatórios Soluções Ariba On-Demand

Transcrição:

Frameworks RIA para JSF 2.0 lado a lado (Exibição de Dados) Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces, abordando os seus componentes de Exibição de Dados. 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 softwares através de componentes configuráveis, diminuindo o tempo 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 baseadas 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. 53

: : www.mundoj.com.br : : 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 referê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 JavaScript. 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 desenvolvimento 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 diferenciação dos componentes, separamos por cor. IceFaces = verde, PrimeFaces = turquesa e RichFaces = vermelho. RichFaces IceFaces PrimeFaces <rich:datatable> <ice:datatable> <p:datatable> <rich:datagrid> <rich:datascroller> <ice:datapaginator> <p:datagrid> <rich:column> <ice:column> <p:column> <rich:datalist> <ice:dataexporter> <p:datalist> <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 necessarios public 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. É importante 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 camadas. 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 implementação JSF, porém cada framework disponibiliza ainda um conjunto de atributos específicos. Dos atributos em comum, podemos destacar: 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. 54

Listagem 3. Datatable para IceFaces. <ice:datatable id= iddatatable <ice:column> > <ice:outputtext value= Nome /> <ice:outputtext value= #{usuario.nome} /> </ice:column> <ice:column> <ice:outputtext value= Idade /> <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. 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>, declarar 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 figura 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 previouspagelinklabel 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. <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 /> Figura 1. Componente Datatable nos frameworks IceFaces, RichFaces e PrimeFaces. <f:facet name= next > <ice:outputtext value= próximo /> </ice:datapaginator> </h:form> 55

: : www.mundoj.com.br : : Listagem 5. Datatable com paginação no PrimeFaces. <p:panel header= DataTable com Paginação style= width: 350px > <p:datatable rows= 2 paginator= true paginatorposition= bottom > //implementação das colunas conforme Listagem 3 com alterações de prefixo Cont. Listagem 7. Datatable com ordenação no IceFaces. <ice:commandsortheader columnname= Nome arrow= true > <ice:outputtext value= Nome /> </ice:commandsortheader> <ice:outputtext value= #{usuario.nome} /> </ice:column>... </ice:datatable> </h:form> Listagem 6. Datatable com paginação no RichFaces. <rich:panel id= PainelDatatable style= width:210px header= DataTable com Paginação > <rich:datatable id= iddatatable rows= 2 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> Listagem 8. Datatable com ordenação no PrimeFaces. <p:panel header= DataTable com Ordenação style= width: 300px > <p:datatable dynamic= true > <p:column sortby= #{usuario.nome} > <h:outputtext value= Nome /> <h:outputtext value= #{usuario.nome} /> </p:column> <p:column> <h:outputtext value= Idade /> <h:outputtext value= #{usuario.idade} /> </p:column> </p:datatable> </p:panel> </h:form> Listagem 7. Datatable com ordenação no IceFaces. Figura 2. Componente DataTable com Paginação nos Framework IceFaces, RichFaces e PrimeFaces. DataTable com Ordenação <ice:datatable id= datatbl columnclasses= columnscolumn sortascending= true sortcolumn= Nome > <ice:column> 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 necessidade de uma tag específica para ordenação. Outra característica do recurso no IceFaces é que deve ser implementado o método de ordenaçã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 observaçã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 cabeçalho. Outra característica da coluna ordenável é a presença do 56

í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á ordenada de forma alfabética, ou seja, como String, para ordená-la numericamente (-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, ocorre 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. 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 coluna 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 faudacchum in reo Catiam. Tam est perem videesus vitiem Romnes condit, crum idi pons ficorununit. Catimunia nem. Hos, quam <rich:panel style= width:300px; header= Datatable Filtro > <rich:datatable id= dt columns= 2 > <h:outputtext value= DataTable /> <rich:column width= 100px filterby= #{usuario.nome} filterevent= onkeyup > <h:outputtext value= Nome /> <h:outputtext value= #{usuario.nome} /> </rich:column> <rich:column width= 100px filterby= #{usuario.idade} filterevent= onkeyup > <h:outputtext value= Idade /> <h:outputtext value= #{usuario.idade} /> </rich:column> </rich:datatable> </rich:panel> </h:form> Figura 3. Componente Datatable com ordenação no framework PrimeFaces. O componente datatable com ordenação para o framework RichFaces é semelhante ao PrimeFaces, alterando somente os prefixos do framework para <rich:datatable> e <rich:column>. DataTable Com Filtro O filtro é um recurso que permite ao usuário localizar um determinado 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á 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. 57

: : www.mundoj.com.br : : 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 redimensionamento 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. Listagem 10. Alterando tamanho da coluna com IceFaces. <ice:datatable id= datatbl columnclasses= columnscolumn resizable="true" width="200"> 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. A Listagem 11 apresenta a opção de redimensionamento individual 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. Listagem 11. Alterando tamanho da coluna com PrimeFaces. <p:datatable > Figura 6. Componente extendeddatatable do Framework RichFaces. <p:column resizable= true > <h:outputtext value= Nome /> #{usuario.nome} </p:column> <p:column resizable= true > <h:outputtext value= Idade /> #{usuario.idade} </p:column> </p:datatable> 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. 58

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 atributos 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. Cont. Listagem 13. DataGrid para RichFaces. <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> Listagem 12. DataGrid para PrimeFaces. <p:panel header= DataGrid style= width: 400px > <p:datagrid columns= 2 rows= 4 paginator= true effect= true > <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> Figura 7. Componente DataGrid nos frameworks PrimeFaces e RichFaces. 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>. Listagem 14. DataList para PrimeFaces. <p:panel header= DataList style= width: 500px > 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 componentes, é 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. Listagem 13. DataGrid para RichFaces. <rich:panel header= DataGrid style= width:400px; height:250px; > <rich:datagrid columns= 3 elements= 9 > <p:datalist rows= 4 itemtype= circle > #{usuario.nome}, #{usuario.idade} </p:datalist> //outras implementações modificando o itemtype </p:panel> <h:outputtext value= Usuário /> <h:panelgrid columns= 2 > 59

: : www.mundoj.com.br : : Listagem 15. DataList para RichFaces. <rich:panel header= DataList style= width:400px; height:250px; > <rich:datalist 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 PrimeFaces. 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 diferentes, tanto ícones quanto caracteres. Já no painel à direita, a implementaçã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 ordenaçã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. Listagem 16. DataExporter para PrimeFaces. <h:commandbutton value="exportar em XML"> <p:dataexporter filename= tabela target= iddate type= xml /> </h:commandbutton> 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 exceçã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. DataExporter Figura 8. Componente DataList do frameworks PrimeFaces e RichFaces. Uma observação importante é que cada tipo de arquivo para exportaçã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. Este componente, existente apenas nos frameworks PrimeFaces e IceFaces, promove a exportação dos dados tabulados por componentes DataTable em arquivos do tipo XLS, PDF, CSV ou XML. Os componentes citados têm diferentes fucionamentos, inclusive 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 comentado, 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. 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 extendeddatatable, no RichFaces é o mais completo com recurso de customização e maior flexibilidade ao usuário. No entanto, o framework não apresenta possibilidade de exportação, o que perde muito 60

tratando de aplicações Web, cujos usuários em sua maioria utilizam 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 populares. 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 dynamic 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 componentes 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 componentes 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 componentes 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! Referências 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/icefacesdevelopersguide.pdf RichFaces Developer Guide, http://docs.jboss.org/richfaces/latest_3_3_x/en/devguide/pdf/richfaces_reference.pdf PrimeFaces User s Guide, http://primefaces.googlecode.com/files/primefaces_ users_guide_190410.pdf 61