IV EJES – 17 outubro 2009

© 2009 IBM Corporation

Ajax de primeira com ExtJS + JSON no seu projeto Spring

Loiane Groner - @loianeloianeg@br.ibm.comhttp://www.loiane.com

2

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

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

3

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Sobre o que vamos falar...

�JSon�Ext JS�Grid widget – Ext JS�Receita: Ajax + JSon + Ext JS + Spring

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

JSON

5

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

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

6

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

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

7

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Sintaxe Objeto

8

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Sintaxe Array

9

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Valores Suportados

10

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Exemplo

{ “estudantes” : [

{“id":1, “nome":“Joãozinho da Silva"},{“id":2, "name":“Mariazinha Oliveira"}

]}

11

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Usando JSON

�Disponível em ambos os lados: cliente e servidor�Server Side

- Formato é suportado no servidor por algumaslinguagens, 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

12

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Referências JSON

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

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

EXT JS

14

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

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

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

GRID Widget - EXT JS

16

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

GRID

� Um dos componentes mais utilizados em páginas web

� Visualização e edição de dados� Grid Ext JS == AJAX

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

Receita: Ajax + JSon + Ext JS + Spring

18

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Como montar a receita

�Projeto Java Web�Spring Framework�Framework JSON para Spring�Ext JS

19

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Vamos ver algum código...

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'

Projeto: http://github.com/loiane/spring-extjs-ejes

20

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Contato

�Email: loianeg@gmail.com�Msn/Gtalk: loianeg@gmail.com�Wave: loianeg@googlewave.com�Twitter: @loiane�Blog: http://www.loiane.com

21

IV ESJES – 17 outubro 2009

Ajax de primeira com ExtJS + JSON no seu projeto Spring © 2009 IBM Corporation

I

Dúvidas e Agradecimentos...

Muito Obrigada!!!