Ajax de primeira com ExtJS + JSON no seu projeto Spring

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Favorites, Groups & Events

    Ajax de primeira com ExtJS + JSON no seu projeto Spring - Presentation Transcript

    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. 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. 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. IV EJES – 17 outubro 2009 JSON © 2009 IBM Corporation
    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. 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. IV ESJES – 17 outubro 2009 Sintaxe Objeto 7 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation I
    8. IV ESJES – 17 outubro 2009 Sintaxe Array 8 Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation I
    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":“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. 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. 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. IV EJES – 17 outubro 2009 EXT JS © 2009 IBM Corporation
    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. 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 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. IV EJES – 17 outubro 2009 Receita: Ajax + JSon + Ext JS + Spring © 2009 IBM Corporation
    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. 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. 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. 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
    SlideShare Zeitgeist 2009

    + Loiane GronerLoiane Groner Nominate

    custom

    659 views, 0 favs, 1 embeds more stats

    Palestra apresentada no IV EJES (Encontro de Java d more

    More info about this document

    CC Attribution License

    Go to text version

    • Total Views 659
      • 592 on SlideShare
      • 67 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 14
    Most viewed embeds
    • 67 views on http://www.loiane.com

    more

    All embeds
    • 67 views on http://www.loiane.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories