Técnicas de Programação TÉCNICAS DE PROGRAMAÇÃO 2

Técnicas de Programação Faculdade de Informática/PUCRS 1
TÉCNICAS DE
PROGRAMAÇÃO
Unidade 08
A Camada de Apresentação
Web
CAMADA DE
APRESENTAÇÃO
Web
Arquitetura para Web


• Pontos importantes em Aplicações Web:
• Interface de usuário baseada em padrões de grande alcance
(HTML , CSS, JavaScript, etc)
• Dificuldade no desenvolvimento de interfaces de usuário ricas
• Dependência de conexão com rede (100% conectada)

• Quando um navegador web solicita uma página HTML de
um servidor web, o servidor web localiza o arquivo e
envia o conteúdo de volta ao cliente
• Nesse cenário, o conteúdo da página é estático
• Hoje em dia sistemas na web fornecem páginas com
conteúdo dinâmico
• Diversas tecnologias que suportam o processamento de
requisições HTTP através de recursos dinâmicos que geram HTML

• Duas formas principais de estruturação de código em um
servidor web:
• Código de script
• Ex.: CGI, Java Servlets, PHP
• Código de páginas (server pages)

• Ex.: JSP, ASP, PHP
Exemplo
• ConversorTemperaturaV1
CONCEITOS BÁSICOS
HTTP e HTML
HTTP
• A comunicação com servidores e aplicativos web
se dá através do protocolo Hypertext Transfer
Protocol
• Protocolo de nível de aplicação
• Protocolo textual
• Protocolo baseado em mensagens de
requisição/resposta no modelo cliente/servidor
• Protocolo sem manutenção de estado
HTTP
• Um URL Uniform Resource Locator é utilizado para
identificar recursos em um servidor web
• Ex.: http://java.sun.com/index.html
• Formato geral:
"http:" "//" host [ ":" port ] [path [ "?" query ]]
HTTP
• Uma mensagem HTTP consiste de:
• Uma linha inicial
• Um ou mais campos de cabeçalho
• Uma linha em branco
• Possivelmente um corpo da mensagem
HTTP
• Alguns comandos de requisição (8 no padrão):
GET Solicita um recurso ao servidor
POST Fornece a entrada para um comando do lado

do servidor e devolve o resultado
PUT Envia um recurso ao servidor
DELETE Exclui um recurso do servidor
TRACE Rastreia a comunicação com o servidor

HTTP
• Requisição via GET:
GET /index.html HTTP/1.1

Host: www.exemplo.com
HTTP
• Requisição via POST:
POST /index.html HTTP/1.0

Accept: text/html
If-modified-since: Sat, 29 Oct 1999 19:43:31 GMT
Content-Type: application/x-www-form-urlencoded
Content-Length: 41
Nome=NomePessoa&Idade=20&Curso=Computacao
HTTP
• Resposta:
HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Etag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Content-Length: 438
Connection: close
Content-Type: text/html; charset=UTF-8
HTTP
• São dois os comandos mais utilizados para fornecer
entrada de dados aos programas no lado servidor:
• GET
• POST
HTTP
• GET:
• Método mais simples
• Quantidade de dados limitada
• Limite implementado nos navegadores
• Dados acrescentados à URL após um caractere “?”, no formato
“campo=valor”, separados pelo caractere “&”
• Recebe o nome de query-string
• Ex.:
• http://www.aqui.com/prog?id=1&ano=2008
HTTP
• POST:
• Método mais robusto
• Quantidade de dados não é limitada como no GET
• Dados (query-string) enviados no corpo da requisição do protocolo
Páginas Web
• Duas sintaxes concretas para a definição de documentos
que são processados pelos navegadores:
• HTML – HyperText Markup Language
• XHTML – Extensible HyperText Markup Language
• HTML e XHTML não são a mesma coisa!

