Programação para a Web com Java

Prévia do material em texto

Programação para a Web
Alexandre Meslin
meslin@inf.puc-rio.br
2
Ementa
� Tecnologias Web
� JSP
� Cookies
� JavaBeans
� Banco de Dados
� Servlets
� Hibernate
3
Referências
� Bibliografia
� Web Development with Java Server Pages
Fields/Kolb
Manning
� Use a cabeça! Servlets & JSP
Brian Basham, Kathy Sierra e Bert Bates
Altabooks
� Na Internet
� http://www.inf.puc-rio.br/~meslin/Web
� http://www.apache.org
� http://jcp.org/en/home/index
� http://www.jguru.com/index.jsp
� http://www.jspbrasil.com.br
� http://www.macromedia.com
5
Sistema de Avaliação
� G1: 2 trabalhos práticos
� G2: 2 trabalhos práticos
� PF: 1 prova teórica
� Obs.: 
� Não aceito trabalhos 
entregues depois do 
prazo
� A PF funciona como 2a
chamada para um dos 
trabalhos (apenas UM). 
Se necessário, servirá 
também como PF
6
Plano de Aula
� Introdução
� Java Server Page
� Elementos de script
� Tags
� Declarações de variáveis e métodos
� Diretivas
� Objetos Implícitos
� Session
� Application
� Trabalhando com cookies
� JavaBeans
� JDBC
� Construindo uma aplicação
� Persistência com Hibernate
7
Por que Java?
8
Por que JSP/Servlet (Java)?
Fonte: http://w
w
w
.tiobe.com
9
Por que JSP/Servlet (Java)?
Fonte: http://w
w
w
.tiobe.com
10
Perguntas?
11
Parte 1
� Introdução
12
Usos de JSP
� Mecanismo de criação de páginas com 
conteúdo dinâmico na Web
� Aplicações
� Contadores de acesso
� Livros de visitantes
� Banners aleatórios
� Envio de correspondência (email)
� Interface com banco de dados
13
Suporte à JSP
� Tomcat (http://www.apache.org)
� Freeware
� JRun (http://www.macromedia.com)
� Trial
� Não vou usar (e não conheço ninguém que use)
14
Instalação do ambiente de trabalho
� Instale Java
� Instale servidor Web
� Instale container JSP
� Instale o ambiente de desenvolvimento (IDE)
� Em um futuro próximo
� Instale o conector do banco de dados
� Instale o Hibernate
15
Instalação de Java
� (espero que você já tenha feito isto há muito 
tempo!)
� Faça download da última versão do J2SE em 
http://java.sun.com
� Este material foi desenvolvido utilizando-se JDK 6
� Instale o pacote utilizando o método NNF
16
Instalação de Java
� Inicie a instalação
17
Instalação de Java
� Leia atentamente os 
termos da licença e 
somente os aceite se 
concordar plenamente!
� Clique em Accept
18
Instalação de Java
� Selecione o que deve se 
instalado
� Para economizar 
espaço, podem ser 
retirados
� Demos
� Source Code
� Clique Next
19
Instalação de Java
� Espere (muito!!!)
20
Instalação de Java
� Selecione os itens que 
você deseja para a 
máquina virtual
� Clique Next
21
Instalação de Java
� Espere muito 
novamente...
22
Instalação de Java
� Clique Finish (até que 
enfim!!!)
23
Instalação do Apache Tomcat
� Instalou Java?
� Agora instale Apache+Tomcat
� Para dar suporte a JSP 2.0 é necessário Tomcat 5 ou 
mais recente
� O Tomcat é composto por:
� Catalina: um container para servlets
� Coyote: conector HTTP
� Jasper: compilador JSP para Java
� Você pode instalar de duas formas:
� Como serviço (primeiro exemplo)
� Instalação manual (segundo exemplo)
24
Instalação do Apache Tomcat como Serviço
(primeira opção)
� No site http://www.apache.org (ou em 
http://tomcat.apache.org), faça download da 
última versão do Tomcat
� Instale o pacote através de NNF, apenas 
verificando o que você gostaria que fosse 
instalado
� A seguir, exemplo de instalação da versão 6
25
Instalação do Apache Tomcat versão 6
� Inicie a instalação
26
Instalação do Apache Tomcat
� Clique Next
27
Instalação do Apache Tomcat
� Leia atentamente os 
termos da licença e 
somente os aceite se 
concordar plenamente!
� Clique em I Agree
28
Instalação do Apache Tomcat
� Selecione os itens que 
devem ser instalados
� Para economizar 
espaço, podem ser 
excluidos
� Start Menu Itens
� Documentation
� Examples
� Webapps
� Clique Next
29
Instalação do Apache Tomcat
� Selecione a pasta de 
instalação (pode usar a 
padrão)
� Clique Next
30
Instalação do Apache Tomcat
� Escolha a porta do serviço
� 8080, se houver outro 
servidor web instalado (ex.: 
IIS)
� 80, caso seja o único 
servidor web
� Entre com o User Name e 
Password para o 
administrador do sistema
� Obs.:
� Não esqueça o User Name e 
Password
� Lembre-se que a senha será 
armazenada em texto livre!!!
� Clique Next
31
Instalação do Apache Tomcat
� Informe a pasta onde 
está o JRE
� Clique em Install
32
Instalação do Apache Tomcat
� Espere…
33
Instalação do Apache Tomcat
� Espere mais um 
pouco…
34
Instalação do Apache Tomcat
� Espere mais um 
pouco…’tá quase lá...
35
Instalação do Apache Tomcat
� Clique Finish
Instalação do Apache Tomcat Manualmente
(segunda opção)
� Faça download do 
arquivo ZIP de acordo 
com o seu sistema 
operacional (32 ou 64 
bits)
� Descompacte em algum 
diretório
� E... acabou!
36
37
Configuração do Apache-Tomcat
(para desenvolvimento APENAS!!!)
� No arquivo web.xml, habilite a opção de browse no diretório através de 
navegador
� Somente faça isto para facilitar a localização dos seus itens durante o 
desenvolvimento
� Pode representar um risco para sites de produção
<servlet> 
 <servlet-name>default</servlet-name> 
 <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class> 
 <init-param> 
 <param-name>debug</param-name> 
 <param-value>0</param-value> 
 </init-param> 
 <init-param> 
 <param-name>listings</param-name> 
 <param-value>true</param-value> 
 </init-param> 
 <load-on-startup>1</load-on-startup> 
</servlet> 
38
Verificação da Instalação do Apache Tomcat
� Abra o Monitor Tomcat 
em Start�All Programs 
�Apache Tomcat 6.0 
� Monitor Tomcat
39
Verificação da Instalação do Apache Tomcat
� No System Tray, clique 
como botão direito do 
mouse no ícone do 
monitor e selecione 
Configure...
40
Verificação da Instalação do Apache Tomcat
� Clique em Start
41
Verificação da Instalação do Apache Tomcat
� E espere...
42
Verificação da Instalação do Apache Tomcat
� Tenha certeza que o 
serviço foi iniciado 
corretamente...
43
Verificação da Instalação do Apache Tomcat
� Abra o browser
� Digite:
� http://localhost:8080
� Você deve obter uma 
página semelhante a 
esta
48
Instalação do Eclipse
� http://www.eclipse.org
� Procure pelo eclipse WTP (Web Tools 
Platform)
� Eclipse Helios (WTP 3.6.1)
� Eclipse Galileo (WTP 3.1)
� Eclipse Ganymed (WTP 3.0.5)
49
Configuração do Eclipse
� Para instalar o Eclipse, 
extraia o conteudo do 
arquivo ZIP dentro de 
Arquivos de programas 
ou Program files ou na 
raiz do seu disco
50
Configuração do Eclipse
51
Configuração do Eclipse
� Selecione o local para ser o seu workspace
� (a pasta onde serão criados os seus projetos)
� Clique OK
52
Configuração do Eclipse
� Verifique se a 
instalação reconheceu o 
JRE correto
� Clique em:
� Windows
� Preferences...
53
Configuração do Eclipse
� Clique em:
� Java
� Instaled JREs
� Selecione o JRE ou
� Adicione o JRE correto
54
Configuração do Eclipse
� Clique em:
� Java
� Compiler
� Selecione o nível 
correto de 
conformidade do 
compilador (6.0)
� Clique em OK
55
Configuração do Tomcat no eclipse
� Clique em
� Server
� Runtime Environment
� Clique em Add...
56Configuração do Tomcat no eclipse
� Expanda o item Apache
� Selecione a versão 
correta (Apache Tomcat 
v6.0, no nosso caso)
� Clique Next
57
Configuração do Tomcat no eclipse
� Informe o diretório de 
instalação do Apache 
Tomcat
� Informe o JRE que você 
configurou previamente
� Clique Finish
67
Perguntas?
68
Parte 2
� Criando um novo projeto
69
Criando um Novo Projeto Web
� Clique em:
� File
� New
� Dynamic Web Project
70
Criando um Novo Projeto Web
� Em Project name: 
informe o nome do 
projeto
� Verifique se o “Target 
runtime” é o Apache 
Tomcat que você criou 
anteriormente
� Clique em Next
71
Criando um Novo Projeto Web
Dynamic web module version
Valor Descrição
2.2 J2EE 1.2
2.3 J2EE 1.3
2.4 J2EE 1.4
2.5 J2EE 5
3.0 J2EE 6
72
Criando um Novo Projeto Web
� Adicione, edite e/ou 
remova folders, caso 
necessário 
(normalmente não é)
� Clique Next
73
Criando um Novo Projeto Web
� Modifique o nome 
público do projeto, caso 
necessário (aqui, 
normalmente também 
não precisamos mexer)
� Modifique o nome do 
diretório de conteúdo 
(idem)
� Clique Finish
74
Criando um Novo Projeto Web
� A esta altura, deve ter sido 
criada a árvore mostrada ao 
lado
� Estrutura de pastas criada:
� WebContent: HTML, CSS, 
JSP, etc.
� src: arquivos fontes em Java 
(javabeans e servlets)
� WEB-INF/classes: .class 
(javabeans e servlets)
� WEB-INF/lib: .jar
� WEB-INF: arquivos sem 
acesso direto pelo cliente
� work: servlets convertidos a 
partir de páginas JSP
75
Criando uma Nova Pasta em um Projeto Web
� Crie uma nova pasta 
para organizar os itens 
(opcional)
� Selecione o projeto
� Clique em:
� File
� New
� Folder
76
Criando uma Nova Pasta em um Projeto Web
� Informe a localização 
da pasta (dentro de 
WebContent do seu 
novo projeto)
� Informe o nome da 
pasta
� Clique Finish
77
Criando um Arquivo JSP em um Projeto Web
� Selecione:
� File
� New
� Other
78
Criando um Arquivo JSP em um Projeto Web
� Em Web, selecione JSP
� Clique Next
79
Criando um Arquivo JSP em um Projeto Web
� Selecione o diretório 
correto (aquele que 
você acabou de criar)
� Informe o nome do 
arquivo no formato: 
nome.jsp
� Clique Next
80
Criando um Arquivo JSP em um Projeto Web
� Selecione o modelo de 
acordo com a saída 
desejada
� HTML
� XHTML
� XML
� Clique Finish
81
Criando um Javabean em um Projeto Web
� Selecione:
� File
� New
� Other
82
Criando um Javabean em um Projeto Web
� Em Java, selecione 
Class
� Clique Next
83
Criando um Javabean em um Projeto Web
� Entre com o nome do 
pacote
� Entre com o nome da 
classe
� Clique Finish
� (lembre-se que este nome 
também será o nome do 
arquivo .java)
� Obs.: de preferência inicie o 
pacote com letra minúscula 
e a classe com letra 
maiúscula
84
Instalação de uma Biblioteca Externa
� Clicar com o botão 
direito no projeto
� Selecionar Build Path
� Clicar em Add 
libraries...
85
Instalação de uma Biblioteca Externa
� Selecionar User Library
� Clicar em Next
86
Instalação de uma Biblioteca Externa
� Clicar em User 
Libraries...
87
Instalação de uma Biblioteca Externa
� Clicar em New
88
Instalação de uma Biblioteca Externa
� Informar o nome da 
nova biblioteca
89
Instalação de uma Biblioteca Externa
� Clicar em Add JARS...
90
Instalação de uma Biblioteca Externa
� Navegar até o .JAR 
desejado
� Clicar OK
91
Instalação de uma Biblioteca Externa
� Adicione quantos jar’s 
forem necessários
� Clicar em OK quando 
terminar de adicionar 
os jar’s
92
Instalação de uma Biblioteca Externa
� Clicar em Finish
93
Instalação de uma Biblioteca Externa
� Verifique em “Problems” se a biblioteca será 
exportada (caso seja necessário)
94
Instalação de uma Biblioteca Externa
� Caso a biblioteca deva ser publicada junto com a 
aplicação, clique com o botão direito na advertência 
e selecione “Quick Fix”
95
Instalação de uma Biblioteca Externa
� Selecione “Mark the 
associated raw 
classpath entry as a 
publish/export 
dependency.”
� Selecione os projetos 
que devem conter a 
biblioteca
� Clique em Finish
96
Publicando um site de um Projeto Web
� Clique com o botão da 
direita no projeto
� Selecione Export
97
Publicando um site de um Projeto Web
� Em Web, selecione 
WAR file
� Clique Next
98
Publicando um site de um Projeto Web
� Verifique se o nome do 
projeto está correto
� Informe o nome do arquivo 
WAR (com a path!)
� Lembre-se de marcar 
“Export source files”
(mas somente durante o 
curso, e nunca depois)
� Clique Finish
99
Publicando um site de um Projeto Web
� Você sabia...
� Que o arquivo .WAR é na verdade um arquivo 
ZIP com alguns arquivos descrevendo como 
deve ser publicado
� Que você pode (e deve) abrir o arquivo WAR 
com um programa de manipulação de arquivos 
ZIP
� Dica: antes de publicar (ou de entregar o seu 
trabalho), abra o arquivo para ver se está tudo certo!
100
Problemas conhecidos e suas “soluções”
� Problema:
� Site não encontrado
� Solução:
� Clique com o botão direito do mouse sobre o 
servidor Tomcat na aba “Servers”
� Selecione “Clean...”
� Reinicie o servidor
101
Problemas conhecidos e suas “soluções”
� Problema:
� Classe não pode ser carregada mas foi incluída 
como biblioteca do usuário
� Solução:
� Selecione a aba “Problems”
� Clique com o botão direito sobre a biblioteca que 
não está sendo exportada
� Selecione “Quick fix”
� Selecione exportar a biblioteca
� Reinicie o servidor
102
Problemas conhecidos e suas “soluções”
� Sintoma:
� Erro ao importar javax.servlet.*
� Problema:
� Faltando biblioteca do Apache Tomcat em “Java 
Resources: src” dentro do “Project Explorer”
� Solução:
� Clique com o botão direito no seu projeto
� Em “Build Path”, selecione “Configure Build Path…”
� Na aba “Libraries”, clique em “Add Library…”
� Selecione Server Runtime na janela “Add Library”
� Clique Next
� Selecione “Apache Tomcat vX.X” (o X.X vai depender
da versão instalada do seu Tomcat)
� Clique Finish e depois clique em OK
Problemas conhecidos e suas “soluções”
� Problema
� Faltando alguma biblioteca ou classe
� Solução
� Incluir a biblioteca ou JAR que está faltando
103
Problemas conhecidos e suas “soluções”
� Problema
� Nome do runtime já em uso quando um novo 
projeto Web Dinâmico está sendo criado
� Solução
� Reiniciar o eclipse (fechar e abrir) ???
104
105
Perguntas?
106
Parte 3
� IP
� TCP
� HTTP
� HTML
107
Um pouco de TCP/IP
108
HTTP em TCP
109
HTTP em IP
110
Arquitetura Web
� Baseada em HTTP 
� Protocolo simples de transferência de arquivos. 
� Sem estado (não mantém sessão aberta).
� Funcionamento (simplificado):
111
Cliente e Servidor HTTP
� Servidor HTTP 
� Gerencia sistema virtual de arquivos e diretórios 
� Mapeia pastas do sistema de arquivos local (ex: 
c:\htdocs) a diretórios virtuais (ex: /) acessíveis 
remotamente (notação de URI - Uniform 
Resource Identifiers)
� Papel do servidor HTTP
� Interpretar requisições HTTP do cliente (métodos 
GET, POST, ...) 
112
Cliente e Servidor HTTP
� Cliente HTTP
� Navegadores (IE, Netscape, Mosaic, Chrome, Opera, 
Safari, Firefox, etc.)
� Papel do cliente HTTP
� Enviar requisições HTTP (GET, POST, HEAD, ...) a um 
servidor. 
� Requisições contém URI do recurso remoto e, 
opcionalmente, dados (se método HTTP for POST)
�Processar respostas HTTP recebidas (interpretar 
cabeçalhos, identificar tipo de dados, interpretar dados 
ou repassá-los.
113
Página Alo Mundo (AloMundo.html)
<HTML>
<HEAD>
<TITLE>Alo Mundo em HTML</TITLE>
</HEAD>
<BODY>
Alo mundo!!!
</BODY>
</HTML>
114
Página Alo Mundo (AloMundo.html)
115
Flags TCP
� CWR - Congestion Window Reduced
� ECE - Explicit Congestion Notification echo
� URG – Urgent
� ACK – Acknowledgement
� PSH – Push
� RST – Reset
� SYN – Synchronize
� FIN - Finished
116
Página com imagem (Imagem.html)
<html>
<head>
<title>Página com imagem</title>
</head>
<body>
Imagem: <img src="java.jpg">
</body>
</html>
117
Página com imagem (Imagem.html)
118
Página com imagem (Imagem.html)
119
Página com cookie
GET /Exemplos/html/Cookies.html HTTP/1.1
Accept: */*
Referer: http://setembro:8080/Exemplos/html/
Accept-Language: pt-br
UA-CPU: x86
Accept-Encoding: gzip, deflate
If-Modified-Since: Sat, 09 Aug 2008 15:08:07 GMT
If-None-Match: W/"225-1218294487705"
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
Host: setembro:8080
Connection: Keep-Alive
Cookie: nomeDoCookie=COMIDA
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
ETag: W/"225-1218294893537"
Last-Modified: Sat, 09 Aug 2008 15:14:53 GMT
Content-Type: text/html
Content-Length: 225
Date: Sat, 09 Aug 2008 15:15:12 GMT
<html>
<head>
<META HTTP-EQUIV="Set-Cookie" CONTENT="nomeDoCookie=COMIDA;expires=Wednesday, 19-Jan-38 3:14:07 GMT; 
path=/">
<title>Envia e recebe cookies</title>
</head>
<body>
Usando cookies em html
</body>
</html>
120
Comparação entre tecnologias
� Cliente-side
� Javascript (Jscript)
� VBScript
� Applets Java
� Server-side
� CGI (Perl)
� ASP
� PHP
� Servlets
� JSP
121
HTML - HyperText Markup Language
� Define a interface do usuário na Web
� Pode ser usada para 
� Definir a estrutura do texto de uma página (que 
o browser posteriormente formatará com uma 
folha de estilos) 
� Incluir imagens numa página 
� Incluir vínculos a outras páginas 
� Construir uma interface com formulários para 
envio de dados ao servidor 
� Servir de base para aplicações rodarem dentro 
do browser (javascript, applets Java, plug-ins, 
vídeos, etc.)
122
CSS - Cascading Style Sheets
� Linguagem usada para definir folhas de estilo 
que podem ser aplicadas a todo o site. 
� Cuida exclusivamente da aparência (forma) 
da página 
� Permite posicionamento absoluto de textos e 
imagens, manipulação com fontes, cores, etc.
� Regras são colocadas em arquivo de texto 
.css: 
123
Limitações
� HTML e CSS são linguagens declarativas, 
interpretadas pelo browser, que definem apenas 
como a informação será organizada e apresentada.
� Não oferecem recursos de programação.
� Os formulários criados com HTML não fazem nada 
(eles precisam ser vinculados a uma aplicação)
� Não é possível construir aplicações Web interativas 
utilizando apenas CSS e HTML
� DHTML: solução para alguns problemas 
� apresentação + estrutura + interatividade
124
Tecnologias interativas
� Lado-cliente 
� Linguagens de extensão: JavaScript, VBScript 
� Plug-ins e componentes (applets, activeX) 
� Soluções integradas: DHTML
� Persistência de sessão cliente-servidor 
� Cookies
� Lado-servidor 
� CGI, plug-ins do servidor e componentes 
� Linguagens de extensão: SAPIs, ASP, JSP, PHP
125
Tecnologias lado cliente
� Estendem a funcionalidade básica do browser
� Permitem criar uma interface do usuário dinâmica 
� Tratamento de eventos 
� Alteração dinâmica do conteúdo ou da apresentação 
� Realização de cálculos e computação 
� Disposição de recursos não disponíveis no browser
� Principais tecnologias 
� Extensões do HTML (scripts): JavaScript, VBScript, 
linguagens proprietárias 
� Extensões do browser (componentes): Applets, ActiveX, 
Plug-ins
126
Scripts: extensões do HTML
� Forma mais flexível de estender o HTML
� Código geralmente fica visível na página: 
� Linguagens de roteiro (script) mais populares 
� VBScript (MSIE): baseado na sintaxe do VB.
� JavaScript (Netscape)/JScript (MSIE): sintaxe 
semelhante a C
� Código é interpretado diretamente pelo 
browser
127
Tecnologias lado servidor
� Estendem as funções básicas de servidor HTTP: 
� CGI - Common Gateway Interface 
� APIs: ISAPI, NSAPI, Apache API, Servlet API, ... 
� Scripts: ASP, JSP, LiveWire (SSJS), Cold Fusion, PHP, ...
� Rodam do lado do servidor, portanto, não 
dependem de suporte por parte dos browsers 
� Browsers fornecem apenas a interface do usuário
� Interceptam o curso normal da comunicação 
� Recebem dados via requisições HTTP (GET e POST) 
� Devolvem dados através de respostas HTTP
128
CGI - Common Gateway Interface
� Especificação que determina como construir uma 
aplicação que será executada pelo servidor Web
� Programas CGI podem ser escritos em qualquer 
linguagem de programação. A especificação limita-
se a determinar os formatos de entrada e saída dos 
dados (HTTP).
� O que interessa é que o programa seja capaz de:
� Obter dados de entrada a partir de uma requisição HTTP 
� Gerar uma resposta HTTP incluindo os dados e parte do 
cabeçalho
� Escopo: camada do servidor 
� Não requer quaisquer funções adicionais do cliente ou do 
HTTP
129
Scripts de servidor
� Alguns dos mais populares: 
� Microsoft Active Server Pages (ASP) 
� Sun JavaServer Pages (JSP) 
� PHP
� A página geralmente possui uma extensão de nome de 
arquivo diferente para que o servidor a identifique como um 
programa
� As página ASP, PHP, JSP, etc. são processadas e os roteiros 
são executados pelo servidor, que os consome 
� No browser, chega apenas a saída do programa: página HTML 
� Comandos % .. % ou similares nunca chegam no browser 
� Servidor envia cabeçalho Content-type: text/html (default) ou algum 
outro tipo texto (text/xml, text/plain)
130
Resumindo: Site Web x Aplicação Web
Site Web Aplicação Web
131
Alo Mundo em HTML
<HTML>
<HEAD>
<TITLE>Alo Mundo em HTML</TITLE>
</HEAD>
<BODY>
Alo mundo!!!
</BODY>
</HTML>
132
Alo Mundo em JSP
<html>
<head>
<title>Alo mundo em JSP</title>
</head>
<body>
<%="Alo mundo!!! Funcionou!!! Ops... é óbvio..." %>
</body>
</html>
133
Alo Mundo Bean
package aloMundo;
public class AloMundo implements java.io.Serializable
{
Private String nome;
public AloMundo()
{
this.nome = "mundo";
}
public String getNome()
{
return nome;
}
public void setNome(String nome)
{
this.nome = nome;
}
}
134
Alo Mundo Bean
<HTML>
<HEAD>
<TITLE>Alo mundo (versão Bean)</TITLE>
</HEAD>
<BODY>
<jsp:useBean id="alo" class="aloMundo.AloMundo"/>
<jsp:setProperty name="alo" property="nome" param="nome"/>
Alo <jsp:getProperty name="alo" property="nome"/>!!
</BODY>
</HTML>
135
Perguntas?
136
Aula HTML
� HTML
137
Arquivo HTML
� O que é uma página web?
� Uma página é um arquivo texto
� (abra uma página qualquer e utilize "visualizar fonte")
� Browser (navegador)
� Interpreta o HTML
� Exibe a página formatada
� Ex. de uso médio em dezembro de 2010:
� Internet Explorer (44,53%)
� Firefox (29,56%)
� Chrome (12,34%)
� Safari (5,80%)
� Opera (2,15%)
� Móvel (4,10%)
Fonte: http://en.w
ikipedia.org/w
iki/U
sage_share_of_w
eb_brow
sers
138
HTML
� Hypertext Markup Language (Linguagem de 
Marcação de Hipertexto)
� Hipertexto: links dentro de uma página web
� HTML não é uma linguagem de programação
� HTML utiliza tags para realizar a marcação do 
texto das páginas web
139
Tags HTML
� Tags de marcação HTML são chamadas 
simplesmente de tags HTML
� TagsHTML são palavras chaves dentro de < e > 
como por exemplo <html>
� Tags HTML geralmente aparecem aos pares 
como <b> e </b>
� A primeira tag de um par é a tag de abertura e a 
segunda a tag de fechamento
140
Documento HTML = Página Web
� Documentos HTML:
� Descrevem páginas web
� Contém tags HTML e texto puro
� Também chamadas de páginas web
� A finalidade de um browser é ler o 
documento HTML e o exibir como uma página 
web
� O browser não mostra as tags HTML, mas as 
utiliza para interpretar o conteúdo da página
141
Documento HTML = Página Web
<html>
<body>
<h1>Meu primeiro cabeçalho</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
142
Elementos HTML
� Um elemento HTML é tudo desde a tag de abertura 
até a tag de fechamento
Tag de abertura Elemento contido Tag de fechamento
<p> Este é um parágrafo </p>
<a href="pagina.html"> Este é um link </a>
<br />
143
Sintaxe dos elementos HTML
� Um elemento HTML inicia com uma tag de abertura
� Um elemento HTML termina com uma tag de fechamento
� O elemento contido é qualquer coisa entre o início e o fim
� Algumas tags HTML tem conteúdo vazio
� Elementos vazios são fechados na tag de abertura
� Algumas tags podem possuir atributos
� Um elemento HTML inicia com uma tag de abertura
� Um elemento HTML termina com uma tag de fechamento
� O elemento contido é qualquer coisa entre o início e o fim
� Algumas tags HTML tem conteúdo vazio
� Elementos vazios são fechados na tag de abertura
� Algumas tags podem possuir atributos
144
Elementos HTML Aninhados
� A maior parte dos elementos HTML podem 
ser aninhados – podem conter outros 
elementos HTML
� Um documento HTML consiste de elementos 
HTML aninhados
<html>
<body>
<h1>Meu primeiro cabeçalho</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
145
Não esqueça a tag de fechamento!
� A maior parte dos browsers irão exibir corretamente 
mesmo se você esquecer as tags de fechamento
<p>Isto é um parágrafo
<p>Isto é outro parágrafo
� O exemplo acima irá funcionar na maioria dos 
browsers, mas não confine nisto.
� Esquecer a tag de fechamento pode causar 
resultados inesperados ou erros em versões futuras 
de browsers
� Obs.: versões futuras de HTML não permitirão que 
você não use as tags de fechamento
146
Elementos HTML vazios
� Elementos HTML sem conteúdo são 
chamados de elementos vazios
� Elementos vazios podem ser fechados na tag 
de abertura
� <br> é um elemento que não possui uma tag 
de fechamento
� Em XHTML, XML e versões futuras de HTML, 
todos os elementos deverão ser fechados
� Utilize <... /> em tags vazias (sem conteúdo) 
- <br />
147
Atributos HTML
� Elementos HTML podem ter atributos
� Atributos:
� Fornecem informações adicionais sobre o 
elemento
� Somente são especificados na tag de abertura
� Aparecem em pares do tipo nome/valor: 
nome="valor"
148
Exemplo de atributo
� Links HTML são especificados pela tag <a>
� O endereço do link é fornecido como um 
atributo
<a href='http://www.meslin.com.br'>Este é um link</a>
149
Utilize cotas para valores dos atributos
� Os valores dos atributos devem ser escritos 
entre aspas " ou entre plics ' (aspas simples)
<a href="http://www.meslin.com.br">Este é um link</a>
<a href='http://www.meslin.com.br'>Este é um link</a>
150
Dica: utilize letras minúsculas
� Tags HTML não diferenciam letras maiúsculas de 
minúsculas.
� <P> e <p> significam a mesma coisa
� W3C recomenda o uso de letras minúsculas em 
HTML 4
� Futuras versões de HTML e XHTML utilizarão 
somente tags com letras minúsculas
� Nome do atributo e seu valor também não 
diferenciam maiúsculas de minúsculas
� Da mesma forma, o uso de letras minúsculas para o 
nome do atributo é recomendável
� Utilize também letras minúsculas para o valor do 
atributo, exceto quando o uso de letras maiúsculas 
for necessário
151
Cabeçalhos HTML
� Cabeçalhos são definidos por tags de <h1> (maior letra) até <h6> (menor letra)
� Exemplo:
<html>
<body>
<h1>Este é um cabeçalho H1</h1>
<h2>Este é um cabeçalho H2</h2>
<h3>Este é um cabeçalho H3</h3>
</body>
</html>
� Obs.: o browser adiciona uma quebra de linha antes e depois de um cabeçalho
152
Linhas em HTML
� A tag <hr /> é utilizada para criar uma linha horizontal
<html>
<body>
<h1>Este é um cabeçalho H1</h1>
<hr />
<h2>Este é um cabeçalho H2</h2>
<hr />
<h3>Este é um cabeçalho H3</h3>
</body>
</html>
153
Comentário HTML
� Comentários devem ser incluídos nos códigos 
HTML para melhorar a legibilidade e o 
entendimento
� Comentários são ignorados pelo browser –
eles não são exibidos
<!-- este é um comentário -->
� Atenção: existe um ponto de exclamação no 
início da tag, mas não no final
154
Parágrafos
� Parágrafos são definidos pela tag <p>
<html>
<body>
<p>Isto é um parágrafo</p>
<p>Isto é outro parágrafo</p>
</body>
</html>
155
Quebra de linhas
� Utilize <br /> se você quiser quebrar uma linha sem começar um novo parágrafo
<html>
<body>
<p>Isto é 
um parágrafo</p>
<p>Isto é outro parágrafo</p>
<p>Este 
é um <br />
pará<br />
grafo com quebra de linha</p>
</body>
</html>
156
Formatação
157
Atributo style
� Utilize no lugar das seguintes tags:
� <center>
� <font>
� <basefont>
� <s>
� <strikeout>
� <u>
� E dos seguintes atributos:
� align
� bgcolor
� color
158
Exemplos de style
� Cor do fundo:
� Define uma cor de fundo para uma página:
<body style="background-color:yellow">
� Tipo, cor e tamanho de fonte:
� Define um estilo para um parágrafo
<p style="font-family:courier new; color:red; font-
size:20px">
� Alinhamento de texto:
� Define um alinhamento para um cabeçalho <h1>
<h1 style="text-align:center">
159
Hiperlinks, âncoras e links
� Hiperlink é uma referência a um recurso na 
web
� Hiperlink pode apontar para qualquer recurso 
da web:
� Uma página HTML
� Uma imagem
� Um arquivo de som
� Um arquivo de filme
� Âncora é o termo utilizado para o destino de 
um hiperlink dentro de um documento
160
Um link HTML
� Sintaxe:
<a href="url">texto do link</a>
� Obs.: o "texto do link" não precisa ser um texto, 
pode ser uma imagem ou qualquer outro elemento 
HTML
� O atributo href define o endereço destino do link
<a href='http://www.meslin.com.br'>Meu site</a>
� O código acima irá ser exibido em um browser da 
seguinte forma:
Meu site
161
O atributo target
� O atributo target define onde o documento 
referenciado deverá ser aberto
<a href="http://www.meslin.com.br" 
target="_blank">Meu site</a>
� O código acima irá abrir o documento em 
uma nova janela do browser
162
O atributo name
� Quando o atributo name é utilizado, a tag <a> define uma 
âncora dentro de um documento HTML
� Uma âncora é invisível para o usuário
� Sintaxe:
<a name="lugar">qualquer conteúdo (geralmente vazio)</a>
� Um link para esta âncora dentro da mesma página:
<a href="#lugar">o link</a>
� Um link para esta âncora em outra página web
<a href="pagina.html#lugar">o link</a>
� Um link para esta âncora em outra página de outro site
<a href="http://www.meslin.com.br/pagina.html#lugar">o link</a> 
163
Imagens
� Em HTML, uma imagem é definida por uma tag <img>
� A tag <img> é vazia
� O atributo src indica o endereço (url) da imagem
� Sintaxe:
<img src="url" />
� Exemplo:
� Imagem no mesmo diretório do arquivo HTML
<img src="imagem.gif">
� Imagem em outro diretório
<img src="diretorio/imagem.gif" />
� Imagem em outro site
<img src="http://www.meslin.com.br/diretorio/imagem.gif" />
164
O atributo alt
� Utilizado para definir um texto alternativo
� Texto definido pelo autor
� Ferramentasde acessibilidade utilizam este texto 
para descrever a imagem para deficientes visuais
� O texto será mostrado
� Se o endereço da imagem estiver errado
� Se a imagem demorar a ser carregada
� Se o usuário desabilitar a possibilidade do browser exibir 
imagem
� Sintaxe:
<img src="imagem.gif" alt="um texto alternativo"/>
165
Tabelas
� Definição da tabela em si:
<table> .... </table>
� Atributos:
� border = largura da borda em pixels
� cellspacing = espaço entre as células
� cellpadding = espaço entre o texto e as bordas
� width = largura da tabela
166
Tabelas
� Definição dos elementos da tabela:
� <tr>....</tr> - Linha
� <th>....</th> - Cabeçalho
� <td>....</td> - Célula
� Atributos:
� valign = alinhamento vertical (TOP, MIDDLE ou BOTTOM)
� align = alinhamento horizontal (LEFT, CENTER ou RIGHT)
� rowspan = número de linhas ocupadas pela célula
� colspan = número de colunas ocupadas pela célula
� width = largura da célula
� height = altura da célula
� bgcolor = cor de fundo
� nowrap
167
Tabelas
� Aplicando cores na tabela:
� bgcolor pode ser usado dentro de
� <table>
� <tr>
� <td>
168
Exemplos de tabelas
<html>
<body>
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table> 
</body>
</html>
169
Tabela com cabeçalho
<html>
<body>
<table border="1">
<tr>
<th>Cabeçalho</th>
<th>Outro Cabeçalho</th>
</tr>
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table> 
</body>
</html>
170
Tabela com célula vazia
<html>
<body>
Uma tabela
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td></td>
</tr>
</table> 
Outra tabela
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>&nbsp;</td>
</tr>
</table> 
</body>
</html>
171
Listas não numeradas
� <ul type="circle" | "disc" | "square">
<li type="circle" | "disc" | "square"
value="numero">
</ul>
172
Listas não numeradas
<ul>
<li> Correio Eletrônico </li>
<li> Telnet </li>
<li> FTP </li>
</ul>
� Obs:
� Listas podem ser aninhadas
� </li> é opcional atualmente, mas devemos nos 
lembrar de colocar
173
Listas Numeradas
<ol 
start="numero" 
type="A" | "a" | "I" | "i" | "1">
<li type="circle" | "disc" | "square" |
"A" | "a" | "I" | "i" | "1"
value="numero">
</ol>
174
Listas numeradas
<ol>
<li> Correio Eletrônico </li>
<li> Telnet </li>
<li> FTP </li>
</ol>
175
Listas usando estilo
� <ol style="list-style-type: tipo;">
� tipo:
� decimal – números decimais começando de 1 
� decimal-leading-zero – números decimais começando com zero (ex: 
01, 02, 03, ..., 98, 99). 
� lower-roman: algarismos romanos minúsculos
� upper-roman : algarismos romanos maiúsculos
� hebrew: números hebraicos tradicionais
� georgian: números "Georganos" tradicionais(an, ban, gan, ..., he, 
tan, in, in-an, ...). 
� armenian: números armenianos tradicionais
� cjk-ideographic: números plenamente ideograficos
� hiragana: a, i, u, e, o, ka, ki, ... 
� Katakana: A, I, U, E, O, KA, KI, ... 
� hiragana-iroha: i, ro, ha, ni, ho, he, to, ... 
� katakana-iroha: I, RO, HA, NI, HO, HE, TO, ... 
176
Exemplo de listas
Lista não ordenada
<ul>
<li> Correio Eletrônico </li>
<li> Telnet </li>
<li> FTP </li>
</ul>
Lista ordenada
<ol>
<li> Correio Eletrônico </li>
<li> Telnet </li>
<li> FTP </li>
</ol>
Romano Minúsculo
<ol style="list-style-type: lower-roman;">
<li> Este é o primeiro item.</li>
<li> Este é o segundo item.</li>
<li> Este é o terceiro item.</li>
</ol>
Decimal
<ol style="list-style-type: decimal;">
<li> Este é o primeiro item.</li>
<li> Este é o segundo item.</li>
<li> Este é o terceiro item.</li>
</ol>
Romano Maiúsculo
<ol style="list-style-type: upper-roman;">
<li> Este é o primeiro item.</li>
<li> Este é o segundo item.</li>
<li> Este é o terceiro item.</li>
</ol>
Alfabético minúsculo
<ol style="list-style-type: lower-alpha;">
<li> Este é o primeiro item.</li>
<li> Este é o segundo item.</li>
<li> Este é o terceiro item.</li>
</ol>
Alfabético minúsculo
<ol style="list-style-type: upper-alpha;">
<li> Este é o primeiro item.</li>
<li> Este é o segundo item.</li>
<li> Este é o terceiro item.</li>
</ol>
177
Formulários
� Um formulário é uma área onde são 
colocados os elementos de um formulário
� Elementos de um formulário permitem ao 
usuário entrar com informações
� Um formulário é definido pela tag <form>
<form>
Elementos de entrada
</form>
178
Formulários: Codificação Básica
<form method="post|get" action="URL do CGI">
. . .
definição dos ítens do formulário
. . .
</form>
� Para enviar o formulário por e-mail:
<form action="mailto:nome@servidor"
enctype="text/plain">
179
Campo de Texto
Conta:<input type="text" name="conta" 
size="20" maxlength="20" />
Senha:<input type="password" name="senha" 
size="20" maxlength="20" />
180
Área de Texto
Comentários:<br />
<textarea name="texto" rows="3" 
cols="40">
Digite aqui um texto qualquer.
</textarea>
181
Menus
� Sexo: 
<select name="sexo">
<option selected>Masculino</option>
<option>Feminino</option>
</select>
182
Botões "Sim ou Não"
� Áreas de interesse: <br />
<input type="checkbox" name="b1" 
value="v1" />Redes<br />
<input type="checkbox" name="b2" 
value="v2" />Bancos de Dados<br />
183
Botões de Rádio
� Sexo: 
<input type="radio" name="sexo" value="M" />Masculino
<input type="radio" name="sexo" value="F" />Feminino
184
Outros Campos
� Campo escondido
<input type="hidden" name="nome" value="valor" />
� Campo de upload de arquivo
<input type="file" name="nome" value="valor" />
185
Botões de Envio
� <input type="submit" value="Envia" />
<input type="reset" value="Limpa" />
186
Tabelas
� Com tabelas, podemos facilmente dividir uma 
página em colunas e células
187
Frames
� Com frames, podemos mostra mais do que 
um documento HTML na mesma janela do 
browser
� Cada documento HTML se localiza em um 
frame
� Os frames são independentes
� Problemas:
� Vários documentos HTML
� Pode gerar dificuldades com a impressão
188
A tag <frameset>
� Define como a janela será dividida em frames
� Cada <frameset> define um conjunto de 
linhas OU colunas
189
A tag <frame>
� Define o documento HTML que irá ocupar o frame
� Exemplo:
� Um conjunto de duas colunas
� A primeira com 25% da largura
� O documento frameA.html ocupará a primeira coluna 
enquanto o documento frameB.html a segunda
<frameset cols="25%,*">
<frame src="frameA.html" />
<frame src="frameB.html" />
</frameset>
� Obs.: o tamanho da coluna pode ser especificado 
em pixels
190
Exemplo
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm" name="FrameA">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm" name="FrameB">
<frame noresize="noresize" src="frame_c.htm" name="FrameC">
</frameset>
</frameset>
</html>
191
Exemplo de uso de <iframe>
<html>
<body>
<iframe src="default.asp"/>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
192
Modificando fontes
� A tag <font> é desaconselhada
� Devemos utilizar o atributo style
<html>
<body>
<h1 style="font-family:verdana">Cabeçalho</h1>
<p style="font-family:courier">Parágrafo</p>
</body>
</html>
� Tamanho de fontes
<html>
<body>
<h1 style="font-size:150%">Cabeçalho</h1><p style="font-size:80%">Parágrafo</p>
</body>
</html>
193
Mais fontes
� Cor do texto
<html>
<body>
<h1 style="color:blue">Cabeçalho</h1>
<p style="color:red">Parágrafo</p>
</body>
</html>
� Combinando tudo...
<html>
<body>
<p style="font-family:verdana;font-size:80%;color:green">
Este é um parágrafo em verdana, com 80% do tamanho na cor verde.
</p>
</body>
</html>
194
Mais sobre estilos
� Uso de uma folha de estilos externa:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 
� Uma folha de estilos interna
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head> 
� Estilos inline
<p style="color:red; margin-left:20px">Parágrafo</p>
195
Caracteres especiais
196
Elementos de um cabeçalhos
� Dentro das tags <head></head> podemos 
encontrar:
� <base> : define a base para os links neste 
documento
� <link> : define uma referência para recursos
� <meta> : define meta-informações
� <title> : define o título do documento
� <style> : define um estilo
� <script> : permite a criação de scripts
197
Tag <meta>
� Descrição da página:
<meta name="description" content="Free Web 
tutorials on HTML, CSS, XML, and XHTML" /> 
� Definição de palavras chaves:
<meta name="keywords" content="HTML, 
DHTML, CSS, XML, XHTML, JavaScript" /> 
� Outros atributos de meta (???)
<meta name="security" content="low" /> 
198
Links
� Um link tem o seguinte formato:
esquema://[host].domínio:[porta][/caminho][/arqu
ivo]
� esquema: tipo de serviço
� host: nome da máquina
� domínio: domínio onde está a máquina
� porta: número da porta
� caminho: pasta ou diretório
� arquivo: o arquivo propriamente dito
199
Alguns esquemas
200
Exemplos
� Acesso a newsgroup
<a href="news:alt.html">HTML Newsgroup</a> 
� Download via ftp
<a href="ftp://ftp.meslin.com.br/ftp/winzip.exe">Download 
WinZip</a> 
� Enviando email
<a href="mailto:alguem@correio.com.br">Enviar email 
para alguém</a> 
� Link para uma outra página em outro site:
<a href='http://www.outrosite.com.br/diretorio/arquivo'>O 
link</a>
201
Exemplos
� Link para uma outra página no meu site:
<a href='/diretorio/arquivo'>O link</a>
� Equivalente a <a 
href='http://www.meusite.com.br/diretorio/arqui
vo'>O link</a>
� Link para um arquivo no mesmo diretório
<a href='arquivo.html'>O link</a>
� Para mudar de protocolo
href='https://www.meusite.com.br/diretorio/arqui
vo'>O link</a>
202
Scripts (em javascript, é óbvio!)
� Não confunda Java com Javascript!
<html>
<body>
<script type="text/javascript">
document.write("Alo mundo!");
</script>
</body>
</html> 
203
Eventos
� Eventos relativos a janelas
� Somente válidos em body e em frameset
204
Eventos
� Eventos relativos a formulários
� Somente válidos em elementos de formulários
205
Eventos
� Eventos de teclado
206
Eventos
� Eventos relativos a mouse
207
Perguntas?
208
Parte 4
� Java Server Page
� Elementos de script
� Tags
� Declarações de variáveis e métodos
209
JSP - Java Server Page 
� Tecnologia para desenvolvimento de aplicações 
WEB semelhante ao Microsoft Active Server Page 
(ASP).
� Usada para servir conteúdo dinâmico para o 
usuário, usando lógica e dados no lado do servidor.
� Permite ao desenvolvedor de sites produzir 
aplicações que permitam: 
� o acesso a banco de dados ou a arquivos texto, 
� a captação de informações através de formulários ou 
sobre o visitante e sobre o servidor, 
� o uso de variáveis e loops, entre outras coisas.
210
Vantagens do JSP 
� Portabilidade de plataforma.
� Em conjunto com Java Servlets e Java Beans pode 
ser usada para desenvolver aplicações web 
eficientes, escaláveis e seguras rapidamente.
� Codificação simples, facilitando assim a elaboração e 
manutenção da aplicação.
� Permite separar a programação lógica (conteúdo 
dinâmico) da programação visual (conteúdo 
estático).
211
Arquitetura de Aplicação Java para Web
JSP
Application Server
Browser
Servlet
Classes Java
/ EJB
HTTP / HTML
Banco 
de Dados
212
Um página JSP
� É um documento texto composto por duas 
partes:
� dados de template estáticos, que podem ser 
expressos em qualquer formato baseado em 
texto (HTML, XML e similares); 
� e elementos JSP, construindo conteúdo 
dinâmico.
213
Funcionamento
� A página JSP é 
requisitada pelo cliente 
através do browser;
� Esta página é 
executada pelo 
servidor;
� É gerada uma página 
HTML que será enviada 
de volta ao browser do 
cliente.
214
Tags JSP
� As tags em HTML são processadas pelo 
navegador do cliente para mostrar a página.
� As tags no JSP são usadas pelo servidor WEB 
para gerar conteúdo dinâmico.
� Tags do tipo script
� <% %>
� !
� =
� @
215
Tags JSP
� Tags do tipo XML
� Case-sensitive
� Self-container
� <jsp:xxxxx />
� Container
� <jsp:xxxxxx> yyyyyyy </jsp:xxxxxx>
216
Elementos de Script
� Scriptlets <% %>
� Declarações <%! %>
� Expressões <%= %>
� Comentários <%-- --%>
� Diretivas <%@ %>
217
Scriptlets
� <% scriptlet %>
� São blocos de código Java embutidos numa página 
JSP. 
� O código do scriptlet é inserido literalmente no 
servlet gerado pela página.
� Sintaxe: 
<% bloco com vários comandos %>
� Exemplo: (Alo mundo! no próximo slide)
218
Elementos de Scripts: scriptlets
<HTML>
<HEAD>
<TITLE>Alo mundo!!!</TITLE>
</HEAD>
<BODY>
<%
String visitante = 
request.getParameter("nome");
if (visitante == null)
visitante = "mundo";
%>
Alo <%=visitante%>!
</BODY>
</HTML>
package org.apache.jsp.AloMundo;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;
public final class AloMundo_jsp extends org.apache.jasper.runtime.HttpJspBase
implements org.apache.jasper.runtime.JspSourceDependent {
private static final JspFactory _jspxFactory = JspFactory.getDefaultFactory();
private static java.util.List _jspx_dependants;
private javax.el.ExpressionFactory _el_expressionfactory;
private org.apache.AnnotationProcessor _jsp_annotationprocessor;
public Object getDependants() {
return _jspx_dependants;
}
public void _jspInit() {
_el_expressionfactory = _jspxFactory.getJspApplicationContext(getServletConfig().getServletContext()).getExpressionFactory();
_jsp_annotationprocessor = (org.apache.AnnotationProcessor) getServletConfig().getServletContext().getAttribute(org.apache.AnnotationProcessor.class.getName());
}
public void _jspDestroy() {
}
public void _jspService(HttpServletRequest request, HttpServletResponse response)
throws java.io.IOException, ServletException {
PageContext pageContext = null;
HttpSession session = null;
ServletContext application = null;
ServletConfig config = null;
JspWriter out = null;
Object page = this;
JspWriter _jspx_out = null;
PageContext _jspx_page_context = null;
try {
response.setContentType("text/html");
pageContext = _jspxFactory.getPageContext(this, request, response,
null, true, 8192, true);
_jspx_page_context = pageContext;
application = pageContext.getServletContext();
config = pageContext.getServletConfig();
session = pageContext.getSession();
out = pageContext.getOut();
_jspx_out = out;
out.write("<HTML>\r\n");
out.write("<HEAD>\r\n");
out.write("<TITLE>Alo 
mundo!!!</TITLE>\r\n");
out.write("</HEAD>\r\n");
out.write("<BODY>\r\n");
String visitante = 
request.getParameter("nome");
if (visitante == null) visitante = 
"mundo";
out.write("\r\n");
out.write("Alo ");
out.print(visitante);
out.write("!\r\n");
out.write("</BODY>\r\n");
out.write("</HTML>\r\n");
} catch (Throwable t) {
if(!(t instanceof SkipPageException)){
out = _jspx_out;
if (out != null && out.getBufferSize() != 0)
try { out.clearBuffer(); } catch (java.io.IOException e) {}
if (_jspx_page_context != null) _jspx_page_context.handlePageException(t);
}
} finally {
_jspxFactory.releasePageContext(_jspx_page_context);
}
}
}
219
Declarações
� São usadas para definir variáveis de classe e 
métodos específicos para uma página JSP.
� Os métodos e variáveis podem então ser 
referenciados por outros elementos de criação de 
scriptlets na mesma página.
� Sintaxe: 
� <%! Declaração %>
� <jsp:declaration>declarações</jsp:declaration>
� Exemplo 
� <%! int i = 0; double d; %>
� <%! Cliente c = new Cliente("Francesca");%>
220
Declaração de variáveis de classe
<html>
<head>
<title>Variáveis</title>
</head>
<body>
<%!int a; %>
<%int b; %>
</body>
</html>
package org.apache.jsp.AloMundo;
…
public final class Variaveis_jsp 
extends ... {
int a;
public void 
_jspService(HttpServletRequest 
request, HttpServletResponse 
response)
throws java.io.IOException, 
ServletException {
…
out.write("<html>\n");
out.write("<head>\n");
out.write("<title>Variáveis</title
>\n");
out.write("</head>\n");
out.write("<body>\r\n");
out.write('\n');
int b;
out.write("\n");
out.write("</body>\n");
out.write("</html>");
…
221
Declaração de Métodos
<%!
public long fatorial (long x)
{
if (x == 0)
return 1;
return x * fatorial (x-1);
}
%>
� Por que tem que ser uma declaração e não pode ser 
um scriptlet?
222
Declarações
<html>
<head>
<title>Página inicial</title>
</head>
<body>
Criando as variáveis x, y e unidades com os respectivos valores
0, 1, "metros"
<%!
private int x = 87, y = 52;
private String unidades="metros";
%>
<% int z = 8752; %>
<p>
x = <%=x++ %><br>
y = <%=y-- %><br>
unidades = <%=unidades %><br>
z = <%=--z %><br>
</body>
</html>
223
Manipulando eventos com ciclo de vida
<%!
public void jspInit()
{
// código de inicialização
}
public void jspDestroy()
{
// código de "destruição"
}
%>
224
Manipulando eventos com ciclo de vida
<%@ page import="java.util.Date" %>
<html>
<head>
<title>jspInit &amp; jspDestroy</title>
</head>
<body>
<% Date data = new Date(); %>
Último acesso em: 
<%=data.getHours()%>:<%=data.getMinutes()%>:<%=data.getSeconds()%>
<%!
public void jspInit() // código de inicialização
{
Date data = new Date();
System.out.println("***Iniciando a página em " + data.getHours() + 
":" + data.getMinutes() + ":" + data.getSeconds() + "***");
}
public void jspDestroy() // código de "destruição"
{
Date data = new Date();
System.out.println("***Terminando a página em " + data.getHours() + 
":" + data.getMinutes() + ":" + data.getSeconds() + "***");
}
%>
</body>
</html>
225
Expressões
� Contém uma expressão válida da linguagem 
Java, que é avaliada, convertida para String e 
inserida na página JSP.
� Não é usado ponto-e-vírgula para terminar a 
expressão.
� Essa avaliação é feita em tempo de execução 
(quando a página é solicitada), permitindo 
fácil e rápido acesso à informação que foi 
requisitada.
226
Elementos de Script: expressões
� Sintaxe:
� <%= expressão %>
� <jsp:expression>expressão</jsp:expression>
� Equivalente a:
� <% out.print(expressão); %>
� Exemplo:
<%= a+b+c %>
<%= itens[i] %>
227
Alo Mundo (2) em JSP
<HTML>
<HEAD>
<TITLE>Alo mundo!!!</TITLE>
</HEAD>
<BODY>
<%
String visitante = request.getParameter("nome");
if (visitante == null)
visitante = "mundo";
%>
Alo <%=visitante%>!
</BODY>
</HTML>
228
Comentários
� Existem dois tipos de comentários que podem ser 
usados em uma página JSP: 
� Comentários de Conteúdo: Esses comentários são 
transmitidos de volta para navegador como parte da 
resposta de JSP e são visíveis na visualização do código 
da página. 
� <!-- comentário -->
� Cometários JSP: Não são enviados para o cliente e são 
visíveis apenas nos arquivos fonte JSP originais. O corpo 
do comentário é ignorado pelo container JSP. 
� <%-- comentário --%>
� <% /* comentário */ %>
� <% // comentário %>
229
Parte 4,5
� Diretivas
� page
� include
� taglib
230
Diretivas
� São usadas para fornecer informações 
especiais ao container JSP sobre a página JSP 
quando esta é compilada para servlet.
� Sintaxe:
� <%@ diretiva atributo1="valor1" atributo 
2="valor2" ... %>
� <jsp:directive.diretiva atributo1="valor1" 
atributo 2="valor2" ... />
231
Diretivas
� Não produz saída visível para o cliente.
� Existem três tipos de diretivas: 
� page: define atributos que são aplicados a todo 
o arquivo JSP e a todos os seus arquivos 
incluídos estaticamente. 
� include: permite que sejam incluídos arquivos 
na hora em que a página JSP é traduzida no 
servlet.
� taglib: definem um modelo de tags 
personalizadas
232
Diretiva page
� info
� language
� contentType
� extends
� import
� session
� buffer
� autoFlush
� isThreadSafe
� errorPage
� isErrorPage
233
Diretiva page: info
� Informações sobre documentação
� Utilizado por programas de documentação
� <%@ page info="Informações sobre 
esta página" %>
� Normalmente incluir:
� Autor
� Versão
� Copyright
� <%@page info="e-Comércio, Copyright 
2005, Alexandre Meslin" %>
234
Diretiva page: info
<%@ page info = "Alo mundo, copyright by Meslin" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Alo mundo!</TITLE>
</HEAD>
<BODY>
<h1>Alo mundo!!!</h1>
e só...
</BODY>
</HTML>
235
Diretiva page: info
236
Diretiva page: info
237
Diretiva page: language
� Utilizado para especificar a linguagem de 
script de servidor utilizada na página
� Java, por padrão
� <%@ page language="java" %>
238
Diretiva page: language
<%@ page 
info = "Alo mundo, copyright by Meslin" 
language="java"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML><HEAD>
<TITLE>Exemplo de escolha de linguagem</TITLE>
</HEAD>
<BODY>
<h1>Alo mundo!!!</h1>
e só...
</BODY></HTML>
239
Diretiva page: contentType
� Especifica o conteúdo da resposta a ser enviada
� <%@page contentType="text/html; 
charset=ISO-8859-1" %>
� <%@page contentType="text/xml" %>
� <%@page contentType="text/plain" %>
� <%@page contentType="image/gif" %>
� <%@page contentType="image/jpeg" %>
� <%@page contentType="application/msword" %>
240
Diretiva page: contentType
<%@ page contentType="application/vnd.ms-excel"%>
<HTML><HEAD><TITLE>Planilha Excel</TITLE></HEAD><BODY>
<TABLE>
<TR ALIGN="left" VALIGN="middle">
<TH>Mes</TH>
<TH>Filial 1</TH>
<TH>Filial 2</TH>
<TH>Filial 3</TH>
<TH>Filial 4</TH>
<TH>Filial 5</TH>
</TR>
<TR ALIGN="left" VALIGN="middle">
<TD>1</TD>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR ALIGN="left" VALIGN="middle">
<TD>2</TD>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR ALIGN="left" VALIGN="middle">
<TD>3</TD>
241
Mime types
� application/msword doc 
� application/pdf pdf 
� application/vnd.ms-excel xls 
� application/vnd.ms-
powerpoint ppt 
� application/x-shockwave-
flash swf 
� image/bmp bmp 
� image/gif gif 
� image/jpeg jpeg jpg jpe 
� image/png png 
� video/mpeg mpeg mpg 
mpe 
� application/zip zip 
� text/xml xml dtd xsl
� text/html shtml html htm 
� text/css css 
� image/tiff tiff tif 
� audio/x-wav wav 
� audio/midi mid midi kar 
� audio/mpeg mpga mp2 
mp3 
� application/postscript ai eps 
ps 
� video/quicktime qt mov 
242
Mime types
� application/andrew-inset ez 
� application/mac-binhex40 hqx 
� application/mac-compactprocpt 
� application/mathml+xml mathml 
� application/octet-stream bin dms lha lzh 
exe class so dll 
� application/oda oda 
� application/ogg ogg 
� application/rdf+xml rdf 
� application/smil smi smil 
� application/srgs gram 
� application/srgs+xml grxml 
� application/vnd.mif mif 
� application/vnd.mozilla.xul+xml xul 
� application/vnd.wap.wbxml wbxml 
� application/vnd.wap.wmlc wmlc 
� application/vnd.wap.wmlscriptc wmlsc 
� application/voicexml+xml vxml 
� application/x-bcpio bcpio 
� application/x-cdlink vcd 
� application/x-chess-pgn pgn 
� application/x-cpio cpio 
� application/x-x509-ca-cert .crt 
� application/xhtml+xml xhtml xht 
� application/xml xml xsl 
� application/xml-dtd dtd 
� application/xslt+xml xslt 
� audio/basic au snd 
� audio/x-aiff aif aiff aifc 
� audio/x-mpegurl m3u 
� audio/x-pn-realaudio ram rm 
� audio/x-pn-realaudio-plugin rpm 
� audio/x-realaudio ra 
� chemical/x-pdb pdb 
� chemical/x-xyz xyz 
� image/cgm cgm 
� image/ief ief 
� image/svg+xml svg 
� image/vnd.djvu djvu djv 
� image/vnd.wap.wbmp wbmp 
� image/x-cmu-raster ras 
� image/x-icon ico 
� image/x-portable-anymap pnm 
� image/x-portable-bitmap pbm 
243
Diretiva page: extends
� <%@ page extends="pacote1.pacote2.Classe" %>
244
Diretiva page: import
� <%@ page import="java.util.List" %>
� <%@ page import="java.util.List, 
java.text.*" %>
245
Diretiva page: import
<%@ page 
info="eu já vi isto antes..."
language="java" 
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" 
import="java.util.Date" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<TITLE>Dia & Hora</TITLE>
</head>
<body>
<h1>Dia e Hora</h1>
<% Date data = new Date(); %>
Ao sinal serão... 
<%=data.getDate()%>/<%=data.getMonth()+1%>/<%=data.getYear()+1900%> -
<%=data.getHours()%>:<%=data.getMinutes()%>
</body>
</html>
246
Diretiva page: session
� Informa se a página deve participar ou não 
da sessão
� true por padrão
� <%@ page session="false" %>
� <%@ page session="true" %>
247
Diretiva page: session
<%@ page 
info="Copyright: Alexandre Meslin"
language="java" 
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" 
session="true"
%>
<html>
<head>
<title>Sessão</title>
</head>
<body>
<%
int
cont=Integer.parseInt(session.getAttribute("cont")==null?"0":sessio
n.getAttribute("cont").toString());
session.setAttribute("cont", new Integer (++cont)); 
%>
Bem vindo visitante <%= cont %>
</body>
</html>
248
Diretiva page: buffer
� Informa o tamanho do buffer de saída
� <%@ page buffer="none"%>
� <%@ page buffer="128kb"%>
� O valor padrão depende do servidor utilizado
� Normalmente igual ou maior que 8 kbytes
249
Diretiva page: autoFlush
� Verdadeiro: o buffer é enviado quando cheio
� Falso: é levantada uma exceção quando o 
buffer estiver cheio
� <%@ page autoFlush="true"%>
� <%@ page autoFlush="false"%>
� Obs.: o valor falso é inválido para 
buffer="none"
250
Diretiva page buffer & autoFlush
<%@ page language="java" 
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
buffer="128kb"
autoFlush="false"
%>
<html>
<head>
<title>Flush e Buffer (128k)</title>
</head>
<body>
<% out.flush(); %>
Início da página...
<%
Thread.sleep(20*1000); // tempo em milisegundos
out.flush(); 
Thread.sleep(20*1000); // tempo em milisegundos
%>
<p>Fim da página...
</body>
</html>
251
Diretiva page: isThreadSafe
� Indica se a thread pode ser executada em 
paralelo a outras instâncias dela
<%@ page isThreadSafe="true"%>
<%@ page isThreadSafe="false"%>
� Default: true
� Veja exemplo no próximo slide de um código 
não seguro
252
Diretiva page: isThreadSafe
� Exemplo de código não seguro
<%@ page language="java" 
isThreadSafe="false"
%>
<html>
<head>
<title>Thread Unsafe</title>
</head>
<body>
<%! private int idNum = 0; %>
<%
String userID = "userID" + idNum;
out.println("Seu ID é " + userID + ".");
idNum = idNum + 1;
%>
</body>
</html>
253
Diretiva page: isThreadSafe
� Exemplo de código seguro
<%@ page language="java" 
isThreadSafe="true"
%>
<html>
<head>
<title>Thread Safe</title>
</head>
<body>
<%! private int idNum = 0; %>
<%
synchronized(this)
{
String userID = "userID" + idNum;
out.println("Seu ID é " + userID + ".");
idNum = idNum + 1;
}
%>
</body>
</html>
Péssima idéia 
usar “this” para 
sincronizar
254
Diretiva page: errorPage
� Importância de uma página de erro (veja o 
próximo slide)
� Não substitui o conjunto try-catch
� Mensagem de erro ao usuário deve ser clara 
e procurar minimizar o problema
� Deve apresentar alternativas ou forma 
eficiente de contato para solucionar o 
problema
255
Diretiva page: errorPage
256
Diretiva page: errorPage
257
Diretiva page: errorPage
258
Diretiva page: errorPage
259
Diretiva page: errorPage
� <%@ page errorPage="/dir/erro.jsp"%>
<%@page errorPage="Erro.jsp" %>
<HTML>
<HEAD><TITLE>Cálculo de Velocidade</TITLE></HEAD>
<BODY>
<h1>Calculando a velocidade</h1>
<%!
private double toDouble (String valor)
{
return Double.valueOf(valor).doubleValue();
}
%>
<%
double distancia = toDouble (request.getParameter("dist"));
double tempo = toDouble (request.getParameter("tempo"));
double vel = distancia/tempo;
%>
<ul>
<li>Distância = <%=distancia%>
<li>Tempo = <%=tempo%>
<li>Velocidade = <b><%=vel%> km/h</b>
</ul>
</BODY>
</HTML>
260
Diretiva page: isErrorPage
� <%@ page isErrorPage= "true" %>
<%@page import="java.io.*"
isErrorPage="true"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Arquivo de erro de velocidade</TITLE>
</HEAD>
<BODY>
<h1><font color=red>Erro ao calcular velocidade</font></h1>
Ocorreu o seguinte erro em Velocidade.jsp: <%=exception%>.
<p>
Este erro ocorreu na seguinte parte do código 
(esta mensagem abaixo, em vermelho, você não está vendo!):
<pre>
<font color="red">
<% exception.printStackTrace(new PrintWriter (out)); %>
</font>
</pre>
</BODY>
</HTML>
Obviamente, isto é apenas 
um exemplo, ninguém vai 
imprimir a stack para o 
usuário
261
Diretiva page: isErrorPage
� Mesma página sem isErrorPage...
<%@page import="java.lang.Exception,java.io.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Arquivo de erro de velocidade</TITLE>
</HEAD>
<BODY>
<h1><font color=red>Erro ao calcular velocidade</font></h1>
Ocorreu o seguinte erro em Velocidade.jsp: 
<%="Não tenho o objeto exception"%>.
<p>
Este erro ocorreu na seguinte parte do código:
<% // exception.printStackTrace(new PrintWriter (out)); %>
</BODY>
</HTML>
262
Diretiva include
� É processada quando a página JSP é traduzida para uma 
classe de servlet.
� O efeito da diretiva é inserir o texto contido em outro arquivo 
- conteúdo estático ou outra página JSP - na página JSP 
inclusiva.
� Sintaxe 
� <%@ include file="URLlocal" %>
� Exemplo (no próximo slide)
� Rodape.jsp
� Pagina.jsp
263
Diretiva include – exemplo
� Pagina.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Página com include</TITLE>
</HEAD>
<BODY>
<h1>Exemplo de include</h1>
Esta página tem um include que inclui um arquivo chamado Rodape.jsp. 
Este arquivo realiza um contador de acessos.
<p>Veja logo a seguir o efeito:
<p>
<%@include file="Rodape.jsp" %>
<p>
Voltei!!! Será?
</BODY>
</HTML>
264
Diretiva include – exemplo
� Rodape.jsp
<!-- note a ausência de cabeçalho html -->
<%@page import="java.util.Date"%>
<%!
private int contador = 0;
privateDate data = new Date ();
private String host = "nenhum acesso anterior";
%>
Esta página foi acessada <%=++contador%> vezes desde que o 
conteiner foi reiniciado.<br>
E foi acessada a última vez por <%=host%> em <%=data%>.
<%
host = request.getRemoteHost();
data = new Date();
%>
265
Contador com arquivo
<%@page language="java"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Contagem permanente</TITLE>
</HEAD>
<BODY>
<h1>Exemplo de include</h1>
Esta página tem um include que inclui um arquivo chamado 
RodapeArquivo2.jsp. 
Este arquivo realiza um contador de acessos onde o nome do 
arquivo é passado como parâmetro para o
arquivo de contagem.
<p>Veja logo a seguir o efeito:
<jsp:include page="RodapeArquivo2.jsp" flush="true">
<jsp:param name="arquivo" value="contador.txt" />
</jsp:include>
</BODY>
</HTML>
266
Contador com arquivo
� Rodapé: arquivo RodapeArquivo2.jsp
<!-- note a ausência de cabeçalho html -->
<%@ page import="java.io.*"%>
<%
String arquivo = new String ("C:\\Documents and Settings\\meslin\\My 
Documents\\Cursos\\JSP\\auxiliar\\"+request.getParameter("arquivo"));
int contador;
try
{
BufferedReader entrada = new BufferedReader(new FileReader(arquivo));
contador = Integer.parseInt(entrada.readLine());
entrada.close();
}
catch (IOException e)
{
contador = 0;
}
catch (Exception e)
{
contador = 0;
}
contador++;
BufferedWriter saida = new BufferedWriter(new FileWriter(arquivo));
saida.write(String.valueOf(contador));
saida.close();
%>
<hr>Esta página foi acessada <%=contador%> vezes desde que o container foi criado.
267
Diretiva taglib
� <%@ taglib uri="URIBiblioteca" 
prefix="Prefixo"%>
� <jsp:directive.taglib uri="URIBiblioteca" 
prefix="Prefixo" />
268
Diretiva taglib – Arquivo AloMundo.jsp
<%@ page 
language="java" 
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<%@ taglib uri="AloMundo.tld" prefix="alo" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title><alo:mundo />JTLB</title>
</head>
<body>
<h1><alo:mundo /></h1>
</body>
</html>
269
Diretiva taglib – Arquivo AloMundo.tld
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD 
JSP Tag Library 1.1//EN" 
"http://java.sun.com/j2ee/dtds/web-
jsptaglibrary_1_1.dtd">
<taglib>
<tlibversion>1.0</tlibversion>
<jspversion>1.1</jspversion>
<shortname>alo</shortname>
<info>TabLib de Alo Mundo!!!</info>
<tag>
<name>mundo</name>
<tagclass>tagLib.AloMundo</tagclass>
<info>Devolve Alo Mundo</info>
<bodycontent>EMPTY</bodycontent>
</tag>
</taglib>
270
Diretiva taglib – Arquivo AloMundo.java
package tagLib;
import java.io.IOException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
public class AloMundo extends TagSupport
{
private static final long serialVersionUID = 1L;
public int doStartTag()
{
JspWriter saida = pageContext.getOut();
try
{
saida.print("Alo mundo!!!");
} 
catch (IOException e)
{
e.printStackTrace();
}
return SKIP_BODY;
}
}
271
Diretiva taglib – Arquivo AloMundos.jsp
<%@ page 
language="java" 
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<%@ taglib uri="AloMundo.tld" prefix="alo" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title><alo:mundos vezes='3' /> JTLB</title>
</head>
<body>
<h1><alo:mundos vezes ='5' /></h1>
</body>
</html>
272
Diretiva taglib – Arquivo AloMundo.tld
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag 
Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-
jsptaglibrary_1_1.dtd">
<taglib>
<tlibversion>1.0</tlibversion>
<jspversion>1.1</jspversion>
<shortname>alo</shortname>
<info>TabLib de Alo Mundo!!!</info>
<tag>
. . .
</tag>
<tag>
<name>mundos</name>
<tagclass>tagLib.AloMundos</tagclass>
<info>Devolve Alo Mundo Mundo Mundo...</info>
<bodycontent>EMPTY</bodycontent>
<attribute>
<name>vezes</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
</tag>
</taglib>
273
Diretiva taglib – Arquivo AloMundos.java
package tagLib;
import java.io.IOException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
public class AloMundos extends TagSupport
{
private static final long serialVersionUID = 1L;
private int vezes=0;
public int getVezes() { return vezes; }
public void setVezes(int vezes) { this.vezes = vezes; }
public int doStartTag()
{
JspWriter saida = pageContext.getOut();
try
{
saida.print("Alo");
for (int i = 0; i < vezes; i++)
saida.print(" Mundo");
saida.print("!!!");
} 
catch (IOException e)
{
e.printStackTrace();
}
return SKIP_BODY;
}
}
275
Perguntas?
276
Exercícios 1
277
Exercícios em conjunto
1. Faça uma página HTML que escreva “Alo 
mundo!”.
2. Converta a página do exercício anterior para 
JSP
3. Mude o valor estático da frase do exercício 
anterior para uma string JSP
278
Exercícios individuais
� Faça uma página que mostre o valor de uma 
variável
� Algoritmo:
� Crie uma variável
� Atribua um valor a esta variável
� Mostre o valor da variável em um browser
279
Exercícios individuais
� Faça uma página que some dois números 
inteiros (2 e 3) utilizando variáveis e mostre o 
resultado no formato: 2 + 3 = 5
� Algoritmo:
� Crie 3 variáveis
� Atribua 2 e 3 às duas primeiras variáveis
� Some as duas variáveis e armazene o resultado na 
terceira variável
� Mostre o resultado no formato pedido
280
Exercícios individuais
� Faça uma página que escreva os números de 
0 até 9, um número em cada linha.
0
1
2
3
4
5
6
7
8
9
281
Exercícios individuais
� Faça uma página que imprima números de 0 
até 99 (10 em cada linha).
282
Exercícios individuais
� Faça uma página que mostre um tabuleiro de 
xadrez (8x8)
283
Exercícios individuais
1. Faça uma página que mostre o dia e a hora 
do servidor no formato: dd/mm/aaaa –
hh:mm.
2. Refaça a página anterior para mostrar a 
data por extenso em português.
Sábado, 25 de setembro de 2004
284
Exercícios individuais
� Faça uma página JSP que imprima uma 
tabela HTML de conversão Celsius-Fahrenheit 
com valores de temperatura entre -40 e 100 
graus Celsius em incremento de 10 em 10. A 
equação é: F = 9/5 C + 32
285
Exercícios individuais
� Faça uma página que possua um contador de 
acesso. 
286
Exercícios individuais
1. Faça uma página JSP que gere um conteúdo 
no formato texto
2. Modifique o exercício anterior para gerar um 
conteúdo no formato documento do MS-
Word
287
Parte 5
� Objetos Implícitos
288
Objetos Implícitos
� page 
� config 
� request 
� response 
� out
� session 
� application 
� pageContext
� exception
289
pageContext
� Usado em servlets para obter informações de 
contexto de JSP
� Classe:
� javax.servlet.jsp.PageContext
292
pageContext.forward(url)
� Desvia para a página especificada pela url relativa
<%@ page 
language="java" 
contentType="text/html; charset=ISO-8859-1“
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Página não vista</title>
</head>
<body>
<h1>Esta página irá desviar para outra página</h1>
(em 10 segundos!)
<%
//out.flush(); // com flush o forward não funciona!
Thread.sleep(10 * 1000);
pageContext.forward("final.jsp"); 
%>
</body>
</html>
293
pageContext.include(url)
� Inclui a página especificada pela url relativa
<%@ pagelanguage="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Página original</title>
</head>
<body>
<h1>Texto na página original!</h1>
<%pageContext.include("paginaIncluida.jsp"); %>
<h2>Novamente, texto na página original</h2>
</body>
</html>
294
page
� Representa a própria página
� Interface:
� javax.servlet.jsp.HttpJspPage 
� Descrição: Instância de servlet da página. 
� Equivalente ao “this”.
295
config
� Recupera parâmetros de inicialização
� Interface: javax.servlet.ServletConfig. 
� Descrição: Dados de configuração de servlet.
� Raramente utilizado
� Enumeration config.getInitParameterNames()
� String config.getInitParameter(String nome)
� ServletContext config.getServletContext()
� String config.getServletName()
297
request
� Interface: 
� javax.servlet.ServletRequest. 
� Descrição: Dados de solicitação, incluindo 
parâmetros.
298
request - atributos
� Atributos
� Object request.getAttribute(String nome) 
� Valor do atributo por nome
� Enumeration request.getAttributeNames()
� Nome dos atributos 
� void request.setAttribute(String nome, Object valor) 
� Modifica valor do atributo por nome
� void request.removeAttribute(Object nome)
� Remove atributo
Exemplo no próximo slide
299
request - atributos
<%@ page 
language="java" 
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<html>
<head>
<title>Cria atributos</title>
</head>
<body>
<h1>Cria atributos...</h1>
<%
request.setAttribute("atributo1", "valor1");
request.setAttribute("atributo2", "valor2");
request.setAttribute("atributo3", "valor3");
RequestDispatcher proximo = 
request.getRequestDispatcher("Request.jsp?campo=banana&campo
1=abacaxi&campo2=abacate");
proximo.forward(request, response);
%>
</body>
</html>
request –
atributos
<HTML>
<BODY>
<H1>Objeto Request</H1>
<H2>Métodos</H2>
<TABLE BORDER>
<TR>
<TH COLSPAN="2">Atributos</TH>
</TR>
<TR>
<TD>request.setAttribute(nome,valor)</TD><TD><%request.setAttribute("nome","valor");%></TD>
</TR>
<TR>
<TD>request.getAttribute(nome)</TD><TD><%=request.getAttribute("nome")%></TD>
</TR>
<TR>
<TD>request.getAttribute("atributo1")</TD><TD><%=request.getAttribute("atributo1")%></TD>
</TR>
<TR>
<TD>request.getAttributeNames()</TD>
<TD><%=request.getAttributeNames()%> <%
Enumeration<String> atributos = (Enumeration<String>)request.getAttributeNames();
while (atributos.hasMoreElements())
{
out.println ("<br>|" + atributos.nextElement() + "|");
}
%>
</TD>
</TR>
<TR>
<TD>request.removeAttribute(nome)</TD><TD><%request.removeAttribute("nome");%></TD>
</TR>
</TABLE>
</BODY>
</HTML>
301
request
� Codificação
� String request.getCharacterEncoding()
� Obtém a página de código
� void request.setCharacterEncoding(String 
código)
� Especifica a página de código
� Obrigatoriamente, um valor válido de página de 
código
Exemplo no próximo slide
302
request
<% request.setCharacterEncoding("ISO-8859-1"); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Character Encoding</title>
</head>
<body>
O tipo de codificação desta página é: 
<%= request.getCharacterEncoding() %>
</body>
</html>
303
request
� Transferência
� int request.getContentLength()
� Obtém o tamanho da transferência
� String request.getMethod() 
� Método da requisição (post/get)
� String request.getContentType() 
� Obtém o tipo de dado transferido
� String request.getQueryString()
� Query String (!)
� String request.getContextPath()
� Endereço do contexto
Exemplo no próximo slide
304
request (transferência)
<html>
<head>
<title>Transferência</title>
</head>
<body>
<h1>Transferência</h1>
<b><%= request.getContentLength() %></b> bytes transferidos<br>
O método da transferência é <b><%=request.getMethod() %></b><br>
O tipo da transferência foi <b><%= request.getContentType() %></b><br>
A querystring é <b><%= request.getQueryString() %></b><br>
O contexto está em <b><%= request.getContextPath() %></b><br>
<hr>
<form action="<%= request.getRequestURL() %>?campo=valor" 
method="post">
<input type="text" name="campo" value="valor">
<input type="submit" value="Envia">
</form>
</body>
</html>
305
request
� Parâmetros
� String request.getParameter(String nome) 
� Obtém o valor do campo do formulário pelo nome
� String[] request.getParameterValues(String nome)
� Obtém os valores do campo do formulário pelo nome 
� Enumeration request.getParameterNames() 
� Obtém o nome dos campos do formulário
� Map request.getParameterMap()
Exemplo no próximo slide
306
request (parâmetros)
<%@ page import="java.util.*" %>
<html><head><title>Parâmetros</title></head>
<body>
<h1>Parâmetros</h1>
Parametro "campo": <%= request.getParameter("texto") %><br>
<%
String nome="texto"; 
String nomes[] = request.getParameterValues("caixa");
Enumeration lista = request.getParameterNames();
%>
<p>
Valores do checkbox:<br>
<%
if (nomes != null)
for (int i=0; i<nomes.length; i++)
out.println(i + ": " + nomes[i] +"<br>");
else
out.print("***Não há parâmetros \"checkbox\"");
out.println("<p>Nome dos campos<br/>");
while (lista.hasMoreElements())
out.println((String)lista.nextElement() +"<br>");
%> � Continua
307
request (parâmetros)
� Continuação
<form action="<%=request.getRequestURL() %>" method="post">
<input type="text" name="texto" value="valor do texto"><br>
<%
for (int i = 0; i < 10; i++)
{
out.println("<input type='checkbox' name='caixa' 
value='checkbox" + i + "' checked>");
}
%>
<br>
<input type="submit" name="envia">
</form>
</body>
</html>
308
request
� Transporte
� String request.getAuthType() 
� String request.getProtocol() 
� String request.getScheme() 
� String request.getServerName() 
� boolean request.isSecure() 
� String request.getRequestURI()
� RequestDispatcher 
request.getRequestDispatcher(String path)
� String request.getRequestURL()
309
request
� Transporte
� String request.getServerName() 
� Nome do servidor
� int request.getServerPort() 
� Porta do servidor
� String request.getRemoteAddr() 
� Endereço IP do cliente
� String request.getRemoteHost() 
� Nome ou endereço IP do cliente
� String request.getLocalAddr()
� Endereço IP do servidor
� String request.getLocalName()
� Nome do servidor
Exemplo no próximo slide
310
request
<html>
<head>
<title>Informações do Cliente</title>
</head>
<body>
Detalhes do computador cliente:<br>
Endereço IP: <%=request.getRemoteAddr()%><br>
Nome do computador: <%=request.getRemoteHost()%><br>
Detalhes do computador servidor:<br>
Endereço IP: <%=request.getLocalAddr()%><br>
Nome do computador: <%=request.getLocalName()%><br>
Nome do servidor: <%=request.getServerName() %><br>
Porta do servidor: <%=request.getServerPort() %>
</body>
</html>
311
request
� Local
� String request.getLocale()
� Local do browser
� Enumeration request.getLocales() 
� Lista de locais do browser
312
request – Localidade
<html>
<head>
<title>Localidade</title>
</head>
<body>
Localidade: <%=request.getLocale() %><br>
Todas as localidades: 
<%
java.util.Enumeration lista = request.getLocales();
while (lista.hasMoreElements())
out.println(lista.nextElement());
%>
</body>
</html>
313
request
� Cookies & Sessão
� Cookie request.getCookies()
� HttpSession request.getSession()
� HttpSession request.getSession(boolean create)
� boolean request.isRequestedSessionIdValid()