JavaScript + JSF, será que dá certo?

Quem é analista de sistemas ou programador com certeza já passou por isso, a aplicação está pronta, já na fase de homologação no cliente e o encerragado solta uma pérola querendo alterar a validação de alguns campos, e o melhor “PARA ONTEM!“.

Poderíamos alterar as classes de tratamento para contemplar as novas requisições, porém isso demanda um certo tempo, é custoso e algumas vezes a validação é tão simples que não compensa alterar toda a arquitetura da página para incluí-la, mas então o que fazer? Podemos apelar para o quebra-galhos web universal o JavaScript!

Mas espera um pouco, JavaScript e JSF não combinam muito… Então o que fazer?
Existem alguns “macetes“  para conseguir fazer o JavaScript se comunicar com os componentes criados pela aplicação JSF, e estes macetes você só aprende aqui!

Primeiro:

Tente sempre trabalhar com GetElement!
A estrutura padrão de Html/JavaScript diz que os componentes da página são renderizados de forma hierárquica (document.form.objeto.propriedade), para acessar o valor de um input por exemplo você deveria solicitar “document.formulario.objeto.value”, porém esta forma é um tanto quanto falha, em websites muito dinâmicos nem sempre é possível saber o caminho completo de um componente, então entra em ação o GetElement!

GetElement funcionana mais ou menos assim: Você informa algum parâmetro, e ele varre toda a tela procurando aquele parâmetro, não importa onde ele está se dentro ou fora do formulário, não importa que objeto seja!

Vamos utilizar como exemplo a busca por ID, já que todos os objetos possuem um id, mesmo que você não informe os ids dos seus objetos, eles são criados automaticamente, mas isso é uma má pratica, sempre nomeie seus objetos!

Então digamos que:
Ao clicar no “submit” queremos obter o valor de um input e se for  menor que 10 devemos exibir um alerta informando o usuário, pintar o campo de amarelo e enviar o foco para ele.

Então devemos colocar na tag form a pripriedade onsubmit=”nome_ta_função()”, mas até aqui é normal.

Na função que está o “pulo do gato”:

variavel = document.getElementById(“id_do_campo”).value;
Note que não precisamos indicar o caminho inteiro do campo, apenas que ele está “neste documento“, seu ID e o que queremos dele, no caso o value.

Agora que possuímos o valor, podemos fazer a validação!

if(parseInt(variavel) < 10){

alert(“o valor do campo ” + document.getElementById(“id_do_campo”).name + ” é menor que 10 “);
//Note que aqui a frase será “O valor do campo XXX é menor que 10″

//Agora vamos pintar o fundo do campo!
document.getElementById(“id_do_campo”).style.background = “yellow”;
//Nesta linha alteramos o BackGround do campo para amarelo, através do estilo!

document.getElementById(“id_do_campo”).focus();
//Nesta linha passamos o foco para o campo.

}

Ok, ok, mas eu fiz tudo isso ai e fica dando uma mensagem de erro “Objeto nulo ou inválido….“.

Muito bem, realmente o objeto é nulo, estes comandos funcionam perfeitamente mas em HTML puro, em JSF o javascript não vai conseguir encontrar o campo pelo id normal, por que ele não existe!

O que acontece em JSF é que na renderização das páginas ele nomeia os IDs para NOME_DO_FORMULÁRIO DOIS PONTOS ID_DO_CAMPO.

Ou seja…

Se nosso campo está dentro de um formulario cujo nome é “cadastroForm” e demos o nome de “numero” para nosso input, na renderização da página o JSF vai renomerar automaticamente o id do campo paracadastroForm:numero.

Então… quando você for chamar o campo pelo getElementById, informe formulario:campo, e não somente o id do campo!

E agora funcionou?

Desta forma não é necessário encapsular JavaScript dentro do JSF, nem precisamos alterar a arquitetura inteira para criar uma simples validação, basta utilizar esta dica para desenvolver uma validação simples em JavaScript e em pouquíssimo tempo devolver para o usuário.