• HTML é uma aplicação SGML
• SGML – Standard Generalized Markup Language
• XHTML é uma aplicação XML
• XML – Extensible Markup Language
• Existem regras para criar documentos XHTML compatíveis com
HTML para navegadores
Páginas Web
• HTML foi originalmente desenvolvido por Tim Berners-
Lee no CERN e popularizado pelo navegador NCSA
Mosaic na década de 1990
• HTML 2.0 especificado em 1994
• HTML 5 em processo de especificação
Páginas Web
• XHTML 1.0 especificado em 2000
• XHTML 1.1 especificado em 2001
• XHTML Basic 1.1 especificado em 2008
• XHTML 5 em processo de especificação
Elementos
• Documentos são compostos de elementos
• Um elemento consiste:
• Marcação (tag) de abertura
• Conteúdo
• Marcação de fechamento
Elementos
• Uma marcação de abertura consiste em:
• Sinal <
• Nome da marcação
• Atributos opcionais <html>
• Sinal > <td rowspan=“3”>
• Uma marcação de fechamento consiste em:

• Sinal </
• Nome da marcação
• Sinal >
</html>
Elementos
• Alguns elementos são vazios
• Não possuem conteúdo
• Um elemento vazio consiste:
• Sinal <
• Nome da marcação <br />
• Atributos opcionais
• Sinal />
• Um atributo consiste:
• Nome do atributo
• Sinal =
• Valor do atributo entre aspas
Documentos
• Um documento HTML é composto de 3 partes:
• Uma linha contendo o tipo do documento
• Uma seção declarativa de cabeçalho
• Elemento HEAD
• Uma seção de corpo que define o conteúdo do documento
• Elementos BODY ou FRAMESET
• As seções de cabeçalho e corpo deve estar aninhadas

dentro do elemento HTML
Documentos
• A estrutura básica de um documento HTML apresenta as
seguintes marcações:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
Marcações que definem informações sobre o documento
<title>Título</title>
</head>
<body>
Marcações que definem o conteúdo do documento
</body>
</html>
Exemplo
• Pagina index.html
Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">
<html>
<head>
<title>Conversor de Temperatura</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
</head>
<body>
<h1>Conversor de Temperatura</h1>
</body>
</html>
Formulários
• Formulários representam fragmentos de documentos que
contêm elementos de interação com o usuário chamados
de controles
• Representam pontos de entrada de dados a serem
enviados para processamento em um servidor
Formulários
• Formulário:
• Elemento FORM
• Atua como um contêiner para os controles
• Especifica
• A entidade que irá receber os dados do formulário através do atributo
action
• O método (get ou post) pelo qual os dados serão enviados ao servidor
através do atributo method
• O formato de codificação dos dados enviados ao servidor através do
atributo enctype
• application/x-www-form-urlencoded é o valor padrão
Exemplo
Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">
<html>
<head>
charset=UTF-8">
</head>
<body>
<form name="formConversor" action="conversor">
</form>
</body>
</html>
Formulários
• Controles:
• HTML define vários controles:
• botões de ação,
• botões de seleção,
• botões de rádio,
• listas de seleção,
• caixas de texto,
• seleção de arquivos,
• controles escondidos,
• objetos
Formulários
• Caixas de texto simples:
• Elemento INPUT com atributo type text
• Elemento INPUT com atributo type password
• Texto é renderizado com os caracteres ofuscados
• Atributo size especifica o número de caracteres do tamanho do
controle
• Atributo value especifica o valor inicial do controle
• Atributo maxlenght especifica o número máximo de caracteres
que pode ser fornecido para o controle
Exemplo
Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
charset=UTF-8">
</head>
<body>
Temperatura em Celsius:
<input type="text" name="grCelsius" value="0" size="10“
/><br>
</form>
</body>
</html>
Formulários
• Ex.: formulario1.html
<form action="recurso" method="post" >

<input name="txtNome" type="text" size="20“
maxlength="25">
<br>
<input name="txtSenha" type="password" size="30“
maxlength="30">
</form>
Formulários
• Botões:
• Três tipos de botões
• Botão de submissão (submit) – enviar dados do formulário para o
servidor
• Botão de reset (reset) – restaurar os valores inicias dos controles do
formulário
• Botão de pressão (push) – sem ação padrão, com scripts associados a
seus eventos
• Dois elementos diferentes

