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):

Download de Arquivos - Web

Bom dia pessoal, este post é bem simples, iremos ver como podemos possibilitar a opção de "Salvar como" arquivos gerados por nossa aplicação para o usuário final.

Utilizando este método podemos controlar o tipo de documento que será salvo e o nome padrão que irá aparecer para o usuário. Dessa forma podemos gerar Logs Diários das alterações do Banco de Dados em .txt passando a Data como Nome Padrão. Em alguns casos necessitamos gerar documentos, por exemplo .txt, em nossa aplicação web para que o usuário possa exportar este arquivo gerado. Porém se utilizarmos uma variável do tipo blob, nossas ações estarão limitadas aos métodos default do Genexus. Assim, ao realizar a soliticação a opção de Salvar irá aparecer:

Neste exemplo adicionei um botão à minha WebPanel, com o Evento "Salvar", logo quando este botão for clicado o seguinte evento irá ocorrer:

Event 'Salvar'
 //=====Extensao do Arquivo=====
 &Extensao = 'txt'
 do case
  case &Extensao = 'txt'
   &contenttype = 'text/plain'
 endcase
 
 //=====Nome a ser gerado=====
 &Date = ServerDate()
 &Nome = &Date.Year().ToString().Trim()+PadL(&Date.Month().ToString().Trim(),2,'0')+
 PadL(&Date.Day().ToString().Trim(),2,'0')+'.txt'
 
 //=====Source do Arquivo=====
 &Arquivo = 'Destino\Teste.txt'
 
 RealizaDownload.Call(&contenttype,&Arquivo,&Nome)
EndEvent

No código acima, uma Procedure (RealizaDownload) é chamada passando 3 parâmetros:

1. contentType (tipo do documento) - aqui você encontra os tipos existentes (xls/doc/etc);
2. Arquivo (Caminho onde o arquivo se encontra);
3. Nome(Nome padrão do Documento a ser Salvo).

Já  procedure terá o seguinte código:

Rules:

parm(in:&contenttype,in:&filepath,in:&DocumentoNome); 

Events:

&HttpResponse.AddHeader('Content-Type', &contenttype)
&HttpResponse.AddHeader('Content-Disposition',"attachment;filename="+&DocumentoNome)
&HttpResponse.AddFile(&filepath)

Properties:

Main program: true
Call protocol: Http

Genexus SDT - Parte III

Nesta terceira parte sobre o assunto Genexus SDTs, iremos aprender um pouco sobre como apresentar os SDTs em Web Panels.

A Parte I - criação deste tipo de dado, e a Parte II - inserção de valores nos darão a base para esta continuidade.

Porém para ampliar a nossa percepção de utilidade deste tipo de dado (SDT), irei utilizar um novo exemplo, ao fim do nosso exercício iremos ter um formulário semelhante a este:

Primeiramente iremos criar o Objeto SDT, que será o nosso Grid da tela, semelhante a este:

Após iremos inserir as variáveis que iremos utilizar para desevolver este formulário:

OK, após adicionar as nossas variáveis, iremos criar a tela, neste exemplo foram inseridos 3 botões, Retornar para retornar para a página anterior, Avançar para avançar para a próxima página do formulário e Adicionar Linha para adicionarmos uma nova linha ao nosso Grid SDT.

Para inserirmos as variáveis SDTs na tela, na Toolbox clicamos em "Attribute/Variables" e arrastamos até a célula que desejamos. Ao arrastar, o Genexus irá abrir uma tela com os atributos e variáveis disponíveis, neste caso clicamos sobre a variável "SDT_Projeto", a variável principal do SDT criado.

Ao clicar sobre esta variável irá abrir a seguinte tela:

Os itens em azuis são aqueles que queremos inserir, clicamos em todos, o check box "ReadOnly" só iremos marcar quando desejamos deixar as variáveis como desabilitadas, e o checkbox "Free Style Grid" só será marcado caso desejamos substituir o Grid em linha pelo Grid Free Style.

Ao clicar em OK, o SDT será inserido na nossa WebPanel, agora podemos controlar a exclusão e adição de linhas ao nosso grid apresentado.

Para inserir o botão de excluir linha (primeiro a esquerda na imagem), clicamos com o botão direito sobre o Grid e após em "Columns..". Com a tela Arrange Columns aparecendo, iremos selecionar a opção "Add", e selecionar a nossa variável "excluir" (Bitmap). Após a adição da variável ao Grid, precisamos escrever os seguintes códigos:

Inserção de Imagem, Tooltip e um comando javascript de confirmação (este comando será executado ao clicar sobre a variável):

No evento Start:

Inserção do código de exclusão de linha.

Para finalizar precisamos inserir o código para o Grid iniciar default contendo uma linha, e a opção de adicionar novas.

Observação: os objetos WebPanels não recebem SDTs como parâmetro, para isto é necessário utilizar o método WebSession através dos comandos ToXML() e FromXML(), ou ToJson() e FromJson().

No evento Start:

Inserir nova linha ao Grid:

Para finalizar, procurem sempre salvar este SDT em sessões (WebSession) ao clicar nos botões "Avançar" e "Retornar".