Genexus e Jquery

Genexus e Jquery é uma poderosa combinação capaz de expandir as nossas idéias ao criar novos projetos. Esta biblioteca Javascript, lançada em 2006 possui código aberto e é capaz de simplificar a utilização do Javascript. Cada vez mais os principais portais brasileiros como Terra, Globo e Uol, vêm utilizando do Jquery para aumentar a interação com o usuário. Em relação ao Genexus, podemos perceber esta influência ao visualizar os User Controls atualmente disponíveis. A grande maioria deles utiliza o Jquery, e alguns inclusive são plugins Jquery sem nenhuma alteração adaptados para serem utilizados como user controls.

Caso o leitor se interesse pelo assunto, poderá aprender um pouco através de apostilas, slides e vídeos distribuídos na internet. Porém como pré-requisitos deve-se conhecer lógica de programação e o próprio Javascript. 

Recomendo a leitura dos seguintes links: 

1. http://www.slideshare.net/1Marc/jquery-essentials
2. http://www.slideshare.net/simon/learning-jquery-in-30-minutes
3. http://www.youtube.com/watch?v=_iRIPJHrdXg&feature=fvst

Neste post irei demonstrar uma simples utilização do Jquery em um formulário desenvolvido através do Genexus. Neste simples exemplo os "inputs" disponíveis em tela irão alterar o seu estilo quando focados.

Para isto irei utilizar o plugin disponível em http://buildinternet.com/live/jqueryform/jqueryform1.php.

O primeiro passo para a utilização da biblioteca Jquery é adicionar um link para a biblioteca que contém os métodos ou funções.

No evento Start inserimos:

Form.HeaderRawHTML = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>'

Após isto será criado o documento formulario.css que contém as definições dos estilos serem inseridos. Este documento será criado na pasta web da aplicação e irá conter somente o código:

<style type="text/css">
    #status{
        width:50%;
        padding:10px;
        height:42px;
        outline:none;
    }
    .focusField{
        border:solid 2px #73A6FF;
        background:#EFF5FF;
        color:#000;
    }
    .idleField{
        background:#EEE;
        color: #6F6F6F;
        border: solid 2px #DFDFDF;
    }        
</style>

Assim como a biblioteca Jquery, este documento .css será inserido na aplicação através do código:

Form.HeaderRawHTML += '<link rel="stylesheet" type="text/css" href="formulario.css"/>'

Após, o código Jquery responsável por realizar a troca dos estilos é inserido no Evento Start, abaixo das adições anteriores:

&Item = "input[type='text']"
Form.HeaderRawHTML += '<script type="text/javascript">'
Form.HeaderRawHTML += '$(document).ready(function() {'
Form.HeaderRawHTML += '$("'+&Item.Trim()+'").addClass("idleField");'
Form.HeaderRawHTML += '$("'+&Item.Trim()+'").focus(function() {'
Form.HeaderRawHTML += '$(this).removeClass("idleField").addClass("focusField");'
Form.HeaderRawHTML += 'if (this.value == this.defaultValue){'
Form.HeaderRawHTML += 'this.value = "";'
Form.HeaderRawHTML += '}'
Form.HeaderRawHTML += 'if(this.value != this.defaultValue){'
Form.HeaderRawHTML += 'this.select();'
Form.HeaderRawHTML += '}'
Form.HeaderRawHTML += '});'
Form.HeaderRawHTML += '$("'+&Item.Trim()+'").blur(function() {'
Form.HeaderRawHTML += '$(this).removeClass("focusField").addClass("idleField");'
Form.HeaderRawHTML += 'if ($.trim(this.value) == ""){'
Form.HeaderRawHTML += 'this.value = (this.defaultValue ? this.defaultValue : "");'
Form.HeaderRawHTML += '}'
Form.HeaderRawHTML += '});'
Form.HeaderRawHTML += '});'
Form.HeaderRawHTML += '</script>'

Ao compilar a aplicação iremos ter o seguinte resultado (o campo em foco irá conter outro estilo):