IV EJES – 17 outubro 2009



Ajax de primeira com ExtJS +
JSON no seu projeto Spring

      Loiane Groner - @loiane
      ...
IV ESJES – 17 outubro 2009


Loiane Groner

    Bacharel em Ciência da Computação – dez/2008
    Java == 4 anos
    Atual:...
IV ESJES – 17 outubro 2009


Sobre o que vamos falar...

    JSon
    Ext JS
    Grid widget – Ext JS
    Receita: Ajax + ...
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’
    ...
IV ESJES – 17 outubro 2009


Estrutura

    Coleção de par: nome e valor
    - Outras linguagens: objeto, dicionário, hash...
IV ESJES – 17 outubro 2009


Sintaxe Objeto




7      Ajax de primeira com ExtJS + JSON no seu projeto Spring   © 2009 IB...
IV ESJES – 17 outubro 2009


Sintaxe Array




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


Valores Suportados




9     Ajax de primeira com ExtJS + JSON no seu projeto Spring   © 2009...
IV ESJES – 17 outubro 2009


Exemplo

{ “estudantes” :
  [
      {“id":1, “nome":“Joãozinho da Silva"},
      {“id":2, "na...
IV ESJES – 17 outubro 2009


Usando JSON

     Disponível em ambos os lados: cliente e servidor
     Server Side
     - Fo...
IV ESJES – 17 outubro 2009


Referências JSON

     http://json.org/
     http://www.json.org/java/




12        Ajax de ...
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, Event...
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 da...
IV EJES – 17 outubro 2009



        Receita:
        Ajax +
        JSon +
        Ext JS +
        Spring


            ...
IV ESJES – 17 outubro 2009


Como montar a receita

     Projeto Java Web
     Spring Framework
     Framework JSON para S...
IV ESJES – 17 outubro 2009



 Vamos ver algum código...
     Projeto: http://github.com/loiane/spring-extjs-ejes


     E...
IV ESJES – 17 outubro 2009


Contato

     Email: loianeg@gmail.com
     Msn/Gtalk: loianeg@gmail.com
     Wave: loianeg@g...
IV ESJES – 17 outubro 2009


Dúvidas e Agradecimentos...


                   Muito Obrigada!!!




21     Ajax de primeir...
Upcoming SlideShare
Loading in …5
×

Ajax de primeira com ExtJS + JSON no seu projeto Spring

5,118 views

Published on

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)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,118
On SlideShare
0
From Embeds
0
Number of Embeds
637
Actions
Shares
0
Downloads
80
Comments
0
Likes
1
Embeds 0
No embeds

No notes for 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

×