ajax de primeira com extjs + json no seu projeto spring
DESCRIPTION
Palestra apresentada no IV EJES (Encontro de Java do Espírito Santo) - 2009 - evento organizado pelo ESJUG (Grupo de Usuários Java do Espírito Santo)TRANSCRIPT
IV EJES – 17 outubro 2009
© 2009 IBM Corporation
Ajax de primeira com ExtJS + JSON no seu projeto Spring
Loiane Groner - @[email protected]://www.loiane.com
2
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
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
3
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Sobre o que vamos falar...
�JSon�Ext JS�Grid widget – Ext JS�Receita: Ajax + JSon + Ext JS + Spring
IV EJES – 17 outubro 2009
© 2009 IBM Corporation
JSON
5
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
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
6
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
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
7
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Sintaxe Objeto
8
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Sintaxe Array
9
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Valores Suportados
10
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Exemplo
{ “estudantes” : [
{“id":1, “nome":“Joãozinho da Silva"},{“id":2, "name":“Mariazinha Oliveira"}
]}
11
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Usando JSON
�Disponível em ambos os lados: cliente e servidor�Server Side
- Formato é suportado no servidor por algumaslinguagens, 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
12
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Referências JSON
�http://json.org/�http://www.json.org/java/
IV EJES – 17 outubro 2009
© 2009 IBM Corporation
EXT JS
14
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
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
IV EJES – 17 outubro 2009
© 2009 IBM Corporation
GRID Widget - EXT JS
16
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
GRID
� Um dos componentes mais utilizados em páginas web
� Visualização e edição de dados� Grid Ext JS == AJAX
IV EJES – 17 outubro 2009
© 2009 IBM Corporation
Receita: Ajax + JSon + Ext JS + Spring
18
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Como montar a receita
�Projeto Java Web�Spring Framework�Framework JSON para Spring�Ext JS
19
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Vamos ver algum código...
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'
Projeto: http://github.com/loiane/spring-extjs-ejes
20
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Contato
�Email: [email protected]�Msn/Gtalk: [email protected]�Wave: [email protected]�Twitter: @loiane�Blog: http://www.loiane.com
21
IV ESJES – 17 outubro 2009
Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation
I
Dúvidas e Agradecimentos...
Muito Obrigada!!!