Olá desenvolvedores, neste tutorial iremos trabalhar e entender a propriedade id do JSF – JavaServer Faces. Todos os componentes JSF possuem a propriedade ID – Identificador.

A função desses identificadores é para que possamos manipular o componente via identificador referenciando-os no Javascript ou por meio do JavaServer Faces. Mas se você não especificar um nome próprio para o identificador, o JSF se encarregará de fazê-lo, e como ele é gerado de forma aleatória você não terá controle sobre o componente.

ENTEDENDO ID

Na página index.xhtml implementaremos um campo de texto e um botão para exemplificar como podemos manipulá-los por meio do Javascript. O componente commandButton receberá o evento onclick que executará uma função Javascript quando o botão for clicado.

A função Javascript alterarValorDoCampo() será escrita no head, cabeçalho da página. Para obter o elemento com o ID especificado utilizaremos o método getElementById(). Este método retorna o elemento que possui o atributo ID que foi especificado. Assim, ele é usado quase todas as vezes em que precisamos manipular ou obter informações de um elemento.

Desse modo, em document.getElementById(), document é uma referência a DOM – Document Object Model. A DOM é o que chamamos de árvore de elementos do HTML – HyperText Markup Language. Entenda, quando uma página web é carregada o navegador se encarrega de construir a DOM, a estrutura de elementos de uma página HTML.

E ainda, Element é uma referência a um objeto e Id é uma string que especifica maiúsculas e minúsculas representando o identificador único ID do elemento que está sendo procurado. O ID neste caso, faz referência ao campo de texto inputText.

Porém no JSF antes de fazermos a referência ao id do campo de texto, referenciamos primeiro o id do formulário, estas referências serão passadas para uma variável. E será dessa variável a responsabilidade de inserir um dado texto pré-determinado no campo de texto, assim que o botão for clicado.

EM POUCAS PALAVRAS

Neste tutorial vimos um exemplo simples, porém com os elementos necessários para que possa entender a base por traz da manipulação de campos do JSF em uma função Javascript ou do JavaServer Faces.