Genexus e JavaScript: Utilizando external object

Qual programador Genexus já não fez uma porção de gambiarra para executar códigos javascript nos programas web? A versão 15 trouxe uma feature que facilita muito esse trabalho, agora podemos utilizar um ExternalObject para chamar funções customizadas em javascript e aproveitar uma série de benefícios, tais como:

  • Disparar um evento Genexus a partir de um Javascript;
  • Disparar um evento Javascript a partir do código Genexus;
  • Compartilhar valores de variáveis, incluindo SDTs e collections, entre o código Genexus e o javascript;
  • Rastreabilidade das chamadas Javascript (isso torna o código mais legível e fácil de dar manutenção).

Testamos a solução, ficamos bem feliz com o resultado e resolvemos compartilhar. Foi montado um caso de uso com o seguinte cenário:

  • Criado um objeto Javascript para testar a passagem de valores entre o Gx e o JS;
  • Método JS para imprimir e modificar os valores provenientes do Genexus;
  • Execução de um evento GX a partir de um Javascript.

External Object:

O External object tem três agrupamentos:

  • Propriedades: As propriedades são valores que serão integrados entre os códigos Genexus e Javascript. Nesse exemplo utilizamos campos do tipo String, Numeric e SDT.
  • Methods: Como o nome já diz, é um método javascript. No exemplo fizemos uma chamada a um método JS passando um parâmetro.
  • Eventos: Eventos Genexus que o código JS pode disparar.

A primeira configuração é nas propriedades do External Object, temos que preencher o campo “JavaScript External Name”, no meu caso preenchi o campo com o valor “ExternalJS”. Você pode colocar o que quiser, apenas tenha em mente que essa será a identificação do seu objeto JavaScript.

Properties

No Segmento properties, cada campo declarado deve ter a propriedade “Is Static = True” e um External name, que deverá ser o nome da variável criado no código javascript.

A declaração desse objeto no código javascript ficará da seguinte maneira: var ExternalJS={paraum:”TesteJS”,paradois:0,paratres:”paratres”,paraquatro:[]};

Método

Cada método adicionado deve ter a propriedade “Is Static = True” e um External name, que deverá ser o nome da função criada no código javascript. 

É possível configurar os parâmetros da função logo abaixo do método (sem grandes mistérios). Tome cuidado para que o external object seja configurado conforme o método javascript.

Events

Cada evento deverá ter um External Name.

Código Javascript

O Código javascript não tem muito mistério, mas é preciso seguir o padrão sugerido pelo Genexus.

  • As propriedades devem estar declaradas dentro de um objeto. Neste caso o nome do Objeto é ExternalJS, o mesmo utilizado no External Name do External Object.

Dentro do objeto os parâmetros devem ter o mesmo nome do External Name das properties no External Object.

  • O método também deve estar relacionado ao objeto, perceba que o prefixo também é ExternalJS.  O nome do método deve ter o mesmo nome declaro no External Name do método no External Object.
  • Para disparar um evento genexus basta usar o comando “gx.fx.obs.notify (external name do evento)

Código Genexus

Se tudo foi configurado corretamente, será possível montar o código Genexus abaixo.

Evento Start: Carrega o arquivo javascript.

Event Start

       Form.HeaderRawHTML += ‘<script src=”gxexternalobj.js”></script>’

       &testestr = ”

Endevent

Evento do Usuário: atribui valores as variáveis e chama o método javascript.

Event ‘teste’

       do ‘loadsdt1’

       externalJS.paraum = “a”

       externalJS.paradois = 2

       externalJS.paratres = ‘tres’

       externalJS.paraquatro.Add(&sdttesteitem)

       do ‘loadsdt2’

       externalJS.paraquatro.Add(&sdttesteitem)       externalJS.Alerta(‘parametro’)

Endevent

Evento disparado pelo código Javascript:

event externalJS.Clickum

       &testestr = externalJS.paratres

Endevent

196 Views
2019-03-30T12:11:01-03:00 By |.NET, Extensions, Java|0 Comentários

Sobre o Autor:

Avatar
Trabalha na AGL Solutions e é entusiasta de Tecnologia e métodos ágeis, sua forma de interação e resultados que proporcionam.

Deixar Um Comentário