O documento discute Ajax e Java para aplicações web. Aborda conceitos como HTML, JavaScript, DOM, XML e como eles se integram para permitir o desenvolvimento de aplicações ricas utilizando Ajax. Também apresenta breve histórico e conceitos sobre a linguagem Java, incluindo Java SE e Java EE.
1. Ajax e Java para todos.
Web2.0, é para você!Ajax e Java para todos
Ajax e Java para todos
Web2.0, é para você!
2. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Ajax e Java para todos
Título
Data
Local
Assunto
Profissional
Ajax e Java para todos
28-OUT-2008
USF/Itatiba - ENCET 2008
Ajax, Java, web2.0
Fábio Moraes
3. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
3
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
4. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Objetivos
4
Ajax
- breve histórico e propósitos de: HTML, JavaScript, DOM e XML
- trabalhar com pequenos exemplos para compreensão das essências
- todas juntas para Ajax acontecer!
Java
- tratar de um breve histórico
- multiplataforma: Java Virtual Machine, Bytecodes
- tecnologias
- JavaSE: conhecida como o core da tecnologia Java
- JavaEE: versão Enterprise de Java onde tudo web acontece
Servlet
- classes java rodando em um container web atendendo múltiplas
requisições
Tudo Funcionando
- união de Ajax e Java em prol de ricas aplicações web
5. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
5
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
6. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
HTML
6
Hipertext Markup Language
- versão 4 é a corrente
- clássica linguagem de marcação utilizada na criação
de documentos para internet
- hipertexto: texto rico em estilos de fonte, cores,
imagens, sons, objetos embarcados, formulários,
ligações externas (hiperlinks)
- marcação utilizar tags, ou seja, etiquetas que
informam como seu conteúdo deverá ser exibido
- produto final enviado ao navegador para exibição ao
usuário
7. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
HTML - exemplo
7
<html>
<head>
<!-- incluir arquivos de script, estilos... -->
<title>Web2.0 é para você!</title>
</head>
<body>
<!-- corpo de documento html -->
<font size="4">Ajax e Java para todos.</font>
<p>
<b>Ajax ...</b>
</p>
<p>
<b>SUN Microsystems</b><br>
<i>Java ...</i>
<a href="http://www.javasoft.com">+Java</a>
</p>
</body>
</html>
Pequeno exemplo de arquivo HTML.
8. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
8
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
9. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
JavaScript - O inicio
9
- páginas web eram essencialmente estáticas (déc. 90)
- Netscape cria uma linguagem script inicialmente chamada de
Livescript
- nesta mesma época Java “engatinhava”
- Livescript então é rebatizado como JavaScript (JS)
- em 1995 é disponibilizado no Netscape Navigator 2.0B3 a
primeira versão do JS
- Netscape envia a ECMA (Europen Computer Manufacturers Association)
JS para padronização
- nascia o ECMAScript: JavaScript, JScript (IE), ActionScript (Flash)
- JavaScript não pode ser visto como uma extensão de Java
10. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
JavaScript
10
- atualmente inúmeros navegadores suportam JS, ou melhor
ECMAScript
- sintaxe semelhante a linguagem C
- com recursos encontrados em C++ e no Java também
- e.g. código de tratamento de erro separado da lógica principal
- JavaScript é interpretado
- JavaScript roda do lado cliente
- não há suporte a POO podemos criar objetos simples (estruturas)
- protótipo: capacidade de modificar a implementação da classe
durante a execução
- variáveis não possuem tipo definido
11. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
JavaScript - Exemplo 1
11
var theValue = 'agora string';
alert('theValue é string: ' + theValue);
theValue = 1.2333;
alert('theValue é numérico: ' + theValue);
theValue = true;
alert('theValue é boleano: ' + theValue);
theValue: inicializado como tipo string e ao decorrer da execução passa a
ser numérico e booleano, uma facilidade das linguagens interpretadas.
12. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
JavaScript - Exemplo 2
12
theArray[0] = "Java";
theArray[1] = "15 years old";
var theObject = {idiom: 'Português', country: 'Brasil', isoCode: 'pt_BR'};
try{
alert('Nome: ' + theArray[0]);
alert('Idade: ' + theArray[1]);
alert('Idioma: ' + theObject.idiom);
alert('Pais: ' + theObject.country);
alert('Empresa: ' + theObject.company);
}catch(e){
// tratamento de exceção
alert('Houve uma exceção: ' + e);
}finally{
// finalizações, (e.g. fechar conexões)
alert('Sempre passará aqui, mesmo se não houve erro!');
}
theObject: estrutura simples para armazenar informações de tipos variados,
cujos valores podem ser acessados através de chaves pré-definidas.
13. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
13
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
14. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
DOM
14
Document Object Model
- especificação criada pela World Wide Web Consortium
(W3C)
- atualmente se encontra na versão 3, finalizada em 2004
- a representação dos documentos é feita através de uma
árvore de objetos
- padronização e facilitação
- independência de plataforma
- muito conhecido na representação de HTML e XML
- inúmeros navegadores o suportam
15. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
DOM - árvore de objetos
15
Árvore DOM para representação de um documento HTML.
<html>
<head> <body>
<title> <font> <p> <p>
Ajax ...
<b>
SUM Mic
<i>
Java ...
Ajax e JaWeb2.0 é <b>
size=4
<a>
+Java
href=http:/
16. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
DOM - Exemplo
16
//EXEMPLO 1
var p_lista = document.getElementsByTagName('p');
p_lista[0].innerHTML = 'Ajax: JavaScript, XML e Servidor';
//EXEMPLO 2
var elem = document.getElementById('java_desc');
elem.innerHTML = 'Java, com apenas 13 anos tornou-se umas da linguagens
mais difundidas no mundo.'
document: objeto automaticamente criado pelo navegador e aponta para o
documento carregado
EXEMPLO 1: consultando a lista de objetos que representam tags p, e procedendo
com a alteração do conteúdo HTML.
EXEMPLO 2: acesso direto ao objeto através de seu ID.
17. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
17
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
18. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
XML
18
Extensible Markup Language
- criado para transportar e armazenar dados
- a linguagem de marcação informa como os dados
estão armazenados
- não há tags pré-definidas
- a idéia principal é que as tags criadas sejam auto-
explicativas
- você define o nome das tags e a estrutura de
documento
- a manipulação também pode ser feita através de uma
árvore DOM
19. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
XML - Exemplo
19
<?xml version="1.0" encoding="ISO-8859-1"?>
<loja-mundolaptop>
<laptop fabricante="TOSHIBA">
<modelo>A75S125</modelo>
<numero-serie>629950k</numero-serie>
<display>15.4</display>
<processador>PENTIUN4 HT 3.2GHZ</processador>
</laptop>
<laptop fabricante="HP">
<modelo>DV6725BR</modelo>
<numero-serie>67950br</numero-serie>
<display>15.4</display>
<processador>AMD TURION 64 X2 1.8GHZ</processador>
</laptop>
</loja-mundolaptop>
Arquivo XML auto-explicativo.
20. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
XML - Exemplo árvore DOM
20
Fragmento da árvore DOM do exemplo anterior.
<loja-mundolaptop>
<laptop> <laptop>
<modelo> <numero-serie> <display> <processador>
A75S125 629950K 15.4 PENTIUN4 HT
3.2GHZ
fabricante=TOSHIBA
21. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
21
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
22. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Ajax
22
Asynchronous JavaScript and XML
- termo criado em 2005 para designar a
solicitação/envio de dados ao servidor de forma
assíncrona com JavaScript e XML
- ricas construções de páginas web
- XMLHttpRequest: recurso que permite requisitar
dados em segundo plano foi implementado em 1999
pela Microsoft
- HTML + JavaScript + DOM + XML = Ajax em
ação
23. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Ajax - Exemplo
23
function criarXMLHttpRequest(){
var httpOBJ;
try{
//para Firefox, Safari e Opera
httpOBJ = new XMLHttpRequest();
}catch(e){ //para Internet Explorer
try{
httpOBJ = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
httpOBJ = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert('Não há suporte a requisições em segundo plano');
return false;
}
}
}
return httpOBJ;
}
Criação do objeto XMLHttpRequest para navegadores de diferentes
fabricantes.
24. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Ajax - Exemplo cont.
24
function requisitaSemTratar(url){
var bgHttp = criarXMLHttpRequest();
if(!bgHttp)
return;
//atribuindo ao evento uma função que fará o recebimento dos dados.
bgHttp.onreadystatechange = function(){
if(bgHttp.readyState == 4){//sucesso
//DOM em ação
var elem = document.getElementById('conteudo_req');
elem.innerHTML = bgHttp.responseText;
}
}
bgHttp.open("POST", url, true);
bgHttp.send(null);
}
Requisitar arquivo XML ao servidor.
25. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
25
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
26. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Java
26
Há 13 anos atrás nascia a linguagem que veio revolucionar
o mundo da computação.
- multiplataforma
- Java Virtual Machine (JVM)
- Bytecodes: a compilação dos fontes é independente do
SO e hardware
- antes da versão 1.2 Java era totalmente interpretado, a
partir dela implementou-se a execução JIT (just-in-time)
- JIT: código nativo criado e compilado on the fly
- Programação Orientada a Objetos
27. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Java Standart Edition (JSE)
27
- versão padrão da tecnologia Java, ou seja, o core
- possui todos os recursos necessários ao
desenvolvimento das aplicações desktop
- ambiente texto ou gráfico, banco de dados,
comunicação em rede (sockets), IO, i18n, L10n,
multiprogramação (threads), entre outras
- já existem APIs desenvolvidas por terceiros, para os
mais variados campos do desenvolvimento de software
- versão corrente: Java SE 6
- sintaxe inspirada em C++
28. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Java - Exemplo
28
public class Fracao {
private double item1;
private double item2;
public Fracao(double item1, double item2){
this.item1 = item1;
this.item2 = item2;
}
public Fracao dividir(Fracao fracao){
Fracao retFracao = new Fracao();
retFracao.setItem1(this.item1 * fracao.getItem2());
retFracao.setItem2(this.item2 * fracao.getItem1());
return retFracao;
}
public Fracao multiplicar(Fracao fracao){
Fracao retFracao = new Fracao();
retFracao.setItem1(this.item1 * fracao.getItem1());
retFracao.setItem2(this.item2 * fracao.getItem2());
return retFracao;
}
...
Fragmento de classe Java. Sempre a classe pública deve possuir o mesmo
nome do arquivo.
Arquivo: Fracao.java
29. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
29
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
30. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Java Enterprise Edition (JEE)
30
- uma extensão da tecnologia Java
- disponibiliza APIs destinadas a implementações de
grandes aplicações
- oferece uma série de serviços de alto nível, como:
web services, objetos remotos, gerenciamento de
sessões, etc
- assim o desenvolvedor ficará mais envolvido com a
lógica do negócio
- APIs destinadas a implementação e publicação de
aplicações web
- versão corrente: Java EE 5
31. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
31
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
32. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Container JEE
32
- um container JEE segue a especificação padrão
disponibilizada pela JCP (Java Community Process)
- é um aplicativo responsável pelo gerenciamento e
publicação das aplicações, ficando instalado em um
servidor
- várias empresas já possuem um container JEE:
- Apache Tomcat
- Oracle Weblogic
- IBM Websphere
- RedHat JBoss
33. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
33
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
34. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Servlet
34
- especificação que permite à classes Java atender e
responder requisições
- atualmente na versão 2.5
- no container uma mesma instância de Servlet atende
a todas as requisições
- um novo contexto chamado session é criado para
cada novo cliente requisitante e armazenado no
servidor
- pode-se armazenar dados no contexto session e
acessá-los de qualquer Servlet
35. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Servlet - Exemplo
35
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ExemploServlet extends HttpServlet {
public ExemploServlet() {
super();
}
//tratamento de requisições
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
//tratamento de requisições
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
Estrutura básica de uma Servlet.
36. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Tópicos
36
- Objetivos
- Ajax
- HTML
- JavaScript
- DOM
- XML
- Java (JSE)
- Java EE (JEE)
- Container
- Servlets
- Conclusão
37. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Conclusão
37
Todos trabalhando juntos
Implementação de Ajax e Java rodando em um container JEE.
38. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Conclusão
38
Vejamos tudo funcionando na prática:
39. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Conclusão
39
- Ajax + Java = aplicação veloz e mais interativa
Frameworks
- GWT – Google Web Toolkit
- YUI – Yahoo User Interface
- RichFaces (Ajax4JSF) - JBoss – exclusivo JEE
Bibliotecas
- simpleJS
- jQuery
IDEs (Integrated Development Environment)
- Eclipse
- Netbeans
- JDeveloper (Oracle)
40. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
Web2.0, é para você!
40
Contato
www.myjavaserver.com/~fabiomoraes
fabiojmor@gmail.com
Referências
www.javasoft.com
www.w3c.com
www.javascripkit.com
Downloads
tomcat.apache.org
www.javasoft.com
www.eclipse.org
www.netbeans.org
41. Ajax e Java para todos.
Web2.0, é para você!
Fábio Moraes – ENCET 2008 – USF/Itatiba
41
Obrigado!