• Elemento INPUT
• Elemento BUTTON
• Provê possibilidades mais ricas de renderização
Formulários
• Botões de submissão:
• Elemento INPUT com atributo type submit
• Atributo value especifica o rótulo do botão
• Elemento BUTTON com atributo type submit
• Permite que o rótulo do botão seja definido pelo conteúdo do
elemento
• Por exemplo, pode-se utilizar uma imagem como conteúdo
Exemplo
Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
charset=UTF-8">
</head>
<body>
Temperatura em Celsius:
<input type="text" name="grCelsius“
value="0" size="10" /><br>
<input type="submit" value="Converte“
name="butConverte" />
</form>
</body>
</html>
Formulários
• Botões de reset:
• Elemento INPUT com atributo type reset
• Elemento BUTTON com atributo type reset
elemento
Formulários
• Botões de pressão:
• Elemento INPUT com atributo type button
• Elemento BUTTON com atributo type button
elemento
Formulários

<input type="submit" value="OK">
<button type="reset">Limpar</button>
<button type="button">Clique Aqui!</button>
</form>
Formulários
• Caixas de texto múltiplo:
• Elemento TEXTAREA
• Conteúdo do elemento define o valor inicial
• Atributo cols especifica a quantidade de caracteres na horizontal
• Atributo rows especifica o número de linhas
Formulários

<textarea rows="5" cols="30">Valor inicial de um
campo de texto de múltiplas linhas.</textarea>
</form>
Formulários
• Listas de seleção:
• Elemento SELECT
• Fornecem um meio se selecionar valores dentro de um conjunto de
opções
• Atributo size especifica o número de linhas de opções que é
mostrado pelo navegador
• Navegador usualmente escolhe o tipo de elemento visual que será
mostrado em função deste número
• Ex.: lista de seleção ou menu drop-down
• Atributo multiple especifica se é permitida a seleção de múltiplos
valores
Formulários
• Listas de seleção:
• Elemento OPTION especifica as opções que podem ser
selecionadas
• Conteúdo do elemento especifica o texto que é apresentado como
opção de seleção
• Atributo label especifica um valor a ser utiliza como texto de
apresentação ao invés do conteúdo do elemento
• Atributo value especifica o valor inicial do elemento, se não utiliza
o valor do conteúdo
• Atributo selected especifica que a opção está pré-selecionada
• Deve existir pelo menos uma opção pré-selecionada para evitar erros
Formulários

<p>
<select>
<option selected="selected" value="1">Porto Alegre</option>
<option value="2">Florianópolis</option>
<option value="3">Curitiba</option>
</select>
</p>
<p>
<select multiple="multiple" size="3">
<option selected="selected">Porto Alegre</option>
<option>Florianópolis</option>
<option>Curitiba</option>
</select>
</p>
</form>
Formulários
• Botões de seleção:
• Elemento INPUT com atributo type checkbox
• Representa controles de seleção binária (ligado ou desligado)
• Atributo value especifica o valor inicial do controle (obrigatório)
• Atributo checked especifica se o controle está ligado ou desligado
Formulários
• Botões de rádio:
• Elemento INPUT com atributo type radio
• Representa controles de seleção binária (ligado ou desligado)
• Atributo value especifica o valor inicial do controle (obrigatório)
• Atributo checked especifica se o controle está ligado ou desligado
• Deve existir um dos botões ligado para evitar erros
• Botões de rádio são agrupados pelo valor do atributo name
• Somente um botão do grupo pode estar ligado, ou seja, são
mutuamente exclusivos
Formulários

