Ajax de primeira com ExtJS + JSON no seu projeto Spring

21
IV EJES – 17 outubro 2009 © 2009 IBM Corporation Ajax de primeira com ExtJS + JSON no seu projeto Spring Loiane Groner - @loiane [email protected] http://www.loiane.com

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

Page 1: Ajax de primeira com ExtJS + JSON no seu projeto Spring

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

Ajax de primeira com ExtJS + JSON no seu projeto Spring

Loiane Groner - @[email protected]://www.loiane.com

Page 2: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 3: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 4: Ajax de primeira com ExtJS + JSON no seu projeto Spring

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

JSON

Page 5: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 6: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 7: Ajax de primeira com ExtJS + JSON no seu projeto Spring

7

IV ESJES – 17 outubro 2009

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

I

Sintaxe Objeto

Page 8: Ajax de primeira com ExtJS + JSON no seu projeto Spring

8

IV ESJES – 17 outubro 2009

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

I

Sintaxe Array

Page 9: Ajax de primeira com ExtJS + JSON no seu projeto Spring

9

IV ESJES – 17 outubro 2009

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

I

Valores Suportados

Page 10: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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"}

]}

Page 11: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 12: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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/

Page 13: Ajax de primeira com ExtJS + JSON no seu projeto Spring

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

EXT JS

Page 14: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 15: Ajax de primeira com ExtJS + JSON no seu projeto Spring

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

GRID Widget - EXT JS

Page 16: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 17: Ajax de primeira com ExtJS + JSON no seu projeto Spring

IV EJES – 17 outubro 2009

© 2009 IBM Corporation

Receita: Ajax + JSon + Ext JS + Spring

Page 18: Ajax de primeira com ExtJS + JSON no seu projeto 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

Page 19: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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

Page 20: Ajax de primeira com ExtJS + JSON no seu projeto Spring

20

IV ESJES – 17 outubro 2009

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

I

Contato

�Email: [email protected]�Msn/Gtalk: [email protected]�Wave: [email protected]�Twitter: @loiane�Blog: http://www.loiane.com

Page 21: Ajax de primeira com ExtJS + JSON no seu projeto Spring

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!!!