Começando com Ext JS

O post de hoje tem como objetivo fazer uma breve apresentação sobre a biblioteca Ext JS e como fazer o setup e um Hello World para começar a usar esta biblioteca em seu projeto.

Nos últimos dias, tenho estudado uma biblioteca JavaScript chamada Ext JS. Com essa biblioteca, é possível construir aplicações/telas com uma interface gráfica bem rica. Tenho me surpreendido, pois dá pra fazer muitas coisas legais, sem precisar de colocar a mão na massa com javascript puro. E a interface fica muito mais 'bonitinha'!

Para começar, dê uma conferida no site da biblioteca, o extjs.com. Existe uma comunidade brasileira também (fórum): extjs.com.br

Navegando pelos resultados do Google, o material sobre Ext JS em português é bem escasso. Até agora, não tem nenhum livro em português, porém, a comunidade brasileira tem um projeto para traduzir a documentação encontrada no site da bibliteca. Alguns exemplos já estão traduzidos também. Existe também, uma tradução livre do Ext Core, feita pelo Otávio Augusto Rodrigues Fernandes.

Os únicos livros que encontrei são:

Learning Ext JS

Ext JS in Action

Como configurar Ext JS para seu projeto Java:

Considerações: neste post, vou utlizar a versão 2.2.1 e a Eclipse IDE, prevendo que um projeto web java pode ser desenvolvido (a IDE não é necessária, se desejar, pode criar uma pasta em um diretório qualquer e seguir os passos).

O primeiro passo é fazer o download da biblioteca. Após o download, vamos criar um projeto web. Coloque as pastas 'adapter' e 'resources' dentro de uma pasta onde ficarão os arquivos do Ext JS. Coloque também os arquivos ext-all.js, ext-all-debug.js, ext-core.js, ext-core-debug.js. Veja a figura abaixo como vai ficar a estrutura do projeto.
Obs.: Nem todos os arquivos são necessários, mas pode ser que futuramente você precise usar algum outro arquivo js, então, este já estará no seu projeto.

extjs_projeto

Vamos criar agora a estrutura básica da página:

extj_paginasimples

Vamos agora verificar se tudo está ok, colocando uma mensagem (alert). Para isso, precisamos colocar o código abaixo dentro de uma tag script ou colocar em um arquivo js:

extjs_alert