JavaScript + JSF, será que dá certo?
Autor: Reinaldo Elias | Publicado: 2011-11-20T01:51:00-02:00

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“&nbsp; 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&nbsp; 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) &lt; 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.