Olá desenvolvedores, neste tutorial iremos descobrir como criar uma tabela organizada e estilizada com o Facelet, que é mais um recurso do JSF – JavaServer Faces. Com o objetivo de facilitar o desenvolvimento de um UI – User Interface o JSF utiliza vários outros recursos dentro dele mesmo.

Por padrão utiliza-se o “http://java.sun.com/jsf/html”, declaração que permite o uso do HTML – HyperText Markup Language, dentro do JSF. No entanto, para recursos avançados como por exemplo, a definição de cabeçalhos e rodapés em um dataTable precisaremos do Facelet.

O Facelet – f:facet, permite a adição de um componente de UI aninhado em outro. Dessa forma, os desenvolvedores poderão implementar livremente um componente Facelet mais complexo do que um simples atributo.

O Facelet é usado com componentes como o h:dataTable e h:column. Mas para a utilização deste no recurso declararemos mais uma biblioteca e a referenciaremos por meio do prefixo “f:”.

A utilização deste recurso é bem fácil, até o momento estamos acostumados com o uso do prefixo h: seguida do nome ou de uma tag HTML que conhecemos bem, ou do nome de um componente específico do JSF. Para o Facelet utilizaremos f:facet. Com o atributo name, definiremos se a tag se refere ao header (cabeçalho) ou ao footer (rodapé).

Assim, logo após a abertura da tag h:dataTable defina um cabeçalho para a tabela, algo como, “Lista de usuários”, por exemplo.

<f:facet name= “header”>Lista de usuários</f:facet>

E como queremos definir um cabeçalho para cada coluna da tabela, repetiremos a linha de código acima dentro de cada par de tags h:column, atribuindo ao cabeçalho o nome correspondente para cada uma das colunas, ID, Nome, Sobrenome, E-mail, Login e Idade.

ESTILIZAÇÃO DA TABELA

Claro que podemos estilizar ainda mais a tabela utilizando recursos de CSS – Cascading Style Sheets. Desse modo podemos utilizar o “cellpadding” para determinar uma distância da borda até seu conteúdo ou o “cellspacing” que determina uma distância entre as células da tabela. E ainda, é possível inserir uma borda, onde um valor do tipo inteiro determinará a espessura da borda. Estes atributos deverão ser definidos dentro da tag h:dataTable.

 <h:dataTable value=“” cellspacing= “5” border= “1”>

EM POUCAS PALAVRAS

O Facelet serve para muito mais do que apenas definir cabeçalhos e rodapés de uma tabela, com ele poderemos fazer conversão de datas, números, validações, tornar o preenchimento de um campo obrigatório entre muitas outros recursos para os quais, caso deseja se aprofundar poderá recorrer a documentação.