Ajax de primeira com ExtJS + JSON no seu projeto Spring

5.137 visualizações

Publicada em

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)

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
5.137
No SlideShare
0
A partir de incorporações
0
Número de incorporações
637
Ações
Compartilhamentos
0
Downloads
80
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ajax de primeira com ExtJS + JSON no seu projeto Spring

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. IV EJES – 17 outubro 2009 JSON © 2009 IBM Corporation
  5. 5. 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
  6. 6. 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
  7. 7. IV ESJES – 17 outubro 2009 Sintaxe Objeto 7 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation I
  8. 8. IV ESJES – 17 outubro 2009 Sintaxe Array 8 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation I
  9. 9. IV ESJES – 17 outubro 2009 Valores Suportados 9 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation I
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. IV EJES – 17 outubro 2009 EXT JS © 2009 IBM Corporation
  14. 14. 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
  15. 15. IV EJES – 17 outubro 2009 GRID Widget - EXT JS © 2009 IBM Corporation
  16. 16. 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
  17. 17. IV EJES – 17 outubro 2009 Receita: Ajax + JSon + Ext JS + Spring © 2009 IBM Corporation
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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

×