Treinamento Ajax - Aula 3 (DWR 1)
Download
Report
Transcript Treinamento Ajax - Aula 3 (DWR 1)
Treinamento AJAX
Waelson Negreiros
Email: [email protected]
Blog: 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.