JSF 2: Exibir mensagens de erro como tooltip

Tendo em mente uma dificuldade já inclusive mencionada por mim em um post anterior, há cerca de 2 anos tive a idéia para implementar essa solução. Resumindo, é uma alternativa para quem tem problemas em exibir mensagens de erro não globais em formulários JSF, uma vez que essas mensagens muitas vezes deformam os formulários e são difíceis de serem acomodadas.

Na imagem abaixo é possível ver um formulário onde tentaram acomodar as mensagens ao lado de cada campo, do jeito “tradicional”, e depois o mesmo formulário usando a solução proposta aqui:

example-tooltip

Dá pra perceber claramente que no primeiro formulário as mensagens acabaram ficando fora de lugar e “deformando” o formulário. Já no segundo caso, só alegria. 🙂

Se você ta exibindo suas mensagens somente na parte superior do formulário, você provavelmente não vai precisar alterar todas as telas do sistema para aplicar essa solução. Somente incluir a tag criada por mim no seu template principal e depois marcar o seu componente <h:messages/> como globalOnly=”true” vai ser suficiente.

Com Primefaces acredito que também seja possível atingir o mesmo resultado apesar de eu particularmente não ter testado. Meu problema surgiu em um projeto que usávamos Richfaces 3, então tivemos que nos virar de outra forma. O que vou demonstrar aqui funciona em qualquer projeto usando Primefaces, Richfaces, ou simplesmente JSF 2 puro. (obs: é perfeitamente possível adaptar o código para ser usado em JSF 1.2. Há um link para baixar tudo no final desse post)

A tag que criei é baseada nessa API jQuery aqui. O desafio consistiu basicamente em fazer com que o próprio JSF use a API jQuery para renderizar as mensagens, excluindo os programadores de ter que usar jQuery manualmente para fazer todas as validações.

First things first

Primeiro uma pequena explicação para aqueles que não sabem. Em JSF, temos basicamente dois tipos de mensagens: As globais e as não globais.
Uma mensagem global pode ser considerada aquela que não é particular a nenhum campo do seu formulário. Por exemplo em um cadastro de usuário podemos exibir uma mensagem de erro avisando que no horário atual não é permitido fazer cadastros. Não significaria que o usuário tenha digitado o valor errado em qualquer campo.
Já as mensagens não globais são melhor caracterizadas por mensagens que são específicas de um campo: “A data de início está inválida”; “O nome é obrigatório”. Nesses casos, é razoável que o erro seja exibido exatamente ao lado do campo que está inválido. Para isso que existe um componente <h:message/> (no singular) que possibilita exibir uma única mensagem de um campo, e provavelmente será colocado ao lado dele.

Para as mensagens globais acredito que a maneira mais comum é exibi-las na seção superior do formulário. Você fatalmente vai precisar delas no seu sistema, então aquele <h:messages/> (no plural) vai ter sim utilidade. Se as demais, não globais, estão tirando o seu sono, continue lendo 🙂

How To

Resumo do passo a passo:

  1. Fazer download do .jar (link no final do post) e colocar no classpath do seu projeto.
  2. Declarar namespace http://rodrigouchoa.com/jsf na sua página JSF.
  3. Incluir a tag <tooltipMessages/> DEPOIS de todos os campos do seu formulário.

Eu imagino que o normal seja colocar os componentes de mensagens somente no template principal do sistema, então declarar o namespace no seu template JSF iria ser algo parecido com:

&lt;html   xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
        xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;
        xmlns:f=&quot;http://java.sun.com/jsf/core&quot;
        xmlns:h=&quot;http://java.sun.com/jsf/html&quot;
        xmlns:t=&quot;http://rodrigouchoa.com/jsf&quot;&gt;

Já na sua página é só incluir a tag DEPOIS de todos os campos do formulário, ou simplesmente fora dele como mostra o exemplo abaixo:

&lt;ui:insert name=&quot;body&quot;&gt;
&lt;!-- todos seus forms e inputs estarão aqui --&gt;
&lt;/ui:insert&gt;

&lt;t:tooltipMessages id=&quot;msgs-id&quot;/&gt;

Pra quem já está usando Richfaces ou Primefaces, faz sentido colocar a tag dentro de um <a4j:outputPanel ajaxRendered=”true”/> ou <p:outputPanel autoUpdate=”true”> para garantir que as mensagens sejam exibidas em submissões ajax:

&lt;ui:insert name=&quot;body&quot;&gt;
&lt;!-- todos seus forms e inputs estarão aqui --&gt;
&lt;/ui:insert&gt;

&lt;!-- Richfaces --&gt;
&lt;a4j:outputPanel ajaxRendered=&quot;true&quot;&gt;
    &lt;t:tooltipMessages/&gt;
&lt;/a4j:outputPanel&gt;

&lt;!-- Primefaces --&gt;
&lt;p:outputPanel autoUpdate=&quot;true&quot;&gt;
    &lt;t:tooltipMessages/&gt;
&lt;/p:outputPanel&gt;

É isso. Os links para baixar os binários e o código fonte “mavenizado” estão logo abaixo. Qualquer dúvida é só deixar um comentário!

Baixe o arquivo jar somente com os binários aqui.
O projeto maven com o código fonte está aqui.

10 thoughts on “JSF 2: Exibir mensagens de erro como tooltip

  1. nao funciona para primefaces:

    org.primefaces.context.PrimeFacesContext cannot be cast to com.sun.faces.context.FacesContextImpl

  2. Boa tarde Rodrigo,
    Tentei utilizar sua solução pois achei interessante, porém não estou obtendo sucesso.
    A versão do Prime que estou utilizando é a 5.1.
    Sabe me dizer se nesta versão funciona?
    Desde já, obrigado.

    • Oi Bruno!
      Esse post ja deve ter uns dois anos, então certamente não foi nas versões recentes do Prime.
      Eu vou dar uma verificada assim que puder pra tentar corrigir o codigo e coloco no github
      Abraço !

      • Blz Rodrigo!
        Depois de seu comentário é que fui verificar a data de seu post e percebi que já fazia 1 ano e meio. Infelizmente ainda não achei nenhuma solução tão boa quanto essa, na questão de exibição das mensagens em forma de tooltip e todas visíveis. Eu consegui, porém o tooltip só é exibido quando passado o mouse em cima (ai não é interessante pois o usuário não tem como saber o que deu erro ou não).
        Ficaria grato se conseguisse ao menos dar uma olhada em sua solução para a atual versão do prime.
        Desde já, muito obrigado pela atenção.
        Abraço.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s