Olá desenvolvedores, no tutorial de hoje adicionaremos imagens aos botões e links do formulário desenvolvido com JSF – JavaServer Faces e JPA – Java Persistence API.

Você verá que é bem simples, no entanto, o porquê de o fazermos também deve ser considerado e estudado. É realmente frustrante quando após meses, por vezes anos de dedicação no desenvolvimento de uma aplicação, a mesma é abandonada pelos usuários, seja porque eles a acham difícil de usar ou porque não é agradável.

E neste cenário, é a interface da aplicação a grande culpada. Uma aplicação não deve apenas ser eficaz, que significa que as tarefas as quais se propõe a executar são realizadas a contento, isto é, de forma correta e completa.

Também não deve ser apenas eficiente, que é o que a torna eficaz. Em suma estamos falando dos recursos empenhados em seu desenvolvimento. Tais recursos incluem, tempo, dinheiro, memória, enfim, tudo que pode contribuir para que sua aplicação seja eficaz.

Um bom sistema, além de eficiente e eficaz deve proporcionar ao usuário conforto ao interagir com ele, deve dar satisfação ao usuário. De acordo com Jakob Nielsen, considerado o pai da usabilidade e um grande estudioso sobre usabilidade, design e experiência do usuário

Usabilidade é atributo de qualidade para avaliar a facilidade de uso de uma interface. A palavra “usabilidade” também se refere a métodos para melhorar a facilidade de uso durante o processo de design.

É neste contexto que o tutorial de hoje se insere. E é por isso que algo tão simples, é de extrema importância e não deve ser ignorado.

ADICIONANDO IMAGENS AOS BOTÕES

As imagens deverão estar dentro de uma subpasta da pasta “resources”, que por sua vez deverá estar na raiz da página WebContent. O JSF busca por arquivos de forma automática dentro da pasta resources.

Fique à vontade para escolher as imagens, mas você poderá obtê-las em sites específicos como o Icon-Icons.

Alguns componentes JSF possuem a propriedade “image” para que imagens sejam inseridas. Assim, após escolher imagens para os botões “Novo”, “Salvar”, “Remover” e “Limpar” e respectivamente salvá-las dentro da subpasta “img”, adicione a propriedade “image” em cada componente h:commandButton e indique o caminho da imagem referente ao botão.

Também é uma boa prática adicionar a propriedade “title” em cada um dos componentes.

<h:commandButton value=“”, action=“” image=“/resources/img/new_add_user.png” title=“Novo”/>

ADICIONANDO IMAGENS AOS LINKS

O componente h:commandLink não possui a propriedade “image”, teremos então que recorrer ao Graphic Imagen. No componente h:graphicImage o caminho da imagem deverá ser apontado por meio do atributo “value”. Proceda da mesma forma para o botão de editar.

EM POUCAS PALAVRAS

Tendo adicionado imagens aos botões e links, você mesmo poderá constatar a diferença. No entanto, em alguns casos trabalhar o link ou um botão por meio do CSS pode ser o melhor caminho a seguir.

Confira abaixo o resultado da tabela após a substituição dos textos dos links por imagens.