ExtJS e programação funcional – 2

{ January 15th, 2013 }


cmilfont

Autor: cmilfont

[disclaimer]
Os códigos desse post estão no Gist do Github, se não aparece no seu leitor de Feeds vai ter que entrar no site ou ir direto para o github
[/disclaimer]

Continuando a falar sobre programação funcional com o Framework ExtJS, vou avançar sobre a API que fornece funções úteis para trabalhar sob esse paradigma e quando a abordagem complica a leitura, principalmente para quem não tem tanta intimidade com essa forma de pensar.

Imagine o seguinte Widget abaixo que tem a responsabilidade de plugar uma função para observar o evento busca de outro componente.

Se voce observar atentamente, o mapeamento é feito um-para-um com uma função que já existe no componente final, inclusive com a mesma quantidade de parâmetros, vimos no artigo passado que bastaria plugar a função diretamente e controlar o escopo this dessa função.

Agora imagine que o componente Sorteio tem mais uma responsabilidade no momento que o botão de outro componente for acionado, ele precisaria limpar a área de um terceiro componente, teríamos que voltar o código do primeiro exemplo e fazer aquele mapeamento em um método do próprio componente Sorteio:

Bem, com as funções encontradas no objeto Ext.Function podemos mapear diretamente os métodos dos responsáveis principais sem a necessidade de uma terceira função no objeto Sorteio numa abordagem mais FP aproveitando funções úteis que encadeam execuções e retornam outra funções com a sequência desejada.

A assinatura de colocar um listener escutando um determinado evento é:

this.sorteioform.on("busca", fn, escopo);

Desejamos executar duas funções de objetos distintos em uma sequência lógica, mas só podemos plugar uma única função por vez. Existe um método createSequence que fornece esse comportamento desejado, observe:

var fn = Ext.Function.createSequence(fn1, fn2, escopo);

Esse método gerará uma terceira função com o this dentro dela referente ao escopo passado no terceiro argumento e executará as duas funções – fn1 e fn2 – na sequência indicada.

Poderíamos simplesmente encadear as duas funções dos dois objetos na assinatura

var fn = Ext.Function.createSequence(this.concorrentes.listar, this.ganhadores.update, this.concorrentes);

Mas tem somente um problema, a função this.ganhadores.update precisa receber um parâmetro – no mínimo uma string vazia “” – para ter o comportamento adequado.

Existe uma outra função chamada pass que gera uma outra função com essa característica, voce pode definir uma função com valores previamente definidos caso não haja passagem de parâmetros.

var fn2 = Ext.Function.pass(this.ganhadores.update, "");

Dessa forma basta substituir agora a segunda função da sequência por uma gerada com valores predefinidos.


var fn2 = Ext.Function.pass(this.ganhadores.update, "");
var fn = Ext.Function.createSequence(this.concorrentes.listar, fn2, this.concorrentes);

Para garantir que o update executará no escopo de ganhadores, teríamos que definir o terceiro argumento para ganhadores

var fn = Ext.Function.createSequence(this.concorrentes.listar, fn2, this.ganhadores);

E para garantir que o this no listener execute cada função da sequência nos seus contextos corretos voce define o escopo do on para concorrentes
this.sorteioform.on("busca", fn, this.concorrentes);

O resultado final seria um encadeamento das chamadas como podemos ver logo em seguida:

Se voce comparar com uma abordagem mais tradicional verá que nem sempre é mais fácil de ler, portanto é salutar dosar o uso desse tipo de solução.

Categories: Ext, Programação funcional ~ ~ Trackback


Assine os comentários deste artigo.


Leave a Reply