Ext.js Proxy

Falando muito

É comum tornar um sistema que foi ou está sendo desenvolvido por você como coisa pessoal. Muitas vezes uma simples crítica construtiva vinda do usuário com relação à disposição de um ou outro campo pode incomodar muito, porém, em uma visão analítica rasa você percebe que na verdade o sistema é DELE, logo ele tem todo o direito de falar e alterar o que bem entender, certo?

Dada esta arrasadora realidade, uma boa saída para evitar dores de cabeça com estas “pequenesas” é iniciar o sistema já pensando em agradar o dono do mesmo. Existem diversas maneiras de se fazer isto, algumas delas envolvem fazer com que o usuário participe ativamente do processo de prototipação, outros gostam que o próprio usuário crie sketches do que ele imagina ser o ideal e, em alguns casos, conseguimos utilizar um sistema legado como base. Tudo isto facilita muito conseguir um nível alto de assertividade quando a entrega for realizada, porém, nada te garante que a felicidade do usuário será completa e quanto à inconstância do humor do usuário não existe muito o que se possa fazer.

Bom, além das possibilidades de definição de layout citadas anteriormente, existem ainda os casos (cada vez mais comuns pelo que tenho visto) onde nada disto é possível, seja por que o usuário não quer opinar neste assunto*, ou não têm “criatividade” para te ajudar*,  ou por que ele confia no seu trabalho*. Nestes casos é bom que você tenha uma carta muito boa na manga, e é aí que nosso amigo Ext entra no jogo.

Fato é que utilizar o Ext em um projeto dá a ele um boost na possibilidadede aceitação por parte do usuário e, pelo menos no meu caso, cria uma interessante sensação prazerosa em ter o controle total da interface que não tinha desde meus primórdios no mundo do desenvolvimento web quando ainda criava layouts no FrontPage(sic).

Ext em ação

Ext em ação

No geral, consumir o Ext em um projeto não deve ser problema algum se você já tem experiência com JavaScript. Toda a estruturação dos objetos, disposição, comportamento é configurado via acesso às propriedades e métodos disponíveis no framework. O aprendizado é razoavelmente rápido e o resultado final, como venho dizendo desde é o começo, é impressionante a ponto de fazer com que um dos caras que trabalham comigo aqui me perguntar “é HTML isto aê?”.

Mas…

Em um cenário onde você já possui toda uma arquitetura estruturada, implementar o Ext pode ser um pouco complicado. Apesar da infinidade de opções que a Lib te dá para customizar os acessos à dados, acho que se existe algum ponto fraco que precisa ser trabalhado, seria este.

No geral, se você já sabe que vai utilizar o Ext desde o começo do projeto, você pode ser programar para adaptar ou criar formas especializadas de prover dados em formato JSON para a biblioteca de forma a facilitar sua vida em rotinas como paginação. No meu caso, popular a grid foi algo muito rápido e simples. Sofri mesmo para conseguir que a paginação funcionasse adequadamente.

A única forma que encontrei foi criar uma especialização do objeto DataProxy de forma a permitir que eu trabalhasse o JSON que envio e recebo do server adicionando os parâmetros necessários para que o objeto de paginação se comportasse adequadamente. A outra opção seria adaptar boa parte da minha lógica implementada pela Factory para realizar este trabalho.

Bom, sem mais delongas, segue o código do proxy que criei para realizar esta customização juntamente com os comentários de onde e o que fazer para consumir esta customização no seu código, permitindo que você utilize o Ext em seus projetos sem grandes problemas.

var IGINCProxy = function(procedure) {
    Ext.data.HttpProxy.superclass.constructor.call(this);
    this.timeout = 90000;
}
Ext.extend(IGINCProxy, Ext.data.DataProxy, {
    doRequest: function(action, rs, params, reader, cb, scope, arg) {
        var o = {
            method: "POST", /// HttpMethod que será utilizando para acessar os dados (ex.: GET/POST/PUT/DELETE...)
            url: "http://www.seusite.com/servico/",  /// Url que será acessada pelo proxy...
            jsonData: [ { info : "" } ], /// JSON que será enviado para o servidor / NULL caso não seja necessário enviar nada...
            request: {
                callback: cb,
                scope: scope,
                arg: { "params": params }
            }, /// Recomendo deixar este parametro desta forma...
            reader: reader, /// Recomendo deixar este parametro desta forma...
            callback: this.createCallback(action, rs), /// Método que será invocado após a realização do request
            scope: this, /// Recomendo deixar este parametro desta forma...
            timeout: this.timeout /// Tempo que será definido como timeout
        };
        Ext.Ajax.request(o);
    },
    createCallback: function(action, rs) {
        return function(o, success, response) {
            if (!success) {
                if (action === Ext.data.Api.actions.read) {
                    this.fireEvent('loadexception', this, o, response);
                }
                this.fireEvent('exception', this, 'response', action, o, response);
                o.request.callback.call(o.request.scope, null, o.request.arg, false);
                return;
            }
            if (action === Ext.data.Api.actions.read) {
                /// Neste escopo, a resposta do servidor pode ser acessada dentro do objeto
                /// 'response'. Aqui você pode alterar/customizar este ojbeto de forma a permitir
                /// que sua aplicação se comporte exatamente como você deseja
                result = o.reader.read(response);
                if (result) {
                    this.fireEvent('load', this, o, o.request.arg);
                }
                o.request.callback.call(o.request.scope, result, o.request.arg, result.success);
            }
        }
    },
    load: function(action, rs, params, reader, cb, scope, arg) {
        this.fireEvent('load', this, action, rs, params, reader, cb, scope, arg);
    }
});

* Invariavelmente isto muda quando o sistema é entregue

Um comentário

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: