Olá desenvolvedores, no tutorial de hoje, utilizando Ajax traremos do servidor os dados do objeto colocado em edição. Além disso, adicionaremos imagens que também podemos chamar de icons aos botões de “Editar” e “Delete”.

O Ajax – Asynchronous Javascript and XML, foi criado por Jesse James Garrett, em 2005.O Ajax utiliza objeto XMLHttpRequest para se comunicar com os scripts do lado do servidor. Aliás, é este componente, o XMLHttpRequest, que torna possível a comunicação assíncrona com o servidor.

Esta é a característica mais atraente do AJAX, a sua natureza “assíncrona”, o que significa que ele pode fazer tudo sem a necessidade de atualizar a página. Isso permite a você atualizar partes de uma página com base em eventos do usuário.

No que se refere a adição de imagens aos botões, muito já falamos, em tutoriais anteriores, sobre a importância e o que é usabilidade. A usabilidade define a facilidade com que as pessoas utilizam a sua solução. E acredite, muitos softwares não decolaram por serem, na visão do usuário, difíceis de usar, em outras palavras porque apresentava baixa usabilidade. Ou ainda, porque as melhores práticas para atender às necessidades do usuário não foram consideradas durante a fase de desenvolvimento.

E se a substituição de um texto por um botão pode significar uma melhoria na forma como o usuário interage com a sua aplicação, então, esta é uma importante consideração a ser feita.

ADICIONADO ICONS AS IMAGENS

Para fazer download de icons o site Icons8 é uma boa opção. Escolha os icons que você mais gostar e salve dentro da subpasta resources que deverá ser criada dentro da pasta WebContent.

Dentro do par de tags do componente h:commandLink insira o componente do JSF h:graphicImage, com o atributo url insira o caminho da imagem. Dependendo da dimensão do icon será preciso ajustá-lo, definido a largura e a altura. Proceda da mesma forma com o botão de “Editar”. Lembrando de remover o value, que no momento é o responsável por exibir o texto do botão para o usuário.

ADENDO

Ao clicarmos nos botões de “Editar” ou de “Delete”, embora suas ações estejam funcionando corretamente, o formulário ainda está sendo enviado, exibindo dessa forma as mensagens referentes as regras de preenchimento. Isso não precisa e não deve acontecer. Para solucionar basta adicionar um immediate recebendo o valor true aos botões.

EDIÇÃO DE DADOS COM AJAX

Observe que quando um objeto é colocado em edição, apenas o identificador “ID” que vem da base dados é exibido, os demais campos são exibidos em branco. É neste contexto que usaremos o Ajax, por meio dele enviaremos ao servidor um ID que atribuiremos ao botão correspondente ao objeto que está sendo colocado em edição. Dessa forma o Ajax utilizará este ID para executar o comando e depois irá renderizar o formulário.

EM POUCAS PALAVRAS

Neste tutorial implementamos um adendo na função de “Editar” do nosso projeto utilizando o Ajax. E também adicionamos ícones aos botões de “Editar” e “Delete”.