AJAX&DWR

WEB 2.0 AJAX DWR

WEB 2.0 Mario Jorge Pereira

2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
2012 2013 2014

Agenda • WEB 2.0 • Aplicações Ricas para Internet (RIA)
• Asynchronous Javascript And XML (Ajax) • Direct Web Remoting (DWR)

"Web 2.0 é a Internet como plataforma, abrangendo todos os
dispositivos conectados; Aplicações Web 2.0 são aquelas que fazem uso das vantagens dessa plataforma: entregando software como serviço, com atualização continua (…), consumindo e remixando dados de várias fontes, incluindo os utilizadores individuais, provendo seus dados, Web 2.0: Compact Definition (http:// radar.oreilly.com/2005/10/web-20- compact-definition.html) by Tim O'Reilly Traduzida e Adaptada (Mario Jorge pereira) criando uma "arquitetura de participativa" e indo além da metáfora da Web 1.0 para oferecer ricas experiências de usuário." Tim O'Reilly

Aplicações Ricas para Internet (RIA) É uma Aplicação Web que
contêm características e funcionalidades de uma aplicação desktop tradicional. CARACTERÍSTICAS: Código intermediário ou client engine; Downloads/Códigos carregados on-demand. BENEFÍCIOS: Comunicação Assíncrona; Otimização de rede; Interface amigável; Navegação de forma natural.

Aplicações Ricas para Internet (RIA)

O AJAX não é uma tecnologia. São na realidade várias
tecnologias, cada uma progredindo de forma independente, e que se juntaram de forma a poder explorar formas de melhorar a interação com os utilizadores em aplicações Web. Ajax Definition (http://www.adaptivepath.com/ideas/ajax-new-approach-web- applications/) Traduzida e Adaptada (Mario Jorge pereira) Jesse James GARRETT

Tecnologias AJAX é baseado em padrões da Internet, e usa
uma combinação de: Objeto XMLHttpRequest (para troca de dados de forma assíncrona com um servidor) JavaScript / DOM (para visualizar / interagir com a informação) CSS (para estilizar os dados) XML (muitas vezes usado como o formato de transferência de dados)

Asynchronous Javascript And XML (Ajax)

HANDS ON: SOMANDO 2 NÚMEROS

HANDS ON: index.jsp (HTML) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax</title> <script>...</script> </head> <h2>Somando 2 números:</h2> <body> <input id="numero1" type=“text" /> + <input id="numero2" type=“text" /> = <input id="resultado" type="text" readonly /> <input type="button" value="Somar" onclick="somar()"> </body> </html>

HANDS ON: JavaScript (index.jsp) <script> function loadXMLHttpRequest() { var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } // Complemento

// Complemento function somar() { var xmlhttp = loadXMLHttpRequest(); var
num1 = document.getElementById("numero1").value; var num2 = document.getElementById("numero2").value; url = 'soma.jsp?num1=' + num1 + '&num2=' + num2; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { texto = xmlhttp.responseText; document.getElementById("resultado").value = texto; } } xmlhttp.open("GET", url, true); xmlhttp.send(); } </script> HANDS ON: JavaScript (index.jsp)

HANDS ON: soma.jsp <% String t1 = request.getParameter("num1"); String t2
= request.getParameter("num2"); int n1 = Integer.parseInt(t1); int n2 = Integer.parseInt(t2); int res = n1 + n2; out.println(res); %>

HANDS ON: index.jsp (HTML) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax</title> <script>...</script> </head> <h2>Somando 2 números:</h2> <input id="numero1" type=“text" /> + <input id="numero2" type=“text" /> = <input id="resultado" type="text" readonly /> <input type="button" value="Somar" onclick="somar()"> <body> </body> </html>

Direct Web Remoting (DWR) DWR é uma biblioteca Java que
permite interagir o Java no servidor e JavaScript em no navegador de forma simples. DWR is Easy Ajax for Java http://directwebremoting.org

Direct Web Remoting (DWR)

Direct Web Remoting (DWR) Reverse Ajax

