mai 06

Jquery com JSF

Quem trabalha com JSF com certeza já viu os ids dos elementos html gerados por ele da seguinte maneira  form:idElementoPai:idElemento . Mesmo usando a propriedade prependId = false da tag h:form alguns elementos aninhados ganham o id do pai.

Se você usa javascript puro para buscar os elementos pelo id utilizando document.getElementById(“form:idElementoPai:idElemento”) não temos problema algum, tudo funciona! Porém quando utilizamos jquery , a seleção de um elemento por id $(‘#form:idElementoPai:idElemento’)  simplesmente não funciona, e muitas vezes adotei a alternativa de buscar pelo seletor de classe, me obrigando a adicionar classes css únicas(mas não é necessário defini-las em um arquivo css, basta declarar no elemento).

Porém é possível sim utilizar o seletor do Jquery nesses casos desses ids compostos, bastando adicionar o \\ antes do caracter :(dois pontos)  ficando da seguinte maneira:

$('#form\:idElementoPai\:idElemento')

jun 06

Substituindo window.confirm() por jquery dialog

Para quem não conhece, jQuery é uma biblioteca javascript que simplifica e muito a programação em tal linguagem, com componentes visuais já prontos e fáceis de usar, além de interação ajax fácil e raidamente implementáveis. Tanto é bom que no framework primefaces, que pra mim é o melhor framework para jsf2 no momento, o utiliza.

Apresentações a parte, vou falar nesse post sobre como substituir as janelinhas de confirm nativas do javascript por outras mais agradáveis visualmente utilizando o jQuery junto com a jQuery UI.

Primeiramente você deve baixar os arquivos .js necessários e também ao baixar o jQuery UI escolher o tema de sua preferência para baixar o css necessário. Nesses links abaixo você poderá baixar aa útimaa versões  do jQuery e jQuery UI, podendo baixar a versão completa com comentários e identada, ideal para desenvolvimento e a minificada, ideal para ambientes de produção.

Após feitos os downloads você deverá adicionar ao seu projeto esses 3 arquivos no mínimo para funcionar (As versões aqui apresentadas são as últimas minificadas até esse post):

  • jquery-1.6.1.min.js
  • jquery-ui-1.8.13.custom.min.js
  • jquery-ui-1.8.13.custom.css

Com os arquivos baixados será necessário importá-los em suas página:

<link rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" type="text/css" media="all" />
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>

Agora vamos ao que indica o título do post,  para que não sabe  confirm() é uma função javascript que exibe uma tela de confirmação, nossa! Como é óbvio,  com as opções de OK e Cancelar, retornando true ou false segundo o que foi selecionado. É bem simples, bastando usar dentro de um bloco de script o seguinte código:

var resposta = confirma("Tem certeza que deseja fazer isso?");


Porém essas janelinha mostrada pelo navegador não possui um layout muito bonito digamos assim, que coisa afeminada, mas cliente é cliente, e normalmente como diz o ditado peixe morre pela boca, levando para o lado da computação:  usuário  gosta mais do visual do sistema do que de suas funcionalidades.
Com isso utilizando jQuery, você consegue agregar um valor muito grande ao seu produto final, pois as interfaces são muito ricas e, o melhor de tudo, muito simples de se utilizar (para nós programadores).  Para substituir o confirm você pode utilizar o componente dialog do jQuery UI, mais precisamente um do tipo modal confirmation, não deixa de ser um dialog, mas com os devidos parâmetros setados ele fica com a cara de um confirm.Abaixo segue o código para tal:

function confirmJquery(message, titulo, f) {

	$("#dialog-confirm").dialog( {
		modal : true,
		resizable : false,
		width : 450,
		title : titulo,
		buttons : {
			"Sim" : function() {

				
				f(true);
				$(this).dialog("close");

			},
			"Nu00E3o" : function() {

				
				f(false);
				$(this).dialog("close");
			}

		}
	});
	$("#dialog-confirm").html("<p><span class='ui-icon ui-icon-help' style='float:left; margin:0 7px 50px 0;'></span>"+ message+"</p>");

}

Explicando o código, essa função deve ser chamada passando como parâmetro a mensagem a ser exibida, o título da caixa de diálogo e uma função javascript que receba como parametro uma variável booleana. E agora você se pergunta, mas por que isso? Seguinte, como o confirm() pára o processamento, o código que vem após ele não é executado enquanto o usuário não selecionar uma opção. Porém ao se utilizar o dialog do jQuery, ele vai criar o modal panel e continuar executando, portanto caso você tenha algo que dependa da resposta dada pelo usuário, quando o usuário clicar na resposta já terá passado pelo código, daí a necessidade de se continuar a lógica em outra função.

Por fim é necessário adicionar uma div no corpo da página com o id, no caso do meu exemplo , dialog-confirm:

<div id="dialog-confirm" >
</div>

e pronto, agora é só chamar a função confirmJquery(“mensagem”,”Titulo”,f), e você terá o funcionamento do dialog como um confirm.