Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

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

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

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

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

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

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

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

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

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

http://www.loiane.com	469
http://www.slideshare.net	40

Ajax de primeira com ExtJS + JSON no seu projeto Spring

by Loiane Groner on Oct 18, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 509

Statistics

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