Olá desenvolvedores, neste tutorial iremos organizar o formulário que desenvolvemos utilizando o PanelGrid uma extensão do JSF que traz, inclusive, recursos responsivos. Ele é um painel que renderiza elementos HTML, e que foi desenvolvido especialmente para se trabalhar com formulários transformando os campos em elementos de uma tabela.

IMPLEMENTANDO O PANELGRID

A utilização do “grid” é também bem simples. Deveremos envolver todos os componentes que se encontram dentro da tag <h: form> pela tag <h:panelGrid>. Não envolva os elementos do dataTable.

Só por envolvermos os componentes pelo h:panelGrid poderemos dispensar o uso da tag <br> para promover a quebra de linha. Ele tem como padrão organizar os componentes em uma única coluna, assim precisamos informar que os queremos organizados em duas colunas.

<h:panelGrid columns:”2”>

ADICIONANDO BOTÕES AO PANELGRID

Mas temos implementado em nosso formulário três botões, e a forma mais simples de alinharmos um ao lado do outro é deixando-os do lado de fora de “grid”.

No entanto, se quisermos mantê-los dentro do h:panelGrid alinhando-os com o formulário, teremos que informar que se trata de um grupo por meio do h:panelGroup. Os botões serão então alinhados em uma única coluna.

Então adicionamos um h:outputLabel sem nada dentro para que quando o panelGrid fizer a leitura, ele entenda o h:outputLabel e o h:panelGroup como sendo dois componentes. Dessa forma ele agrupará os três botões dentro de uma mesma coluna, atribuindo uma melhor aparência ao formulário.

<h:outputLabel>

DEFININDO UM CABEÇALHO

Podemos também definir um cabeçalho para o formulário com o f:facet que torna possível adicionar um componente aninhado em outro. Assim, atribui-se o ao “facet” o name “header” para que o panelGrid o identifique como sendo um cabeçalho.

EM POUCAS PALAVRAS

Então é isso desenvolvedores, entendendo como o panelGrid e o panelGroup funcionam, e principalmente como funcionam em conjunto, além de compreender como os componentes são organizados em colunas, ficará muito mais fácil estruturar seus formulários.