Efeito Jquery em uma WebPanel - Genexus

Bom pessoal, vamos a mais um post a respeito de jquery. Esta biblioteca que tanto tem crescido no desenvolvimento de aplicações web, acredito que, por permitir trabalhar com javascript de uma forma muito fácil e prazerosa. Os efeitos abrangentes são fantásticos, muitas vezes quando achamos que um site foi programado em flash, por permitir interações através da movimentação do mouse, vamos mais a fundo, visualizamos seu código fonte, e eis que esse efeito é nada mais que um plugin desenvolvido em jquery.

Hoje vou mostrar o desenvolvimento de um efeito de slide a uma camada de Filtro, que tanto utilizamos nos nossos Patterns. Neste caso, a camada de Filtro se iniciará Invisível para o usuário, porém com a possibilidade de expandi-la através de um TextBlock.

Ao tentar realizar este exemplo me deparei com alguns bugs tanto do Internet Explorer (quase extinto, finalmente) quanto do próprio Genexus. O IE não trata o slideToggle (função jquery), da mesma forma que os outros browsers, ao realizarmos o efeito ele parece piscar, cada vez que é executado. Já no Genexus, a função slide parece não respeitar as tabelas, textblocks, variáveis presentes na tela.

Porém com um pouco de pesquisa cheguei a uma solução, para realizarmos o efeito da forma desejada precisaremos executar três funções do jquery, são:

slideToggle()	hide() - show()
Exemplo slideToggle()	Exemplo hide() e show()

------------------------------------------------------------------------------------------------------------

Vamos lá então, em uma Web Panel crie a seguinte estrutura de tabelas em "Form":

Legenda:
      Vermelho: Tabela principal (2 Row/1Column)
      Verde: Tabela - ControlName: Table_Slide (Height:50px, Width: 100%)
      Azul: Tabela - ControlName: Table_Filtro (Height:20px)
      "Expandir": TextBlock - ControlName: TB_Expand

Em Eventos:

Event Start
//=====Adiciona estilos - css às tabelas "filtro" e "slide"=====
Form.HeaderRawHTML = '<style>'
Form.HeaderRawHTML += '#TABLE_FILTRO{display:none;} #TABLE_SLIDE{display:none;}'
Form.HeaderRawHTML += '</style>'

//=====Adiciona biblioteca jquery - mais recente=====
Form.HeaderRawHTML += '<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>'

//=====Inclui função de slide=====
Form.HeaderRawHTML += '<script type="text/javascript">'
Form.HeaderRawHTML += '$(function() {'

//=====Ao clicar sobre o TextBlock TB_Expand - "Expandir"=====
Form.HeaderRawHTML += '$("#TB_EXPAND").click(function() {'

//=====Se a Tabela Filtro estiver invisível=====
Form.HeaderRawHTML += 'if($("#TABLE_FILTRO").css("display") == "none"){'

//=====Tabela Slide - aparece através de slide=====
Form.HeaderRawHTML += '$("#TABLE_SLIDE").slideToggle(400, function() {'

//=====Tabela Filtro se torna visível=====
Form.HeaderRawHTML += '$("#TABLE_FILTRO").show(300);});'

//=====Se a Tabela Filtro estiver visível=====
Form.HeaderRawHTML += '}else{'

//=====Tabela Filtro se torna invisível=====
Form.HeaderRawHTML += '$("#TABLE_FILTRO").hide(300, function() {'

//=====Tabela Slide - some através de slide=====
Form.HeaderRawHTML += '$("#TABLE_SLIDE").slideToggle(400);})}});'
Form.HeaderRawHTML += '});' 
Form.HeaderRawHTML += '</script>' 
EndEvent

Event TB_Expand.ClickEndEvent

Por fim, teremos uma tela semelhante a esta abaixo, onde ao clicar sobre o TextBlock "Expandir" a Tabela em Azul realiza um Slide up/down: