Javascript com JSF

Front-end
#1

Ae pessoal me ajudem,

Estou usando javascript, junto com minhas páginas de JSF. Fiz um javascript que mostra uma paleta de cores, seleciono uma cor dessa paleta e quero colocar a cor em formato RGB (Ex. #FFFF00) em um <h:inputText>. Só que não existe a propriedade “name” no inputText do JSF.

<h:commandButton onclick="showColorPicker(this,document.forms[0].rgb)" value="Legenda"/> <h:inputText id="rgb" title="rgb" value="#{avaliacaoConfiguracao.avaliacaoConfiguracao.legenda}"/>

Não consigo setar o inputText, mesmo passando o campo “rgb”. Alguém sabe me dizer se isso funciona com JSF? Estou fazendo algo errado? Valeu ae!

#2

Você não vai conseguir passar o campo rgb porque o id dele não será apenas “rgb” (lembrando que ele é gerado com base na árvore de componentes do JSF).

Você pode usar o tomahawk pra forçar o id ou então criar um “alias” para esse input (fica bacana, eu fiz isso e sobrescrevi a função ‘$’ do prototype pra poder usar javascript a vontade com JSF).

#3

Ataxexe,

Infelizmente eu não posso usar outro framework no meu projeto que gera Ajax, tou usando o RichFaces por imposição do cliente.

[quote]
ou então criar um “alias” para esse input (fica bacana, eu fiz isso e sobrescrevi a função ‘$’ do prototype pra poder usar javascript a vontade com JSF).[/quote]

Sinceramente eu não sei oq você fez ai em cima, você pode explicar melhor? ;D
Valeu!

#4

É o seguinte: eu fiquei muito puto por não poder controlar o ID dos meus componentes no browser, então eu criei uma tag para colocar em qualquer componente.

Essa tag vai pegar o id que o componente visual terá no browser (pelo método getClientId) e renderizar uma tag cujo id seja o nome definido na tag e o atributo “name” seja o id real do componente jsf.

Como a função ‘$’ do prototype retorna algo parecido com document.getElementById (tem mais coisa no meio, mas é basicamente isso), eu reescrevi ela para verificar se o elemento em questão é um elemento que se refere a outro (nesse caso eu usei um title com o valor “alias_jsf”) e, caso for, fiz uma chamada ao document.getElementById usando o atributo name do campo.

É uma gambiarra meio complexa, mas como a única coisa que eu preciso fazer agora é usar um código assim:

[code]<h:inputText blábláblá>
<tag:alias name=“id”/>
</h:inputText>

[/code]

valeu o esforço. Principalmente porque posso usar o Scriptaculous diretamente nos componentes do JSF sem me preocupar com ids.

Não sei se consegui explicar direito a idéia, qualquer coisa posso postar o código aqui pra você ter uma idéia melhor.

#5

Ah, dessa forma o “alias” pode ser uma expressão JSF, coisa que as implementações não deixam você fazer com o atributo ID. Esse lance é ruim porque você fica tendo que fazer componentes JSF pra tudo, inclusive aquilo que 3 linhas em javascript resolvem.

#6

Ataxexe,

Conseguir fazer dessa forma

<h:commandButton onclick="showColorPicker(this,document.getElementById('form:rgb'))" value="Legenda"/> <h:inputText id="rgb" title="rgb" value="#{avaliacaoConfiguracao.avaliacaoConfiguracao.legenda}"/>

Setando meu o name do form.
Aparentemente deu certo ;D

#7

Sim, o que eu não gosto em fazer isso é porque esse ‘form:rgb’ é o JSF que decide colocar, se você mudar a versão da implementação o código pode não funcionar e você vai demorar um tempão pra encontrar esse erro.

Se o seu inputText for para uma tabela, por exemplo, o id seria mais ou menos assim -> ‘form:table:0:1:rgb’. Meio chato de lidar. E ainda tem o problema de o id não poder ser dinâmico (isso me mata de raiva).

Mas mesmo assim eu ainda gosto de JSF…hehehe

#8