Ext JS: Trabalhando com Data Binding

Já ouviram falar em Data Binding, ViewModel, MVVM? Não? Então é hora de sair da caixinha e conhecer os mais novos recursos disponíveis do Ext JS.

Hoje vamos aprender um pouco sobre Data Binding e ViewModel no Ext JS e colocar em prática em um pequeno exemplo.

Data Binding e View Model (MVVM)

ViewModel process

ViewModel process

Partes destes recursos já existiam em vários frameworks JavaScript (Angular, Vue.js, entre outros), antes mesmo de lançarem no Ext JS, e para tornar mais completo ainda o framework, a Sencha implementou isso e muito mais a partir da versão 5.0 do Ext JS. Juntos traz muito poder ao framework e a você também.

Uma ViewModel é uma classe que gerencia um objeto de dados. Sendo assim, permite  aqueles interessados nessa informação, vincular a ela e serem notificados quando houver mudanças, sem setBlaBlaBla() e getBlaBlaBla().

Os Componentes possuem a configuração bind  que permite associar várias de suas próprias configurações aos dados do ViewModel. Usando bind , você pode ter certeza que a propriedade de configuração do componente terá seus métodos setter e getter chamados assim que os dados vinculados no ViewModel alterarem. Isso é fantástico, pois você irá evitar declarar vários listeners,  chamar aquela tonelada de setText(), setVisible(), setDisabled() quando alguns dados mudarem.

Então pare tudo que está fazendo ai, e vamos conheçer esse grande recurso entre outros que está disponível no framework.

Januario me mostre um código pra eu entender melhor esse parangolé ai?

Quando os valores  das propriedades someWidth e name forem alterados no ViewModel, serão atualizados nos componentes que estão vinculados pelo bind , isso tudo automático e sem setWidth e setHtml . legal né?

Para entender melhor, no final deste artigo você terá alguns links para estudos e exemplos sobre ViewModel e Data Binding.

Nosso Caso de uso

Consulta endereço por CEP

Consulta endereço por CEP

Na maioria de nossas aplicações sempre precisamos de telas de pesquisa de endereço por CEP, e muito das vezes importamos um gigante banco de dados que achamos por ai ou então consumimos Webservices fornecidos de forma paga ou gratuita.

Agora que você pegou a moral de o que é o tal Data Binding, vamos desenvolver esse exemplo de forma rápida e fácil e com poucas linhas de código.

Topa?

Primeiramente vamos criar um formulário básico onde o usuário digite o CEP em um textfield e terá o formulário preenchido automaticamente com os dados retornados de serviço de terceiro que iremos consumir. Também vamos conhecer um pouco sobre esse”cara” que vai nos ajudar fazer isso fornecendo um webservice.

 

A ViaCep

é um webservice gratuito e de alto desempenho para consultar Códigos de Endereçamento Postal (CEP) do Brasil. Você pode utilizar este serviço a vontade, melhorando a qualidade de suas aplicações web e colaborar para manter esta base de dados atualizada.

Acessando o webservice de CEP

Simple Web  Service

Simple Web Service

Para acessar o webservice, um CEP deve ser fornecido no formato “01001-000” ou “01001000“.
Após o CEP, deve ser fornecido o tipo de retorno desejado, que deve ser “json“, “xml“, “piped” ou “querty“.

Exemplo: http://viacep.com.br/ws/01001-000/json/

retornará um JSON assim:

Mão na massa

Vamos criar uma janela com um formulário simples contendo os campos: Cep, logradouro, número, complemento, bairro, cidade e estado.

Perceba que definimos o ViewModel de forma literal no próprio componente da Window, mas também podemos definir em uma classe separada e usar o xtype posteriormente.

veja como:

Criamos a classe do ViewModel com o alias myviewmodel , agora basta definir no componente assim:

No ViewModel, definimos algumas propriedades que serão vinculadas através da configuração bind  na view.

