Bibliotecas de componentes JSF

O objetivo é conhecer bibliotecas de componentes JSF e o porquê de incluir uma no seu projeto. Existem diversas, mas a que usaremos para exemplificar o processo é o PrimeFaces, a que mais se tem afirmado no mundo das interfaces-utilizador para Java.

Este é o quarto artigo da série JSF:

  1. Introdução ao JSF
  2. Ambiente de desenvolvimento
  3. Backing beans
  4. Bibliotecas de componentes

Comecemos pelas definições. Componentes (por vezes chamados de widgets) são controlos GUI (Graphical User Interface), autónomos e reutilizáveis: tabelas, mapas, menus, diálogos, árvores de navegação, painéis, etc.
Uma biblioteca (ou suite) de componentes é “apenas” um pacote de diversos componentes; é orientada a uma linguagem client/server-side (JSF, ASP.NET, PHP, JavaScript, etc.). Estes componentes são as “moléculas” de uma interface-utilizador. Quando conjugados corretamente, ajudam a construir aplicações web complexas (RIA), poupando muito trabalho ao programador: têm imensas funcionalidades bem testadas e eventualmente úteis (lazy scroll, ordenação múltipla em colunas, filtragem server-side, gestão de estado de componente, validação client/server de input, localização, acessibilidade WAI-ARIA, tecnologias push etc.).

Uma biblioteca, se for server-side, irá eventualmente dar origem a (muito) código client-side (HTML, CSS e JavaScript). Isto pode gerar imenso código no lado do cliente que nunca será usado. Assim, é importante que perceba quando deve começar a expandir um projeto com bibliotecas. Ao fazê-lo, está a colocar algum peso extra que se materializa num projeto mais pesado, em deploy e em runtime (no caso de bibliotecas client-side, o peso é mais em runtime). Na realidade, a maioria das vezes não é necessário: os elementos HTML são suficientes. Outras vezes, componentes feitos por si chegam para as necessidades. Antes de considerar uma biblioteca server-side considere algo leve em client-side (ex. jQuery UI). Se a interface-utilizador for mais complexa, pode ir pelo caminho client ou server-side (mas essa decisão é tema de outra discussão).

Se está a criar uma RIA (ex. um backoffice) em Java, que dependa de muitos componentes complexos com necessidades Ajax, então provavelmente está a tomar uma boa decisão ao considerar uma biblioteca de componentes JSF. Existe uma imensidão de bibliotecas, pelo que deve ir por eliminação de hipóteses. Assumindo que quer ir para algo server-side (e não uma suite de componentes JavaScript) deve olhar apenas para as da sua tecnologia de base (Java+JSF, .NET+ASP, PHP, etc.). Depois, pode usar uma matriz de decisão.

As mais conhecidas são o RichFaces, o ICEFaces e o PrimeFaces; recomendo ver as suas showcases para ter uma ideia do que é possível e qual lhe pode ser mais útil:

Acima de tudo, tente maximizar a correspondência entre os componentes que precisa ou vai precisar e os que a biblioteca oferece. Depois, pode ter em conta características comuns de uma biblioteca de componentes:

  • HTML5: se os componentes geram código HTML5
  • Touch: quando os componentes respondem corretamente a movimentos touch (tap, swipe, etc.)
  • Mobile friendly: até que ponto os componentes se adaptam a diferentes dispositivos (i.e. se são responsive)
  • Ajax based: o suporte que cada componente oferece para comunicação por Ajax (imperativa em aplicações web)
  • Progressive enhancement: quando os componentes têm versões mais simples em ambientes mais limitados, em vez de não funcionarem
  • Skinning/theming: até que ponto é possível trocar de tema ou até criar o seu.

Além disso, deve analisar a sua licença, a sua documentação/comunidade e o seu suporte pelo seu IDE de eleição (embora este não seja determinante).


Vejamos como colocar o PrimeFaces no seu projeto (e porquê o PrimeFaces?; ver comparação). Assume-se aqui que já tem o ambiente de desenvolvimento JSF preparado (e está a usar o NetBeans).

Considerando que está a usar o último NetBeans, deve:

  1. Atualizar os plugins do NetBeans (‘Tools’ > ‘Plugins’ > ‘Check for Updates’ > ‘Update’ > …)
  2. No seu IDE, deverá adicionar a biblioteca ao projeto. A forma mais rápida de o fazer é: botão direito no projeto > ‘Properties’ > ‘Frameworks’ > ‘Components’ > Ativar ‘PrimeFaces’ > ‘OK’. O IDE trata de adicionar a biblioteca (seja diretamente via jar ou via Maven, consoante o tipo de projeto)
  3. Agora, dirija-se a uma página de Facelets (ex. index.xhtml) e coloque o seguinte código Facelet:
    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:p="http://primefaces.org/ui">
       <h:head>
          <title>Relógio PrimeFaces</title>
       </h:head>
       <h:body>
          <p:clock />
       </h:body>
    </html>
  4. Corra o projeto e verifique que um relógio apareceu:

Repare no código acima. A primeira parte a negrito representa uma referência ao namespace da biblioteca PrimeFaces (taglib). Abaixo tem o código do relógio: muito simples porque não tem atributos, embora pudesse ter.
Experimente agora outros atributos do componente assim como outros componentes. De notar que não precisa correr o projeto por cada alteração nos Facelets.

Use e abuse do autocomplete do IDE, para o ajudar (comece por digitar <p:):

One thought on “Bibliotecas de componentes JSF

Deixar uma resposta