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:
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.
Vamos criar agora a estrutura básica da página:
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:
E temos o seguinte resultado:
Prontinho! Agora já podemos começar a ‘brincar’ com a biblioteca!
Se desejar, pode baixar o código deste post aqui:
Até a próxima!
Posts Similares
Comments (16)
Links to this Post
- Como Importar Projetos J2EE para o Eclipse e Executá-los | Loiane Groner | 5 de June de 2009
- Como Montar um Grid utilizando Ext JS | Loiane Groner | 17 de June de 2009
E ai loiane,
Tava só esperando você postar a experiência.. Muito massa…estou acompanhado viu.. Eu só uso jQuery, mas tou fazendo uma coisa bem legal aqui com Ajax + JSON + jQuery.. Assim que terminar vou postar… Uma coisa bem legal..
Parabéns…
Beijoss…
Oi Loiane,
Eu nunca trabalhei com o ExtJS apesar de ter lido/visto algumas coisas com ele, e como você disse, é impressionante o poder que ele tem. Bem bacana mesmo, parabéns!
[]s,
loiane,
qual versão do eclipse você usa? não consigo importar o seu projeto para o meu (pede só um .war e não achei isso no seu fonte). também não sei executar um jsp. tem como você falar como? uso o eclipse ganymede;
Muito bom Loiane… com extjs da pra fazer coisas muito legais mesmo!
Loiane,
Estou tentando acompanhar os seus postes, estou usando o eclipse Galileo e baixei a versão 3.0.0 do ext-js e não achei os arquivos ext-core.js e ext-core-debug.js
Ainda estou no post “Começando com Ext JS”.
Abraços
Olá Jean,
Obrigada pela visita ao blog!
A versão utilizada neste post é 2.x.
Os arquivos ‘core’ não são obrigatórios, apenas deixei para caso futuro.
Na versão 3, inclua apenas os arquivos ext-all.js e adapter/ext/ext-base.js, que você já terá acesso aos componentes da biblioteca.
Abraço
ola, estou tendo que desenvolver modulos adcionais para um sistema que eh todo em ext e tenho estudado a matéria, contudo devido as personalização das instancias e tudo mais, não consegui sair do zero ainda, será que poderia me dar uma luz ?????
http://www.group-office.com/
http://www.group-office.com/wiki/Main_Page
Esse é o site oficial do sistema, se pude rm dar uma dica de como fazer um modulo simplezinho, na referencia tem um exemplo, mas mesmo fazendo tudo o que eh pedido não funciona…..
Obrigado
@ricardo
Sugiro você começar aos poucos. A bilioteca do ExtJS é bem extensa e você tem inúmeras possibilidades na hora de montar o seu componente.
Comece pelo painel, depois vá para as abas e dentro de cada aba, estude cada componente que terá que usar. O fórum oficial do ExtJS é ótimo para dicas e para achar coisas mais complicadas de fazer.0
Tente seguir o exemplos. Geralmente é Ctrl C + Ctrl V e mudar a origem de onde você obtém os dados.
Qualquer coisa que puder ajudar, estou à disposição!
Abraços
Boa noite adorei seu website tanto que estou salvando tudo pois tenho um sistema para hoteis e pousadas e com suas materis posso apromorara eles, e lhe digo uma coisa se você continuar postando opções em ExtJS eu caso com vc
Olá Loiane, boa noite, tudo bem?
Estou engajado em uma ferramenta para IBM e surgiu a dúvida: Como adequar o EXT JS ao padrão ASCA. Já ouviu falar ou tem alguma informação a respeito? Pelo que vi alem das regras de segurança basicamento o padrao ASCA sao normas para icones,cores,etc.. (Conjunto de CSS) padrões.. Cheguei a pensar em alterar o framework e adequar a este padrão, mas antes gostaria de saber se já existe algo neste sentido? Saberia me responder? Desde já obrigado..
Rox esse post!
Olá Thiago,
Infelizmente não sei responder a essa pergunta…
Loilane,
Baixei a versao 4.0.7 do ext-js e nela nao consta a pasta adapter para que eu possa pegar o arquivo ext-base.js.
Sabe qual arquivo dessa versao substitui o ext-base.js?
Olá Felipe,
Na versão 4 algumas coisas mudaram bastante.
Dê uma olhada no screencast para entender melhor: http://www.loiane.com/2011/12/curso-de-extjs-4-aula-02-instalacao-e-hello-world/
[]‘s