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

[PT-BR] Wemerson Januarioé proprietário da Novanti Tecnologia especializado em consultoria em produtos Sencha . Atua no desenvolvimento web e soluções tecnológicas desde 2005. Brasileiro reconhecido como MVP (Most Valuable Professional) da Sencha, 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 the owner of Novanti Technologia specializing in Sencha product consulting. He has been involved in web development and technology solutions since 2005. He is a Brazilian recognized as MVP (Most Valuable Professional) of Sencha, responsible for the administration of the Ext JS Brazil forum and maintains the Slack sencha-br. Specialized in creating multi-platform 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.