Olá desenvolvedores, neste tutorial adicionaremos o placeholder aos campos de entrada dos componentes da interface desenvolvida com o PrimeFaces. Esta é uma das situações em que o PrimeFaces se distingue do JSF – JavaServer Faces, onde para adicionar um placeholder ao campo de entrada era preciso declarar no cabeçalho a biblioteca que suporta o HTML5, para então poder utilizá-lo como se fosse um atributo.

O placeholder é uma dica e/ou exemplo curto e objetivo sobre o que deve ser preenchido no campo, isto é, sobre o valor esperado em um dado campo de entrada. Ela deve ser apresentada ao usuário antes que ele entre com o valor, e por padão, desaparece assim que ele começa a digitar. Os campos aptos a receberem um placeholder são os campos de texto, pesquisa, url, telefone, e-mail e senha.

O placeholder é um atributo entendido como complementar ao label, mas um não substitui o outro, a boa prática recomenda o uso de ambos os atributos. Assim, além de melhorarmos a experiência do usuário ao interagir com a nossa solução, deixaremos a aplicação mais amigável aos motores de busca e aos mecanismos de acessibilidade.

WATERMARK

Diferente de como é com o JSF, no PrimeFaces o placeholder não é mais usado como um atributo, mas sim como uma tag de componente, p:wartemark, onde o valor é o que será exibido para o usuário em tela.

Além do atributo value, o componente p:wartemark exige ainda o atributo for que deve receber o id do componente para qual o “placeholder” está sendo implementado. O mesmo procedimento deverá ser repetido para os outros campos de entrada.

EM POUCAS PALAVRAS

Repito sempre que a simplicidade, praticidade e objetividade juntamente com uma boa experiência de navegação, são elementos imprescindíveis em um sistema. No entanto, para conseguir tudo isso é preciso estar atento aos detalhes, por mais insignificante que ele pareça, não negligencie os pequenos detalhes, eles podem representar a diferença entre o uso ou abandono da solução que você desenvolveu.