HANDS ON: DWR Instalar o DWR e o Commons Logging
Baixe o arquivo dwr.jar e adicione a pasta WEB-INF/lib da sua web-app. (http://directwebremoting.org/dwr/downloads/) Baixe e decompacte o arquivo commons- logging-X.X-bin.*, encontre o arquivo commons-logging-X.X.jar e adicione a pasta WEB-INF/lib da sua web-app. (http://commons.apache.org/proper/commons-logging/download_logging.cgi)

HANDS ON: DWR Configure o DWR Adicione as seguintes linhas
no arquivo web.xml (WEB-INF/web.xml) <servlet> <display-name>DWR Servlet</display-name> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>classes</param-name> <param-value>br.com.marioj.Funcoes</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>

HANDS ON: DWR Configure o DWR Crie a classe br.com.mariojp.Funcoes.java
package br.com.mariojp; import org.directwebremoting.annotations.RemoteMethod; import org.directwebremoting.annotations.RemoteProxy; @RemoteProxy(name="Funcoes") public class Funcoes { @RemoteMethod public int soma(int num1, int num2){ return num1+num2; } }

HANDS ON: DWR Para testar use: http://localhost:8080/[CONTEXTO]/dwr/

HANDS ON: index.jsp (DWR) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax</title>  <script src='/json/dwr/engine.js'></script> <script src='/json/dwr/interface/Funcoes.js'></script> <script src='/json/dwr/util.js'></script>  <script>...</script> </head> <h2>Somando 2 números:</h2> <input id="numero1" type=“text" /> + <input id="numero2" type=“text" /> = <input id="resultado" type="text" readonly /> <input type="button" value="Somar" onclick="somar()"> <body> </body> </html>

HANDS ON: DWR JavaScript (index.jsp) <script> function somar() { Funcoes.soma($(“numero1”).value,
$(“numero2").value, resultado ); } function resultado(dado) { dwr.util.setValue($("resultado"),dado); } </script>

Esta obra está licenciada sob a licença Creative Commons Atribuição-CompartilhaIgual
3.0 Não Adaptada. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-sa/3.0/.

WEB 2.0 Mario Jorge Pereira Como me encontrar? http://www.mariojp.com.br twitter.com/@mariojp
[email protected]

AJAX&DWR

AJAX&DWR

Mario Jorge Pereira

More Decks by Mario Jorge Pereira

Other Decks in Programming

Featured

Transcript

WEB 2.0 AJAX DWR

WEB 2.0 Mario Jorge Pereira

2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

Agenda • WEB 2.0 • Aplicações Ricas para Internet (RIA)

"Web 2.0 é a Internet como plataforma, abrangendo todos os

Aplicações Ricas para Internet (RIA) É uma Aplicação Web que

Aplicações Ricas para Internet (RIA)

Aplicações Ricas para Internet (RIA)

O AJAX não é uma tecnologia. São na realidade várias

Tecnologias AJAX é baseado em padrões da Internet, e usa

Asynchronous Javascript And XML (Ajax)

HANDS ON: SOMANDO 2 NÚMEROS

HANDS ON: index.jsp (HTML) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

HANDS ON: JavaScript (index.jsp) <script> function loadXMLHttpRequest() { var xmlhttp;

// Complemento function somar() { var xmlhttp = loadXMLHttpRequest(); var

HANDS ON: soma.jsp <% String t1 = request.getParameter("num1"); String t2

HANDS ON: index.jsp (HTML) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

Direct Web Remoting (DWR) DWR é uma biblioteca Java que

Direct Web Remoting (DWR)

Direct Web Remoting (DWR) Reverse Ajax

HANDS ON: DWR Instalar o DWR e o Commons Logging

HANDS ON: DWR Configure o DWR Adicione as seguintes linhas

HANDS ON: DWR Configure o DWR Crie a classe br.com.mariojp.Funcoes.java

HANDS ON: DWR Para testar use: http://localhost:8080/[CONTEXTO]/dwr/

HANDS ON: index.jsp (DWR) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

HANDS ON: DWR JavaScript (index.jsp) <script> function somar() { Funcoes.soma($(“numero1”).value,

Esta obra está licenciada sob a licença Creative Commons Atribuição-CompartilhaIgual

WEB 2.0 Mario Jorge Pereira Como me encontrar? http://www.mariojp.com.br twitter.com/@mariojp