<p>
<select>
<option selected="selected" value="1">Porto Alegre</option>
<option value="2">Florianópolis</option>
<option value="3">Curitiba</option>
</select>
</p>
<p>
<select multiple="multiple" size="3">
<option selected="selected">Porto Alegre</option>
<option>Florianópolis</option>
<option>Curitiba</option>
</select>
</p>
</form>
Formulários
• Dados escondidos:
• Elemento INPUT com atributo type hidden
• Não representa um controle que é visual
• Usualmente utilizado para armazenar dados que são submetidos
junto ao formulário como uma forma de implementação de
mecanismo de seção
• Atributo value especifica o valor inicial do controle
Formulários
• Controles somente de leitura:
• Atributo readonly
• Impede que o valor do controle seja alterado pelo usuário
• Elementos válidos: INPUT, TEXTAREA
• Controles desabilitados:
• Atributo disabled
• Desabilita um controle, impedindo acesso ao mesmo
• Elementos válidos: BUTTON, INPUT, OPTGROUP, OPTION,
SELECT, TEXTAREA
Recursos
• World Wide Web Consortium
• http://www.w3.org/
• W3C Markup Validation Service

• http://validator.w3.org/
• Elementos HTML 4.01

• http://www.w3.org/TR/html401/index/elements.html
• Atributos HTML 4.01

• http://www.w3.org/TR/html401/index/attributes.html
JAVA PARA WEB

Servlets
Java EE
• Plataforma Java Enterprise Edition
• Versão atual JEE6
• Múltiplas tecnologias:
• Web
• Web Services
• Componentes corporativos
• Gerenciamento
Java EE
Java EE
• Servidor Java EE
• Aplicação servidora que implementa a plataforma Java EE
• Fornece serviços a componentes de software através do conceito
de contêiner
Java EE
• Contêiner Java EE
• Um contêiner é a interface entre um componente de software e
uma funcionalidade de mais baixo nível fornecida pela plataforma
• Diferentes tipos:
• Contêiner web
• Contêiner de aplicação cliente
• Contêiner EJB
Java EE
Java para Web

• Na plataforma Java, um componente web fornece o
mecanismo de extensão que permite a servidores web
oferecerem conteúdos dinâmicos
• Tecnologias:
• Servlets
• JavaServer Pages
• JavaServer Faces
Java para Web

Java para Web

• Aplicativos web funcionam em um modelo
pedido/resposta (request/response)
Java para Web

• Passos:
1. O cliente envia uma requisição HTTP para um servidor Web
2. Um servidor Web que implementa as tecnologias Java EE

converte a requisição em um objeto HTTPServletRequest
3. Este objeto é entregue para um componente web que pode

interagir com outros componentes de software ou com um banco
de dados para gerar conteúdo dinâmico
4. O componente web pode, então, gerar um objeto

HTTPServletResponse e retornar as informações para o cliente
Servlets
• Servlets são programas Java associados a um
servidor que executam computações e geram
dados que são retornados aos clientes
• Usualmente gera documentos HTML
• São a base da implementação dos componentes

web em Java
• Pacotes javax.servlet e javax.servlet.http

Servlets - Criação
• Classe usualmente estende HttpServlet
• Classe é anotada com @WebServlet

• Permite mapear um URL para a classe que responde à requisição
HTTP
• Classe deve implementar (um ou ambos):

• void doGet(HttpServletRequest, HttpServletResponse)
• Processa uma requisição Get do HTTP
• void doPost(HttpServletRequest, HttpServletResponse)