Vamos conhecer:

  • cep (usada para guardar o CEP digitado no textfield e alimentar o titulo da Window conforme for digitando
  • endereco (armazenará um objeto com os dados do endereço retornado pelo webservice)
  • numero (armazenará o número que usaremos na formula “enderecoCompleto”)
  • naoLocalizado (marcaremos essa flag com true ou false para sinalizar que encontrou ou não o endereço para o CEP consultado).

Criamos também uma formula que retorna uma string com o endereço completo, onde será usada no fieldset na parte inferior do form.

Vamos agora colocar gasolina no negócio e começar a brincar de MVVM, criando um ViewController para conter o método onCepKeyUp.

Eis aqui o ViewController:

Tendo o ViewController definido, já podemos linkar ele na view, como fizemos declaração do Window.

controller: 'myviewcontroller'

A ideia é bem simples. Iremos chamar esse método quando o evento keyup do textfield do CEP for disparado. Sendo assim temos a seguinte lógica.

  1. Usaremos uma expressão regular para testar se o CEP digitado possui o seguinte formato  “01001-000” ou “01001000“. Assim não usaremos recursos de rede desnecessariamente.
  2. Iremos consumir o webservice e instruir um retorno no formato json.
  3. No callback da requisição Ajax, verificamos se o retorno  é um objeto com o endereço ou erro.
  4. Se encontrar algum endereço iremos dar foco no campo número.
  5. Se o retorno for erro,  iremos alimentar a flag naoLocalizado com true, e como um toque de magica exibirá um container informando que o endereço não foi localizado  e o foco será no campo logradouro.

Com apenas essas regras já colocamos o ViewModel pra trabalhar e consequentemente nossa formula para vincular o fieldset “Endereço completo”  irá funcionar.

Ohhhhhh, (aplausos)! “Rapaz!!!! não é de ver que o trem funciona!”

Vale ressaltar que nesse caso, para nossa requisição Ajax funcionar corretamente, precisaremos habilitar 2 configurações no Ajax, sendo elas, cors e useDefaultHeader, isso porque estamos requisitando dados para outro domínio e por isso existe algumas seguranças. Leia mais sobre CORS para entender a fundo o conceito.

http://enable-cors.org/

http://pt.wikipedia.org/wiki/Cross-origin_resource_sharing

O que aprendemos nesse artigo?

Você aprendeu como funciona Data Binding e ViewModel  no Ext JS ou então compliquei totalmente sua cabeça, rsrs, vai desculpando ai. 😉

Na verdade mesmo, eu quis abordar um pouco sobre muita coisa que podemos fazer usando Ext JS, tais como:

  • Data Binding.
  • ViewModel
  • ViewController
  • Consumir Webservice
  • Cors em Ajax
  • Expressão regular

Fontes para estudos

O demo online do que vimos está aqui https://fiddle.sencha.com/#fiddle/nga

Exemplos de data binding http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/#data-binding

Documentação do ViewModel http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.app.ViewModel

Documentação ViewController http://docs.sencha.com/extjs/5.1/application_architecture/view_controllers.html

Guia básico http://docs.sencha.com/extjs/5.1/application_architecture/view_models_data_binding.html

Webservice https://viacep.com.br/

CORS http://pt.wikipedia.org/wiki/Cross-origin_resource_sharing

 

Conclusão

Escreva menos códigos e potencialize suas aplicações, não tenha medo do novo e do complexo.

Quer dizer um oi e trocar ideias? Venha fazer parte da nossa comunidade no Slack e Fórum.

Não esqueça de cadastrar seu e-mail para receber atualizações do blog gratuitamente.

E ai, o que achou? Espero que seja útil esse artigo para vocês. um forte abraço e até a próxima.

 

 

 

 

 

Siga-me

Wemerson Januario

Engenheiro de Software em In Line Tecnologia
[PT-BR] Wemerson Januarioé empreendedor, escritor, instrutor e consultor. Atua no desenvolvimento web e soluções tecnológicas desde 2005. Apaixonado pelo que faz. Responsável pela administração do fórum ExtJS Brasil e mantem o team Slack sencha-br. Especializado em criação de aplicações multi plataformas usando tecnologias modernas em JavaScript(Ext JS) e PHP (Laravel framework).

[EN] Wemerson Januario is an entrepreneur, writer, trainer and consultant. Works in web development and technology solutions since 2005. Passionate about what he does. Administrator of Ext JS Brazil forum and keeps the Slack team sencha-br . Specializes in creating multi-platforms applications using modern technologies in JavaScript(Ext JS) and PHP (Laravel framework).
Siga-me

Últimos posts por Wemerson Januario (exibir todos)

You may also like...

  • http://vedovelli.com.br/ vedovelli

    Muito bom! Foi legal ver um pouco de EXT depois de tanto tempo! Obrigado!

  • Marcelo Augusto

    Muito bom mesmo! Faz um minicurso aí, Wemerson!

    • http://wemersonjanuario.com.br Wemerson Januario

      Já está na minha agenda. Em breve. Obrigado

  • Legolas

    Excelente post meu caro. Muito obrigado por compartilhar conosco o seu conhecimento.