{"id":705,"date":"2009-07-02T12:11:42","date_gmt":"2009-07-02T19:11:42","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/?p=705"},"modified":"2009-07-03T06:19:56","modified_gmt":"2009-07-03T13:19:56","slug":"extjs-e-dwr","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2009\/07\/02\/extjs-e-dwr\/","title":{"rendered":"Extjs e DWR"},"content":{"rendered":"<p><script type=\"text\/javascript\"> function get_style705 () { return \"none\"; } function end705_ () { document.getElementById('wqd705').style.display = get_style705(); } <\/script>Nesse artigo eu pretendo trabalhar dois conceitos principais de uso do <a href=\"http:\/\/www.milfont.org\/tech\/tag\/extjs\/\">Extjs<\/a>, extens\u00e3o\/customiza\u00e7\u00e3o de componentes e acesso a dados server-side com base em experi\u00eancia recente em um projeto que desenvolvemos. Esse projeto em quest\u00e3o \u00e9 um ERP que tinha a necessidade de manter a usabilidade similar a sua vers\u00e3o antiga, feita em Delphi, para o desktop.<\/p>\n<p>Para suprir essa necessidade de usabilidade tivemos que adotar alguns conceitos, como ser totalmente stateless e modificar a arquitetura MVC2 para o <a href=\"http:\/\/www.milfont.org\/tech\/2008\/09\/08\/mvc-model-3-e-camadas\/\">MVC3<\/a>. No server-side trabalhamos com um domain model baseado em Hibernate, Spring e Facades e Services com DWR. Nada de frameworks MVC2, n\u00e3o nos preocupamos com renderiza\u00e7\u00e3o e sim com a API. No lado cliente usamos Extjs com algumas modifica\u00e7\u00f5es que fiz para integrar de forma suave com o DWR.<\/p>\n<p>Primeiro precisamos entender como o Extjs trabalha com heran\u00e7a. Basicamente h\u00e1 um m\u00e9todo no objeto Ext que faz esse trabalho de extens\u00e3o dos componentes, funciona da seguinte maneira:<\/p>\n<pre lang=\"javascript\">\r\n\/\/Formato:\r\nvar NovoComponente = Ext.extend(velhoComponente, { \r\n          \/* metodos e propriedades que ser\u00e3o reescritas *\/ \r\n});\r\n\r\n\/\/Exemplo:\r\nvar MilfontGridPanel = Ext.extend(Ext.grid.GridPanel, {\r\n        \/\/novo construtor\r\n        constructor: function(config) {\r\n            \/\/ Seu preprocessamento vai aqui\r\n        \tMilfontGridPanel.superclass.constructor.apply(this, arguments);\r\n            \/\/ Seu pos-processamento vai aqui\r\n        },\r\n\r\n        NovoMethod: function() {\r\n            \/\/ algum novo m\u00e9todo que voc\u00ea queira criar para o novo componente\r\n        }\r\n    });\r\n<\/pre>\n<p>Para esse projeto, criei um Ext.data.DataProxy (<a href=\"http:\/\/www.milfont.org\/tech\/2009\/06\/29\/introducao-ao-ext\/\">como visto no artigo passado<\/a>) especialista para o DWR, criativamente denominado DWRProxy. A id\u00e9ia \u00e9 modificar o comportamento de buscar os dados para usar um <a href=\"http:\/\/www.milfont.org\/tech\/tag\/dwr\/\">Creator do DWR<\/a>.<\/p>\n<p>Definimos primeiro o objeto e suas propriedades necess\u00e1rias:<\/p>\n<pre lang=\"javascript\">\r\nExt.ux.data.DWRProxy = function(dwr_facade, dwr_filter, dwr_errorHandler){\r\n\r\n    Ext.ux.data.DWRProxy.superclass.constructor.call(this);\r\n\r\n\t\/* Propriedade que receber\u00e1 a classe Java configurada como Creator *\/\r\n    this.data = dwr_facade;\r\n    \/*\r\n\t * Propriedade que receber\u00e1 uma classe java configurada como converter\r\n\t * que servir\u00e1 como filtro de busca\r\n\t *\/\r\n\r\n\tthis.dwr_filter = dwr_filter;\r\n\r\n\t\/**\r\n\t *\r\n\t * Propriedade para fazer pagina\u00e7\u00e3o, indica que deve cachear a consulta de\r\n\t * total de elementos o controlador [fachada] deve implementar a logica de\r\n\t * negocios adequada, quando for false consulta o total, quando for true\r\n\t * consulta apenas a listagem e repete o total\r\n\t *\/\r\n\r\n\tthis.dwr_total_cache = false;\r\n\r\n\tthis.dwr_errorHandler = dwr_errorHandler;\r\n\r\n};\r\n<\/pre>\n<p>Ap\u00f3s isso extendemos do Ext.data.DataProxy :<\/p>\n<pre lang=\"javascript\">\r\nExt.extend(Ext.ux.data.DWRProxy, Ext.data.DataProxy, {\r\n\r\n    \/**\r\n     * M\u00e9todo Load do Ext.data.DataProxy overrided\r\n     *\/\r\n\r\n    load : function(params, reader, callback, scope, arg) {\r\n\r\n\t\/**\r\n\t * Escopo \"this\" mapeado para a vari\u00e1vel \"s\" porque dentro do callback do\r\n\t * DWR o escopo \"this\" n\u00e3o pertence ao objeto Ext.ux.data.DWRProxy.\r\n\t *\/\r\n\r\n\tvar s = this;\r\n\r\n        params = params || {};\r\n\r\n        if(params.cache != undefined) {\r\n\t\tthis.dwr_total_cache = params.cache;\r\n\t}\r\n\r\n\tif(params.filter != undefined) {\r\n\t\tthis.dwr_filter = params.filter;\r\n\t}\r\n\r\n        var result;\r\n\r\n        try {\r\n\t\tthis.data(this.dwr_filter, params.start, params.limit, this.dwr_total_cache, {\r\n\t\t\tcallback:function(response) {\r\n                                \/\/aqui passamos o retorno do DWR \r\n                               \/\/ que chamei de response,  para o extjs\r\n\t\t\t\tresult = reader.readRecords(response);\r\n\t\t\t\tcallback.call(scope, result, arg, true);\r\n\t\t\t},\r\n\t\t\terrorHandler:function(a, e) {\r\n\t\t\t\tscope.fireEvent(\"loadexception\", s, arg, null, e);\r\n\t\t\t\ts.dwr_errorHandler(a);\r\n\t\t\t},\r\n\t\t\ttimeout:100000\r\n\t\t});\r\n\r\n\t\tthis.dwr_total_cache = true;\r\n\r\n        } catch(e) {\r\n            this.fireEvent(\"loadexception\", this, arg, null, e);\r\n            callback.call(scope, null, arg, false);\r\n            return;\r\n        }\r\n\r\n    }\r\n\r\n});\r\n<\/pre>\n<p>A fachada DWR \u00e9 uma classe comum, segue um exemplo de uso com Hibernate:<\/p>\n<pre lang=\"javascript\">\r\n\/\/classe para satisfazer o transporte para o Extjs\r\npublic final class DataTransferObject {\r\n    private int total;\r\n    private List<? extends Object> results;\r\n    \/\/sets e gets\r\n}\r\n\r\npublic class AjaxFacade {\r\n    \/\/injeta um repositorio, whatever\r\n    private Repository repository = null;\r\n\r\n    public DataTransferObject find(Object filter, int start, int limit, boolean cache, HttpSession session) {\r\n        DataTransferObject dto = new DataTransferObject();\r\n        \/\/verifica se o Proxy est\u00e1 passando true \r\n        \/\/ indicando que est\u00e1 paginando\r\n        if (cache) {\r\n            Integer total = (Integer) session.getAttribute(\"totalObject\");\r\n            dto.setTotal(total);\r\n       } else {\r\n            session.removeAttribute(\"totalObject\");\r\n            Integer total = repository.count(filter);\r\n            dto.setTotal(total);\r\n            session.setAttribute(\"totalObject\", total);\r\n        }\r\n        List<Object> retorno = (List<Object>) repository.find(filter, start, limit);\r\n        dto.setResults(retorno);\r\n        return dto;\r\n    }\r\n\r\n<\/pre>\n<p>Para o Grid visto no artigo passado, basta instanciar assim no javscript:<\/p>\n<pre lang=\"javascript\">\r\nvar store = new Ext.data.Store({\r\n    proxy: new Ext.ux.data.DWRProxy(\r\n        AjaxFacade.find, \r\n        {$dwrClassName:\"Project\"}, \r\n        errorHandler\r\n    ),\r\n    reader: new Ext.data.JsonReader({\r\n            root: 'results',totalProperty: 'total',id: 'id'\r\n        }, \r\n        ['id', 'name', 'manager.name', 'manager.address.country']\r\n    )\r\n});\r\n<\/pre>\n<p>Para entender o<em> {$dwrClassName:&#8221;Project&#8221;}<\/em> <a href=\"http:\/\/www.milfont.org\/tech\/2008\/12\/24\/dwr-3-release-candidate-1\/\">visite esse post<\/a>.<\/p>\n<p>Dessa forma o DWR se torna um proxy para todos os componentes do Extjs.<\/p>\n<p>C\u00f3digo fonte da modifica\u00e7\u00e3o do javascript eu <a href=\"http:\/\/github.com\/cmilfont\/MilfontExtjs\/tree\/master\">coloquei aqui no github<\/a> e uma <a href=\"https:\/\/github.com\/cmilfont\/example-dwr-extjs\/tree\">aplica\u00e7\u00e3o demo aqui<\/a>. No pr\u00f3ximo vou integrar o DWR com o Rails, aguardem que sai logo&#8230; ou n\u00e3o.<\/p>\n<p id=\"wqd705\">Typically chemist&#8217;s shop can sale to you with discreet treatments for various soundness problems. There are numerous of safe online pharmacies that will deliver medications to your address. There are divers medicines for each afflictions. Learn more about &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra manufacturer coupon<\/a>&#8220;. Maybe &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra discount coupons<\/a>&#8221; is a highly complicated question. Matters, like &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">coupons for viagra<\/a>&#8220;, are connected numerous types of health problems. If you need to take recipe medications, ask your pharmacist to check your testosterone levels before. Sometimes the treatment options may include erectile malfunction remedies or a suction device that helps get an erection. Keep in mind web-site which is ready to sell erectile dysfunction drugs like Viagra without a prescription is fraudulent. When you purchase from an unknown web-site, you run the risk of getting counterfeit remedies. <\/p>\n<p><script type=\"text\/javascript\"> end705_(); <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nesse artigo eu pretendo trabalhar dois conceitos principais de uso do Extjs, extens\u00e3o\/customiza\u00e7\u00e3o de componentes e acesso a dados server-side com base em experi\u00eancia recente em um projeto que desenvolvemos. Esse projeto em quest\u00e3o \u00e9 um ERP que tinha a necessidade de manter a usabilidade similar a sua vers\u00e3o antiga, feita em Delphi, para o [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,32,33,28,3,23,4,26,113,24,42],"tags":[379,380,156,361,372,373,398,114],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/705"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=705"}],"version-history":[{"count":23,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":728,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/705\/revisions\/728"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}