Treinamento AJAX Waelson Negreiros Blog:

Apresentação em tema: "Treinamento AJAX Waelson Negreiros Blog:"— Transcrição da apresentação:

1 Treinamento AJAX Waelson Negreiros Email: waelson@gmail.com Blog: http://waelson.com.br

2 Agenda O que DWR? Primeiros Passos Modo Debug Biblioteca Utils.js JSON Exercício

3 O que é DWR? Framework Open Source; Blibliotecas Java e JavaScript; Oculta a complexidade; Acessa métodos em classes Java; Java Script mais fácil.

4 O que é DWR?

5 Está dividido em duas partes: Parte Server-Side Servlet Java rodando no servidor; Processa as requisições e retorna ao DWR; Parte Client-Side DWR encapsula o XMLHttpRequest

6 O que é DWR? Falicidade de uso DWR cria os JavaScript para acesso ao Java; Código personalizado para cada classe Java; Conversão automática de parâmetros; Comunicação assíncrona via XMLHttpRequest.

7 Primeiros Passos Baixe a biblioteca do site www.directwebremoting.org www.directwebremoting.org Crie um projeto Java Web e coloque todas as blibliotecas na pasta WEB-INF/lib Mapei o servlet do DWR no web.xml; Crie o arquivo dwr.xml no diretório WEB-INF Crie sua classe Java e registre no dwr.xml Crie sua página, adicione os scripts gerado pelo DWR e invoque os métodos Java.

8 Primeiros Passos WEB.XML

9 Primeiros Passos DWR.XML Define as classes e métodos que serão disponibilizados para acesso do lado cliente.

10 Primeiros Passos Classes Java

11 Primeiros Passos DWR.XML

12 Primeiros Passos Chamadas dos script gerados pelo DWR

13 Primeiros Passos JavaScript

14 Primeiros Passos Teste sua aplicação através da URL abaixo http://localhost:8080/<my_apphttp://localhost:8080/ EXEMPLO

15 Primeiros Passos

16 Modo Debug Permite você testar as chamadas aos métodos Java; URL http://localhost:8080/ /dwrhttp://localhost:8080/ /dwr Modo deve está habilitado no web.xml

17 Modo Debug

18

19 Biblioteca Utils.js Facilita o desenvolvimento JavaScript; Métodos auxiliares para manipulação de: Tabelas Listas

20 Biblioteca Utils.js Principais Funções: $(id) – Retorna um objeto getValue(id) - Retorna o valor de um objeto getText(id) – Retorna o texto de listas (option) setValue(id, valor) – Configura um valor em um objeto setValues([notação Json]) – Configura o valor em mais de um objeto

21 Biblioteca Utils.js Principais Funções addOptions(id, array) – Adiciona vários options a um select addRows(id, array, cellfuncs, [options]) – Preenche uma tabela; removeAllOptions(id) – remove todos os options ou ul de um objeto; removeAllRows(id) – remove todas as linhas de uma tabela

22 JSON Acrônimo de JavaScript Object Notation; Usado para troca de dados; Alternativa aos XMLs; Construído sobre 2 estruturas Coleção de pares nome:valor; Lista de valores ordenado

23 JSON

24 Exemplo: var pessoa = { nome: ”Waelson Negreiros”, cpf: “92007279304” };

25 Exercício Com base no que foi ensinado construa uma simples aplicação que ao clicar em um botão, retorne a data e hora dos servidor e a exibe em um textarea.