Olá desenvolvedores, neste tutorial aprenderemos a importância e como adicionar um placeholder aos componentes do JSF – JavaServer Faces. Tá, mas o placeholder não é importante apenas para aplicações desenvolvidas com JSF. Mas vamos lá, o objetivo do placeholder é especificar uma dica rápida, curta e objetiva que descreve o valor de um campo de entrada, dessa forma a dica aparece no campo antes do usuário inserir um valor.

Não se trata de um atributo que se aplica a todos os campos, mas funciona especialmente para os componentes de entrada, como campo de texto, pesquisa, url – Uniform Resource Locator, telefone, e-mail e senha. E, embora pareça simples demais para que você dê importância a ele, trata-se de um atributo essencial para que seu sistema atenda em partes, os requisitos de usabilidade, tanto quanto o label.

Entenda, o placeholder é tão importante quanto o label, mas não deve em hipótese alguma substituí-lo. No contexto do desenvolvimento o label é uma propriedade rótulo que específica um dado campo. O placeholder atribui informações complementares ao campo, e seu uso tem cunho opcional, ao passo que o label é “obrigatório”, mas recomendo fortemente que você utilize o placeholder.

E A USABILIDADE?

Antes de falarmos da usabilidade de fato, existe um outro conceito igualmente importante que é acessibilidade, esta cumpre o objetivo de quebrar barreiras. A acessibilidade é sobre inclusão, é sobre construir aplicações onde os mais variados tipos de pessoa, tenham elas limitações ou não, possam acessar o conteúdo e interagir com ele com total autonomia.

Isso significa que tanto o placeholder e o label, que são elementos visíveis de uma página, quanto os elementos adicionais são importantes. Nesse sentido, elementos adicionais como a descrição alternativa de imagens, textos simplificados, áreas de cliques maiores entre outros são essenciais.

Voltando ao placeholder, ele deve ser entendido como complementar ao label, no entanto, preferi-lo em detrimento deste é uma má prática de programação, visto que alguns leitores de tela podem não o apresentar de forma correta. E não apenas isso, uma vez que o comportamento padrão do placeholder é desaparecer assim que o usuário começar a digitar, tê-lo como a única orientação pode confundir.

Ao desenvolver um sistema você deve considerar sempre, se a sua aplicação proporcionará uma boa experiência ao usuário, se ela é fácil de usar, se as interações ocorrem de forma objetiva, se a interface não é poluída, entre outras considerações. E para que tudo isso seja possível, é preciso se atentar para os detalhes por mais insignificantes que eles possam parecer. 

Para desenvolver uma boa solução é preciso considerar como o usuário irá interagir com ela, e assim, como você, programador, poderá facilitar essa interação, deixando dicas para o usuário, sem que ele perceba que você o está guiando pelos caminhos da sua aplicação. E neste jogo o placeholder e o label são importantes peças.

PLACEHOLDER NO JSF

Ao longo do desenvolvimento da aplicação que estamos desenvolvendo, o componente h:outputlabel tem sido uma implementação constante, mas não fizemos o mesmo com o placeholder. Até o momento. Então, agora na prática vamos ao nosso projeto descobrir em quais campos podemos adicioná-lo.

Somente na versão 2.2 é que o JSF passou a suportar o placeholder, e para utilizá-lo em suas aplicações, é preciso declarar na página onde o utilizaremos a biblioteca que habilita alguns recursos do HTML5, entre eles, o placeholder.

Na página index.xhtml declare a biblioteca abaixo junto com as outras já declarada. Observe que o prefixo que utilizaremos para referenciar a biblioteca é o “pt”.

<html xmlns:pt= “http://xmlns.jcp.org/jsf/passthrough” >

Embora seja adicionado dentro do campo de entrada como se fosse uma tag, visto que precisaremos chamar a biblioteca por meio do prefixo “pt”, o placeholder é um atributo. Veja abaixo um exemplo de como podemos adicioná-lo a um campo de entrada do JSF.

Proceda da mesma forma para todos os componentes de entrada da aplicação, lembrando que a dica deverá ser curta e objetiva.

EM POUCAS PALAVRAS

Espero que este tutorial tenha deixado claro para você que construir uma aplicação é muito mais do que programar, é muito mais do que linhas de código. É pensar na experiência do usuário, e não no que você, programador, acredita que ele quer.

Você deverá perguntar a ele, levantar requisitos para o sistema junto com sua equipe e não desprezar nenhum elemento. Por menor que seja o valor que um elemento poderá agregar a sua aplicação, o que este elemento agregará será muito importante, para a vida longa que você deseja que seu sistema tenha.