Olá desenvolvedores, neste tutorial criaremos um formulário utilizando a biblioteca de componentes PrimeFaces. Como já visto em uma “BREVE INTRODUÇÃO” o PrimeFaces traz vários componentes prontos que possibilita um aumento de produtividade a partir de um rápido desenvolvimento onde o programador poderá centralizar sua atenção na parte lógica.

ESTRUTURANDO A PÁGINA

Faça uma cópia da página index.xhtml do projeto pos-java-maven-hibernate que estamos reaproveitando, e renomeie a página para primefaces.xhtml. Manteremos da página original as declarações de bibliotecas dentro da tag html e a estrutura. Apague todo o conteúdo envolvido por esta estrutura. Repare que como o PrimeFaces não possui as tags body e form, recorreremos aos componentes do JSF – JavaServerFaces, para obter a estrutura padrão da página .

FORMULÁRIO COM PRIMEFACES

Agora poderemos seguir com a criação do formulário usando o PrimeFaces. Seguiremos os mesmos princípios adotados com a implementação do formulário com o JSF.

Desse modo, dentro de h:form, insira o p:panelGrid que será estruturado diferente do que fizemos com o JSF, em apenas uma coluna que conterá o rótulo e o componente de entrada de dados, respectivamente. No contexto do PrimeFaces, o panelGrid tem a função de agrupar recursos.

<p:panelGrid columns=“1”></p:panelGrid>

Dentro do p:panelGrid estruturaremos o formulário, definindo as colunas com o componente p:column. O primeiro campo, o “id”, que será somente de leitura (readonly), terá um label, p:outputLabel, que é o rótulo identificador do campo, e o p:inputText, cujo valor apontará para o “id” do objeto usuarioPessoa do ManagedBean.

É interessante observar que como reaproveitamos um projeto JSF, não será preciso alterar nenhuma linha de código do ManagedBean, porque utilizaremos todos os métodos e objetos que já temos prontos do JavaServer Faces.

Agora implementaremos os componentes de interação do formulário, onde o usuário deverá preencher com os dados solicitados. O princípio é o mesmo, um rótulo e um componente de entrada de dados, no entanto, estes próximos campos não receberão o atributo readonly.

Veja na imagem o exemplo referente ao nome, e assim você deverá proceder com a implementação dos campos referentes ao sobrenome, e-mail, idade, login e senha. Atente-se para o fato de que o campo de senha deverá ser p:password.

EM POUCAS PALAVRAS

Uma vez que você conhece as tags HTML se torna fácil a associação com o JSF – JavaServer Faces, e uma vez que você entende a implementação com o JSF, utilizar o PrimeFaces será um processo intuitivo. E no caso de quaisquer dúvidas, consulte a documentação.