ExtJS – Framework Javascript

Já cheguei a comentar algo aqui no blog sobre o ExtJS. Porém nunca fiz uma apresentação formal do mesmo !
Então lá vai:

O que é o ExtJS ?

O ExtJS é um framework de javascript, feito para criar aplicações na web. Com ele conseguimos criar interfaces que se parecem muito com aplicações desktop. Ele nos disponibiliza muitos componentes e funções que facilitam e muito a nossa vida.
Para se ter uma idéia de como trabalhar ( veja bem, uma idéia ! ) podemos comparar a criação de uma tela em ext com a criação de uma tela em GTK, onde vamos criando, adicionando e alinhando os itens da tela, tudo dentro de containers e layouts, mas com a facilidade de que podemos facilmente alterar seus CSS para mudar algo. Com o Ext podemos por exemplo criar uma aplicação voltada ao Adobe AIR, que roda localmente, uma aplicação completamente em Ext ou com inserido em nossa página, interagindo com nosso HTML.
Hoje, na versão 3.1, jah possui o Ext Designer bem desenvolvido, porém é pago, mas é muito bom. Ah, e falando em pago, a licença do Ext é Open-Source somente para projetos open-source, de resto se tem um preço para utilizá-lo, mas nada impede você de baixar, ler os manuais, a documentação e botar a mão na massa, sem nenhuma burocracia.

Bom, feita a primeira apresantação, vamos partir para o que interessa.

Primeiro, vamos falar um pouco de como integrar o ExtJS com sua aplicação.
O Ext trabalha muito com Ajax, de várias formas ele pode solicitar e enviar informações para um servidor web através de ajax, vejamos um exemplo:

// Um request básico
Ext.Ajax.request({
   url: 'foo.php',
   success: function(){
	  //acao a tomar...
   },
   failure: function(){
	  //acao a tomar...
   },
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});

// Simples envio de um formulário
Ext.Ajax.request({
    form: 'some-form',
    params: 'foo=bar'
});

No primeiro exemplo, montamos uma chamada ajax, enviando alguns parâmetros ( na propriedade: params ) e aguardamos um retorno, passando uma function na propriedade “success” que faz o que queremos, e se caso ocorrer alguma coisa errada, tratamos com a function na propriedade “failure”. Além de configurar-mos alguns cabeçalhos que serão enviados também, e obviamente para onde estamos enviando nossa requisição, na propriedade “url”.

Eu gosto muito de trabalhar assim com o Ajax, desta forma exemplificada acima, pois fico livre para enviar e aguardar dados da forma que eu quiser, apesar de ter alguns frameworks que integram as chamadas ajax com a linguagem escolhida, mas assim, dando uma engessada no negócio.

Outro detalhe importante: JSON !
Todo o ExtJS trabalha com Json ( mas não só JSON ), tanto para montar os objetos e componentes da tela, como para enviar dados para o servidor, e trabalhar com Json em tudo, primeiro padroniza todo o ambiente, e segundo, facilita muito a nossa vida, pois o Json é simples e muito completo. Com ele conseguimos criar muitos objetos e enviar vários tipos de dados. Então caso não conheça bem o json, dê uma olhada aqui: http://www.json.org/

Muitos objetos do Ext trabalham com dados remotos, ou seja, aguardam que o servidor envie os itens a serem mostrados na tela, como por exemplo: combos, grids, trees, e por ai vai… este exemplo acima é um exemplo de chamada ajax solta, no meio da página, que pode ser chamada de qualquer ponto, e para qualquer intuito, porém, nos componentes a chama do ajax é feita automaticamente pelos “Store” ! hehehe

Bom, outro ponto que acho muito importante também no Ext é o chamado “Store”. O Store é um objeto que age de forma a nos possibilitar ver e alterar muitos registros de dados que por nós foram definidos. É como se fosse um Recordset por exemplo, só que mais maleável. O Store pode estar ligado a um grid, combo, e outros componentes, e até solto, sem estar ligado a componente algum, e pode ter vários modos de leitura, como por exemplo: xml, json e um simples array de dados.

Para você ter uma idéia de como pode ficar bonita uma aplicação feita com o Ext, veja este link: http://www.extjs.com/deploy/dev/examples/forum/forum.html

Agora, alguns links para você poder saber mais:

Site oficial: http://www.extjs.com
Site de Exemplos: http://www.extjs.com/deploy/dev/examples/
Documentação:  http://www.extjs.com/deploy/dev/docs/

Feitas estar primeiras introduções sobre o Ext, fiquem no aguardo do proximo post sobre o Ext.
Até lá.

Related posts:

1. Spring Framework – A real framework !
2. Centralizar div em javascript
3. Debug em JavaScript
4. Adobe Air
5. Serializando json no django com wadofstuff