IV EJES – 17 outubro 2009
Ajax de primeira com ExtJS +
JSON no seu projeto Spring
Loiane Groner - @loiane
loianeg@br.ibm.com
http://www.loiane.com
© 2009 IBM Corporation

IV ESJES – 17 outubro 2009
Loiane Groner
Bacharel em Ciência da Computação – dez/2008
Java == 4 anos
Atual: Analista de Sistemas/Java Developer – IBM Brasil
IBM Academic Initiative Ambassador – técnico e
relacionamento: ES
Coordenadora ESJUG
Coordenadora/JUG Leader CampinasJUG
Instrutora Java e tecnologias relacionadas
Blog: java e desenvolvimento: http://www.loiane.com
2 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Sobre o que vamos falar...
JSon
Ext JS
Grid widget – Ext JS
Receita: Ajax + JSon + Ext JS + Spring
3 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV EJES – 17 outubro 2009
JSON
© 2009 IBM Corporation

IV ESJES – 17 outubro 2009
JSON
JSON (JavaScript Object Notation)
Formato para troca de informações ‘leve’
Fácil para humanos e máquinas - ler e
escrever
Fácil para as máquinas - parsear e gerar
Baseado em um subconjunto do JavaScript
Formato independente de linguagem
Perfeito para troca de dados
5 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Estrutura
Coleção de par: nome e valor
- Outras linguagens: objeto, dicionário, hash
table, array com chaves, etc
Lista ordenada de valores
- Outras linguagens: array, lista, sequecência,
vetor, etc
6 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Sintaxe Objeto
7 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Sintaxe Array
8 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Valores Suportados
9 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Exemplo
{ “estudantes” :
[
{“id":1, “nome":“Joãozinho da Silva"},
{“id":2, "name":“Mariazinha Oliveira"}
]
}
10 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Usando JSON
Disponível em ambos os lados: cliente e servidor
Server Side
- Formato é suportado no servidor por algumas
linguagens, tais como C, C++, C#, Java, PHP
etc.
- Usado para decodificar o request do cliente
Client Side
- JavaScript é utilizado para encodar o JSON
recebido como resposta do servidor
JSON é um tipo de dado nativo para Javascript e
é rápido para o browser ler e entender
11 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Referências JSON
http://json.org/
http://www.json.org/java/
12 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV EJES – 17 outubro 2009
EXT JS
© 2009 IBM Corporation

IV ESJES – 17 outubro 2009
Ext JS
Biblioteca JavaScript
Suporte da comunidade - fórum
Suporte: DOM, Eventos, AJAX
Possui alguns widgets: grid, painéis, janelas, tabs, tree
Integração com XML e JSON
Comparado com: DOJO, JQuery, GWT, etc
Fácil de aprender, rápido para codificar
UI limpa + “bonitinha” + fácil de usar == cliente/usuário
feliz!
Rápido para codificar + cliente feliz == seu chefe feliz!
http://www.extjs.com
14 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV EJES – 17 outubro 2009
GRID Widget - EXT JS
© 2009 IBM Corporation

IV ESJES – 17 outubro 2009
GRID
Um dos componentes mais utilizados em páginas web
Visualização e edição de dados
Grid Ext JS == AJAX
16 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV EJES – 17 outubro 2009
Receita:
Ajax +
JSon +
Ext JS +
Spring
© 2009 IBM Corporation

IV ESJES – 17 outubro 2009
Como montar a receita
Projeto Java Web
Spring Framework
Framework JSON para Spring
Ext JS
18 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Vamos ver algum código...
Projeto: http://github.com/loiane/spring-extjs-ejes
Ext.onReady(function(){
var columns = [];
var sm = new Ext.grid.CheckboxSelectionModel();
columns[0] = sm;
var gridColModel = new Ext.grid.ColumnModel(columns);
var index = 1;
//cria as colunas
var jsonstore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(
new Ext.data.Connection({
url:'griddinamico/getColumnsJson.action'
19 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Contato
Email: loianeg@gmail.com
Msn/Gtalk: loianeg@gmail.com
Wave: loianeg@googlewave.com
Twitter: @loiane
Blog: http://www.loiane.com
20 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I

IV ESJES – 17 outubro 2009
Dúvidas e Agradecimentos...
Muito Obrigada!!!
21 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I