Ajax de primeira com ExtJS + JSON no seu projeto Spring

Click here to load reader

  • date post

    22-Jun-2015
  • Category

    Technology

  • view

    4.989
  • download

    1

Embed Size (px)

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 of Ajax de primeira com ExtJS + JSON no seu projeto Spring

  • 1. IV EJES 17 outubro 2009Ajax de primeira com ExtJS + JSON no seu projeto SpringLoiane Groner - @loiane [email protected] http://www.loiane.com 2009 IBM Corporation

2. IV ESJES 17 outubro 2009 Loiane GronerBacharel em Cincia da Computao dez/2008 Java == 4 anos Atual: Analista de Sistemas/Java Developer IBM Brasil IBM Academic Initiative Ambassador tcnico 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. IV ESJES 17 outubro 2009 Sobre o que vamos falar...JSon Ext JS Grid widget Ext JS Receita: Ajax + JSon + Ext JS + Spring 3Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 4. IV EJES 17 outubro 2009JSON 2009 IBM Corporation 5. IV ESJES 17 outubro 2009 JSONJSON (JavaScript Object Notation) Formato para troca de informaes leve Fcil para humanos e mquinas - ler e escrever Fcil para as mquinas - parsear e gerar Baseado em um subconjunto do JavaScript Formato independente de linguagem Perfeito para troca de dados 5Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 6. IV ESJES 17 outubro 2009 EstruturaColeo de par: nome e valor - Outras linguagens: objeto, dicionrio, hash table, array com chaves, etcLista ordenada de valores - Outras linguagens: array, lista, sequecncia, vetor, etc 6 Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM Corporation I 7. IV ESJES 17 outubro 2009 Sintaxe Objeto 7Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 8. IV ESJES 17 outubro 2009 Sintaxe Array 8Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 9. IV ESJES 17 outubro 2009 Valores Suportados 9 Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM Corporation I 10. IV ESJES 17 outubro 2009 Exemplo{ estudantes : [ {id":1, nome":Joozinho da Silva"}, {id":2, "name":Mariazinha Oliveira"} ] } 10 Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 11. IV ESJES 17 outubro 2009 Usando JSON Disponvel em ambos os lados: cliente e servidorServer Side- Formato suportado no servidor por algumaslinguagens, tais como C, C++, C#, Java, PHPetc.- Usado para decodificar o request do clienteClient Side - JavaScript utilizado para encodar o JSONrecebido como resposta do servidorJSON um tipo de dado nativo para Javascript e rpido para o browser ler e entender 11Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM Corporation I 12. IV ESJES 17 outubro 2009 Referncias JSON http://json.org/http://www.json.org/java/ 12Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM Corporation I 13. IV EJES 17 outubro 2009EXT JS 2009 IBM Corporation 14. IV ESJES 17 outubro 2009 Ext JSBiblioteca JavaScriptSuporte da comunidade - frumSuporte: DOM, Eventos, AJAXPossui alguns widgets: grid, painis, janelas, tabs, treeIntegrao com XML e JSONComparado com: DOJO, JQuery, GWT, etcFcil de aprender, rpido para codificarUI limpa + bonitinha + fcil de usar == cliente/usuriofeliz!Rpido para codificar + cliente feliz == seu chefe feliz!http://www.extjs.com 14 Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 15. IV EJES 17 outubro 2009 GRID Widget - EXT JS 2009 IBM Corporation 16. IV ESJES 17 outubro 2009 GRID Um dos componentes mais utilizados em pginas webVisualizao e edio de dadosGrid Ext JS == AJAX 16 Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 17. IV EJES 17 outubro 2009Receita: Ajax + JSon + Ext JS + Spring 2009 IBM Corporation 18. IV ESJES 17 outubro 2009 Como montar a receita Projeto Java WebSpring FrameworkFramework JSON para SpringExt JS 18Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM Corporation I 19. IV ESJES 17 outubro 2009 Vamos ver algum cdigo...Projeto: http://github.com/loiane/spring-extjs-ejesExt.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 colunasvar jsonstore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy(new Ext.data.Connection({ url:'griddinamico/getColumnsJson.action' 19Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM Corporation I 20. IV ESJES 17 outubro 2009 Contato Email: [email protected]/Gtalk: [email protected]: [email protected]: @loianeBlog: http://www.loiane.com 20 Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI 21. IV ESJES 17 outubro 2009 Dvidas e Agradecimentos...Muito Obrigada!!! 21 Ajax de primeira com ExtJS + JSON no seu projeto Spring 2009 IBM CorporationI