Olá desenvolvedores, neste tutorial nos concentraremos em meios de melhorar o layout de uma aplicação desenvolvida com a biblioteca PrimeFaces. Apesar dessa biblioteca de componentes apresentar elementos com um design mais refinado do que os componentes do JSF – JavaServer Faces, por exemplo, ainda há trabalho a fazer para ajustá-los e torna-los ainda melhores.

Definimos inicialmente no p:panelGrid que o valor do atributo columns indicaria que o formulário seria estruturado em apenas uma coluna. E isso porque quando determinamos duas colunas o PrimeFaces não entende que é para pegar os dois elementos de uma mesma coluna e dividi-los em duas colunas. Ele entende a tag p:column como sendo uma única coluna, e ele não está totalmente errado, então como ajustar isso?

A solução é muito simples, bom, se deixarmos o PrimeFaces criar as colunas, então o que será preciso é suprimir os componentes p:column, sim é isso mesmo que você entendeu, iremos retirar todas as tags column.

Deixaremos apenas o PrimeFaces trabalhando de forma automática na criação das colunas, e assim, sem as tags de componentes p:column ele entenderá e colocará cada elemento em sua respectiva coluna, deixando o formulário com uma estrutura organizada, tal como queremos.

EM POUCAS PALAVRAS

E claro, consultando a versão do PrimeFaces que está utilizando em seu projeto na documentação você pode fazer ainda mais, como por exemplo, reescrever dentro do próprio CSS colocando o !important para sobrescrever o padrão do PrimeFaces.

E ainda, além das melhorias que vem sendo incorporadas a biblioteca desde 2009, ano de seu lançamento, o PrimeFaces possui em sua versão PRO, modelos prontos, e mais, com Designs de temas que contemplam até a infraestrutura SASS – syntactically awesome stylesheets. O SASS é uma linguagem de script interpretada ou compilada em CSS – Cascading Style Sheets.

Agora é com você, estude a documentação, arrisque e faça testes, aproveite a fase de aprendizagem para aprender de modo prático, testando, experimentando e se arriscando.