Treinamento AJAX

Waelson Negreiros

Email: waelson@gmail.comBlog: http://waelson.com.br

Agenda

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

O que é DWR?

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

O que é DWR?

O que é DWR?

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

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.

Primeiros Passos

Baixe a biblioteca do site 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.

Primeiros Passos

WEB.XML

Primeiros Passos

DWR.XML Define as classes e métodos que serão

disponibilizados para acesso do lado cliente.

Primeiros Passos

Classes Java

Primeiros Passos

DWR.XML

Primeiros Passos

Chamadas dos script gerados pelo DWR

Primeiros Passos

JavaScript

Primeiros Passos

Teste sua aplicação através da URL abaixo

http://localhost:8080/<my_app>

EXEMPLO

Primeiros Passos

Modo Debug

Permite você testar as chamadas aos métodos Java;

URL http://localhost:8080/<my_app>/dwr Modo deve está habilitado no web.xml

Modo Debug

Modo Debug

Biblioteca Utils.js

Facilita o desenvolvimento JavaScript; Métodos auxiliares para manipulação de:

Tabelas Listas

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

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

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

JSON

JSON

Exemplo:

var pessoa = {

nome: ”Waelson Negreiros”,

cpf: “92007279304”

};

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.