Programação Cliente-servidor TODAS AS AULAS

Prévia do material em texto

Disciplina: Programação Cliente-servidor
Aula 1: HTTP e HTML 5
Apresentação
É impossível imaginar o mundo atual sem a existência da Internet. Redes sociais, aplicativos bancários, sites informativos, e
os mais diversos serviços, são disponibilizados via protocolo HTTP para todo o mundo, derrubando fronteiras e promovendo
um acesso muito democrático à informação.
Nós, como desenvolvedores, devemos conhecer este protocolo e as tecnologias para criação de páginas, como HTML e CSS,
que durante muito tempo apresentaram diversas inconsistências entre navegadores distintos, mas que, atualmente, sob a
normatização da W3C e uso do DOM, converge para um ambiente com baixíssimo índice de incompatibilidade.
Objetivos
Identi�car as características gerais do HTTP;
Explicar a sintaxe básica do HTML 5 e CSS;
Descrever as características do Document Object Model (DOM).
Protocolos
Em uma rede de computadores, podemos observar diferentes tipos de informação transitando a todo o tempo, como arquivos,
vídeos, páginas e e-mails. Para que estas transferências sejam possíveis, é necessário uniformizar a comunicação entre as partes
envolvidas. É neste ponto que aparecem os protocolos.
Um protocolo é, basicamente, um conjunto de regras para a forma de como se dará a
comunicação entre dois dispositivos.
Vale lembrar que o contexto atual envolve não só computadores, mas também celulares, componentes IoT, Smart TVs, entre
diversos outros.
Clique nos botões para ver as informações.
Os primeiros protocolos que devemos ter em mente são o TCP (Transmission Control Protocol) e o IP (Internet Protocol),
pois toda a grande rede da Internet se baseia na combinação destes dois, ou seja, no TCP/IP, responsáveis pela emissão e
recepção de dados entre máquinas da rede.
Logo acima do TCP/IP, outros protocolos serão necessários para especi�car serviços, determinando o formato dos dados a
serem transmitidos.
TCP/IP 
Exemplo
Entre os diversos protocolos existentes, podemos destacar alguns:
FTP – transmissão de arquivos;
SMTP e POP – envio e recepção de e-mails;
SSL – comunicação criptografada;
HTTP – protocolo de hipertexto, ou hipermídia.
Em nossos estudos, o protocolo HTTP é de particular interesse, pois será utilizado como base para a implementação de um
sistema para a World Wide Web, também denominada simplesmente Web ou WWW, que trata de todo o grande conjunto de
documentos de hipermídia disponíveis e interligados existentes na Internet.
Protocolo HTTP 
As máquinas da Internet são identi�cadas por conjuntos de números que vão de 0 a 255, sendo 4 números no caso do IPV4,
e seria muito difícil para o ser humano gravar endereços como 127.54.12.208 e 234.57.125.201.
Logo, foi criado um sistema de identi�cação baseado em nomes, com servidores especí�cos para a tradução destes nomes
para endereços numéricos, os quais são chamados de servidores DNS (Domain Name System).
Com isso, quando digitamos um endereço, como www.estacio.br, este nome é traduzido para o IP da máquina, permitindo
encontrar o site.
Devemos considerar, portanto, um domínio como a relação entre o nome utilizado para navegação e o IP da máquina
servidora que detém os recursos desejados, tais como páginas e arquivos. Todo site está hospedado em algum domínio, de
forma a viabilizar seu acesso através da Internet.
DNS 
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Servidores HTTP
Para que determinado protocolo de serviço seja suportado, é necessário que exista um programa capaz de “escutar” a rede e
prover este serviço.
Estes programas executam em diferentes servidores da rede para que os usuários possam acessar seus serviços através de
programas denominados “clientes”, o que permite de�nir a comunicação como cliente-servidor.
Como poderíamos identi�car de forma imediata o tipo de informação solicitada?
A resposta é simples: através do uso de portas diferentes.
Um programa servidor deve escutar uma ou mais portas de comunicação, que de�nirão o protocolo que será utilizado e,
consequentemente, o tipo de dado que deverá ser transmitido, como as páginas HTML através do HTTP (porta 80), ou o
fornecimento de arquivos via FTP (porta 21).
Existem vários programas servidores (ou simplesmente servidores) que fornecem suporte ao HTTP, como Apache e IIS.
Contudo, para o ambiente de programação Java, é utilizado o Tomcat como Web Server, podendo ser executado de forma
direta, ou incorporado a outros servidores, como GlassFish, WebSphere, BEA Weblogic e JBoss, estes últimos denominados
Application Servers.
Web Server
primeiro fornece nativamente apenas o
suporte a tecnologias Web, como HTML, JSP
e Servlet 
Application Server
acrescenta suporte a tecnologias
corporativas baseadas em objetos
distribuídos, a exemplo dos EJBs (Enterprise
Java Beans).
Clientes HTPP
Um cliente HTTP é tipicamente denominado “navegador”,
sendo comum o seu uso no nosso dia a dia, a exemplo do
Google Chrome, Opera, FireFox, Microsoft Edge, além de
navegadores especí�cos dos diversos dispositivos móveis.
A linguagem HTML foi adotada como padrão para a criação de
páginas na Internet, e um navegador deve ser capaz de
interpretar estas páginas, exibindo o conteúdo com as
formatações corretas e permitindo a navegação entre as
mesmas através de hiperlinks.
É importante notarmos que diferentes dispositivos apresentam
dimensões e recursos variados, o que pode trazer problemas
quanto à exibição da informação. Fato este que acabou
trazendo à tona um termo que se tornou comum no design de
páginas: a responsividade.
Responsividade é a capacidade de exibir a mesma informação em diferentes dispositivos,
adequando o formato da exibição aos mesmos, ou seja, uma interface responsiva pode ser
acessada por diferentes plataformas sem deformações que inviabilizem sua utilização.
Linguagem HTML 5
1991
Foi formalizada a linguagem HTML, do inglês
Hypertext Markup Language, baseada nas
propostas de Tim Berners-Lee, físico britânico
que visava obter um meio de divulgação de suas
pesquisas entre seus colegas.
1996
Inicialmente controlada pela IETF (Internet
Engineering Task Force), passou a ter suas
especi�cações mantidas pela W3C (World Wide
Web Consortium) a partir de 1996, sendo a
recomendação HTML 4.01 publicada em 1999.
2000
A W3C passa a recomendar a sua nova
especi�cação XHTML, a qual traz uma sintaxe
mais rígida para o HTML, baseando-se nas
regras do XML (Extended Markup Language).
2008
Finalmente, a partir da primeira publicação pela
W3C, surge a especi�cação do HTML 5,
o�cializada em 2014, e tendo como
característica principal um novo mecanismo de
extensibilidade que permite combinar
diferentes sintaxes baseadas em XML dentro
de uma mesma página.
Como nas versões iniciais, o HTML 5 é uma linguagem de marcação baseada em
etiquetas (tags) que devem controlar diversos aspectos do texto.
Nas versões iniciais do HTML ocorria o controle tipográ�co e estrutural, mas no HTML 5 a preocupação é apenas estrutural,
sendo delegado para o CSS (Cascade Style Sheet) o controle de características tipográ�cas.
Exemplo
 
<!DOCTYPE html>
<html>
 <head>
 <title>Primeira Página</title>
 meta charset="UTF-8"/>
 </head>
 <body> <!-- PARTE VISUAL -->
 <h1>Título da Página</h1>
 <p>
 Pequena Lista:
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 </p>
 </body>
</html>
Na primeira linha, podemos observar o comando <!DOCTYPE html>, que não faz parte da sintaxe HTML, mas do XML, de�nindo
um domínio de utilização para tags. No caso, esta linha indica que teremos, em seguida, um documento HTML.
Todo documento é iniciado com a tag <html>, que serve para delimitar o início e �nal do documento, englobando as tags ,
responsável por informações gerais de pré-carga, e , correspondente ao conteúdo visual da página.
Diversas tags aceitam a de�nição de atributos especí�cos, como <meta charset="UTF-8"/>, e estes atributos devem ter seusvalores colocados entre aspas ou apóstrofes.
Também devemos observar a possibilidade de adicionar comentários, os quais são iniciados com <!- - e �nalizados com - ->.
Conjunto de tags
A seção <head> aceita um pequeno conjunto de tags, sendo as principais apresentadas a seguir:
Tag Utilização
<title> Define o título da página, normalmente apresentado no topo da janela
<meta> Permite a inclusão de informações e controle de características do documento, como o uso de UTF-8 para
acentuação da língua portuguesa
<link> Efetua a ligação da página com um recurso externo, como folha de estilo CSS ou biblioteca JavaScript
Quanto à seção <body>, por cuidar da parte estrutural da visualização, pode conter um grande conjunto de tags, algumas delas
voltadas para o formato de títulos, áreas de escrita e listas, outras para a inclusão de imagens e elementos diversos, além de
comandos de navegação e formulários, entre diversas outras.
Podemos observar algumas destas tags a seguir:
Tag Utilização
<h1> <h2> <h3> <h4> <h5>
<h6> <h7>
Definem elementos de texto utilizados como títulos em diferentes tamanhos de fonte,
sendo <h1> para o maior e <h7> para o menor.
<b> <i> <u> <em> <strong> Negrito, itálico e outros efeitos de texto. São consideradas obsoletas, sendo recomendado o
uso de folhas de estilo CSS.
<p> <div> Definem trechos de texto, sendo que <p> ressalta o parágrafo e <div> é muito utilizado para
a criação de camadas.
<ul> <ol> Iniciam a criação de listas de elementos, sendo numeradas com <ol>.
<li> Define um item de lista.
<hr/> Linha divisória na horizontal.
<br/> Quebra de linha.
“index.html” – a página inicial
Quando construímos um site, estamos criando um conjunto de páginas, em que pode ocorrer a navegação entre as mesmas.
Todo site tem uma página inicial, que, nos casos mais comuns, recebe o nome “index.html”.
A partir da página inicial, podemos navegar para outras páginas do mesmo domínio, ou até para outros sites, acessar recursos
especí�cos, como vídeo e áudio, entre outras diversas formas de ligação com elementos externos.
<a href=“URL DE DESTINO”>TEXTO DO LINK</a>
Os hiperlinks serão nosso ferramental básico de navegação entre páginas, sendo criados com a tag <a>, ou âncora (do inglês
anchor), sempre apontando para alguma URL (Universal Resource Locator), que pode ser de�nida como uma identi�cação de algo
localizado na rede, como um site, uma página, um trecho da página, ou qualquer outro elemento identi�cado de forma unívoca.
Exemplo
Podemos observar a criação de uma tabela simples no código a seguir:
Exemplo
 
<!DOCTYPE html>
<html>
 <head>
 <title>Alguns Links</title>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <h1>Alguns exemplos de links</h1>
 <p>
 <ul>
 <li><a href="//www.estacio.br">Site da Estacio</a></li>
 <li><a href="//portal.estacio.br/graduacao.aspx">Cursos de Graduação</a></li>
 </ul>
 </p>
 </body>
</html>
Tabela
Outro elemento interessante do HTML padrão é a tabela.
Uma tabela exibe dados organizados em termos de linhas e colunas a partir de três tags:
Tag Utilização
<table> Define uma tabela e suas características gerais, como espessura de borda e espaçamento entre colunas.
<tr> Inicia uma linha da tabela.
<td> Define uma célula na linha criada anteriormente.
Exemplo
Podemos observar a criação de uma tabela simples no código a seguir:
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de Tabela</title>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <table border="1" width="100%">
 <tr><td>Código</td><td>Produto</td><td>Quantidade</td></tr>
<tr><td>100478965</td><td>Mouse PanX</td><td>210</td></tr>
 <tr><td>100476541</td><td>Tecladoo XPTO</td><td>148</td></tr>
<tr><td>100278543</td><td>TV SmartY 40lt;/td>&<td>34</td></tr>
 </table>
 </body>
</html>
Atenção
Hoje em dia ouvimos falar bastante do padrão Tableless, erroneamente interpretado como “sem tabelas”.
Na verdade, este padrão estipula que as tabelas não devem ser utilizadas para organizar visualmente o conteúdo da página, o que
passou a ser feito com camadas, mas permite que elas sejam utilizadas livremente para a exposição de dados “tabulares”, como
planilhas.
Dica
Editores de Código HTML
Embora não seja imprescindível, com certeza vamos preferir utilizar um editor de texto que ressalte os comandos HTML quando
estivermos criando nossas páginas.
Uma sugestão gratuita e de fácil utilização é o NotePad++ <https://notepad-plus-plus.org/download/> .
 
CSS – Cascade Style Sheet
TEAgora que nossos textos já podem ser estruturados com o uso de HTML, devemos nos preocupar com a formatação de fontes
e demais elementos, o que era feito antigamente através de tags, mas que atualmente é viabilizado pelo uso das folhas de estilo
(CSS).
https://notepad-plus-plus.org/download/
Exemplo
Para criarmos classes devemos utilizar um ponto antes do nome, e aplicar às tags de interesse através do atributo class, como
podemos observar a seguir:
 
<!DOCTYPE html>
<html>
 <head>
 <title>Primeira Página</title>
 <meta charset="UTF-8"/>
 <style>
 h1 {color: orange}
 body {background-color: #000032; color:yellow}</style>
 </head>
 <body>
 <h1>Título da Página</h1>
 <p>
 Pequena Lista:
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 37</li>
 </ul>
 </p>
 </body>
</html>
É fácil entender como o CSS possibilita modi�car completamente o aspecto original de uma página. Elementos como fontes e
cores, alinhamentos, �guras de fundo, entre vários outros, podem ser con�gurados, sempre seguindo a sintaxe propriedade:
valor.
Outro elemento a se considerar é o elemento ao qual será aplicado o estilo, também chamado de seletor, podendo ser,
inicialmente, uma tag, uma classe ou um Id (identi�cador).
No exemplo anterior, a tag <h1> foi formatada com a fonte de cor laranja, enquanto <body> recebe fundo de tonalidade azul
(RGB=#000032) e fonte amarela.
Exemplo
Nós podemos observar a criação de duas camadas no exemplo:
C1, a 10 pixels do topo e 10 pixels da lateral esquerda, com altura de 200 pixels e largura de 300 pixels, adotando azul claro
como cor de fundo; e
C2, a 50 pixels do topo e 50 pixels da lateral esquerda, com altura de 120 pixels e largura de 220 pixels, utilizando azul como
cor de fundo e amarelo como cor de fonte.
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de Tabela</title>
 <meta charset="UTF-8"/>
 <style>
 body {background-color: #000032; color:yellow}
 .enfoque {color:orange}
 </style>
 </head>
 <body>
 <table border="1" width="100%">
 <tr><td>Código</td><td>Produto</td><td>Quantidade</td></tr>
 <tr><td class="enfoque">100478965</td><td>Mouse PanX</td>
 <td>210</td></tr>
 <tr><td class="enfoque">100476541</td><td>Tecladoo XPTO</td>
 <td<148</td></tr>
 <tr><td class="enfoque">100278543</td><td>TV SmartY 40</td>
 <td>34</td></tr>
 </table>
 </body>
</html>
Devemos fazer algo similar para o uso de identi�cadores (Ids), porém utilizaremos o símbolo de hash (#), e aplicaremos a
elementos que devem ser unicamente identi�cados na página. Isso quer dizer que não devo ter duas tags com o mesmo Id.
O uso de Ids é muito comum na construção de camadas, as quais servem como padrão para organização dos elementos de uma
página, segundo o atual padrão vigente do Tableless.
 
<!DOCTYPE html>
<html>
 <head>
 <title<Exemplo de Camadas>/title>
 <meta charset="UTF-8"/>
 <style>
 #C1{position:absolute; top:10px; left:10px; width:300px;
 height:200px; background-color:lightblue}
 #C2{position:absolute;top:50px; left:50px; width:220px;
 height:120px; background-color:blue; color:yellow}
 </style>
 </head>
 <body>
 <div id="C1"<Camada 1</div>
 <div id="C2">Camada 2</div>
 </body>
</html>
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Formulários
Quando efetuamos o cadastro em algum site de compras pela Web, o que estamos fazendo é o preenchimento de um formulário
HTML.
Estas informações são enviadas para o servidor de duas formas, denominadas “métodos”:
 
Exemplo

GET
Os dados são enviados através da própria URL, �cando
expostos na chamada.

POST
Os dados são enviados em background, o que evita a
exposição, mas não determina segurança, já que os pacotes
podem ser capturados por ferramentas do tipo Sniffer.
Para que possamos transmitir os dados com maior segurança devemos utilizar SSL (Secure Socket Layer) com um certi�cado
digital de qualidade, o que fará com que os dados transitem de forma criptografada.
Quando fazemos uma chamada https estamos utilizando um ambiente deste tipo.
Todo formulário é iniciado com a tag <form>, que terá como principais atributos o método de envio (method) e o destino para a
informação (action).
Dentro do formulário, podemos incluir os componentes de entrada de dados, como:
Caixas de texto;
Botões de rádio;
Caixas de marcação.
A grande maioria de�nida através da tag <input>, cujos atributos principais são:
type, referente ao tipo de componente;
name, utilizado para identi�cação do dado na chegada ao lado servidor;
value, para determinar o valor de envio ou o valor de preenchimento inicial.
Tipos utilizados pela tag <input>
Os tipos que a tag <input> pode utilizar são explicados no quadro abaixo:
Tipo Utilização
text Cria uma caixa de texto, podendo ter um valor inicial definido através de value.
hidden Quando queremos guardar um valor para envio, mas sem ficar visível.
radio Opções mutuamente exclusivas. Quando marcamos um, todos com o mesmo atributo 
name serão desmarcados. O que ficar marcado, ao final, enviará seu atributo value
como dado para o servidor.
checkbox Quando queremos a possibilidade de marcar várias opções. Todos que forem marcados
enviarão seus atributos value como dados para o servidor
submit Cria um botão de envio para o formulário
reset Cria um botão que reinicia (limpa) o formulário
Podemos observar, a seguir, um formulário simples, com o uso das tags <form> e <input>.
Exemplo
Podemos observar, a seguir, um exemplo de utilização de SVG em uma página HTML5.
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de Formulário</title>
 <meta charset="UTF-8"/>
 <style>
 body {background-color:blue; color:yellow}
 </style>
 </head>
 <body>
 <form action="//servidor/app.asmx" method="get">
 Nome:<input name="N1" type="text"/><br/>
 Contribuinte:
 <input type="radio" name="CONTR" value="S"/>Sim
 <input type="radio" name="CONTR" value="N"/>Não
 <br/>
 <input type="submit" value="Cadastrar"/>
 </form>
 </body>
</html>
Neste exemplo, se escrevermos o nome XPTO e selecionarmos a opção “Sim”, ao clicarmos em Cadastrar, veri�caremos a
seguinte URL na barra de navegação:
//servidor/app.asmx?N1=XPTO&CONTR=S
Atenção
O trecho ressaltado após a interrogação corresponde ao que chamamos de Query String, onde estarão os dados, no formato
nome=valor, separados pelo sinal &.
Caso modi�cássemos o método para “post”, a informação enviada não �caria visível para o usuário, mas vale ressaltar que
estaria transitando em um pacote sem criptogra�a na rede para o caso do HTTP comum.
Sintaxes Diversas no HTML 5
Uma grande evolução do HTML 5 em relação às versões anteriores é a possibilidade de utilizar outras linguagens, como SVG e
VRML, em meio ao código HTML, o que permite expandir a funcionalidade do ambiente básico.
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de SVG</title>
 <meta charset="UTF-8"/>
 <style>
 body {background-color:blue; color:yellow}
 </style>
 </head>
 <body>
 <h1>Exemplo com SVG</h1>
 <svg>
 <rect width="100" height="50" x="10" y="10" fill="lightblue" stroke="orange" stroke-width="3"/>
 </svg>
 </body>
</html>
DOM
O Document Object Model, ou DOM, é uma API que nos permite acessar os elementos de um documento HTML ou XML,
proporcionando uma visualização hierárquica do mesmo no formato de árvore, baseado na forma como as tags são aninhadas.
Com o uso de DOM �cou muito mais fácil criarmos páginas compatíveis com
navegadores diversos, principalmente no que se refere à integração da página HTML
com o código JavaScript.
Após acessar o componente da página, os valores de seus atributos podem ser consultados e modi�cados com grande facilidade
e de forma padronizada para os diversos ambientes.
O processo mais comum para acessar este componente é através de seu Id, com o uso do comando a seguir, que será estudado
quando tratarmos da linguagem JavaScript:
document.getElementById( Id )
Como as tags são organizadas hierarquicamente, a partir de um nó raiz, devemos considerar a existência de diferentes tipos de
nós ao longo desta árvore, como elementos, ou tags, atributos e textos.
Os principais tipos de nós são apresentados na tabela:
Tipo de Nó Propriedade nodeName Propriedade nodeValue
Element Nome do Elemento (ou tag) null
Attr Nome do atributo Valor do atributo
Text #text Conteúdo do nó
CDATASection #cdata-section Conteúdo do nó
Comment #comment Texto do comentário
Através da de�nição estrutural do DOM e manuseio das informações fornecidas pelos nós da árvore constituída, podemos
acessar, modi�car e até acrescentar elementos à página HTML, o que permite grande dinamismo e possibilidade de modi�cações
parciais em um documento durante a visualização do mesmo, viabilizando um dos pilares do AJAX, tecnologia que será tratada
posteriormente nesta disciplina.
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Atividade
1 - Os Web Servers são programas servidores que respondem ao HTTP, sendo que alguns deles oferecem suporte a tecnologias
de objetos distribuídos e são normalmente classi�cados como Application Servers.
Dentre os servidores apresentados a seguir, qual deles NÃO pode ser considerado nativamente como um Application Server?
a) BEA Weblogic
b) Tomcat
c) WebSphere
d) GlassFish
e) JBoss
2 - Hoje em dia a formatação tipográ�ca das páginas não é mais feita no código HTML, que assumiu um papel estruturante com
relação ao conteúdo da página, e as folhas de estilo CSS passaram a ser a tecnologia adotada para esta formatação.
Qual seria o comando CSS para formatar o fundo de uma camada com id “centro” na cor amarela?
a) .centro { background-color: yellow }
b) #centro { color: yellow }
c) *centro { background: yellow }
d) #centro { background-color: yellow }
e) .centro{ color:yellow }
3 - A utilização de DOM viabiliza a interpretação do conteúdo XML ou HTML no formato de árvore (hierárquico), onde cada nó da
árvore apresenta diversas informações, as quais podem ser expressas em termos das propriedades nodeName e nodeValue.
Para um nó do tipo Element, qual a informação fornecida por nodeValue?
a) Nome do Atributo
b) Conteúdo do Nó
c) Valor Nulo
d) Texto de Comentário
e) Valor do Atributo
NotasReferências
CASSATI, J. P. Programação cliente em sistemas web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. São Paulo: Pearson
Education, 2009.
PLOTZE, R. Tecnologias Web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para Internet II. Rio de Janeiro: Estácio, 2017.
Próxima aula
Características do JavaScript;
Sintaxe básica do JavaScript;
Criação de funções e bibliotecas com uso de JavaScript.
Explore mais
RFC do protocolo HTTP <https://tools.ietf.org/html/rfc2616>
Introdução aoHTML 5 <https://www.w3schools.com/html/html5_intro.asp>
Tutorial de CSS <https://www.w3schools.com/css/>
https://tools.ietf.org/html/rfc2616
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/
Disciplina: Programação Cliente-servidor
Aula 2: JavaScript – Parte 1
Apresentação
As páginas HTML foram se tornando cada vez mais complexas. Ao invés das páginas simplesmente informativas do início
da Web, hoje temos páginas extremamente interativas e conceitos como RIA (Rich Internet Application). Neste sentido,
acaba se tornando necessário um ferramental que traga maior �exibilidade às páginas em termos funcionais, e não apenas
visuais.
Veremos nesta aula que o uso da linguagem JavaScript irá nos permitir ampliar as funcionalidades básicas de nossas
páginas Web, já que é uma linguagem tão bem aceita que passou a ser utilizada em outras áreas além do controle do
browser, como na programação de dispositivos móveis e servidores Web.
Objetivos
Identi�car as características gerais e histórico do JavaScript;
Explicar a sintaxe básica do JavaScript;
Usar o JavaScript para a criação de funções e bibliotecas.
Origens e características
A linguagem JavaScript nem sempre teve este nome. Desenvolvida originalmente pela Netscape, ela se chamava Mocha, tendo o
nome modi�cado posteriormente para LiveScript, quando ocorreu o lançamento da mesma junto ao navegador Netscape 2.0
versão beta, em setembro de 1995.
Em dezembro de 1995, em um anúncio conjunto com a Sun Microsystems, é lançado o Netscape 2.0B3, com suporte à
tecnologia de Applets, sendo o nome da linguagem modi�cado para JavaScript, o que causa muita confusão até hoje no que
tange à sua relação com a linguagem Java.
Atenção
É importante que tenhamos em mente que JavaScript não é Java, e a similaridade entre as duas linguagens ocorre apenas pelo
fato de ambas utilizarem sintaxes baseadas na linguagem C.
Utilizamos o JavaScript para controle de elementos da página HTML e viabilização da interatividade da mesma,
caracterizando-se originalmente como uma tecnologia cliente, podendo ser embebida na própria página, ou organizada no
formato de biblioteca, como arquivo externo.
Recentemente, o JavaScript passou a ser
utilizado também do lado servidor, através de
tecnologias como o node.js. 
Outro ambiente que recebeu a possibilidade
de desenvolvimento com JavaScript foi o dos
dispositivos móveis, com uso de ferramentas
como Ionic.
Sintaxe
Inicialmente devemos compreender a declaração de variáveis e operações aritméticas da linguagem.
Uma variável pode ser declarada com o uso de var, ou simplesmente com a inicialização da mesma. Como o JavaScript não é
fortemente tipado, a variável assume o tipo do valor associado a ela.
Os tipos com os quais a linguagem trabalha são:
Inteiro;
Ponto �utuante;
Booleano;
Texto;
Objeto; e
Vetor (como objeto da classe Array).
Exemplo
Operadores aritméticos utilizados no JavaScript
Operador Operação
+ Soma (concatenação para texto)
- Subtração
* Multiplicação
/ Divisão
% Resto da divisão inteira
++ Incremento de 1
-- Decremento de 1
No exemplo a seguir, são declaradas e inicializadas as variáveis a e b, sendo impressas na página algumas operações sobre as
mesmas através do comando document.writeln.
É interessante observar que este comando escreve sobre a página HTML, permitindo a inclusão de tags, como o uso de <br/>
para quebra de linha.
 
<html>
 <body>
 <script>
 var a = 10, b = 5;
 // Algumas operações básicas...
 document.writeln(
"Soma: "+(a+b));
 document.writeln(
"Subtração: "+(a-b));
 document.writeln(
"Multiplicação: "+(a*b));
 document.writeln
("Divisão: "+(a/b));
 document.writeln(
"Teste de igualdade: "+(a==b));
 <</script>
 <</body>
</html>
Soma: 15
Subtração: 5
multiplicação: 50
Divisão: 2
Teste de igualdade: false
Dica
Lembre-se sempre de comentar seu código para que você e outros programadores possam revisá-lo com maior facilidade em
adaptações posteriores.
O JavaScript aceita dois tipos de comentários:
Comentário de linha, com uso de //;
Comentário longo, iniciado com /* e �nalizado com */.
Os operadores relacionais permitem a comparação entre valores, tendo como resultado um valor verdadeiro (true) ou falso (false),
o que pode ser armazenado em uma variável booleana.
Podemos observá-los no quadro:
Operador Operação
== Compara a igualdade entre os termos
!= Compara a diferença entre os termos
> Compara se o primeiro é maior que o segundo
< Compara se o primeiro é menor que o segundo
>= Compara se o valor é maior ou igual
<= Compara se o valor é maior ou igual
Nós também podemos combinar valores booleanos com o uso de operadores lógicos expressos pela tabela-verdade a seguir:
A (Booleano 1) B (Booleano 2) A && B - AND A || B - OR !A - NOT
false false false false true
false false true true true
true false true true false
true true true true false
Estruturas de decisão
Estando de�nidas as variáveis e métodos de saída, o nosso próximo passo será a compreensão das estruturas de decisão
existentes na sintaxe do JavaScript.
O �uxo de execução sequencial indica que as diversas instruções serão executadas na ordem em que são apresentadas no
código, mas existem formas de redirecionar o �uxo de execução para partes especí�cas.
É comum encontrarmos situações onde efetuamos determinadas ações apenas perante determinadas condições. Para isso, em
termos de algoritmos, contamos com as estruturas de decisão.
Exemplo
Exemplo
Podemos ver, no exemplo abaixo, a aplicação da estrutura if..else.
Aqui, a variável x recebe o valor digitado pelo usuário com o uso da função prompt, mas com o valor, que era originalmente texto,
convertido para número com o uso de eval.
Um exemplo simples pode ser observado a seguir:
SE �zer sol ENTÃO irei à praia SENÃO irei ao cinema.
Note que a condição de “fazer sol ou não” pode ser interpretada como um valor booleano, sendo a decisão tomada a partir desta
condição.
Outro tipo de decisão é a que tomamos perante um conjunto de opções, algo como:
SELECIONE o dia da semana:
CASO SEJA segunda-feira FAÇA: passar no escritório;
CASO SEJA terça-feira OU quarta-feira FAÇA: visitar os clientes;
CASO SEJA quinta-feira FAÇA: fechar relatórios;
SENÃO: �car em casa.
Neste exemplo, as opções de segunda-feira até quinta-feira apresentam ações especí�cas, enquanto os demais dias, que não
foram explicitados, executam a ação padrão a partir do comando SENÃO.
Em ambos os casos, é fácil de observar os desvios no �uxo de execução, pois diversos trechos serão executados apenas sob
condições especí�cas.
Estrutura if..else
Na sintaxe do JavaScript, a instrução SE..ENTÃO é expressa como if( <<condição>>), podendo se referir a um único comando, ou
um bloco de comandos delimitado pelo uso de chaves.
O uso da instrução SENÃO (else) é opcional, e também pode ser aplicado a um ou mais comandos, segundo as mesmas regras
de escrita do if.
 
<!DOCTYPE html>
<html>
 <body>
 <script>
 var x = eval(prompt("Entre com o valor:",""));
 if(x > 5)
 document.writeln("<h1>Valor maior que 5</h1>");
 else
 document.writeln("<h1>Valor menor ou igual a 5</h1>");
 </script>
 </body>
</html>

Exemplo
O exemplo a seguir ilustra a utilização da estrutura switch..case.
Aqui, a página solicitará um valor entre 1 e 3, e, de acordo com o valor utilizado, será de�nida uma cor de fundo diferente para a
palavra “XPTO”, sendo assumido fundo preto para opções que não forem previstas.
Estrutura switch..case
Para o comando SELECIONE devemos utilizar switch( <<variável>> ) no JavaScript.
Este comando irá desviar o �uxo de execução para os comandos case, de acordo com o valor da variável, sendo que o comando
default será executado caso o valor não esteja entre aqueles que foram previstos.
Devemos observar que cada seção case deve ser terminada com o comando break.
 
<!DOCTYPE html>
<html>
 <head><meta charset="UTF-8"/>
 </head>
 <body>
 <script>
 var x1 = eval(prompt("Digite um valor entre 1 e 3",""));
 var cor;
 switch(x1){
 case 1:
 cor = "yellow";
 break;
 case 2:
 cor = "lightblue";
 break;
 case 3:
 cor = "lightgreen";
 break;
 default:
 cor = "black";
 }
 document.writeln("<span style='background-color:"+cor+"'>XPTO<span>");
 </script>
 </body>
</html>

Estruturas de repetição
Outra forma e redirecionar o �uxo de execução é através do uso de estruturas de repetição.
Elas servem para repetir a execução de um comando ou bloco de comandos enquanto
determinada condição for verdadeira.
A primeira estrutura de repetição que iremos analisar é denominada PARA..FAÇA. Ela permite repetir um determinado bloco de
comandos para cada valor assumido por uma determinada variável dentro de uma faixa pré-especi�cada.
Podemos observar um exemplo simples, a seguir:
PARA X DE 1 A 10 FAÇA:
INÍCIO
ESCREVA ( X )
FIM
Neste exemplo, a variável x assumirá os valores de 1 até 10, sendo impresso
o valor da mesma a cada rodada através do comando escreva. Em termos
práticos serão impressos os valores de 1 a 10.
O bloco de execução é especi�cado pelas palavras “INÍCIO” e “FIM”, e a presença das mesmas não seria necessária, neste caso,
por envolver apenas uma instrução.
Outra estrutura de repetição de grande utilização é denominada ENQUANTO..FAÇA, e ela permite repetir um bloco de comandos
enquanto determinada condição for verdadeira, como no exemplo a seguir.
X = 1
ENQUANTO X < 11 FAÇA
INÍCIO
ESCREVA ( X )
X = X + 1
FIM
Teremos aqui o mesmo efeito do exemplo de PARA..FAÇA, ou seja, serão
impressos os números de 1 a 10, no entanto, a forma de construir é diferente.
A variável X é inicializada com o valor 1, e a estrutura ENQUANTO..FAÇA
repetirá a execução do bloco enquanto esta variável tiver valor menor do que
11.
Note a necessidade de incrementar o valor de X no bloco de execução, caso contrário o loop nunca acabaria.
Caso o valor de X tivesse sido inicializado com qualquer valor maior do que 10, não ocorreria a execução do bloco nenhuma vez, o
que diferencia a estrutura ENQUANTO..FAÇA, onde o teste é feito na entrada, da estrutura FAÇA..ENQUANTO, onde o teste é feito
na saída.
Reescrevendo o exemplo anterior teríamos:
X = 1
FAÇA
INÍCIO
ESCREVA ( X )
X = X + 1
FIM
ENQUANTO X < 11
Com este novo formato, se X fosse inicializado com o valor 12, por exemplo,
este valor seria impresso, pois o teste é feito apenas na saída da estrutura de
controle.
Estruturas de controle do tipo FAÇA..ENQUANTO são interessantes quando queremos obrigar a execução do bloco pelo menos
uma vez, sendo bastante utilizadas na criação de menus para interatividade, como:
FAÇA
   INÍCIO
      ESCREVA ( “DESEJA CADASTRAR NOVO CLIENTE OU
SAIR?” )
      LEIA ( OPCAO )
      SE OPCAO != “SAIR” ENTÃO
         INÍCIO
         // COMANDOS DIVERSOS
      FIM
   FIM
ENQUANTO OPCAO != “SAIR”
Estrutura for
A implementação de estruturas do tipo PARA..FAÇA utiliza a seguinte sintaxe:
Por exemplo, um loop de 1 a 5 seria escrito como for( i=1 ; i<=5 ; i++ ).
No código seguinte podemos observar um loop para imprimir os números de 1 a 10, classi�cando-os como pares ou ímpares.
 
<!DOCTYPE html>
<html>
 <body>
 <ul>
 <script>
 for(i=1 ; i<=10 ; i++){
 tipo = ( i%2==0 ) ? "par" : "impar";
 document.writeln("<li>O numero "+i+" e "+tipo+"</li>");
 }
 </script>
 </ul>
 </body>
</html>

Neste código podemos observar, também, a utilização de um operador de decisão para escolher entre “par” ou “ímpar”.
Um operador de decisão segue a sintaxe abaixo:
variável = ( << condição >> ) ? valor para true : valor para false
Baseado nisto, podemos dizer que, se a condição ( i%2==0 ) for verdadeira, tipo recebe “par”, senão recebe “impar”.
Isso equivale à seguinte estrutura de decisão:
if ( i%2==0 )
 tipo = "par";
else
 tipo = "impar";
Podemos utilizar o operador de decisão para a simpli�cação da escrita nas situações em
que uma determinada variável recebe dois valores alternativos perante uma determinada
condição.
Estruturas while e do..while
Exemplo
ENQUANTO..FAÇA
A implementação de estruturas do tipo
ENQUANTO..FAÇA utiliza a seguinte sintaxe:
while( <<condição>> ) {
      // Bloco de Comandos
}
Condição – Expressão booleana que
determina a execução do comando ou bloco
de comandos.

FAÇA..ENQUANTO
Com relação às estruturas do tipo
FAÇA..ENQUANTO, a sintaxe utilizada seria:
do {
      // Bloco de Comandos
} while( <<condição>> );
Condição – Expressão booleana que
determina a continuidade da execução do
bloco de comandos.
Exemplo
Clique em Exemplo <galeria/aula2/anexo/exemplo.pdf> e observe a utilização do comando while.
Funções e bibliotecas
Em muitas situações, precisamos efetuar uma determinada sequência de comandos repetidas vezes em diferentes contextos.
Toda vez que replicamos código estamos aumentando o tamanho do mesmo e di�cultando a manutenção.
Por exemplo, se um erro é detectado nesta sequência de comandos, ocorrerá a necessidade de procurar todas as diversas
ocorrências da mesma e alterar cada uma delas.
Uma solução para isso é o uso de uma função, que é a denominação de um processo englobando uma sequência de comandos,
e que recebe um nome e a possibilidade de parâmetros de entrada e retorno de valor.
Já utilizamos algumas funções nativas do JavaScript em outros exemplos, como prompt e eval, e agora utilizaremos mais uma.
A função con�rm tem por objetivo efetuar uma pergunta, retornando true para o caso do clique em OK e false para Cancela.
 
<script>
 function meuProcesso(){
 a = eval(prompt("Entre com o valor:",""));
 b = a * 5;
 document.writeln("<br/>"+a+" * 5 = "+b);
 }
 meuProcesso();
 z = 3;
 while(z>0) {
 meuProcesso();
 z--;
 }
 if(confirm("Mais uma vez?")) {
 meuProcesso();
 }
</script>
Neste exemplo, um mesmo procedimento é repetido diversas vezes, apenas alterando a nomenclatura das variáveis.
Se a multiplicação fosse alterada de 5 para 4, ocorreria um problema de manutenção bastante relevante, mesmo para um código
pequeno como esse.
A solução é transformar o processo repetitivo em uma função, como no código abaixo:
http://estacio.webaula.com.br/cursos/gon964/galeria/aula2/anexo/exemplo.pdf
 
<script>
 function meuProcesso(){
 a = eval(prompt("Entre com o valor:",""));
 b = a * 5;
 document.writeln("<br/>"+a+" * 5 = "+b);
 }
 meuProcesso();
 z = 3;
 while(z>0) {
 meuProcesso();
 z--;
 }
 if(confirm("Mais uma vez?")) {
 meuProcesso();
 }
</script>
Note como o código �cou mais legível com a de�nição da
função. Além disso, as tarefas de manutenção são muito
facilitadas, pois a alteração do corpo da função irá impactar de
forma automática em todas as suas utilizações no decorrer do
código.
O formato geral de uma função, no JavaScript, seria:
function NOME (PARÂMETRO1, PARÂMETRO2 ... PARÂMETRON) {
 [COMANDOS]
 return VALOR;
}
Tanto os parâmetros quanto o valor de retorno são opcionais na de�nição de uma função.
Poderíamos exempli�car uma função para o cálculo da hipotenusa de um triângulo retângulo a partir do fornecimento dos valores
de seus catetos, baseada no Teorema de Pitágoras.
Neste exemplo, são utilizados Math.sqrt para cálculo da raiz quadrada e Math.pow para elevar um valor a uma potência, no caso
ao quadrado.
Como as funções visam a reutilização, é muito comum organizá-las em grupos denominados bibliotecas, normalmente
guardadas em arquivos texto com a extensão “js”.
Diversas bibliotecas JavaScript encontram-se disponíveis e podemos também criar as nossas.
Para o próximo exemplo, utilizaremos dois arquivos, sendo um denominado “cores.js”e outro “testeCores.html”.
Incialmente, vamos observar o código de “cores.js”:
 
 function pitagoras(cateto1, cateto2){
 return Math.sqrt(Math.pow(cateto1,2) + Math.pow(cateto2,2));
 }
 
var letras = new Array("0","1","2","3","4","5","6","7","8","9",
"A","B","C","D","E","F");
function getHexa(inteiro){
 resto = inteiro % 16;
 quociente = (inteiro - resto) / 16;
 return letras[quociente] + letras[resto];
}
function getCor(r,g,b){
 return "#" + getHexa(r) + getHexa(g) + getHexa(b);
}
Esta biblioteca visa efetuar a conversão dos números inteiros entre 0 e 255 para
hexadecimal, e a formação de códigos de cores no padrão RGB a partir de 3 inteiros na faixa
citada.
Incialmente, com o uso de Array, é de�nido um vetor de elementos texto, onde cada posição representa um número de 0 a 15 no
formato hexadecimal, como cores[11] equivalendo a “B”.
Em seguida, de�nimos a função getHexa, que recebe um valor inteiro como parâmetro, e efetua a conversão para hexadecimal.
Esta conversão é efetuada com a divisão inteira por 16, sendo o quociente utilizado para alta ordem do hexadecimal e o resto para
baixa ordem.
Por exemplo, se dividirmos 222 por 16, teremos quociente 13 e resto 14, o que retornará o valor “DE” em hexadecimal.
A última função se chama getCor, e recebe três parâmetros denominados r, g e b, os quais correspondem aos componentes
vermelho, verde e azul da composição da cor.
No corpo desta função podemos observar a concatenação do símbolo “#” com as chamadas de getHexa para os três parâmetros
sucessivamente.
Se efetuarmos uma chamada getCor(222,220,224) teremos como retorno o valor “#DEDCE0”.
Agora que construímos nossa biblioteca para tratamento de cores, podemos utilizá-la em uma página HTML, a qual recebeu o
nome de “testeCores.html”, cujo código e saída podem ser observados a seguir:
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <script src="cores.js"></script>
 </head>
 <body>
 <script>
 for(i=1;i<=100;i++){
 red = Math.trunc(Math.random()*255);
 green = Math.trunc(Math.random()*255);
 blue = Math.trunc(Math.random()*255);
 document.writeln("<span style='color:"+getCor(red,green,blue)+"'<");
 document.writeln(i + "</span>");
}
 </script>
 </body>
</html>

No código da página, podemos observar um loop de 1 a 100, com uso de for, e internamente o uso de Math.trunc, que faz a
aproximação inteira, e Math.random, para obter um número aleatório entre 0 e 1, segundo uma distribuição uniforme.
Ao multiplicar o resultado de Math.random por 255, obtemos um número aleatório entre 0 e 255, porém no formato de ponto
�utuante, o que é resolvido com a transformação em inteiro com Math.trunc, viabilizando a chamada de getCor.
A cada rodada do loop, é escrita uma tag <span>, tendo como conteúdo o valor de i corrente, e sendo formatada a cor da fonte
com uso do atributo style.
Como os números para red, green e blue são randômicos, a cada vez que atualizamos a página, os números serão expostos com
cores diferentes.
Para as operações matemáticas fazemos grande uso de Math.
Método ou Atributo Descrição
sqrt(x) Cálculo da raiz quadrada de x
trunc(x) Trunca o valor x, retornando apenas a parte inteira
pow(x,y) Retorna o resultado de x elevado a y
random( ) Retorna um valor aleatório entre 0 e 1
PI Constante com o valor de PI
max(x1,x2,...,xn) Retorna o maior valor da sequência
min(x1,x2,...,xn) Retorna o menor valor da sequência
sin(x) Calcula o seno de um ângulo x em radianos
cos(x) Calcula o cosseno de um ângulo x em radianos
abs(x) Retorna o valor absoluto de x
Saiba mais
Os outros métodos e atributos de Math podem ser observados em w3schools.com
<https://www.w3schools.com/js/js_math.asp> .
Recursividade
Quando falamos sobre recursividade, estamos nos referindo a funções que chamam a si mesmas, repetidamente, para a solução
de determinado problema.
Talvez o exemplo mais simples de recursividade seja o cálculo do fatorial de um número.
Por exemplo, 4! = 4 * 3 * 2 * 1, 3! = 3 * 2 * 1, 2! = 2 * 1 e 1! = 1.
Podemos observar que 4! = 4 * 3! ou que 3! = 3 * 2! e, a partir disso, de�nir uma regra de recursividade.
Toda função recursiva chama a si mesma, e tem uma regra de parada para que não
ocorra uma execução inde�nida. Neste caso, a regra seria “quando chegar a 1 retorne
1”.
A seguir, podemos observar um exemplo de implementação da função fatorial de forma recursiva.
https://www.w3schools.com/js/js_math.asp
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <script src="cores.js"></script>
 </head>
 <body>
 <script>
 function fatorial(n){
 if(n>1)
 return n * fatorial(n-1);
 else
 return 1;
 }
 x = eval(prompt("Digite um numero",""));
 document.writeln("Fatorial de "+x+" = "+fatorial(x));
 </script>
 </body>
</html>

Atividade
1 - Marque Verdadeiro ou Falso para as opções sobre as características gerais da linguagem JavaScript:
a) A sintaxe JavaScript diferencia maiúsculas e minúsculas.
b) JavaScript é fortemente tipado.
c) Foi desenvolvida originalmente pela NetScape com o nome de Mocha.
d) Hoje é possível desenvolver para dispositivos móveis com JavaScript.
e) JavaScript foi criado como uma versão script da linguagem Java.
2 - Você começou a desenvolver a página de um novo cliente e ele solicitou que uma das páginas con�rmasse uma sequência de
caracteres digitados pelo usuário de acordo com uma imagem da tela antes de apresentar o conteúdo, técnica conhecida como
CAPTCHA. Considerando que o usuário terá que digitar ao menos uma vez, e repetir até acertar, qual estrutura de controle de �uxo
deverá ser utilizada?
a) if..else
b) while
c) do..while
d) switch..case
e) for
3 - Implemente uma função em JavaScript para efetuar o cálculo do Imposto sobre a Renda em um determinado país,
considerando o desconto por faixa, de acordo com a tabela seguinte.
Faixa Alíquota
R$0,00 a R$1.500,00 Isento
R$1.500,01 a R$2.500,00 10%
R$2.501,00 a R$4.000,00 20%
R$4.000,01 ou acima 30%
Gabarito comentado
NotasReferências
CASSATI, J. P. Programação Cliente em Sistemas Web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. São Paulo: Pearson
Education, 2009.
 PLOTZE, R. Tecnologias Web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para Internet II. 1. ed. Rio de Janeiro: Estácio, 2017.
Próxima aula
Elementos de interatividade com a página;
JavaScript para a validação de formulários;
A sintaxe JavaScript para Orientação a Objetos.
Explore mais
Visite as páginas sugeridas a seguir e saiba mais sobre o conteúdo estudado nesta aula:
Básico de JavaScript <https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript>
Uso de JavaScript com DOM <https://www.w3schools.com/js/js_htmldom.asp>
Tutorial de JavaScript <https://www.w3schools.com/js/>
Document Object Model <https://en.wikipedia.org/wiki/Document_Object_Model>
https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/js/
https://en.wikipedia.org/wiki/Document_Object_Model
Disciplina: Programação Cliente-servidor
Aula 3: JavaScript – Parte 2
Apresentação
A partir do momento em que conseguimos construir nossas páginas, estruturando com o HTML e formatando com CSS,
devemos cuidar da interatividade da mesma. A linguagem JavaScript será o ferramental necessário para prover esta
interatividade, atuando por meio do DOM e dos eventos da página.
Com o domínio dessas técnicas, podemos também efetuar a validação de nossos formulários, viabilizando diversas críticas
acerca do formato e exigência dos dados envolvidos nos cadastros.
Por �m, assim como em outras plataformas, o uso da orientação a objetos irá trazer maior robustez ao código
implementado.
Objetivos
Explicar oselementos de interatividade com a página;
Aplicar o JavaScript para a validação de formulários;
Analisar a sintaxe JavaScript para orientação a objetos.
Exemplo
O exemplo a seguir ilustra a utilização da estrutura switch..case.
Aqui, a página solicitará um valor entre 1 e 3, e, de acordo com o valor utilizado, será de�nida uma cor de fundo diferente para a
palavra “XPTO”, sendo assumido fundo preto para opções que não forem previstas.
Interação com a página HTML
Precisamos ter em mente que o principal objetivo do JavaScript é expandir as funcionalidades básicas de uma página HTML. Para
isso, deve ser capaz de interagir com seus componentes e com o utilizador da página.
 Fonte: (Markus Spiske / Unsplash)
Neste contexto, temos dois caminhos que funcionam em sentidos inversos:
O uso de DOM permitirá ao JavaScript acessar os
componentes da página;
Através de eventos, a página poderá acionar rotinas em
JavaScript.
Antigamente, a forma de acesso aos componentes HTML variava muito de um navegador para outro, mas a W3C padronizou o
acesso aos componentes através do uso de document e identi�cadores do DOM.
1
W3C1
Modal: W3C – World Wide Web Consortium é uma comunidade internacional onde diversas organizações-membro, uma equipe
em tempo integral e o público trabalham juntos para de�nir padrões para a Web.
Fonte: https://www.w3.org/Consortium/ <https://www.w3.org/Consortium/>
Métodos de acesso DOM
Através de document, acessamos os elementos DOM de diferentes formas, sendo a mais tradicional através do atributo Id do
elemento desejado, como podemos observar no exemplo:
http://estacio.webaula.com.br/cursos/gon964/aula3.html
https://www.w3.org/Consortium/
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <div id=="Camada1">PEQUENO TESTE</div>
 <script>
 var obj = document.getElementById("Camada1");
 obj.style.backgroundColor = "yellow";
 alert(obj.firstChild.nodeValue);
 </script>
 </body>
</html>

Inicialmente, devemos considerar as formas de acesso ao DOM proporcionadas através de document. Neste exemplo, a variável
obj recebe uma referência ao componente div da página cujo Id é “Camada1”, observando as letras maiúsculas e minúsculas
utilizadas, já que é case-sensitive.
Alguns dos métodos de document para acesso aos componentes da página podem ser observados no quadro:
Método Retorno
getElementById Retorna um objeto como referência a um componente unicamente identificado através de seu
atributo id
getElementsByClassName Retorna uma coleção de objetos referenciando todos os componentes que apresentem o
atributo class desejado
getElementsByTagName Retorna uma coleção de objetos referenciando todos os componentes do tipo desejado, como
button, div ou h1
querySelector Retorna um objeto com o primeiro elemento que utilize o seletor CSS
querySelectorAll Retorna uma coleção de objetos com todos os elementos que utilizem o seletor CSS
Assim como foi utilizado document.getElementById("Camada1"), poderíamos utilizar o comando
document.querySelector(“#Camada1”) no lugar, e iríamos obter o mesmo resultado �nal.
O objeto receptor assume as características do componente HTML referenciado, podendo ser acessados seus diversos atributos,
como style, ou no caso de uma tag <input> atributos como value e maxLength.
Ao mesmo tempo em que podemos utilizar os atributos HTML para o tipo de tag associado ao objeto, podemos observar este
objeto como um nó de árvore da estrutura DOM, o que permite a navegação entre os nós e tipi�cação.
Isto pode ser observado ao �nal do exemplo, onde é utilizado obj.�rstChild.nodeValue, correspondendo ao conteúdo do primeiro
nó �lho de obj.
Sempre devemos lembrar de que, em termos de DOM, obj corresponde a um nó do tipo Element, referenciando uma tag <div>, e o
conteúdo HTML interno desta tag é um outro nó da árvore, do tipo Text, obtido com �rstChild.
Como este outro nó é do tipo texto, o atributo nodeValue retornará o texto contido na tag original.
Navegação DOM
Incialmente, devemos lembrar que o DOM permite a manipulação de diferentes tipos de nós, como elementos, comentários e
textos.
Para descobrir qual o tipo de nó, podemos utilizar a propriedade nodeType, que é numérica, enquanto o nome do elemento
associado pode ser obtido com nodeName, e o conteúdo do mesmo com nodeValue.
A tabela a seguir mostra a relação entre estas três propriedades:
nodeType Tipo de Nó nodeName nodeValue
1 Element Nome do Elemento (tag) Null
2 Attr Nome do atributo Valor do atributo
3 Text #text Conteúdo do nó
4 CDATASection #cdata-section Conteúdo do nó
5 EntityReference Referência de Entidade Null
6 Entity Nome da Entidade Null
7 ProcessingInstruction Alvo da ação Conteúdo do nó
8 Comment #comment Comentário na forma de texto
9 Document #document Null
10 DocumentType Nome do DocType Null
11 DocumentFragment #document-fragment Null
12 Notation Nome da notação Null
Fonte: Adaptado de W3schools <https://www.w3schools.com/jsref/prop_node_nodetype.asp>
https://www.w3schools.com/jsref/prop_node_nodetype.asp
Exemplo
Por exemplo, para uma tag do tipo <div>, teríamos nodeType com valor 1 (Element), nodeName com valor “_div_” e nodeValue
nulo, e o conteúdo desta tag estaria em outros nós da árvore DOM, �lhos da mesma.
Para um conteúdo texto simples, ainda com o exemplo da tag <div>, este poderia ser obtido com o uso de �rstChild.nodeValue,
como foi feito no exemplo apresentado anteriormente.
Atenção
Neste ponto devemos observar os métodos de navegação. Por se tratar de uma árvore, devemos ter a possibilidade de acessar
um nó especí�co, assim como os descendentes do mesmo.
Para o acesso ao nó especí�co, normalmente a partir do id do mesmo, podem ser utilizadas as instruções getElementById ou
querySelector, conforme discutido anteriormente, e a partir do nó localizado, podemos acessar os descendentes do mesmo.
Exemplo
Vamos observar o exemplo:
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <ul id="lista">
 <li>Banana</li>
 <li>Laranja</li>
 <li>Manga</li>
 </ul>
 <script>
 var obj = document.querySelector("lista")
 var filhos = obj.children;
 var cores = ["orange","yellow","lightgreen"];
 for (i = 0; i < filhos.length; i++) {
 filhos[i].style.backgroundColor = cores[i];
 }
 </script>
 </body>
</html>
Neste exemplo, nós localizamos o início da lista com uso de querySelector("#lista"), e a partir deste elemento obtivemos os
elementos <li> internos através do atributo children do nó.
Como esses elementos são obtidos no formato ObjectHtmlCollection, é possível navegar nos mesmos como um vetor, aplicando
as cores disponíveis no segundo vetor ao fundo de cada elemento através de style.
Alguns dos atributos que podem ser utilizados pelo nó para a navegação na árvore podem ser observados no quadro:
Atributo Conteúdo
firstChild Retorna o primeiro filho do nó corrente
childNodes Retorna uma coleção de nós contendo os filhos do nó corrente
parentNode Retorna o nó que ascende ao nó corrente (pai)
firstElementChild Retorna o primeiro filho do tipo Element para o nó corrente
lastElementChild Retorna o último filho do tipo Element para o nó corrente
children Retorna todos os filhos do tipo Element para o nó corrente
De acordo com o tipo de nó existente na árvore, os atributos podem ser diferentes, mas a W3C traz uma documentação muito
completa acerca de cada tipo de nó, como para o tipo Element, que representa as tags do HTML ou XML.
Saiba mais
A referência pode ser obtida no endereço https://www.w3schools.com/jsref/dom_obj_all.asp
<https://www.w3schools.com/jsref/dom_obj_all.asp> .
Eventos
Podemos de�nir evento como uma ação pré-determinada que, ao ocorrer, permite que seja iniciada uma ação personalizada, o
que certamente será feito através de programação.
Por exemplo, ao clicar sobreo botão, inicie a função somar, o que poderia ser escrito da seguinte forma no HTML:
Caso o evento não seja associado ao nível do HTML, ele pode ser atrelado ao objeto através de JavaScript e DOM, como no
código a seguir:
 
<button id="btn1" onClick="somar()">SOMAR</button>
 
document.getElementById("btn1").addEventListener("click",
 function(event) {
 somar();
 });
O método addEventListener recebe, como parâmetros, o nome do evento a ser
utilizado e uma função callback para resposta ao evento.
https://www.w3schools.com/jsref/dom_obj_all.asp
Exemplo
Observe um pequeno exemplo de utilização de evento sobre o clique do botão:
Neste exemplo, a página contém apenas um botão, e, ao clicar sobre ele, aparecerá a mensagem “OLA MUNDO” em um alert.
Podemos observar a associação do evento de clique com a função de tratamento na seguinte linha:
Outra forma de associar seria diretamente no HTML:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button id="Teste1">Clique Aqui</button>
<script>
 function mostraMensagem(){
 alert("OLA MUNDO");
 }
 var obj = document.querySelector("#Teste1");
 obj.addEventListener("click",mostraMensagem);
</script>
</body>
</html>
 
obj.addEventListener("click",mostraMensagem);
 
<button id="Teste1" onclick="mostraMensagem()"> Clique Aqui </button>
Modi�cações dinâmicas
Com o uso de DOM, podemos acessar, alterar ou criar elementos em uma página HTML de forma dinâmica, durante a sua
visualização no navegador.
É um processo razoavelmente simples, e que traz grande �exibilidade para a interface visual.
Incialmente, devem ser utilizados alguns métodos de document para a criação dos nós de acordo com o tipo correto, e depois os
métodos existentes para os nós DOM permitem o acréscimo, substituição ou remoção de outros nós.
A tabela seguinte mostra alguns métodos existentes em document para a criação de nós DOM.
Método 
createElement Cria um nó do tipo Elemento (tag)
createTextNode Cria um nó de texto
createAttribute Cria um atributo. O nó pode utilizar com setAttributeNode
createComment Cria um comentário
Os nós e atributos criados a partir de document podem ser utilizados e anexados a nós de elementos já existentes na estrutura da
página, e o nó inicial da página pode ser obtido com o elemento body de document.
 
var x = document.createComment("Apenas um comentário");
document.body.appendChild( x );
Exemplo
O exemplo seguinte demonstra a utilização desta metodologia de inserção de nós:
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 Nome:<input type="text" id="nome">
 <button onclick="adicionar()">Adicionar</button>
 <ul id="lista">
 </ul>
 <script>
 var lista = document.querySelector("#lista");
 var texto = document.querySelector("#nome");
 function adicionar(){
 var node = document.createElement("LI");
 var textnode =
 document.createTextNode(texto.value);
 node.appendChild(textnode);
 lista.appendChild(node);
 texto.value = "";
 texto.focus();
 }
 </script>
 </body>
</html>
Neste exemplo, criamos uma função adicionar onde, em
sua implementação, é criado um nó de elemento do tipo
<li> e um nó de texto contendo o valor da caixa identi�cada
por “nome”.
 
var node = document.createElement("LI");
var textnode = document.createTextNode(texto.value);

Nas linhas seguintes, podemos observar o nó de texto
sendo anexado ao nó de elemento, e o elemento <li> sendo
adicionado à lista da página.
 
node.appendChild(textnode);
lista.appendChild(node);
As duas últimas linhas tratam apenas de um re�no de interface onde, logo após a inserção, é limpo o texto existente na caixa e
colocado o foco na mesma.
Outra forma muito comum de modi�cação de conteúdo é com o uso do atributo innerHTML dos nós DOM. Com ele, podemos
colocar qualquer conteúdo HTML dentro da tag representada pelo nó de elemento.
Finalmente, podemos remover nós da árvore, a partir de um nó de elemento DOM, com o uso de removeChild, ou substituí-los
com o uso de replaceChild.
 
document.getElementById(“minhaDiv”).innerHTML = "<h1>TESTE</h1>";
Validação de formulários
Entre diversas outras ações, devemos nos preocupar com a necessidade de:
Podemos utilizar os recursos do HTML5 para efetuar parte dessas críticas, e o JavaScript para de�nir aquelas que não sejam
cobertas por estes recursos.
Um formulário é uma entrada de dados simples, que considera apenas texto e seleções,
mas sem grandes críticas acerca de formato e validade destes dados.
 De�nir campos obrigatórios;
 Utilizar tipos de dados especí�cos;
 Controlar a visibilidade de campos alternativos.
No entanto, devemos ter em mente que as críticas efetuadas do lado cliente são
apenas relacionadas ao formato dos dados, e não à integridade da base. Críticas como
violações de chave primária ou inexistência de registro na base só podem ser feitas no
lado servidor.
Também precisamos lembrar que o JavaScript pode ser desativado pelo usuário, o que tornaria o conjunto de validações inócuo,
exigindo uma nova validação do lado servidor, e que realmente deve ser feita.
Por que validar no cliente se temos que validar no servidor novamente?
A resposta tem a ver com usabilidade e �uxo de rede, pois a resposta da validação de formato no cliente é mais rápida, além de
diminuir o �uxo de rede com chamadas desnecessárias ao servidor, já que os dados serão criticados antes do envio.
Assim como em todos os demais elementos de interatividade da página com as rotinas JavaScript, também na validação contamos
com os eventos para de�nir o momento de acionamento da crítica ou formatação.
Exemplo
Podemos efetuar uma validação global a partir do evento onsubmit, como no exemplo seguinte.
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <form method="get" action="//lugarnenhum" onsubmit="return validar();">
 Nome:<input type="text" name="nome" id="nome"/><br/>
 Contribuinte:<input type="radio" name="contrib" id="contrib1" value="S">Sim
 <input type="radio" name="contrib" id="contrib2" value="N">Não
 <br/>
 <input type="submit" value="Cadastrar"/>
 </form>
 <script>
 function validar(){
 var nome = document.getElementById("nome"),
 contrib1 = document.getElementById("contrib1"),
 contrib2 = document.getElementById("contrib2");
 if(nome.value==""){
 alert("Nome e obrigatório");
 nome.focus();
 return false;
 }
 if(!contrib1.checked && !contrib2.checked){
 alert("Escolha uma opção de contribuinte");
 return false;
 }
 return true;
 }
 </script>
 </body>
</html>
Devemos observar o formato da função de validação, que deverá retornar true ou false para o evento osSubmit, de forma a
permitir ou não o envio da informação para o servidor.
Por este motivo a chamada deste evento é um pouco diferente dos outros.
Outro elemento interessante neste código é o uso de focus( ). Caso o nome não seja preenchido, a mensagem “Nome é
obrigatório” é apresentada e o foco é direcionado para a caixa de texto referente a este dado.
Para o teste dos componentes do tipo rádio, devemos veri�car se nenhum deles foi marcado. Para isso, utilizamos suas
propriedades checked.
 
<form method="get" action="//lugarnenhum"
onsubmit="return validar();">
Lembrando que, pelo fato de a propriedade ser booleana, a negação será equivalente à
comparação com false.
 
if(!contrib1.checked && !contrib2.checked)
Outras validações e formatações podem ser efetuadas no momento da perda do foco pela caixa de texto, ou quando
selecionamos o elemento de uma lista de valores, entre diversas outras opções.
Observe, no quadro seguinte, alguns eventos do HTML e suas respectivas aplicaçõesno processo de validação.
Evento Aplicação
onsubmit Efetua a validação do formulário imediatamente antes do envio para o servidor. Necessita o retorno booleano,
indicando se os valores podem ser enviados ou não
onclick Normalmente uma chamada explicita de validação. Muito utilizado em botões de rádio e caixas de marcação
onchange Ocorre quando o valor (value) sofre uma alteração
onfocus Ocorre quando o componente ganha o foco. Pode ser utilizado, por exemplo, para apagar o valor do campo
onblur Ocorre na perda do foco pelo componente. É comum a aplicação de máscaras em valores numéricos como
CEP e CPF
onsearch Este evento é iniciado quando um usuário digita algo em um campo de pesquisa (type=”search”)
onselect Utilizado quando algum texto é selecionado no campo
Orientação a objetos
Com a criação de sistemas cada vez maiores e com grande apelo visual, as técnicas tradicionais de modelagem e programação
estruturada começaram a entrar em colapso.
Complexos trechos de código inter-relacionados, junto com a documentação escassa e diversas replicações de processos já
existentes, acabam tornando a manutenção dos sistemas extremamente difícil, aumentando o custo e diminuindo as
possibilidades evolutivas destes sistemas.
A orientação a objetos surge neste contexto, trazendo uma forma mais organizada de trabalho, onde a modelagem e a
implementação mostram uma proximidade muito maior do que nas técnicas ditas tradicionais.
 Fonte: Vadim Sherbakov / Unsplash
Saiba mais
O termo Programação Orientada a Objetos (POO) foi criado por Alan Kay, autor da linguagem de programação Smalltalk. Mas,
mesmo antes da criação do Smalltalk, algumas das ideias da POO já eram aplicadas, sendo que a primeira linguagem a realmente
utilizar estas ideias foi a linguagem Simula 67, criada por Ole-Johan Dahl e Kristen Nygaard em 1967. Entretanto só veio a ser
aceito realmente nas grandes empresas de desenvolvimento de Software por volta dos anos 1990.
Fonte: Programação Orientada a Objetos/Introdução
<https://pt.wikibooks.org/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Objetos/Introdu%C3%A7%C3%A3o#Hist%C3%B3ria>
Para podermos adotar esta nova �loso�a, devemos deixar de pensar em termos de processos e funções, pois isto é a
metodologia estruturada, focada em funcionalidades pontuais e a organização das mesmas.
Agora precisamos pensar de uma forma diferente, em termos de personagens, quais deverão apresentar características físicas e
ações ou verbos.
Por exemplo, na programação estruturada, diríamos que o projétil partiu no ângulo de 55 graus, sofrendo a ação da gravidade, e
atingindo o prédio na altura do quarto andar, pois estamos de�nindo um processo.
Em termos de orientação a objetos, consideraríamos que temos um personagem chamado tanque de guerra, e que ele é capaz
de atirar um projétil.
A mudança de foco é muito grande e tem como objetivo:
Aumento do reuso de código; Facilidade de manutenção;
Documentação automatizada.
https://pt.wikibooks.org/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Objetos/Introdu%C3%A7%C3%A3o#Hist%C3%B3ria
Começamos a utilizar de forma mais ampla a programação orientada a objetos (POO) com o advento das interfaces grá�cas, pois
�cou muito evidente que a programação estruturada não era a melhor opção para construir ambientes constituídos de janelas.
Antigamente tínhamos que utilizar as APIs do sistema operacional para a construção de cada janela, de forma independente, mas,
com a POO, podemos de�nir um personagem denominado “Janela”, que:
Terá atributos como “posição”, “largura” e “altura”; e
Será capaz de efetuar ações como “abrir”, “minimizar” e “maximizar”.
A partir daí, podemos colocar a quantidade necessária de personagens deste tipo para implementar as interfaces de nossos
sistemas.
Abstração
Um dos pilares da POO é o conceito de abstração, que se refere à de�nição de um modelo
simpli�cado de algo maior.
Quando abstraímos algo, estamos preocupados apenas com os detalhes que sejam relevantes para o problema de interesse, e
estas abstrações serão representadas como classes na POO, que trazem a de�nição dos atributos e métodos suportados pelos
personagens.
Os atributos de�nem características físicas, como cor, idade, endereço etc., enquanto métodos são as ações, ou verbos, que
podem ser praticadas, tais como comer, andar ou dormir.
Uma classe funciona como um molde (tipo ou domínio), de forma a de�nir como serão os objetos criados a partir da mesma,
como no exemplo seguinte, em JavaScript.
 
function Pessoa(nome, idade){
 this.nome = nome;
 this.idade = idade;
}
Atenção
Neste exemplo, estamos de�nindo uma classe Pessoa, com o uso de function, segundo a sintaxe utilizada pelo JavaScript.
Note que esta é uma abstração que de�ne o modelo Pessoa apenas a partir do nome e da idade.
Qual é este nome e esta idade?
Aqui entram os objetos, pois as classes de�nem o modelo que será seguido por suas instâncias (ou objetos), e estas instâncias
assumem valores para os atributos de�nidos.
EXEMPLO
Observe o exemplo completo a seguir:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
 <script>
 function Pessoa(nome, idade){
 this.nome = nome;
 this.idade = idade;
 this.exibir = function( ) {
 alert(this.nome+" tem "+this.idade+" ano(s)");
 }
 }
 var p1 = new Pessoa("Ana",25);
 var p2 = new Pessoa("Marcos",36);
 </script>
 <button onclick="p1.exibir()"/>P1</button>
 <button onclick="p2.exibir()"/>P2</button>
</body>
</html>
Inicialmente, temos a classe Pessoa, criada através de function e com o uso do ponteiro this para a de�nição dos atributos nome
e idade, além do método exibir, sem parâmetros.
Podemos ler o ponteiro de autoreferência this como “deste”, ou seja, o atributo idade desta Pessoa (this.idade), ou o método
exibir desta Pessoa (this.exibir).
Atenção
Uma observação a ser feita é que, assim como as classes são de�nidas com o uso de function, os métodos da mesma também
são. Basta observar a de�nição do método exibir.
Com a de�nição da classe Pessoa, podemos criar os objetos p1 e p2, cada um com seus próprios valores para os atributos nome
e idade.
Para instanciar os objetos, utilizamos o operador new, responsável por alocar a memória necessária para o novo objeto.
Finalmente, podemos observar a chamada ao método exibir de p1 ou p2 a partir dos eventos presentes nos dois botões da página
HTML.
Ao clicar no botão com texto “P1” será acionado o método exibir do objeto p1, enquanto o botão com texto “P2” acionará o
método exibir de p2.
 
this.exibir = function() {
 alert(this.nome+" tem "+this.idade+" ano(s)");
}
 
var p1 = new Pessoa("Ana",25);
var p2 = new Pessoa("Marcos",36);
 
<button onclick="p1.exibir()"/>P1</button>
<button onclick="p2.exibir()"/>P2</button>
Protótipo
O uso de protótipo é uma peculiaridade do JavaScript e não uma característica própria da orientação a objetos.
Na verdade, o JavaScript não apresenta um mecanismo especí�co para herança, que seria outro dos pilares da orientação a
objetos, mas permite a utilização de prototype para expandir a funcionalidade de classes já existentes.
Vamos considerar uma classe Pessoa constituída apenas de nome e sobrenome:
Com o uso de prototype, podemos adicionar a nacionalidade para esta classe já existente. Claro, que exigirá uma inicialização
prévia, já que o construtor não tem como prever o novo atributo.
Da mesma forma que podemos adicionar um atributo, podemos adicionar um método a esta classe com o uso de prototype.
 
function Pessoa(nome, sobrenome){
 this.nome = nome;
 this.telefone = sobrenome;
}
 
Pessoa.prototype.nacionalidade = "Brasileiro(a)";
 
Pessoa.prototype.nomeCompleto = function( ) {
 return this.nome + " "+this.sobrenome;
};
Atividade
1. O uso de DOM permite a modi�cação dinâmica de partes da página, com o acréscimo, remoção ou alteração de elementos,
tratando de um elemento essencial na interação entre o JavaScript e a página.
Observando o trecho de HTML abaixo, qual seria a instrução JavaScriptpara obter acesso ao elemento DIV e colocar nele a frase
“EXERCICIO DOM”?
<div id="XPTO">ALVO</div>
a) document.getElementById("XPTO").value = "EXERCICIO DOM";
b) document.querySelector("#XPTO").value = "EXERCICIO DOM";
c) document.getElementById("XPTO").innerHTML = "EXERCICIO DOM";
d) document.querySelector(".XPTO").innerHTML = "EXERCICIO DOM";
e) document.querySelector("DIV").value = "EXERCICIO DOM";
2. Você está criando um formulário para cadastro de leitores de um jornal na Web, onde devem constar os dados residenciais do
leitor. A empresa pediu que dados como rua, bairro, cidade e estado sejam preenchidos automaticamente após o leitor digitar o
CEP e sair da caixa de texto. Qual evento deve ser utilizado para efetuar este preenchimento?
a) onblur
b) onclick
c) onexit
d) onenter
e) onchange
3. As linguagens da atualidade buscam metodologias mais organizadas para a programação, e a orientação a objetos acaba
sendo amplamente adotada com este objetivo. O JavaScript também permite o uso desta metodologia, e, para de�nir atributos de
uma classe, é utilizada uma palavra reservada especí�ca. Qual a palavra utilizada?
a) function
b) new
c) inherited
d) this
e) super
Notas
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma
simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográ�ca e de impressos.
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma
simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográ�ca e de impressos.
Referências
CASSATI, J. P. Programação Cliente em Sistemas Web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. São Paulo: Pearson
Education, 2009.
PLOTZE, R. Tecnologias Web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para Internet II. 1. ed. Rio de Janeiro: Estácio, 2017.
Próxima aula
Sintaxe JSON (JavaScript Object Notation);
Bibliotecas JQuery;
Biblioteca JQuery UI para construção de páginas.
Explore mais
Para entender melhor os assuntos tratados nesta aula, acesse estes materiais:
Uso de JavaScript com DOM” <https://www.w3schools.com/js/js_htmldom.asp>
“Eventos” <https://www.w3schools.com/tags/ref_eventattributes.asp>
“Orientação a objetos em JavaScript” <https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-
Oriented_JavaScript>
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/tags/ref_eventattributes.asp
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
Disciplina: Programação Cliente-servidor
Aula 4: JSON e JQuery
Apresentação
Hoje em dia é cada vez mais comum o uso de Web Services REST para comunicação B2C, principalmente no que se refere
aos clientes móveis, como Android; isto trouxe para a sintaxe JSON um maior nível de importância, o que faz com que nós
precisemos entender essa sintaxe, de forma a viabilizar a comunicação com diversos servidores. Outro assunto de grande
relevância é a facilidade com que podemos criar páginas interativas e de visual extremamente agradável ao usarmos as
bibliotecas JQuery, diminuindo nossa carga de trabalho na construção de interfaces modernas e responsivas. Portanto, é
crucial para nós, desenvolvedores, aprendermos a lidar com as tecnologias JSON e JQuery.
Objetivos
Descrever a sintaxe JSON (JavaScript Object Notation);
Examinar os fundamentos das bibliotecas JQuery;
Usar a biblioteca JQuery UI para a construção de páginas.
 Fonte: Jantine Doornbos / Unsplash
JSON
A sintaxe JSON (JavaScript Object Notation) nos permite representar objetos de uma forma muito leve e simples. Note que
falamos aqui de objetos, e não de classes, pois JSON não trabalha com classes, mas diretamente nos objetos.
 Não trabalhamos com métodos em JSON, mas apenas atributos, os quais são de�nidos através de pares chave-valor, onde a
chave é texto e o valor pode assumir diferentes formatos.
A de�nição do objeto JSON é iniciada com o uso de chaves, e os pares chave-valor são
separados por vírgula.
Após a de�nição de um objeto neste formato, podemos utilizá-lo como qualquer objeto padrão do JavaScript.
Nós podemos utilizar vários tipos diferentes para o preenchimento do valor, conforme se observa na tabela seguinte.
FORMATO DESCRIÇÃO EXEMPLO
Texto Cadeia de caracteres delimitada por aspas "nome":"Joao"
Número Valor numérico qualquer "ano":2018
Booleano Aceita true e false "ligado":true
Nulo Representa valor nulo "setor":null
Vetor Lista de valores delimitada por colchetes "lista":["red","green","blue"]
Objeto Objeto JSON delimitado por chaves {"autor":"Mister K","ano":2018}
Observe que os vetores aceitam diversos tipos de dados, inclusive objetos JSON, como podemos ver no exemplo seguinte.
 
var pessoa1 = {"nome":"Joao", "telefone":"1111-1111"};
 
alert(p1.nome);
Exemplo
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <h1>Contatos dos Colaboradores</h1>
 <ul id="alvo">
 </ul>
 <script>
 var dados = {"empregados": [
 {"nome":"Joao" , "telefone":"1111-1111"},
 {"nome":"Maria" , "telefone":"2222-2222"},
 {"nome":"Luiz" , "telefone":"3333-3333"},
 {"nome":"Paula" , "telefone":"4444-4444"}
 ]};
 var lista = document.querySelector("#alvo");
 for(i=0; i>4; i++){
 var contato = dados.empregados[i].nome + " :: "+
 dados.empregados[i].telefone;
 var novoElemento = document.createElement("LI");
 var texto = document.createTextNode(contato)
 novoElemento.appendChild(texto);
 lista.appendChild(novoElemento);
 }
 </script>
 </body>
</html>
Neste exemplo nós temos um objeto JSON denominado
dados, com apenas um atributo, chamado empregados. Este
atributo, por sua vez, é um vetor de objetos JSON, cada um
com os atributos nome e telefone.
Os elementos da lista são inseridos dinamicamente com uso de DOM, e o texto é formado a partir dos dados presentes no vetor
do objeto JSON, onde zero corresponde à primeira posição deste vetor e três corresponde à última.
 
var contato = dados.empregados[1].nome + " :: "
+
 dados.empregados[1].telefone;
// contato recebe o nome e o telefone do segundo elemento do vetor
// contato recebe o valor "Maria :: 2222-2222"
Várias tecnologias atuais utilizam o JSON como formato texto
para troca de informações, das quais podemos destacar os
Web Services REST, com o uso muito ampliado pelo advento
das plataformas móveis, como Android e iOS.
Quando recebemos dados de plataformas como essa, os
dados são texto e não objetos JSON, devendo ser
transformados no JavaScript para utilização posterior. Para tal,
devemos utilizar o método de conversão JSON.parse.
Fonte: Sven / Unsplash
 
alert(p1.nome);
 Fonte: Clément H / Unsplash
Características Gerais do JQuery
Agora que conhecemos as sintaxes JavaScript e JSON, podemos iniciar a utilização de uma biblioteca amplamente adotada pelo
mercado no desenvolvimento de sistemas, que é a JQuery. Esta é uma biblioteca que executa do lado cliente, interagindo com os
elementos da página e facilitando muitas das tarefas usuais no desenvolvimento das funcionalidades da interface.
 A primeira versão foi lançada em janeiro de 2006 e seu criador, Josh Resig, havia publicado anteriormente em seu blog os
fundamentos básicos para a construção do JQuery:

A premissa para o módulo é a seguinte: Usando o poder dos Seletores do Pseudo-CSS,
vincule suas funções Javascript a vários elementos HTML no DOM.
Josh Resig, em 22/08/2005
Saiba mais
Microsoft e Nokia incluíram a biblioteca JQuery em suas plataformas em 2008, sendo adotada posteriormente por outros
fabricantes. Hoje em dia, diversos frameworksincorporaram a biblioteca, como dotNet e Prime Faces.
VANTAGENS COM O USO DO JQuery
1
Grande redução e reutilização de código, além de garantir a compatibilidade da página com os diversos navegadores do
mercado;
2 Diversos plugins foram criados a partir da biblioteca, automatizando as mais diversas áreas do desenvolvimento.
3
Possibilidade de usarmos temas CSS facilita muito a padronização do ambiente e modi�cações visuais. Não precisamos
modi�car a estrutura da página ou o código, bastando alterar os arquivos CSS que constituem o tema para que todo o site
criado com JQuery tenha seu aspecto alterado.
Para iniciarmos a utilização do JQuery, precisamos entrar no
site jquery.com <https://jquery.com/> e baixar os arquivos
necessários. O link para download �ca disponível logo na
primeira página.
Fonte: Alejandro Escamilla / Unsplash
https://jquery.com/
São disponibilizadas duas versões da biblioteca:
Clique nos botões para ver as informações.
Biblioteca compactada, sem espaços, comentários e quebras de linha, possuindo cerca de 15% da versão completa.
Production 
Versão completa, com todos os comentários e quebras de linha, ideal para o desenvolvedor.
Development 
É interessante que utilizemos a versão Development e depois troquemos pela versão
Production, quando tivermos de colocar o sistema em produção. O uso da versão
compactada irá diminuir o tempo de download para quem for acessar a página.
Seletores no JQuery
TQuando comparada ao JavaScript, a seleção de elementos DOM é muito mais simples com o uso de JQuery. Os seletores são a
base funcional da biblioteca quando tratamos do relacionamento com elementos da página.
Observe a diferença:
JavaScript
document.getElementById("XPTO") 
Jquery
$("#XPTO")
De forma geral, o JQuery utiliza seletores semelhantes ao CSS, sendo utilizado,
inicialmente, hash para identi�cadores e ponto para classes.
Vamos observar um pequeno exemplo com seletores destes dois tipos. Não esqueça de copiar o arquivo “jquery.js” para o mesmo
diretório do arquivo HTML.
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <tittle>Exemplo JQuery</tittle>
 <script src="jquery.js">
 </script>
 <script>
 function exibir() {
 $("#alvo").fadeIn("slow");
 $(".par").fadeOut("slow");
 }
 </script>
 </head>
 <body>
 <input type="button" onclick="exibir()"
 value="Clique Aqui!" />
 <p style="display: none; background-color:yellow"
 id="alvo">Olá Mundo</p>
 <p>
 <span class="impar">1</span><span class="part">2</span>
 <span class="impar">3</span><span class="part">4</span>
 <span class="impar">5</span><span class="part">6</span>
 <span class="impar">7</span><span class="part">8</span>
 </p>
 </body>
</html>
Neste exemplo temos duas tags <script>, sendo a primeira
para inclusão da biblioteca JQuery e a segunda para a
codi�cação da função exibir, que é chamada a partir do clique
sobre o botão.
O parágrafo com identi�cador “alvo” é inicializado, através do CSS, de forma oculta.
Na primeira linha da função utilizamos o seletor “#alvo” e exibimos esse parágrafo na página de forma lenta, com uso de fadeIn.
Também temos várias tags <span>, algumas da classe “par”, outras da classe “impar”, e com o uso do seletor “.par” conseguimos
ocultar todos os números pares através de fadeOut.
É fácil perceber que a página é dinâmica e �cará diferente após clicarmos sobre o botão, o que podemos observar nas �guras
seguintes, representando o momento inicial de exibição e o efeito do clique.
 
<p style="display: none; background-color:yellow" id="alvo">
 
$("#alvo").fadeIn("slow");
 
$(".par").fadeOut("slow");
Podemos observar que o uso de um código muito simples nos proporcionou grande efeito
visual e facilidade de controle sobre a página.
E o que pode ser adotado como um seletor?
A tabela seguinte exibe algumas opções.
Tipo Descrição Exemplos
Identificador Faz referência ao id de uma tag. $("#alvo")
Classe Compreende todas as tags com o atributo class equivalente. $(".par")
$(".impar")
Elemento Define o acesso a um tipo de tag na página. $("ul")
$("div")
Agrupamento Combinação de seletores separados por vírgula. $(".par, .impar")
$("h1, #alvo, ul")
:first Primeira ocorrência do seletor. $("div:first")
:last Última ocorrência do seletor. $("div:last")
:even Ocorrências de índice par. $("li:even")
:odd Ocorrências de índice ímpar. $("li:odd")
Atributo Busca por atributo nas tags. $("[title*='XPTO']")
Aninhados Seletores internos a outros seletores, como parágrafos dentro de camadas. $("div p")
$(".menu li")
:has Seleciona caso contenha o segundo seletor. $("div:has(ul)")
Saiba mais
Diversos outros exemplos de seletores <https://www.w3schools.com/jquery/jquery_ref_selectors.asp> estão disponíveis no
endereço.
Após selecionarmos os elementos que serão alvo de nossas ações, podemos utilizar as diversas propriedades do JQuery para
efetuar mudanças no visual ou comportamento dos componentes da página.
Uma aplicação clássica dos seletores é a utilização de CSS para causar o efeito
“zebrado” nos elementos de uma listagem qualquer, o que podemos observar no
exemplo seguinte.
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <tittle>Exemplo JQuery</tittle>
 <script src="jquery.js">
 </script>
 <script>
 function alterar() {
 $(".dados:odd").css("background-color","yellow");
 $(".dados:even").css("background-color","lightgray");
 }
 </script>
 </head>
 <body onload="alterar()">
 <border="1" width="100%">
 <tr><td>Código</td><td>Descrição</td></tr>
 <tr> class="dados" ><td>C001A</td><td>Mouse</td></tr>
 <tr class="dados" ><td>C032B</td><td>Teclado</td></tr>
 <tr class="dados" ><td>M021X</td><td>Memória</td></tr>
 <tr class="dados" ><td>M025X</td><td>DVD</td></tr>
 <tr class="dados" ><td>P035A</td><td>Monitor</td></tr>
 <tr class="dados" ><td>Q028W</td><td>Impressora</td></tr>
 </table>
 </body>
</html>
Neste exemplo chamamos a função alterar a partir do evento
onload da página, fazendo com que, assim que a página é
carregada, os elementos com a classe “dados” de índice ímpar
�quem com fundo amarelo, enquanto os de índice par
assumam um fundo cinza.
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
Esta mudança da formatação é feita com o uso do método css do JQuery, o qual recebe como parâmetros a propriedade CSS e o
valor da mesma.
 
$(".dados:odd").css("background-color","yellow");
$(".dados:even").css("background-color","lightgray");
Eventos no JQuery
Além de conseguirmos selecionar elementos da página e modi�car suas características, podemos relacionar eventos a estes
elementos a partir da sintaxe do JQuery.
Exemplo
Alguns eventos estão direcionados para elementos globais. Por exemplo, ao invés de utilizar o evento onload e direcionar para
uma função JavaScript, poderíamos utilizar algo como o código seguinte:
 
$(document).ready( function() {
 $("div, h1").css("color", "blue");
} );
Este fragmento de código indica que, ao carregar o documento, ou seja, evento ready, será executada a nossa função, fazendo
com que todas as tags <div> e <h1> utilizem fonte na cor azul.
Além de eventos relacionados ao documento, temos alguns que trabalham com a janela, como resize. Vamos observar o exemplo
seguinte.
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <tittle>Exemplo JQuery</tittle>
 <script src="jquery.js">
 </script>
 <script>
 function exibir(){
 $("#dimensao").html($(window).height() + " X " +
 $(window).width());
 }
 $(window).resize(function() {
 exibir();
 });
 $(document).ready(function() {
 exibir();
 });
 </script>
 </head>
 <body>
 Tamanho da Janela: <span id="dimensao"/>
 </body>
</html>
Neste exemplo estamos apresentando as dimensões da janela
ao acabar de carregar o documento e sempre que ela for
redimensionada.
Como o processoé o mesmo em ambos os eventos, foi criada uma função chamada exibir, onde temos o código para atualizar o
conteúdo do elemento <span>, e esta função é chamada em ambos os eventos.
Para a mudança do conteúdo interno do elemento, utilizamos o método html; e para capturar a altura e largura da janela,
utilizamos height e width.
Podemos observar no quadro seguinte alguns eventos de uso geral, relacionados à grande maioria dos seletores.
Evento Utilização
click Permite uma resposta ao clique do mouse.
dblclick Permite uma resposta ao duplo-clique do mouse.
mouseenter Ocorre quando o ponteiro do mouse está posicionado sobre o elemento.
mouseleave Ocorre quando o ponteiro do mouse não está mais sobre o elemento.
toggle Alterna entre cliques sucessivos.
contextmenu Permite controle sobre a utilização do menu de contexto.
blur Quando um elemento do tipo input perdeu o foco.
focus Quando um elemento do tipo input recebeu o foco.
submit Ocorre ao enviar o formulário.
change Quando um elemento do tipo input tem seu valor alterado.
keydown Quando uma tecla é pressionada.
keyup Quando uma tecla é liberada.
keypress Ação de “teclar”, envolvendo o pressionamento e liberação da tecla.
Um exemplo muito útil para o contextmenu é a proteção do conteúdo da página para ações que envolvam o clique com o botão
direito do mouse.
Podemos observar, no código seguinte, alguns dos eventos sendo utilizados.
 
$(document).contextmenu(function(){
 alert("Conteúdo não permite cópia");
 return false; // Impede o tratamento padrão
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <tittle>Exemplo JQuery</tittle>
 <script src="jquery.js">
 </script>
 <script>
 $(document).ready(function(){
 $("#Exemplo1").mouseenter(function(){
 $("#Exemplo1").css("color","red");
 });
 $("#Exemplo1").mouseleave(function(){
 $("#Exemplo1").css("color","black");
 });
 $("#Exemplo1").click(function(){
 alert("Apenas um Exemplo");
 });
 });
 </script>
 </head>
 <body>
 </button id="Exemplo1">APENAS UM EXEMPLO </button>
 </body>
</html>
Neste exemplo temos a utilização dos eventos mouseenter e
mouseleave para controlar a cor da fonte de um botão, além
do evento click, que mostra uma mensagem através de alert
ao ocorrer o clique sobre este botão.
Atenção
É importante observarmos que os eventos foram programados dentro de um evento maior, que seria o ready do documento. Isto
é feito para que a associação ocorra apenas quando os componentes tiverem sido criados, de forma a evitar qualquer
inconsistência.
O interessante do uso de JQuery é que podemos intercalar elementos especí�cos da sintaxe com chamadas clássicas do
JavaScript, o que traz grande poder para o ambiente, já que podemos combinar as mais diferentes bibliotecas JavaScript com as
funcionalidades JQuery.
Outra forma de associar um evento é por delegação, uma prática interessante pois nos permite desligar os eventos a qualquer
momento.
Para associar o evento de clique anterior utilizaríamos o método on; podemos desligá-lo com o uso de off.
Efetuando esta alteração, apenas o primeiro clique sobre o botão funcionaria, pois no código da function temos a utilização de off
logo após a execução do alert.
 
$("#Exemplo1").on("click", function(){
 alert("Apenas um Exemplo");
 $("#Exemplo1").off("click");
});
JQuery UI
Através do módulo JQuery UI (User Interface) nós,
desenvolvedores, podemos criar interfaces visuais
extremamente atrativas com pouquíssimo esforço. Como
todos os elementos JQuery, neste também trabalhamos com a
aplicação de funções a seletores da página, e o resultado �nal
é a mudança do aspecto original.
Para utilizar o JQuery UI, além de baixar o JQuery, temos que
baixar a biblioteca JavaScript e um tema CSS especí�cos do
módulo, os quais são fornecidos em forma de arquivo zip,
disponível no endereço jqueryui.com <https://jqueryui.com> .
Após baixar, é só expandir e copiar o conjunto de arquivos e
diretórios para o mesmo diretório de nossas páginas.
É muito fácil observarmos o poder do JQuery UI no exemplo
seguinte.
Fonte: Aditya Chinchure / Unsplash
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>
 <tittle>jQuery UI Datepicker</tittle>
 <link rel="stylesheet" href="jquery-ui.css">
 <script src="jquery.js"></script>
 <script src="jquery-ui.js"></script>
 <script>
 $( function() {
 $( "#data1" ).datepicker();
 } );
 </script>
 </head>
 <body>
 <p>Data: <input type="text" id="data1"></p>
 </body>
</html>
https://jqueryui.com/
Note a simplicidade com que criamos este calendário com uso de JQuery UI.
Inicialmente incluímos as bibliotecas necessárias e arquivos CSS, algo que se repetirá em qualquer página criada com a utilização
deste módulo.
Em seguida, efetuamos a transformação de uma tag <input> com identi�cador “data1” em calendário através do uso do método
datepicker.
 
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
 
$( function() {
 $( "#data1" ).datepicker();
});
Hoje falamos bastante acerca de RIA (Rich Internet Application), ou interfaces ricas, que trata da utilização de comportamentos
próximos ao desktop na criação de páginas Web, e o módulo JQuery UI traz uma grande quantidade de componentes que
cumprem com esse padrão funcional.
 Além do calendário, esse módulo traz opções como listas, planilhas, efeitos, diálogos, suporte às operações de arraste, além da
possibilidade de utilização de temas personalizados com uso de CSS.
 Alguns dos componentes JQuery UI podem ser observados no quadro seguinte.
Evento Descrição Geral
accordion Conteúdo disposto em seções retráteis.
datepicker Calendário com utilização personalizável.
dialog Diversos tipos de janelas de diálogo com possibilidade de arraste.
menu Criação de menus e submenus.
progressbar Barra de progresso, normalmente utilizada em downloads.
slider Seleção de valor por arraste, como no controle de volume ou brilho.
tabs Conteúdo sobreposto com abas de acesso.
Vamos observar agora um exemplo um pouco mais complexo, com o uso de alguns desses componentes.
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>
 <tittle>jQuery UI</tittle>
 <link rel="stylesheet" href="jquery-ui.css">
 <script src="jquery.js"></script>
 <script src="jquery-ui.js"></script>
 <script>
 $( function() {
 $("#menu1").menu();
 $("#dialogo1").dialog({
 autoOpen: false,
 show: { effect: "blind", duration: 1000
 },
 hide: { effect: "explode", duration: 1000
 }
 });
 $("#estacio").click(function(){
 location.href="//www.estacio.br";
 });
 $("#harvard").click(function(){
 location.href="//www.harvard.com/";
 });
 $("#abreDialogo").click(function() {
 $("#dialogo1").dialog("open");
 });
 });
 </script>
 <style>
 .ui-menu { width: 150px; }
 </style>
 </head>
 <body>
 <ul id="menu1">
 <li><div id="estacio">Estacio</div></li>
 <li><div id="harvard">Harvard</div></li>
 <li><div>Exemplos</div>
 <ul></ul>
 <li><div id="abreDialogo">Diálogo</div></li></li>
 <li><div>Nada Definido</div></li>
 </ul>
 </li>
 <li class="ui-state-disabled"><div>Desabilitado</div></li>
 </ul>
 <div id="dialogo1" title="Diálogo Simples"></div>
 <p>Apenas uma caixa de diálogo que permite arraste e pode ser fechada clicando no "X"</p>
 </div>
 </body>
</html>
Inicialmente, como podemos observar no exemplo, os menus são construídos com o uso de listas e divisões internas e
con�gurados com o uso de menu. A parte visual é bem simples, mas devemos controlar o clique sobre os elementos
constituintes.
No clique sobre a opção de menu “Estácio”, será aberto o site da instituição através do atributo de navegador location.href do
JavaScript.
O mesmomodelo serve para qualquer link, como para a opção que desvia para “Harvard”.
Quanto aos diálogos, a construção mais básica envolve apenas a apresentação de um texto, como uma janela de mensagem,
mas permitindo, por padrão, o arraste e o fechamento da caixa de diálogo.
Para construirmos um diálogo, precisamos de uma tag <div>, e o conteúdo interno deverá ser colocado com a tag <p>. Observe o
uso do atributo title.
Após de�nirmos o diálogo no HTML, devemos con�gurá-lo via JQuery.
Note que este diálogo adicionou uma série de con�gurações, como o uso de “autoOpen: false” para iniciar o diálogo invisível, e os
efeitos para abertura (show) e fechamento (hide).
Ambos os efeitos utilizados terão duração de um segundo, sendo que a abertura utilizará blind e o fechamento explode.
 
$("#estacio").click(function(){
 location.href="//www.estacio.br";
});
 
<div id="dialogo1" title="Diálogo Simples">
<p>Apenas uma caixa de diálogo que permite arraste e pode ser fechada clicando no "X"</p>
</div>
 
$("#dialogo1").dialog({
 autoOpen: false,
 show: { effect: "blind", duration: 1000
 },
 hide: { effect: "explode", duration: 1000
 }
});
Saiba mais
Existem diversos efeitos disponíveis, como: fade, drop, bounce, puff, shake, entre muitos outros. Podemos testá-los livremente
com a substituição neste trecho do código.
Para abrir a caixa de diálogo já con�gurada, devemos utilizar o parâmetro “open”.
 
$("#abreDialogo").click(function() {
 $("#dialogo1").dialog("open");
});
Uma observação que deve ser feita é que existe a possibilidade de con�gurar algumas
características via CSS, como a largura do menu.
 
<style>
.ui-menu { width: 150px; }
</style>
Esta utilização de CSS é muito importante, pois viabiliza a utilização e criação de
temas, o que modi�ca de forma simples todo o visual da página criada.
Segundo o princípio de uso das folhas de estilo em cascata, o primeiro link é o padrão, para o arquivo “"jquery-ui.css”, e depois
podemos adicionar o link para o tema, já que qualquer elemento repetido será sobreposto ao inicial; caso não haja sobreposição
será utilizado o valor original.
Podemos testar e baixar diversos temas de exemplo, além de criar nossos próprios temas, em https://jqueryui.com/themeroller/
<https://jqueryui.com/themeroller/>
Saiba mais
Podemos testar e baixar diversos temas <https://jqueryui.com/themeroller/> de exemplo, além de criar nossos próprios temas.
Segundo o princípio de uso das folhas de estilo em cascata, o primeiro link é o padrão, para o arquivo "jquery-ui.css", e depois
podemos adicionar o link para o tema, já que qualquer elemento repetido será sobreposto ao inicial; caso não haja sobreposição
será utilizado o valor original.
Experimente navegar pela galeria e baixar algum tema de seu
interesse. Basta efetuar o download do arquivo zip e sobrepor
os arquivos e diretórios anteriormente utilizados para uso da
biblioteca JQuery UI, além de acrescentar o link para o tema.
Fonte: Gabriel Beaudry / Unsplash
 
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="jquery-ui.theme.css">
O exemplo de calendário inicial, com a aplicação do tema UI
Darkness, passa a mostrar um visual bem diferenciado, como
pode ser observado a seguir.
Com o uso de temas, podemos personalizar totalmente as características visuais da página, sem ter de alterar o código
JavaScript, ou seja, mantendo toda a funcionalidade padrão enquanto a formatação é feita de forma externa.
Esse tipo de metodologia vai ao encontro dos princípios da W3C, pois promove a separação clara entre estrutura, funcionalidade e
formatação.
https://jqueryui.com/themeroller/
https://jqueryui.com/themeroller/
Atividade
1. A sintaxe JSON é muito utilizada por Web Services REST e diversos frameworks do mercado, tratando de uma forma simples
de representar objetos, e se baseia em elementos do tipo chave-valor. Ao de�nir o par chave-valor, qual tipo de dado NÃO pode ser
representado diretamente como um atributo JSON?
a) Texto
b) Número
c) Booleano
d) Objeto
e) Data
2. Você começou a utilizar JQuery e precisa acessar o primeiro item de uma lista, colocada diretamente na última camada da
página. Qual seria o seletor correto?
 
<div>
 <ul>
 <li>A</li> <li>B</li>
 </ul>
</div>
<div>
 <ul>
 <li>C</li> <li>D</li>
 </ul>
</div>
A) $("div div ul li ")
B) $(".last div ul .first li")
C) $("#last li #first")
D) $("div:last ul li:first")
E) $("li:last ul div")
3. Você começou a utilizar JQuery UI em um novo sistema, e deseja que o clique sobre um botão identi�cado como “Btn1” efetue
a abertura de um diálogo identi�cado como “Dgn1”. Escreva o código necessário para esta ação.
NotasReferências
DEITEL, P; DEITEL, H. Ajax, rich internet applications e desenvolvimento web para programadores. São Paulo: Pearson
Education, 2009.
PLOTZE, R. Tecnologias web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para internet II. Vol. 1. Rio de Janeiro: Estácio, 2017.
Próxima aula
As tecnologias XML;
O funcionamento do AJAX;
Utilização do DOM para tratamento de dados XML;
Explore mais
Não deixe de visitar as páginas abaixo:
Sintaxe JSON <https://www.w3schools.com/js/js_json_syntax.asp>
Seletores do JQuery <https://api.jquery.com/category/selectors/>
Exemplos de JQuery UI <https://jqueryui.com/demos>
https://www.w3schools.com/js/js_json_syntax.asp
https://api.jquery.com/category/selectors/
https://jqueryui.com/demos
Disciplina: Programação Cliente-servidor
Aula 5: XML e AJAX
Apresentação
Em termos gerais, os arquivos XML apresentam regras de escrita especí�cas que foram muito bem aceitas pelo mercado, e
hoje trabalhamos com diversas tecnologias que fazem uso do formato.
Com a possibilidade de de�nição de gramáticas através de esquemas, o XML alia uma grande liberdade de criação ao
formalismo necessário para as tarefas de con�guração de servidores e comunicação empresarial no modelo B2B. Diversas
tecnologias foram criadas com base no XML, e o formato acabou sendo adotado como padrão de interoperabilidade, o que é
de grande relevância para o ambiente extremamente heterogêneo da Web.
Justamente por isso, o XML acabou sendo uma das bases para criação de páginas dinâmicas, com carregamento
assíncrono através do AJAX (Http Assíncrono, JavaScript e XML). Logo, é necessário compreender este formato e as
diversas tecnologias associadas a ele.
Objetivos
Explicar as regras de escrita XML e tecnologias associadas;
Explicar a utilização de AJAX para carregamento dinâmico;
Usar o objeto DOMParser para tratamento de XML.
 Fonte: Markus Spiske / Unsplash
O que é XML?
É muito importante compreendermos o que é o XML (Extended Markup Language), bem como sua utilização dentro do contexto
tecnológico atual.
Incialmente, XML não é uma linguagem, mas um conjunto de regras de escrita, ou de maneira formal, recomendações da W3C
para gerar linguagens de marcação voltadas para necessidades especí�cas. Embora não seja uma linguagem, a sintaxe XML foi
utilizada para a criação de diversas linguagens, como XHTML, MathML, SVG, SMIL, entre várias outras.
O XML foi de�nido a partir da SGML (Standard Generalized Markup Language); seu objetivo
primordial é facilitar o compartilhamento de informações na Internet. Por se tratar de um
padrão em forma de texto plano, não é bloqueado por �rewalls, além de permitir a
interpretação a partir de qualquer ambiente de programação, como Java, dotNet, PHP, ou
JavaScript, o que viabiliza grande nível de interoperabilidade.

A interoperabilidade pode ser entendida como uma característica que se refere à
capacidade de diversos sistemas e organizações trabalharem em conjunto (interoperar)
de modo a garantir que pessoas, organizações e sistemas computacionais interajam para
trocar informações de maneira eficaz e eficiente.
Governo Digita
Através dos documentos XML, somos capazes de organizar a informação de uma forma hierárquica, agrupando elementos
constituintes de um determinado fragmento dedados e suas respectivas dependências recursivamente.
Elementos Básicos
Ao criarmos um documento XML, devemos seguir algumas regras:
Sempre deve existir um e apenas um nó raiz Toda etiqueta precisa ter fechamento
Os comandos, ou etiquetas, devem estar corretamente
aninhados
Os atributos de cada etiqueta não podem apresentar
repetições
Ocorre a diferenciação entre elementos em maiúsculo ou
minúsculo (case-sensitive)
Podemos ver, no exemplo seguinte, um documento XML contendo alguns dos elementos básicos necessários para a constituição
deste tipo de arquivo.
Exemplo
 
<?xml version="1.0" encoding="iso-8859-1"?>
<turma codigo="1001">
 <professor>Tom Sawyer</professor>
 <alunos>
 <aluno matricula="1968001">Gleedy Lee</aluno>
 <aluno matricula="1968002">Alex Lifeson</aluno>
 <aluno matricula="1968003">Neil Peart</aluno>
 </alunos>
</turma>
1° linha: presença de uma diretiva do XML, que de�ne qual
página de código será utilizada para acentuação, sendo iso-
8859-1 uma das opções para textos brasileiros.
2° linha : nó inicial, que inclusive traz o atributo codigo. Note
que mesmo com a acentuação correta, não é adequado utilizar
acentos em nomes de elementos ou atributos.
Dentro de uma turma temos um professor e diversos alunos,
cada aluno com um atributo de matricula.
 
<?xml version="1.0" encoding="iso-8859-1"?>
 
<turma codigo="1001">
 
<alunos>
 <aluno matricula="1968001">Gleedy Lee</aluno>
Todos estes dados acabam oferecendo uma estrutura
hierárquica, onde a partir de um nó raiz temos a turma,
constituída de professor e alunos, sendo este último elemento
composto de diversas ocorrências do tipo aluno. Isso pode ser
observado facilmente na saída proporcionada pelo Chrome,
em formato de árvore.
Observe a mensagem que é apresentada pelo Chrome, onde
diz que “o documento XML não parece ter nenhuma
informação de estilo associada ao mesmo”. Se tivermos uma
folha de estilo associada ao XML, ele será apresentado de uma
forma diferente da árvore padrão.
Primeiro precisamos criar um arquivo CSS com nossas de�nições em termos de fontes, cores e formatações em geral. Como no
HTML, aqui é possível utilizar as nossas tags diretamente.
Nós chamaremos este arquivo de “turma.css”.
 
Turma {background-color: #000000; width: 100%;}
professor {color: #FF0000; font-size: 20pt;}
alunos {display: block; margin-bottom: 30pt; margin-left: 0;}
aluno {background-color: #ffffff; border:1pt; color: #0000FF;
 font-size: 20pt;}
Note que são utilizadas propriedades comuns do CSS, como
color e background-color para cores de fonte e fundo, bem
como elementos de margin e border para con�gurar o
distanciamento entre os elementos.
Exemplo
Depois de criado o arquivo com as con�gurações tipográ�cas, basta associar o XML ao mesmo, acrescentando a ligação através
da diretiva xml-stylesheet.
Podemos observar a versão �nal do XML a seguir.
 
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="turma.css"?>
 <turma codigo="1001">
 
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="turma.css"?>
<turma codigo="1001">
 <professor>Tom Sawyer</professor>
 <alunos>
 <aluno matricula="1968001">Gleedy Lee</aluno>
 <aluno matricula="1968001">Gleedy Lee</aluno>
 <aluno matricula="1968001">Gleedy Lee</aluno>
 </alunos>
</turma>
Também é possível criarmos comentários no XML, de acordo com o mesmo modelo adotado pelo HTML, bem como
implementarmos trechos livres de interpretação com o uso de CDATA .
O uso desses trechos CDATA é muito comum quando queremos acrescentar código em meio ao conteúdo de texto, como no
exemplo seguinte.
1
Exemplo
 
<?xml version="1.0" encoding="utf8"?>
<comando>
 <!-- Estrutura de Decisão -->
 <nome>if</nome>
 <exemplo>
 <![CDATA[
 if(a<b)
 maior = b;
 else
 maior = a;
 ]]>
</exemplo>
</comando>
Sem o uso de CDATA nesse exemplo, ocorreria um erro, pois o parser entenderia que existe
uma tag iniciada com b e que não foi fechada, isso devido à presença do if com a condição
a<b.
Outro conceito muito importante para a criação de arquivos XML é o namespace.
Muitas vezes precisamos distinguir o signi�cado de uma mesma palavra em contextos diferentes como, por exemplo, a palavra
“ponto”, que pode signi�car um elemento em termos de coordenadas cartesianas ou o local de parada de ônibus, entre outros.
O uso de namespaces permitirá esta diferenciação, como podemos observar no exemplo seguinte.
http://estacio.webaula.com.br/cursos/gon964/aula5.html
Exemplo de DTD
 
<?xml version="1.0" encoding="utf8"?>
<colaborador xmlns:empresa="01.001.001/0001-01">
 <nome>Ana Maria</nome>
 <matricula uf="RJ">20180065-A</matricula>
 <empresa:nome>Padaria do João</empresa:nome>
</colaborador>
Nesse exemplo podemos observar a ocorrência da tag
<nome>, referente ao nome do funcionário, e a tag
<empresa:nome>, esta última se referindo à identi�cação da
empresa.
A de�nição do namespace “empresa” ocorre logo no início do XML, com a associação do mesmo a uma URL de referência, a qual
não tem grande signi�cado neste caso, mas poderia ser um endereço real, com regras de escrita.
 
<colaborador xmlns:empresa="01.001.001/0001-01">
Esquemas
Muitas vezes escrevemos um XML sintaticamente correto, mas que não é válido para ser aplicado a determinado contexto.
Ao criarmos um aplicativo, esperamos receber tipos especí�cos de dados para tratamento; mas, com a liberdade de criação
oferecida pelo XML, ocorre a possibilidade de o programa receber dados com as tags organizadas das mais diversas formas e
com os mais diversos tipos de dados.
Exemplo
Por exemplo, alguém pode enviar a data como um campo texto único, enquanto outro usuário estaria fornecendo o mesmo dado
como três campos numéricos, indicando o dia, o mês e o ano.
É necessário, portanto, de�nir um esquema, ou seja, uma gramática especí�ca para o aplicativo em questão, envolvendo uma
organização hierárquica dos dados e de�nição de tipos a serem utilizados.
Os dados podem ser veri�cados através de rotinas de programação, mas além de ser um processo bastante sujeito a falhas, não
traz para o usuário do aplicativo qualquer informação acerca do formato que ele deverá utilizar para o envio da informação.
Logo, é mais interessante utilizarmos uma metodologia formal, com a validação através de parsers, os quais irão veri�car de
forma automática o XML frente a algum esquema.
Em termos de XML, os esquemas podem ser de�nidos com o uso de dois tipos de tecnologia:
Document Type De�nition (DTD) 2 W3C XML Schema 3
 
<!DOCTYPE colaborador[
<!ELEMENT colaborador(nome, matricula)>
<!ELEMENT nome (#PCDATA)>
<!ELEMENT matricula (#PCDATA)>
<!ATTLIST matricula uf CDATA #REQUIRED>
]>
Note que são de�nidos elementos com o uso de ELEMENT e
atributos com o uso de ATTLIST.
http://estacio.webaula.com.br/cursos/gon964/aula5.html
http://estacio.webaula.com.br/cursos/gon964/aula5.html
EXEMPLO de arquivo XSD
 
<xsd:schema xmlns:xsd="//www.w3.org/2001/XMLSchema">
<xsd:element name="colaborador">
 <xsd:complexType name="tipoColaborador">
 <xsd:sequence>
 <xsd:element name="nome" type="xsd:string"/>
 <xsd:element name="matricula" type="xsd:string">
 <xsd:complexType>
 <xsd:attribute name="uf" type="xsd:string"/>
 </xsd:complexType>
 </xsd:element>
 </xsd:sequence>
 </xsd:complexType>
</xsd:element>
Com o uso de XSD, os elementos são criados com tipos especí�cos, como xsd:string, existindo também outras opções, como
tipos numéricos, por exemplo, e podemos de�nir nossos próprios tipos e nomeá-los.
 
<xsd:complexType name="tipoColaborador">
Note o uso de namespace na criação do arquivo XSD. Quem
for utilizá-lo como de�nição de regra gramatical, também
utilizará a chamada como namespace.
Comentário
Lembrando que é possível a combinação de diversos namespaces para um mesmo XML, o que permitirá a junção de diversas
sintaxes dentro de um mesmo contexto.
 Fonte: Sai KiranAnagani / Unsplash
Transformação com XSLT
Hoje em dia é comum escutarmos o termo “linguagem de transformação”, mas o
que isso realmente signi�ca?
Como podemos observar, os documentos XML permitem a organização da informação, mas não estão preocupados com o
aspecto visual desta informação, pois é papel do HTML, junto ao CSS, exibir os dados para o usuário.
 Ocorre, portanto, a necessidade de um processo intermediário para a transformação dos
dados XML para um formato HTML, passível de visualização em navegadores. É neste ponto
que surgem linguagens especí�cas para este �m, as chamadas “linguagens de
transformação”.
A linguagem de transformação mais utilizada para o ambiente que envolve XML é denominada eXtensible Stylesheet Language
(XSLT). Esta é uma linguagem com sintaxe XML para a transformação de arquivos XML em outros formatos, como SVG, VRML,
HTML, ou até outros arquivos XML.
Podemos observar, a seguir, um arquivo que será nomeado “contatos.xsl”.
 
<?xml version="1.0" encoding="utf8" ?>
<xsl:stylesheet xmlns:xsl="//www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html><body>
<table border="1" width="100%">
<tr><td>Nome</td><td>Telefones</td></tr>
<xsl:for-each select="contatos/contato">
<tr><td><xsl:value-of select="@nome"/></td>
<td><ul>
<xsl:for-each select="telefone">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul></td></tr>
</xsl:for-each>
</table>
</body></html>
</xsl:template>
</xsl:stylesheet>
Neste código podemos observar várias das características do
XSLT, a começar pela utilização do namespace correto para o
reconhecimento dos comandos da linguagem.
A partir deste ponto podemos de�nir templates aplicáveis a
determinadas tags do XML, ou à raiz do documento.
Neste caso, ao encontrar a raiz, será iniciada a construção do
HTML contendo uma tabela no corpo do documento, sendo
criada uma linha para cada contato encontrado no documento
XML com o uso de xsl:for-each.
Os valores a serem utilizados na saída são obtidos com o
comando xsl:value-of. Este comando aceita apresentar o valor
de texto de um elemento interno diretamente, de atributos com
uso de arroba, ou o texto do elemento corrente com uso de
ponto.
<xsl:stylesheet xmlns:xsl="//www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<xsl:for-each select="contatos/contato">
<xsl:value-of select="@nome"/>
Os elementos de navegação utilizados para select ou match fazem parte de um padrão de nomenclatura denominado XPath.
Vamos observar, a seguir, um exemplo de arquivo XML que utilizará o XSL anterior, contendo uma agenda de contatos e sua
visualização no navegador.
 
<?xml version="1.0" encoding="utf8"?>
<?xml-stylesheet type="text/xsl" href="contatos.xsl"?>
<contatos>
 <contato nome="Ana">
 <telefone>1111-1111</telefone>
 <telefone>1122-1122</telefone>
 <telefone>1133-1133</telefone>
 </contato>
 <contato nome="João">
 <telefone>2211-1111</telefone>
 <telefone>2222-1122</telefone>
</contato>
</contatos>
Note que o arquivo XML referencia o XSL como uma folha de
estilo.
<?xml-stylesheet type="text/xsl" href="contatos.xsl"?>
Este é um exemplo de formatação �xa, mas existe a possibilidade de utilizar o XSL sem efetuar a referência a partir do XML,
desde que apoiado por bibliotecas de linguagens especí�cas, como Java e C#.
Como podemos observar, o arquivo XSL permite uma transformação muito grande da saída padrão do arquivo XML. Assim como
é possível transformar para uma saída HTML, é possível transformar para qualquer formato texto, segundo o mesmo processo.
Atenção
Por questões de segurança, navegadores como o Chrome não permitem o acesso a arquivos locais a partir de outros arquivos
locais; para abrir este exemplo deverá ser utilizada a opção de linha de comando --allow-�le-access-from-�les, ou criar um
aplicativo Web e chamar o XML a partir de localhost.
Exemplo
 Fonte: Markus Spiske / Unsplash
Leitura com DOM
Com o uso de JavaScript é muito simples tratar os arquivos XML, pois o uso do parser segue os mesmos princípios de acesso
aos elementos do HTML.
 Vamos observar um pequeno exemplo em uma página HTML.
 
<!DOCTYPE html>
<html>
 <body>
 <p id="demo"></p>
 <script>
 var text, parser, xmlDoc;
 text = "<contato><nome>Ana</nome>"+
 "<telefone>1111-1111</telefone></contato>";
 parser = new DOMParser();
 xmlDoc = parser.parseFromString(text,"text/xml");
 var noInfo = xmlDoc.getElementsByTagName("nome")[0];
 document.getElementById("demo").innerHTML =
 noInfo.childNodes[0].nodeValue;
 </script>
 </body>
</html>
Neste exemplo temos o conteúdo XML em uma variável
denominada text, contendo dados de contato como nome e
telefone.
Em seguida instanciamos um objeto do tipo DOMParser. Este
objeto será responsável pela criação da árvore DOM a partir do
conteúdo XML.
A árvore é montada em memória e colocada na variável
xmlDoc com o uso do parser.
A partir daí é possível acessar os elementos do XML como
qualquer árvore DOM, e com o uso de
getElementsByTagName recebemos todas as tags com o
nome especi�cado, sendo recebidas em um vetor com índice
inicial zero.
Porém, este nó será do tipo elemento; para acessar o texto,
precisamos acessar o primeiro �lho dele na árvore,
correspondendo a um nó do tipo texto, com a propriedade
nodeValue informando o valor deste texto.
parser = new DOMParser();
<xsl:for-each select="contatos/contato">
var noInfo = xmlDoc.getElementsByTagName("nome")[0];
noInfo.childNodes[0].nodeValue;
Após a obtenção dos dados, podemos exibi-los em qualquer camada ou parágrafo com o uso de innerHTML.
A única novidade real neste processo é o uso do parser, pois as alterações dinâmicas e o acesso aos componentes via DOM não
diferem em nada de processos anteriores no ambiente HTML.
Neste exemplo o conteúdo XML está dentro do trecho em JavaScript, como variável de texto, mas normalmente este conteúdo
será recebido via HTTP, o que nos levará ao estudo do AJAX.
Exemplo
 Fonte: Luca Bravo / Unsplash
Tecnologia AJAX
O padrão de design de páginas atuais envolve a modi�cação dinâmica de partes do conteúdo, particularmente com a adoção de
camadas e a possibilidade de alteração do conteúdo interno com o uso de innerHTML. Com estas funcionalidades é possível
criarmos as diversas partes da página de forma dinâmica.
Aliado a isto, e seguindo o modelo inicialmente utilizado em portais, as informações podem ser modularizadas, sendo fornecidas
por diferentes origens, o que nos permite dizer que as diversas camadas poderiam organizar a visualização do conteúdo, e cada
camada pode estar sendo “alimentada” por uma fonte de dados distinta, normalmente em formato XML ou JSON.
Com isso já teríamos a possibilidade de criar uma página constituída de fragmentos de
informação combinados, mas ainda podemos ir além...
Como as camadas tratam de informações de fontes independentes, podemos aproveitar o modelo de processamento viabilizado
pela máquina para que as camadas sejam preenchidas em paralelo, diminuindo muito o tempo total de carga.
Este paralelismo é viabilizado através de um modelo assíncrono de comunicação, ou seja, um modelo no qual o servidor é
requisitado, mas, ao contrário do padrão normalmente utilizado, em que o cliente interrompe o processamento e aguarda a
resposta, neste, o cliente continua o seu processamento e deixa uma função callback esperando a resposta em paralelo.
É justamente a partir destes princípios que surge o nome de uma “nova” tecnologia, na
verdade a junção de tecnologias já existentes, o AJAX (Http Assíncrono, JavaScript e XML).
Embora o XML faça parte da descrição, qualquer formato texto pode ser transmitido, como o
JSON, por exemplo.
Podemos observar estes detalhes no exemplo seguinte, com a leitura assíncrona do arquivo XML de contatos criado
anteriormente.
 
<html>
 <button onclick="atualizar()">Chamar</button>
 <div id="resposta">Resposta Aqui</div>
 <script>
 function atualizar(){
 var url = "contatos.xml";
 xhttp = new XMLHttpRequest();xhttp.open("GET", url, true);
 xhttp.onreadystatechange = AJAX_Callback;
 xhttp.send();
 }
 function AJAX_Callback(){
 if (xhttp.readyState == 4 && xhttp.status == 200) {
 var parser = new DOMParser();
 var xmlDoc =
 parser.parseFromString(xhttp.responseText,"text/xml");
 var nomes = xmlDoc.getElementsByTagName("contato");
 var saida = "<ul>";
 for(i=0;i<nomes.length;i++){
 saida += "<li>"+nomes[i].attributes[0].value+"</li>";
 }
 saida += "</ul>"
 document.getElementById("resposta").innerHTML =saida;
 }
 }
 </script>
 </body>
</html>
Neste exemplo, ao clicar sobre o botão, teremos a carga do
nome dos contatos na camada, e todo o processo é iniciado
ao chamar o método “atualizar”.
O primeiro passo é a con�guração da chamada através de um
objeto do tipo XmlHttpRequest, que viabiliza a conexão HTTP
de forma assíncrona (padrão) ou síncrona.
function atualizar(){
 var url = "contatos.xml";
 xhttp = new XMLHttpRequest();
 xhttp.open("GET", url, true);
 xhttp.onreadystatechange = AJAX_Callback;
 xhttp.send();
}
Segundo a con�guração utilizada, temos uma chamada para o arquivo XML em modo GET, e a função de tratamento será
"AJAX_Callback".
Comentário
Lembrando que teremos de executar uma chamada via HTTP para que nosso exemplo funcione, o que exigirá que as páginas
estejam hospedadas, mesmo que em um servidor local.
Quanto à função de tratamento, ela deve inicialmente veri�car se a carga dos dados já está completa, pois é chamada a cada
mudança de estado da conexão. Lembrando sempre que esta função executa em paralelo, sem interferir na funcionalidade da
página.
Os dados obtidos deverão ser carregados em um objeto do tipo DOMParser, permitindo o acesso aos elementos e atributos com
o uso dos mesmos elementos de navegação DOM utilizados no HTML.
Da mesma forma que chamamos um arquivo XML neste exemplo, podemos efetuar a chamada de um programa qualquer no
servidor que retorne os dados neste formato, ou outro formato texto, podendo utilizar tanto GET quanto POST.
 
if (xhttp.readyState == 4 && xhttp.status == 200)
 
if (xhttp.readyState == 4 && xhttp.status == 200)
 (Fonte: Shutterstock)
Uso de XML na Web
O formato XML é amplamente utilizado na Web em comunicações entre empresas (B2B), principalmente devido ao formalismo
proporcionado pelos esquemas XSD e DTD, o que garante a recepção de dados com formatos e tipos previamente estipulados.
Exemplo
Podemos observar diversas áreas no Brasil que utilizam este tipo de arquivo, como as notas �scais eletrônicas, transações
bancárias do tipo DOC e TED, entre diversos outros exemplos, sendo também um formato fundamental na integração de
aplicativos, dentro de uma arquitetura orientada a serviços, com o uso de Web Services do tipo SOAP.
Isso justi�ca o nome dado à tecnologia AJAX, pois o padrão inicial de transmissão de dados era o formato XML, e embora seja
utilizado JSON em diversas situações atuais, o uso de XML é muito mais adequado ao tratamento com uso de DOM.
Recentemente as áreas de comunicação com o cliente (B2C) começaram a utilizar amplamente os Web Services do tipo REST,
com dados transitados em formato JSON, principalmente como efeito da grande expansão do mercado de dispositivos móveis.
Porém, como o JSON não apresenta um formalismo adequado, os Web Services SOAP continuarão a ser o principal meio de
integração na comunicação B2B.
Exemplo
Outro exemplo do uso de XML na Web, muito comum para todos nós, são os feeds de notícias com uso do formato RSS.
Além desta aplicação direta na transmissão de dados, existem diversas sintaxes baseadas em XML com ampla utilização na Web,
como o MathML para expressar equações matemáticas, o formato XMI para representar diagramas UML e o SVG para desenho
de grá�cos vetoriais.
Vale lembrar também que a con�guração de servidores de rede e de bancos de dados, em sua grande maioria, utiliza arquivos de
con�guração no formato XML.
Atividade
1. Em determinados momentos esperamos que uma aplicação receba dados XML com uma ordem e tipos especí�cos,
necessitando a de�nição de uma gramática através de esquemas. Quais são as tecnologias utilizadas para a de�nição destes
esquemas?
a) XSLT e SVG
b) DTD e XSD
c) MathML e RSS
d) SOAP e DOM
e) XMI e AJAX
2. Foi solicitado que você utilize a tecnologia AJAX para o carregamento dinâmico de dados em uma camada a partir de uma
chamada a um Web Service SOAP. Como sabe que os dados deste tipo de componente são oferecidos no formato XML, quais
serão os componentes necessários para a conexão com o servidor e a interpretação dos dados recebidos?
3. Considerando o XML apresentado a seguir, e um objeto DOMParser denominado parser apontando para o conteúdo, como
seria o comando para obter a marca do primeiro carro?
 
<oficina>
 <carro>
 <marca>Volvo</marca>
 <placa>XPT2001</placa>
 </carro>
 <carro>
 <marca>Volvo</marca>
 <placa>XPT2001</placa>
 </carro>
</oficina>
a) parser.getElementById("marca")[0].value
b) parser.getElementsByTagName("carro")[0].childNodes[0].childNodes[0].nodeValue
c) parser.getElementById("marca")[0].nodeValue
d) parser.getElementsByTagName("carro")[0].childNodes[0].nodeValue
e) parser.getElementsByTagName("carro")[0].getElementById("marca").value
Notas
CDATA1
O uso desses trechos CDATA é muito comum quando queremos acrescentar código em meio ao conteúdo de texto, como no
exemplo seguinte.
Document Type De�nition (DTD)2
O modelo de gramática proporcionado pelo DTD é bastante simples, mas não utiliza XML em sua de�nição e não permite o uso de
namespaces, o que signi�ca dizer que não podemos ter gramáticas múltiplas com uso de DTD. Além dessas características, os
esquemas do tipo DTD são muito limitados com relação a tipos de dados.
Na verdade, nós já utilizamos uma DTD ao colocar <!DOCTYPE html> no início de nossas páginas HTML.
W3C XML Schema3
Normalmente utiliza arquivos do tipo XSD (XML Schema De�nition), e conta com sintaxe XML, aceitando namespaces e de�nição
de tipos de dados.
Referências
DEITEL, P; DEITEL, H. Ajax, rich internet applications e desenvolvimento web para programadores. São Paulo: Pearson
Education, 2009.
PLOTZE, R. Tecnologias web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para internet II. Vol. 1. Rio de Janeiro: Estácio, 2017.
Próxima aula
O ambiente servidor Java;
A tecnologia de Servlets;
A tecnologia JSP.
Explore mais
Para conhecer mais sobre utilização de XSLT, acesse os seguintes tutoriais:
ç , g
Tutorial XSLT <//www.dicas-l.com.br/arquivo/tutorial_xslt.php>
XSLT – Transformação <https://www.w3schools.com/xml/xsl_transformation.asp>
Transformando XML com XSLT <https://ciclosw.wordpress.com/2014/09/06/transformando-o-xml-com-xslt/>
Analisador XML <https://www.w3schools.com/xml/xml_parser.asp>
AJAX <https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/send>
http://www.dicas-l.com.br/arquivo/tutorial_xslt.php
https://www.w3schools.com/xml/xsl_transformation.asp
https://ciclosw.wordpress.com/2014/09/06/transformando-o-xml-com-xslt/
https://www.w3schools.com/xml/xml_parser.asp
https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/send
Disciplina: Programação Cliente-servidor
Aula 6: Servlet e JSP
Apresentação
Após estudar as diversas tecnologias disponíveis para a construção de interfaces para o cliente, é necessário observar o
funcionamento dos servidores e tecnologias associadas, dentro de um ambiente Web completo.
A linguagem Java, com boas características no que se refere a portabilidade e conectividade, é uma opção muito aceita no
mundo corporativo para a programação do lado servidor.
Contando com o Web Server Tomcat, o ambiente Java para Web trabalha principalmente com os componentes Servlet e JSP
(Java Server Pages), mas outras tecnologias podem ser utilizadas, inclusive com a substituição do Tomcat por um
Application Server com suporte a EJB (Enterprise Java Beans), como GlassFish ou JBoss, os quais acrescentam a camada
EJB, mas utilizam o próprio Tomcat como containerWeb, funcionando como módulo interno.
Objetivos
Explicar o funcionamento do ambiente servidor Java para Web;
Utilizar a tecnologia de Servlets na construção de páginas dinâmicas;
Utilizar a tecnologia JSP na construção de páginas dinâmicas.
 Fonte: Cody Barnes / Unsplash
Plataforma Java
Java é uma linguagem de programação orientada a objetos desenvolvida na década de 90 por uma equipe de programadores
che�ada por James Gosling, na empresa Sun Microsystems. Hoje em dia a linguagem está sob o controle da Oracle, após a
mesma ter comprado a Sun.
Desde a sua concepção, o Java trouxe alguns princípios básicos que norteiam a sua própria evolução, destacando-se a
preocupação de executar em múltiplas plataformas e garantir elementos de conectividade.
A linguagem Java utiliza um artifício que permite a execução
de seus programas em qualquer plataforma: uso de máquina
virtual. Com esta abordagem, os programas em Java são
compilados, não podendo ser classi�cados como
interpretados, mas sem gerar executáveis para o Sistema
Operacional, devendo ser executados pela máquina virtual
criada para cada plataforma.
Fonte: Lauren Mancke / Unsplash
Nós também temos uma grande facilidade para efetuar a conexão com outros sistemas em rede com o uso de Java, pois ele traz
uma extensa biblioteca de componentes para a criação de Sockets, conexão HTTP e FTP, criação de clientes e servidores de
e‑mail, entre diversos outros, o que garante a premissa básica de conectividade da linguagem.
Outra característica inovadora no lançamento do Java, rapidamente adotada por outras linguagens, foi a inclusão de um coletor
de lixo (garbage collector), o qual efetua a desalocação de memória de forma automática.
Sintaxe Java
Quase tudo em Java é baseado em objetos. Basicamente, apenas os tipos nativos são considerados de forma diferente, mas para
cada tipo nativo existe uma ou mais classes Wrapper.
 Podemos observar, no quadro seguinte, os principais tipos nativos do Java.
Tipo Nativo Wrapper Descrição do Tipo
byte Byte Inteiro de 1 byte
short Short Inteiro de 2 bytes
int Integer Inteiro de 4 bytes
long Long Inteiro de 8 bytes
char Character Caracteres ASCII
float Float Real de 4 bytes
double Double Real de 8 bytes
boolean Boolean Valores booleanos true ou false
As variáveis aceitam diferentes formas de declaração e inicialização, como podemos observar a seguir:
Para programas simples não há necessidade do uso extensivo de classes Wrapper, mas é aconselhável utilizá-las na criação de
sistemas que usem tecnologias de Web Service, ou frameworks de persistência, entre outros.
As linguagens Java e JavaScript descendem da linguagem C; por esse motivo apresentam muitas semelhanças, mas também
reservam algumas diferenças.
Os operadores aritméticos, relacionais e lógicos são basicamente os mesmos para as duas linguagens, porém no Java existe
uma preocupação maior com o tratamento de elementos binários.
Operador Binário Operação
& And (E) binário
| Or (ou) binário
 
int a, b, c;
boolean x = true; // Variável declarada e inicializada
char letra = 'W';
String frase = "Teste";
double f = 2.5, g = 3.7;
^ Xor (ou-exclusivo) binário
Vamos observar, a seguir, a estrutura geral de um programa Java.
A linguagem Java é completamente orientada a objetos, e a classe que contém o método estático main pode ser executada como
um programa de linha de comando. No exemplo seria impressa a frase "Alo Mundo".
As estruturas de decisão e repetição também são equivalentes àquelas encontradas no JavaScript, com algumas diferenças no
uso do for, pelo fato de o Java ser fortemente tipado.
Vamos observar um exemplo de uso do for a seguir.
Neste exemplo temos o cálculo do valor médio de uma sequência entre os limites de 1 a 5, considerando a função y = x . Foi
utilizado o método Math.pow, que eleva um número a uma potência qualquer para calcular o quadrado de x.
Executando o programa, teremos a impressão do valor 11, o que corresponde exatamente ao valor médio, dado por
(1 + 4 + 9 + 16 + 25) / 5.
 
public class Exemplo001 {
 public static void main(String args[ ]) {
 System.out.println("Alo Mundo");
 }
}
 
public class Exemplo002 {
 public static void main(String[] args) {
 // Calculo do valor médio da sequencia y = f(x) = x * x
 // Media = Somatorio dos valores / quantidade
 // Limites 1 a 5
 double soma = 0.0;
 for(int x=1; x<=5; x++)
 soma += Math.pow(x, 2);
 // eleva x a potência 2 e acumula
 System.out.println(soma/5);
 }
}
2
Como a linguagem Java é completamente orientada a objetos, a análise de sua sintaxe exige
o conhecimento acerca da de�nição de classes, com seus atributos e métodos.
Vamos observar a aplicação destes conceitos no exemplo seguinte. Para este exemplo serão necessários dois arquivos, um para
Pessoa e outro para Exemplo003.
Conforme podemos observar, o primeiro arquivo (Pessoa.java) contém a classe Pessoa, a qual de�ne os atributos nome e
telefone e o método exibir.
No outro arquivo (Exemplo003.java) são instanciados os objetos p1 e p2 com o uso do operador new, responsável por alocar
estes objetos e, acompanhando a sequência de comandos, teremos o preenchimento dos atributos nome e telefone para cada
um dos objetos, e a chamada ao método exibir de cada um deles. Teremos como resultado �nal a saída seguinte.
Note que todos os elementos de Pessoa foram declarados como públicos. Na orientação a objetos, as classes de�nem estruturas
fechadas, nas quais o acesso a seus atributos e métodos deve ser controlado, e para tal iremos contar com três níveis de acesso:
 
public class Pessoa {
 public String nome;
 public String telefone;
 public void exibir(){
 System.out.println(nome+"::"+telefone);
 }
}
public class Exemplo003 {
 public static void main(String[] args) {
 // Instanciando os objetos p1 e p2
 Pessoa p1 = new Pessoa();
 Pessoa p2 = new Pessoa();
 // Preenchimento dos atributos dos objetos p1 e p2
 p1.nome = "João";
 p1.telefone = "1111-1111";
 p2.nome = "Maria";
 p2.telefone = "2222-2222";
 // Chamada ao método exibir em p1 e p2
 p1.exibir();
 p2.exibir();
 }
}
 
João::1111-1111
Maria::2222-2222

Público (public)
Permite que qualquer um acesse o atributo ou método;

Privado (private)
Não permite acessos externos, sendo utilizado apenas na
programação interna da classe;

Protegido (protected)
Permite a utilização na classe e nos descendentes, mas não
permite acessos externos.
Aqui, quando falamos de descendentes, estamos nos referindo a uma característica importante da orientação a objetos, que é a
herança, onde utilizamos a palavra reservada extends, como pode ser observado a seguir.
Note que o novo método exibir chama o original através do uso de super. Também é necessário colocar a anotação @Override,
indicando a ocorrência de polimor�smo.
 
public class Profissional extends Pessoa{
 public String profissao;
 @Override
 public void exibir() {
 super.exibir();
 // Chama o exibir de Pessoa, imprimindo nome e telefone
 System.out.println("\tTrabalha como "+profissao);
 // Complementa a informação acerca da profissão
 }
}
 Fonte: jarmoluk / Pixabay
Ambiente Servidor
Aprendemos a criar toda a interface com tecnologias cliente, inclusive a criação de formulários, possibilitando o envio de dados
pelos métodos GET ou POST do HTTP.
Mas para quem enviamos os dados?
Os dados são enviados para alguma tecnologia servidora, através de uma requisição HTTP, a qual irá iniciar algum processamento
no servidor e este, ao �nal, retornará uma resposta, normalmente em HTML ou XML.
 Redes de computadores. Camada de aplicação do modelo de rede TCP / IP. Trabalho do protocolo HTTP.
No ambiente Java, um objeto da classe HttpServletRequest irá:
Tratar os dados da requisição HTTP - normalmente denominado request, permitindo efetuar qualquer tipo de
processamento com estes dados, como persistência e validações de segurança.
Controlar Os dadosde retorno para o usuário - costuma ser denominado response, o qual permitirá escrever o conteúdo
HTML ou XML de saída, além de outros elementos, como cookies
No modelo Web, a cada requisição recebemos uma resposta com uma nova página, como se estivéssemos executando um novo
programa, ou seja, todos os objetos antigos deixam de existir, e o estado não pode ser mantido.
A solução para manter estes estados é a utilização de sessões, as quais correspondem a objetos alocados ao nível do servidor,
fazendo referência a uma dada conexão. Enquanto o usuário se mantiver no site, estes dados serão mantidos, sendo eliminados
na perda de conexão.
No Java o objeto session, da classe HttpSession, permite a gerência de sessões HTTP, mas
é sempre importante lembrar que as sessões consomem memória do servidor, devendo ser
utilizadas para �ns bem especí�cos.
Web Server Tomca
O servidor Tomcat é um projeto da Apache Software
Foundation para a implementação com código aberto de
tecnologias como Java Server Pages (JSP), Java Servlet, Java
WebSocket e Java Expression Language.
Como qualquer servidor HTTP, o Tomcat também responde às
chamadas efetuadas por este protocolo, respondendo com
páginas HTML, XML, arquivos binários ou qualquer elemento
que possa ser de�nido através de um tipo MIME, mas a
característica principal dele é que seu container Web fornece
suporte às tecnologias de Servlet e JSP.
Por ser um produto de código aberto, acabou se tornando o padrão para hospedagem de
aplicativos Java para Web, podendo atuar como servidor independente ou como módulo de
servidores como JBoss e GlassFish.

Apache Software Foundation é a base do ecossistema de software de código aberto
moderno, suportando algumas das soluções de software mais usadas e importantes para
potencializar a economia da Internet na atualidade.
Mark Driver, diretor de pesquisas da Gartner
Os principais diretórios e arquivos do Tomcat podem ser observados no quadro seguinte:
Diretório Conteúdo
bin Binários do servidor, incluindo o executável do mesmo.
conf Arquivos de configuração, como server.xml, que guarda as configurações gerais do Tomcat.
lib Bibliotecas java de inicialização do servidor no formato jar, as quais também ficam disponíveis para todos os
aplicativos do ambiente.
logs Arquivos de log para identificação de erros na execução do Tomcat.
webapps Aplicativos Java para Web.
É possível alterar várias características do Tomcat editando o arquivo server.xml.
Exemplo
Por exemplo, o servidor Tomcat executa, por padrão, na porta 8080, mas podemos modi�car esta porta procurando e alterando a
ocorrência deste valor no arquivo.
Os aplicativos Java Web deverão obedecer a uma estrutura especí�ca, composta por um diretório de base para conteúdo Web,
como páginas JSP e HTML, um subdiretório WEB-INF, onde �ca o arquivo de con�guração web.xml, um diretório classes para o
armazenamento das classes Java, e um diretório lib com as bibliotecas nos formatos jar e zip, e um subdiretório META-INF, onde
temos con�gurações gerais relacionadas aos recursos do servidor, como o arquivo context.xml.
Toda esta estrutura pode ser compactada em um arquivo com extensão war (Web Archived), que ao ser copiado para o diretório
webapps, ou deploy, de acordo com a distribuição, é automaticamente expandido, �cando o aplicativo disponível para os
usuários.
Essa é uma característica do Tomcat denominada hot deployment, fornecendo uma forma muito prática de disponibilizar o
aplicativo Web, pois resume o upload de dezenas de arquivos a apenas um.
Application Server GlassFish
Enquanto o Tomcat suporta, de forma nativa, apenas Servlets
e JSPs, atuando como um Web Server, o GlassFish vai além,
oferecendo suporte às tecnologias Java de Objetos
Distribuídos, no caso, os Enterprise Java Beans (EJBs), sendo
classi�cado como Application Server.
Algo interessante a ser mencionado é que o Tomcat é utilizado
pelo GlassFish como módulo interno, delegando para ele toda
a parte de comunicação HTTP e tratamento de Servlets e
JSPs, enquanto os demais elementos da robusta arquitetura
do GlassFish tratam das diversas tecnologias do Java
Enterprise Edition (JEE).
Com o uso do GlassFish seremos capazes de criar sistemas mais complexos, com uso de
EJBs e transações distribuídas, além de obtermos ferramentas para gerenciamento de
componentes corporativos, como mensagerias, e ambiente de testes simpli�cado para Web
Services.
Inicialmente o GlassFish era disponibilizado pela Sun, mas após a compra da mesma pela Oracle ele passou a ser denominado
Oracle GlassFish Server.
Como o Tomcat não é capaz de prover todas as ferramentas que serão estudadas, adotaremos o GlassFish como ferramenta de
trabalho, pois é mais abrangente, dando suporte às tecnologias JEE e cumprindo com todas as funcionalidades de Web Server
através do módulo Tomcat interno.
É possível efetuarmos diversas con�gurações no GlassFish através da interface Web administrativa, ou através do comando
asadmin, sendo comum o uso de arquivos XML. Por exemplo, uma das opções de con�guração é o acréscimo de recursos como
pool de conexões, elemento que será de grande utilização na criação de sistemas corporativos.
Podemos observar, a seguir, o conteúdo XML necessário para adicionar um pool de conexões.
Neste exemplo é criado um pool de conexões para um banco Oracle, indicando a URL, usuário e senha, além de características
como tempo máximo de espera, utilização de cache, número máximo de comandos SQL paralelos, entre outros.
 Também é de�nido um recurso JNDI para viabilizar o acesso do pool a partir de um programa do ambiente Java.
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE resources PUBLIC
"-//GlassFish.org//DTD GlassFish Application Server 3.1 Resource Definitions//EN"
"//glassfish.org/dtds/glassfish-resources_1_5.dtd">
<resources>
 <jdbc-connection-pool name="SPECjPool" steady-pool-size="100"
 max-pool-size="150" max-wait-time-in-millis="60000"
 pool-resize-quantity="2" idle-timeout-in-seconds="300"
 is-isolation-level-guaranteed="true"
 is-connection-validation-required="false"
 connection-validation-method="auto-commit"
 fail-all-connections="false"
 datasource-classname="oracle.jdbc.pool.OracleDataSource">
 <property name="URL"
 value="jdbc:oracle:thin:@iasperfsol12:1521:specdb"/>
 <property name="User" value="spec"/>
 <property name="Password" value="spec"/>
 <property name="MaxStatements" value="200"/>
 <property name="ImplicitCachingEnabled" value="true"/>
 </jdbc-connection-pool>
 <jdbc-resource enabled="true" pool-name="SPECjPool"
 jndi-name="jdbc/SPECjDB"/>
</resources>
JNDI (Java Naming and Directory Interface) é o serviço de registro e localização de recursos
utilizado pelo Java, uni�cando acesso a componentes nomeados, como pools de conexões,
mensagerias, elementos do LDAP, sistemas de arquivos, DNS, entre diversos outros.
Qualquer recurso con�gurado no servidor GlassFish, para o qual desejamos permitir acesso a partir do Java, deverá estar
relacionado a um registro no JNDI. Apenas componentes de uso interno e restrito não apresentarão este registro.
Ambiente de Desenvolvimento
Podemos desenvolver programas em Java com o simples uso de um editor de texto e os programas de compilação e execução
oferecidos a partir do Java Development Kit (JDK), o qual pode ser obtido gratuitamente no site da Oracle
<https://www.oracle.com> .
Mesmo sendo possível programar em Java com esta abordagem, a produtividade deste método é muito baixa, tornando-se
inviável para �ns de mercado, o que nos leva a buscar algum ambiente de desenvolvimento integrado (IDE); existem várias
opções, como Eclipse, NetBeans, JCreator, BlueJ e IntelliJ IDEA.
Nós iremos adotar o NetBeans, por ser mais didático e já trazer uma con�guração completa, sem a necessidade de adicionar
servidores ou bancos de dados, o que trará maior conforto para todos na aprendizagem da linguagem.
A interface do NetBeans é bastante complexa, e devemos entender seus componentes principaispara melhor utilização da
ferramenta.
De acordo com a numeração utilizada na �gura, temos os seguintes componentes:
https://www.oracle.com/
1
Menu Principal
Controle global das diversas opções da IDE, ativação e
desativação de painéis internos, instalação de plataformas,
entre outras diversas funcionalidades. Este é o controle de
mais alto nível do NetBeans.
2
Toolbar
Acesso rápido, de forma grá�ca, às opções mais utilizadas,
como criar arquivos e projetos, salvar arquivos e executar o
projeto.
3
Painel de Controle
Aceita várias con�gurações, mas no padrão normal apresenta
uma divisão com a visão lógica dos projetos (Projetos), uma
com a visão física (Arquivos) e outra com acesso a banco de
dados e servidores (Serviços).
4
Navegador
Permite o acompanhamento das características de qualquer
elemento selecionado da IDE, como classes em meio ao
código.
5
Editor de Código
Voltado para a edição do código, com diversos auxílios visuais
e ferramentais de complementação.
6
Saída
Simula o prompt do sistema, permitindo observar a saída da
execução, bem como efetuar entrada de dados via teclado.
O NetBeans pode ser obtido em netbeans.org/downloads <https://netbeans.org/downloads> , devendo ser escolhida a versão
completa, pois já traz todas as plataformas de programação con�guradas, além dos servidores GlassFish e Tomcat embutidos.
Após instalar o JDK e o NetBeans (verão completa), podemos executar esta IDE e criar o nosso primeiro programa Java para Web,
de acordo com a seguinte sequência de passos:
https://netbeans.org/downloads
No menu principal do NetBeans escolha a opção Arquivo..Novo Projeto, ou Ctrl+Shift+N;
Na janela que se abrirá escolha o tipo de projeto como Java Web..Aplicação Web e clique em Próximo;
Dê um nome para o projeto (WebTeste01) e diretório para armazenar seus arquivos (C:\MeusTestes), e clique
em Próximo;
Escolha o servidor (GlassFish) e versão do JEE (Java EE7) e clique em Finalizar.
Ao término destes passos, o projeto gerado será apresentado no Painel de Controle, guia Projetos, como pode
ser observado na imagem.
Note que o arquivo web.xml não é apresentado nesta estrutura, e isso se deve ao fato de termos utilizado o JEE versão 7, onde as
con�gurações são efetuadas, em sua grande maioria, com o uso de anotações.
O projeto é dividido em:
Páginas Web, onde se encontram elementos JSP, HTML, CSS e outros;
Pacotes de Códigos-Fonte, onde iremos colocar nossas classes e pacotes Java;
Bibliotecas, para adicionar bibliotecas Java para uso pelo sistema; e
Arquivos de Con�guração, incluindo elementos como MANIFEST e web.xml.
Criado o aplicativo, podemos começar a criar Servlets, JSPs e demais elementos constituintes de nosso sistema, e ao clicar no
botão de execução será iniciado o servidor (caso ainda não esteja ativo), gerado o arquivo war, copiado este arquivo para o
diretório correto do servidor, efetuado o deploy e aberto o navegador no endereço correto para apresentação do index.
Servlet
A tecnologia Servlet foi criada com o intuito de se tornar uma solução genérica para a criação de aplicativos hospedados em
servidores, quaisquer que fossem os protocolos utilizados por eles; mas foi a especialização para o HTTP (HttpServlet) que se
tornou popular.
Tudo que precisamos fazer é criar um descendente da classe HttpServlet, herdando toda a integração com o ambiente já
existente, e alterar os métodos doGet e doPost para personalizar as respostas.
Para adicionar um Servlet ao nosso projeto, devemos escolher o menu Arquivo..Novo Arquivo, ou pressionar CTRL+N, e seguir os
seguintes passos na janela que se abrirá:
Escolha o tipo de arquivo como Web..Servlet e clique em Próximo;
Dê um nome para o Servlet (ServCalc) e para o pacote onde será gerado (servlets), e clique em Próximo
Observe as con�gurações de mapeamento do Servlet e clique em Finalizar.
O próximo passo é alterar o método processRequest, para que ele corresponda ao processamento necessário em nosso sistema.
 
protected void processRequest(HttpServletRequest request,
 HttpServletResponse response)
 throws ServletException, IOException {
 response.setContentType("text/html;charset=UTF-8");
 try (PrintWriter out = response.getWriter()) {
 int a = new Integer(request.getParameter("a")), b = a;
 int fatorial = 1;
 while(a>1)
 fatorial *= a--;
 out.println("<html><body>");
 out.println("O fatorial de "+b+" é "+fatorial);
 out.println("</body></html>");
 }
}
Um detalhe no Servlet gerado pelo NetBeans é a presença de código oculto, ou editor-fold,
que trata de um trecho de código escondido através de comentários anteriores e
posteriores, com a visualização alternada através do clique sobre o sinal de “+” presente na
margem esquerda do editor.
O código oculto, neste caso, engloba os métodos doGet e doPost, responsáveis pela recepção de chamadas HTTP dos tipos GET
e POST, respectivamente. No código gerado, ambos os métodos redirecionam para processRequest, o que fará com que os dois
tipos chamada sejam tratados da mesma forma.
A assinatura de processRequest, assim como doGet e doPost, traz dois parâmetros, o primeiro do tipo HttpServletRequest,
encapsulando a requisição HTTP, e o segundo do tipo HttpServletResponse, responsável pela resposta HTTP.
Inicialmente é de�nido o tipo de saída que será utilizado, através do objeto response, e o �uxo da resposta é apontado pelo objeto
out.
Em seguida nós capturamos o parâmetro enviado pela requisição HTTP, através do objeto request, o qual chega no formato texto,
e o transformamos para o tipo inteiro.
Calculamos o fatorial do número no passo seguinte.
Finalmente construímos a saída HTML desejada, nesse caso exibindo o fatorial do número fornecido a partir da chamada HTTP.
Observe também a presença de uma anotação na de�nição do Servlet.
Esta anotação efetua o mapeamento do Servlet, indicando o nome utilizado por ele e a URL para invocá-lo. Embora
tradicionalmente sejam utilizados textos correspondentes ao nome da classe em si, esta não é uma regra, podendo inclusive ser
adotadas URLs dinâmicas através de curingas, como “*.jsf”.
 
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
 
int a = new Integer(request.getParameter("a")), b = a;
 
int fatorial = 1;
while(a>1)
 fatorial *= a--;
 
out.println("<html><body>");
out.println("O fatorial de "+b+" é "+fatorial);
out.println("</body></html>");
 
@WebServlet(name = "ServCalc", urlPatterns = {"/ServCalc"})
public class ServCalc extends HttpServlet {
Com o nosso Servlet construído, podemos criar o formulário necessário para efetuar a chamada ao mesmo, e faremos isto com
uma pequena inclusão no trecho <body> da página index.
Finalizando todas estas modi�cações, precisamos apenas executar o projeto, sendo iniciado o servidor, efetuado o deploy e
aberto o navegador na página index.
Preenchendo o número desejado e clicando em somar, nosso Servlet será acionado e a resposta montada, sendo exibida no
navegador do cliente.
 
 <form method="GET" action="ServCalc">
 <input type="text" name="a"/>
 <input type="submit" value="fatorial"/>
 </form>
 </body>
</html>
Java Server Pages
A criação de Servlets seria su�ciente para prover as necessidades de todo e qualquer aplicativo Web, porém a construção de
páginas através de código direto pode se tornar desconfortável para a maioria dos designers.
Uma solução para isso foi a de�nição de um novo modelo de programação, no qual códigos Java são escritos dentro do conteúdo
HTML ou XML, permitindo a edição visual através de ferramentas como o DreamWeaver da Adobe.
Comentário
A Microsoft já havia implementado este modelo de desenvolvimento através do ActiveX Server Pages (ASP), enquanto no Java foi
de�nida a tecnologia Java Server Pages (JSP).
O processo para a criação de uma página JSP é basicamente o mesmo que o de um
Servlet, sendo que devemos escolher arquivo do tipo Web..JSP. O arquivo gerado
�cará na seção PáginasWeb do projeto ou em um subdiretório da mesma.
Vamos observar a estrutura de uma página JSP simples.
A primeira linha deste código é uma diretiva, no caso indicando o tipo de conteúdo e a página de acentuação utilizada. Diretivas
também são utilizadas para importar bibliotecas, indicar herança, importar taglibs, de�nir a página de erro, entre diversas outras
opções.
As linhas seguintes são código HTML padrão, e que não serão executados ao nível do servidor, mas simplesmente irão compor a
página de saída.
No meio das tags <ul> temos um Scriptlet, que é iniciado com <% e terminado com %>, tratando de código Java que será
executado no servidor. Neste código temos um vetor de nomes de cores, os quais serão impressos no conteúdo da página
através do objeto out, implícito nas páginas JSP.
Para executar diretamente o JSP, basta clicar com o botão direito sobre ele na guia de Projetos e mandar executar arquivo.
Podemos ver a página gerada a seguir.
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8">
 <title>JSP Page</title>
 </head>
 <body>
 <ul>
 <%
 String[] cores = {"vermelho","verde","azul"};
 for(String x: cores)
 out.println("<li>"+x+"</li>");
 %>
 </ul>
 </body>
</html>
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
 
<%
String[] cores = {"vermelho","verde","azul"};
for(String x: cores)
 out.println("<li>"+x+"</li>");
%>
Os objetos request e response também são implícitos para as páginas JSP, podendo ser utilizados da mesma forma que o foram
nos Servlets.
Atenção
Inclusive, algo que devemos lembrar é que toda página JSP é convertida em Servlet pelo container Web no primeiro acesso. Logo,
o que muda é basicamente a forma de programar, e não a funcionalidade original.
Atividade
1. Qual tipo de classe permite manter valores entre chamadas sucessivas no ambiente Java Web?
a) HttpServletRequest
b) HttpServletResponse
c) HttpServlet
d) HttpListener
e) HttpSession
2. Implemente o método processRequest, de um Servlet criado a partir do NetBeans para receber dois números via HTTP e
retornar a soma entre eles.
3. Crie uma página JSP para apresentar os números ímpares entre 1 e 100 no formato de lista HTML.
NotasReferências
CASSATI, J. P. Programação servidor em sistemas web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, rich internet applications e desenvolvimento web para programadores. São Paulo: Pearson
Education, 2009.
______. Java, como programar. 8. Ed. São Paulo: Pearson, 2010.
SANTOS, F. Tecnologias para internet II. Vol. 1. Rio de Janeiro: Estácio, 2017.
Próxima aula
Sintaxe SQL para bancos de dados relacionais
Conceito de Middleware;
Utilização do JDBC e padrão DAO para acesso ao banco de dados.
Explore mais
Não deixe de visitar as seguintes páginas:
Tutorial de Java da IBM (Utiliza Eclipse) <https://www.ibm.com/developerworks/br/java/tutorials/j-introtojava1/index.html>
Tutorial de criação de projeto do NetBeans <https://netbeans.org/kb/docs/java/quickstart_pt_BR.html>
Instalação do NetBeans e JDK” <https://www.youtube.com/watch?v=GNUGNfIIGhA>
Con�guração do Tomcat no Eclipse <https://www.youtube.com/watch?v=9Z4OKoh-Omw>
Manual do GlassFish <https://javaee.github.io/glass�sh/doc/5.0/reference-manual.pdf>
Tutorial de Servlet e JSP <https://www.journaldev.com/2114/servlet-jsp-tutorial>
Programação em Java <//www.faeterj-rio.edu.br/downloads/bbv/0031.pdf>
https://www.ibm.com/developerworks/br/java/tutorials/j-introtojava1/index.html
https://netbeans.org/kb/docs/java/quickstart_pt_BR.html
https://www.youtube.com/watch?v=GNUGNfIIGhA
https://www.youtube.com/watch?v=9Z4OKoh-Omw
https://javaee.github.io/glassfish/doc/5.0/reference-manual.pdf
https://www.journaldev.com/2114/servlet-jsp-tutorial
http://www.faeterj-rio.edu.br/downloads/bbv/0031.pdf
Disciplina: Programação Cliente-servidor
Aula 7: Middleware JDBC
Apresentação
Existem diversos tipos de subsistemas que podem ser acessados por nossos sistemas, como bancos de dados,
mensagerias, sistemas de arquivos, LDAP, entre diversos outros. Todos estes produtos são normalmente classi�cados como
back-end, enquanto o sistema chamador funciona como front-end; mas existem diversos fornecedores para cada tipo de
back-end, o que inicialmente nos levaria a construir diversas versões do mesmo front-end. Daí surge o conceito de
middleware, ou seja, uma camada intermediária de software entre o sistema e o subsistema, e o JDBC é de particular
interesse para nós por se tratar do middleware do Java para acesso a bancos de dados.
Objetivos
Explicar o conceito de Middleware;
Explicar a sintaxe SQL para bancos de dados relacionais;
Aplicar JDBC e padrão DAO para acesso ao banco de dados.
Middleware
Para de�nirmos middleware, devemos entender os conceitos de front-end e back-end.
Front-end
Caracterizamos o front-end como uma camada de
software responsável pelo interfaceamento do sistema,
podendo ser com o usuário (desktop), protocolo (HTTP) ou
com outros sistemas (Web Services).
Normalmente o front-end utiliza uma linguagem de
programação para viabilizar a criação desta interface, a
qual envolve não apenas telas, mas também objetos de
negócio e processos de forma geral, e para o nosso
contexto o front-end é o programa Java.
Back-end
Já o back-end se refere ao conjunto de tecnologias que
podem ser acessadas a partir do front-end, mas que não
são programadas no nível dele, como os bancos de dados
 e as mensagerias .1 2
Comentário
Bom, agora imagine um cenário em que você trabalha em uma consultoria e �ca responsável pela parte da integração do sistema
com o banco de dados, mas são mais de 30 clientes que utilizam diversos servidores de banco, como Oracle, Informix, DB2, SQL
Server, MySQL, Jasmine, Btrieve, entre outros.
Na prática, você teria que ter uma versão do programa para cada banco, pois são diferentes componentes de acesso, muitas
vezes com programações diferenciadas, e a probabilidade de ocorrerem erros é simplesmente enorme.
E se você não tivesse que se preocupar com o tipo de banco de dados?
Essa é a ideia por trás do middleware. Temos uma camada de software intermediária que
promove a comunicação entre o front-end e o back-end, de forma a deixar transparente esta
integração para o programador.
http://estacio.webaula.com.br/cursos/gon964/aula7.html
http://estacio.webaula.com.br/cursos/gon964/aula7.html
Com o uso de um middleware, o programador irá enviar os comandos necessários para este componente a partir do front-end e,
com a con�guração correta, o middleware assumirá a responsabilidade de enviar os comandos para o back-end escolhido.
Com isso teremos apenas uma versão do sistema e diversas con�gurações de conexão para o middleware, diminuindo
enormemente a probabilidade de erros.
 Na �gura seguinte temos alguns exemplos de middleware para banco.
Exemplos de middleware para banco Fonte: Elaborado pelo autor.
Nesta �gura podemos observar o Delphi utilizando BDE como middleware, Java utilizando JDBC e ambiente Microsoft com uso
do ODBC. Destes, o único middleware que acessa todos os bancos de dados é o ODBC; logo, quando um middleware como JDBC
não consegue acessar um banco de dados, ele pode fazer uma ponte para ODBC e, com isto, realizar o acesso desejado.
 Fonta: geralt / Pixabay
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Bancos de Dados Relacionais
Temos diversos tipos de bancos de dados no mercado, como aqueles que são denominados NoSQL (Not only SQL), amplamente
utilizados no Big Data através de implementações como Cassandra, HBase, MongoDB e Neo4J.
Outro exemplo de banco presente no mercado é a classe multidimensional, que permite gerar múltiplos cruzamentos entre
diversas colunas, dentro de um modelo desnormalizado, base das ferramentas OLAP (Online Analytical Processing).
Ainda temos os bancos orientados a objetos, como o Jasmine, que seguem um padrãomais próximo ao utilizado pelas
linguagens de programação e que poderiam tirar grande proveito do uso de lógica fuzzy e processamento quântico, aproximando-
se do modelo de busca de informações efetuada pelo cérebro humano.
Apesar desta grande diversidade, os bancos relacionais são o tipo de banco mais comum em termos de cadastros, já que
permitem uma estruturação de dados bem organizada, com consultas muito ágeis, fundamentadas em procedimentos
matemáticos já consolidados e amadurecidos ao longo de décadas.
Podemos dizer, de forma extremamente simpli�cada, que um banco de dados relacional é um repositório de dados capaz de
manter relacionamentos consistentes entre os elementos armazenados.
Mas em que se baseia a funcionalidade de um banco deste tipo?
O primeiro elemento que de�ne a metodologia utilizada por um banco relacional é a Álgebra Relacional, que trata de conjuntos e
das operações que podem ser feitas sobre eles, como união, interseção e subtração, além de operações especí�cas, como
projeção, seleção e junção.
Podemos observar um exemplo de junção natural a seguir.
Aluno
Nome Matrícula Nome Curso
João 999812001 Engenharia
Ana 999812012 Informática
Luiz 999812035 Medicina
Carla 999812029 Engenharia
Curso
Nome Curso Coordenador
Engenharia Alberto
Informática Beatriz
Medicina Paulo
Aluno |X| Curso
Nome Matrícula Nome Curso Coordenador
João 999812001 Engenharia Alberto
Ana 999812012 Informática Beatriz
Luiz 999812035 Medicina Paulo
Carla 999812029 Engenharia Alberto
Seguindo a mesma linha, o Cálculo Relacional realiza consulta aos dados através de expressões formais, além de incluir algumas
palavras novas, como “Existe” e “Para Todo”.
Exemplo
Como exemplo, poderíamos efetuar uma consulta do tipo “obter todos os coordenadores de cursos onde existe ao menos um
aluno inscrito”.
 
ρ( ∀(Curso) | Ǝ (Aluno |X| Curso), Coordenador)
Os conjuntos de dados que apresentam semelhanças são organizados em tabelas, que nada mais são que estruturas
organizadas em linhas e colunas. As colunas são chamadas de atributos, campos ou metadados, enquanto as linhas, assumindo
valores para estes campos, são chamadas de tuplas ou registros.
Entre os campos de uma tabela precisamos ter um subconjunto dos mesmos que venha a identi�car unicamente um registro, o
que é chamado de chave primária da tabela, como por exemplo a matrícula de um funcionário.
Quando uma tabela se relaciona com outra, este relacionamento é feito a partir das chaves primárias, e por isso o campo de
relacionamento faz parte de uma chave estrangeira, ou seja, aquele conjunto de campos é chave em outra tabela, e não na que
está armazenando aquele registro especí�co.
Podemos observar os tipos de relacionamentos no quadro seguinte.
Relacionamento Utilização
1 para 1 O tipo mais comum, define uma relação de dependência simples como nos casos de funcionários e
gerente, em que cada funcionário responde apenas a um gerente, e este gerente coordena vários
funcionários.
N para N Ocorre uma dependência bilateral, como no caso de produtos e notas fiscais, já que uma nota tem vários
produtos e um produto aparece em várias notas.
Todas as operações efetuadas em um banco relacional, desde a criação de estruturas como
as tabelas, passando pela inserção, alteração e exclusão de dados, até o nível em que
efetuamos consultas nestes conjuntos de dados, de acordo com as operações da Álgebra
Relacional e do Cálculo Relacional, serão efetuadas com o uso da linguagem SQL.
 Fonte: geralt / Pixabay
Linguagem SQL
Para trabalharmos com bancos de dados, é interessante conhecermos ao menos o básico dos comandos do SQL, os quais
podem ser divididos em três áreas:
Veremos essas etapas a seguir:
DDL (Data De�nition Language) DML (Data Manipulate Language)
Seleção ou Consulta
DDL
Os comandos DDL são responsáveis pela criação das estruturas que receberão os dados e manterão os relacionamentos de
forma consistente, tendo como elementos principais as tabelas e índices.
Basicamente utilizamos os comandos CREATE, ALTER e DROP, como no exemplo seguinte, para a criação de uma tabela.
 
CREATE TABLE Curso (
ID_CURSO int NOT NULL Primary Key,
NOME_CURSO varchar(20),
COORDENADOR varchar(40)
);
Neste exemplo nós criamos uma tabela chamada Curso, onde
as colunas são ID, numérico que funciona como chave
primária, NOME_CURSO e COORDENADOR, estas últimas do
tipo texto.
DML
Após a criação das estruturas, podemos utilizar os comandos DML para a inclusão, alteração e exclusão de registros, o que é
efetuado, respectivamente, pelos comandos INSERT, UPDATE e DELETE.
Poderíamos criar um registro na tabela Curso com o comando apresentado a seguir:
 
INSERT INTO Curso (ID_CURSO, NOME_CURSO, COORDENADOR)
VALUES (1, "Engenharia","Alberto")
SELEÇÃO OU CONSULTA
Além dos comandos para manipulação estrutural e gerenciamento de dados, as seleções através do comando SELECT talvez
tenham o papel mais relevante em termos de SQL, o que pode inclusive ser uma boa justi�cativa para o nome Linguagem de
Consulta Estruturada.
Este comando se divide, inicialmente, em duas partes principais, que são a projeção (campos) e a restrição (condições).
Um exemplo de comando de seleção é apresentado a seguir.
O comando SELECT é bastante amplo e aceita elementos para ordenação, agrupamento, combinação, operações de conjunto,
entre diversos outros. Alguns dos operadores especí�cos do SQL são apresentados na tabela seguinte.
Operador Utilização
IN Condiciona à ocorrência do valor do campo em um conjunto de valores
NOT IN Condiciona à inexistência do valor do campo em um conjunto de valores
LIKE O valor do campo deve estar de acordo com um padrão, sendo tipicamente utilizado em situações do tipo
“começado com”
EXISTS Verifica uma condição de existência relacionada ao campo
NOT
EXISTS
Verifica uma condição de inexistência relacionada ao campo
BETWEEN Verifica se o valor se encontra entre dois limites
ALL Retorna o valor caso todos os elementos satisfaçam à condição
ANY Retorna o valor caso algum elemento satisfaça à condição
Na programação Java para banco de dados, efetuada da forma tradicional, os comandos SQL estarão presentes em meio aos
comandos Java, sendo criados no modo texto para que sejam executados pelos componentes corretos.
 
SELECT NOME_CURSO FROM Curso
WHERE COORDENADOR LIKE 'A%'
Neste exemplo é selecionado o nome do curso a partir da
tabela Curso (projeção) apenas para os registros nos quais o
nome do coordenador comece com a letra “A” (restrição).
Comentário
Além destes, podemos utilizar os operadores de comparação tradicionais, como menor que, igualdade e maior que. Também são
permitidas combinações lógicas com o uso de AND, OR e NOT.
É possível agrupar campos com GROUP BY, e utilizar operações de sumarização, como MAX, MIN e COUNT, além da
possibilidade de aplicar restrições aos grupos formados com o uso de HAVING.
Podemos, ainda, ordenar os resultados por quaisquer campos, de forma ascendente ou descendente, com o uso de ORDER BY.
JDBC
Podemos dizer que o JDBC (Java Database Connectivity) é o middleware do Java para acesso a bancos de dados. Ele permite
que utilizemos os mais diversos bancos sem modi�cações no código Java, desde que estes diversos bancos aceitem o uso de
SQL ANSI.
Antes de começar a programar no Java, temos que criar o banco que será utilizado, e para isso utilizaremos a interface do
NetBeans e acesso ao Derby Database .
Vamos veri�car as etapas?
3
Etapa 1
Na guia de Serviços do NetBeans é possível efetuar diversos
controles associados ao tempo de execução, como o
acompanhamento de servidores, acesso a repositórios e
manipulação de bases de dados diversas, entre elas o Derby
(Java DB).
Podemos observar a guia de Serviços com o Java DB
selecionado a seguir.
A criação de um banco de dados novo, neste ambiente, é
bem simples: basta clicar com o botão direito sobre o driver
Java DB
Etapa 2
Abrirá a árvore de Bancos de Dados, e escolha a opção “Criar
Banco de Dados...”.
Com isso, teremos a abertura dajanela apresentada a seguir.
Nesta janela iremos preencher o nome de nosso novo banco
de dados com o valor “LojaEAD”, bem como usuário e senha,
onde sugiro que seja preenchido também com “LojaEAD” para
ambos.
Ao clicar em “OK” será criado o banco e �cará disponível para
conexão, como pode ser observado na �gura seguinte.
http://estacio.webaula.com.br/cursos/gon964/aula7.html
Etapa 3
O banco é identi�cado por sua Connection String, no caso
indicando a própria máquina (localhost) através da porta
padrão (1527) e instância LojaEAD.
O passo seguinte será abrir este banco de dados clicando com
o botão direito e escolhendo a opção “Conectar...”.
Etapa 4
Com o banco aberto poderemos criar uma tabela, navegando
até o esquema LOJAEAD, na divisão Tabelas, e clicando
novamente com o botão direito para selecionar a opção “Criar
Tabela...”, como podemos observar na �gura seguinte.
Na janela que se abrirá iremos con�gurar uma tabela de nome
Produto, com os seguintes campos:
Código (inteiro, chave primária)
Nome (varchar, tamanho 40)
Quantidade (inteiro)
Etapa 5
Para adicionar os campos, deve ser clicado o botão “Adicionar
coluna”, o qual abrirá a tela que podemos observar a seguir.
De�nindo o nome da tabela e adicionando os campos, teremos
a con�guração �nal que pode ser observada a seguir, faltando
apenas clicar em “OK” para �nalizar o processo.
Etapa 6
De�nindo o nome da tabela e adicionando os campos, teremos
a con�guração �nal que pode ser observada a seguir, faltando
apenas clicar em “OK” para �nalizar o processo.
Etapa 7
Com o término do processo, o NetBeans irá executar o
comando CREATE TABLE necessário para a geração da tabela,
que �cará disponível na divisão Tabelas, permitindo que
acionemos a opção “Exibir Dados...” a partir do clique com o
botão direito, como podemos observar na �gura seguinte.
Etapa 8
p
Uma janela de comandos SQL e visualização de dados será
aberta na área do editor de código do NetBeans, onde
poderemos acrescentar registros com o uso Alt+I ou clique
sobre o botão equivalente ( ), o que abrirá a tela para
inserção de dados, como podemos observar a seguir.
Nesta tela podemos preencher os valores para um novo
registro, e se quisermos mais de um, basta clicar em
“Adicionar...”. Após o preenchimento, basta clicar em “OK” e o
NetBeans executará os comandos INSERT necessários.
Aqui �ca a sugestão de incluir três a cinco produtos em nossa tabela para que os testes com
código sejam mais signi�cativos.
Com nossa base con�gurada, podemos começar a codi�car. Os componentes do JDBC estão presentes no pacote java.sql, e o
processo para utilização segue quatro passos simples:
1
Instanciar a classe do driver de conexão
2
Obter uma conexão (Connection) a partir da Connection
String, usuário e senha
3
Instanciar um executor de SQL (Statement);
4
Executar os comandos DML.
Para o comando de seleção, existe mais um detalhe, que seria a recepção da consulta em um cursor. Isso pode ser observado no
exemplo seguinte, no qual, aproveitando a base criada anteriormente, vamos efetuar uma consulta aos dados inseridos.
Nesse código podemos acompanhar os quatro passos citados para a conexão e utilização do banco de dados; e após a recepção
dos dados da consulta no ResultSet, o qual é um cursor, podemos nos movimentar pelos registros, acessando cada campo pelo
nome, sempre lembrando de utilizar o método correto de acordo com o tipo.
Ao efetuar a consulta, o cursor �ca posicionado antes do primeiro registro, na posição BOF (Beginning of File), e com o uso do
comando next podemos mover sempre para os próximos registros, a partir do primeiro, até atingir a posição EOF (End of File).
Na parte �nal devemos fechar os componentes relacionados ao banco na ordem inversa daquela em que foram criados, já que
existe dependência sucessiva entre eles.
Como implementar este exemplo?
 
package testebase;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
public class TesteBase {
 public static void main(String[] args) throws Exception {
 Class.forName("org.apache.derby.jdbc.ClientDriver");
 // passo 1
 Connection c1 = DriverManager.getConnection(
 "jdbc:derby://localhost:1527/LojaEAD",
 "LojaEAD", "LojaEAD");
 // passo 2
 Statement st = c1.createStatement();
 // passo 3
 ResultSet r1 = st.executeQuery("SELECT * FROM PRODUTO");
 // passo 4 e recepção no cursor
 while(r1.next())
 System.out.println("Produto "+r1.getInt("codigo")+": "+
 r1.getString("nome")+"::"+r1.getInt("quantidade"));
 r1.close();
 st.close();
 c1.close();
 }
}
 
while(r1.next())
 System.out.println("Produto "+r1.getInt("codigo")+": "+
 r1.getString("nome")+"::"+r1.getInt("quantidade"));
Etapa 1
Devemos criar um novo projeto do tipo Java..Aplicação Java
no NetBeans, e nomeá-lo como TesteBase, deixando todas as
opções padrão marcadas.
Após digitar o código, devemos adicionar a biblioteca de
acesso ao Derby no projeto, através do clique com o botão
direito na seção Bibliotecas e escolha da opção sobre
“Adicionar Biblioteca...”, selecionando o item Driver do Java
DB e clicando em “Adicionar Biblioteca” na janela que
observamos a seguir.
Etapa 2
Por �m, podemos executar o projeto e observar a saída obtida.
 
Produto 1: Banana::1000
Produto 2: Morango::150
Produto 3: Laranja::400
 Fonte: Pexels / Pixabay
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Padrão DAO
Agora que sabemos efetuar as operações com o banco de dados, seria interessante organizar a forma de programar, pois é fácil
imaginar a di�culdade que seria dar a manutenção em um sistema com dezenas de milhares de linhas de código Java, com
comandos SQL espalhados ao longo destas linhas.
A linguagem Java é orientada a objetos; assim, torna-se mais fácil representar uma
tabela através de uma classe, onde suas instâncias corresponderão aos registros
existentes, como pode ser observado abaixo:
 
package testebase;
public class Produto {
 public int codigo;
 public String nome;
 public int quantidade;
 public Produto(){
 }
public Produto(int codigo, String nome, int quantidade) {
 this.codigo = codigo;
 this.nome = nome;
 this.quantidade = quantidade;
 }
}
Com base na observação de que o SQL espalhado ao longo do código traz grandes di�culdades, foi criado um padrão de
desenvolvimento com o objetivo de concentrar as instruções SQL em um único tipo de classe, agrupando e reutilizando os
diversos comandos relacionados ao banco de dados.
Esse padrão, chamado de Data Access Object (DAO), será utilizado extensivamente no desenvolvimento de nossos sistemas.
Iniciaremos criando uma classe denominada ProdutoDAO, com a operação de seleção global implementada.
Observe que iniciamos criando os métodos getStatement e closeStatement, com o objetivo de gerar executores de SQL e
eliminá-los, efetuando também as conexões e desconexões nos momentos necessários.
Outro método que podemos observar é o getConnection, utilizado apenas para encapsular o processo de conexão com o banco.
O método obterTodos irá retornar todos os registros da tabela Produto no formato de um ArrayList. Inicialmente é executado o
SQL necessário e, para cada registro obtido no cursor, é gerado um novo objeto da classe Produto e adicionado à lista de retorno.
 
package testebase;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
public class ProdutoDAO {
 private Connection getConnection() throws Exception{
 Class.forName("org.apache.derby.jdbc.ClientDriver");
 return DriverManager.getConnection(
 "jdbc:derby://localhost:1527/LojaEAD",
 "LojaEAD", "LojaEAD");
 }
 private Statement getStatement() throws Exception{
 return getConnection().createStatement();
 }
 private void closeStatement(Statement st) throws Exception{
 st.getConnection().close();
 }
 public List<Produto>obterTodos(){
 ArrayList<Produto> lista = new ArrayList<>();
 try {
 ResultSet r1 = getStatement().executeQuery(
 "SELECT * FROM PRODUTO");
 while(r1.next())
 lista.add(new Produto(r1.getInt("codigo"),
 r1.getString("nome"),r1.getInt("quantidade")));
 closeStatement(r1.getStatement());
 }catch(Exception e){
 }
 return lista;
}
Utilizando a classe ProdutoDAO, o código da classe principal será extremamente simpli�cado.
Note que foi possível utilizar o operador funcional forEach, o qual irá navegar por todos os elementos do ArrayList, fornecido a
partir de obterTodos, imprimindo os dados de cada um dos produtos ali encontrados, de uma forma muito mais simples e
organizada.
Agora podemos pensar nas operações de manipulação de dados, com o uso de INSERT, UPDATE e DELETE. Vamos implementar
a inclusão e a exclusão, acrescentando os métodos seguintes na classe ProdutoDAO.
 
ResultSet r1 = getStatement().executeQuery(
 "SELECT * FROM PRODUTO");
while(r1.next())
 lista.add(new Produto(r1.getInt("codigo"),
 r1.getString("nome"),
 r1.getInt("quantidade")));
closeStatement(r1.getStatement());
 
package testebase;
public class TesteBase {
 public static void main(String[] args)
 throws Exception {
 ProdutoDAO dao = new ProdutoDAO();
 dao.obterTodos().forEach((p) -> {
 System.out.println("Produto "+p.codigo+": "+
 p.nome+"::"+p.quantidade);
 });
 }
}
Podemos observar que a deleção utiliza o Statement tradicional, apenas com a diferença de que ao invés de utilizar
executeQuery, como nas seleções de dados, utilizamos o método executeUpdate, por se tratar de um comando DML. Esta forma
de trabalhar foi adotada por se tratar de um SQL simples, formado pela simples concatenação da restrição com o código
fornecido.
Já na inclusão, foi utilizado um elemento do tipo PreparedStatement, que permite a de�nição de parâmetros, facilitando a escrita
sem a preocupação com o uso de apóstrofe ou outro delimitador do SQL, e sendo particularmente útil quando tivermos de
trabalhar com datas.
Para de�nir os parâmetros, utilizamos pontos de interrogação, que assumem valores posicionais, a partir de um, o que é um
pouco diferente da indexação dos vetores, que começa em zero.
Os parâmetros são preenchidos, de acordo com seus tipos, antes da chamada, efetuada com executeUpdate.
 
public void incluir(Produto p){
 try {
 PreparedStatement ps =getConnection().
 prepareStatement(
 "INSERT INTO PRODUTO VALUES(?,?,?)");
 ps.setInt(1, p.codigo);
 ps.setString(2, p.nome);
 ps.setInt(3, p.quantidade);
 ps.executeUpdate();
 closeStatement(ps);
 }catch(Exception e){
 }
}
public void excluir(int codigo){
 try {
 Statement st = getStatement();
 st.executeUpdate("DELETE FROM PRODUTO WHERE CODIGO = "+
 codigo);
 closeStatement(st);
 }catch(Exception e){
 }
}
 
ps.setInt(1, p.codigo);
ps.setString(2, p.nome);
ps.setInt(3, p.quantidade);
Da mesma forma que estas classes foram utilizadas em um programa do tipo console, elas podem ser diretamente aproveitadas
em um projeto Web, bastando copiá-las para o outro projeto.
As bibliotecas de acesso ao Derby não precisam ser adicionadas ao projeto do tipo Web, já que por padrão, são trazidas pelo
servidor GlassFish.
 Vamos observar, a seguir, um código JSP que utiliza nossas classes recém-criadas.
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Inicialmente são importadas as classes necessárias com o uso da diretiva page import.
No trecho HTML foi criado um formulário de cadastro simples, lembrando que a própria página é chamada quando não de�nimos
o action. Este formulário apresenta os campos necessários e um botão de submit com o texto “Adicionar”, que chamará
novamente o JSP, passando como parâmetros os valores digitados no formulário.
No Scriptlet o objeto dao, da classe ProdutoDAO, é instanciado e podemos efetuar as operações com o banco de dados.
A primeira providência é veri�car se houve a passagem de parâmetros, o que é feito testando se o parâmetro código é nulo, mas
poderia ser qualquer um dos três parâmetros. Não sendo nulo, capturamos os valores, instanciamos um Produto e chamamos o
método incluir do dao.
 
<%@page import="testebase.Produto"%>
<%@page import="testebase.ProdutoDAO"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
 <body>
 <form>
 Codigo:<br/>
 <input type="text" name="codigo"/><br/>
 Nome:<br/>
 <input type="text" name="nome"/><br/>
 Quantidade:<br/>
 <input type="text" name="quantidade"/><br/>
 <input type="submit" value="Adicionar"/>
 </form>
 <hr/>
 <ul>
 <%
 ProdutoDAO dao = new ProdutoDAO();
 if(request.getParameter("codigo")!=null){
 Produto p1 = new Produto();
 p1.codigo = new Integer(request.getParameter("codigo"));
 p1.nome = request.getParameter("nome");
 p1.quantidade = new Integer(
 request.getParameter("quantidade"));
 dao.incluir(p1);
 }
 for(Produto p: dao.obterTodos()){
 %>
 <li><%=p.codigo%> - <%=p.nome%> :: <%=p.quantidade%></li>
 <% } %>
 </ul>
 </body>
</html>
 
<%@page import="testebase.Produto"%>
<%@page import="testebase.ProdutoDAO"%>
Em seguida, utilizamos uma estrutura de repetição for para efetuar a navegação entre todos os produtos do banco, os quais são
obtidos com o método obterTodos, formatando os valores na saída HTML.
Podemos observar o resultado �nal na �gura seguinte.
Com o uso do DAO nós conseguimos concentrar os comandos SQL em classes especí�cas, facilitando muito a programação dos
níveis superiores do sistema, além de promover grande reúso, o que �cou evidente no aproveitamento das classes para um
projeto Web sem a necessidade de qualquer modi�cação no seu código.
 
if(request.getParameter("codigo")!=null){
 Produto p1 = new Produto();
 p1.codigo = new Integer(request.getParameter("codigo"));
 p1.nome = request.getParameter("nome");
 p1.quantidade = new Integer(
 request.getParameter("quantidade"));
 dao.incluir(p1);
}
Atividade
1. Dentre as classes Java para acesso a banco de dados, com uso de JDBC, qual delas deve ser utilizada para a execução de
comandos SQL parametrizados?
a) Statement
b) Connection
c) DriverManager
d) ResultSet
e) PreparedStatement
2. Na sintaxe SQL, qual operador deve ser utilizado para veri�car se o valor de um determinado campo está entre dois limites
especi�cados?
a)  IN
b) BETWEEN
c) NOT IN
d) EXISTS
e) JOIN
3. Considerando uma tabela chamada log que guarda o id do usuário, data e hora da ocorrência do erro, no formato “yyyy/mm/dd
hh:mm:ss”, e mensagem do erro, conforme o comando de criação e classe de entidade seguintes, implemente o método de uma
classe LogDAO para efetuar inclusão de registro.
 
CREATE TABLE LOG (
 ID_USUARIO int NOT NULL Primary Key,
 DATA_HORA varchar(20),
 MENSAGEM varchar(200)
);
public class Log {
 public int idUsuario;
 public String dataHora;
 public String mensagem;
 public Log() { }
}
Notas
Bancos de dados1
Os bancos de dados recebem instruções SQL e as executam; estas instruções podem ser enviadas a partir de um programa em
uma linguagem qualquer. Neste caso, a linguagem em questão atuará como front-end e o banco como back-end.
Mnsagerias2
As mensagerias são outro exemplo de back-end, viabilizando a comunicação assíncrona entre sistemas corporativos através do
envio de mensagens. Esta é uma tecnologia crucial para alguns ramos, como a rede bancária.
Inclusive, falando em termos de sistemas corporativos, é comum o uso de LDAP para a guarda de objetos como chaves públicas
relacionadas a certi�cados digitais, segundo uma regra de identi�cação padrão para localização, e este é também um importante
back-end para sistemas corporativos, viabilizando a comunicação com criptogra�as assimétricas, normalmente RSA, entre
empresas distintas.
Existem diversosoutros tipos de back-end; estes são apenas alguns exemplos utilizados em nível comercial.
Derby Database3
Apache Derby é um subprojeto do Apache DB, constituindo um banco de dados relacional implementado totalmente em Java,
disponível sob licença Apache, e que pode ser embutido em programas Java, bem como utilizado para transações online.
Referências
CASSATI, J. P. Programação Servidor em Sistemas Web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, Rich Internet Applications e Desenvolvimento Web Para Programadores. São Paulo: Pearson
Education, 2009.
DEITEL, P; DEITEL, H. Java, como programar. 8.ed. São Paulo: Pearson, 2010.
SANTOS, F. Tecnologias para Internet II. 1.ed. Rio de Janeiro: Estácio, 2017.
Próxima aula
Mapeamento Objeto-Relacional;
Tecnologia JPA;
Componentes do tipo EJB.
Explore mais
Para saber mais sobre os conteúdos estudados nesta aula, não deixe de acessar os materiais indicados abaixo:
Tutorial sobre Sintaxe SQL <https://www.w3schools.com/sql/>
Tutoriais sobre: “Lesson: JDBC Introduction”:
Oracle <https://docs.oracle.com/javase/tutorial/jdbc/overview/index.html>
Java <https://www.baeldung.com/java-dao-pattern>
Tutorial “The DAO Pattern in Java”. <https://www.baeldung.com/java-dao-pattern>
https://www.w3schools.com/sql/
https://docs.oracle.com/javase/tutorial/jdbc/overview/index.html
https://www.baeldung.com/java-dao-pattern
https://www.baeldung.com/java-dao-pattern
Disciplina: Programação Cliente-Servidor
Aula 8: JPA e JEE
Apresentação
O uso de bancos de dados relacionais é a forma mais comum de persistência de dados encontrada nas empresas, mas
existe uma grande distância entre a interpretação relacional e a orientada a objetos. Com a explosão do número de sistemas
orientados a objeto, o mapeamento objeto-relacional se tornou uma prática comum e diversas ferramentas foram criadas
para a automatização deste processo, o qual é efetuado via JPA no ambiente Java da atualidade.
Outro elemento comum nas grandes corporações é a utilização de objetos distribuídos, tirando proveito de toda uma
arquitetura segura e transacional para efetuar diversos processos de negócios, tendo como exemplo deste tipo de
componente, no universo Java, os Enterprise Java Beans.
Objetivos
Explicar o conceito de Mapeamento Objeto-Relacional;
Utilizar a tecnologia JPA;
Descrever a arquitetura de objetos distribuídos do tipo EJB.
(Fonte: fullvector / Freepik).
Mapeamento Objeto-Relacional
Os bancos de dados relacionais são a tecnologia de armazenamento mais consolidada no mercado, mas como pudemos
observar, a forma de tratar as operações sobre o banco, dentro de um ambiente orientado a objetos, envolve a criação de classes
que viabilizem a organização e reúso do código.
Se observarmos bem, as tarefas envolvidas nesta transformação são bastante repetitivas, podendo ser facilmente padronizadas;
é com base nesta premissa que surge a ideia por trás do mapeamento objeto-relacional.
Saiba mais
Também chamado de ORM (do inglês Object-Relational Mapping), a técnica envolve uma reinterpretação dos bancos relacionais,
fazendo com que as tabelas sejam representadas por classes e os registros destas tabelas, por instâncias destas classes.
Também envolve a criação de gestores de transação, que assumem o papel de uma classe DAO, mas que não exige a criação de
comandos SQL, pois estes gestores irão gerar os comandos necessários durante a execução de forma automática, eliminando a
necessidade de utilizar mais de uma linguagem simultaneamente, como ocorria antes.
É claro que deverá ter alguma forma de mapear as tabelas e respectivos campos para as classes e atributos, o que inicialmente
era feito com o uso de XML em frameworks como Hibernate. O uso de XML fornece uma solução bastante dinâmica, mas que
não é tão formal quanto a utilização de anotações, como ocorre nos atuais mapeamentos feitos no ambiente Java.
A plataforma Microsoft traz uma solução muito interessante, denominada LINQ, que
inclusive não necessita deste tipo de mapeamento.
Com o uso da abordagem proporcionada pelo ORM, os sistemas apresentam um código mais conciso e ainda apresentam a
vantagem de possibilitar a modi�cação do servidor de banco de dados com grande facilidade, alterando apenas poucos arquivos
de con�guração, normalmente no formato XML.
Java Persistence API
Um dos maiores avanços do Java foi a de�nição do JPA (Java Persistence API), o qual uni�ca os diversos frameworks de
persistência em uma arquitetura única baseada em código anotado e apenas um arquivo de con�guração, o persistence.xml.
Comentário
Quando nos referimos ao JPA, não estamos tratando apenas de um framework, mas de uma API de persistência, descrevendo
uma interface comum que deve ser seguida pelos diversos frameworks de persistência do ambiente Java, como Hibernate,
Eclipse Link e Oracle Toplink.
Para criar uma entidade no JPA, devemos criar um POJO (Plain Old Java Object), ou seja, uma classe sem métodos de negócios,
mas com atributos de�nidos de forma privada e métodos de acesso públicos, além de um construtor padrão e alguns métodos
utilitários, como hash. Esta classe deve receber anotações que serão responsáveis pelo mapeamento efetuado entre a classe e a
tabela, ou seja, o mapeamento objeto-relacional.
Podemos observar, a seguir, um exemplo simples de entidade JPA:
• • •
@Entity
@Table(name="TB_ALUNO)
public class Aluno implements Serializable{
@Id
@Column(name="PK_MATRICULA")
private String matricula;
@Column(name="TX_NOME")
private String nome;
public Aluno(){ 
}
public Aluno(String matricula){
this.matricula = matricula;
}
// getters e setters públicos
}
As duas primeiras anotações de�nem o POJO como uma entidade e fazem o mapeamento com a tabela que será utilizada para
efetuar a persistência no banco de dados:
• • •
@Entity
@Table(name="TB_ALUNO)
public class Aluno {
A anotação Id de�ne um atributo como chave primária, enquanto Column faz o mapeamento do atributo para o campo correto da
tabela:
• • •
@Id
@Column(name="PK_MATRICULA")
private String matricula;
Com as entidades criadas, devemos de�nir a conexão com o banco de dados, com uso de um driver JDBC, um framework de
persistência e o arquivo persistence.xml. Este arquivo será colocado na pasta META-INF do projeto e será responsável pela
con�guração da conexão, indicando a URL do banco, driver JDBC e framework utilizados, entre diversas outras opções, como
podemos observar no exemplo seguinte:
• • •
A primeira informação relevante que encontramos neste arquivo é o nome da unidade de persistência, juntamente com o tipo de
transação que será utilizada. As transações são de enorme importância para manter o nível de isolamento adequado entre tarefas
executadas de forma concorrente, como no caso de múltiplos usuários acessando o mesmo banco de dados:
• • •
Em seguida temos o framework de persistência que será utilizado; no caso, o Eclipse Link e as classes de entidade que serão
consideradas:
• • •
Por �m, temos as con�gurações relacionadas à conexão JDBC, como URL, driver utilizado, usuário e senha:
• • •
 <?
xml version="1.0" 
encoding="UTF-8"?> 
 
<persistence 
version="2.1" 
 
<persistence-unit 
name="TesteBasePU" 
transaction-
type="RESOURCE_LOC
AL"> 
 
 
<provider>org.eclipse.p
ersistence.jpa.Persiste
nceProvider</provider> 
 
<class>modelo.Produt
o</class> 
 
<properties> 
 
 
</persistence>
 
<persistence-unit 
 
<provider>org.eclipse.p
ersistence jpa Persiste
Outro elemento importante, no ambiente do JPA, é o EntityManager, responsável por efetuar as operações de persistência no
banco de dados, bem como a seleção a partir do mesmo. Note que o JPA não eliminao uso de JDBC, pois o que é feito é a
geração dos comandos SQL de forma automatizada a partir das requisições efetuadas pelo EntityManager, sempre utilizando as
informações transmitidas pelas classes anotadas.
Para gerar um objeto da classe EntityManager, precisamos de um EntityManagerFactory, o qual estará relacionado diretamente
ao arquivo persistence.xml através da de�nição da unidade de persistência.
• • •
EntityManagerFactory emf =
Persistence.createEntityManagerFactory("TesteBasePU");
EntityManager em = emf.createEntityManager();
O uso do NetBeans facilita muito a criação das entidades JPA, efetuando uma inferência sobre o esquema existente no banco de
dados com suas tabelas. Para utilizar esta funcionalidade, nós devemos adicionar Novo Arquivo, a partir do menu, e seguir os
seguintes passos:
 
<property 
name="javax.persisten
ce.jdbc.url" 
value="jdbc:derby://loc
alhost:1527/LojaEAD"/
> 
 
<property
1. Escolher o tipo Persistência..Classes de Entidade do Banco de Dados e clicar em “Próximo”.
2. Escolher a conexão JDBC com o banco que será utilizada, no caso LojaEAD.
3. A listagem das tabelas será recuperada a partir do banco; devemos escolher com quais delas iremos
trabalhar. No caso, clicamos em “Adicionar Tudo” e “Próximo”.
4. Na última janela de�nimos o pacote onde serão geradas as entidades JPA (modelo) e deixamos selecionada
apenas a opção Criar Unidade de Persistência, clicando em seguida em “Finalizar”.
Como o banco conta com apenas uma tabela, ela será a única entidade gerada, mas poderíamos recuperar diversas tabelas e
relacionamentos de uma só vez por este processo de criação fornecido pelo NetBeans.
Podemos observar a entidade gerada a seguir:
• • •
@Entity
@Table(name = "PRODUTO")
@NamedQueries({
@NamedQuery(name = "Produto.�ndAll", query = "SELECT p FROM Produto p")})
public class Produto implements Serializable {
private static �nal long serialVersionUID = 1L;
@Id
@Basic(optional = false)
@Column(name = "CODIGO")
private Integer codigo;
@Column(name = "NOME")
private String nome;
@Column(name = "QUANTIDADE")
private Integer quantidade;
public Produto() { }
public Produto(Integer codigo) {
this.codigo = codigo;
}
public Integer getCodigo(){return codigo;}
public void setCodigo(Integer codigo){this.codigo=codigo;}
public String getNome(){return nome; }
public void setNome(String nome){this.nome=nome;}
public Integer getQuantidade(){return quantidade;}
public void setQuantidade(Integer quantidade) {this.quantidade=quantidade;}
@Override
public int hashCode() {
return (codigo != null ? codigo.hashCode() : 0);
}
@Override
public boolean equals(Object other) {
return ((other==null) || !(other instanceof Produto))?false: ((this.codigo==null)||((Produto)other).codigo==null)
?false:this.codigo.equals(((Produto)other).codigo);
}
@Override
public String toString() {
return "modelo.Produto[ codigo=" + codigo + " ]";
}
Foram utilizadas algumas anotações novas nesta entidade, a começar por NamedQuery, que de�ne uma instrução de consulta na
sintaxe JPQL, neste caso retornando todos os produtos a partir do banco de dados.
• • •
@NamedQueries({
@NamedQuery(name = "Produto.�ndAll", query = "SELECT p FROM Produto p")})
Também temos a obrigatoriedade do campo chave com o uso de uma das opções de Basic.
• • •
@Id
@Basic(optional = false)
@Column(name = "CODIGO")
private Integer codigo;
O arquivo de con�guração persistence.xml também foi adicionado ao projeto; o próximo passo é a alteração de nossa classe
DAO para utilizar o EntityManager, como podemos observar no código seguinte. As importações não foram transcritas, pois são
adicionadas de forma automática pelo NetBeans.
• • •
public class ProdutoDAO implements Serializable {
public ProdutoDAO() {
emf = Persistence.createEntityManagerFactory("TesteBasePU");
}
private �nal EntityManagerFactory emf;
public EntityManager getEntityManager() {
return emf.createEntityManager();
}
public void incluir(Produto produto) {
EntityManager em = getEntityManager();
try {
em.getTransaction().begin();
em.persist(produto);
em.getTransaction().commit();
} �nally {
em.close();
}
}
public void excluir(Integer codigo) {
EntityManager em = getEntityManager();
try {
em.getTransaction().begin();
Produto produto = em.�nd(Produto.class, codigo);
em.remove(produto);
em.getTransaction().commit();
} �nally {
em.close();
}
}
public List obterTodos() {
EntityManager em = getEntityManager();
try {
CriteriaQuery cq =
em.getCriteriaBuilder().createQuery();
cq.select(cq.from(Produto.class));
Query q = em.createQuery(cq);
return q.getResultList();
} �nally {
em.close();
}
}
}
É fácil notarmos como o código �ca muito mais simples com o uso do EntityManager, o qual é obtido a partir do
EntityManagerFactory, instanciado no construtor da classe DAO.
• • •
public EntityManager getEntityManager() {
return emf.createEntityManager();
}
Com este método utilitário em mãos, podemos efetuar as diversas operações de banco, como a inclusão, que utilizará o método
persist dentro de uma transação JPA. Quando este método é executado, o JPA faz uma inferência sobre a classe da entidade
(Produto), descobrindo o nome da tabela e dos campos, pega os valores do objeto corrente e monta o SQL com o comando
INSERT necessário para ser enviado ao banco via JDBC.
• • •
em.getTransaction().begin();
em.persist(produto);
em.getTransaction().commit();
O procedimento para exclusão segue um caminho similar, exigindo apenas a busca da entidade no banco para que a mesma
possa ser excluída. O método �nd efetua a busca a partir do valor da chave primária, retornando o produto em questão, já
associado ao banco; e o método remove permite excluir o produto encontrado.
• • •
em.getTransaction().begin();
Produto produto = em.�nd(Produto.class, codigo);
em.remove(produto);
em.getTransaction().commit();
O uso do comando FIND implica no envio de um comando SELECT ao banco, enquanto REMOVE enviará um comando DELETE,
mas nem sempre o comando de seleção precisa ser executado, já que o JPA trabalha com um pool de entidades, atualizado de
acordo com o nível de acesso, e se a entidade já se encontra no pool, ela é utilizada diretamente.
Finalmente, podemos observar o método para carregar o conjunto de entidades a partir da tabela, o que é feito com a
transformação de um comando JPQL para o equivalente SQL que deverá ser enviado ao banco via JDBC.
• • •
CriteriaQuery cq = em.getCriteriaBuilder().createQuery();
cq.select(cq.from(Produto.class));
Query q = em.createQuery(cq);
return q.getResultList();
Neste caso foi utilizado um objeto do tipo CriteriaQuery para a montagem do comando JPQL, mas poderíamos utilizar uma
NameQuery, bastando alterar esse trecho de código para as linhas apresentadas a seguir. Neste segundo formato, seria utilizada
a NamedQuery de�nida na classe Produto a partir das anotações relacionadas.
• • •
Query q = em.createNamedQuery("Produto.�ndAll");
return q.getResultList();
Agora é só utilizar o DAO normalmente, como fazíamos antes, como no exemplo seguinte.
• • •
public class TesteBase2 {
public static void main(String[] args) {
ProdutoDAO dao = new ProdutoDAO();
dao.obterTodos().forEach((p) -> {
System.out.println(p.getCodigo()+" - "+p.getNome()+
" :: "+p.getQuantidade());
});
}
}
A saída da execução deste arquivo é apresentada a seguir. Podemos observar algumas linhas com a assinatura “EL Info”,
referente ao uso do Eclipse Link como framework de persistência.
• • •
[EL Info]: 2019-01-05 
12:15:18.758--ServerSession(1821228886)--EclipseLink, 
version: Eclipse Persistence Services - 2.5.2.v20140319-9ad6abd
[EL Info]: connection: 2019-01-05 
12:15:19.656--ServerSession(1821228886)--�le:/C:/MeusTestes/TesteBase/build/classes/_TesteBasePU 
login successful
1 - Banana :: 1000
2 - Morango :: 150
3 - Laranja :: 400
4 - Manga :: 350
[EL Info]: connection: 2019-01-05 
12:15:20.019--ServerSession(1821228886)--�le:/C:/MeusTestes/TesteBase/build/classes/_TesteBasePUlogout successful
Algo que devemos ressaltar aqui é que as anotações utilizadas para con�gurar o mapeamento da entidade não são serializáveis, o
que faz com que seja mantido o isolamento do acesso ao banco de dados em arquiteturas com múltiplas camadas.
Com o JPA nós devemos utilizar uma linguagem de consulta própria, denominada JPQL (Java Persistence Query Language), a
qual acaba sendo bastante semelhante ao SQL, mas trata com objetos e coleções, ao invés de conjuntos de tuplas.
Uma Query utiliza a sintaxe JPQL, podendo receber parâmetros, como podemos observar no exemplo seguinte, com a construção
de um método que pode ser adicionado a ProdutoDAO.
• • •
public List obterNome(String nome){
EntityManager em = getEntityManager();
try {
Query q = em.createQuery(
"Select p from Produto p where p.nome like ?1");
q.setParameter(1, "%"+nome+"%");
return q.getResultList();
} �nally {
em.close();
}
}
O parâmetro é de�nido com o uso de ?1 e seu valor é con�gurado com setParameter.
• • •
Query q = em.createQuery("Select p from Produto p where p.nome like ?1");
q.setParameter(1, "%"+nome+"%");
Enterprise Java Beans
Um Enterprise Java Bean (EJB) é um componente corporativo utilizado de forma indireta, dentro de um ambiente de objetos
distribuídos, suportando transações locais e distribuídas, elementos de autenticação e segurança, acesso a banco de dados via
pool de conexões, entre diversos outros elementos da plataforma Java Enterprise Edition (JEE).
Inicialmente, todo componente EJB existe dentro de um pool de objetos do mesmo tipo, e o número de instâncias presentes irá
aumentar ou diminuir de acordo com a quantidade de solicitações de serviços efetuadas em paralelo a cada intervalo
determinado.
O acesso aos serviços oferecidos por este pool deve ser solicitado a partir de uma interface local ou remota, e estas interfaces
são geradas a partir de “fábricas” registradas através do JNDI, sendo chamadas de Home, para interfaces remotas, e LocalHome
para interfaces locais.
A programação em si, considerando o modelo adotado a partir do JEE5, é bastante simples, e precisaremos apenas das
anotações corretas para que os Application Servers, como o JBoss ou o GlassFish, se encarreguem de montar toda a estrutura
necessária. Isto é bem diferente do processo de criação adotado pelo J2EE, o qual utilizava um modelo de programação baseado
em contrato, envolvendo diversas classes, interfaces e arquivos XML.
O primeiro tipo de EJB a ser considerado é o de sessão, responsável por efetuar processos de negócios de forma síncrona. Ele
pode assumir três comportamentos diferentes:
Clique nos botões para ver as informações.
Quando não guarda valores entre chamadas sucessivas. Utilizamos Stateless quando não precisamos de nenhuma
informação de processos anteriores ao corrente. Qualquer instância do pool de EJBs pode ser escolhida, e não há
necessidade de carga de dados anteriores, o que faz com que este seja o comportamento mais ágil para um Session Bean.
Stateless 
Quando, ao contrário do anterior, guarda valores entre chamadas sucessivas. Já o Sateful deve ser utilizado quando
precisamos de informações anteriores, como em uma cesta de compras virtual, ou processos com acumuladores de valores
em cálculos estatísticos, entre diversas outras situações.
Sateful 
Quando utiliza apenas uma instância por JVM. Quanto ao Singleton, ele é utilizado quando queremos compartilhar dados
entre todos os usuários conectados ao aplicativo, mesmo que utilizando múltiplas JVMs, nos ambientes distribuídos. Temos
que lembrar sempre que esta é uma tecnologia corporativa e que a execução de forma clusterizada não é uma exceção em
sistemas de missão crítica.
Singleton 
1
Para trabalhar com EJBs no NetBeans devemos utilizar a opção de projeto corporativo, de acordo com os seguintes passos:
http://estacio.webaula.com.br/cursos/gon964/aula8.html
1. No menu principal do NetBeans escolha a opção Arquivo..Novo Projeto, ou Ctrl+Shift+N
2. Na janela que se abrirá escolha o tipo de projeto como Java EE..Aplicação Enterprise e clique em Próximo
3. Dê um nome para o projeto (EJBTeste001) e diretório para armazenar seus arquivos (C:\MeusTestes), e
clique em Próximo
4. Escolha o servidor (GlassFish) e versão do JEE (Java EE7) e clique em Finalizar.
Atenção
Deixe marcadas as opções “Criar Módulo EJB” e “Criar Módulo de Aplicação Web”.
Ao �nal destes passos teremos três projetos:
Clique nos botões para ver as informações.
Utilizado para a codi�cação das entidades JPA e dos EJBs, sendo compilado com a extensão “jar”.
EJBTeste001-ejb 
Compreendendo os elementos Web, como Servlets e JSPs, sendo compilado com a extensão “war”.
EJBTeste001-war 
O qual agrupa os dois anteriores, compactando em um arquivo único para deploy, utilizando a extensão “ear”.
EJBTeste001 
Quando trabalhamos com um projeto corporativo, devemos sempre implantar o projeto principal, com a extensão ear (Enterprise
Archived), cujo ícone é um triângulo, pois qualquer tentativa de implantar os dois projetos secundários irá impedir a implantação
correta do conjunto, exigindo que seja feita a remoção manual dos projetos implantados anteriormente pela aba de Serviços.
LEGENDA
Agora que temos um projeto corporativo, podemos criar nosso primeiro Session Bean, que será do tipo Stateless. Ele será criado
no projeto secundário EJBTeste001-ejb, adicionando novo arquivo e observando os seguintes passos:
1. Selecionar o tipo de componente Enterprise JavaBeans..Bean de Sessão, e clicar em Próximo.
2. De�nir o nome (Calculadora) e pacote (ejbs) do novo Session Bean, esolher o tipo como Sem Estado
(Stateless) e marcar apenas a interface Local. Clicando em Finalizar o código do EJB será gerado.
Devemos alterar a interface local para o Session Bean, de forma a expressar os métodos que serão expostos para o usuário. No
caso, vamos apenas de�nir os métodos somar e subtrair.
• • •
package ejbs;
import javax.ejb.Local;
@Local
public interface CalculadoraLocal {
int somar(int a, int b);
int subtrair(int a, int b);
}
Importante observar a anotação @Local, do tipo javax.ejb.Local, imediatamente antes da de�nição da interface, pois é isso que a
de�ne como um acesso aos serviços do EJB de forma local. Se fosse uma interface remota, a anotação seria @Remote.
Após a de�nição dos métodos na interface, devemos implementá-los no EJB, como podemos observar a seguir.
• • •
package ejbs;
import javax.ejb.Stateless;
@Stateless
public class Calculadora implements CalculadoraLocal {
@Override
public int somar(int a, int b) {
return a + b;
}
@Override
public int subtrair(int a, int b) {
return a - b;
}
}
Podemos notar a presença da anotação @Stateless na de�nição da classe, e é justamente esta anotação que faz com que o
Application Server utilize Calculadora como um Session Bean do tipo Stateless.
Para testar nosso novo EJB, podemos utilizar um Servlet no projeto EJBTeste001-war, sendo o caminho mais simples para a
utilização deste tipo de componente. Vamos adicionar um Servlet ao projeto, com o nome ServCalc e pacote servlets, e modi�car
seu código para o que é apresentado a seguir.
• • •
package servlets;
import ejbs.CalculadoraLocal;
import java.io.IOException;
import java.io.PrintWriter;
import javax.ejb.EJB;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name = "ServCalc", urlPatterns = {"/ServCalc"})
public class ServCalc extends HttpServlet {
@EJB
CalculadoraLocal calculadora;
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); try (PrintWriter out =
response.getWriter()) {
int a = new Integer(request.getParameter("A"));
int b = new Integer(request.getParameter("B"));
}
}
}
Para efetuar a ligação com o pool de EJBsatravés da interface local, basta utilizar a anotação @EJB e de�nir um atributo para a
recepção da interface.
• • •
@EJB
CalculadoraLocal calculadora;
Depois é só utilizar os métodos como se fossem chamadas comuns. Na verdade, a cada chamada é executada uma solicitação
ao pool de objetos para que um deles efetue a operação solicitada e retorne o resultado.
• • •
out.println("Soma: "+calculadora.somar(a, b));
out.println("Subtração: "+calculadora.subtrair(a, b));
Finalmente, devemos chamar o Servlet, o que pode ser feito com uma pequena modi�cação na página index, como pode ser
observado a seguir.
out.println("
<!DOCTYPE 
html>"); 
 
out.println("<html>
<body>"); 
• • •
<html>
<body>
<form action="ServCalc" method="post">
<input type="text" name="A"/>
<input type="text" name="B"/>
<input type="submit" value="Enviar"/>
</form>
</body>
</html>
Para testar todos estes diversos passos, devemos selecionar o projeto principal (EJBTeste001), identi�cado pelo ícone do
triângulo, e mandar executar, sendo apresentada a janela de index, como podemos observar a seguir.
Preenchendo os valores e clicando em Enviar, teremos o resultado das operações efetuadas por intermédio do EJB denominado
Calculadora.
Existe outro tipo de EJB denominado Message Driven Bean (MDB), que tem como �nalidade a recepção de dados a partir de
mensagerias através do middleware JMS, trazendo a possibilidade de processamento assíncrono ao ambiente JEE.
As mensagerias são canais de comunicação seguros e robustos para envio de mensagens, podendo apresentar dois tipos de
comportamento:
Clique nos botões para ver as informações.
Onde são criados tópicos para que vários usuários possam enviar mensagens e todos os assinantes do tópico possam
recebê-las.
Publish/Subscribe 
Onde é criada uma �la para a recepção das mensagens, enviadas por diversos usuários, sendo recebidas por apenas um
componente de processamento.
Message Queue 
Com o uso de mensagerias, o cliente pode enviar a mensagem mesmo que o servidor não esteja ativo no momento, pois as
mensagens �cam guardadas na mensageria até que seja processada pelo servidor. Além disso, após a mensagem ser enviada
para a mensageria, o cliente continua normalmente seu processamento, sem esperar a resposta do servidor, o qual tratará
sequencialmente as mensagens recebidas, de�nindo um comportamento assíncrono.
Este é um modelo muito importante para a rede bancária, onde as transações como DOC e TED são enviadas de um banco para
outro através de mensagerias, e o cliente recebe um comprovante da solicitação da transação, mas não tem que esperar pela
compensação que poderá ocorrer alguns minutos ou horas depois.
Existem diversos fornecedores de mensagerias no mercado, como JBoss MQ, IBM MQ Series, Microsoft MQ e Open MQ. Para
acessar todas elas de uma forma unívoca, utilizaremos o middleware Java Message Service (JMS).
Com a con�guração da conexão com a �la ou tópico, através de JMS, o componente MDB estará apto a tratar as mensagens que
chegam através de seu único método (onMessage), como podemos observar no exemplo seguinte.
• • •
@JMSDestinationDe�nition(name = "java:app/jms/Fila00001",
interfaceName = "javax.jms.Queue", resourceAdapter = "jmsra", 
destinationName = "Fila00001")
@MessageDriven(activationCon�g = {
@ActivationCon�gProperty(propertyName = "destinationLookup", 
propertyValue = "java:app/jms/Fila00001"),
@ActivationCon�gProperty(propertyName = "destinationType",
propertyValue = "javax.jms.Queue")
})
public class Mensageiro001 implements MessageListener {
public Mensageiro001() {}
@Override
public void onMessage(Message message) {
try {
System.out.println(((TextMessage)message).getText());
} catch (JMSException ex) {}
}
}
Algo importante acerca do MDB é que ele foi projetado exclusivamente para receber mensagens a partir de �las ou tópicos, e não
pode ser acionado diretamente, como os EJBs do tipo Session Bean.
Comentário
No J2EE existia um EJB para persistência denominado EntityBean, que seguia o padrão Active Record, mas este se mostrou
inferior, em termos de e�ciência, a alguns frameworks de persistência, sendo substituído pelo JPA no JEE5.
Atividade
1. Em termos de programação para banco de dados, em linguagens orientadas a objetos, é bastante aconselhável efetuar uma
transformação dos registros para instâncias de classes de entidade. Este processo �cou conhecido como:
a) ORM
b) POO
c) RUP
d) AUML
e) SQL
2. No uso de JPA, qual classe �ca responsável por inserir os dados da entidade no banco de dados, através do método persist?
a) EntityManagerFactory
b) Query
c) CriteriaQuery
d) NamedQuery
e) EntityManager
3. Existem diversos tipos de EJBs, mas um deles é voltado exclusivamente para o tratamento de mensagens recebidas a partir de
mensagerias. Qual é este tipo de EJB?
a) Stateless Session Bean
b) Message Driven Bean
c) Stateful Session Bean
d) Singleton Bean
e) Entity Bean
Notas
Cluster 1
Cluster é um conjunto de computadores funcionando em conjunto, como se fosse apenas um, o que traz grande poder de
processamento e menor possibilidade de interrupções, já que a falha de um causará a redistribuição das tarefas para os demais.
Referências
CASSATI, J. P. Programação servidor em sistemas web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Java, como programar. 8.ed. São Paulo: Pearson, 2010.
MONSON-HAEFEL, R; BURKE, B. Enterprise java beans 3.0. 5.ed. São Paulo: Pearson, 2007.
SANTOS F T l i i II 1 d Ri d J i E á i 2017
SANTOS, F. Tecnologias para internet II. 1.ed. Rio de Janeiro: Estácio, 2017.
Próximos passos
Padrão Arquitetural;
Arquitetura MVC com Front Control;
JPA e JEE para criação de sistemas MVC para Web.
Explore mais
“Ultimate Guide to JPQL Queries with JPA and Hibernate” <https://thoughts-on-java.org/jpql/>
“JPA Tutorial” <https://www.tutorialspoint.com/jpa>
“The Java EE 6 Tutorial” <https://docs.oracle.com/javaee/6/tutorial/doc/gijsz.html>
“Sun Java System Message Queue 4.3 Technical Overview” <https://docs.oracle.com/cd/E19316-01/820-
6424/aeraq/index.html>
https://thoughts-on-java.org/jpql/
https://www.tutorialspoint.com/jpa
https://docs.oracle.com/javaee/6/tutorial/doc/gijsz.html
https://docs.oracle.com/cd/E19316-01/820-6424/aeraq/index.html
Disciplina: Programação Cliente-Servidor
Aula 9: Arquitetura MVC
Apresentação
Quando começamos a criar um sistema, devemos pensar em sua arquitetura, ou seja, na forma como os componentes
serão organizados e como poderão se comunicar na resolução de problemas. Existem diversos padrões arquiteturais para a
resolução de problemas recorrentes, bem como para implementar funcionalidades necessárias de sistemas operacionais e
ambientes corporativos, como Broker e Pipes/Filters.
Entre esses diversos padrões, a arquitetura MVC acabou se destacando no mercado de softwares cadastrais,
particularmente na Web; com a adoção de alguns padrões de desenvolvimento, como Front Control e DAO, foi possível de�nir
diversas ferramentas para aumentar a produtividade destes ambientes. Em termos do ambiente Java para Web, uma
arquitetura MVC será facilmente organizada com o uso de JPA, EJB e componentes de interface Web.
Objetivos
Explicar o conceito de Padrão Arquitetural;
Descrever a arquitetura MVC com Front Control;
Aplicar JPA e EJB na criação de sistemas MVC para Web.
Padrão Arquitetural
Enquanto a programação orientada a objetos visa ao reúso de código, os padrões de desenvolvimento objetivam o reúso do
conhecimento, trazendo modelos padronizados de soluções para problemas já conhecidos no mercado.
Utilizando soluções exaustivamente testadas no mercado, temos uma visão mais estratégica do modelo do sistema, facilitando a
manutenção do código e evitando problemas já conhecidos devido a experiências anteriores de desenvolvimento.
Um exemplo simples é o padrão DAO, referente à concentração das operações de acesso a banco de dados, que evita a
multiplicação de comandos SQL ao longo de todo o código; ou o padrãoAbstract Facade, que de�ne um modelo abstrato de
fábrica e componente, permitindo a especialização deste modelo para a aplicação de regras de negócio especí�cas, como ocorre
na criação de EJBs.
Embora os padrões já solucionem boa parte dos problemas internos do
desenvolvimento de um sistema, devemos observar também que um software pode ter
uma estratégia arquitetural que satisfaça a determinados domínios, e daí surge a ideia
por trás dos padrões arquiteturais.
Tomando como exemplo os sistemas com processamento em lote de informações, podemos utilizar uma arquitetura do tipo
Pipes/Filters, na qual um programa ou componente fornece uma saída que servirá de entrada para outro comando ou
componente em uma sequência de processamento, como ocorre em diversos comandos do UNIX.
Saiba mais
Uma arquitetura muito comum no mercado corporativo é a de Broker, utilizada para objetos distribuídos, como CORBA e EJB, e
que de�ne a presença de stubs e skeletons, descritores de serviço, protocolo de comunicação, entre outros elementos, para
viabilizar a distribuição do processamento.
O uso de um padrão arquitetural sugere a utilização de diversos padrões de desenvolvimento associados a ele, como o Proxy e
Fly Weight, utilizados respectivamente na comunicação e gestão de pool de objetos dentro de uma arquitetura Broker.
Toda esta padronização traz enormes ganhos, pois surgem no mercado diversos produtos que generalizam a parte comum
destas soluções e nos permitem especializar para aplicação de nossas próprias regras de negócio, como no caso dos
frameworks de persistência.
Esta não é uma ideia nova, já vem sendo utilizada há muito tempo na engenharia com o surgimento do conceito de COTS
(Commercial Off-The-Shelf), tratando de componentes comerciais competitivos e fáceis de integrar, mesmo pertencendo a
diferentes fornecedores, o que aumenta a produtividade e diminui a possibilidade de ocorrência de falhas em um sistema
qualquer.
Embora os primeiros COTS tratassem de elementos físicos, ou seja, hardware, hoje em dia temos muitos exemplos na área de
software, como Hibernate, Spring, Prime Faces e Rich Faces, apenas considerando parte do universo Java.
O padrão arquitetural Event-Driven, muito importante no mundo corporativo, é baseado em eventos, o que quer dizer que são
sequenciados diversos pedidos para serem atendidos de forma assíncrona, e o MOM é um típico exemplo deste tipo de
arquitetura, pois as solicitações são enviadas para �las de mensagens com a �nalidade de serem processadas posteriormente,
sem bloquear o cliente.
Existem diversos outros padrões arquiteturais classi�cados conforme a tabela seguinte. Esta classi�cação foi de�nida por Frank
Buschmann, e não é a única existente, mas talvez seja a mais abrangente:
Modelo Estilo Arquitetural
Sistemas Distribuídos Broker
Mud to Structure Camadas
Pipes/Filters
Blackboard
Sistemas Interativos MVC
PAC
Sistemas Adaptáveis Microkernel
Reflexiva
Arquitetura MVC
Entre os diversos padrões arquiteturais existentes, o Model-View-Control, ou MVC, acabou dominando o mercado de
desenvolvimento no que se refere às aplicações cadastrais. Ele promove a divisão do sistema em três camadas: persistência de
dados (Model), interação com o usuário (View) e processos de negócios (Control).
Na primeira versão do MVC, a camada Model era constituída de entidades, as quais gravavam seus próprios estados no banco,
segundo o padrão de desenvolvimento Active Record. Este modelo, inclusive, foi adotado pelos Entity Beans do J2EE, e
acabaram se mostrando muito ine�cientes, razão pela qual foram substituídos pelo JPA.
Ainda neste primeiro modelo, os dados eram transitados segundo o padrão de desenvolvimento Value Object (VO), que consistia
basicamente dos dados das entidades, mas sem os métodos de persistência, de forma a impedir a manipulação de dados do
banco pela View.
Já na segunda versão do MVC, a camada Model sofreu mudanças, e as entidades passaram a deter apenas os atributos
referentes aos campos da tabela, como era feito anteriormente com o uso de VO, enquanto a persistência foi delegada para
classes que seguem o padrão DAO.
Comentário
Com isso, as entidades passaram a ser transitadas entre as camadas, e agora apenas o DAO �ca impedido de ser acessado pela
camada View, o que impossibilita a manipulação direta dos dados a partir da interface visual.
Como as anotações não são serializáveis, ao enviarmos uma entidade JPA de uma camada para outra, apenas os dados serão
transitados, �cando as anotações com a funcionalidade do DAO, o que permite classi�car o padrão arquitetural atual como da
segunda versão.
Acima da camada Model encontraremos a camada Control, onde serão implementadas as diversas regras de negócio de nosso
sistema de forma completamente independente de qualquer interface visual que venha a ser criada.
A camada Control funcionará como intermediária entre as camadas View e Model e deverá ser criada de forma que possa ser
utilizada por qualquer tecnologia para a criação de interfaces sem a necessidade de mudanças no código, o que signi�ca dizer
que a interface se adequa ao controle, mas nunca o contrário.
Finalmente, temos a camada View, onde é criada a interface com o usuário, ou com outros sistemas, o que costuma ocorrer em
integrações de ambientes corporativos.
Nesta última camada podemos utilizar as mais diversas tecnologias para a criação de interfaces, desde o uso direto de Servlets e
JSPs até a adoção de frameworks como o Prime Faces. Podemos observar, na �gura seguinte, uma concepção simples do MVC:
Podemos perceber que:
1. 1
Na �gura temos a camada Model com as classes de entidade e DAO, além do uso de JDBC para acesso à base
de dados, seja de forma direta, ou via JPA;
2. 2
Logo acima temos a camada de controle com as regras de negócio. Nesta camada podemos utilizar os EJBs,
segundo o padrão Session Facade, para implementar as regras de negócio e controlar o acesso à camada Model;
3. 3
Finalmente, na última camada, vemos algumas tecnologias que podem ser utilizadas para a criação de interfaces
dentro do universo Java, como Servlet, JSP, JSF e GUI do tipo awt ou swing.
As classes mais relevantes do padrão arquitetural MVC são melhor representadas através de artefatos especí�cos, com uma
simbologia já popularizada no mercado para elementos de interface, controle e modelo.
Podemos observar a simbologia utilizada na tabela seguinte:
Símbolo/Camada Características
View
- Indica uma classe limítrofe (boundary);
- Exibe as informações do modelo fornecidas a partir do controle;
- Envia as solicitações ao controle.
Control
- Utilizado para indicar uma classe de controle;
- Define o comportamento do sistema;
- Mapeia as opções disponíveis para consultas e alterações.
Model
- Utilizado para caracterizar uma entidade;
- Encapsula o estado do sistema;
- Associado a um DAO ou anotações de mapeamento.
Padrão Front Control
O principal problema no controle de interfaces de usuário é a disseminação de código com o objetivo de controlar entradas e
saídas ao longo do sistema.
O padrão Front Control foi criado com o objetivo de concentrar as chamadas efetuadas pela interface e direcioná-las para os
controladores corretos, além de direcionar a saída para a visualização correta ao término do processo. Embora o nome possa nos
enganar, este padrão não pertence à camada Control, mas sim à camada View, pois não tem nenhuma relação com as regras de
negócios, tendo como função primordial o simples controle de navegação do sistema.
Um exemplo de implementação deste padrão pode ser observado na �gura seguinte:
Saiba mais
Dentro da arquitetura Java Web, e seguindo o padrão MVC, a implementação de um Front Control é feita através de um Servlet, o
qual deverá receber as chamadas HTTP e, de acordo com os parâmetros fornecidos, efetuar as chamadas corretas aos
elementos da camada Control, normalmente componentes EJB, recebendo em seguida as respostas destes processamentos e
direcionando o resultado obtido para algum elemento, como um JSP,na camada View, para que o mesmo construa a resposta
HTML ou XML.
Modelagem para Web
Uma metodologia de modelagem muito interessante para os sistemas Web é a adoção de Redes de Petri . Esta é uma técnica
que surgiu na área de engenharia para a modelagem de processos paralelos em máquinas físicas, sendo adotada posteriormente
na área de programação.
1
Comentário
http://estacio.webaula.com.br/cursos/gon964/aula9.html
 Rede de Petri criada com o software PETRILab, disponível para download aqui <https://sourceforge.net/projects/petrilab/> .
Podemos considerar este tipo de estrutura como um grafo, onde existem dois tipos de nós: os estados (ou lugares) e as
transições (ou eventos). A mudança de estado sempre ocorrerá devido à ocorrência de uma transição.
Como estamos criando a interface com o usuário através de páginas JSP, podemos considerar estas páginas como os possíveis
estados que nosso sistema pode assumir.
As transições sempre serão efetuadas através de chamadas HTTP, ocorrendo a mudança da página JSP visualizada, ou seja, do
estado do sistema, através da resposta HTTP. Podemos observar um exemplo de Rede de Petri para um sistema cadastral
simples, focando a tecnologia Java Web, na �gura seguinte:
Neste exemplo podemos observar, em cada transição, um parâmetro obrigatório que recebe o nome de ação, assumindo valores
como “listar”, “alterar” e “incluir”; e este parâmetro de�nirá qual o processamento a ser efetuado quando a chamada HTTP for
recebida por um Servlet no padrão Front Control.
Toda e qualquer transição deverá passar por este Servlet, de forma a recuperar os parâmetros fornecidos na requisição, efetuar as
chamadas corretas aos componentes EJBs, receber os dados processados e encaminhá-los para a página JSP correta.
Ainda analisando o diagrama, podemos observar que os estados representam as páginas do sistema, como “index.html” e
“ListaProd.jsp”, sendo que o index começa com valor 1 e os demais estados com valor 0. Essa numeração indica que o index é o
estado que começa ativo, e a cada transição o estado de origem assume valor 0 e o novo estado passa a valer 1, de forma similar
à representação binária para “ligado” e “desligado”.
Todas as transições podem ser modeladas em termos de diagramas de sequência, como podemos observar para a ação “listar”:
https://sourceforge.net/projects/petrilab/
 Diagrama criado com Enterprise Architect. A versão de teste pode ser obtida aqui <https://sparxsystems.com/products/ea/trial-help.html> .
Comentário
A grande vantagem do uso das Redes de Petri para modelagem Java Web é esta visão global simpli�cada do sistema, que traz
uma relação direta com os processos, viabilizando a modelagem funcional de uma forma bastante intuitiva.
Exemplo Prático
Com os recursos do NetBeans, será muito fácil criarmos um sistema Java Web no padrão arquitetural MVC, com uso de Front
Control, pois boa parte das tarefas será automatizada pelo ambiente.
Inicialmente vamos criar um aplicativo corporativo, o qual chamaremos de ExemploEE, lembrando que devemos escolher o tipo
de projeto como Java EE..Aplicação Enterprise.
Após a criação do aplicativo corporativo, vamos iniciar a implementação da camada Model, selecionando o projeto secundário
ExemploEE-ejb e adicionando a ele as entidades de forma automatizada.
Para adicionar as entidades, devemos selecionar o menu Arquivo..Novo Arquivo e executar os seguintes passos:
https://sparxsystems.com/products/ea/trial-help.html
1. Selecionar o tipo de componente Persistência..Classes de Entidade do Banco de Dados, e clicar em
Próximo.
2. Adicionar um Nova Fonte de Dados.
3. Con�gurar a nova fonte com o nome JNDI jdbc/lojaEAD, apontando para a conexão com nosso banco de
exemplo.
4. Digitar a senha do banco e escolher Lembrar Senha.
5. Veri�car se as tabelas do banco foram recuperadas e clicar em Adicionar Tudo.
6. Veri�car se as tabelas foram adicionadas em Tabelas Selecionadas e clicar em Próximo.
7. De�nir o nome do pacote com model, deixar marcada apenas a opção de criação da Unidade de
Persistência e clicar em Finalizar.
A entidade Produto será gerada no pacote model com o mesmo código que foi anteriormente considerado quando estudamos o
JPA.
Nos passos dois até quatro, o que estamos fazendo é de�nir um novo pool de conexões
registrado via JNDI no GlassFish, e a unidade de persistência utilizará este pool no acesso a
dados, sendo esta a única diferença do método utilizado por nós na criação de entidades
para ambiente desktop.
Isso pode ser observado nos Arquivos de Con�guração do projeto, a começar pela de�nição do pool através de glass�sh-
resources.xml, presente no diretório META-INF. Esse arquivo será responsável pela de�nição do pool, cujo nome adotado será
derby_net_LojaEAD_LojaEADPool e estará relacionado ao nome JNDI de�nido anteriormente na geração de entidades:
• • •
Como agora estamos em um ambiente corporativo, o uso do pool de conexões é um grande diferencial, e o arquivo
persistence.xml irá con�gurar esta utilização para o JPA a partir do nome JNDI utilizado, conforme podemos observar na
listagem seguinte:
• • •
<?xml version="1.0" encoding="UTF-8"?>
<persistence version="2.1"
xmlns="//xmlns.jcp.org/xml/ns/persistence" xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="//xmlns.jcp.org/xml/ns/persistence //xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd">
<persistence-unit name="ExemploEE-ejbPU"
transaction-type="JTA">
<jta-data-source>java:module/jdbc/lojaEAD
</jta-data-source>
<exclude-unlisted-classes>false</exclude-unlisted-classes>
<properties/>
</persistence-unit>
</persistence>
Precisamos observar que as transações agora serão realizadas via JTA (Java Transaction API), ou seja, controladas pelo
container EJB:
• • •
<persistence-unit name="ExemploEE-ejbPU" transaction-type="JTA">
A conexão com o pool é con�gurada em seguida, sendo também determinada a informação que todas as classes de entidade
serão utilizadas, mesmo que não estejam listadas no arquivo persistence.xml:
• • •
<jta-data-source>java:module/jdbc/lojaEAD</jta-data-source>
<exclude-unlisted-classes>false</exclude-unlisted-classes>
Com isso resolvemos a camada Model, e temos que implementar a camada Control do MVC, a qual também será de�nida no
projeto ExemploEE-ejb.
Uma forma muito simples de gerar a camada de controle neste caso será a geração dos Session Beans que funcionarão como
Facade de forma automatizada, o que é feito adicionando um Novo Arquivo ao projeto e seguindo os seguintes passos:
 
<jdbc-resource 
enabled="true" 
1. Selecionar o tipo de componente Enterprise JavaBeans..Beans de Sessão para Classes de Entidade e
clicar em Próximo.
2. Selecionar as classes de entidade que serão utilizadas e clicar em Próximo.
3. De�nir o nome do pacote com control, deixando marcada apenas a opção de interface Local e clicar em
Finalizar.
Ao �nal deste processo, serão gerados três arquivos: ProdutoFacade,
ProdutoFacadeLocal e AbstractFacade.
Todos os processos de bancos de dados são bastante repetitivos e, por isso, o NetBeans gera uma classe chamada
AbstracFacade, concentrando toda a parte comum da programação para banco com JPA. Podemos observar parte do código de
AbstractFacade a seguir:
• • •
public abstract class AbstractFacade<T> {
private Class<T> entityClass;
public AbstractFacade(Class<T> entityClass) {
this.entityClass = entityClass;
}
protected abstract EntityManager getEntityManager();
public void create(T entity) {
getEntityManager().persist(entity);
}
public void edit(T entity) {
getEntityManager().merge(entity);
}
}
• • •
public void edit(T entity) {
getEntityManager().merge(entity);
}
Notou que não tem transação aqui? É porque a transação será gerenciada pelo container JEE com uso do JTA.
O método getEntityManager é abstrato, devendo ser implementado pelos seus descendentes como ProdutoFacade, o que
podemos observar no código seguinte:
• • •
@Stateless
public class ProdutoFacadeextends AbstractFacade<Produto>
implements ProdutoFacadeLocal {
@PersistenceContext(unitName = "ExemploEE-ejbPU")
private EntityManager em;
@Override
protected EntityManager getEntityManager() {
return em;
}
public ProdutoFacade() {
super(Produto.class);
}
}
A classe ProdutoFacade é um componente do tipo Stateless Session Bean, herdando de AbstractFacade com uso da entidade
Produto; ou seja, onde existe T em AbstractFacade, será utilizada a classe Produto. Este processo poderia ser feito para qualquer
entidade, e o código comum não precisa ser replicado, facilitando muito a manutenção:
• • •
public void edit(Produto entity) {
getEntityManager().merge(entity);
}
Também temos a relação direta do Session Bean com o EntityManager através da anotação @PersistenceContext,
necessitando apenas do nome da unidade de persistência:
• • •
@PersistenceContext(unitName = "ExemploEE-ejbPU")
private EntityManager em;
Finalmente, temos a interface local, com a assinatura dos métodos na classe de entidade alvo, ao invés do T existente nos
métodos de AbstractFacade:
• • •
@Local
public interface ProdutoFacadeLocal {
void create(Produto produto);
void edit(Produto produto);
void remove(Produto produto);
Produto �nd(Object id);
List<Produto> �ndAll();
List<Produto> �ndRange(int[] range);
int count();
}
Agora já temos os métodos necessários para efetuar consultas, incluir, alterar e excluir os dados, com uso das camadas Control e
Model. É interessante observarmos que não há nenhuma dependência de ambiente, pois sequer temos uma interface visual.
É neste ponto que devemos nos preocupar com a última camada do MVC, a camada View, que será implementada no projeto
ExemploEE-war.
Inicialmente devemos adicionar um Servlet que terá o nome de ServletProduto e �cará no pacote view. Podemos observar o
código principal do novo Servlet a seguir:
• • •
@EJB
ProdutoFacadeLocal facade;
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String acao = request.getParameter("acao");
if(acao==null)acao="listar";
String pagDestino = (acao.equals("incluir"))?
"incluirProduto.html":"ListaProduto.jsp";
if(acao.equals("incluirX")){
Produto p1 = new Produto(new Integer(
request.getParameter("codigo")));
p1.setNome(request.getParameter("nome"));
p1.setQuantidade(new Integer(
request.getParameter("quantidade")));
facade.create(p1);
}
if(acao.equals("excluirX")){
facade.remove(facade.�nd(new Integer(
request.getParameter("codigo"))));
}
request.setAttribute("listagem", facade.�ndAll());
request.getRequestDispatcher(pagDestino).
forward(request,response);
}
Pelo código do Servlet, temos um parâmetro acao que será utilizado para diferenciar o que deve ser feito a cada chamada. Por
exemplo, se o valor for “excluirX”, será executado o método remove de ProdutoFacade.
• • •
if(acao.equals("excluirX")){
facade.remove(facade.�nd(new Integer(
request.getParameter("codigo"))));
}
Outras operações podem ser efetuadas, e ao �nal ocorrerá o redirecionamento para a página de visualização:
• • •
request.getRequestDispatcher(pagDestino).
forward(request,response);
Agora devemos adicionar o arquivo ListaProduto.jsp para iniciar nossos testes, conforme o código apresentado a seguir:
• • •
<%@page import="model.Produto"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<body>
<a href="ServletProduto?acao=incluir">Novo Produto</a>
<table border="1" width="100%">
<tr><td>Código</td><td>Nome</td>
<td>Quantidade</td><td>Ação</td>
</tr>
<%
List<Produto> listagem = (List<Produto>)
request.getAttribute("listagem");
for(Produto p: listagem){
%>
<tr><td><%=p.getCodigo()%></td><td><%=p.getNome()%></td>
<td><%=p.getQuantidade()%></td>
<td><a href=
"ServletProduto?acao=excluirX&codigo=<%=p.getCodigo()%>">
Excluir Produto</a></td></tr>
<% } %>
</table>
</body>
</html>
Podemos observar neste JSP a recepção dos dados enviados pelo Servlet no atributo “listagem” da requisição, o qual servirá de
base para preenchimento da tela:
• • •
List<Produto> listagem = (List<Produto>)
request.getAttribute("listagem");
for(Produto p: listagem){
Agora nós podemos implantar o projeto principal, denominado ExemploEE, e exibir a tela cadastral apresentada a seguir, apenas
digitando o endereço //localhost:8080/ExemploEE-war/ServletProduto.
Neste ponto a listagem e a exclusão de produtos estão funcionais, faltando apenas criar a página incluirProduto.html, como pode
ser observada a seguir:
• • •
<html>
<body>
<form action="ServletProduto">
<input type="hidden" name="acao" value="incluirX"/>
Código:<br/>
<input type="text" name="codigo"/>
Nome:<br/>
<input type="text" name="nome"/>
Quantidade:<br/>
<input type="text" name="quantidade"/>
<input type="submit" value="Incluir"/>
</form>
</body>
</html>
Comentário
Agora podemos utilizar todas as funcionalidades de nosso pequeno projeto, o que contempla a listagem, exclusão e inclusão de
produtos, implementado em uma arquitetura MVC, utilizando um Servlet como Front Control.
Sessões e Controle de Acesso
As sessões são de grande utilidade no ambiente Web, provendo uma forma de manutenção de estados na troca de páginas, pois
ao contrário dos sistemas desktop, a cada nova página temos outro conjunto de variáveis na memória, desconsiderando-se todas
aquelas existentes antes de a requisição ser efetuada.
Podemos controlar sessões de forma muito simples, com o uso da classe
HttpSession; um exemplo típico de utilização é no controle de login .2
http://estacio.webaula.com.br/cursos/gon964/aula9.html
Vamos, inicialmente, criar uma página JSP protegida, denominada “Segura.jsp”, como pode ser observado no código seguinte:
• • •
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
if(session.getAttribute("usuario")==null)
response.sendRedirect("Login.jsp");
else {
%>
<!DOCTYPE html>
<html>
<body>
<h1>Esta é uma página protegida!</h1>
O usuário <%=session.getAttribute("usuario")%> está logado.
</body>
</html>
<% } %>
Enquanto os parâmetros da requisição assumem apenas valores do tipo texto, os atributos de uma sessão permitem guardar
qualquer tipo de objeto, inclusive texto.
Na primeira parte do arquivo JSP temos o teste para a existência do atributo “usuario” na sessão, mas se o mesmo não existir,
signi�ca que não foi efetuado o processo de login, devendo ocorrer o redirecionamento para a página de login através de
sendRedirect.
• • •
if(session.getAttribute("usuario")==null)
response.sendRedirect("Login.jsp");
else {
Existem dois tipos de redirecionamento no ambiente Java Web:
Clique nos botões para ver as informações.
O modo sendRedirect envia um sinal de redirecionamento ao navegador para que efetue uma nova requisição ao servidor.
sendRedirect 
Através de forward nós efetuamos um redirecionamento interno no servidor, e as informações da requisição original são
mantidas no envio de um componente para outro, sem ocorrer qualquer contato com o navegador no processo.
forward 
Ainda observando o código, podemos notar que a instrução else é aberta antes do início do código HTML e fechada apenas no
�nal, logo após a tag de �nalização </html>. Isto signi�ca que todo este bloco será processado apenas se ocorre o atributo
usuário na sessão, ou seja, se existe alguém logado no sistema.
Existindo um usuário logado, o bloco é executado e a página de resposta é montada, contando inclusive com a identi�cação do
login atual:
• • •
O usuário <%=session.getAttribute("usuario")%> está logado.
Agora precisamos criar a página de login, denominada “Login.jsp”, e o Servlet responsável pela veri�cação dos dados para
conexão, o qual será chamado de ServletLogin. Podemos observar o código da página de login a seguir:
• • •
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<body>
<h1>Acesso ao Sistema</h1>
<form action="ServletLogin" method="post">Login: <input type="text" name="login"/>
Senha: <input type="password" name="senha"/>
<input type="submit" value="login"/>
</form>
<%
if(request.getAttribute("erro")!=null) {
%>
<hr/>Ocorreu um erro: <%=request.getAttribute("erro")%>
<%
}
%>
</body>
</html>
Na primeira parte deste JSP temos um formulário HTML bastante simples, contendo as informações que deverão ser enviadas ao
Servlet para veri�cação.
Na segunda parte temos a possibilidade de apresentar mensagens de erro enviadas pelo Servlet, como “Dados inválidos”. Note
que este trecho será apresentado apenas se o atributo de “erro” estiver presente na chamada ao JSP.
Agora precisamos criar o ServletLogin e implementar o código apresentado a seguir:
• • •
@WebServlet(name = "ServletLogin",
urlPatterns = {"/ServletLogin"})
public class ServletLogin extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
HttpSession session = request.getSession();
if(request.getParameter("login").equals("admin")&&
request.getParameter("senha").equals("123")){
session.setAttribute("usuario", "Administrador");
response.sendRedirect("Segura.jsp");
} else {
request.setAttribute("erro","Dados inválidos.");
request.getRequestDispatcher("Login.jsp").
forward(request,response);
}
}
// Restante do código oculto.
}
Note que, por se tratar de um processo de login, apenas o método doPost poderá ser utilizado sendo feito um teste em que
apenas o login “admin” e senha “123” em conjunto permitirão o acesso ao sistema, acrescentando à sessão o atributo “usuario”,
com valor “Administrador” e redirecionando para a página segura.
 
Caso não sejam fornecidos os dados com os valores corretos, a página de login é acionada, passando o atributo de erro para a
mesma através de um atributo de requisição.
 
Ao tentar acessar a página Segura.jsp será apresentada a tela de login e apenas com os dados corretos será exibida a página
segura:
Comentário
Embora este seja apenas um exemplo simples de processo de autenticação de usuário, com valores pré-�xados, você pode alterá-
lo facilmente para a utilização de uma base de dados com senhas criptografadas.
Atividade
1. Existem diversos padrões arquiteturais; os componentes EJB, como são objetos distribuídos, seguem a arquitetura:
a) Pipes/Filters
b) Microkernel
c) Broker
d) MVC
e) PAC
2. Na arquitetura MVC para Web, considerando o ambiente Java, qual componente deve atuar como Front Control?
a) Stateless Session Bean
b) Servlet
c) MDB
d) EntityManager
e) Stateful Session Bean
3. Considerando a forma de criação automatizada de JPA e EJB pelo NetBeans, complete o código do Servlet para remover da
base todos os produtos com quantidade zero se o parâmetro “acao” for igual a “limparX”.
• • •
@WebServlet(name = "ServletProduto",
urlPatterns = {"/ServletProduto"})
public class ServletProduto extends HttpServlet {
@EJB
ProdutoFacadeLocal facade;
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String acao = request.getParameter("acao");
Notas
Redes de Petri 1
Com o uso de uma Rede de Petri, podemos modelar os diversos estados de um sistema e as transições que levam de um estado
para outro, podendo incluir parâmetros de chamada e valores de retorno.
Controle de Login2
Nas páginas JSP o controle de sessão é feito com o uso do objeto implícito session, da classe HttpSession.
Referências
CASSATI, J. P. Programação servidor em sistemas web. Rio de Janeiro: Estácio, 2016.
DEITEL P; DEITEL H Java como programar 8 ed São Paulo: Pearson 2010
DEITEL, P; DEITEL, H. Java, como programar. 8.ed. São Paulo: Pearson, 2010.
MONSON-HAEFEL, R; BURKE, B. Enterprise java beans 3.0. 5.ed. São Paulo: Pearson, 2007.
SANTOS, F. Tecnologias para internet II. 1.ed. Rio de Janeiro: Estácio, 2017.
Próximos passos
Serviços interoperáveis;
Web Services do tipo SOAP;
Web Services do tipo REST.
Explore mais
Leia:
10 padrões comuns de arquitetura de software em poucas palavras <https://towardsdatascience.com/10-common-
software-architectural-patterns-in-a-nutshell-a0b47a1e9013>
Abordando a arquitetura MVC, e Design Patterns: Observer, Composite, Strategy
<//www.linhadecodigo.com.br/artigo/2367/abordando-a-arquitetura-mvc-e-design-patterns-observer-composite-
strategy.aspx>
Assista:
Java Web MVC con JSP / Servlet / JPA / EJB con JavaEE 7 / GlassFish 4.1 | NetBeans 8.0
<https://www.youtube.com/watch?v=9JwXoL0FSBs>
Analise:
O que é o HttpSession? <https://www.studytonight.com/servlet/httpsession.php>
https://towardsdatascience.com/10-common-software-architectural-patterns-in-a-nutshell-a0b47a1e9013
http://www.linhadecodigo.com.br/artigo/2367/abordando-a-arquitetura-mvc-e-design-patterns-observer-composite-strategy.aspx
https://www.youtube.com/watch?v=9JwXoL0FSBs
https://www.studytonight.com/servlet/httpsession.php
Disciplina: Programação Cliente-Servidor
Aula 10: Web Services
Apresentação
Um grande problema nos sistemas antigos era o compartilhamento de dados e serviços, tanto em termos de hardware
quanto software.
O hardware evoluiu para um modelo em que os barramentos e conectores são padronizados, possibilitando a utilização de
peças de diferentes fornecedores, o que é conhecido em engenharia como COTS. Isso também ocorreu no software,
inicialmente com o compartilhamento de dados através de bases apropriadas, e posteriormente com a de�nição de tipos de
serviços padronizados, fazendo com que plataformas distintas possam se comunicar, desde que entendam o vocabulário
comum.
Na área de software, os Web Services se tornaram comuns no provimento de serviços independentes de plataforma, ou seja,
interoperáveis, sendo divididos em dois tipos: SOAP e RESTful. Para o desenvolvedor Web é fundamental saber trabalhar com
Web Services.
Objetivos
Explicar o conceito de serviços interoperáveis;
Aplicar Web Services dos tipos SOAP e REST.
 (Fonte: TheDigitalArtist / Pixabay)
Serviços interoperáveis
Podemos considerar os Web Services como serviços atuantes no nível da Web que buscam garantir a plena interoperabilidade,
pois trata-se de uma tecnologia independente de plataforma e que tramita dados em formato texto, além de atuar de forma
transparente aos �rewalls.
A busca pela interoperabilidade dos serviços não é algo novo, levando ao aparecimento de diversas tecnologias ao longo do
tempo, como CORBA (Common Object Request Broker Architecture) e RPC (Remote Procedure Call); todas essas tecnologias
trazem diversos traços em comum.
Sempre ocorre a busca por um protocolo aberto, de forma que o mesmo possa ser adotado por ferramentas diversas, como o
IIOP (Internet Inter-ORB Protocol) para o CORBA, além de um meio de descrever os serviços, como o IDL (Interface De�nition
Language) para o RPC.
1. 1
O descritor de serviços é normalmente fornecido no formato texto, e as plataformas que suportam a tecnologia
associada a ele costumam ser capazes de gerar o módulo de comunicação cliente (stub) e o módulo servidor
(skeleton) de forma automatizada.
2. 2
Sabendo qual o protocolo e o formato de utilização de cada serviço, incluindo parâmetros e tipos de retorno,
podemos utilizar as mais diversas ferramentas, como C++, Delphi, C# ou Java, para efetuar chamadas a estes
serviços.
3. 3
Além de um protocolo conhecido e aberto e de um descritor de serviços, precisamos também de um registro que
nos permita localizar o serviço ao nível da rede, como o COS Naming do CORBA.
4. 4
Com isso nós de�nimos os três componentes fundamentais de uma arquitetura de serviços interoperáveis:
serviço de localização, protocolo aberto e descritor de serviços.
Todos estes elementos são comuns em um ambiente de processamento distribuído baseado em serviços, e podemos observar
alguns deles na �gura seguinte.
Esta é uma representação da arquitetura CORBA, onde obtemos uma referência ao servidor (Interface ORB) a partir do serviço de
nomes e diretórios(COS Naming); a comunicação em rede �ca transparente com a geração do Stub e do Skeleton a partir da IDL,
e o protocolo utilizado é o IIOP.
Teremos componentes similares em um ambiente de Web Services, a�nal estaremos tratando apenas de outra plataforma aberta
de serviços distribuídos.
 (Fonte: niekverlaan / Pixabay)
XML-RPC
Quando utilizamos tecnologias como CORBA ou RPC, conseguimos uma comunicação simples, mas ainda estamos presos a
formatos de transferência de dados binários, o que pode trazer di�culdades em termos de leitura e transmissão destes dados.
Uma primeira tentativa de modi�cação para o formato texto na transferência de dados, e que teve impacto comercial relevante, foi
a tecnologia XML-RPC, a qual trata do mesmo modelo já adotado pelo RPC, mas com a utilização de pacotes de dados em
formato XML.
Características do XML-RPC:
1
Busca a simplicidade em termos de comunicação, de�nindo as interfaces de chamadas remotas, mas sem a implementação de
métodos ouvintes nos servidores.
2
Utiliza uma gramática baseada em XML.
3
Utiliza poucos comandos (tags), descrevendo funções e tipos de parâmetros e retorno.
4
Utiliza o protocolo HTTP e é voltado para comunicação entre empresas.
5
É transparente para os �rewalls, pelo uso de XML, existindo várias implementações disponíveis no mercado.
Podemos encontrar um exemplo muito simples de chamada e resposta XML-RPC no endereço https://en.wikipedia.org/wiki/XML-
RPC <https://en.wikipedia.org/wiki/XML-RPC> , o qual é replicado a seguir.
• • •
<?xml version="1.0"?>
<methodCall>
<methodName>examples.getStateName</methodName>
<params>
<param>
<value><i4>40</i4></value>
</param>
</params>
</methodCall>
 
<?xml version="1.0"?>
<methodResponse>
<params>
<param>
<value><string>South Dakota</string></value>
</param>
</params>
</methodResponse>
Na primeira parte deste exemplo temos uma chamada ao método examples.getStateName, passando como parâmetro o valor
inteiro 40; já na segunda parte temos a resposta no formato texto com o estado correspondente (South Dakota).
Entre os elementos da sintaxe XML-RPC, encontram-se:
https://en.wikipedia.org/wiki/XML-RPC
1
methodCall
Chamada de um método remoto a partir do cliente.
2
methodResponse
De�ne a resposta enviada pelo servidor ao cliente.
3
methodName
Nome do método chamado no servidor.
4
params
Setor de parâmetros da chamada ou resposta.
5
param
De�ne um parâmetro, devendo conter o valor e tipo do mesmo.
O modelo de comunicação com uso de XML foi muito bem aceito, mesmo com poucos tipos nativos de�nidos, pois garantiu a
interoperabilidade de uma forma simples, o que justi�ca o fato de existirem tantas implementações disponíveis, tanto para cliente
quanto para servidor, nas mais diversas plataformas de desenvolvimento.
Podemos observar os tipos nativos do XML-RPC na tabela seguinte.
Tag Significado Exemplo
<i4> ou <int> Inteiro sinalizado de 32 bits -12
<boolean> Lógicos: falso vale 0 e verdadeiro vale 1. 1
<string> Texto hello world
<double> Ponto flutuante de precisão dupla -12.214
<dateTime.iso8601> Data e hora 19980717T14:08:55
<base64> Binário codificado em Base 64 eW91IGNhbid0IHJlYWQgdGhpcyE=
Atenção
Além desses tipos nativos, podemos trabalhar com estruturas compostas através de struct, onde cada elemento da estrutura
deve conter nome e valor, onde o valor pode ser outro elemento struct, aplicado de forma recursiva.
Também podem ser criadas coleções com o uso de array, podendo conter elementos do tipo struct, os quais podem também
utilizar array em seus valores.
Logo, com a combinação de estruturas complexas e coleções (ou vetores), de forma dinâmica e recursiva, podemos expressar
tipos de dados diversos com grande facilidade, o que viabiliza a implementação de clientes e servidores nas mais diversas
plataformas.
 (Fonte: jannoon028 / Freepik)
SOAP
O conceito de serviços não é novidade em termos de programação, tratando de componentes independentes de software que
podem ser acionados para realizar determinadas tarefas, permitindo através de seu conjunto realizar ações maiores segundo
uma ordem de chamada de�nida pelo aplicativo solicitante; em termos de Internet, os tipos de serviço mais difundidos são Web
Services.
Os primeiros Web Services tiveram sua funcionalidade baseada no modelo XML-RPC, adotando o formato XML na transferência
de dados. Eles foram considerados um marco na evolução das plataformas de processamento distribuído interoperáveis e
formaram a base da comunicação B2B (Business to Business), servindo também como meio padrão de interfaceamento das
arquiteturas orientadas a serviço.
Em termos gerais, o SOAP (Simple Object Access Protocol) de�ne uma comunicação remota
estilo RPC com uso de XML, extensível e amplamente utilizada em Web Services.
As características principais do SOAP são:
1
Voltado para a comunicação B2B.
2
Padroniza o formato para envio e recepção de mensagens.
3
Comunicação transparente aos �rewalls.
4
Neutralidade de plataforma e ambiente de desenvolvimento.
5
Baseado em sintaxe XML, trazendo simplicidade e
expansibilidade.
6
É uma recomendação da W3C desde 2003.
A sintaxe do SOAP é extremamente formal e segue algumas regras importantes, como a
obrigatoriedade dos namespaces soap-envelop e soap-encoding, e não permite o uso de
DTD nem de instruções de processamento XML.
Podemos observar o esqueleto de uma mensagem SOAP a seguir.
• • •
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="//www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="//www.w3.org/2001/12/soap-encoding">
<soap:Header> ... </soap:Header>
<soap:Body>
...
<soap:Fault> ... </soap:Fault>
</soap:Body>
</soap:Envelope>
Clique nos botões para ver as informações.
A seção Header é opcional e permite a inclusão de informações especí�cas do aplicativo, como autenticação e pagamento,
por exemplo. Se esta seção estiver presente deverá constar como o primeiro elemento �lho do envelope SOAP.
Seção Header 
A seção Fault também é opcional e serve para indicar mensagens de erro. Quando presente na mensagem, Fault deve se
apresentar como um elemento �lho de Body, e permite apenas uma ocorrência nessa mensagem.
Seção Fault 
O elemento mais importante é o Body, pois apresenta a mensagem em si, de�nindo chamada ou resposta de um serviço
solicitado, e seus �lhos devem ter o namespace quali�cado, como podemos observar no exemplo seguinte com a chamada
e a resposta SOAP.
Body 
Este exemplo encontra-se disponível em //w3schools.sinsixx.com/ soap/soap_example.asp.htm
<//w3schools.sinsixx.com/soap/soap_example.asp.htm>
• • •
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="//www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="//www.w3.org/2001/12/soap-encoding">
 
<soap:Body xmlns:m="//www.example.org/stock">
<m:GetStockPrice>
<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
 
</soap:Envelope>
 
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="//www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="//www.w3.org/2001/12/soap-encoding">
 
<soap:Body xmlns:m="//www.example.org/stock">
<m:GetStockPriceResponse>
<m:Price>34.5</m:Price>
</m:GetStockPriceResponse>
</soap:Body>
 
</soap:Envelope>
Neste exemplo é feita uma chamada com a passagem do nome da empresa (IBM), sendo recebida a resposta com o valor de
suas ações (34.5). Podemos notar alguma complexidade de escrita devido ao formalismo impetrado pelo SOAP, mas o uso do
sistema de anotações do Java irá automatizar a criação destes pacotes, facilitando muito o nosso trabalho.
Inicialmente devemos criar um aplicativo Web comum, como �zemos em aulas anteriores, ao qual daremos o nome de
WebTesteSOAP. Neste aplicativo Web iremos adicionar um novo arquivo e executar os seguintes passos:
http://w3schools.sinsixx.com/soap/soap_example.asp.htm
1. Selecionar o tipo de componente Web Services..Web Service e clicar em Próximo.
2. De�nir o nome como Calculadora e o pacote como webs, e clicar em Finalizar.
O código gerado é apresentadoa seguir.
• • •
package webs;
 
import javax.jws.WebService;
import javax.jws.WebMethod;
import javax.jws.WebParam;
 
@WebService(serviceName = "Calculadora")
public class Calculadora {
 
@WebMethod(operationName = "hello")
public String hello(@WebParam(name = "name") String txt) {
return "Hello " + txt + " !";
}
}
Neste código podemos observar uma classe comum, mas que se transforma em Web Service com o uso de anotações. Estas
anotações são:
1
WebService
Aplicada à classe que funcionará como um Serviço Web, e tendo como parâmetro o nome do serviço (serviceName).
2
WebMethod
Utilizada no método que será exposto pelo serviço, devendo ser indicado o nome da operação (operationName).
3
WebParam
Aplicada a cada parâmetro do método exposto, necessitando do nome que será utilizado em cada um (name).
Inicialmente temos apenas um método exposto, o qual é criado como exemplo pelo NetBeans; este método recebe um parâmetro
texto reconhecido como “name” e retorna um texto com mensagem de boas-vindas. Obviamente, tanto a chamada quanto a
recepção serão em pacotes SOAP.
Poderíamos acrescentar novos métodos e simplesmente utilizar as anotações, mas o NetBeans traz um caminho visual para este
tipo de tarefa, o qual envolve poucos passos:
1. Clicar com o botão direito sobre o nome Calculadora, na guia Web Services do projeto, e selecionar a opção
“Adicionar Operação...”.
2. De�na o nome da operação como somar e o retorno do tipo int.
3. Na divisão de Parâmetros, Clique em Adicionar duas vezes e de�na os parâmetros “a” e “b”, ambos do tipo
int.
4. Clique em OK para gerar o método.
Ao �nal, teremos a geração do método somar, já com as anotações corretas; precisaremos apenas modi�car o valor retornado
pelo mesmo, como podemos observar a seguir.
• • •
@WebMethod(operationName = "somar")
public int somar(@WebParam(name = "a") int a,
@WebParam(name = "b") int b) {
return a + b;
}
Com a escolha do servidor GlassFish, é possível testar de forma simples o novo Web Service. Basta clicar com o botão direito em
Calculadora, guia Web Services, e escolher a opção de menu “Testar Web Service”, o que fará abrir uma página Web de teste,
com a possibilidade de preencher os parâmetros de chamada e veri�car o retorno no próprio navegador.
Para evitar alguns erros nessa chamada, é aconselhável implantar o projeto antes de invocar a opção de teste.
A janela de teste pode ser observada a seguir, inclusive com o link para o endereço do arquivo WSDL.
Nesta janela podemos preencher os valores e clicar em somar para ativar a referida operação no Web Service e veri�car os
pacotes de envio da solicitação e recepção do resultado na tela seguinte que se abre.
Outro elemento importante é o link para o endereço do WSDL (Web Services Description Language), um arquivo XML de grande
importância para a geração de código nas diversas plataformas, pois trata da descrição do Web Service, indicando as operações
disponíveis e formatos de parâmetros das chamadas, bem como o formato do retorno de cada operação.
Além do SOAP e do WSDL, existe um terceiro arquivo para o registro do Web Service,
permitindo a pesquisa em ferramentas próprias de busca, segundo um formato denominado
UDDI, ou Universal Description, Discovery and Integration.
Podemos ver na tabela seguinte uma comparação entre algumas das plataformas de processamento distribuído, incluindo Web
Services.
Tecnologia Protocolo Descrição Registro
CORBA IIOP OMG IDL Cos Naming
RMI RMI Java RMI Registry
EJB (RMI-IIOP) IIOP Java JNDI
WS (SOAP) SOAP WSDL UDDI
Chamadas AJAX para SOAP
A maior di�culdade em efetuar uma chamada AJAX para o SOAP não está na recepção dos dados, mas na con�guração do
pacote XML de solicitação do serviço. Isto ocorre porque precisamos montar um pacote XML bastante complexo para efetuar a
chamada, porém a recepção é tratada muito facilmente com o uso de DOM.
Por questões de segurança, uma chamada para Web Service deve ser feita apenas a partir de uma página hospedada em servidor,
razão pela qual iremos utilizar o arquivo index.html do aplicativo Web em que foi criado o Web Service e alterá-lo para o código
seguinte.
• • •
<html><body>
<input type="text" id="valorA"/>
<input type="text" id="valorB"/>
<button onclick="atualizar()">Somar</button>
<div id="resposta">Resposta Aqui</div>
<script>
var objA = document.getElementById("valorA");
var objB = document.getElementById("valorB");
function atualizar(){
var url = "//localhost:8080/WebTesteSOAP/Calculadora";
var params = '<?xml version="1.0" encoding="UTF-8"?>' +
' <S:Envelope '+
' xmlns:S="//schemas.xmlsoap.org/soap/envelope/"> '+
' <S:Header/><S:Body>'+
' <ns2:somar xmlns:ns2="//webs/">'+
' <a>'+objA.value+'</a> <b>'+objB.value+'</b> '+
' </ns2:somar> '+
' </S:Body> </S:Envelope>';
xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
xhttp.onreadystatechange = AJAX_Callback;
xhttp.setRequestHeader('Content-Type', 'text/xml');
xhttp.send(params);
}
function AJAX_Callback(){
if (xhttp.readyState == 4 && xhttp.status == 200) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(
xhttp.responseText,"text/xml");
var soma = xmlDoc.getElementsByTagName("return");
document.getElementById("resposta").innerHTML =
"Soma: "+soma[0].childNodes[0].nodeValue;
}
}
</script>
</body></html>
Neste código são de�nidas duas caixas de texto para a entrada dos valores, identi�cadas como valorA e valorB, e um botão que
chamará a função atualizar. De forma geral, não difere de outras chamadas AJAX, mas além de utilizar obrigatoriamente o
método POST, tem como parâmetro um XML no formato SOAP, onde ocorre a concatenação dos valores digitados nas caixas de
texto.
• • •
var params = '<?xml version="1.0" encoding="UTF-8"?>' +
' <S:Envelope '+
' xmlns:S="//schemas.xmlsoap.org/soap/envelope/"> '+
' <S:Header/><S:Body>'+
' <ns2:somar xmlns:ns2="//webs/">'+
' <a>'+objA.value+'</a> <b>'+objB.value+'</b> '+
' </ns2:somar> '+
' </S:Body> </S:Envelope>';
Da mesma forma que os dados são enviados em formato XML-SOAP, também são recebidos neste formato, permitindo o
tratamento através de DOMParser. Com o uso deste parser, basta efetuarmos a busca pelo nó de elemento denominado return e
pegar o valor de seu �lho imediato, que é um nó de texto.
• • •
var soma = xmlDoc.getElementsByTagName("return");
document.getElementById("resposta").innerHTML =
"Soma: "+soma[0].childNodes[0].nodeValue;
Podemos observar o resultado da execução na tela seguinte, apresentando o resultado após o preenchimento de valores e clique
no botão.
 (Fonte: freepik / Freepik).
REST
A arquitetura REST (Representational State Transfer) permite a descrição de consultas aos objetos e seus estados, de�nidos
pelos valores dos atributos, com o uso de URLs. Não apenas a consulta, mas as diversas operações sobre estes objetos, são
efetuadas com o uso do protocolo HTTP e seus diferentes métodos.
Além do SOAP, outro tipo de Web Service comum no mercado é o RESTful, que leva este nome por utilizar uma arquitetura REST.
Trata de um modelo menos formal, com possibilidade de utilização de sintaxe JSON, entre outras, e que acaba sendo mais
voltado para a comunicação B2C (Business to Consumer), ou seja, da empresa para os clientes.
Atenção
Embora o REST seja mais simples, e amplamente adotado no ambiente móvel, ainda hoje temos a utilização do SOAP no meio
B2B, pois traz maior formalismo no que se refere à declaração e utilização de serviços.
O mecanismo dos Web Services RESTful é baseado nos métodos do protocolo HTTP, conforme podemos observar na tabela
seguinte.
Método Utilização
GET Efetuar consultas e recuperar dados de entidades
POST Incluir uma entidade com novos dados
PUT Atualizar dados de uma entidade a partir de uma condição
DELETE Remover uma entidade a partir de uma condição
Exemplo
Por exemplo, se acessarmos //localhost:8080/ MeuApp/aluno/101 com método GET, deveremos receber uma representação
dos dados de um aluno cuja chave primária tem valor101, podendo ser em XML ou JSON. No entanto, se efetuarmos a mesma
chamada com o método PUT e passarmos um XML ou JSON com os dados da requisição, iremos atualizar o cadastro do referido
aluno.
Podemos trabalhar com grande facilidade na criação de Web Services REST com Java; porém, como o JEE7 e o GlassFish 4.1.1
apresentam algum nível de incompatibilidade com o formato JSON, o que não é observado para a saída XML, iremos optar pelo
Tomcat e JEE5.
Vamos criar um novo aplicativo do tipo Java Web..Aplicação Web, ao qual daremos o nome de WebTesteREST, e selecionar o
Tomcat e JEE5, conforme podemos observar a seguir.
Uma diferença básica do modelo utilizado pelo JEE5 é a necessidade da presença do arquivo web.xml, o que con�guraria uma
desvantagem, mas acaba sendo uma solução versátil para o trabalho com o formato JSON.
O segundo passo é a criação da entidade cujos estados serão representados pelo REST, o que faremos simplesmente
adicionando uma nova classe com o nome CalculadoraResult, dentro do pacote unesa.
Devemos codi�car a nova classe, conforme apresentado a seguir.
• • •
package unesa;
 
public class CalculadoraResult {
private int a;
private int b;
private String operacao;
private int resultado;
 
public CalculadoraResult() {
}
 
public int getA() { return a; }
public int getB() { return b; }
public String getOperacao() { return operacao; }
public int getResultado() { return resultado; }
public void setA(int a) { this.a = a; }
public void setB(int b) { this.b = b; }
public void setOperacao(String operacao)
{ this.operacao = operacao; }
public void setResultado(int resultado)
{ this.resultado = resultado; }
}
Esta classe é basicamente um POJO, e servirá de base para a criação do Web Service REST. O que precisaremos fazer é adicionar
um novo arquivo e seguir os seguintes passos:
1. Selecionar o tipo Web Services..Web Services RESTful a partir dos Padrões e clicar em Próximo.
2. Escolher o tipo “Recurso Raiz Simples” e clicar em Próximo.
3. Con�gurar o pacote para unesa, caminho como calculadora e nome da classe como CalculadoraResource,
selecionar o formato application/json e a classe de representação CalculadoraResult, e clicar em Finalizar.
Além do Web Service REST, é criada uma classe de con�guração padrão, cujo código é apresentado a seguir.
• • •
package unesa;
 
import java.util.Set;
import javax.ws.rs.core.Application;
 
@javax.ws.rs.ApplicationPath("webresources")
public class ApplicationCon�g extends Application {
 
@Override
public Set<Class<?>> getClasses(){
Set<Class<?>> resources = new java.util.HashSet<>();
addRestResourceClasses(resources);
return resources;
}
 
private void addRestResourceClasses(Set<Class<?>> resources){
resources.add(unesa.CalculadoraResource.class);
}
}
A classe ApplicationCon�g tem uma anotação com o mapeamento do endereço de base de nossos Web Services, no caso
webresources.
• • •
@javax.ws.rs.ApplicationPath("webresources")
No método addRestRessourceClasses são adicionadas as diversas classes anotadas para o modelo REST, como
unesa.CalculadoraResource.
• • •
private void addRestResourceClasses(Set<Class<?>> resources){
resources.add(unesa.CalculadoraResource.class);
}
Esta classe representará o aplicativo REST, devendo ser mapeada no arquivo web.xml, o que foi feito automaticamente neste
processo, conforme podemos observar apenas vistoriando o código do arquivo.
• • •
<web-app    version="2.5"    xmlns="//java.sun.com/xml/ns/javaee" xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="//java.sun.com/xml/ns/javaee //java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>ServletAdaptor</servlet-name>
<servlet-class>
org.glass�sh.jersey.servlet.ServletContainer
</servlet-class>
<init-param>
<param-name>javax.ws.rs.Application</param-name>
<param-value>unesa.ApplicationCon�g</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ServletAdaptor</servlet-name>
<url-pattern>/webresources/*</url-pattern>
</servlet-mapping>
<session-con�g>
<session-timeout>
30
</session-timeout>
</session-con�g>
<welcome-�le-list>
<welcome-�le>index.jsp</welcome-�le>
</welcome-�le-list>
</web-app>
A presença desta classe de aplicativo é uma exigência para o uso da biblioteca Jersey, responsável pelo ciclo de vida dos Web
Services REST anotados do Java.
Podemos observar também o surgimento de uma nova opção na árvore do projeto, referente à gerência de Web Services
RESTful.
Finalmente, vamos ao código de CalculadoraResource. Para tal, devemos compreender a utilização de algumas anotações,
conforme é apresentado na tabela seguinte.
Anotação Utilização
@GET Resposta ao método GET, normalmente voltado para consultas
@POST Resposta ao método POST, voltado para criação de entidades
@PUT Resposta ao método PUT, utilizado na alteração de entidades
@DELETE Resposta ao método DELETE, efetuando a exclusão a partir da chave
@Path Definição do caminho para a chamada da operação
@PathParam Mapeia o parâmetro do método para o parâmetro equivalente no caminho de chamada
@Produces Formato de dados de retorno para a operação
@Consumes Formato de dados para a chamada da operação
Iremos codi�car CalculadoraResource da forma que é apresentada a seguir.
• • •
package unesa;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.UriInfo;
import javax.ws.rs.Produces;
import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PUT;
import javax.ws.rs.PathParam;
@Path("calculadora")
public class CalculadoraResource {
 
@Context
private UriInfo context;
 
public CalculadoraResource() {
}
@GET
@Produces(javax.ws.rs.core.MediaType.APPLICATION_JSON)
public CalculadoraResult getJson() {
CalculadoraResult cr = new CalculadoraResult();
cr.setOperacao("nenhuma");
return cr;
}
@GET
@Produces(javax.ws.rs.core.MediaType.APPLICATION_JSON)
@Path("somar/{a}/{b}")
public CalculadoraResult somar(
@PathParam("a")int a,@PathParam("b")int b) {
CalculadoraResult cr = new CalculadoraResult();
cr.setA(a);
cr.setB(b);
cr.setOperacao("somar");
cr.setResultado(a+b);
return cr;
}
@PUT
@Consumes(javax.ws.rs.core.MediaType.APPLICATION_JSON)
public void putJson(CalculadoraResult content) {
}
}
O método de maior interesse para nós é o somar, que utiliza um mapeamento dinâmico, com a passagem de dois parâmetros.
• • •
@GET
@Produces(javax.ws.rs.core.MediaType.APPLICATION_JSON)
@Path("somar/{a}/{b}")
public CalculadoraResult somar(
@PathParam("a")int a,@PathParam("b")int b)
Com uma chamada do tipo somar/12/51, estaríamos preenchendo o parâmetro a com o valor 12 e o parâmetro b com o valor 51.
Internamente é instanciado e con�gurado um objeto da classe CalculadoraResult, onde o resultado recebe a soma dos dois
parâmetros; este objeto é retornado pelo método para que seja convertido no formato JSON e enviado ao cliente, isto devido à
presença da anotação @Produces.
• • •
@GET
@Produces(javax.ws.rs.core.MediaType.APPLICATION_JSON)
Agora só precisamos implantar nosso projeto e testar a funcionalidade desejada. Teste mais fácil de efetuar com o uso do
comando curl, do Windows em linha de comando.
• • •
curl //localhost:8084/WebTesteREST/webresources/calculadora/somar/2/5
Estando tudo correto, obteremos a saída apresentada a seguir.
• • •
{"a":2,"b":5,"operacao":"somar","resultado":7}
Como podemos observar, o retorno será a classe no formato JSON, o que pode ser utilizado facilmente por diversas ferramentas,
como JQuery.
 (Fonte: Viktor Hanacek / PicJumbo
Chamadas JQuery para REST
Já conhecemos bem as diversas facilidades trazidas pelo JQuery na criação de interfaces grá�cas, mas existem diversas outras
funcionalidades desta biblioteca que facilitam a comunicação das páginas com servidores REST.
A biblioteca JQuery AJAX poderá ser utilizada neste contexto, e o código de nossa página index deverá ser modi�cado para o que
é apresentadoa seguir.
• • •
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<input type="text" id="a">
<input type="text" id="b">
<button id="somar">somar</button>
<p id="saida"></p>
<script>
$("#somar").click(function(){
var endereco = "//localhost:8084/WebTesteREST/"+
"webresources/calculadora/somar/"+
$("#a").val() + "/" + $("#b").val();
$.ajax({
url: endereco
}).then(function(data){
$("#saida").html(data.a+" + "+data.b+" = "+
data.resultado);
});
});
</script>
</body>
</html>
Inicialmente temos a inclusão da biblioteca JQuery, utilizada diretamente pela Web para que não fosse necessário adicionar mais
arquivos ao projeto, mas nada impediria que utilizássemos de forma local.
• • •
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
O código HTML contempla duas caixas de texto, um botão e uma divisão de parágrafo, todos estes elementos identi�cados via
atributo id.
Com o uso de JQuery, temos a de�nição da resposta ao clicar sobre o botão; os passos iniciais envolvem a montagem da URL
correta a partir dos números digitados nas duas caixas de texto.
• • •
var endereco = "//localhost:8084/WebTesteREST/"+
"webresources/calculadora/somar/"+
$("#a").val() + "/" + $("#b").val();
Finalmente, a chamada AJAX em modo GET, com a simples passagem da URL, seguida do tratamento da recepção. Os dados são
transferidos para o parâmetro data da função, e como o formato utilizado foi JSON, o acesso aos atributos ocorre de forma direta.
• • •
$.ajax({
url: endereco
}).then(function(data){
$("#saida").html(data.a+" + "+data.b+" = "+data.resultado);
});
Agora só precisamos executar o projeto e testar a solução, onde devemos obter um resultado �nal como o apresentado a seguir.
Atividade
1. A arquitetura interoperável que serviu de referência para a criação do SOAP e, consequente, para o surgimento dos Web
Services foi:
a) CORBA
b) RMI
c) EJB
d) XML-RPC
e) REST
2. Considerando a classe Java seguinte, acrescente as anotações necessárias para que a mesma seja tratada como um Web
Service SOAP, com exposição de todos os métodos.
• • •
public class Roteador {
public String getURL (int ip1, int ip2, int ip3, int ip4) {
return "";
}
public String getTextoIP (String URL) {
return "";
}
}
3. Com o uso de REST, qual seria a anotação correta para de�nir o formato de entrada de dados em uma chamada PUT?
a) @Produces
b) @Path
c) @Consumes
d) @PathParam
e) @PUT
Referências
CASSATI, J. P. Programação servidor em sistemas web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Java, como programar. 8.ed. São Paulo: Pearson, 2010.
LECHETA, R; BURKE, B. Web services restful. 1.ed. São Paulo: Novatec, 2015.
MONSON-HAEFEL, R; BURKE, B. Enterprise java beans 3.0. 5.ed. São Paulo: Pearson, 2007.
Explore mais
Não deixe de acessar os materiais sugeridos a seguir:
The Java EE 5 Tutorial; <https://docs.oracle.com/javaee/5/tutorial/doc/bnayn.html>
2 Developing RESTful Web Services; <https://docs.oracle.com/middleware/12212/wls/RESTF/develop-restful-
service.htm#RESTF113>
RESTful services with jQuery and Java using JAX-RS and Jersey. <//coenraets.org/blog/2011/12/restful-services-with-jquery-
and-java-using-jax-rs-and-jersey/>
https://docs.oracle.com/javaee/5/tutorial/doc/bnayn.html
https://docs.oracle.com/middleware/12212/wls/RESTF/develop-restful-service.htm#RESTF113
http://coenraets.org/blog/2011/12/restful-services-with-jquery-and-java-using-jax-rs-and-jersey/
Desenvolvimento de Software
Aula 02: Orientação de Objetos
Apresentação
A programação estruturada fornece um meio bastante direto de expressar processos, adequando-se muito bem à
implementação de algoritmos, mas com a evolução dos sistemas se torna necessário adotar metodologias de
desenvolvimento mais organizadas, o que popularizou muito as técnicas da Orientação a Objetos.  
Para a criação de sistemas comerciais devemos compreender alguns pilares que de�nem essa metodologia, como
abstração, herança, polimor�smo e encapsulamento, e aprender a sintaxe especí�ca para a implementação desses
conceitos. 
Também é necessário que saibamos diferenciar a aplicação de elementos concretos e abstratos na concepção de sistemas
Java.
Objetivos
Identi�car os diversos conceitos da Orientação a Objetos;
Explicar a sintaxe Java para Orientação a Objetos;
Aplicar a sintaxe Java na criação de elementos concretos e abstratos.
Histórico e Características Gerais
Com a criação de sistemas cada vez maiores e com grande apelo visual, as técnicas tradicionais de modelagem e programação
estruturada começaram a entrar em colapso.
Complexos trechos de código inter-relacionados, junto com documentação escassa e diversas replicações de processos já
existentes, acabam tornando a manutenção dos sistemas extremamente difícil, aumentando o custo e diminuindo as
possibilidades evolutivas desses sistemas.
A orientação a objetos surge neste contexto, trazendo uma forma mais organizada de trabalho, onde a modelagem e a
implementação mostram uma proximidade muito maior que nas técnicas ditas tradicionais.
Para podermos adotar essa nova �loso�a, devemos deixar de pensar em termos de processos e funções, pois isto é a
metodologia estruturada, focada em funcionalidades pontuais e a organização delas.
Agora precisamos pensar de uma forma diferente, em termos de personagens, os quais deverão apresentar características físicas
e ações ou verbos.
Exemplo
Na programação estruturada diríamos que o projétil partiu no ângulo de 55 graus, sofrendo a ação da gravidade, atingindo o
prédio na altura do quarto andar, pois estamos de�nindo um processo. Em termos de orientação a objetos, estaríamos
considerando que temos um personagem chamado tanque de guerra, e que ele é capaz de atirar um projétil.
A mudança de foco é muito grande, e tem como objetivo:
Aumento do reuso de código;
Facilidade de manutenção;
Documentação automatizada.
Começamos a utilizar de forma mais ampla a programação orientada a objetos (POO ) com o advento das interfaces grá�cas,
pois �cou muito evidente que a programação estruturada não era a melhor opção para construir ambientes constituídos de
janelas.
Antigamente tínhamos que utilizar as APIs do sistema operacional para a construção de cada janela, de forma independente, mas
com a POO podemos de�nir um personagem denominado “Janela”, o qual terá atributos como “posição”, “largura” e “altura”, e será
capaz de efetuar ações como “abrir”, “minimizar” e “maximizar”, e, a partir daí, colocarmos a quantidade necessária de
personagens deste tipo para implementar as interfaces de nossos sistemas.
1
Abstração
 Vídeo.
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
http://estacio.webaula.com.br/cursos/gon117/aula2.html
Um dos pilares da POO é o conceito de abstração, que se refere à de�nição de um modelo simpli�cado de algo maior.
Quando abstraímos algo, estamos preocupados apenas com os detalhes que sejam relevantes para o problema de interesse, e
essas abstrações serão representadas como classes na POO, as quais trazem a de�nição dos atributos e métodos suportados
pelos personagens:
Atributos De�nem características físicas, como cor, idade, endereço etc.
Métodos As ações ou os verbos que podem ser praticados, tais como
comer, andar ou dormir.
Neste ponto podemos abandonar a palavra “personagem” e passar a tratar dos dois níveis de programação que utilizaremos:
Classe
funciona como um molde (tipo ou domínio), para de�nir como
serão os objetos criados a partir da mesma. Elas de�nem
apenas os tipos destes atributos, sem assumir valores.
Objetos
São como variáveis ou elementos físicos criados a partir do
molde que é a classe. Cada objeto irá assumir valores
especí�cos para os atributos de�nidos na classe.
Vamos entender melhor.
Poderíamos considerar uma classe “Pessoa”, que apresenta como atributos o nome e o telefone.Mas qual nome e telefone?
Cada objeto dessa classe irá assumir valores especí�cos, como p1 se chama João e seu número de telefone é 1111-1111,
enquanto p2 se chama Maria e seu número de telefone é 2222-2222.
Vamos observar estes conceitos iniciais a seguir. Para esse exemplo deveremos criar dois arquivos, um para Pessoa e outro para
Exemplo010.
 
package exemplo010;
public class Pessoa {
 String nome;
 String telefone;
 void exibir(){
 System.out.println(nome+"::"+telefone);
 } }
 
package exemplo010;
public class exemplo010 {
 public static void main(String[] args) {
 // Instanciando os objetos p1 e p2
 Pessoa p1 = new Pessoa();
 Pessoa p2 = new Pessoa();
 // Preenchimento dos atributos dos objetos p1 e p2
 p1.nome = "João";
 p1.telefone = "1111-1111";
 p2.nome = "Maria";
 p2.telefone = "2222-2222";
 // Chamada ao método exibir em p1 e p2
 p1.exibir();
 p2.exibir();
 }
}
Conforme podemos observar, o primeiro arquivo (Pessoa.java) contém a classe Pessoa, a qual de�ne os atributos nome e
telefone e o método exibir.
No outro arquivo (Exemplo010.java) teremos a classe chamadora e seu ponto inicial de execução main, onde inicialmente são
instanciados os objetos p1 e p2 com o uso do operador new, responsável por alocar esses objetos na memória.
Acompanhando a sequência de comandos, teremos o preenchimento dos atributos nome e telefone para cada um dos objetos, e
a chamada ao método exibir de cada um deles.
Teremos como resultado �nal a impressão do nome e o telefone de cada objeto.
João::1111-1111
Maria::2222-2222
Existe também um método especial chamado de construtor, responsável pela inicialização de um objeto recém-criado. Note que
ele não aloca o objeto, sendo esta responsabilidade do operador new, mas permite inicializar atributos do objeto em seu primeiro
momento de existência.
Em algumas linguagens temos também o método destrutor, mas o Java não necessita deste método, particularmente por trazer
o garbage collector, tecnologia que remove da memória qualquer objeto que não possa ser acessado e não tenha mais utilidade
para o programa.
Vamos refazer o exemplo anterior...
 
package exemplo010;
public class Pessoa {
 String nome;
 String telefone;
 Pessoa(String nome, String telefone){
 this.nome = nome;
 this.telefone = telefone;
 }
 void exibir(){
 System.out.println(nome+"::"+telefone);
 }
}
 
package exemplo010;
public class exemplo010 {
 public static void main(String[] args) {
 // Instanciando e inicializando os objetos p1 e p2
 Pessoa p1 = new Pessoa("João","1111-1111");
 Pessoa p2 = new Pessoa("Maria","2222-2222");
 // Chamada ao método exibir em p1 e p2
 p1.exibir();
 p2.exibir();
 }
}
Essa modi�cação do código não irá alterar a saída, mas podemos observar como o uso de um construtor simpli�cou muito a
inicialização dos objetos no main.
Todo construtor é de�nido pela criação de um método com o mesmo nome da classe, e seria
possível utilizar parâmetros com nomes diferentes dos atributos que serão inicializados,
mas ocorreria uma grande perda de semântica. 
O problema agora é como iremos diferenciar os parâmetros e atributos, já que eles têm os mesmos nomes. É neste ponto que
surge um elemento da orientação a objetos chamado de ponteiro de autorreferência, expresso em Java como this, e que sempre
aponta para os atributos e métodos do objeto corrente.
Observe a linha de código em destaque:
this.nome = nome;
A forma mais fácil de ler essa linha seria “o nome deste objeto receberá o nome passado como parâmetro”.
Algumas classes apresentam vários construtores diferentes, cada um deles com um conjunto de parâmetros distintos, de forma a
se adaptarem a contextos diversos, e a aplicação dessa técnica é chamada de sobrecarga.
Embora nós utilizemos muito a sobrecarga na orientação a objetos, principalmente na criação de métodos construtores, esta é
uma técnica antiga, já existente na programação estruturada, e amplamente utilizada na linguagem C.
Pacotes e Bibliotecas
Quando fazemos um sistema orientado a objetos é comum ocorrer um grande número de classes, e precisamos de uma maneira
organizada para classi�car e agrupar essas classes de acordo com suas a�nidades a determinado contexto.
O primeiro nível de organização são os pacotes (package), que seria equivalente ao diretório no qual a classe se encontra,
segundo um caminho relativo, tomando como base o diretório raiz do projeto.
Exemplo
O diretório “\java\math” equivaleria ao pacote “java.math”.
Se observarmos os códigos de exemplo anteriores, veremos a presença da palavra package, imediatamente no início dos
mesmos. Todo arquivo Java deve ter a assinatura de pacote correspondente ao diretório onde se encontra.
Quando utilizamos classes pertencentes ao mesmo pacote não há necessidade de importar elementos, mas ao tratar de pacotes
diferentes, será necessário importar elementos de outro pacote com o uso de import.
Podemos importar classes dos pacotes do projeto ou de bibliotecas externas.
As bibliotecas são conjuntos de pacotes Java, e suas respectivas classes, compactados para um arquivo com extensão “.zip” ou
“.jar”. Essas bibliotecas podem ser referenciadas pelo projeto, ou adicionadas ao CLASSPATH, no qual estão relacionadas as
bibliotecas padrão do ambiente.
Exemplo
Se quisermos acessar um banco de dados MySQL, podemos adicionar o arquivo mysql-connector.jar ou similar às bibliotecas do
projeto. Depois é só utilizar as importações corretas.
O comando import pode ser usado de duas formas:
Incluindo apenas uma classe, como import
java.util.ArrayList ou
Incluindo todas as classes do pacote (sem
recursividade), como import java.util.*
Herança
O segundo pilar da orientação a objetos é a herança, que nos permite criar uma nova classe a partir de outra já existente,
con�gurando um reaproveitamento estrutural.
A árvore de família de animais que nos é apresentada nas aulas de Biologia.
Ela segue o mesmo princípio da herança em termos de programação, pois ao de�nir um cachorro ou coelho aproveitamos o
conceito já existente de mamífero.
Para derivar uma classe de outra utilizaremos a palavra reservada extends, e assim como podemos acessar os atributos e
métodos internos com this, utilizamos a palavra super para ter acesso aos atributos e métodos da classe original.
Vamos observar o exemplo seguinte.
 
package exemplo010;
public class Profissional extends Pessoa{
 String profissao;
 Profissional(String nome, String telefone, String profissao) {
 super(nome, telefone);
 this.profissao = profissao;
 }
}
Aqui nós criamos uma classe Pro�ssional descendente de Pessoa com o uso de extends. Esta nova classe teve o atributo
“pro�ssao” adicionado.
Dica
Não é permitido utilizar acentuação em nomes de atributos, e também um construtor com três parâmetros.
A nova classe apresenta os atributos nome, telefone e pro�ssao, sendo os dois primeiros herdados de Pessoa, e a palavra super
foi utilizada para chamar o construtor de Pessoa a partir do construtor de Pro�ssional.
Encapsulamento
Quando consideramos uma estrutura fechada qualquer, observamos que alguns elementos são visíveis, enquanto outros não.
Exemplo
Ao observarmos uma pessoa nós podemos ver sua face, seu cabelo, seus braços, mas não temos acesso ao seu estômago nem
pulmão.
Na orientação a objetos temos esta mesma característica, pois classes de�nem estruturas fechadas, nas quais o acesso a seus
atributos e métodos deve ser controlado, e para tal iremos contar com três níveis de acesso:
Público (public)
Permite que qualquer um acesse o atributo ou método.
Privado (private)
Não permite acessos externos, sendo utilizado apenas na programação interna da classe.
Protegido (protected)
Permite a utilização na classe e nos descendentes, mas não permite acessos externos.
Quando não de�nimos nada em termos de nível de acesso, o padrão é o de pacote, ou seja, todas as classes do mesmo pacote
podem acessarlivremente, mas se ocorrer a importação desse pacote por uma classe pertencente a outro, essa classe externa
não terá acesso aos atributos e métodos com nível de pacote. 
Mais uma pequena alteração em nossa classe Pessoa... 
 
package exemplo010;
public class Pessoa{
 private String nome;
 private String telefone;
 public Pessoa(String nome, String telefone){
 this.nome = nome;
 this.telefone = telefone;
 }
 public void exibir(){
 System.out.println(nome+"::"+telefone);
 }
}
Essa alteração não impactará na classe chamadora, pois o construtor e o método exibir estão de�nidos como públicos, mas se
tentarmos acessar os atributos de p1 ou p2 a partir do main, como na primeira versão, ocorrerá um erro de compilação. 
p1.nome = "João"; // Esta linha irá gerar um erro de compilação
É muito comum que precisemos controlar o acesso a determinado atributo sem, no entanto, impedir esse acesso, e nesse ponto
devemos utilizar os getters e setters. 
Esse controle é chamado de encapsulamento, que trata de mais um dos pilares da
orientação a objetos e, em termos formais, visa ocultar detalhes da implementação interna
da classe, fornecendo apenas uma interface com métodos de negócio e métodos de acesso.
O método getter serve para obter o valor de um atributo interno, enquanto o setter permite escrever um valor nesse atributo. O
conjunto dos dois de�ne uma propriedade da classe.
Podemos implementar muito facilmente a técnica de encapsulamento em nossa classe Pessoa modi�cada.
 
package exemplo010;
public class Pessoa{
 public String getNome(){
 return nome;
 }
 public void setNome(String nome){
 this.nome = nome;
 }
 public String getTelefone(){
 return telefone;
 }
 public void setTelefone(String telefone){
 this.telefone = telefone;
 }
 private String nome;
 private String telefone;
 public Pessoa(String nome, String telefone){
 this.nome = nome;
 this.telefone = telefone;
 }
 public void exibir(){
 System.out.println(getNome()+"::"+getTelefone());
 }
}
Note que foram apenas acrescentados os métodos de leitura (getNome e getTelefone) e os métodos de escrita (setNome e
setTelefone). Para não ocorrer perda de semântica devido a alteração de nomes, o uso de this é necessário nos setters.
Polimor�smo
 Vídeo.
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
O último dos pilares da orientação a objetos é o polimor�smo, consistindo na possibilidade de uma classe descendente efetuar
alterações sobre métodos herdados, de forma a adaptar as funcionalidades a seu próprio contexto.
Esta talvez seja a característica mais poderosa da orientação a objetos, proporcionando grande �exibilidade a qualquer sistema, e
devemos compreendê-la corretamente para tirar o melhor proveito da metodologia.
Como já é de nosso conhecimento, por meio do processo de herança, as classes descendentes herdam todas as caraterísticas
existentes nas ancestrais.
Mas e se algumas ações não forem exatamente o que se espera?
É nesse ponto que precisamos do polimor�smo .
Observe o diagrama seguinte.
2
http://estacio.webaula.com.br/cursos/gon117/aula2.html
Este é um diagrama de classes da UML (Uni�ed Modeling Language) representando a classe Pro�ssional e descendentes diretos
e indiretos da mesma.
Tomando como base Pro�ssional, podemos dizer que todo objeto deste tipo irá trabalhar, assim como os objetos das classes
descendentes, mas certamente irão trabalhar de forma diferente.
se for um engenheiro pode estar indo fazer o projeto de uma casa ou de um carro;
no caso do médico talvez esteja indo operar alguém;
e um advogado estará acompanhando algum processo
e um advogado estará acompanhando algum processo.
No entanto, a frase seria a mesma: “Estou indo trabalhar”.
O uso de polimor�smo permitirá alterar a funcionalidade do método trabalhar para as diversas classes envolvidas.
Vamos observar um código com uso de polimor�smo, com a alteração da nossa classe Pro�ssional de exemplo. Essa alteração é
necessária para que o método exibir passe a mostrar também a pro�ssão, e não apenas o nome e telefone.
 
public class Profissional extends Pessoa{
 private String profissao; 
 public Profissional(String nome, String telefone, String profissao) {}
 super(nome, telefone);
 this.profissao = profissao;
 }
 @Override
 public void exibir() {
 super.exibir(); 
 // Chama o exibir de Pessoa, imprimindo nome e telefone
 System.out.println("\tTrabalha como "+profissao);
 // Complementa a informação acerca da profissão
 }
}
Note que o novo método exibir chama o original através do uso de super.
Observe também a presença da anotação @Override, que deve ser colocada nos métodos polimór�cos e signi�ca sobrescrito,
não devendo nunca ser confundido com a sobrecarga, cujo nome em inglês seria overload.
A seguir podemos observar um pequeno teste com chamadas ao método exibir.
 
package exemplo010; 
public class Exemplo010a {
 public static void main(String[] args) {
 Pessoa[] pessoas = {new Pessoa("Joao","1111-1111"),
 new Pessoa("Maria","2222-2222"),
 new Profissional("Luiz","3333-3333","Advogado")};
 for(int i=0; i< 3; i++)
 pessoas[i].exibir();
 }
}
Note que foi criado um vetor de Pessoa, aceitando tanto Pessoa quanto Pro�ssional. Isto se deve a uma lei da POO que de�ne o
seguinte: “qualquer descendente pode ser utilizado no lugar da classe”.
Se observarmos o mundo real, esta lei também pode ser aplicada, pois um pro�ssional é uma pessoa, embora nem sempre uma
pessoa seja um pro�ssional.
A saída desse programa será a seguinte:
Joao::1111-1111
Maria::2222-2222
Luiz::3333-3333
Trabalha como Advogado
Note que mesmo de�nido o vetor como do tipo Pessoa, o exibir correto foi chamado para o Pro�ssional existente neste vetor, e
isso se deve ao polimor�smo.
Classes Abstratas e Interfaces
 Vídeo.
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Normalmente confundimos muito as palavras abstração e abstrato, mas elas apresentam sentidos muito distintos:
Uma abstração é um modelo simpli�cado
de algo. 
Um elemento abstrato é algo intangível, que
não é palpável ou concreto.
Existem dois tipos de elementos abstratos em Java: classes abstratas e interfaces.
As classes abstratas são incompletas, não podem gerar objetos, mas servem de base para impor determinada característica
funcional a seus descendentes, que serão obrigados a implementar as funcionalidades abstratas para gerar objetos.
Exemplo
Um elemento abstrato da vida real seria mamífero, enquanto cachorro e gato são elementos concretos. Mesmo não podendo
gerar objetos, o elemento mamífero de�ne uma regra para seus descendentes, ou seja, para descender de mamífero precisa saber
mamar.
Vamos observar um exemplo de classe abstrata em Java envolvendo a criação de quatro classes.
 
public abstract class Mamifero {
 protected String familia;
 public abstract void mamar();
 public String getFamilia(){
 return familia;
 }
}
 
public class Cachorro extends Mamifero{
 public Cachorro() {
 familia = "Canidae";
 }
 @Override
 public void mamar() {
 System.out.println("Cachorro mamando...");
 }
}
 
public class Gato extends Mamifero{
 public Gato() {
 familia = "Felidae";
 }
 @Override
 public void mamar() {
 System.out.println("Gato mamando...");
 }
}
 
public class Exemplo011 {
 public static void main(String[] args) {
 Mamifero m = new Gato();
 m.mamar();
 }
}
Nós criamos inicialmente a classe abstrata Mamifero, com uso da palavra abstract em termos da de�nição da classe e do
método abstrato interno.  
Atenção
Essa classe não pode gerar instâncias, a�nal falta uma parte dela que é o método mamar( ), mas permite herança e obriga a
de�nição do método faltante. Isso pode ser observado nas classes Cachorro e Gato, descendentes de Mamifero, e que por serem
concretas podem ser instanciadas. 
Ao �nal, podemos ver uma classede teste, onde é instanciado um Gato no lugar de Mamifero, sendo chamado em seguida o
método mamar( ) implementado na classe descendente. Como esperado, teremos a impressão da frase “Gato mamando...”. 
Outro tipo de elemento abstrato é a interface, e esta não deve ser confundida com interface visual, que trata da interação com o
usuário.
Aqui estamos preocupados com a interface programacional, que se preocupa em de�nir quais métodos estarão disponíveis para
uso de determinado tipo de componente.
Em termos práticos, uma interface é um conjunto de assinaturas de métodos abstratos, os quais devem ser implementados pelas
classes que se proponham a tal. Ao implementar esses métodos, as classes passam a ser reconhecidas por algum ferramental
que os utiliza, promovendo funcionalidades especí�cas.
As interfaces são de grande utilização no Java, e podemos observar um exemplo a seguir, complementando o exemplo anterior.
 
public interface Voo {
 void voar();
}
 
public class Morcego extends Mamifero implements Voo{
 public Morcego() {
 familia = "Phyllostomidae";
 }
 @Override
 public void mamar() {
 System.out.println("Morcego mamando...");
 }
 @Override
 public void voar() {
 System.out.println("Morcego voando...");
 }
}
 
public class Exemplo011a {
 public static void main(String[] args) {
 Object[] objetos = {new Gato(), new Morcego(), 
 new Cachorro()};
 for(int i=0; i< 3; i++) {
 if(objetos[i] instanceof Voo)
 ((Voo)objetos[i]).voar(); 
 // Conversão de tipo (type cast) necessária
 }
 }
}
Neste exemplo temos a de�nição de uma interface, com o uso da palavra interface no lugar de class. Uma interface é
naturalmente abstrata, logo seus métodos são considerados por padrão públicos e abstratos.
Uma observação é a de que as interfaces não aceitam atributos, e podem ser consideradas como conjuntos de assinaturas de
métodos.
Podemos observar que a classe Morcego deriva de Mamifero e implementa a interface Voo com o uso da palavra implements.
Ao implementar a interface, ela se torna obrigada a implementar o método voar( ).
Ao �nal temos um pequeno teste, onde é percorrido um vetor de objetos, e perguntado a cada um deles se implementa Voo ou
não com o uso de instanceof, e caso implemente, ocorre a conversão (type cast) para o tipo da interface e a subsequente
chamada de voar ( ).
Executando o exemplo teremos apenas a frase “Morcego voando...” sendo impressa.
Dica
Note que implementar é muito diferente de herdar. Nesse caso �ca claro que Morcego é um Mamifero, e que ele implementa Voo,
mas não herda do mesmo.
Embora muitos confundam as interfaces com classes abstratas, as diferenças em termos metodológicos são muito grandes:
As classes abstratas de�nem uma regra
para sua família de classes.

As interfaces podem ser implementadas
por qualquer classe que necessite
participar de algum processo especí�co.
Atividade
1. Qual das características da Orientação a Objetos permite a alteração funcional de um método herdado, permitindo grande
�exibilidade e adaptabilidade ao ambiente?
a) Sobrecarga
b) Construtores
c) Encapsulamento
d) Polimorfismo
e) Destrutores
2. Segundo a sintaxe do Java, qual a palavra utilizada para indicar que uma classe é descendente de outra?
a) extends
b) implements
c) super
d) this
e) private
3. Você criou um novo sistema de �nanças e, como estratégia de desenvolvimento, resolveu criar um núcleo de cálculo adaptável,
e as classes que desejarem utilizar as funcionalidades desse núcleo deverão implementar um conjunto de métodos abstratos,
podendo pertencer a qualquer família de classes. Qual elemento de programação você deverá utilizar para viabilizar essa
funcionalidade?
a) Interface Programacional
b) Classe Abstrata
c) Classe Concreta
d) Mecanismo de Herança
e) Sobrecarga
Notas
POO1
O termo Programação Orientada a Objetos (POO) foi criado por Alan Kay, autor da linguagem de programação Smalltalk. Mas
mesmo antes da criação do Smalltalk, algumas das ideias da POO já eram aplicadas, sendo que a primeira linguagem a realmente
utilizar essas ideias foi a Simula 67, criada por Ole-Johan Dahl (1931-2002) e Kristen Nygaard (1926-2002) em 1967. Entretanto só
veio a ser aceito realmente nas grandes empresas de desenvolvimento de software por volta dos anos 1990.
Fonte:Wikibooks
<https://pt.wikibooks.org/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Objetos/Introdu%C3%A7%C3%A3o#Hist%C3%B3ria> .
Acesso em: 11 jan. 2019.
Polimor�smo2
Signi�ca “múltiplas formas”, ou seja, as diversas formas com que uma ação pode ser efetuada.
Referências
CORNELL, G.; HORSTMANN, C. Core java. 8. São Paulo: Pearson, 2010.
DEITEL, P.; DEITEL, H. Java, como programar. 8. São Paulo: Pearson, 2010.
FONSECA, E. Desenvolvimento de software. Rio de Janeiro: Estácio, 2015.
SANTOS, F. Programação I. Rio de Janeiro: Estácio, 2017.
Próxima aula
https://pt.wikibooks.org/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Objetos/Introdu%C3%A7%C3%A3o#Hist%C3%B3ria
Estrutura de tratamento de erros do Java;
Implementação da Modelagem Comportamental;
Biblioteca de classes para Coleções do Java.
Explore mais
Pesquise na internet sites, vídeos e artigos relacionados ao conteúdo visto.
Em caso de dúvidas, converse com seu professor online por meio dos recursos disponíveis no ambiente de aprendizagem.
Leia os textos:
Os 4 pilares da Programação Orientada a Objetos; <https://www.devmedia.com.br/os-4-pilares-da-programacao-orientada-a-
objetos/9264>
Fundamentos da linguagem Java. <https://www.ibm.com/developerworks/br/java/tutorials/j-introtojava1/index.html>
Leia o livro Programação em Java de Claro e Sobral publicado em 2008 pela Person.
https://www.devmedia.com.br/os-4-pilares-da-programacao-orientada-a-objetos/9264
https://www.ibm.com/developerworks/br/java/tutorials/j-introtojava1/index.html
Disciplina: Desenvolvimento de Software
Aula 3: Exceções e elementos comportamentais
Apresentação
Algo que devemos estar atentos na criação de um sistema é a possibilidade de ocorrência de erros durante a execução.
Precisamos trata-los, e o Java traz uma estrutura organizada para esse tratamento baseada no uso de classes de exceção e
instruções próprias. 
No entanto, ao observarmos, conseguimos diferençar qual o tipo e modelo da arma de fogo longo? Diversas opiniões surgem
para identi�car a arma de fogo. Fuzil? Ri�e? Espingarda? Carabina?
Estes são assuntos de relevância para qualquer programador que pretenda construir sistemas comerciais mais robustos.
Objetivos
Explicar a sintaxe Java para o Tratamento de Exceções;
Demonstrar a Modelagem Comportamental no Java;
Aplicar a biblioteca de Coleções Genéricas do Java.
Exceções
Muitas vezes temos que preparar nossos sistemas para a possibilidade de ocorrência de erros durante a execução, podendo
ocorrer pela indisponibilidade de algum recurso, como rede ou espaço em disco, pela entrada de dados em formato incorreto,
entre diversas outras situações.
 Outro assunto muito relevante para os sistemas atuais é a utilização de modelagem comportamental, aumentando o reuso de
processos e estruturas, o que pode ser feito no ambiente Java por meio de classes genéricas ou pelo uso de anotações. Inclusive,
uma importante biblioteca Java para o manuseio de coleções apresenta uma implementação atual baseada em classes
genéricas.
Nos ambientes orientados a objetos, os diversos erros de execução são encapsulados em classes especiais denominadas
exceções.
Temos a classe básica Exception, que de�ne apenas um código de erro e uma mensagem,
voltada para erros genéricos.
A partir desta classe, e utilizando o mecanismo de herança, são de�nidas exceções mais especí�cas, com maior gama de
informações acerca do erro.
Para tratarmos uma exceção devemos utilizar uma estrutura de �uxo especí�ca, baseada no comando try (tentar), o qual utiliza a
seguinte sintaxe:
try {
  // Bloco de comandos protegido
} catch (IOException e1) {
  // Tratamento de erro de IO
}catch (Exception e2) {
  // Tratamento de erro genérico
} �nally {
  // Execução obrigatória, independente da ocorrência de erros
}
Inicialmente é executado o bloco protegido pelo comando try, e se ocorre uma exceção do tipo IOException, ela é capturada em
e1 com o uso de catch(IOExeption e1), sendo executado o tratamento de erro de IO e seguindo para o bloco do �nally.
Para qualquer outro tipo de exceção, será executado o bloco para tratamento de erro genérico, com a captura do erro em e2, e
seguindo para �nally ao término. Lembrando que, segundo a orientação a objetos, qualquer descendente pode ser utilizado no
lugar da classe original, o que viabiliza essa funcionalidade.
Se invertermos a ordem dos blocos catch ocorrerá um erro de compilação, pois o fato de Exception ser mais genérico impediria a
captura de quaisquer outras exceções.
Quanto ao bloco �nally, mesmo sem ocorrência de erros, ele será executado.
Um exemplo prático no qual utilizaríamos essas instruções seria na inserção de dados em um banco, onde devemos abri-lo,
inserir os registros e fechar o banco. Ocorrendo ou não erros durante a inserção, o banco deve ser fechado.
ABRIR_BANCO_DE_DADOS( );
try {
   INSERIR( );
   INSERIR( );
   // Diversos comandos de inserção
} catch (Exception e) {
    // Tratamento de erro genérico
} �nally {
FECHAR_BANCO_DE_DADOS( );
}
Para qualquer exceção não silenciosa, o compilador considerará como erro caso a possibilidade de ocorrência da mesma não
seja tratada. Nesses casos precisamos utilizar a estrutura try..catch, ou avisar ao compilador que não será tratado, mas sim
ecoado para o chamador do método, por meio da assinatura com throws.
Também podemos criar nossas próprias exceções, de forma a utilizá-las como sinalizações de erros especí�cos de nossos
sistemas.
 
public class ErroCalc extends Exception{
 public ErroCalc(int a, int b){
 super("Erro com os numeros "+a+" e "+b);
 }
}
Em nossa exceção personalizada (ErroCalc) temos um construtor que recebe dois valores inteiros, e chama o construtor de
Exception, com o uso de super, passando a mensagem correta.
Esta exceção poderia ser utilizada em uma classe de nosso sistema.
 
public class Calculadora {
 public int somar(int a, int b){
 return a+b;
 }
 public int dividir(int a, int b) throws ErroCalc {
 if(b==0)
 throw new ErroCalc(a, b);
 return a/b;
 }
}
No caso da classe Calculadora, temos os métodos somar, onde não ocorre exceção, e dividir, que gera ErroCalc quando o
parâmetro b tem valor zero. Note que não basta alocar o objeto ErroCalc com new, sendo necessário o uso do comando throw
para lançar a exceção.
  Caso não ocorra tratamento com try..cath, ao lançar ErroCalc a execução de dividir é imediatamente interrompida, retornando ao
chamador, sendo também necessário informar ao compilador que esse método pode gerar uma exceção desse tipo com o uso do
comando throws em sua assinatura.
Podemos testar facilmente nossa exceção com o uso de um objeto do tipo Calculadora.
 
public class TesteCalc {
 public static void main(String[] args) {
 Calculadora c1 = new Calculadora();
 try {
 System.out.println(c1.somar(2, 3));
 System.out.println(c1.dividir(6, 3));
 System.out.println(c1.dividir(6, 0));
 } catch (ErroCalc e)
 System.out.println(e.getMessage());
 }
 }
}
Neste exemplo, a condição que irá gerar a exceção será a chamada c1.dividir(6,0), mas mesmo que não colocasse o valor zero, o
compilador exigiria o tratamento, já que dividir assinala uma possibilidade de exceção com throws ErroCalc.
A saída que obteremos será a seguinte:
O que é Modelagem Comportamental?
Em muitas situações não conseguimos expressar a realidade por meio de simples objetos.
Exemplo
Photo by Slava Bowman on Unsplash
Somos capazes de modelar um carro, e a partir daí utilizarmos dois, três, ou até algumas dezenas de objetos desse tipo, mas
como faríamos para modelar um engarrafamento no trânsito?
Para uma situação desse tipo, não importa qual carro esteja entrando ou saindo, mas sim que o trecho esteja engarrafado. Logo,
não são os objetos que de�nem a abstração principal, mas sim o comportamento.
Poderíamos dizer o mesmo sobre uma �la. Você pode ter uma sequência de pessoas, elefantes, carros, ou qualquer outra coisa, e
todas essas sequencias organizadas seriam �las, independente dos objetos que as constituem.
Essa generalização também pode ser feita para uma pilha de pratos ou de livros, pois não importa de qual tipo de objeto se trate, e
sim que estejam empilhados.
Na programação utilizamos diversos comportamentos, normalmente de�nidos por estruturas de dados, como as próprias Filas e
Pilhas, por exemplo.
Em termos de orientação a objetos, existem duas ferramentas que permitem a implementação de modelos comportamentais:
Classes Genéricas e Anotações.
Classes Genéricas
As classes genéricas, também chamadas de classes template, já tinham sido idealizadas no início da orientação a objetos, e
eram comuns em linguagens como o C++, mas veio para o Java em versões um pouco mais recentes por intermédio dos
Generics.
Quando criamos uma classe genérica estamos modelando um comportamento com lacunas bem de�nidas ao qual serão
atribuídas classes para preencher tais lacunas e completar a funcionalidade abstrata previamente de�nida.
Vamos observar um exemplo.
 
package exemplo020;
 public class Pilha‹;K›; {
 class NoPilha‹;K›; {
 K dado;
 NoPilha‹;K›; proximo;
 }
 private NoPilha‹;K›; topo = null;
 public void empilhar(K dado){
 NoPilha‹;K›; novo = new NoPilha<>();
 novo.dado = dado;
 novo.proximo = topo;
 topo = novo;
 }
 public K desempilhar(){
 if(topo==null)
 return null;
 NoPilha‹;K›; antigo = topo;
 topo = topo.proximo;
 return antigo.dado;
 }
}
Neste exemplo foi de�nida uma classe genérica de Pilha, com os métodos para empilhar e desempilhar (push/pop), podendo ser
observada a presença da lacuna de�nida pela letra K. Na verdade poderia ser qualquer letra, devendo apenas ser colocada junto
ao nome da classe.
public class Pilha‹K›
A letra K representa algo genérico e será substituída em todas as ocorrências posteriores quando de�nirmos o tipo de objeto a ser
utilizado.
Por exemplo, se utilizarmos String, o método empilhar pode ser lido da seguinte forma:
Fonte: https://www.tutorialspoint.com/data_structures_algorithms/stack_algorithm.htm
public void empilhar(String dado){
     NoPilha ‹String› novo = new NoPilha‹›();
     novo.dado = dado;
     novo.proximo = topo;
     topo = novo;
}
É interessante observar também a de�nição de uma inner class chamada NoPilha, ou seja, uma classe utilitária interna, que só
pode ser utilizada na programação da classe Pilha. Na prática ela auxilia na construção de uma estrutura de pilha típica, onde um
valor é colocado no topo, e deve apontar para o elemento logo abaixo na pilha (proximo).
Sempre devemos lembrar que a pilha trata de uma estrutura LIFO (Last In First Out), o que signi�ca que o último a entrar é o
primeiro a sair. Isto faz sentido se �zermos uma analogia com uma pilha de pratos, já que não é possível pegar o prato de baixo
sem que os demais caiam.
Agora podemos criar um programa para testar nossa classe de Pilha.
 
package exemplo020;
public class Exemplo020 {
 public static void main(String[] args) {
 Pilha pilha1 = new Pilha<>();
 pilha1.empilhar(5);
 pilha1.empilhar(7);
 pilha1.empilhar(9);
 Integer x;
 while((x=pilha1.desempilhar())!=null)
 System.out.println(x);
 }
}
Esse programa inicialmente cria uma Pilha de elementos Integer (classe wrapper para ı), e em seguida empilha os valores 5, 7 e
9.
Observando o que ocorre a seguir, vemos a declaração de uma variável x que receberá os valores desempilhados, enquanto esse
valor for diferente de nulo, imprimindo x a cada rodada.
Por se tratar de uma estrutura LIFO, é naturalque os números sejam impressos na ordem inversa da entrada, ou seja, serão
impressos os valores 9, 7 e 5.
Coleções
As coleções são de grande importância para o Java, sendo organizadas pela Oracle em um grupo denominado JCF (Java
Collections Framework), o qual foi todo implementado com o uso de classes genéricas.
Ao contrário de vetores, que apresentam um número de elementos �xo, as coleções funcionam internamente como listas
encadeadas, e permitem que objetos sejam adicionados ou removidos a qualquer momento.
Nós podemos veri�car a relevância dessa família de classes pelo simples fato de ter sido criada uma nova funcionalidade para a
estrutura for baseada em coleções, e que posteriormente foi expandida para vetores.
Em outras linguagens existem estruturas foreach, com funcionamento similar, e a leitura que devemos fazer é “para cada
elemento pertencente à coleção”.
A sintaxe básica seria a seguinte:
for( Classe obj: Coleção ‹Classe› ) {
     // Bloco de instruções
}
Uma Collection é uma classe abstrata e que, portanto, não pode ser utilizada
diretamente, mas nós podemos instanciar os seus diversos descendentes com
funcionalidades especí�cas.
Podemos observar, a seguir, um exemplo de uso de ArrayList, descendente de Collection.
 
package exemplo021;
import java.util.ArrayList;
public class Exemplo021 {
 public static void main(String[] args) {
 ArrayList‹String› lista = new ArrayList<>();
 lista.add("Primeiro");
 lista.add("Segundo");
 lista.add("Terceiro");
 for(String x: lista){
 System.out.println(x);
 }
 }
}
Neste exemplo é criada uma coleção do tipo ArrayList, com elementos do tipo String, e em seguida adicionamos três elementos
nessa coleção com o uso do método add.
Depois de adicionados os elementos, podemos percorrer a lista com uso do for, e a variável x receberá o primeiro valor da lista na
primeira rodada, em seguida, o segundo e �nalmente o terceiro, imprimindo o valor recebido a cada rodada.
 Com isso teremos a seguinte saída:
Nas versões atuais do Java é possível também utilizar operadores lambda, segundo o paradigma funcional, e o trecho voltado
para a impressão dos valores poderia ser escrito da seguinte forma:
lista.forEach((x) -> {
     System.out.println(x);
     });
Os principais métodos do ArrayList‹E› são apresentados no quadro abaixo:
Método Retorno
boolean add(E e) Adiciona o elemento ‹strong›e‹/strong› ao final da lista.
void clear( ) limpa a lista.
boolean contains(Object o) Retorna ‹strong›true‹/strong› caso o objeto se encontre na lista.
E get(int index) Retorna o elemento na posição especificada por ‹strong›index.‹/strong›
boolean remove(Object o) Remove o objeto da lista se ele estiver lá.
E remove(int index) Remove o elemento na posição ‹strong›index‹/strong› e retorna o mesmo.
int size( ) Retorna o tamanho da lista.
Dentre as diversas outras classes do JCF, além do ArrayList outra de grande utilização é HashMap. Com o uso desta classe é
possível estabelecer relações do tipo chave-valor com muita facilidade.
Exemplo
Se quisermos fazer um controle no qual temos o código de nossos produtos no formato inteiro e os nomes no formato texto,
poderemos declarar o HashMap da seguinte forma:
HashMap ‹ Integer, String > produtos = new HashMap‹›( );
Observando a declaração do HashMap, vemos que devem ser colocadas na tipi�cação dele a classe da chave e a classe do dado
(valor).
 
package exemplo022;
import java.util.HashMap;
import java.util.Scanner;
public class Exemplo022 {
 public static void main(String[] args) {
 Scanner teclado = new Scanner(System.in);
 HashMap‹Integer,String› produtos = new HashMap<>();
 int opcao;
 do{
 System.out.println("Digite 1 para incluir, "+
 "2 para consultar, 0 para sair");
 opcao = teclado.nextInt();
 switch(opcao){
 case 1:
 System.out.println("Código do novo produto:");
 int codigoN = teclado.nextInt();
 System.out.println("Nome do novo produto:");
 String nomeN = teclado.next();
 produtos.put(codigoN, nomeN);
 break;
 case 2:
 System.out.println("Digite o código:");
 int codigo = teclado.nextInt();
 String nome = produtos.get(codigo);
 if(nome!=null)
 System.out.println(nome);
 break;
 }
 } while(opcao!=0);
 }
}
Nesse programa utilizamos uma estrutura de repetição do tipo do..while, onde é solicitada ao usuário qual ação ele deseja
efetuar, sendo 1 referente à inclusão de um produto, 2 para a consulta e 0 para encerrar a execução.
Ao escolher a opção 1, será executado o primeiro bloco do switch..case, onde iremos solicitar o código e o nome do novo
produto, procedendo a inclusão dele no HashMap com o uso do método put.
Se a opção escolhida for 2, solicitaremos o código do produto e buscaremos o nome dele no HashMap por meio do método get, o
qual poderá retornar o nome, ou nulo no caso em que a chave não estiver presente nesse HashMap.
Podemos observar, a seguir, uma possível saída para esse programa.
Os principais métodos do HashMap ‹K,V› são apresentados no quadro seguinte:
Método Retorno
void clear( ) Limpa o mapa.
boolean containsKey(Object key) Verifica se o mapa contém a chave especificada.
boolean containsValue(Object value) Verifica se o mapa contém o valor especificado.
V get(Object key) Retorna o valor correspondente à chave.
V put(K key, V value) Associa o valor à chave no mapa.
V remove(Object key) Remove o mapeamento para a chave especificada.
int size( ) Retorna a quantidade de mapeamentos.
Collection ‹V› values( ) Retorna uma coleção com os valores mapeados.
Nós vimos aqui apenas os dois principais elementos do JCF, mas existem muitas outras classes disponíveis nessa biblioteca.
É interessante observar também que, como estruturas de dados, tais elementos podem ser combinados para criar, por exemplo,
listas de mapas de listas.
ArrayList‹ HashMap‹ Integer, ArrayList‹String› > >
Esta estrutura de exemplo, um pouco mais complexa, permitiria guardar coleções de tabelas de mapeamento, onde cada
mapeamento se refere a uma coleção.
Exemplo
Poderíamos ter uma coleção dos setores da empresa, onde cada setor seria um mapeamento de departamentos e coleções de
pessoas que trabalham nesses departamentos.
Re�exividade Computacional
Podemos de�nir re�exividade computacional como a habilidade de um objeto conhecer a si próprio, sua estrutura e a utilização
de seus métodos.
Na linguagem Java os objetos derivam direta ou indiretamente da classe Object, que seria a classe base de toda a plataforma. No
entanto, existe outra classe chamada Class, que permite observar a estrutura de qualquer objeto por meio da re�exividade.
Atenção
Não confundir a palavra reservada class (minúsculo) para de�nição de classes com a classe Class (maiúsculo) para gerência de
classes.
Por meio de Class podemos obter informações acerca dos atributos da classe em objetos do tipo Field e de seus métodos por
meio de objetos Method e Parameter.
Além de consultar as informações, podemos mudar o valor de atributos e invocar métodos com o uso destas classes.
Vamos observar um pequeno exemplo, com uma classe Pessoa de�nida de forma simples.
 
package exemplo023; 
public class Pessoa { 
 public String nome; 
 public String telefone; 
 public void exibir(int quantidade){ 
 for(int i=0; i ‹ quantidade; i++) 
 System.out.println(nome+"::"+telefone); 
 } 
}
 
package exemplo023;
import java.lang.reflect.Field;
public class Exemplo023 {
 public static void main(String[] args) throws Exception {
 Object objeto =
 Class.forName("exemplo023.Pessoa").newInstance();
 Class classe = objeto.getClass();
 // Reconhecendo os atributos do objeto...for(Field f: classe.getFields())
 System.out.println(f.getName()+"::"+f.getType());
 // Alterando os valores e invocando o método...
 classe.getField("nome").set(objeto,"João");
 classe.getField("telefone").set(objeto,"1111-1111");
 classe.getMethod("exibir", int.class).invoke(objeto, 2);
 } 
}
Note que no exemplo o objeto da classe Pessoa é criado a partir de seu nome completo, incluindo o pacote, no formato texto, e
que conseguimos extrair os atributos com objetos Field. Qualquer nome de classe que fosse utilizado iria funcionar e mostraria
os atributos de�nidos no âmbito da classe.
Uma observação a ser feita é a de que o método main acrescenta throws Exception em sua assinatura. Isto é necessário porque
o método forName pode gerar uma exceção caso não encontre o nome da classe passada como parâmetro no CLASSPATH.
Além de obter os dados acerca dos atributos, também alteramos os valores dos campos com o comando set. Abaixo, podemos
observar uma linha com método set desdobrada para melhor compreensão.
Field f = classe.getField("nome"); 
     // Captura o atributo nome da classe no Field f 
f.set(objeto, "João"); 
     // Utiliza o método set para alterar o valor em objeto.
Finalmente, invocamos um método passando parâmetros para o mesmo com o uso do invoke. Novamente vamos desdobrar a
linha para facilitar a compreensão.
Method m = classe.getMethod("exibir", int.class); 
     // Captura a versão do método exibir que recebe um valor 
     // inteiro como parâmetro 
m.invoke(objeto,2); 
     // Invoca este método passando o valor 2 para o parâmetro.
Podemos observar, a seguir, a saída esperada para a execução desse código:
Anotações
Por que falamos acerca de re�exividade computacional?
Certamente é um assunto complexo, mas necessário para compreender os fundamentos da criação e utilização de anotações.
As anotações são metadados anexados às classes que podem ser reconhecidos por
ferramentas externas para as mais diversas �nalidades. Atualmente, é comum seu uso em
diversos frameworks, principalmente os de persistência de dados.
Sem a re�exividade computacional essas ferramentas não conseguiriam reconhecer tais anotações em meio ao código da
classe.
 
Essa é uma modelagem comportamental que segue o caminho inverso das classes genéricas, pois nessas primeiras as classes
são aplicadas ao comportamento, enquanto nas anotações iremos aplicar o comportamento às classes.  
 
package exemplo024;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Retention(value=RetentionPolicy.RUNTIME)
@Target(value=ElementType.TYPE)
public @interface Autoria {
 String autor();
 int ano();
 String empresa() default "UNESA";
}
Para de�nir uma anotação precisamos utilizar o comando @interface, além de de�nir a utilização dela com @Target, e neste
exemplo indica que a anotação será voltada para classes, mas que poderiam ser diversos outros tipos, como métodos e atributos,
bem como o escopo de utilização com @Retention, colocado aqui como em tempo de execução.
Para essa anotação criamos três campos, sendo que dois são de preenchimento obrigatório e um opcional, no caso empresa, já
que é de�nido um valor padrão com default.
Após criar nossa interface de anotação, podemos aplicá-la a uma classe.
 
package exemplo024;
@Autoria(autor = "Denis", ano = 2018)
public class Carro {
 // O código interno da classe não será criado 
}
Note que o uso da aplicação é bastante simples, assemelhando-se muito a um comentário, mas necessitando sempre do
preenchimento de campos obrigatórios.
O passo �nal é o mais complexo, justamente por necessitar de elementos de re�exividade computacional, e trata do
reconhecimento das anotações pelas ferramentas externas.
O processo demonstrado a seguir é o mesmo utilizado pelos frameworks na automatização de diversas atividades.
 
package exemplo024;
 public class Exemplo024 {
 public static void main(String[] args) {
 Object[] objetos = {new Carro(), "XPTO" };
 for(Object obj: objetos){
 Class c1 = obj.getClass();
 if(c1.isAnnotationPresent(Autoria.class)){
 Autoria a1 =
 (Autoria)c1.getAnnotation(Autoria.class);
 System.out.println("Classe " + c1.getName() +
 " escrita por " + a1.autor() + " em " +
 a1.ano());
 } else {
 System.out.println("Classe " + c1.getName() +
 " sem autoria definida");
 }
 }
 }
}
Incialmente de�nimos um vetor de objetos, recebendo um Carro e uma String, e nesse caso apenas o Carro traz a anotação de
Autoria.
Ao percorrer o vetor, para cada Object do mesmo iremos obter o Class, e em seguida perguntar se a anotação de Autoria está
presente.
if(c1.isAnnotationPresent(Autoria.class))
Estando presente iremos capturar a anotação encontrada, sendo necessário uma conversão de tipo, já que o método retorna uma
anotação de forma genérica.
Autoria a1 = (Autoria)c1.getAnnotation(Autoria.class); // Conversão de tipo com (Autoria)
Com isso conseguimos imprimir os valores digitados para autor e ano, ou a mensagem de que a autoria não está de�nida quando
a anotação não está presente.
Podemos observar a saída do programa a seguir:
Classe exemplo024.Carro escrita por Denis em 2018
Classe java.lang.String sem autoria de�nida
Atividade
1. Em muitas situações, mas em particular quando estamos criando uma biblioteca de componentes, não queremos
necessariamente tratar uma exceção ocorrida, apenas ecoá-la ao processo chamador para que este sim efetue o tratamento.
Qual a palavra reservada utilizada na assinatura de um método qualquer para ecoar a exceção?  
a) catch
b) throw
c) finally
d) try
e) throws
2. Você desenvolveu um sistema e descobriu que as atividades de inserção, exclusão e consulta aos dados era extremamente
repetitiva em termos de programação. Com isso resolveu generalizar a solução, ao invés de criar dezenas de classes similares.
Baseado no esqueleto de uma dessas classes, e sabendo que todas as chaves são inteiras, faça a implementação inicial da
classe genérica que daria suporte às mesmas.
public class PessoaDAO { 
   public void inserir(Pessoa entidade){ } 
   public void excluir(Integer chave){ } 
   public Pessoa buscar(Integer chave){ } 
   public ArrayList‹Pessoa› buscarTodos( ){ }
}
3. Ao de�nir um novo sistema você se encontra perante uma situação na qual deve modelar a estrutura para representar os dados
de funcionários e dependentes, segundo uma relação de 1 para n, sendo que as classes Funcionario e Dependente já estão
implementadas. Qual a de�nição de estrutura mais adequada, com uso do JCF?
a) HashMap‹Funcionario, ArrayList‹Dependente>>
b) ArrayList‹HashMap‹Funcionario, Dependente>>
c) HashMap‹Funcionario, Dependente>
d) HashMap‹ArrayList‹Funcionario›, ArrayList‹Dependente>>
e) HashMap‹ArrayList‹Funcionario›, Dependente>
Notas
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma
simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográ�ca e de impressos.
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma
simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográ�ca e de impressos.
Referências
CORNELL, G.; HORSTMANN, C. Core java.8. São Paulo: Pearson, 2010.
DEITEL, P.; DEITEL, H.Java, como programar. 8. São Paulo: Pearson, 2010.
FONSECA, E. Desenvolvimento de software. Rio de Janeiro: Estácio, 2015.
SANTOS, F. Programação I Rio de Janeiro: Estácio, 2017.
Próxima aula
Componentes de uma interface grá�ca;
Uso de componentes visuais e eventosem sistemas desktop;
Componentes swing para a criação de interfaces grá�cas.
Explore mais
Para entender melhor os temas tratados nesta aula, acesse os seguintes materiais:
Generic types; <https://docs.oracle.com/javase/tutorial/java/generics/types.html >
Java/Exceções. <https://pt.wikibooks.org/wiki/Java/Exce%C3%A7%C3%B5es>
https://docs.oracle.com/javase/tutorial/java/generics/types.html
https://pt.wikibooks.org/wiki/Java/Exce%C3%A7%C3%B5es
Desenvolvimento de software
Aula 04: Interfaces Visuais para Desktop
Apresentação
O conceito de GUI está relacionado à utilização de elementos padronizados de interatividade na forma grá�ca, visando
aumentar a usabilidade de um sistema e proporcionando grande ganho ergonômico ao usuário.  
Interfaces consistentes permitem que o usuário compreenda mais rapidamente as funcionalidades de novos aplicativos.
Nós, como programadores, devemos ser capazes de lidar com estas interfaces grá�cas, e a linguagem Java nos fornece
algumas bibliotecas capazes de facilitar bastante nosso trabalho, como awt e swing. 
Saber utilizar os componentes das bibliotecas, e controlar a funcionalidade do sistema por meio de eventos, irá viabilizar a
construção de aplicativos grá�cos para desktop de forma consistente e produtiva.
Objetivos
Identi�car os conceitos relacionados às interfaces grá�cas;
Explicar o uso de componentes visuais e eventos em sistemas desktop;
Usar os componentes swing para a criação de Interfaces Grá�cas.
GUI (Graphical User Interface)
Os primeiros computadores pessoais trabalhavam no modo texto, com comandos simples de entrada e saída para interação com
vídeo e teclado e até mesmo jogos eram feitos com caracteres ASCII.
Os pesquisadores da Xerox foram pioneiros na criação de interfaces grá�cas, de�nindo conceitos que persistem até os dias
atuais, como janelas, menus, caixas de opção, caixas de seleção e ícones.
As empresas Apple e Microsoft seguiram as ideias de�nidas pela Xerox na criação de suas interfaces grá�cas, sendo o Macintosh
lançado em 1984, o qual se tornou o primeiro produto de sucesso a utilizar uma interface grá�ca.
No caso da Microsoft, as interfaces grá�cas inicialmente eram chamadas a partir do MS-DOS, recebendo o nome de Windows, e
foi somente a partir de 1990, com a versão 3.0, que este sistema de janelas se popularizou.
Outras plataformas também passaram a disponibilizar ambientes baseados em janelas, como XWindow no UNIX e Linux,
Workbench no Commodore Amiga, e GEM nos computadores Atari.
Qualquer que seja a GUI, ela deve utilizar um conjunto de tecnologias visando à criação de uma plataforma de interação com o
usuário.
Em computadores pessoais, o conjunto padrão é denominado WIMP (window, icon, menu, pointer), ou seja, é um ambiente
composto de janelas, ícones, menus e ponteiros. Nesse sistema, utiliza-se um dispositivo de ponteiro como o mouse para
controlar a posição do cursor e apresentar informação organizada em janelas e representada por meio de ícones.
Em ambientes WIMP, os gerenciadores de janelas facilitam a interação entre as representações grá�cas, aplicações e o sistema
de gerenciamento de hardware. A sensação proporcionada por estes gerenciadores de janelas, incluindo a interação entre janelas
e outros elementos grá�cos, produz um ambiente denominado desktop.
Bibliotecas grá�cas do Java
O ambiente Java traz, por padrão, duas bibliotecas que objetivam a criação de sistemas baseados em janelas:
awt (Abstract Window Toolkit), 
trata da API original do Java para GUI.
swing, parte da JFC 
(Java Foundation Classes).
Existe também uma terceira biblioteca denominada swt (Standard Widget Toolkit), criada pela IBM e mantida pela Eclipse
Foundation.
Nós utilizaremos a biblioteca swing, por ser padrão do ambiente Java e por de�nir o aspecto para os componentes visuais de
forma independente, ao contrário do awt, que exibe os componentes de acordo com o aspecto proporcionado pela plataforma ou
pelo sistema operacional.
 
Nas bibliotecas swing e awt temos componentes visuais como botões, campos de texto e
listas, voltados para a interação com o usuário, e componentes chamados de contêineres,
responsáveis por agrupar os componentes iniciais.
O principal contêiner é a janela, e dentro dela podemos ter botões e outros componentes visuais simples, bem como painéis, que
podem agrupar outros componentes visuais e painéis de forma recursiva.
Para ajustar a forma como estes componentes serão dispostos sobre o contêiner, devemos utilizar os componentes de layout.
Vamos ilustrar este processo no exemplo seguinte.
 
import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.FlowLayout;
import java.awt.HeadlessException;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class MinhaJanela extends JFrame{
public MinhaJanela() throws HeadlessException {
super("Apenas um teste");
setLayout(new BorderLayout());
setBounds(10, 10, 300, 200);
JPanel jp = new JPanel(new FlowLayout());
jp.add(new Button("OK"));
jp.add(new Button("Cancela"));
add(jp,"South");
}
public static void main(String[] args) {
new MinhaJanela().setVisible(true);
}
}
Neste exemplo nós criamos uma classe descendente de
JFrame, que na prática seria uma janela, e efetuamos algumas
con�gurações.
Inicialmente chamamos o construtor do pai com a passagem
do título da janela, de�nimos o layout como BorderLayout
(dividido em Norte, Sul, Leste, Oeste e Centro), e de�nimos a
posição, altura e largura com uso de setBounds.
Em seguida foi criado um painel com layout sequencial
(FLowLayout), sendo adicionados dois botões a este painel, o
qual é �nalmente adicionado à janela na posição Sul.
O resultado você confere na imagem ao lado.
Podemos veri�car alguns layouts disponíveis na tabela seguinte.
Layout Descrição
BorderLayout Aceita até cinco componentes, os quais devem ser posicionados em North, South, East, West e Center.
BoxLayout Coloca os componentes em uma linha ou coluna simples, podendo ser alinhados.
CardLayout Controlado por uma lista drop-down, permite exibir painéis de componentes de forma alternada.
FlowLayout Apenas coloca os componentes sequencialmente em uma linha, mas serve como base aos painéis de CardLayout.
GridBagLayout Extremamente sofisticado e complexo, divide o layout em um grid e depois permite mesclar células e adicionar espaços
para o posicionamento dos componentes.
GridLayout Trabalha com um grid simples, e os componentes vão preenchendo sequencialmente os espaços definidos.
O método main irá apenas instanciar um objeto de janela e torná-lo visível.
Além das janelas criadas com JFrame podemos de�nir caixas de diálogo com JDialog, e utilizar alguns diálogos padronizados
com JOptionPane. Iremos utilizar os diálogos nas situações em que fazemos uma pergunta ao usuário, ou quando desejarmos
informá-lo acerca de algo.
Até mesmo em sistemas de linha de comando podemos utilizar os diálogos, e o componente JOptionPane já traz boa parte das
necessidades usuais de entrada de dados para um sistema deste tipo.
Método Descrição
showConfirmDialog Diálogo de confirmação no estilo “sim/não/cancela”.
showInputDialog Solicitação de dados ao usuário.
showMessageDialog Exibe uma mensagem para o usuário.
showOptionDialog Unificação dos outros três tipos.
Vamos observar um pequeno exemplo de utilização do JOptionPane.
 
import javax.swing.JOptionPane;
public class ExemploOptionPane {
public static void main(String[] args) {
int a = new Integer(
JOptionPane.showInputDialog("Primeiro Numero:"));
int b = new Integer(
JOptionPane.showInputDialog("Segundo Numero:"));
int c = a + b;
JOptionPane.showMessageDialog(null, "A soma será: "+c, "Soma",
JOptionPane.INFORMATION_MESSAGE);
}
}
A sequencia de execução resultará na exibição dos seguintes diálogos:
Neste pequeno exemplo temos o uso do método showInputDialog para solicitar os valores ao usuário, os quais devem ser
convertidos para inteiro, pois são recebidos como texto. Em seguida, efetuamos a soma dos números fornecidos e exibimoso
resultado por meio do método showMessageDialog.
Note que o parâmetro JOptionPane.INFORMATION_MESSAGE fará com que apareça o ícone padrão de informação na caixa de
diálogo, podendo ser utilizados também outros ícones.
Interação com o usuário a partir da operação de clique do mouse.
Digitação de valores pelo usuário.
Podem ser marcados ou desmarcados com o clique do mouse.
Representação de conjuntos de dados, podendo ser retráteis ou não.
Conjuntos de listas de ações agrupadas, localizados normalmente na parte superior da tela.
Método Descrição
JOptionPane.INFORMATION_MESSAGE Informação comum.
JOptionPane.ERROR_MESSAGE Indicativo de erro.
JOptionPane.QUESTION_MESSAGE Interrogação, para efetuar perguntas.
JOptionPane.WARNING_MESSAGE Sinal de atenção ou alerta.
Componentes visuais 
A padronização de componentes nas diversas plataformas trouxe muitos benefícios em termos de aprendizagem para os
usuários. Como as interfaces grá�cas apresentam os mesmos conceitos visuais, a utilização de um novo sistema se torna
intuitiva.
É importante que saibamos utilizar os diversos componentes visuais para a construção de nossas telas. 
Toda biblioteca GUI apresenta componentes visuais padronizados, como:
A �gura seguinte mostra a maior parte destes componentes, segundo o aspecto visual proporcionado pela biblioteca swing.
Podemos ver no quadro abaixo as informações acerca dos componentes swing expostos na �gura, de acordo com a numeração
adotada.
Número Componente Funcionalidade
1 JLabel Representa um texto estático, podendo aceitar imagens (icon).
2 JTextField Campo de entrada de texto.
3 JButton Representa um botão tradicional.
4 JToggleButton É um botão selecionável, estilo on/off.
5 JProgressBar Barra de progresso, muito utilizada para acompanhamento de tarefas demoradas.
6 JRadioButton Deve ser utilizado para opções mutuamente exclusivas, ou seja, quando apenas uma opção pode ser
escolhida.
7 JCheckBox Utilizado para situações em que podemos escolher mais de uma opção.
8 JTable Representação de dados de forma tabular, como em uma planilha.
9 JTree Representação de dados em forma hierárquica (árvore).
10 JComboBox Conhecido como caixa de combinação, este componente é uma lista drop-down ou “retrátil”.
11 JList Representa uma lista de valores.
Para utilizarmos estes diversos componentes deveremos saber como instanciá-los e agrupá-los de forma adequada em meio aos
contêineres visuais. Alguns componentes irão exigir um modelo de programação mais robusto, particularmente aqueles que
representam coleções de dados, como listas e árvores.
O exemplo seguinte demonstra a criação de uma janela com alguns dos componentes visuais.
 
import java.awt.GridLayout;
import javax.swing.*;
public class JanelaSimples extends JDialog{
private JTextField txt1;
private JCheckBox chk1,chk2;
private JRadioButton rb1, rb2;
private JButton btn1, btn2;
public JanelaSimples() {
setLayout(new GridLayout(4,2));
add(new JLabel("Nome"));
add(txt1=new JTextField(10));
// Campo de Texto com 10 posições
add(new JLabel("Opções de Leitura"));
JPanel jp1 = new JPanel(new GridLayout(2,1));
jp1.add(chk1 = new JCheckBox("Revista Mensal"));
jp1.add(chk2 = new JCheckBox("Versão Digital"));
// Painel com as caixas de seleção
add(jp1);
add(new JLabel("Graduado"));
JPanel jp2 = new JPanel(new GridLayout(2,1));
jp2.add(rb1 = new JRadioButton("sim"));
jp2.add(rb2 = new JRadioButton("não"));
// Painel com os botões de rádio
bp.add(rb1);
bp.add(rb2);
// // Agrupamento dos botões de rádio
add(jp2);
add(btn1 = new JButton("OK"));
add(btn2 = new JButton("Cancela"));
}
public static void main(String[] args) {
JanelaSimples j1 = new JanelaSimples();
j1.setModal(true);
j1.setBounds(0,0, 300, 300);
j1.setVisible(true);
}
}
Neste exemplo nós criamos uma janela
a partir de JDialog, organizando o
posicionamento dos componentes com
um GridLayout de 4 linhas por 2
colunas.
 
setLayout(new GridLayout(4,2));
Em seguida, começamos a adicionar os componentes ao grid, preenchendo sequencialmente as posições, ou seja, os
componentes vão sendo adicionados na primeira linha, e quando não há mais espaço vai para a linha seguinte, repetindo-se o
processo sucessivamente.
Nos momentos em que precisamos adicionar mais de um componente em uma mesma célula, como no caso das caixas de
seleção e dos botões de rádio, utilizamos JPanel com organização via GridLayout de 2 linhas por 1 coluna. Os componentes são
adicionados ao JPanel, e este é adicionado ao JDialog.
 
JPanel jp1 = new JPanel(new GridLayout(2,1));
jp1.add(chk1 = new JCheckBox("Revista Mensal"));
jp1.add(chk2 = new JCheckBox("Versão Digital"));
// Painel com as caixas de seleção
add(jp1);
Por �m, os botões de rádio se tornam mutuamente exclusivos apenas se estiverem pertencendo ao mesmo grupo, e por isso
precisamos criar um ButtonGroup e adicionar os botões de rádio.
 
ButtonGroup bp = new ButtonGroup();
bp.add(rb1);
bp.add(rb2);
A chamada para a nova janela é feita no método main, ao instanciarmos um objeto do tipo JanelaSimples, de�nirmos seu
posicionamento e suas dimensões, e deixá-lo visível. Embora não tenha in�uência agora, setar como modal signi�ca que �cará
em frente à janela chamadora, em um ambiente de múltiplas janelas, evitando perder o foco.
 
JanelaSimples j1 = new JanelaSimples();
j1.setModal(true);
j1.setBounds(0,0, 300, 300);
j1.setVisible(true);
Note que alguns dos componentes �caram com dimensões um pouco estranhas, algo que pode ser corrigido com um pouco
mais de código, mas como o NetBeans permite alterar visualmente este tipo de con�guração, seria desnecessário aumentar a
complexidade.
Utilização de eventos
Agora que já conseguimos criar o design de nosso sistema, devemos nos preocupar com a interatividade dele, e nesse ponto
precisaremos entender o conceito e uso de eventos.
Podemos de�nir evento como uma ação predeterminada que, ao ocorrer, permite iniciar uma ação personalizada, o que
certamente será feito através de programação.
Exemplo
Ao clicar sobre o botão abra a segunda janela, ou, ao perder o foco da caixa de texto veri�que o formato do valor digitado.
Cada linguagem apresenta sua própria versão de resposta a eventos, e no Java utilizamos a implementação de interfaces
“ouvintes” para responder aos eventos.
Como existem diversos tipos de eventos disponíveis, devemos nos preocupar apenas com o ouvinte, ou listener, adequado à ação
que esperamos do usuário.
Listener Métodos Parâmetro
ActionListener actionPerformed ActionEvent
FocusListener focusGained
focusLost
FocusEvent
KeyListener keyPressed
keyReleased
keyTyped
KeyEvent
MouseListener mouseClicked
mouseEntered
mouseExited
mousePressed
mouseReleased
MouseEvent
MouseMotionListener mouseDragged
mouseMoved
MouseEvent
TextListener textValueChanged TextEvent
Inicialmente devemos implementar a interface ouvinte desejada na janela, para permitir que os componentes possam adotá-la
como ouvinte.
Vamos entender melhor com o seguinte exemplo:
Vamos considerar uma janela com dois campos de texto e um botão, como no fragmento de código seguinte.
 
public class JanelaSoma extends JFrame {
private JTextField txt1, txt2;
private JButton btn1;
Nós podemos implementar uma funcionalidade na qual o clique sobre o botão irá efetuar a soma dos valores digitados nos dois
campos de texto, e apresentar esta soma através de um JOptionPane.
 
public class JanelaSoma extends JFrame implements ActionListener{
@Override
public void actionPerformed(ActionEvent e) {
Integer i1 = new Integer(txt1.getText());
Integer i2 = new Integer(txt2.getText());
JOptionPane.showMessageDialog(this, "A soma será "+(i1+i2));
}
Note que nossa janela agora implementa a interface ActionListener, e o processo é desenvolvido no método actionPerformed.
Inicialmente são de�nidos os valores dos inteiros i1 e i2 a partir dos textos de txt1 e txt2, e a seguir apresentamos o JOptionPane
com a soma dos dois.
Agora só falta de�nir o construtor da janela e atrelaro botão que receberá o clique com o método de resposta por meio de
addActionListener.
 
public JanelaSoma() throws HeadlessException {
setLayout(new FlowLayout());
add(txt1=new JTextField(5));
add(txt2=new JTextField(5));
add(btn1=new JButton("Somar"));
btn1.addActionListener(this);
}
Podemos observar, a seguir, o código completo da janela e o seu aspecto executando.
 
import java.awt.FlowLayout;
import java.awt.HeadlessException;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JTextField;
public class JanelaSoma extends JFrame implements ActionListener{
@Override
public void actionPerformed(ActionEvent e) {
Integer i1 = new Integer(txt1.getText());
Integer i2 = new Integer(txt2.getText());
JOptionPane.showMessageDialog(this,
"A soma será "+(i1+i2));
private JTextField txt1, txt2;
private JButton btn1;
public JanelaSoma() throws HeadlessException {
setLayout(new FlowLayout());
add(txt1=new JTextField(5));
add(txt2=new JTextField(5));
add(btn1=new JButton("Somar"));
btn1.addActionListener(this);
}
public static void main(String[] args) {
JanelaSoma j1 = new JanelaSoma();
j1.setBounds(0,0, 300, 100);
j1.setVisible(true);
}
}
Uma alternativa a esta forma de trabalho seria criar a resposta localmente e associar direto ao botão, retirando a necessidade da
implementação do Listener pelo JFrame.
 
btn1.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
Integer i1 = new Integer(txt1.getText());
Integer i2 = new Integer(txt2.getText());
JOptionPane.showMessageDialog(JanelaSoma.this,
"A soma será "+(i1+i2));
}
});
Esta segunda forma é muito utilizada por permitir um objeto de resposta a cada componente, ao invés de tratar todos os eventos
daquele determinado tipo em um mesmo método.
Criação de janelas no NetBeans
Além do editor de código com syntax highlighting, que até aqui simpli�cou muito a nossa tarefa de programar, com a
identi�cação dos diversos tipos de comandos e estruturas por meio de cores, e da complementação automática de código, entre
outras ferramentas de auxílio à codi�cação, o NetBeans traz um ambiente excelente para a criação visual de janelas swing e awt.
Utilizando este ambiente, e entendendo algumas pequenas mudanças no estilo de código, passaremos a nos preocupar apenas
com a codi�cação das regras de negócio e resposta a eventos em nossos sistemas.
Toda a extensa área de código reservada à criação e con�guração dos componentes visuais será gerada automaticamente a
partir das ações efetuadas no ambiente visual de criação, o que trará grande produtividade ao programador Java para desktop.
De início devemos compreender as ferramentas disponíveis, e o NetBeans apresenta:
Editor visual de janelas;
Paleta de componentes swing e awt;
Editor de propriedades;
Visualização hierárquica dos componentes; e
Integração direta com o editor de código Java.
Para acrescentar uma janela do tipo JFrame ao nosso projeto devemos utilizar a opção de menu Novo Arquivo (CTRL + N),
selecionar Forms GUI Swing..Form JFrame na janela que se abrirá e clicar em Próximo.
Na tela seguinte devemos dar um nome (Somadora) para nosso JFrame, escolher o pacote e clicar em Finalizar.
Estes passos podem ser observados nas duas �guras seguintes.
Ao �nalizar a criação de nosso JFrame, o ambiente de edição visual será aberto, e poderemos começar a criar nossa tela com
simples operações de clique e arraste.
 
Teremos ao centro o editor visual, e do lado direito a paleta de componentes. Estes componentes podem ser arrastados da
paleta para a tela do editor, e depois de posicionados serem con�gurados no painel de propriedades, que estará também à direita,
porém, oculto até que seja selecionada a instância de componente.
 
As duas �guras seguintes mostram o momento inicial, onde um componente é arrastado para a tela, e o segundo passo, onde
suas propriedades são observadas. Para abrir o painel de propriedades devemos clicar na instância, de forma a selecioná-la, e
clicar na aba do painel para que ele se expanda.
Com isso já podemos criar a nossa janela de forma visual.
Iremos precisar de dois componentes Label, dois
componentes do tipo Campo de Texto e um Botão.
Eles devem ser posicionados no editor visual, de forma a obter
o aspecto da imagem ao lado.
Em seguida devemos renomear os componentes e con�gurar
a propriedade text.
Atenção
Para renomear um componente visual, clique com o botão direito sobre ele e escolha a opção “Alterar o Nome da Variável...”.
O quadro seguinte mostra as mudanças.
Nome Original Novo Nome Valor de text
jLabel1 lblParcela1 Parcela 1
jLabel2 lblParcela2 Parcela 2
jTextField1 txtParcela1 (vazia – apagar o conteúdo)
jTextField2 txtParcela2 (vazia – apagar o conteúdo)
jButton1 btnSomar Somar
Efetuadas as alterações, a hierarquia da tela poderá ser conferida pelo navegador, posicionado no canto inferior esquerdo do
ambiente, e a tela estará preparada para a fase de programação.
O objetivo da tela será exibir a soma dos valores digitados quando ocorrer o clique sobre o botão. Para tal devemos responder ao
evento através do método actionPerformed. Porém, no ambiente visual isto é um pouco diferente.
 
Clique com o botão direito do mouse sobre btnSomar e, sobre o menu de contexto que aparecerá, escolha
Eventos..Action..actionPerformed.
Será aberto um método denominado btnSomarActionPerformed, no qual deverá �car a programação do evento. Note que existem
trechos com fundo cinza que não permitem alteração no código, e que a janela mudou da aba Projeto para Código-Fonte.
Estas abas �cam na parte superior do editor visual, e permitem intercambiar entre o código Java e o desenho da janela.
Agora, tudo que precisamos fazer é programar o que foi planejado no método gerado de forma automática.
 
private void btnSomarActionPerformed(java.awt.event.ActionEvent evt){
Integer i1 = new Integer(txtParcela1.getText());
Integer i2 = new Integer(txtParcela2.getText());
JOptionPane.showMessageDialog(this,"A soma será: "+(i1+i2));
}
Pronto! Agora é só executar o arquivo com SHIFT+F6.
Note como a programação, com uso deste ambiente de criação visual, é bem mais simples. Porém, essa simplicidade implica em
um código �nal muito maior.
Se tiver a curiosidade de observar todo o código protegido (com fundo cinza), inclusive os códigos ocultos, que podem ser
abertos clicando no sinal de “+” no lado esquerdo do editor, poderá observar a real complexidade do código completo.
Mesmo com um código-fonte bem maior, o que é fruto da generalização necessária, o uso desta ferramenta trará grande
produtividade para qualquer programador Java desktop.
Atividade
1. A construção de interfaces grá�cas é uma necessidade para os sistemas desktop atuais, e alguns elementos são considerados
essenciais à concepção deste tipo de ambiente. Qual das opções abaixo não representa um dos quatro elementos básicos de
uma interface grá�ca?
a) Janela
b) Ícone
c) Prompt
d) Menu
e) Cursor
2. Os eventos são o meio de interação de um sistema grá�co, pois permitem que o aplicativo responda a ações predeterminadas
via programação em alguma linguagem. No caso do Java, a resposta aos eventos é efetuada pela implementação de interfaces
ouvintes (Listener) voltadas para tipos de eventos especí�cos. Em uma situação onde desejamos mostrar as coordenadas do
cursor do mouse quando o passamos sobre um componente de visualização de imagem, qual seria o Listener correto?
a) ActionListener
b) KeyListener
c) MouseListener
d) MouseMotionListener
e) FocusListener
3. Você está desenvolvendo um novo sistema de apoio ao setor estatístico, e uma das funcionalidades solicitadas foi o cálculo do
número de combinações possíveis para p números dentro de um universo n, onde p <= n.
A fórmula de cálculo é dada por: C(n,p) = Fatorial(n) / (Fatorial(p) * Fatorial(n-p)).
O início do código da janela é exibidoabaixo:
 
public class JanelaCombinacao extends JFrame
implements ActionListener {
private JTextField txtValorN, txtValorP;
// Campos para os valores de N e P
private JButton btnExecuta;
private JLabel lblResposta;
// Texto estático para a resposta
Implemente o método de resposta ao evento de “clique sobre o botão” para efetuar o cálculo baseado nos valores digitados em
txtValorN e txtValorP e colocar o resultado em lblResposta.
Notas
Referências
CORNELL, G.; HORSTMANN, C. Core java. 8. São Paulo: Pearson, 2010.
DEITEL, P.; DEITEL., H. Java, como programar. 8. São Paulo: Pearson, 2010.
FONSECA, E. Desenvolvimento de software. Rio de Janeiro: Estácio, 2015.
Próxima aula
Os componentes de uma Interface Web;
O uso de tecnologias cliente (HTML/CSS/JavaScript);
As tecnologias cliente para a criação de Interfaces Web.
Explore mais
Leia os textos:
Projetando uma GUI Swing no NetBeans IDE; <https://netbeans.org/kb/docs/java/quickstart-gui_pt_BR.html >
Tipos de Layout swing e awt (Oracle); <https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html >
Tutorial de swing. <//zetcode.com/tutorials/javaswingtutorial/ >
https://netbeans.org/kb/docs/java/quickstart-gui_pt_BR.html
https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html
http://zetcode.com/tutorials/javaswingtutorial/
Desenvolvimento de software
Aula 05: Interfaces Visuais para Web
Apresentação
A Internet nem sempre foi tão rápida e com visual tão avançado, mas as necessidades comerciais trazidas pelo usuário e
comprador geraram uma oportunidade para a franca evolução das interfaces, incorporando conceitos como usabilidade,
acessibilidade e até mesmo responsividade, devido ao advento das plataformas móveis.
Ao criarmos nossas interfaces Web deveremos estar atentos aos padrões da W3C, de forma a utilizar tecnologias como
HTML, JavaScript e CSS da melhor forma, sempre buscando criar interfaces que sejam ao mesmo tempo robustas e
intuitivas, buscando satisfazer os mais diferentes per�s de usuários.
Objetivos
Identi�car os componentes de uma interface Web;
Explicar o uso de tecnologias cliente (HTML/CSS/JavaScript);
Empregar as tecnologias cliente para a criação de interfaces Web.
Linguagem HTML 5
1991
A linguagem HTML, do inglês Hypertext Markup
Language, foi formalizada em 1991, baseada nas
propostas de Tim Berners-Lee, físico britânico
que buscava um meio de divulgação de suas
pesquisas entre seus colegas.
1999
Inicialmente controlada pela IETF (Internet
Engineering Task Force), passou a ter suas
especi�cações mantidas pela W3C (World Wide
Web Consortium) a partir de 1996, sendo a
recomendação HTML 4.01 publicada em 1999.
2000
A partir de 2000, a W3C passa a recomendar a
sua nova especi�cação XHTML, a qual traz uma
sintaxe mais rígida para o HTML, baseando-se
nas regras do XML (Extended Markup Language).
2008
Finalmente, a partir da primeira publicação, em
2008, pela W3C, surge a especi�cação do HTML
5, o�cializada em 2014, cuja característica
principal é um novo mecanismo de
extensibilidade que permite combinar diferentes
sintaxes baseadas em XML dentro de uma
mesma página.
Como nas versões iniciais, o HTML 5 é uma linguagem de marcação baseada em etiquetas
(tags) que devem controlar diversos aspectos do texto. Nas versões iniciais do HTML
ocorria o controle tipográ�co e estrutural, mas no HTML 5 a preocupação é apenas
estrutural, sendo delegado ao CSS (Cascade Style Sheet) o controle de características
tipográ�cas.
Sintaxe do HTML 5
Como o HTML na versão 5 segue o padrão de escrita do XML, a primeira linha deve de�nir o tipo de documento.
Em seguida, de�nimos o documento HTML, dividindo-o nas seções de cabeçalho e corpo.
No cabeçalho �cam informações de con�guração e pré-carga, enquanto no corpo será colocada a parte visual da página.
Sempre devemos nos preocupar com a documentação correta de nosso código, e o uso de comentários ajuda muito na
compreensão do que foi criado.
Comentário
Em termos de HTML, os comentários são iniciados com um símbolo de exclamação seguido de dois traços, sendo terminados
com dois traços, conforme podemos observar no fragmento de código anterior.
Incialmente, vamos nos preocupar com o tipo de informação que pode ser inserida na seção de cabeçalho, como o título da
página e a de�nição dos caracteres e acentuações adotados.
Nesse fragmento de código, podemos observar a inserção do título de uma página com o uso de <title> e a escolha da
acentuação utilizada através de <meta/>.
Diversas tags aceitam a de�nição de atributos especí�cos, como <meta charset="UTF-8"/>, e tais atributos devem ter seus
valores inseridos entre aspas ou apóstrofes. Essa é apenas uma das diversas características controladas com o uso de <meta/>.
As tags mais comuns na seção de cabeçalho são resumidas a seguir.
Tag Utilização
<title> Define o título da página, normalmente apresentado no topo da janela.
<meta> Permite a inclusão de informações e controle de características do documento, como o uso de UTF-8 para acentuação da
língua portuguesa.
<link> Efetua a ligação da página com um recurso externo, como folha de estilo CSS ou biblioteca JavaScript.
<style> Define uma folha de estilo interna para a página.
Na parte do corpo �cam os elementos estruturais constituintes da parte visual. É onde será de�nido o conteúdo, que pode ser
estruturado em termos de títulos, parágrafos, listas, tabelas e diversos outros elementos que promoverão a organização visual do
texto da página.
Nesse fragmento de código, referente ao corpo da página, podemos observar a tag <p> para a de�nição de um parágrafo, e a
construção de uma lista com <ul> e <li>.
A lista é iniciada e �nalizada com <ul> e cada elemento é inserido em um conjunto <li>.
Essas tags criarão um efeito visual como o que pode ser observado a seguir:
A sintaxe HTML traz diversas tags estruturantes para o conteúdo do body, até mesmo por ser uma linguagem de hipermídia, onde
é comum a criação de listas, camadas e até tabelas (estas últimas apenas para dados tabulares, segundo recomendações
atuais).
Podemos observar algumas das tags estruturais a seguir:
Tag Utilização
<h1> <h2> <h3> <h4> <h5>
<h6> <h7>
Definem elementos de texto utilizados como títulos em diferentes tamanhos de fonte, sendo <h1>
para o maior e <h7> para o menor.
<b> <i> <u> <em> <strong> Negrito, itálico e outros efeitos de texto. São consideradas obsoletas, sendo recomendado o uso de
folhas de estilo CSS.
<p> <div> Definem trechos de texto, sendo que <p> ressalta o parágrafo e <div> é muito utilizado para a
criação de camadas.
<ul> <ol> Iniciam a criação de listas de elementos, sendo numeradas com <ol>.
<li> Define um item de lista.
<hr/> Quebra de linha.
<table> <tr> <td> Utilizadas para a criação de tabelas. Hoje em dia seu uso é recomendado apenas para dados
tabulares.
<span> Define um trecho avulso, ao qual podem ser aplicadas formatações.
Uma funcionalidade essencial das páginas HTML é a possibilidade de navegar entre páginas de um site ou entre sites, permitindo
acessar os mais diversos recursos ao longo da Web, identi�cados de forma única através de sua URL (Universal Resource
Locator).
Criaremos hiperlinks para efetuar essa navegação, sendo utilizada a tag <a>, ou âncora (do inglês anchor), sempre apontando
para alguma URL e apresentando um texto que representa o recurso. Quando o usuário clica sobre o texto é redirecionado para o
recurso.
Com o uso conjunto de todos esses elementos, seremos capazes de criar nossas páginas, podendo tratar de simples páginas,
ainda sem elementos dinâmicos e formatações adequadas, mas com toda a parte estrutural de�nida.
Podemos observar uma página completa a seguir:
 
<!DOCTYPE html>
<html>
<head>
<title>Página de Exemplo </title>
<meta charset="UTF-8"/>
</head>
<body>
<h1>Alguns links úteis <h1>
<ul>
<l1> <a href="//www.mpf.mp.br/">Ministério Público Federal</a> </l1>
<l1> <a href="//www.pf.gov.br/">Polícia Federal</a> </l1>
<l1> <a href="//portal.stf.jus.br">Superior TribunalFederal</a> </l1>
<ul>
</body>
</html>
<div>
Temos uma lista onde cada item corresponde a determinado hiperlink para algum site, além de trazer um título e uma de�nição
para acentuação.
Como citado anteriormente, precisamos utilizar as tags <ul> e <l1> em conjunto, sendo que a primeira determina o início e �nal da
lista, enquanto a segunda determina os itens que farão parte dessa lista.
CSS
A metodologia de criação de sites atualmente aceita, prioriza a divisão da página em termos de estrutura e formatação, �cando a
estrutura a cargo do HTML e a formatação efetuada via folhas de estilo CSS (Cascade Style Sheets).
Com essa regra de�nida, nosso próximo passo é con�gurar os elementos tipográ�cos e o aspecto visual da página com o uso do
CSS.
Vamos modi�car o exemplo anterior, aplicando uma formatação através de folhas de estilo:
Exemplo 3
 
<!DOCTYPE html>
<html>
<head>
<title>Página de Exemplo </title>
<meta charset="UTF-8"/>
<style>
h1 {color: orange}
a {color: yellow}
a:hover {color: red}
body {background-color: #000032; color:yellow}
</style>
</head>
<body>
<h1>Alguns links úteis<h1>
<ul>
<l1> <a href="//www.mpf.mp.br/">Ministério Público Federal</a> </l1>
<l1> <a href="//www.pf.gov.br/">Polícia Federal</a> </l1>
<l1> <a href="//portal.stf.jus.br">Superior Tribunal Federal</a> </l1>
<ul>
</body>
</html>
Observe como o acréscimo da tag <style> com as formatações adequadas trouxe enorme diferença para o aspecto visual da
página.
A sintaxe geral do CSS pode ser de�nida como:
Iniciamos com o seletor e, entre as chaves, de�nimos os vários elementos de formatação como fontes e cores, alinhamentos,
�guras de fundo, entre vários outros, sempre seguindo a sintaxe propriedade: valor.
No exemplo anterior, a tag <h1> foi formatada com a fonte de cor laranja, enquanto <body> recebe fundo de tonalidade azul
(RGB=#000032) e fonte amarela.
O conjunto de seletores a e a:hover traz um comportamento bem interessante. O primeiro de�ne a formatação do link no modo
normal e o segundo de�ne a formatação quando o mouse passa sobre o mesmo.
Atenção
Além de formatar as tags, é possível utilizar classes e identi�cadores como seletores do CSS, bastando colocar o sinal de hash na
frente dos identi�cadores e ponto na frente das classes.
A questão maior é quando devemos utilizar identi�cadores ou classes. Os identi�cadores são utilizados em elementos que não se
repetem, como camadas, e as classes são utilizadas para utilizar a mesma formatação em diversos pontos da página.
Podemos observar esses seletores mais adiante:
 
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Camadas</title>
<meta charset="UTF-8"/>
<style>
#C1 {position:absolute; top:10px; left:10px; width:300px; height:200px; background-color:lightblue}
#C2 {position:absolute; top:50px; left:50px; width:220px; height:120px; background-color:blue;
color:yellow}
.destaque {background-color:black; color:orange}
</style>
</head>
<body>
<div id="C1">Camada 1 com algum <span class="destaque">texto ressaltado</span> </div>
<div id="C2">Camada 2, e agora o<span class="destaque">texto ressaltado</span> está aqui </div>
</body>
</html>
Aqui nós utilizamos o CSS para de�nir o posicionamento, o tamanho e as cores de duas camadas, identi�cadas como C1 e C2 a
partir do atributo id da <div>, e com o uso de <span> e o atributo class aplicamos a formatação especí�ca para alguns
fragmentos de texto.
JavaScript
A linguagem JavaScript nem sempre teve esse nome. Desenvolvida originalmente pela Netscape, ela se chamava Mocha, e teve o
nome modi�cado posteriormente para LiveScript, quando ocorreu seu lançamento junto ao navegador Netscape 2.0 versão beta,
em setembro de 1995.
Em dezembro de 1995, em um anúncio conjunto com a Sun Microsystems, é lançado o Netscape 2.0B3, com suporte à tecnologia
de Applets. O nome da linguagem foi modi�cado para JavaScript, o que causa muita confusão até hoje com relação à sua relação
com a linguagem Java.
É importante que tenhamos em mente que JavaScript não é Java, e a similaridade entre as
duas linguagens ocorre apenas pelo fato de ambas utilizarem sintaxes baseadas na
linguagem C.
Utilizamos o JavaScript para controle de elementos da página HTML e viabilização da interatividade, caracterizando-se
originalmente como uma tecnologia cliente. Pode ser embebida na própria página, ou organizada no formato de biblioteca, como
arquivo externo.
Atenção
Recentemente, o JavaScript passou a ser utilizado também do lado servidor, através de tecnologias como o node.js.
Outro ambiente que recebeu a possibilidade de desenvolvimento com JavaScript foi o dos dispositivos móveis, com uso de
ferramentas como Ionic.
Sintaxe do JavaScript
Inicialmente, devemos compreender a declaração de variáveis e operações aritméticas da linguagem.
Uma variável pode ser declarada com o uso de var, ou simplesmente com sua inicialização. Como o JavaScript não é fortemente
tipado, a variável assume o tipo do valor associado a ela.
Os tipos com os quais a linguagem trabalha são: inteiro, ponto �utuante, booleano, texto, objeto e vetor (como objeto da classe
Array).
Os operadores matemáticos são os mesmos utilizados pelo Java; a�nal, ambas as linguagens derivaram do C, mas com
pequenas diferenças: enquanto no Java a divisão entre inteiros resulta em um número inteiro, no JavaScript não temos como
diferenciar um inteiro de um real, e por isso a divisão poderá retornar um número real.
Exemplo 5
 
<!DOCTYPE html>
<html>
<script>
var a = 5, b = 32, c = 7;
document.writeln("<br/>A:"+a+" B:"+b+" C:"+c);
b = b - (c * 2);
b /= a;
document.writeln("<br/>A:"+a+" B:"+b+" C:"+c);
b++;
document.writeln("<br/>A:"+a+" B:"+b+" C:"+c);
<script>
</body>
</html>
Aqui são declaradas três variáveis com o uso de var, sendo efetuadas algumas operações aritméticas sobre as mesmas.
A cada passo é impresso na página o valor das variáveis através de document.writeln. É interessante observar que esse comando
escreve sobre a página HTML, permitindo a inclusão de tags, como o uso de <br/> para quebra de linha.
Se estivéssemos efetuando essas mesmas operações em Java, para variáveis inteiras, o resultado de B na segunda linha seria 3,
e não 3.6, como ocorre no JavaScript.
Assim como os operadores aritméticos do JavaScript são similares aos do Java, os
relacionais e lógicos também são, e podemos utilizá-los da mesma forma nas duas
linguagens, apenas observando o fato de que o JavaScript não é fortemente tipado.
Uma observação a ser feita é que a comparação entre Strings é muito diferente entre as duas linguagens. Enquanto Java
necessita do uso de equals, o JavaScript utiliza o operador para comparação de igualdade.
Java JavaScript
String a;
boolean b;
  // Operações sobre a
  b = (a.equals("XPTO"));
var a,b; 
  // Operações sobre a
  b = (a == "XPTO");
Estruturas de decisão e de repetição
A similaridade entre Java e JavaScript não �ca apenas na de�nição dos operadores, mas também na utilização da mesma sintaxe
para as estruturas de decisão e de repetição.
É claro que os métodos de entrada e saída de dados são completamente diferentes, até mesmo pela �nalidade de cada uma das
linguagens. No caso do JavaScript, toda entrada e saída deve ocorrer a partir do navegador.
Vamos observar um exemplo com uso de if:
Exemplo 6
 
<!DOCTYPE html>
<html>
<body>
<script>
var x = eval(prompt("Entre com o valor:",""));
if(x > 5)
document.writeln("<h1>Valor maior que 5</h1>");
else
document.writeln("<h1>Valor menor ou igual a 5</h1>"
</script>
</body>
</html>
A função prompt serve para solicitar ao usuário a digitação de um valor a partir de um diálogo de entrada, enquanto a função eval
efetua a conversão de String para número.
Em nosso exemplo, a variável x recebe o valor digitado pelo usuário com o uso da função prompt, mas com o valor, que era
originalmente texto, convertido para número com o uso de eval.
De acordo com o valor digitado a página irá apresentar uma das alternativas de frase, ambasformatadas pela tag <h1>, sendo a
escolha da frase a ser apresentada controlada pela estrutura if..else, segundo a condição x < 5.
Agora temos um exemplo com uso de for, que imprime os números primos de 1 a 50:
Exemplo 7
 
<!DOCTYPE html>
<html>
<body>
<ul>
<script>
for(i=1 ; i<=50 ; i++){
primo = true;
for(j=2 ; j<i ; j++)
if( i%j==0 ){
primo = false;
break;
}
if(primo
document.writeln("<li>"+i+"</li>");
}
</script>
</ul>
</body>
</html>
Observe que cada frase é iniciada com <li> e terminada com </li>, o que faz com que sejam transformadas em uma lista iniciada
imediatamente antes do script com a tag <ul>.
Nesse código, utilizamos um for executando de 1 a 50, e dentro utilizamos outro for para dizer se é primo, segundo a regra de que
se i for divisível por algum número entre 2 e i-1 ele não é primo.
Tendo veri�cado que o número não é primo, não é necessário testar outras divisões, o que justi�ca o uso de break para sair do
loop interno.
Finalmente, um exemplo com utilização da estrutura while:
Exemplo 8
 
<!DOCTYPE html>
<html>
<body>
<table border="1" width="100%">
<tr>
<td>
A
</td>
<td>
Fatorial(A)
</td>
</tr>
<script>
var a = 1;
while(a<10){
document.writeln("<tr><td>"+a+"</td>");
fat = b = a;
while(--b>=1){
fat *= b;
document.writeln("<td>"+a+"</td></tr>");
a++;
}
</script>
</table>
</body>
</html>
Aqui nós imprimimos o fatorial de cada número entre 1 e 9. Para tal, utilizamos um controle while externo, aumentando o valor de
a enquanto não atingir o valor 10, e internamente efetuamos o cálculo do fatorial com outro bloco while.
Nas linhas acima, podemos observar que os valores de
fat
e
b
são ambos inicializados com o valor atual de
a
. Em seguida ocorre um loop onde
b
é decrementado e já testado se o valor é maior que
1
; se for maior, o valor de
fat
é multiplicado por
b
b
naquela rodada.
Atenção
Esse processo apenas segue a forma natural de cálculo de fatorial. Se a vale 4, então 4! = 4 * 3 * 2 * 1. Se observarmos a
expressão, podemos dizer que começa com o valor de a (4) e multiplica por todos os menores que 4 até chegar a 1.
Funções e eventos
As funções, assim como os métodos em ambientes orientados a objetos, correspondem a ações ou processos, que são
nomeados, e que podem ou não receber parâmetros e retornar valores.
Nós criamos funções no JavaScript com o uso de function, os parâmetros não são tipados, e elas podem retornar um resultado
para o chamador com uso de return.
Quanto ao conceito de eventos, é o mesmo utilizado nos ambientes desktop, ou seja, um conjunto de ações predeterminadas para
as quais podemos dar uma resposta programada ao chamador.
Nesse caso, o modelo de resposta parte dos atributos de evento existentes nas tags HTML sendo relacionados com funções em
JavaScript. Esse modelo é bem simples, e permite grande �exibilidade.
Observe este exemplo de tratamento de eventos:
Exemplo 9
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onclick="mostraMensagem()>CLique Aqui <button>
<script>
function mostraMensagem(){
alert("OLA MUNDO");
}
</script>
</body>
</html>
A página contém apenas um botão. Ao clicar sobre ele, a mensagem “OLA MUNDO” aparecerá em um alert.
Podemos observar a associação do evento de clique com a função de tratamento na seguinte linha:
Formulários
Quando efetuamos o cadastro em algum site de compras pela Web, o que estamos efetuando é o preenchimento de um
formulário HTML. Essas informações são enviadas para o servidor de duas formas, denominadas “métodos”:
GET 
Os dados são enviados através da própria URL.
POST 
Os dados são enviados em background.
Atenção
Todo formulário é iniciado com a tag <form>, que terá como principais atributos o método de envio (method) e o destino para a
informação (action).
Dentro do formulário, podemos incluir os componentes de entrada de dados, como caixas de texto, botões de rádio, caixas de
marcação, entre outros. A grande maioria é de�nida através da tag <input>, cujos atributos principais são type, referente ao tipo de
componente, name, utilizado para identi�cação do dado na chegada ao servidor, e value, para identi�car o valor preenchido.
Os tipos que a tag <input> pode utilizar são explicados na tabela seguinte.
Tipo Utilização
text Cria uma caixa de texto, podendo ter um valor inicial de�nido através de value.
hidden Quando queremos guardar um valor para envio, mas sem �car visível.
radio Opções mutuamente exclusivas. Quando marcamos um, todos com o mesmo atributo name serão desmarcados.
O que �car marcado, ao �nal, enviará seu atributo value como dado para o servidor.
checkbox Quando queremos a possibilidade de marcar várias opções. Todos que forem marcados enviarão seus atributos
value como dados para o servidor.
submit Cria um botão de envio para o formulário.
reset Cria um botão que reinicia (limpa) o formulário.
Podemos observar, a seguir, um formulário simples, com o uso das tags <form> e <input>.
Exemplo 10
 
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Formulário</title>
<meta charset="UTF-8"/>
<style>
body {background-color:blue; color:white; font-style: bold}
</style>
</head>
<body>
<form action="//servidor/app.asmx" method="get">
Nome:<input name="N1" type="text"/><br/><br/>
Opções de Envio: <br/>
<input type="checkbox" name="OPT" value="Revista"/>
Revista Mensal
<input type="checkbox" name="OPT" value="Digital"/>
Versão Digital
<input type="checkbox" name="OPT" value="SMS"/>
Mensagens SMS<br/><br/>
<input type="submit" value="Cadastrar"/>
</form>
</body>
</html>
Nesse exemplo, se escrevermos o nome XPTO e selecionarmos as opções “Versão Digital” e “Mensagem SMS”, ao clicarmos em
Cadastrar veri�caremos a seguinte URL na barra de navegação:
//servidor/app.asmx?N1=XPTO&OPT=Digital&OPT=SMS
O trecho ressaltado após a interrogação corresponde ao que chamamos de Query String, onde estarão os dados, no formato
nome=valor, separados pelo sinal &.
Caso modi�cássemos o método para “post”, a informação enviada não �caria visível para o usuário, mas vale ressaltar que
estaria transitando em um pacote sem criptogra�a na rede para o caso do HTTP comum.
Validação de formulários
Após entender como criar os formulários, devemos aprender a efetuar a validação dos dados preenchidos.
Essa validação será feita através de eventos e métodos de acesso aos elementos HTML do JavaScript, e a validação dependerá
bastante dos tipos de componente e informação considerados.
A forma mais aceita para o tratamento de elementos do HTML a partir do JavaScript é através do uso de identi�cadores nas tags
HTML, com instruções getElementById, as quais seguem o formato abaixo.
Quanto aos eventos, podemos observar alguns, no quadro seguinte, com suas respectivas aplicações no processo de validação.
Evento Aplicação
onsubmit Efetua a validação do formulário imediatamente antes do envio para o servidor. Necessita o retorno booleano,
indicando se os valores podem ser enviados ou não.
onclick Normalmente uma chamada explícita de validação. Bastante utilizado em botões de rádio e caixas de marcação.
onchange Ocorre quando o valor (value) sofre uma alteração.
onfocus Ocorre quando o componente ganha o foco. Pode ser utilizado, por exemplo, para apagar o valor do campo.
onblur Ocorre na perda do foco pelo componente. É comum a aplicação de máscaras em valores numéricos como CEP e
CPF.
onsearch Este evento é iniciado quando um usuário digita algo em um campo de pesquisa (type=“search”).
onselect Utilizado quando algum texto é selecionado no campo.
Exemplo 11
 
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Formulário</title>
<meta charset="UTF-8"/>
<style>
body {background-color:blue; color:white; font-style: bold}
</style>
</head>
<body>
<form action="//servidor/app.asmx" method="get">
Nome:<input name="N1" type="text"/><br/><br/>
Opções de Envio: <br/>
<input type="checkbox" name="OPT" value="Revista"/>
Revista Mensal
<input type="checkbox"name="OPT" value="Digital"/>
Versão Digital
<input type="checkbox" name="OPT" value="SMS"/>
Mensagens SMS<br/><br/>
<input type="submit" value="Cadastrar"/>
</form>
<script>
var objNome = document.getElementById("N1");
var objOpt1 = document.getElementById("OPT1");
var objOpt2 = document.getElementById("OPT2");
var objOpt3 = document.getElementById("OPT3");
function validar(){
if(objNome.value==""){
alert("Nome deve ser preenchido");
objNome.focus();
return false;
}
if(!objOpt1.checked && !objOpt2.checked &&
!objOpt3.checked){
alert("Selecione ao menos uma opção de envio");
return false;
}
return false;
}
</script>
</body>
</html>
Devemos observar o formato da função de validação, a qual deverá retornar true ou false para o evento onsubmit, de forma a
permitir ou não o envio da informação para o servidor. Por essa razão, a chamada desse evento é um pouco diferente dos outros.
No código JavaScript devemos estar atentos à forma como se relaciona com o HTML, capturando os componentes a ser
validados nas variáveis objNome, objOpt1, objOpt2 e objOpt3, com o uso de getElementById, o qual recebe como parâmetro o id
equivalente na tag da página.
Capturados nessas variáveis, podemos manusear as propriedades de cada componente em meio à função validar, relacionada
com a submissão do formulário através do evento onsubmit.
Caso o nome não seja preenchido, a mensagem “Nome é obrigatório” é apresentada e o foco é direcionado para a caixa de texto
referente a esse dado, através do método focus().
Para o teste dos componentes do tipo checkbox, devemos veri�car se nenhum deles foi marcado, e para isso utilizamos suas
propriedades checked. Lembrando que, pelo fato de a propriedade ser booleana, a negação será equivalente à comparação com
false.
Ao �nal de cada comando if ocorre uma instrução return false, a qual sai imediatamente da função, retornando o valor false para
onsubmit, e impedindo o envio. Apenas se ambos os testes forem falsos irá ocorrer return true.
O evento onsubmit é destinado a uma validação global antes do envio, mas não é a única opção do modelo de validação. Outras
validações e formatações podem ser efetuadas no momento da perda do foco pela caixa de texto, ou quando selecionamos o
elemento de uma lista de valores, entre diversas outras opções.
Atividade
1. Quando construímos uma interface para Web devemos utilizar diversas tecnologias cliente, voltadas para a estruturação,
formatação e dinamização do conteúdo da página. Qual seria a tecnologia voltada para a estruturação da página?
a) HTML
b) CSS
c) JavaScript
d) XML
e) Java
2. O uso de CSS é baseado em elementos denominados seletores. Considerando o fragmento de código abaixo, quais seriam os
seletores corretos, respectivamente, para formatar o cabeçalho com fonte azul e apenas a primeira div com fundo amarelo?
<h1> Cabeçalho </h1>
<div id="primeira">Div1 </form>
<div id="segunda">Div2 </form>
a) h1, div
b) .Cabeçalho, .Div1
c) .h1, .primeira
d) h1, #Div1
e) h1, #primeira
3. Quando criamos um sistema de validação para nossos formulários, além de fornecer uma interface mais robusta, diminuímos
o número de chamadas inválidas ao servidor e, consequentemente, o �uxo de rede.
Os formulários HTML são validados pelo JavaScript a partir de eventos disponíveis para as tags e, em uma situação em que
desejemos validar o preenchimento do CPF na saída de um campo texto, devemos utilizar:
a) onsubmit
b) onclick
c) onchange
d) onblur
e) Onfocus
Notas
Referências
CASSATI, J.
Programação cliente em sistemas web
. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H.
Ajax, rich internet applications e desenvolvimento web para programadores.
São Paulo: Pearson Education, 2009.
MILLETO, E; BERTAGNOLLI, S.
Desenvolvimento de software II:
introdução ao desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014.
PLOTZE, R.
Tecnologias web.
Rio de Janeiro: Estácio, 2016.
Próxima aula
As características do Java para Web.
O uso de tecnologias Servlet e JSP.
O framework JSF.
Explore mais
Leia os textos:
Introdução ao HTML 5; <https://www.w3schools.com/html/html5_intro.asp >
Tutorial de CSS; < https://www.w3schools.com/css/ >
Básico de JavaScript; < https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript >
Tutorial de JavaScript; <https://www.w3schools.com/js/ >
Eventos. <https://www.w3schools.com/tags/ref_eventattributes.asp >
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/
https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript
https://www.w3schools.com/js/
https://www.w3schools.com/tags/ref_eventattributes.asp
Disciplina: Desenvolvimento de Software
Aula 6: Java para Web
Apresentação
O ambiente Java Web é considerado de grande robustez, sendo utilizado por grandes empresas, principalmente em sistemas
de missão crítica. Nesse ambiente temos um Web Server padrão, denominado Tomcat, o qual responde ao protocolo HTTP e
fornece um container para execução de Servlets e JSPs.
Apesar de ser o su�ciente para aplicações simples, em ambientes corporativos devemos adotar componentes do tipo
Enterprise Java Beans, providos por Application Servers, como GlassFish. A utilização de frameworks, como JSF, é um fator
que trará grande produtividade para o programador.
Objetivos
Identi�car as características do Java para Web;
Descrever as tecnologias Servlet, JSP e JSF;
Empregar operações básicas do framework JSF.
Ambiente servidor
Quando enviamos os dados para alguma tecnologia servidora, temos uma requisição HTTP, a qual irá iniciar algum
processamento ao nível do servidor e que, ao �nal, retornará uma resposta HTTP, normalmente com conteúdo HTML ou XML.
Utilizaremos, no ambiente Java, um objeto da classe HttpServletRequest, normalmente denominado request, para capturar os
dados enviados pela requisição HTTP, efetuando qualquer tipo de processamento com esses dados, como a inserção em banco
de dados ou validações de segurança.
Os dados de retorno para o usuário são controlados por um objeto da classe HttpServletResponse, que costuma ser denominado
response, o qual irá permitir escrever o conteúdo HTML ou XML de saída, além de outros elementos, como cookies.
Algo que temos de ter em mente, com relação ao modelo Web, é a grande diferença do modelo desktop na gestão de estado de
objetos.
No modelo desktop existe um programa
que guarda os objetos em um espaço
local, permitindo que tais objetos existam
durante toda a execução, mesmo que
ocorra a troca de janelas, o que viabiliza a
manutenção do estado dos objetos.
No modelo Web, a cada requisição e
resposta, todos os objetos antigos deixam
de existir, e o estado não pode ser mantido.
A solução para manter esses estados é a utilização de sessões, as quais correspondem a objetos alocados ao nível do servidor,
fazendo referência a uma dada conexão. Enquanto o usuário se mantiver no site, esses dados serão mantidos, sendo eliminados
na perda de conexão.
Atenção
No Java, o objeto session, da classe HttpSession, permite a gerência de sessões HTTP, mas é sempre importante lembrar que as
sessões consomem memória do servidor, devendo ser utilizadas para �ns bem especí�cos.
Tomcat e GlassFish
O servidor Tomcat é um projeto da Apache Software
Foundation para a implementação com código aberto de
tecnologias como Java Server Pages (JSP), Java Servlet, Java
WebSocket e Java Expression Language.
Esse conjunto de tecnologias oferecerá um ambiente
consistente para a resposta às chamadas HTTP, além de
prover suporte a Servlets e JSPs.
Por ser de código aberto, acabou se tornando o padrão para
hospedagem de aplicativos Java para Web, podendo atuar
como servidor independente ou como módulo de servidores,
como JBoss e GlassFish.
Os principais diretórios e arquivos do Tomcat podem ser observados no quadro a seguir.
       Diretório        Conteúdo
bin Binários do servidor, incluindo o executável do mesmo.
conf Arquivos de configuração, como server.xml, que guarda as configuraçõesgerais do Tomcat.
lib Bibliotecas Java de inicialização do servidor no formato jar, as quais também ficam disponíveis para todos os
aplicativos do ambiente.
logs Arquivos de log para identificação de erros na execução do Tomcat.
webapps Aplicativos Java para Web.
É possível alterar várias características do Tomcat, editando o arquivo server.xml.
Atenção
O servidor Tomcat executa, por padrão, na porta 8080, mas podemos modi�cá-la procurando e alterando a ocorrência desse valor
no arquivo.
Os aplicativos que criaremos deverão obedecer à estrutura exigida pelo Tomcat, composta por:
um diretório de base, com páginas JSP, HTML, XML, e outros formatos que não são compilados;
um subdiretório WEB-INF, onde �ca o arquivo de con�guração web.xml;
um diretório classes, para o armazenamento das classes Java;
um diretório lib, com as bibliotecas nos formatos jar e zip;
um subdiretório denominado META-INF, onde podemos encontrar o arquivo context.xml, com informações gerais de
contexto, como pool de conexões com banco, por exemplo.
Toda essa estrutura pode ser compactada em um arquivo com extensão war (Web Archived), que ao ser copiado para o diretório
webapps, ou deploy, de acordo com a distribuição, é automaticamente expandido, �cando o aplicativo disponível para os usuários.
Essa é uma característica do Tomcat, denominada hot deployment, fornecendo uma forma
muito prática de disponibilizar o aplicativo Web, pois resume o upload de dezenas de
arquivos a apenas um.
Enquanto o Tomcat suporta, de forma nativa, apenas Servlets e JSPs, atuando como um Web Server, o GlassFish vai além,
oferecendo suporte às tecnologias Java de Objetos Distribuídos, no caso os Enterprise Java Beans (EJBs), sendo classi�cado
como Application Server.
Atenção
Algo interessante a ser mencionado é que o Tomcat é utilizado pelo GlassFish como módulo interno, delegando a ele toda a parte
de comunicação HTTP e o tratamento de Servlets e JSPs, enquanto os demais elementos da robusta arquitetura do GlassFish
tratam das diversas tecnologias do Java Enterprise Edition (JEE).
Com o uso do GlassFish, seremos capazes de criar sistemas mais complexos, com uso de EJBs e transações distribuídas, além
de obtermos ferramentas para gerenciamento de componentes corporativos, como mensagerias, e ambiente de testes
simpli�cado para Web Services.
Criação do aplicativo web
Uma grande vantagem do uso de NetBeans, na versão completa, é a de que já traz todo o suporte ao desenvolvimento de
aplicativos para Web e com uso de Enterprise Java Beans, além de dar suporte a alguns frameworks e trazer os servidores
Tomcat e GlassFish incorporados ao ambiente de desenvolvimento.
Exemplo 1
Para criar um projeto Web, devemos seguir os seguintes passos:
1 No menu principal do NetBeans escolha a opção Arquivo..Novo Projeto, ou Ctrl+Shift+N;
2 Na janela que se abrirá escolha o tipo de projeto como Java Web..Aplicação Web e clique em Próximo;
Dê um nome para o projeto (WebTeste01) e diretório para armazenar seus arquivos (C:\MeusTestes), e clique em Próximo;
3
p p j ( ) p q ( \ ), q ;
4 Escolha o servidor (GlassFish) e versão do JEE (Java EE7) e clique em Finalizar.
Esta sequência de passos pode ser observada na seguinte sequência:
Ao término desses passos, o projeto gerado será apresentado no Painel de Controle, guia Projetos, como pode ser observado a
seguir.
Precisamos observar que o arquivo web.xml não é apresentado nessa estrutura, e isso se deve ao fato de termos utilizado o JEE
versão 7, onde as con�gurações são efetuadas, em sua grande maioria, com o uso de anotações.
O projeto é dividido em:
Páginas Web
Onde se encontram elementos JSP, HTML, CSS e outros.
Pacotes de Códigos-Fonte
Onde iremos colocar nossas classes e pacotes Java.
Bibliotecas
Para adicionar bibliotecas Java para uso pelo sistema. Arquivos de Con�guração
Incluindo elementos como MANIFEST e web.xml.
Criado o aplicativo, podemos começar a criar Servlets, JSPs e demais elementos constituintes de nosso sistema, e, ao clicar no
botão de execução, será iniciado o servidor (caso ainda não esteja ativo), gerado o arquivo war, copiado esse arquivo para o
diretório correto do servidor, efetuado o deploy e aberto o navegador no endereço correto para apresentação do index.
Servlets e JSPs
Conceitualmente, podemos dizer que Servlet é uma classe Java voltada para a criação de serviços remotos que estendem a
funcionalidade de algum servidor especí�co.
A tecnologia Servlet foi criada com o intuito de se tornar uma solução genérica para a
criação de aplicativos hospedados em servidores, quaisquer que fossem os protocolos
utilizados, mas foi a especialização para o HTTP que se tornou popular.
A classe HttpServlet, descendente de Servlet, integra-se com o ambiente onde é executada, o qual é denominado container Web,
tirando proveito de diversas tecnologias Java presentes ali, como a segurança com Realm e o uso de pools de conexão, e fornece
métodos para resposta às chamadas GET e POST do HTTP.
Tudo que precisamos fazer é criar um descendente da classe HttpServlet, herdando toda a integração com o ambiente já
existente, e alterar os métodos doGet e doPost para, através do polimor�smo, personalizar as respostas às necessidades de
nosso aplicativo.
Para adicionar um Servlet ao nosso projeto, devemos escolher o menu Arquivo..Novo Arquivo, ou pressionar CTRL+N, e seguir os
seguintes passos na janela que se abrirá:
Exemplo 2
1 Escolha o tipo de arquivo como Web..Servlet e clique em Próximo;
2 Dê um nome para o Servlet (ServCalc) e para o pacote onde será gerado (servlets), e clique em Próximo;
3 Observe as con�gurações de mapeamento do Servlet e clique em Finalizar.
Esta sequência de passos pode ser observada na sequência a seguir:
Teremos o código do Servlet gerado no editor de código do NetBeans, e devemos observar alguns detalhes, como o código oculto
(editor-fold), que trata de um trecho de código oculto através de comentários anteriores e posteriores, com a visualização
alternada através do clique sobre o sinal de “+” presente na margem esquerda do editor.
Comentário
O código oculto, nesse caso, engloba os métodos doGet e doPost, responsáveis pela recepção de chamadas HTTP dos tipos GET
e POST, respectivamente. No código gerado, ambos os métodos redirecionam para processRequest, o que fará com que GET e
POST sejam tratados da mesma forma, algo que nem sempre é interessante, pois temos situações, como no processo de login,
em que não devemos aceitar chamadas GET.
O próximo passo é alterar o método processRequest, para que o mesmo corresponda ao processamento necessário em nosso
sistema:
 
protected void processRequest(HttpServletRequest request, 
 HttpServletResponse response) throws ServletException,
 IOException {
 response.setContentType("text/html;charset=UTF-8");
 try (PrintWriter out = response.getWriter()) {
 int a = new Integer(request.getParameter("a"));
 int b = new Integer(request.getParameter("b"));
 out.println("‹html›‹body›");
 out.println("A soma de "+a+" e "+b+" será "+(a+b));
 out.println("›/body›‹/html›"); 
 }
}
A assinatura de processRequest, assim como em doGet e doPost, traz dois parâmetros:
O primeiro do tipo HttpServletRequest,
encapsulando a requisição HTTP.
O segundo do tipo HttpServletResponse,
responsável pela resposta HTTP.
Inicialmente é de�nido o tipo de saída que será utilizado, através do objeto response, e o �uxo da resposta é apontado pelo objeto
out.
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
Em seguida, capturamos os parâmetros enviados pela requisição HTTP, através do objeto request, os quais chegam no formato
texto, e os transformamos para o tipo inteiro.
int a = new Integer(request.getParameter("a"));
int b = new Integer(request.getParameter("b"));
Finalmente, construímos a saída HTML desejada, nesse caso apenas exibindo a soma de dois números enviados a partir da
chamada HTTP.
out.println("‹html›‹body›");out.println("A soma de "+a+" e "+b+" será "+(a+b));
out.println("‹/body›‹/html›");
Observe também a presença de uma anotação na de�nição do Servlet.
@WebServlet(name = "ServCalc", urlPatterns = {"/ServCalc"})
public class ServCalc extends HttpServlet {
Essa anotação efetua o mapeamento do Servlet, indicando o nome utilizado pelo mesmo e a URL para invocá-lo.
Embora tradicionalmente sejam utilizados textos correspondentes ao nome da classe em si, não é uma regra, podendo inclusive
ser adotadas URLs dinâmicas através de curingas, como “*.jsf”.
Com o nosso Servlet construído, podemos criar o formulário necessário para efetuar sua chamada, e faremos isso com uma
pequena inclusão no trecho ‹body› da página index.
Exemplo 4
 
‹!DOCTYPE html›
 ‹html›
 ‹body›
 ‹form method="GET" action="ServCalc"›
 ‹input type="text" name="a"/›
 ‹input type="text" name="b"/›
 ‹input type="submit" value="somar"/›
 ‹/form›
 ‹/body›
‹/html›
Finalizando todas essas modi�cações, precisamos apenas executar o projeto, sendo iniciado o servidor, efetuado o deploy e
aberto o navegador na página index.
Preenchendo os dois números desejados e clicando em somar, o Servlet será acionado e a resposta montada, sendo exibida no
navegador do cliente.
A criação de Servlets seria su�ciente para prover as necessidades de todo e qualquer aplicativo Web, porém a construção de
páginas através de código direto pode se tornar desconfortável para a maioria dos designers.
Uma solução para isso foi a de�nição de um novo modelo de programação, onde códigos Java são escritos dentro do conteúdo
HTML ou XML, o que foi chamado de Java Server Pages (JSP).
O processo para a criação de uma página JSP é basicamente o mesmo que o de um Servlet, sendo que devemos escolher arquivo
do tipo Web..JSP. O arquivo gerado �cará na seção Páginas Web do projeto, ou em um subdiretório.
Vamos observar a estrutura de uma página JSP simples.
Exemplo 5
 
‹%@page contentType="text/html" pageEncoding="UTF-8"%›
‹!DOCTYPE html›
 ‹html›
 ‹head›
 ‹meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8"›
 ‹title›JSP Page‹/title›
 ‹/head›
 ‹/body›
 ‹ul›
 ‹%›
 ‹String[] cores = {"vermelho","verde","azul"};
 for(String x: cores) {
 for(String x: cores) {
 out.println("‹li›"+x+"‹/li›");
 }
 %>
 ‹/ul›
 ‹/body›
‹/html›
A primeira linha desse código é uma diretiva, no caso indicando o tipo de conteúdo e a página de acentuação utilizada.
Diretivas também são utilizadas para importar bibliotecas, indicar herança, importar taglibs, de�nir a página de erro, entre diversas
outras opções.
‹%@page contentType="text/html" pageEncoding="UTF-8"%›
As linhas seguintes são código HTML padrão, e que não serão executados ao nível do servidor, mas simplesmente irão compor a
página de saída.
No meio das tags ‹ul› temos um Scriptlet, iniciado com ‹% e terminado com %›, tratando de código Java que será executado no
Servidor.
Nesse código, temos a de�nição de um vetor de cores, as quais serão impressas no conteúdo da página através do objeto out,
implícito nas páginas JSP.
‹%
      String[] cores = {"vermelho","verde","azul"};
      for(String x: cores) {
         out.println("‹li›"+x+"‹/li›");
      }
%>
Para executar diretamente o JSP, basta clicar com o botão direito sobre ele na guia de Projetos e mandar executar arquivo.
Podemos ver a página gerada a seguir.
Os objetos request e response também são implícitos para as páginas JSP, podendo ser utilizados da mesma forma que o foram
nos Servlets.
Atenção
Toda página JSP é convertida em Servlet pelo container Web no primeiro acesso. Logo, o que muda é basicamente a forma de
programar, não a funcionalidade original.
Gerência de sessões
As sessões são de grande utilidade no ambiente Web, provendo uma forma de manutenção de estados na troca de páginas.
Ao contrário dos sistemas desktop, a cada nova página temos outro conjunto de variáveis na memória, desconsiderando-se todas
aquelas existentes antes da requisição ser efetuada.
Podemos controlar sessões de forma muito simples, com o uso da classe HttpSession, e um exemplo típico de utilização é no
controle de login.
Atenção
Nas páginas JSP, o controle de sessão é feito com o uso do objeto implícito session, da classe HttpSession.
Vamos, inicialmente, criar uma página JSP protegida, denominada “Segura.jsp”, como pode ser observado no código seguinte.
 
‹%@page contentType="text/html" pageEncoding="UTF-8"%›
‹%
 if(session.getAttribute("usuario")==null) 
 response.sendRedirect("Login.jsp"); 
 else { 
 %›
 ‹!DOCTYPE html›
 ‹html›
 ‹body›
 ‹h1›Esta é uma página protegida!‹/h1›
 &O usuário ‹%=session.getAttribute("usuario")%›
 está logado.‹br/› 
 Para desconectar clique 
 ‹a href="ServletLogin?acao=desconectar"›aqui‹/a› 
 ‹/body›
‹/html›
‹% } %›
Enquanto os parâmetros da requisição assumem apenas valores do tipo texto, os atributos de uma sessão permitem guardar
qualquer tipo de objeto, inclusive texto.
Na primeira parte do arquivo JSP, temos o teste para a existência do atributo “usuario” na sessão. Se não existir, isso signi�ca que
não foi efetuado o processo de login, devendo ocorrer o redirecionamento para a página de login através de sendRedirect.
if(session.getAttribute("usuario")==null)
response.sendRedirect("Login.jsp");
else {
Atenção
Há dois tipos de redirecionamento no ambiente Java Web:
O modo sendRedirect envia um sinal de redirecionamento ao navegador, para que efetue uma nova requisição ao servidor;
Através de forward, efetuamos um redirecionamento interno no servidor, e as informações da requisição original são
mantidas no envio de um componente para outro.
Ainda observando o código, podemos notar que a instrução else é aberta antes do início do código HTML e fechada apenas no
�nal, logo após a tag de �nalização ‹/html›.
Isso signi�ca que todo esse bloco será processado apenas se ocorre o atributo usuário na sessão, ou seja, se existe alguém
logado no sistema.
Existindo um usuário logado, o bloco é executado e a página de resposta é montada, contando inclusive com a identi�cação do
login atual.
O usuário ‹%=session.getAttribute("usuario")%› está logado.‹br/›
Agora precisamos criar a página de login, denominada “Login.jsp”, e o Servlet responsável pelo controle das ações referentes aos
processos de conexão e desconexão, o qual será chamado de ServletLogin.
Podemos observar o código da página de login a seguir.
Exemplo 7
 
‹%@page contentType="text/html" pageEncoding="UTF-8"%›
‹!DOCTYPE html›
 ‹html›
 ‹body›
 ‹h1›Acesso ao Sistema‹/h1›
 ‹form action="ServletLogin" method="post"›
 ‹input type="hidden" name="acao" value="conectar"/›
 Login: ‹input type="text" name="login"/›
 Senha: ‹input type="password" name="senha"/›
 Senha: ‹input type="submit" value="login"/›
 ‹/form›
 ‹%
 if(request.getAttribute("erro")!=null) { 
 %›
 ‹hr/›Ocorreu um erro:‹%=request.getAttribute("erro")%›
 ‹%
 } 
 %›
 ‹/body›
‹/html›
Na primeira parte desse JSP temos um formulário HTML bastante simples, contendo as informações que deverão ser enviadas
ao Servlet para veri�cação.
Na segunda parte, apresentamos mensagens de erro enviadas pelo Servlet, como “Dados inválidos”.
Atenção
Esse trecho será apresentado apenas se o atributo de “erro” estiver presente na chamada ao JSP.
   ‹% 
       if(request.getAttribute("erro")!=null) {
  %›
      ‹hr/›Ocorreu um erro: ‹%=request.getAttribute("erro")%›
‹%
}
%›
Agora precisamos criar o ServletLogin e implementar o código apresentado a seguir.
 
@WebServlet(name = "ServletLogin", 
urlPatterns = {"/ServletLogin"}) public class ServletLogin extends HttpServlet {
 
@Override
protected void doPost(HttpServletRequest request, 
 HttpServletResponse response)
 throws ServletException, IOException 
 {
 String acao = request.getParameter("acao");