• Processa uma requisição Post do HTTP
Servlets - Criação
• Ex.: JavaServlet1
@WebServlet("/alo")
public class AloMundo extends HttpServlet {
...
}
Servlets - Resposta
• HttpServletResponse
• Objeto cujo conteúdo é o “resultado” da execução do
servlet
• Utilização:
1. Configurar o tipo de conteúdo do protocolo HTTP via método
setContentType()
• É um tipo MIME do HTTP
• http://www.iana.org/assignments/media-types/
2. Obter um fluxo de escrita via métodos getWriter(),
getOutputStream()
3. Gerar conteúdo no fluxo de saída
4. Fechar o fluxo de saída
Servlets - Resposta
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet AloMundo</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Alô Mundo!</h1>");
out.println("</body>");
out.println("</html>");
} finally {
out.close();
}
Servlets - Requisição
• HttpServletRequest
• Objeto que contêm os dados da requisição do cliente
• Utilização:
• Obter dado simples enviado pelo cliente via método
getParameter(String)
• Obter dados múltiplos enviados pelos cliente método
getParameterValues(String)
• Retorna um array de strings com os valores do parâmetro
• Os dados são usualmente fornecidos através de query-strings
• Dos componentes de um formulário HTML
• O nome do parâmetro é o identificador associado ao componente HTML
• diretamente do URL após o símbolo “?”
• O nome do parâmetro é o identificador associado na URL
• Converter os dados de String para o tipo desejado
String nome = request.getParameter(“nome”);
try {
out.println("<h1>Alô " + nome + "!</h1>");
} finally {
out.close();
}
String[] nomes = request.getParameterValues(“nomes");
try {
for(String nome: nomes) {
out.println(nome + "<br />");
}
} finally {
out.close();
}
Exemplo
Exemplo
• Camada de negócio
• Um objeto Conversor possui os métodos de conversão de
temperatura
Exemplo
• Camada de negócio
public class Conversor {

public static double toCelsius(double f) {
return ((f-32)*5)/9;
}
public static double toFahrenheit(double c) {
return ((c*9)/5)+32;
}
}
Exemplo
• Camada de apresentação
• Um objeto servlet ConversorServlet processa os dados obtidos do
formulário da página index.html e gera uma nova página contendo
o resultado da conversão
Exemplo
• Camada de apresentação
@WebServlet(name="ConversorServlet", urlPatterns={"/conversor"})
public class ConversorServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
try {
double grausCelsius = Double.parseDouble(request.getParameter("grCelsius"));
double grausFahrenheit = Conversor.toFahrenheit(grausCelsius);
out.println("<title>Servlet ConversorServlet</title>");
out.println("<h1>Conversor de Temperatura</h1>");
out.println("Temperatura em Fahrenheit:");
out.println("<input type=\"text\" name=\"grFahrenheit\"
value=\""+grausFahrenheit+"\" size=\"10\" readonly=\"readonly\"/>");
} finally {
out.close();
}
}

Técnicas de Programação TÉCNICAS DE PROGRAMAÇÃO 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Técnicas de Programação TÉCNICAS DE PROGRAMAÇÃO 2

Uploaded by

Copyright:

Available Formats

Técnicas de Programação Faculdade de Informática/PUCRS 1

Arquitetura para Web

Arquitetura para Web

Arquitetura para Web

Arquitetura para Web

• Código de páginas (server pages)

GET Solicita um recurso ao servidor

POST Fornece a entrada para um comando do lado

DELETE Exclui um recurso do servidor

TRACE Rastreia a comunicação com o servidor

GET /index.html HTTP/1.1

POST /index.html HTTP/1.0

• HTML e XHTML não são a mesma coisa!

• Uma marcação de fechamento consiste em:

• As seções de cabeçalho e corpo deve estar aninhadas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<form action="recurso" method="post" >

• Dois elementos diferentes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<form action="recurso" method="post" >

<form action="recurso" method="post" >

<form action="recurso" method="post" >

<form action="recurso" method="post" >

• W3C Markup Validation Service

• Elementos HTML 4.01

• Atributos HTML 4.01

JAVA PARA WEB

Java para Web

Java para Web

Java para Web

Java para Web

1. O cliente envia uma requisição HTTP para um servidor Web

2. Um servidor Web que implementa as tecnologias Java EE

3. Este objeto é entregue para um componente web que pode

4. O componente web pode, então, gerar um objeto

• São a base da implementação dos componentes

• Pacotes javax.servlet e javax.servlet.http

• Classe é anotada com @WebServlet

• Classe deve implementar (um ou ambos):

• void doPost(HttpServletRequest, HttpServletResponse)

public class Conversor {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

You might also like