O documento fornece uma visão geral da disciplina Flash Professional CS5. Apresenta os objetivos de aprender conceitos sobre a plataforma Flash e aprofundar o conhecimento sobre a linguagem de programação ActionScript. Detalha os tópicos a serem abordados, incluindo fundamentos do Flash, ActionScript 3.0, elementos multimídia e metodologia de ensino.

1. Visão geral
Apresentação da disciplina:
O Flash surgiu como um programa para fazer animações para internet e
com o tempo ganhou outros recursos gráficos e habilidades de
programação. Foi na versão do Flash 4 que a linguagem de programação
Action Script ganhou grande popularidade com o software, pois era capaz
de fazer um tipo de conteúdo interativo para internet, lançado pela
empresa Macromedia. Com a compra da Macromedia pela empresa
Adobe, a ferramenta Flash evoluiu com o tempo ganhando cada vez mais
recursos gráficos e de programação, sendo uma ótima ferramenta para
design gráfico, animação, criação de programas e prototipagem de ideias.
Com toda essa evolução o Flash deixou de ser apenas um único
programa e passou a ser uma plataforma, conhecida como
PLATAFORMA FLASH.
Objetivos:
Nesta unidade, além de entender conceitos sobre a plataforma Flash,
vamos também, aprofundar conceitos sobre o Action Script. O Action
Script é uma linguagem de script orientada a objetos, com a sintaxe muito
parecida com Java Script, sendo utilizada no Flash para incrementar as
animações do objetos.
Conteúdo Programático:
 Flash CS5
o Fundamentos da Ferramentas;
o Linha do Tempo / Camadas;
o Animações;
o Elementos do FlasH;
o Motion Tween;
o Botões;
o Cenas;
o Importar e Exportar Arquivos.
 Action Script 3.0
o Fundamentos do Action Script;
o Funções Play, Stop;
o Carregamento de URLs;

2. o Carregamento de Filmes Externos;
o Criação de Sites.
 Elementos Multimídia
o Inserindo Músicas e Sons;
o Inserindo Elementos de Vídeos.
Metodologia:
Na unidade utilizaremos todos os recursos necessários e disponíveis para
o desenvolvimento da discussão do conteúdo, sendo assim, faremos uso
de:
 Textos da própria web-aula e de outros sites que possam contribuir para
a discussão;
 Vídeos que podem esclarecer ou aprofundar determinados conteúdos;
 Fóruns para discussão de tópicos onde seja possível a troca de ideias e
conteúdos entre os discentes e docentes;
 Avaliações virtuais onde será realizada a verificação do aprendizado;
 Entre outros recursos que poderão ser utilizados visando maior
entendimento da matéria.
Avaliação Prevista:
Cada web-aula conterá uma avaliação virtual composta de 5 questões
(sendo assim, temos 2 web-aulas com 5 questões cada). Quando houver
fórum de discussão o aluno será avaliado quanto ao conteúdo de sua
postagem, onde deverá comentar o tópico apresentando respostas
completas e com nível crítico de avaliação pertinente ao nível de pós-
graduação.
Critérios para Participação dos Alunos no Fórum:
Quando houver fórum de discussão o aluno será avaliado quanto ao
conteúdo de sua postagem, onde deverá comentar o tópico
apresentando respostas completas e com nível crítico de avaliação
pertinente ao nível de pós-graduação. Textos apenas concordando ou
discordando de comentários de outros participantes do fórum sem a
devida justificativa ou complementação não acrescentam em nada ao
debate da disciplina, sendo assim, devem ser evitados. Os textos
devem sempre vir acompanhados das justificativas para a opinião do

3. discente sobre o conteúdo discutido, para que assim, possamos dar
continuidade ao debate em nível adequado. Além disso, podem ser
utilizados citações de artigos, livros e outros recursos que
fundamentem a opinião ou deem sustentação a sua posição crítica
sobre o assunto. Deve ser respeitado o tópico principal do fórum,
evitando debates que não tem relação com o tema selecionado pelo
professor.
Página1 de 18
 PRÓXIMA
ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES
WEB
WEB AULA 1
Unidade 1 - Flash Professional CS5
1.1 Fundamentos da Ferramenta
Afinal de contas, o que é o Flash? Alguns dizem que ele serve para fazer animações,
outros dizem que é ótimo para fazer sites com mais interação, já outros dizem que o
Flash está “morto” e será abandonado.
Para entender isso melhor, vamos falar um pouco de como o Flash foi criado. O Flash
surgiu como um programa para fazer animações para internet, em uma época onde os
sites eram praticamente feitos de textos e umas poucas imagens.
Veja como era o site da empresa Adobe na época:
<http://web.archive.org/web/19961228111753/http://www2.adobe.com/>
Compare com o site da Adobe dos dias de hoje:
<http://www.adobe.com/>
Site da empresa Adobe em 1996 à esquerda e em 2012 à direita

4. Na verdade a primeira versão do programa era chamada de Splash lançado pela
empresa FutureWave Software em 1996:
Figura 1 - Tela de abertura da primeira versão do “Flash” – Splash (1996)

5. De lá pra cá, a maneira de fazer animação com o Flash não mudou muito, mas ele
ganhou outros recursos gráficos e habilidades de programação. Foi na versão do Flash
4 que a linguagem de programação Action Script ganhou grande popularidade com o
software, pois era capaz de fazer um tipo de conteúdo interativo para internet nunca
vistos antes, lançado pela empresa Macromedia.
Figura 2 - Tela de abertura da versão do Flash 4 (1999)
Página3 de 18
 ANTERIOR
 PRÓXIMA

6. A empresa Macromedia foi comprada pela empresa Adobe e a ferramenta Flash evoluiu
com o tempo ganhando cada vez mais recursos gráficos e de programação, sendo uma
ótima ferramenta para design gráfico, animação, criação de programas e prototipagem
de ideias.
Figura 3 - Tela de abertura da versão do Flash CS5 (2012)
Com toda essa evolução o Flash deixou de ser apenas um único programa e passou a
ser uma plataforma, conhecida como PLATAFORMA FLASH, tendo integração com
diversos outros programas da família Adobe e com outros recursos específicos.

7. Algo muito recorrente é a confusão feita quando se fala a palavra Flash, pois ela pode
significar várias coisas dentro da PLATAFORMA FLASH. Por exemplo:
Existem 03 ferramentas que levam o nome Flash:
 Flash Professional – Software original evoluiu e estamos abordando neste curso.

8.  Flash Catalyst – Software que surgiu mais tarde para criar projetos interativos sem depender de
conhecimentos avançados de programação.
 Flash Builder – Software para criar conteúdo flash apenas com linguagem de programação.
Todas essas 03 ferramentas são recursos diferentes para criar um arquivo conhecido
como Shockwave Flash, ou mais conhecido como SWF, que é o arquivo Flash compilado
com o conteúdo a ser publicado. No caso do Flash Professional, geralmente o arquivo
fonte é salvo no formato fla que através da ferramenta Flash Professional é capaz de
exportar um arquivo SWF.
ne do arquivo .fla ícone do arquivo .swf
Além das diferentes ferramentas existem também os “Players", também conhecidos
como Clientes ou Leitores de arquivos SWF. Eles são os programas que interpretam os
arquivos SWF para apresentar as animações e conteúdos feitos em Flash. Por padrão,
existem dois programas para reproduzir conteúdo Flash (SWF).
 Flash Player – leitor para ambiente de internet (mais conhecido).
 AIR – leitor para ambiente desktop (para aplicativos)
Página4 de 18
 ANTERIOR
 PRÓXIMA
Ícone do Flash Player

9. Ícone do AIR
O Flash Player é mais difundido como um plug-in para navegadores de internet. Esse
plug-in é amplamente distribuído e a grande maioria dos computadores pessoais tem o
Flash Player instalado. O Flash Player é útil para acessar conteúdos interativos na
internet como aplicativos web, leitores de vídeo, animações e jogos online.
Já o Air não é voltado para navegadores, ou seja, não é para ser acessado via internet.
Ele é um conteúdo Flash (SWF) transformado em um aplicativo que pode ser instalado
em computadores e plataformas móveis como celulares e tablets. O AIR possui
comunicação web, interação touchscreen e praticamente todas as funcionalidades do
que o Flash Player possui, mas com algumas coisas a mais.
Existe muita discussão sobre uma disputa entre o Flash e o HTML5.
Entre a discussão está o mito do flash não servir para celulares e tablets. De fato o
Flash Player, assim como praticamente todos os plug-ins de internet, não funciona nos
navegadores de boa parte dos celulares e tablets. Mas é possível criar conteúdo Flash
para esses dispositivos através de aplicativos feitos com o AIR e não mais com o Flash
Player.

10. Que tal discutir sobre isso no Forum?
Para trabalhar no Flash Professional, basta seguir alguns passos básicos:
 Planeje o que vai ser feito
o Organize antes o que você deseja fazer com a ferramenta e que recursos você irá usar (sons,
imagens, textos etc.)
 Adicione recursos de mídia
o Crie os desenhos, importe as imagens, os vídeos, sons e textos.
 Organize as coisas
o Organize os elementos de mídia no Palco e na Linha do tempo. Monte as animações
separadamente e junte tudo no Palco.
 Teste e publique o SWF
o É bom verificar se o SWF gerado está funcionando como desejado, e corrigir quaisquer erros
encontrados.
Para saber como fazer essas cosias vamos precisar entender melhor as ferramentas
que o Flash Professional nos oferece. Vamos lá.
Página5 de 18
 ANTERIOR
 PRÓXIMA
1.2 Elementos do Flash Professional
Por onde começar? Existem várias opções na tela inicial do Flash Professional, mas
estas opções são apenas templates, ou seja, configurações pré-definidas para a
exportação do SWF. Por padrão podemos sempre escolher a primeira opção da coluna
do meio (ActionsScript 3.0) para criar um novo arquivo vazio.
Figura 4 - Opções iniciais do Flash Professional CS5.5

11. Antes de começar a usar a ferramenta precisamos aprender sua interface, não é
mesmo?
Podemos dividir a interface do Flash Professional em 06 elementos principais:
Figura 5 - Imagem inicial do Flash Professional CS5.5

12. 1. PALCO: onde são posicionados os objetos gráficos como
imagens e desenhos.
2. Barra de FERRAMENTAS: são os recursos para manipular os objetos, criar desenhos, textos entre
outras coisas.
3. LINHADE TEMPO:ondeestão as camadas e os quadros chaves dos objetos, mostrando a mudança
no tempo para animações.
4. PAINÉIS: são de diversos tipos, servem para controlar parâmetros específicos como cor, rotação e
escala, alinhamento e várias outras coisas.
5. BIBLIOTECA: onde ficam guardados os objetos salvos como símbolos e as coisas importadas no
programa como imagens, sons e vídeos.
6. PROPRIEDADES:mostraos parâmetros que podem ser configurados para cada objeto selecionado.
As propriedades dependem daquilo que está selecionado. É muito importante saber qual o tipo de
objeto que está selecionado, para identificar corretamente as propriedades que estão sendo
mostradas. De modo geral, podemos distinguir 03 tipos de propriedades:
 Propriedades do palco: são as propriedades do arquivo FLA em si. Tem parâmetros gerais sobre a
exportação do arquivo SWF.
 Propriedades dos objetos: são as propriedades de todos os objetos colocados no palco, podem
ser imagens, desenhos ou símbolos.
 Propriedades do quadro chave: são as propriedades do quadro-chave selecionado. Cuidado para
não confundir as propriedades do quadro-chave com as propriedades de um objeto selecionado.
Página6 de 18
 ANTERIOR
1.3 TIPOS DE OBJETOS
Que tipo de conteúdo existe dentro do Flash? Quais as
propriedades desses objetos? Alguns objetos são criados diretamente no Flash como
FORMAS, TEXTOS e SÍMBOLOS, outros objetos podem ser importados de arquivos
externos através dos atalhos: Arquivo/Importar/... ou pelo atalho CTRL + R.

13. 1 . FORMAS: são as linhas e os preenchimentos que é possível desenhar
no Palco. Eles ficam com a aparência ¿rachurada¿ quando selecionados. São os objetos
mais simples que servem para fazer composições gráficas e desenhos.
2. TEXTOS: objetos com conteúdo de texto. Podem ser de 03 tipos:
a. Estático: são textos que aparecem como se fossem um desenho. Serão exportados
como uma forma.
b. Dinâmico: são os textos que podem ser mudados através do Action Script.
c. Entrada: são os textos para campos onde o usuário poderá digitar. Também é
acessado através do Action Script
3. IMAGENS: imagens podem ser usadas dentro do Flash, porém apenas como uma
figura ou preenchimento de algum desenho. As imagens não podem ser editadas em
suas propriedades, por isso é muito importante usar imagens no tamanho adequado
para seu projeto, evite redimensionar uma imagem dentro do Flash e evite usar
imagens muito grandes. Para ajustar a imagem, faça isso em outro software como o
Adobe Photoshop.
Os símbolos permitem repetir elementos gráficos sem aumentar o espaço de
armazenamento daquela imagem na publicação final em SWF.
4. SÍMBOLOS: Os símbolos são os elementos mais

14. importantes no Flash, pois permitem organizar de forma sistemática
todo o projeto. Um símbolo é um gráfico, botão ou clipe de filme que você cria uma vez
no Flash e pode duplicar o símbolo novamente sem criar um novo objeto. Todo símbolo
fica guardado na Biblioteca do Flash, quando é colocada uma cópia desse símbolo no
palco, as cópias ficam vinculadas ao símbolo original, ou seja, tudo que for mudado em
um objeto será mudado em outro também.
a. CLIPE DE FILME (MovieClip): são os símbolos mais comuns no Flash, pois são
objetos acessíveis pela linguagem de programação Action Script. Possuem uma Linha
de Tempo interna independente, ou seja, não depende do tempo principal da animação,
pode parar e voltar a reproduzir a qualquer momento. Além disso, permitem recursos
de efeito de imagem como:
I. Transformação 3D
II. Animação do tipo Motion
III. Modos de Mesclagem (Escurecer, Clarear, Multiplicar, etc)
IV. Filtros (Desfoque, sombra projetada, etc).
b. BOTÃO (Button): são símbolos úteis para criar uma peça que irá reagir com as
ações do Mouse. Bom para criar botões interativos que respondam a cliques do mouse,
rolagens ou outras ações. Possui uma Linha do Tempo especial com Quadros Chaves
para cada tipo de evento:
Quadros para os eventos do símbolo do tipo
Botão
I. O primeiro quadro é o estado Para cima (Up), representando o botão sempre que
oMouse não estiver sobre o botão.
II. O segundo quadro é o estado Sobre (Over), representando a aparência do botão
quando o Mouse estiver sobre o botão.
III. O terceiro quadro é o estado Para baixo(Down), representando a aparência do botão

15. quando clicado.
IV. O quarto quadro é o estado Ocorrência (Hit), definindo a área física que responde
aos eventos do Mouse. Esta imagem é invisível quando publicado em formato SWF. Algo
muito comum de se fazer é utilizar botões apenas com um retângulo nesse quadro
chave, para criar botões transparentes que podem ser colocados em cima de textos e
imagens para corresponder aos eventos do Mouse. Esses botões transparentes ficam
com a cor ciano no palco, apenas para reconhecimento.
Página7 de 18
 ANTERIOR
 PRÓXIMA
c. GRÁFICO (Graphic): são os símbolos que servem para guardar coisas. Use os
gráficos para imagens estáticas e para criar partes reutilizáveis de animação. Sua Linha
de Tempo é dependente de onde ele esteja, ou seja, ele irá reproduzir seu conteúdo
conforme a Linha de tempo onde o gráfico estiver inserido. O gráfico é muito útil para
controlar animações, pois possui propriedades para reprodução do seu conteúdo:
I. Loop – repete a animação de dentro do Gráfico em todos os
quadros que o símbolo ocupa.
II. Reproduzir uma vez – dispara a animação de dentro do Gráfico apenas uma vez,
dentro dos quadros que o símbolo ocupa.
III. Quadro simples– exibe apenas um dos quadros chaves de dentro da animação
do Gráfico.
Uma dúvida comum é quando usar Gráfico e quando usar Clipes de Filme. Depende do
contexto, por exemplo: Se você estiver fazendo um game em Flash, é bem provável
que os Clipes de Filme sejam a melhor opção, porque o game é completamente dinâmico
e pode ter animações controladas pela programação. Já se for o caso de uma animação
que será importada em outro programa Adobe, como o Adobe Premiere, é essencial
que todas as animações sejam feitas em Gráficos, caso contrário, as animações não
funcionarão no vídeo final.

16. Veja um pouco mais sobre símbolos no vídeo:
<https://www.youtube.com/watch?v=Fs3cpIz3ZgA&feature=relmfu>
5. COMPONENTES: os componentes são nada mais do que símbolos criados no flash,
mas com algum Action Script embutido neles para ser usado de forma mais fácil. Com
conhecimentos de Action Script é possível criar seus próprios componentes. Isso é útil
para facilitar o trabalho e tornar um código de programação reutilizável para outros
projetos. O atalho Ctrl+F7 abre os componentes padrões do Flash Professional.
6. VÍDEO: Vídeos podem se usados de duas maneiras no Flash:
a. Embeded: É quando o arquivo de vídeo é importado para dentro do arquivo FLA e é
exportado dentro do SWF, como se fosse um arquivo de imagem. Este vídeo será
reproduzido em alguma Linha de Tempo do Flash e por isso seu formato é mais pesado
e pode perder sincronia com o áudio. Este tipo de vídeo tem um uso um pouco restrito
e deve ser usado apenas para vídeo pequenos de curta duração.
b. Streaming: é quando o vídeo é externo ao arquivo SWF, ou seja, o Flash funciona
como um programa de lê vídeos. A diferença é que com o Flash você pode criar o player
de vídeo da maneira que quiser através da programação Action Script. O vídeo
carregado não depende em nada na Linha de tempo do Flash, é totalmente
independente.
7. SONS: Sons não são visíveis no Palco, eles aparecem apenas na biblioteca e podem
ser vinculados nas propriedades do Quadro Chave.
8. Existem 02 tipos de configuração para o som que é anexado a uma Linha de Tempo:
a. SOM TIPO Stream: o Tipo Stream irá sincronizar o tempo dos Quadros-chaves com o
tempo do som e pode ser ouvido em tempo de edição, ou seja, se a linha de tempo
terminar o som não será mais emitido. Este caso é mais indicado para animações e
falas de personagens onde o tempo do áudio precisa encaixar exatamente com a
imagem. Há uma leve perda de qualidade.
b. SOM TIPO Event: o Tipo Event é o som que é executado independente da imagem do
Quadro Chave. Ideal para efeitos sonoros e sons de feedbackpara eventos de interação
com o mouse, por exemplo. Não há perda de qualidade.

17. 1.4 DESENHANDO NO FLASH
O Flash é uma ferramenta essencialmente vetorial, por isso ele pode ser leve para rodar
em site online. Mas afinal de contas o que é uma imagem vetorial? Existem dois
sistemas de imagem no computador o vetorial e o bitmap.
As ferramentas vetoriais são aquelas que trabalham com imagens 2D que são geradas
a partir de descrições geométricas de formas. Vetores são imagens diferentes das
imagens do tipo bitmap, ou mapa de bits, que são aquelas formadas por vários pontos,
pixels, cada um com uma cor.
Figura 6 - Imagem vetorial à esquerda e bitmap à direita
Imagem vetorial é um tipo de imagem gerada a partir de descrições geométricas de
formas, diferente das imagens que são geradas a partir de pontos minúsculos
diferenciados por suas cores. Uma imagem vetorial normalmente é composta por
curvas, elipses, polígonos, texto, entre outros elementos, isto é, utilizam informações
(vetores) matemáticos para sua descrição. Em um trecho de desenho sólido, de uma
cor apenas, um programa vetorial apenas repete o padrão, não tendo que armazenar
dados para cada pixel.
Por causa disso, os gráficos vetoriais geralmente são mais leves (ocupam menos
memória no disco rígido do computador) e não perdem qualidade ao serem ampliados,
já que as funções matemáticas adequam-se facilmente à escala, o que não ocorre com
outros tipos de imagem.
Agora vamos aprender como se desenha utilizando a ferramenta Flash. Podemos ver
que o flash possui diversas formas básicas tais como o retângulo, polígono e a elipse e
que através dessas imagens podemos combiná-las e transformá-las em desenhos e

18. formas mais complexas. Vamos ver como desenhar formas básicas e transformá-las.
Para se acessara ferramenta polígono devemos clicarna ferramenta retângulo e manter
o botão esquerdo do mouse pressionado.
Para desenhar qualquer uma destas formas, selecione-as, vá para sua área de trabalho
e clique e arraste na diagonal. Para desenhar círculos e quadrados desenhe com a tecla
SHIFT pressionada, se desenharmos com a tecla ALT pressionada desenhamos as duas
formas a partir do centro.
Quando desenhamos uma forma básica esta forma apresenta seu contorno e
preenchimento separados, para mover uma forma depois de pronta, não basta apenas
clicar em qualquer ponto, devemos clicar duas vezes no meio da forma, para selecionar
seu preenchimento e seu conteúdo.
Para podermos alterar um retângulo ou um polígono podemos fazer de duas maneiras:
clicando e arrastando o vértice do ângulo ou clicando e arrastando em qualquer ponto
do seu contorno.
Para aumentar ou diminuir o tamanho de qualquer forma, use a ferramenta Transform.
Clique na ferramenta Transform, depois clique na forma que deseja modificar o
tamanho, se esta forma tiver contorno e preenchimento, devemos clicar duas vezes
para selecionar.
Para retirar o contorno de uma elipse, de um clique com a ferramenta Selection e
pressione Delete, de retângulos ou polígonos, podemos remover só um lado do
contorno ou todos os lados.
Para remover só de um lado clique uma vez, na parte do contorno que quer apagar e
pressione Delete, para remover todos os lados clique duas vezes em qualquer parte do
contorno e pressione Delete.
Podemos também combinar as formas de duas maneiras aparando ou soldando as
formas. Para aparar as formas usamos uma forma para recortar outra. Para isso
devemos desenhar duas formas da mesma cor e sem retirar o contorno. Por exemplo.
Podemos clicar em um círculo da direita e posicione em cima de um outro círculo à
esquerda, desmarcando-o.
Página8 de 18
 ANTERIOR
 PRÓXIMA

19. Depois clicamos duas vezes no círculo da direita e arrastamos para seu lugar de origem.
O que fez uma forma recortar a outra foi o contorno, podemos usar também formas
sem contorno, mas com preenchimentos diferentes.
As formas criadas com o modo Desenho de objeto permanecem como objetos
separados que você pode manipular separadamente.
As formas criadas com o modo Mesclar desenho se fundem quando são superpostas. A seleção
da forma e sua movimentação causam a alteração da forma superposta.
Para soldar as formas devemos desenhar duas formas da mesma maneira e retirar o
contorno. Se clicarmos no objeto da direita e arrastarmos para cima da outra imagem,
depois que desmarcarmos eles se fundirão numa única imagem.
Para desenhar linhas e traçados temos quatro ferramentas:

20. O lápis é uma ferramenta de desenho muito útil, pois permite a pintura de detalhes,
desenhos a mão livre e muito mais. Existem vários modos de desenho com o lápis, e
os recursos de suavização do Flash são bem interessantes. Podemos usar o lápis como
um lápis normal, mas também podemos fazer com que os traços sejam
automaticamente suavizados, em curvas ou em retas.
Quando selecionamos a ferramenta lápis, aparecem na parte de baixo da caixa algumas
ferramentas de controle. A opção Straighten (correção) desenha uma linha sinuosa na
tela, você irá observar que os ângulos da linha vão ficar um pouco mais retos. A
opção Smooth (suavização) desenha uma linha parecida com a anterior, mas podemos
notar que quando terminar de desenhar a linha terá seus contornos suavizados. E a
opção Ink (tinta) não altera a aparência das linhas depois de desenhadas.
Figura 7 - Linhas desenhadas no modo Correção, Suavização e Tinta
A ferramenta pincel tem um funcionamento parecido com a ferramenta Lápis, com a
diferença que podemos escolher o formato do pincel. Na parte de baixo da barra de
ferramentas podemos escolher o tamanho do pincel e um modelo de pincel. Além do
tamanho e do traçado podemos alterar também o comportamento do desenho do
traçado em relação às outras formas, podemos pintar somente sobre áreas
preenchidas, só atrás de outras formas etc.
Figura 8 - Um traçado com pincel de largura variável desenhado com uma caneta

21. Podemos usar também a ferramenta Pen para desenharpolígonos irregulares ou formas
curvas. Para desenhar polígonos, selecione a ferramenta Pen e clique em vários pontos
da tela, para finalizar esta forma de um clique no ponto inicial do desenho. Para
desenhar formas curvas, selecione a Pen e quando clicar, dê uma pequena “arrastada”
com o mouse, finalize clicando no ponto inicial.
Para desenhar no flash, não é preciso de muita técnica, é a paciência que conta.
Podemos criar bons desenhos vetorizados com um resultado muito satisfatório. Usar o
flash nos permite desenhar um rosto humano, fazer um Cartum ou mesmo vetorizar
imagens e logomarcas.
Página9 de 18
 ANTERIOR
 PRÓXIMA
1.5 LinhaS de Tempo e Camadas
Como vamos trabalhar todos esses objetos do flash no tempo? Uma das principais
virtudes do Flash é justamente a capacidade de usar animações para montar seus
conteúdos. Para isso precisamos entender como funciona a Linha de Tempo e as
Camadas.
Figura 9 - Quadros chaves de uma bolinha pulando
Veja esta animação:
<https://www.youtube.com/watch?v=fnkrsgbceus&feature=youtu.be>
Linha de Tempo e Camada funcionam em conjunto, cada camada possui uma linha de
tempo que serve para organizar a passagem do tempo em formato de quadros, onde
cada quadro representa uma posição do movimento no tempo.
Figura 10 - Partes da Linha do tempo

22. ndicador de reprodução
Quadro-chave vazio
Camada
Ícone da camada de guia
Menu pop-up Exibição de quadros
Animação quadro a quadro
G. Animação interpolada
H. Botão Rolar até o indicador de reprodução
I. Botões de papel de transparência
J. Indicador de quadro atual
K. Indicador de taxa de quadros
L. Indicador de tempo decorrido em segundos
Você pode arrastar o indicador de reprodução para mudar a posição no tempo e fazer
as edições em cada quadro. Alguns atalhos são bem úteis para facilitar essa edição:
Figura 11 - Atalhos para manipular a Linha de Tempo
CTRL + Alt + C Copia Quadros selecionados
CTRL + Alt + V Cola Quadros
F5 Prolonga Quadros
F6 Insere Quadro Chave
F7 Insere Quadro Chave em Branco
SHIFT + F5 Remove Quadros
SHIFT + F6 Limpa Quadro Chave

23. > Avança um Quadro
<
Recua um Quadro
Página10 de 18
 ANTERIOR
 PRÓXIMA
O que será que acontece com a Linha de tempo quando se coloca um símbolo dentro
de outro?
Cada símbolo tem sua própria Linha do tempo e Camadas para organizar as coisas.
Podemos imaginar o Palco como um grande Símbolo do arquivo, onde vamos
preenchendo com outros Símbolos um dentro do outro. Essa é uma característica
poderosa do Flash, pois permite criar animações complexar misturando pequenos
fragmentos de animação, por exemplo: Para criar uma animação de um rosto para um
personagem você pode começar criando os olhos piscando dentro de um Símbolo,
depois juntar com os outros Símbolos do nariz, boca dentro de outro Símbolo e chamá-
lo de Rosto.
Pois é, isso pode parecer um pouco confuso, mas é essencial para facilitar o trabalho
no Flash.
Figura 12 - Múltiplas Linhas de Tempo dentro dos símbolos

24. A Linha de Tempo principal pode ser organizada em
Cenas. As Cenas servem para dividir o trabalho e a forma de organizar a animação. Em
geral, as Cenas são usadas apenas para realizar animações mais longas, pois em casos
de animações curtas, o melhor é organizar as coisas apenas com Símbolos.
Para inserir uma Cena, basta ir ao Menu: Inserir > Cena. Para gerenciar as Cenas é
preciso abrir o Painel Cenas pelo Menu: Janelas > Outros Painéis > Cenas, ou usar o
Atalho: SHIFT+F2.
Página11 de 18
 ANTERIOR
 PRÓXIMA
1.6 ANIMAÇÕES
Como funciona uma animação? Para uma animação funcionar é preciso pensar nas
posições principais de um objeto no decorrer do tempo, por exemplo: se uma bolinha
cai de uma mesa quais são os Quadros-chaves desse movimento?
Animação, do ponto de vista técnico, nada mais é do que um encadeamento de imagens
estáticas, de um objeto, um desenho, ou qualquer elemento gráfico, em uma sequência
que cria a ilusão de movimento contínuo.
Figura 13 - Quadros de uma animação

25. No processo de animação tradicional, conhecido como quadro a quadro, os animadores
precisam desenhar todos os quadros da animação. Animadores mais experientes
geralmente ficam encarregados dos quadros chave, que forma a sequencia básica de
um movimento e os “intervaladores” ficam encarregados de produzir os quadros
intermediários e completar a sequência. O Flash funciona como um “intervalador”,
preenchendo os quadros entre os quadros chaves que você definiu.
A maioria das pessoas que se inicia em animação pergunta quantos quadros são
necessários para completar uma determinada ação. Mas a dúvida real não é essa. Na
verdade, é preciso saber quanto tempo será preciso para expor essa determinada ação
de forma inteligível.
É o tempo que irá determinar o início e o fim de alguma ação que se deseja exibir, e
assim o cálculo de quadros necessários fica bem mais fácil e objetivo. Imagine que uma
xícara pode cair de uma mesa até se quebrar no chão. Normalmente isso pode
acontecer em 1 ou 2 segundos, que geral cerca de 40 quadros, mas se a ação, por
algum motivo, for apresentada em câmera-lenta, e durar 6 segundos, a quantidade de
quadros passa para aproximadamente 140.
Para fazer uma animação no Flash deve-se criar Quadros-chaves (F6) na Linha de
Tempo com as posições principais do movimento, os demais quadros serão criados
automaticamente pelo programa (quadros intermediários), esse procedimento é
conhecido como Interpolação dos Quadros Chaves.
Figura 14 - Significado dos Quadros Chaves

26. Sequências de animação são planejadas tendo como base três pontos principais: quadro
inicial,quadro final e quadros chaves. Por exemplo, um personagem desloca-se andando do
ponto A ao ponto B. Algo bastante simples. A sequência pede a criação de quadros
repetidos que façam a composição dos passos sequenciais em loop, ou seja, em
repetição. Esses quadros se repetirão até o fim do trajeto.
Um loop é uma sequência cíclica na qual o último quadro de um movimento encadeia-
se ao primeiro formando uma corrente contínua. Mas o personagem pode se deslocar
do ponto A para o ponto B, tropeçar em uma pedra no meio do caminho e continuar
andando. Esse evento de tropeçar, quebra a linearidade da sequência. É um quadro
chave, uma ação intermediária e precisa ser considerada com cuidado.
Página12 de 18
 ANTERIOR
 PRÓXIMA
Existem três técnicas básicas de interpolação de movimento: Interpolação Clássica
(Classic Tween), Interpolação de Forma (Shape Tween) e Interpolação de
Movimento (Motion Tween). A animação com armadura é um tipo de animação parecida
com a interpolação de movimento que falaremos mais adiante.
Figura 15 - Os tipos diferentes de animação

27.  Interpolação Clássica (Classic Tween)
o A interpolação clássica é a forma tradicional de criar animações no Flash. Ela é capaz de
animar a posição, rotação e escala dos Símbolos, além de parâmetros como Brilho,
Transparência entre outros. Basta clicar com o botão direito em cima de qualquer parte de
um Quadro-chave e escolher a opção Interpolação Clássica.
o Para fazer isso você precisa seguir algumas regrinhas simples.
 A animação deve ter um começo e um fim.
 Só pode haver 01 Símbolo por Camadapara animar. Caso contrário o Flash pode criar
um Símbolo automaticamente e o resultado não ser o esperado, ou simplesmente
aparecer uma linha tracejada e não funcionar.
 Use o Símbolo do Quadro final igual ao do Quadro inicial, de preferência.
 Interpolação de Forma (Shape Tween)
o A interpolação de forma ao contrário das demais não precisa de Símbolos, pelo contrário,
como o nome já diz é feita com os desenhos do Flash.
Para ligar esse tipo de animação, você precisa ter um desenho em um Quadro-chave inicial
e o mesmo desenho, com alguma modificação, no Quadro-chave final. Basta clicar com o
botão direito do mouse sobre o Quadro-chave inicial e escolher a opção “interpolação de
forma”, então o Flash irá tentar reposicionar os pontos vetoriais para que a transformação
aconteça, mas se o desenho for muito complexo geralmente essa técnica de animação não
se aplica.
 Interpolação de Movimento (Motion Tween)

28. o A interpolação de movimento é um pouco diferente das duas
anteriores, pois só funciona em versões do Action Script 3.0. Nesta técnica você não precisa
criar os Quadros-chaves previamente, basta clicar com o botão direito do mouse e selecionar
“interpolação de Movimento”. Depois é só alterar a posição, rotação e escala do objeto no
tempo que os quadros chaves serão criados. Diferente da interpolação clássica, a
interpolação de movimento usa propriedades dentro de um único Quadro-chave.
Existem algumas vantagens em usar a interpolação de movimento, como por
exemplo, a possibilidade de converter a animação em Action Script e usar isso como
um código. Outra vantagem é poder animar as 3 dimensões da rotação (3D) e
também usar o editor de movimento. Porém, a interpolação clássica também é muito
poderosa, pois permite uma edição rápida e um tipo de controle com Gráficos que
permite uma composição sem igual. O ideal é usar o melhor dos dois mundos.
Página13 de 18
 ANTERIOR
 PRÓXIMA
1.7 USANDO ARMADURAS E BONES
A animação com armadura é um processo muito comum em programas 3d como 3D
Studio Max, Maya e Blender. Porém, o conceito também pode ser aplicado a animações
2D também.
A ideia consiste em fazer a forma de um desenho ser vinculada aos bones (ossos) para
que o desenho distorça conforme o movimento dos bones. Funciona igual aos músculos
vinculados aos ossos nos seres vivos.

29. Para isso funcionar, você precisa primeiro criar uma forma no Flash, depois escolha a
ferramenta Bone como mostra o ícone ao lado.
Com essa ferramenta você poderá criar os ossos necessários para controlar o desenho.
Selecione todo o desenho que deseja vincular ao bone, e depois crie os elementos. Mas
cuidado, desenhos muito complexos geralmente não funcionam com esse tipo de
técnica, é preciso usar formas simples. Outra confusão é o bone funcionar apenas com
parte do desenho, quando o mesmo tem várias cores diferentes você pode acabar
selecionando apena suma parte sem querer.
Figura 16 - Desenho (em vermelho) deformado com os bonés (em rosa e verde)
O Flash cria um objeto de Armadura automaticamente
depois desse processo, use o CTRL+Z para começar de novo caso precise ou use o
comando Modificar/Separar em partes no menu (CTRL+B).
1.8 CONCEITOS DE ANIMAÇÃO
Devemos entender animação como um conhecimento que possui sua própria estética,
a estética do movimento. Isto significa que animação não é simplesmente um

30. encadeamento de desenhos, mas um encadeamento de desenhos dotados de toda uma
estética particular.
A estética do desenho consiste em saber como funcionam os movimentos dos corpos,
principalmente dos seres vivos, e a partir daí ter a criatividade e o talento de fazer que
tais movimentos expressem uma ideia. Se compararmos o andar de pessoas do gênero
masculino e feminino, vemos que o primeiro possui um movimento mais direto e firme.
Já o andar feminino é mais sinuoso e suave. Podemos descrever ambos os andares da
mesma forma, com um pé após o outro, contudo, suas diferenças estão nos detalhes.
Conseguir perceber as sutilezas do movimento é parte fundamental do trabalho de
animação.
Para entendermos como funciona toda essa estética, vamos observar alguns dos
conceitos mais pertinentes em animação. Vamos chamar esses conceitos de “repertório
básico de animação”. Sendo assim o repertório é formado por “quadros chaves, linha
de ação, compressão extensão e referência para animação ou rotoscopia”.
Quadros chaves
O primeiro item desse repertório certamente são os quadros-chaves. Como já foi
explicado anteriormente, nos quadros-chaves que são pensados os movimentos, eles
são os quadros da animação que diferencia as poses de um personagem. Podemos dizer
que com os quadros-chaves temos a leitura de todo o movimento, são eles que
descrevem o movimento.
Observando o movimento de uma bola que quica no chão, podemos descrever que ela
vem do alto, colido com o chão e volta. Então podemos pensar em três quadros-chaves
para esse movimento.
Figura 17- Quadros-chaves e quadros-chaves com os intervalos

31. Página14 de 18
 ANTERIOR
 PRÓXIMA
1- Linha de ação: A linha de ação é uma forma simplificada de se pensar os quadros
chaves de personagens ou criaturas complexas de se desenhar. Significa pensar o
desenho de um quadro em uma simples linha, ou seja, pensar o movimento da linha,
pois ela é uma forma mais fácil de ser desenhada.
Imagine ter que fazer todo um desenho de um personagem para testaruma ideia. Caso
o movimento não fique satisfatório, teria que fazer tudo de novo. Assim, tendo a linha
como a espinha dorsal do movimento, fica mais ágil pensar o movimento.
Além disso, com a linha de ação é possível pensar a expressão do movimento,
imaginando os gestos dos personagens, as curvaturas de seus corpos e leveza ou
brutalidade da ação.
Importante lembrar que a linha de ação não é necessariamente uma das linhas do
desenho, mas sim uma linha que sintetiza todas as outras linhas do desenho.
Figura 18 - Quadros de um cachorro correndo e suas linhas de ação
2 - Compressão extensão: Outro princípio muito importante na hora de fazer a animação
é notar que quando parte de um personagem move-se, como são os movimentos dos
braços, geralmente o resto do corpo também se movimenta para antecipar o
movimento, ou por uma questão de força, mesmo que levemente.
O que acontece é que para uma animação ficar com riqueza de detalhes, é preciso
manter em movimento todas as linhas do desenho durante a sequência.
Para isso, uma estratégia muito utilizada é comprimir e estendero objeto em animação,
conforme as forças que atuam no corpo do objeto ou personagem em movimento. Por
exemplo, quando um personagem pisa no chão ao andar, podemos achatá-lo um pouco
em função da força que ele fez ao pisar, e esticá-lo um pouco quando ele esticar a
perna ao continuar o movimento.

32. Claro que dependendo do efeito dramático desejado, isso pode variar. Como em uma
cena de espanto, o personagem pode ficar paralisado na tela, ou quando se pretende
um efeito cômico a compressão e extensão serão bem exageradas. Isso deve ser de
acordo com a atmosfera do jogo e a criação do personagem. O importante é manter as
linhas do desenho em movimento.
Figura 19 - Animação com compressão e extensão
3 - Referência para animação ou Rotoscopia: Quando é preciso criar uma animação muito
complexa, como uma dança, uma luta ou quando é preciso interpretar um movimento
expressivo, como feições faciais e gestos, o repertório do artista pode não ser suficiente
para realizar tal criação.
Sendo assim, o animador deve fazer uso de referências, como filmagens ou outras
animações. Muitos artistas 3D filmam sua própria imagem para interpretar os
personagens que irão animar. A partir daí, é possível usar o filme de referência,
encontrar os quadros chaves e toda estética do movimento.
Muitas animações são feitas com rotoscopia, que trata de criar toda uma animação
baseando-se em filmagens de atores reais. Na rotoscopia os quadros são feitos em cima
de cada imagem filmada, mas pode ser acrescentados objetos ou mudadas as
características dos atores.
Figura 20 - Imagem de referência e quadro desenhado em rotoscopia

33. Página15 de 18
 ANTERIOR
 PRÓXIMA
1.9 PLANEJANDO SUA ANIMAÇÃO COM UM STORYBOARD
Bom, até agora vimos como funciona a animação sobre aquilo que cerca o movimento
das coisas em si, ou seja, em função da estética do movimento e de como pensar os
quadros de animação.
Contudo existe outra parte do universo da animação bem mais abrangente, a do
planejamento da narrativa de animação, no qual é desenvolvido um documento
chamado storyboard para as cenas assistidas.
O storyboard é uma planificação de uma sequência em movimento. É quase uma história
em quadrinhos do projeto, mas com as anotações específicas de uma produção áudio-
visual, seja esse projeto um filme, um desenho animado ou um jogo.
Figura 21 - Exemplo de storyboard de um episódio dos Simpsons

34. Não há quantidade de quadros ou páginas que possa ser apontado como mínimo,
máximo, ou ideal em um storyboard. A estrutura de cada projeto é que determinará o
seu tamanho. Em um jogo de nave espacial com visão fixa, por exemplo, a necessidade
de um storyboard será mínima e serão necessários poucos quadros para se definir a
estrutura e dinâmica visual do jogo.
Sabendo de antemão os enquadramentos, linguagem, ângulos de narrativa e expressão
gráfica, é mais rápido para a equipe “falar a mesma língua” e concentrar os esforços
em uma meta comum.
De forma mais ampla, o storyboard também dá consistência ao projeto. A partir dele
começa-se a entender e visualizar o projeto como um todo, sua linha narrativa e
dinâmica visual, o que é um grande estímulo para a equipe envolvida.

35. No storyboard o importante não é a qualidade do desenho, mas sim o encadeamento das
ideias e a quantificação do trabalho de animação. Portanto, não é necessário
desenvolver as feições finais dos personagens e ilustrações com acabamento
rebuscado, o importante é estudar a sequência.
O storyboard é um documento vivo que pode ser revisto e reestudado, é com ele que a
equipe pode avaliar o todo, fazendo correções sem prejudicar o conjunto.
Página16 de 18
 ANTERIOR
 PRÓXIMA
1.10 DEIXANDO O FLASH DO SEU JEITO
Para ficar mais à vontade com a ferramenta Flash, você pode escolher algumas
preferências do programa. Vá até o menu Editar>Preferências ou use o atalho CTRL+U.
Como já vimos antes, uma característica do Flash é usar um objeto dentro de outro,
mas e quando a gente quiser usar o CTRL+Z para desfazer alguma coisa, o Flash vai
saber o que foi mudado aonde? Até certo ponto sim, essa é o formato padrão de
“CTRL+Z” no Flash, mas pode gerar problemas e não ser o mais interessante.
Já que o trabalho no Flash é preciso entrar e sair dos objetos a toda hora para edi tar
as propriedades, você pode guardar o CTRL+Z para cada objeto editado ao invés do
documento todo, ou seja, cada Símbolo e o Palco terá um histórico separado de edição
para ser desfeito.
Você encontra essa opção nas preferências:
 Desfazer em nível de documento
 Desfazer em nível de objeto
Figura 22 - Painel de preferências

36. Outra característica fácil de configurar no Flash é sua interface gráfica. Ela segue os
mesmos princípios de todos os programas da família Adobe, onde os painéis podem ser
arrastados e posicionados onde você desejar.
Por padrão, o Flash vem configurado com o tema Essentials. Você pode usar outro estilo
acessando o menu Janelas>Área de trabalho.
Figura 23 - Interface no modo Essentials

37. Figura 24 - Interface no modo Classic
Página17 de 18

38.  ANTERIOR
 PRÓXIMA
1.11 PUBLICANDO COM FLASH
Como comentado anteriormente, o Flash pode publicar para diversos formatos. Mas onde fica
essa configuração?
Figura 25 - Botão para configuração para publicação
As configurações mais importantes para a publicação do Flash é a versão do Player a ser
exportado e a versão do Action Script do arquivo FLA. Essas configurações podem mudar o
painel propriedades e limitar os recursos. Por exemplo, as animações de interpolação de
movimento e a armadura não podem ser usadas no Action Script 2.0. Já o Action Script 3.0 não
pode ser publicado em versões anteriores ao Flash Player 9.0.
Vale lembrar que a linguagem de programação é um recurso em evolução contínua, portanto
alguns recursos de programação podem não estar disponíveis dependendo da versão que você
usar, ou até os mesmos recursos podem ser interpretados ligeiramente diferentes em versões
mais antigas.
A exemplo disso, a publicação para Air Player contempla vários recursos de programação que o
Flash Player não possui, por exemplo, a possibilidade de salvar arquivos no computador do
usuário.
Figura 26 - Painel de publicação do Flash

39. 1.12 BOAS PRÁTICAS COM O FLASH
Para usar bem o Flash vamos ver algumas dicas fundamentais para usar plenamente o programa:
 Use um nome intuitivo para as camadas. Descreva com clareza a finalidade ou o conteúdo de cada
camada ou pasta, quando for nomeá-los.
 Se estiver usando Action Script no arquivo, use uma camada exclusiva para o Script, outra camada
para os Rótulos (labels) e outra camada para os sons.
 Bloqueie as camadas que não estiver usando e que não têm conteúdo (Action Script, Rótulos e sons),
para evitar de criar conteúdo em um lugar que não queria.
 Use pastas na biblioteca para organizar os elementos semelhantes Normalmente, os nomes de
pastas usados são Botões, Clipes de filme, Gráficos, Recursos, Componentes etc.
 O Flash pode utilizar imagens e sons, procure configurar corretamente a compactação desses
arquivos para que haja um equilíbrio entre qualidade e tamanho de arquivo. Não redimensione uma
imagem no Flash apenas para caber no Palco, procure usar a imagem no tamanho necessário e
exato em pixels.
 Na internet, um conteúdo feito em flash não aparece bem em sites de pesquisa. É possível configurar
melhor o flash para aparecer com mais pertinência nas pesquisas online. Saiba mais:
<http://visibilidade.net/perguntas-frequentes/optimizar-site-flash-motores-de-busca.html>
Página18 de 18
 ANTERIOR

40. ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES
WEB
WEBAULA 1
Unidade 2 - ACTION SCRIPT 3.0
2.1 Fundamentos do Action Script
Você já tentou usar o Action Script no Flash? Caso já
tenha feito alguma coisa é provável que tenha escrito alguma coisa na Linha de Tempo
em algum Quadro-chave. Pois é, o Flash é uma ferramenta que permite misturar
elementos gráficos com programação, isso gera muitas dúvidas para quem trabalha
com o aspecto visual e também para quem está mais acostumado com ambientes de
programação puros como Java, C#, C++, entre outros.
Do ponto de vista do programador, devemos entender o Flash como uma ferramenta
que já cria e instância coisas sem precisar usar tanto código para isso, ou seja, os
ponteiros que serão usados para a aplicação já podem ser descritos no Palco do Flash.
Vamos entender como isso evoluiu.
Nas versões mais antigas do Flash, o Action Script 1.0 (AS1)
foi criado para fazer coisas muito simples dentro do programa, era uma maneira mais
trivial de executar coisas como, dar um “play” em uma animação, abrir um link, entre
outras coisas. Com o passar do tempo, o Flash foi sendo usado cada vez mais para
fazer coisas mais complexas e sua linguagem acompanhou isso, culminando no Action
Script 2.0 (AS2) que nada mais foi que a ampliação da biblioteca do AS1. O AS2 fazia
uma porção de coisas, mas em geral, era alvo de muitas reclamações da parte dos
programadores, pois é uma biblioteca pouco organizada.
Hoje o Flash possui duas bibliotecas distintas: o Action Script 2.0 e o Action Script 3.0
(AS3). De fato as duas linguagens operam em máquina virtual diferente, por isso os
projetos em Flash devem ser bem pensados a princípio, para decidir pelo AS2 ou pelo
AS3. Veja mais sobre o Action Script em:
<http://pt.wikipedia.org/wiki/Action_Script>

41. O Action Script é uma linguagem de script orientada a objetos, com a sintaxe muito
parecida com Java Script, pois ambas são baseadas no padrão ECMAScript.
O Flash é uma ferramenta essencialmente gráfica, para que possamos usá-lo de forma
eficiente com o Action Script, precisamos entender como vincular os códigos aos
gráficos no Flash.
Por comodidade, a ferramenta permite que se escrevam códigos na Linha de Tempo.
Essa forma de criar scripts no Flash permite desenvolver algo bem rápido, porém pode
deixar seu código pouco reutilizável ou bastante bagunçado em casos de projetos
maiores. A melhor forma de organizar os códigos é criando Classes em arquivos de
Actions Script, conhecidos como arquivos de extensão “.as”.
Cada Classe pode ser vinculada a um Símbolo no Flash ou ao Palco, desde que ela seja
uma derivada de uma Classe visual do Flash, geralmente das
Classes Sprite ou MovieClip. A classe vinculada ao Palco é sempre a classe principal,
ou seja, a de nível mais alto na hierarquia.
Figura 1 - Campo para vincular a Classe principal no Palco
As classes podem ser criadas no Flash, basta ir em Arquivo/ Novo e escolher a opção
Action Script 3.0. Escolha o nome da Classe e clique em ok. Um arquivo com a estrutura
básica de uma Classe em Action Script será criada.
Outra forma de vincular um Script a um objeto no Flash é mapeando o Script ao Símbolo
que está na Biblioteca. Você pode fazer isso no momento da criação do Símbolo
expandindo a tela de criação, ou depois nas propriedades, clicando com o botão direito
no Símbolo que está na Biblioteca.
Figura 2 - Painel de criação de Símbolos resumido e expandido

42. Exemplo de uma Classe em Action Script
No caso, o campo Class é o caminho para seu Script e o campo Base Class é o caminho
para a Classe que você deseja derivar sua nova Classe, você só precisa preencher o
segundo campo se estiver criando uma Classe automática do Flash, ou seja, sem um
arquivo externo de fato, caso contrário o Flash irá se orientar pelo o que estiverdescrito
no seu arquivo “.as”.
Para entender melhor a estrutura de classes do AS3, é recomendado olhar a referência
da linguagem (o link abaixo é referente a toda a plataforma Flash):
<http://help.adobe.com/pt_BR/FlashPlatform/reference/actionscript/3/ind
ex.html>
2.2 FLASH E ORIENTAÇÃO A OBJETO
Vamos revisar alguns conceitos de orientação a objetos: Objetos são os tipos de dados,
visíveis ou não, usados para representar as coisas no Flash, por exemplo:
/ nome é o objeto, e estamos mudando sua propriedade “lado”
nome.lado = 10;
Classes descrevem a natureza dos objetos, ou seja, todo objeto pertence a uma classe.
// programação orientada à objeto
class Nomedaclasse
{
function Nomedaclasse(){
//...
}
}

43. Métodos e propriedades são o que os objetos podem fazer dentro de uma Classe.
// nome é o objeto, e estamos mudando sua propriedade “lado” e
// chamando um método “virar”
nome.lado = 10;
nome.virar();
Podemos encarar as CLASSES como a natureza das coisas, os OBJETOS
como substantivos, as PROPRIEDADES como adjetivos e os MÉTODOS como verbos.
// nome é algo (substantivo) da natureza Pessoa, com o adjetivo
// “lado” que pode fazer algo como “virar”, que é um verbo
var nome:Pessoa = new Pessoa();
nome.lado = 10;
nome.virar();
Eventos são processos que ocorrem no programa que podem ser escutados para
realizar outros processos. No AS3 isso é fundamental, pois permite criar todo tipo de
interação com os objetos.
// addEventListener é um método para por um “escutador de evento” no
// objeto objeto. Event.ENTER_FRAME é apenas um valor que guarda o
// nome do evento a ser escutado e “loop” é o a função que será
// executada no mesmo momento que o evento ocorrer.
// A função loop recebe um valor do tipo Event. Existem vários tipos
// de evento no Flash.
objeto.addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event):void{
e.target.x += 5;
}
Criando um programa em Flash
function escrevaIsso (oque:String)
{
trace(oque);
}
escrevaIsso(“professor legal”);
Funções são comandos que guardam blocos de instruções que podem ser executados
quando as funções são chamadas.

44. Vamos ver como fazer isso na prática? Você pode criar um Símbolo do tipo Clipe de
Filme e colocá-lo no Palco do Flash. Para poder acessá-lo através da programação pela
Linha de Tempo é preciso dar um nome a essa instancia do Símbolo. Toda vez que
publicamos o SWF o Flash cria nomes automáticos para os objetos que você não
escolheu o nome, mas você pode definir esses nomes das instancias para poder usá-
los na programação.
Figura 3 - Campo para dar nomes às instancias de objetos no Flash
Selecione o Clipe de Filme criado e vá em
propriedades, digite o nome: objeto. O nome precisa ser sem acentos, sem espaços e
sem começar por um número. O Flash também diferencia maiúsculas de minúsculas.
Agora selecione o primeiro Quadro Chave e abra o Painel de Action Script com o
atalho F9.
Escreva exatamente o código acima e veja o que acontece. Seu objeto deverá começar
a andar horizontalmente, porque o evento Event.ENTER_FRAME é um evento
chamado a cada atualização de tela do Flash, portanto, a função loop irá mover 5 pixels
o seu target na coordenada x.
SINTAXE
No Flash os principais elementos de sintaxe são:
.
para ordenar objetos, propriedades,
métodos
; para encerrar uma instrução
( ) para passar uma instrução a uma função
{ } para criar um bloco de instruções
[ ]
para atingir um valor indexado ao objeto
(array)
// para documentar o código
:
para atribuir um tipo a uma variável ou
função

45. “ para valores do tipo texto (string)
No Flash os objetos mais usados geralmente são esses:
Tipos de
valores:
Formato
String “nome”
Movie clip nome
Button nome
Text field nome
Number 5
Boolean true / false
Object Nome
Function Nome
2.3 CARREGANDO UM MOVIECLIP DA BIBLIOTECA PARA O PALCO
Para carregar um objeto da Biblioteca para o palco, você precisa adicionar pelo menos
duas linhas de código:
//ActionScript 3 – no frame 1
var cao = new Cachorro();
addChild(cao);
Neste caso, “Cachorro” é uma Classe vinculada a um Símbolo na Biblioteca e o Script
foi colocado na Linha de Tempo principal.
Os objetos no AS3 podem ser reposicionados a qualquer momento usando o método
addChild, a maioria dos objetos visuais herdam esse método.
2.4 NAVEGANDO PELAS LINHAS DO TEMPO
Para controlar as animações através de Script é bem simples, você poderá usar 04
métodos básicos que pertencem à classe MovieClip: play, stop, gotoAndPlay e
gotoAndStop.
 play: inicia a reprodução de alguma Linha de Tempo a partir
do ponto onde ela está. O play é automático em todos os objetos do tipo MovieClip.

46.  stop: interrompe a reprodução de um MovieClip, muito usado no começo das aplicações
para interromper a reprodução da Linha de Tempo principal, para que esta possa ser
usada como telas ao invés de animações.
 gotoAndPlay: semelhante ao método play, porém permite que o a reprodução comece
a partir de um ponto dado, que pode ser um valor numérico do Quadro Chave ou um
texto indicado o rótulo do Quadro Chave.
 gotoAndStop: equivalente ao gotoAndPlay, porém para interromper a reprodução e
reposicionar a animação.
Figura 4 - Exemplo de Rótulo (Label)
Os Rótulos (Labels) são muito úteis para organizar as animações, pois permite criar
um vínculo entre as animações e o script de forma independente, pois caso seja
necessário reposicionar os rótulos, isso não irá afetar a programação e vice versa. Já
no caso de usar o valor do Quadro Chave.
Carregamento de arquivos externos por url
O Flash pode carregar diferentes arquivos externos: uma imagem, outro arquivo swf,
ou um arquivo de texto em XML para carregar dados.
Como fazer isso no Flash? Você precisa de dois objetos para fazer isso: um carregador
e um com a URL do arquivo que deseja carregar.
Veja o exemplo abaixo:
//carrega arquivo externo
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onCompleto);
var myrequest:URLRequest = new URLRequest("myfile.xml");
loader.load(myrequest);

47. function onCompleto(ev:Event){
var myxml:XML = new XML(ev.target.data);
trace(myxml);
}

 1
 2.5 CRIAÇÃO DE SITES
 O primeiro é o objeto responsável pelo
carregamento, logo após criar o carregador já adicionamos um escutador de
evento para quando o carregamento completar. Em seguida criamos o objeto que
referencia a URL do arquivo a ser carregado, repare que a url é passada no
construtor do objeto. Após essas declarações passamos a agir de fato usando o
método “load” do objeto carregador passando o objeto criado com a URL do
arquivo. Na função atribuída ao evento “COMPLETE” do carregador, indica que
será disparado quando o carregamento estiver completo, assim os dados
carregados estarão disponíveis para serem usados pelo Action Script, no caso,
para a criação de um objeto do tipo XML. O comando trace serve para criar
mensagens no Flash para ajudar no desenvolvimento.
 2.5.1 Criando um pré-carregador
 Para criar um pré-carregador do Flash podemos usar o seguinte Script no primeiro
Quadro da Linha de Tempo principal com uma caixa de texto (Textfield)
instanciada com o nome de loading.
stop();
var percent = 0;
var total = 0;
var loaded = 0;
function verificaLoading(ev:Event) {
loaded = loaderInfo.bytesLoaded;
total = loaderInfo.bytesTotal;
percent = int((loaded*100)/total);
loading.text = 'Carregado '+percent+'%';

48. if (percent>99) {
nextFrame();
removeEventListener(Event.ENTER_FRAME,verificaLoading);
}
 2.5.2 Exemplos legais com o Flash
 Faz o carregamento do arquivo em partes, ou seja, por Quadros. Então quando
mais vazio você deixar o primeiro quadro, mais rápido o Flash irá mostrar algum
conteúdo na tela quando for publicado na internet.
 Por isso logo no começo do Script já usamos o método stop(); para interromper
a reprodução automática. Em seguida, declaramos algumas variáveis que serão
usadas para uma conta matemática. Dentro da função verificaLoading temos a
lógica do processo, onde precisamos saber o quanto já foi carregado (loaded) o
quanto temos para carregar (total) e converter essas informações em um valor
de porcentagem (percent). Com essas informações é possível escrever no objeto
loading (TextField) alguma informação sobre o carregamento. Por final, existe
uma verificação condicional que caso o valor da porcentagem seja maior que
99%, a Linha de tempo principal irá avançar 01 Quadro e o escutador de evento
será retirado com o método removeEventListener, para não interferir mais.
 2.5.3 Criando um jogo simples
 Para criar um jogo bem simples no Flash podemos usar um Símbolo para
representar balões. Esses balões deverão aparecer na tela e o usuário deverá
clicar neles para pontuar. Então precisamos de dois elementos gráficos: 01
Símbolo de Balão e 01 caixa de texto para escrever os pontos.
 Ao salvar o Símbolo do Balão podemos atribuir o nome Balao para sua Classe.
Não precisamos criar a classe propriamente, o Flash irá cuidar disso. Vamos usar
essa classe apenas para referenciá-la no Action Script do jogo. Quando a classe
indicada não encontra o arquivo “.as” correspondente, o flash mostra uma
mensagem dizendo que ele vai gerar uma classe com aquele nome em tempo de
compilação. Apenas clique em OK.
 Figura 5 - Mensagem de criação automática de Classe pelo Flash

 Agora vamos adicionar o campo de texto no Palco do Flash. Use o tipo Classic
Text, mude seu comportamento de Static Text para Dynamic Text, escreva o
nome de sua instancia como pontos, no painel propriedades.
 Pronto, agora você pode selecionar o primeiro Quadro da Linha de Tempo
principal para escrever o Script.

49. }
function adicionaBalao () {
var balao:Balao = new Balao();
balao.x = Math.random() * stage.stageWidth;
balao.y = Math.random() * stage.stageHeight;
addChild(balao);
balao.addEventListener(MouseEvent.CLICK, clickbalao);
}
function clickbalao(e:MouseEvent){
var balao:Balao = e.target as Balao;
removeChild(balao);
points += 20;
pontos.text = points.toString();
}
 O código começa com a importação de duas classes da biblioteca do Flash. Isso
é necessário porque está sendo usado a referência Event.ENTER_FRAME e
MouseEvent.CLICK. Em seguida, são declaradas duas variáveis, um para
controlar o tempo em que os balões irão aparecer (count) e outro para controlar
os pontos feitos (points).
 Para o game funcionar, foi adicionado um escutador do evento ENTER_FRAME,
para poder checar a todo momento se será criado um novo balão. Dentro da
função loop, existe uma lógica que irá permitir criar um balão a cada 12
contagens. É usado a função adicionaBalao para fazer isso.
 Na função adicionaBalao o Símbolo criado na Biblioteca é instanciado no palco,
sua posição é sorteada usando o método random da classe Math, para contas
matemáticas. As posições possíveis respeitam o tamanho do Palco através da
referencia stage.stageWidth e stage.stageHeight. Todos os objetos visuais tem a
propriedade stage, que referencia o Palco. Em cada balão adicionado é colocado
um evento escutador para saber se ele foi clicado pelo mouse, por isso o tipo do
evento é MouseEvent.CLICK.

50.  Na função clickbalao é preciso criar um ponteiro para o objeto que executou o
evento, isso é feito através do e.target que será interpretado como um objeto do
tipo Balao, pois já sabemos isso de antemão. A tipagem do e.target é genérica e
o Flash não saberia dizer que métodos usar nesse objeto, por isso devemos criar
um ponteiro, para poder remover o balão do Palco através do método
removeChild.
 Após isso, os valores de points são somados e o valor é mostrado no objeto de
texto pontos.

 Webaula: Programando um Jogo em Flash
 O Plugin Silverlight está desabilitado ou não foi instalado em seu browser, faça o download
clicando aqui ou ative o mesmo.
 2.6 CRIANDO UM BOTÃO ARRASTÁVEL
 Para criar um botão para ser arrastado você precisa de um Símbolo. Todos os
objetos visuais do Flash podem receber eventos do mouse e seu comportamento
pode ser controlado por algumas propriedades básicas:
 objeto.mouseChildren:Boolean / Determina que os filhos deste símbolo são
reativos ao mouse ou não.
 objeto.buttonMode:Boolean / Determina se o objeto irá se comportar como
um botão mostrando o ícone de clique para o mouse.
 objeto.mouseEnabled:Boolean / Determina se os eventos de mouse serão
disparados ou não.
import flash.events.MouseEvent;
botao.addEventListener(MouseEvent.MOUSE_DOWN,pega);
stage.addEventListener(MouseEvent.MOUSE_UP,solta);
function pega (e:MouseEvent) {
botao.startDrag();
}
function solta(e:MouseEvent) {
botao.stopDrag();
}

51.  No código acima, a classe MouseEvent é importada para poder usar os valores
nas funções que estão escutando o evento.
 O objeto ‘botão’ deve existir no palco para que tudo funcione. Nele é adicionado
um escutador de evento para o evento de pressionar o mouse sobre ele.
 Na propriedade stage, que faz referência ao palco do Flash, é adicionado um
evento escutador para quando soltar o mouse. Isso é feito no Palco porque ao
deslocar o mouse a posição do botão pode sair de baixo do ponteiro do mouse
por razões de sincronismo entre o sistema operacional e a taxa de atualização do
Flash. Então para evitar isso é colocado um escutador no objeto inteiro do flash
o Palco.
 Por fim são declaradas as duas funções usadas nos escutadores, uma para
arrastar que usa o método startDrag (começe a arrastar) e outra que usa o
método stopDrag (pare de arrastar).

 2.7 OUTRAS DICAS
 Você pode usar outro programa para escrever o Action Scritp, um muito bom é o
software FlashDevelop, que também permite exportar conteúdo em SWF usando
ActionScript puro.
 <http://www.flashdevelop.org>
 Outra forma do Flash trabalhar é usar bibliotecas de programação pré compiladas
ou protegidas, ou seja, bibliotecas disponíveis na internet podem ser usadas para
facilitar o desenvolvimento. Por exemplo, você pode usar uma biblioteca de física
chamada Box2D para simular comportamentos e colisões entre os objetos, muito
usado em jogos em Flash. Outra biblioteca muito famosa é o Tweener, que
permite fazer animações usando apenas códigos simples.
 Para adicionaruma nova biblioteca vá nas propriedades do documento e selecione
o ícone com a chave de boca. Dentro você vai encontrar opões para importação
de arquivos em SWC.
 Figura 6 - Usando arquivos SWC

52. 
TECNOLOGIAS PARA APLICAÇÕES WEB
WEBAULA 1
UNIDADE 1: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE
EDITION(Conceitual)
O que é uma aplicação Java Web?
Segundo o Netbeans.org (2013), uma aplicação Java Web gera páginas Web
interativas, que podem conter vários tipos de linguagens de marcação (HTML, XHTML,
XML, entre outras) e conteúdo dinâmico.

53. Saiba mais sobre linguagens de marcação:
http://www.w3schools.com/html/html_intro.asp
http://www.w3schools.com/html/html_xhtml.asp
http://www.w3schools.com/xml/
Geralmente composta por componentes Web, como:
 JavaServer Pages (JSP);
 Servlets;
 JavaBeans.
Estes componentes servem para modificar e armazenar dados temporariamente,
interagir com bancos de dados e webservices e processar o conteúdo como resposta às
solicitações do cliente.
Java EE para aplicação Web
O Java EE (I), conforme definição de sua dona e mantenedora a empresa “Oracle”, é
um kit de desenvolvimento integrado livre usado para construir, testar e implementar
aplicativos Java Web. É uma plataforma amplamente usada que reduz o custo e a
complexidade do desenvolvimento, implantação e gerenciamento de aplicações de
várias camadas centradas no servidor.
O Java EE é uma especificação que agrupa diversas outras especificações.
Para fazer download da plataforma JEE e de sua documentação oficial
acesse:
http://www.oracle.com/technetwork/java/javaee/documentation/in
dex.html
Para consulta à especificação Java EE, acesse:
http://docs.oracle.com/javaee/6/api/
Para preparação de um ambiente de trabalho, o seguinte manual
pode ser utilizado em:
http://novatec.com.br/livros/javaparaweb/capitulo9788575222386.
pdf
Ambientes de Desenvolvimento
Uma IDE (Integrated Development Environment) ou simplesmente ambiente integrado
de desenvolvimento deverá ser utilizado para otimizar o processo de desenvolvimento
de uma aplicação Web. Essas IDE´s proporcionam maior produtividade em um
ambiente de programação, portanto, devem ser adotadas para uso não somente para
esta disciplina ou especialização, mas também em qualquer ambiente de
desenvolvimento que utilizar as tecnologias Java que serão abordadas nesta disciplina.
As IDE´s mais popularmente conhecidas e utilizadas que poderão ser adotadas são o
Eclipse e o Netbeans.
Saiba mais sobre as principais IDE´s em:
http://www.eclipse.org/ e http://netbeans.org/
O padrão MVC e Front Controller

54. O modelo MVC (Model View Controller) nada mais é do que um design pattern útil para
resolver problemas de modelagem de projetos, se usado de forma adequada. Mas
afinal, o que é um design pattern?
Design patterns ou padrões de projetos são soluções para
problemas enfrentados que alguém um dia teve e resolveu aplicando um modelo que
foi documentado e que você pode adaptar de acordo com sua necessidade de solução.
Mais sobre design patterns em:
http://www.dcc.ufrj.br/~schneide/PSI_981/gp_6/design_patterns.html
O MVC (model-view-controller) é um padrão de arquitetura que tem por objetivo isolar
a lógica do negócio da lógica de apresentação de uma aplicação. Esse padrão (ou
alguma variação) é amplamente adotado nas principais plataformas de
desenvolvimento atuais. Em particular, muito utilizado na plataforma Java.
O padrão MVC divide a aplicação em três tipos de componentes: modelo, visão e
controlador.
 Modelo: encapsula os dados e as funcionalidades da aplicação.
 Visão: é a responsável pela exibição das informações, cujos dados são obtidos no
modelo.
 Controlador: recebe as requisições do usuário e aciona o modelo e/ou a visão.
Vídeo: Introdução ao Design Pattern MVC:
https://www.youtube.com/watch?v=-ykX79QkRsI
Imagine todas as requisições sendo recebidas por um único componente, esta é a
proposta do padrãoFront Controller. Assim as tarefas que devem ser realizadas em
todas as requisições podem ser implantadas por esse componente, evitando a repetição
de código e facilitando a manutenção do sistema.
Web Container
Necessidades de uma aplicação Web
HTTP
Os usuários de uma aplicação Web utilizam navegadores (browsers) para interagir com
essa aplicação. A comunicação entre navegadores e uma aplicação web é realizada por
meio de requisições e respostas definidas pelo protocolo HTTP. No caso específico de
uma aplicação web Java noframework JSF 2.1 uma aplicação web nada mais é do que
um documento XHTML, que descreve para o navegador como exibir e formatar as
informações do documento. Sendo assim, os desenvolvedores de aplicação web devem
estar preparados para trabalhar com o protocolo HTTP.
URI´s

55. O protocolo HTTP permite a clientes e servidores interagir e trocar informações de uma
maneira simples e confiável. O HTTP utiliza o URI (Uniform Resource Indentifier) para
identificar dados na Internet. Os URI’s que especificam as localizações de documentos
são chamados URL’s (Uniform Resorce Locators). URL’s comuns fazem referência a
arquivos, diretórios ou objetos e podem realizar tarefas complexas, como pesquisa em
um banco de dados e pesquisas na Internet.
URL´s
Se você conhecer o URL de um recurso ou arquivo público disponível em qualquer lugar
da Web, você poderá acessá-lo por meio do HTTP.
Desmembrando uma URL
Tabela 1: detalhamento da url http://www.unopar.br/pesquisa/agenda.jsp.
Componentes do HTTP
http://
indica que o recurso
deve ser obtido
utilizando o protocolo
http.
www.unopar.br
é
o hostname totalmente
qualificado do servidor
(host) em que o recurso
reside. Ohostname é
convertido em um
endereço IP por servidor
(DNS) que mantém um
banco de dados dos
nomes de host e seus
endereços IP
correspondentes.
/pesquisa/agenda.jsp
o restante do URL
especifica o nome do
recurso solicitado e seu
caminho ou localização
no servidor Web.
Fonte: Do autor (2013)
Fazendo uma solicitação e recebendo uma resposta
Quando dado uma URL, um navegador Web realiza uma transação HTTP para recuperar
e exibir a página Web nesse endereço.
Deitel (2010) ilustra esta transação, mostrando a interação (vide figuras 1 e 2) entre o
navegador Web (cliente) e aplicativo de servidor Web (Servidor).
Figura 1: Cliente interagindo com o servidor Web. Passo 1: A Solicitação GET.

56. Fonte: Deitel (2010)
O navegador Web envia uma solicitação HTTP ao servidor. A solicitação na forma mais
simples é:
GET /pesquisa/agenda.jsp HTTP 1.1
A palavra get é um método HTTP indicando que o cliente deseja obter um recurso do
servidor. O restante da solicitação fornece o nome do caminho do recurso (por exemplo,
um documento XHTML), o nome do protocolo e o número da versão (HTTP/1.1).
Figura 2: Cliente interagindo com servidor Web. Passo 2: A resposta HTTP.
Fonte: Deitel (2010).
Qualquer servidor que entende o protocolo HTTP pode converter essa solicitação e
responder apropriadamente.
O servidor primeiro responde enviando uma linha do texto indicando a versão HTTP,
seguida por um código numérico e uma frase descrevendo o status da transação. Por
exemplo,
HTTP/1.1 200 OK
indica sucesso, enquanto
HTTP/1.1 404 Not Found
Lista completa dos códigos que indicam o status de uma transação HTTP
acesse:www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
O cabeçalho HTTP

57. O servidor envia um ou mais cabeçalhos HTTP que fornecem informações adicionais
sobre os dados que serão enviados. No caso abaixo, o servidor está enviando um
documento de texto XHTML, portanto, um cabeçalho HTTP seria lido:
Content-type: text/html
As informações deste cabeçalho especificam o tipo Multipurpose Internet Mail
Extensions (MIME) do conteúdo que o servidor está transmitindo ao navegador. O
MIME é um padrão Internet que especifica formatos de dados para que os programas
possam interpretar os dados corretamente. Por exemplo, o tipo MIME image/jpeg indica
que o conteúdo é uma imagem JPEG. Quando o navegador recebe esse tipo de MIME ele
tenta exibir a imagem.
Lista de tipos de MIME em:
Solicitações HTTP Get e Post
Os dois tipos de solicitação HTTP mais comuns são Get e Post (também conhecidos
como métodos de solicitação). Uma solicitação Get, em geral, pede um recurso
específico em um servidor. Os usos comuns das solicitações Get são recuperar uma
imagem ou um documento XHTML ou, ainda, buscar resultados de pesquisa com base
de um termo de pesquisa submetido pelo usuário. Uma solicitaçãoGet envia
informações ao servidor no URL, por exemplo:
www.google.com.br/search?q=unopar
Nesse caso, search é o nome do handler de formulário no servidor Google, ‘q’ é o nome
da variável no formulário de pesquisa do Google e ‘unopar’ é o termo de pesquisa. O
‘?’ separa a string de consulta do restante do URL em uma solicitação. Um par
de nome/valor é passado para o servidor com o nome e o valor separados por um sinal
de igual (=). Se mais de um par de nome/valor é for submetido, cada um é separado
do próximo por caractere & (“e” comercial). O servidor utiliza os dados passados em
uma string de consulta para recuperar um recurso XHTML cujo atributo method é
configurado como “get”, digitando o URL (possivelmente contendo uma string de
consulta) diretamente na barra de endereços do navegador ou por meio de
um hiperlink.
Uma solicitação POST geralmente posta (envia) dados para o servidor. Os usos comuns
das solicitações POST são enviar dados de formulário ou documentos a um servidor. A
solicitação POSTenvia dados como parte de mensagem HTTP, não como parte do URL.
Uma solicitação GET, em geral, limita a string de consulta (isto é, tudo à direita do ‘?’)
a um número específico de caracteres (2.083 no Internet Explorer; mais em outros
navegadores), assim, frequentemente é necessário enviar grandes volumes de
informação utilizando o método POST. Este último também é às vezes preferido porque
ele oculta os dados submetidos do usuário, incorporando-os as uma mensagem HTTP.
Importante:
Os dados enviados em uma solicitação POST não são parte do URL, e o usuário não
pode ver os dados por padrão. Mas há ferramentas disponíveis que exibem esses dados,
portanto você não deve supor que os dados sejam seguros somente porque uma
solicitação POST é usada.
Acesso simultâneo
Além de todas as particularidades observadas no protocolo HTTP, na grande maioria
dos casos, as aplicações Web devem ser acessadas por diversos usuários ao mesmo
tempo. Consequentemente, os desenvolvedores Web devem criar ou utilizar algum
mecanismo eficiente que permita esse tipo de acesso.

58. Conteúdo dinâmico
As páginas de uma aplicação Web devem ser geradas dinamicamente. Por exemplo,
quando um usuário de uma aplicação de e-mail acessa sua caixa de entrada, ele deseja
ver todos os e-mailsenviados até aquele momento. A página contendo a lista de e-
mails deve ser gerada novamente todas as vezes que essa página for requisitada. Logo,
os desenvolvedores Web devem criar ou utilizar um mecanismo eficiente que permita
que o conteúdo das páginas das aplicações Web seja gerado dinamicamente.
Figura 3: Necessidades de uma aplicação Web.
Fonte: Do autor (2013).
Solução
Resolver os três problemas apresentados (Manipulação de protocolo HTTP, Acesso
simultâneo e conteúdo dinâmico) consumiria boa parte do tempo de desenvolvimento,
além de exigir conhecimentos técnicos extremamente específicos por parte dos
programadores. Para facilitar o desenvolvimento da aplicação Web, a plataforma Java
oferece uma solução genérica que pode ser utilizada para desenvolver aplicações Web
que você verá a seguir:
Figura 4: O Web Container.

59. Fonte: Do autor (2013).
Uma aplicação Web Java deve ser implantada em um Web Container para obter os
recursos fundamentais que ela necessita. Um Web Container é responsável:
 Pelo envio e recebimento de mensagens HTTP.
 Por permitir que as aplicações sejam acessadas simultaneamente por vários usuários de
uma maneira eficiente.
 Por permitir que as páginas de uma aplicação Web sejam geradas dinamicamente.
Um dos Web Containers mais importantes do mercado é o Tomcat. Você também
poderá utilizar um servidor de aplicação Java EE como o Glassfish, pois ele contém
um Web Container internamente.
Mais sobre Web Containers em:
http://tomcat.apache.org/
http://glassfish.java.net/
00:00
00:00
Servlet
Como é comum na plataforma Java, foi definida uma especificação para padronizar a
interface dos recursos oferecidos pelos Web Containers. Essa especificação é chamada
de Servlet e atualmente está na versão 3.0. A especificação Servlet faz parte do Java
EE.
Para consulta à especificação Servlet acesse:
http://jcp.org/en/jsr/stage?listBy=public

60. Apesar das especificações, os Web Containers possuem algumas diferenças nas
configurações que devem ser realizadas pelos desenvolvedores, sendo assim, não há
100% de portabilidade, no entanto, a maior parte das configurações e do modelo de
programação é padronizado. Portanto, se você conhece bem um dos Web Containers,
também conhece bastante dos outros.
Para criar um Servlet, podemos seguir os seguintes passos:
 Criar uma classe.
 Herdar da classe javax.servlet.http.HttpServlet.
 Reescrever o método service().
 Utilizar a anotação @WebServlet para definir a URL que será utilizada para acessar
a servlet. Essa anotação existe somente após a especificação servlet 3.0. Antes essa
configuração era realizada a partir do arquivo web.xml.
O método servisse ( ) é executado toda vez que uma requisição HTTP é realizada para
uma URL definida na anotação @WebServlet. Esse método recebe dois parâmetros. O
primeiro é a referência do objeto da classe HttpServletRequest que armazena todos os
dados da requisição. O segundo parâmetro é a referência do objeto da classe
HttpServletResponse que armazenará o conteúdo gerado pela servlet.
Conteúdo na Resposta
Para inserir conteúdo texto na resposta HTTP que será enviada para o navegador do
usuário, devemos utilizaros métodos getWriter( ) e println( ). Geralmente, o conteúdo
inserido na resposta HTTP é texto HTML, conforme o exemplo abaixo:

61. Mais sobre Servlets:
http://www.devmedia.com.br/desvendando-os-servlets-3-0-java- magazine-
81/17436
http://www.oracle.com/technetwork/java/index-jsp-135475.html
http://www.javabeat.net/2008/12/new-features-in-servlets-3-0/
Aplicação Web Java
A estrutura de pastas (diretórios) de uma aplicação Web Java deve seguir algumas
regras para que possa ser implantada em um Web Container. Imagine um novo projeto
de aplicação Web cujo nome seja “AgendaJSF”, a estrutura do projeto deverá ser a
seguinte:
 AgendaJSF/
o WEB-INF/
 classes/
 lib/
 web.xml
Obs: um diretório META-INF poderá fazer parte da estrutura caso seja necessário
configurar um arquivo contexto.xml para conexão com banco de dados.
A tabela abaixo apresenta de forma detalhada a estrutura da aplicação Java Web:

62. Geralmente, as IDE’s criam toda a estrutura de diretório exigidas pelos Web Containers.
Na prática, não temos o trabalho de criar esses diretórios manualmente.
Processando Requisições
Após implantar a aplicação Web Java em um Web Container, as requisições e respostas
HTTP já estão sendo processadas pelo Web Container, que também já permite o acesso
de múltiplos usuários a esta aplicação.
Em seguida, devemos definir como o conteúdo das páginas da aplicação é gerado, para
isso, podemos criar um Servlet.
Frameworks
Atualmente, é improvável que um projeto de desenvolvimento de uma aplicação Web
utilize diretamente Servlets, pois a produtividade seria pequena e a manutenção

63. custosa. Vários frameworksforam criados para facilitar o desenvolvimento e a
manutenção de aplicações Web. Apesar de serem baseados em Servlets,
esses frameworks oferecem recursos adicionais para as aplicações. Segue uma lista dos
principais frameworks para aplicações Web Java:
 JSF
 Struts 1.x
 Struts 2.x
 Spring MVC
Visão Geral do JSF 2
Atualmente, o principal framework para desenvolvimento de aplicações Web em Java é
o JSF (JavaServer Faces). O JSF é fortemente baseado nos padrões MVC e Front
Controller e fornece um conjunto de componentes de interface com o usuário, ou
componentes JSF, que simplificam o design de páginas Web. Esses componentes são
semelhantes aos componentes SWING utilizados para construir aplicativos GUI.
No JSF o controle é composto por um servlet denominado FacesServlet, por arquivos
de configuração e por um conjunto de manipuladores de ações e observadores de
eventos. OFacesServlet é responsável por receber as requisições da Web, redirecioná-
las para o modelo e então remeter uma resposta.
Os arquivos de configuração são responsáveis por realizar associações e mapeamento
de ações, também são responsáveis pela definição de regras de navegação. Os
manipuladores de eventos são responsáveis por receber os dados vindos da camada de
visão, acessar o modelo, e então devolver [ao usuário] o resultado
para FacesServlet (COMPONENTES..., 2013, grifo nosso).

64. O modelo representa os objetos de negócio e executa uma lógica de negócio ao receber
os dados vindos da camada de visualização. Finalmente, a visão é composta
por component trees (Hierarquia de componentes UI), tornando possível unir um
componente ao outro para formar interfaces mais complexas.
JSF: Vantagens
O JSF oferece ganhos no desenvolvimento de aplicações web por diversos motivos:
 Permite que o desenvolvedor crie UIs através de um conjunto de componentes UIs
predefinidos;
 Reutiliza componentes na página;
 Associa os eventos do lado do cliente com os manipuladores de eventos do lado do
servidor;
 Fornece separação de funções que envolvam a construção de aplicações Web;
 Projetado para ser flexível, sem limitar-se a nenhuma linguagem “markup” em particular,
nem a protocolos ou tipos de clientes;
 Permite a criação de componentes próprios a partir de classes de componentes
(COMPONENTES..., 2013, grifo nosso).
Embora os componentes JSF padrão sejam suficientes para a maioria dos aplicativos
Web básicos, você também pode escrever bibliotecas de componentes personalizados.

65. Bibliotecas de componentes adicionais são disponibilizadas por vários projetos de
código-fonte aberto e de fornecedores independentes.
JavaDoc: JavaServer Faces
http://docs.oracle.com/cd/E17802_01/products/products/jsp/2.1/docs/jsp-2_1-
pfd2/index.html
Mais JSF no site da Oracle:
http://www.oracle.com/technetwork/java/javaee/jsp/index.html
Processamento de uma requisição
Em uma aplicação JSF, toda requisição realizada a partir de um navegador é recebida
pela Faces Servlet. Ao receber uma requisição, a Faces Servlet executa os seguintes
passos:
 Restore View: na primeira requisição de um usuário, uma nova árvore de
componentes que representa a tela desse usuário é gerada. Nas demais
requisições (postback) desse mesmo usuário, a árvore de componentes que
representa a tela anteriormente enviada a ele é reconstruída.
 Apply Request Values: Nesta etapa, a árvore construída na etapa anterior é
percorrida e cada um dos seus componentes é “decodificado”. No processo de
decodificação, cada componente extrai da requisição atual os dados associados a
essa componente e se atualiza com essas informações.
Ainda nessa etapa, os eventos de ação (como um clique em um link ou em um botão,
por exemplo) são identificados. Por padrão, esses eventos são adicionados às filas
correspondentes para serem tratados posteriormente (na fase Invoke Application).
 Process Validation: Nesta fase, os componentes que possuem valores
submetidos pelo usuário por meio de formulários são convertidos e validados
(caso haja algum validador registrado para esse componente).
Se ocorrer algum erro de conversão ou validação, mensagens de erro são adicionadas
no contexto da requisição atual e o fluxo é redirecionado para a fase Render Response.
Caso contrário, processo continua na fase UpdateModel Values. Ainda nesta fase, os
eventos de mudança de valor são identificados e tratados ao final do processo.
 UpdateModel Values: Os valores contidos em cada componente da árvore, já
convertidos e validados na fase anterior, são armazenados em propriedades de
objetos definidos pela aplicação (managed beans).
 Invoke Application: Uma vez que os dados dos componentes já foram
convertidos, validados e armazenados nos objetos do modelo, as tarefas
correspondentes ao evento que disparou a requisição (normalmente um clique
em um botão ou link) serão executadas.
Também nesta fase, a próxima tela a ser apresentada ao usuário é determinada pelo
resultado do método que implementa a lógica de negócio executado nesta fase.

66.  Render Response: Nesta etapa, a próxima tela é gerada e enviada ao
navegador do usuário. Uma representação desta tela também é armazenada a
fim de ser usada na fase Restore Viewda próxima requisição.
Abaixo o diagrama ilustra a estrutura geral de uma aplicação JSF. O processamento de
uma requisição enviada por um navegador começa na Faces Servlet logo após sua
chegada. A Faces Servlet controla a execução das seis etapas descritas anteriormente.
Figura 9: Estrutura geral de uma aplicação JSF.
Os managed beans estão à disposição da Faces Servlet durante todo o processamento
da requisição. Por exemplo, nas etapas Render Response e Restore View, a Faces
Servlet aciona os managed beanspara recuperar os dados que devem ser usados na
construção ou reconstrução da árvore de componentes.
Na etapa Update Model, a Faces Servlet armazena nos managed beans os dados já
convertidos e validados. Na etapa Invoke Application, a Faces Servlet dispara um
método em um managed beanresponsável pelo processamento da regra de negócio

67. correspondente à requisição atual. Todas as regras de negócio são implementadas no
modelo, que também administra os dados da aplicação.
Os managed beans acionam o modelo para executar alguma regra de negócio,
recuperar ou alterar os dados administrados pelo modelo. As telas da aplicação são
definidas na camada de visão. A Faces Servlet acessa essa camada toda vez que
necessita construir ou reconstruir a árvore de componentes de uma determinada tela.
Isso ocorre nas etapas Restore View e Render Response.
00:00
00:00
DAO – Data Access Object
A maioria das aplicações empresariais usa normalmente sistemas de gerenciamento de bancos de dados
relacional (RDBMS, relational database management system) como armazenamento persistente.
Entretanto, os dados empresariais podem residir em outros tipos de repositórios, comomainframes ou
sistemas legados, repositórios LDAP (Lightweight Directory Access Protocol), bancos de dados orientados
a objetos (OODB) e arquivos simples.
Misturar a lógica de persistência com a lógica de aplicação cria uma dependência direta entre a
implementação da aplicação e do armazenamento persistente. Tal dependência torna difícil migrar a
aplicação de um tipo de fonte de dados para outro.
Quando as fontes de dados são alteradas, os componentes devem ser modificados para tratar o novo
tipo de fonte de dados (ACESSO..., 2013).
Isso pode ser feito de forma mais fácil usando o padrão de projetos DAO para abstrair
e encapsular todo o acesso ao armazenamento persistente. O DAO gerencia a conexão
com a fonte de dados para obter e armazenar dados.
Os principais objetivos de um DAO são:
 Encapsular o acesso e a manipulação de dados em uma camada separada;
 Implementar mecanismos de acesso a dados para acessar e manipular dados em uma
armazenamento persistente;
 Desacoplar a implementação do armazenamento persistente do restante da aplicação;
 Organizar os recursos de lógica de acesso a dados e encapsular recursos proprietários
para facilitar a capacidade de manutenção e a portabilidade.
Estrutura do DAO

68. Elementos do DAO
 [Pessoa – a pessoa] é um objeto que requer acesso à fonte de dados para obter e
armazenar dados.
 DAO – é o objeto de função principal desse padrão. Ele abstrai a implementação de
acesso a dados subjacente para o cliente a fim de permitir um acesso transparente à
fonte de dados.
 Base de Dado – representa uma implementação de fonte de dados.
 ResultSet – representa os resultados de uma execução de consulta.
 Tipo de Dado – representa um objeto de transferência usado com um carregador de
dados (ACESSO..., 2013).
Para saber mais sobre DAO acesse:
http://javafree.uol.com.br/artigo/871452/Introducao-ao-pattern-DAO.html
http://www.javabuilding.com/academy/patterns/dao.html
http://www.oficinadanet.com.br/artigo/java/criando-um-cadastro-de-usuario-em-java
Fórum
Aplicações Web possuem uma série de necessidades a serem tratadas ao serem
implementadas. Quais seriam as vantagens em desenvolver uma aplicação Web
utilizando Java e o Framework JSF? Outras tecnologias poderiam ser adotadas em
conjunto com este Framework? Como você planejaria o desenvolvimento de uma
aplicação Web utilizando os conceitos vistos?
RESUMO
Nessa unidade foram apresentados vários conceitos sobre aplicações Web e as soluções
existentes na plataforma Java, especificamente nas tecnologias Java Enterprise Edition,
bem como os possíveis ambientes de desenvolvimento que podem ser utilizados além
do ambiente de uma aplicação Web Java encapsulado em um Web Container.
Finalmente, foi destacado o uso do Framework JSF como ferramenta para facilitar a
construção das aplicações Web.

69. ACESSO a banco de dados com JDBC (Java Database Connectivity) e o Padrão de
Projeto DAO (Data Access Object). Disponível em:
<http://www.ceunes.ufes.br/downloads/2/mariateixeira-
java.introdu%C3%A7%C3%A3o%20a%20banco%20de%20dados.pdf>. Acesso em:
março 2013.
COMPONENTES visuais de especificação em JSF. Disponível em:
<http://www.webartigos.com/artigos/componentes-visuais-de-especificacao-em-
jsf/53689/>. Acesso em: março 2013.
DEITEL Paul. Java Como Programar. 8. ed. São Paulo: Pearson Prentice Hall, 2010.
NETBEANS. Disponível em: <http://netbeans.org/>. Acesso em: Março, 2013.
SUGESTÃO DE LEITURA
CORDEIRO, Gilliard. Aplicações Java para web com JSF e JPA. 1. ed. São Paulo:
Casa do Código, 2010.
GONÇALVES, Edson. Dominando Java Server Faces e Facelets Utilizando Spring
2.5, Hibernate e JPA. 1. ed. São Paulo: Ciência Moderna,2008.
TECNOLOGIAS PARA APLICAÇÕES WEB
WEBAULA 1
UNIDADE 2: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE
EDITION(Prático-Conceitual)
Configurando uma aplicação JSF
Uma aplicação JSF deve respeitara estrutura geral de uma aplicação Web Java descrita
na Unidade 1.
Os códigos criados e demonstrados abaixo farão parte de uma aplicação Web Java
chamada “AgendaJSF” criada na IDE Netbeans que será utilizada como demonstração
de uma Aplicação usando JSF. Sugiro que vocês implementem tal aplicação para fixação
dos conceitos vistos até esse ponto.

70. JSF na prática
Criando um projeto
 Arquivo – Novo Projeto – Java Web – Aplicação Web.
 Nome do Projeto – AgendaJSF.
 Clique em próximo.
Selecione o servidor GlassFish (Instalado junto com o Netbeans) ou servidor Apache
Tomcat (se disponível); selecione a versão do Java EE (mais recente) e clique em
próximo.

71. Selecione o framework “JavaServer Faces” e na aba “Componentes” selecione
“PrimeFaces”, clique em finalizar.
A estrutura básica do projeto criado deverá ser algo semelhante à figura 5:

72. Web.xml
A Faces Servlet deve ser configurada no arquivo WEB-INF/web.xml, indicando a classe
que a implementa e o padrão de URL que será associada a essa servlet.
No exemplo abaixo, todas as requisições serão processadas pela Faces Servlet.
Mais sobre o arquivo web.xml em:
http://docs.oracle.com/cd/E14571_01/web.1111/e13712/web_xml.htm
faces-config.xml
Um arquivo faces-config.xml deverá ser adicionado ao diretório WEB-INF. Nesse
arquivo, podemos alterar diversas configurações do JSF.

73. Mais sobre o arquivo faces.config.xml em:
http://docs.oracle.com/cd/B31017_01/web.1013/b28967/appendixa010.htm#ADFDG
010
Bibliotecas
Para utilizar os recursos do JSF, é necessário que a aplicação possua uma
implementação JSF. Esta pode ser adicionada manualmente no diretório WEB-INF/lib
da aplicação.
Se um servidor Java EE for utilizado, a inclusão de uma implementação JSF
manualmente não será necessária, já que este servidor já a possui.
Obs: Ao utilizar o Netbeans como IDE para implementação de aplicações Java Web, ao
selecionar o tipo de projeto “Aplicação Web”, haverá em umas das guias de
configuração inicial a opção para selecionar os frameworks que você deseja utilizar
(vide figura 3), ao optar pelo framework JavaServer Faces na guia “componentes” (vide
figura 4), haverá opção para incluir outros pacotes como PrimeFaces, RichFaces e
ICEFaces. Estes pacotes adicionam componentes visuais prontos que poderão ser
utilizados na aplicação Java Web.
Mais sobre PrimeFaces em: http://www.primefaces.org/.
Mais sobre RichFaces em: http://www.jboss.org/richfaces.
Mais sobre IceFaces em: http://www.icesoft.org/java/.
Managed Beans
Os managed beans são objetos fundamentais de uma aplicação JSF o qual utiliza-se de
Pojo’s como parte do controller, sendo assim, uma managed bean é um Pojo

74. responsável por intermediar a comunicação entre as páginas de uma aplicação web e
o modelo ou visão.
Ao trabalhar com JSF, boa parte do esforço da implementação será dedicado
aos managed beans, consequentemente as futuras alterações e correções estarão
intimamente ligadas a estes objetos. Suas principais funções são:
 Fornecer os dados que serão exibidos na tela;
 Receber os dados enviados nas requisições;
 Executar tarefas de acordo com as ações do usuário.
Para maiores informações sobre POJO:
http://www.roseindia.net/ejb/introduction-to-pojo.shtml
http://www.guj.com.br/java/206651-o-que-e-pojo-afinal
Criando um Managed Bean
Um managed bean pode ser definido de duas maneiras. A primeira maneira é criar uma
classe Java e registrá-la no arquivo faces-config.xml (JFS 1.2). Conforme abaixo:
No registro de um managed bean devemos definir o nome, a classe e o escopo
do managed bean. O nome será utilizadopara acessar esse managed bean nas páginas
da aplicação. O escopo será explicado mais adiante.
Importante:
O escopo definido no exemplo abaixo por meio da annotation “@RequestScoped”
poderá ser alterado conforme a necessidade da aplicação. Para mais informações sobre
escopo, acesse:
http://dnassuncao.wordpress.com/2010/08/14/jsf-2-0-na-pratica-%E2%80%93-
parte-ii/
http://www.devmedia.com.br/escopos-de-managed-beans-no-jsf-2-0-artigo-java-
magazine-90/20436
A segunda forma é criar uma classe Java com a anotação @ManagedBean do pacote
javax.faces.bean. Essa anotação só pode ser utilizada a partir da versão 2.1 do JSF.
Exemplo:

75. Propriedades
Considere o código Java 2. Para acessar o valor do atributo pessoa com valores obtidos
a partir de uma tela JSF precisamos definir um método de leitura (getPessoa). Esse
método deve seguir a convenção de nomenclatura Java (Camel Case). Para alterar esse
mesmo atributo, precisamos definir um método de escrita (setPessoa) que segue a
mesma convenção de nomenclatura do método anterior.
Com os métodos de acesso e demais métodos do managed bean já implementados,
podemos exibir e/ou inserir o valor do atributo pessoa utilizando expression
language (#{}), conforme o código abaixo (linhas 19, 25, 31, 37):

76. Para alterar o valor do atributo pessoa do managed bean, podemos vinculá-lo, por
exemplo, a uma caixa de texto em um formulário.
Ações
Para implementar as lógicas que devem ser executadas assim que o usuário clicar em
um botão oulink, basta criar métodos nas classes do managed bean, como por exemplo
os métodos inserirOk() e buscarOk() do código Java 3 abaixo.

77. Componentes Visuais
No JSF 2, as telas são definidas em arquivos XHTML. Os componentes visuais que
constituem as telas são adicionados por meio de tags. A especificação do JSF define
uma grande quantidade de tags e as classifica em bibliotecas. As principais bibliotecas
de tags do JSF são:
 Core (http://java.sun.com/jsf/core)
 HTML (http://java.sun.com/jsf/html)
 Facelets (http://java.sun.com/jsf/facelets)
Estrutura básica de uma página JSF
A estrutura básica de uma página JSF é muito semelhante à estrutura de uma página
HTML como o código abaixo.
O conteúdo da página é definido no corpo da tag . Esse conteúdo é dividido em duas
partes: o cabeçalho, delimitado pela tag (e não pela tag ), e o corpo, delimitado
pela tag (e não pela tag).
As bibliotecas de tags que serão utilizadas para construir a página devem ser
“importadas” a partir do pseudoatributo xmlns aplicado à tag. Observe no exemplo
acima que as três principais bibliotecas do JSF foram importadas.

78. Documentação completa das tags das bibliotecas vistas acima em:
http://www.jcp.org/en/jsr/detail?id=314
Telas
Uma vez que o managed bean foi criado, podemos associá-lo a um ou mais formulários
que exibirá ou realizará a inserção dos dados da pessoa.
Para inserir ou consultar um determinado registro de pessoa, podemos associar os
métodos inserirOk() e buscarOk() a botões existentes em páginas criadas
especificamente para estes fins, tais botões, inserir e consultar respectivamente
deverão executar as ações de inserção e busca conforme os trechos de códigos da
página inserir.xhtml e consultar.xhtml apresentados abaixo:
Na linha 42, do trecho de código XHTML 3 logo acima – definição de componente do
tipo commandButton com ação definida para invocar o método inserirOk() do managed
bean “agenda”.

79. Nas linhas 21 e 31 do trecho de código XHTML 4 abaixo – definição de componente do
tipo commandButton com ação definida para invocar o método buscarOk() do managed
bean “agenda”.
Observe que nos dois códigos (XHTML 3 e 4) fica claro a ligação entre as telas
(representadas pelos arquivos XHTML) e o maneged bean. No código inserir.xhtml são
usados por várias vezes uma caixa de entrada (imputText) associadas às propriedades
(nome, cidade, endereço e telefone) do atributo pessoa do managed bean “agenda”.
Esses campos receberão os dados do objeto pessoa.
Igualmente no código consultar.xhtml são associados campos às propriedades do
atributo pessoa com propósito de exibição dos dados previamente inseridos.
Navegação
Navegar entre as telas de uma aplicação web é uma necessidade básica. O mecanismo
de navegação do JSF é bem sofisticado e permite vários tipos de transições entre telas.
A ideia é muito simples: no clique de um botão ou link, muda-se a tela apresentada ao
usuário.
Navegação Implícita
Na navegação implícita, quando o usuário clica em algum botão ou link, um sinal
(outcome) é enviado para o JSF. Esse sinal é uma string que será utilizada pelo tratador
de navegação do JSF para definir a próxima tela que será apresentada ao usuário.
Considere, por exemplo, um link ou botão de uma tela (definida pelo trecho de código
XHTML 5) que envia o outcome “index”. Quando um usuário clicar nesse link ou botão,
ele será redirecionado para a tela definida pelo arquivo index.xhtml. Esse arquivo deve
estar no mesmo diretório do arquivo XHTML que o chamou. Nesse caso, o outcome é
igual ao nome do arquivo de resposta sem o sufixo .xhtml.

80. Quando utilizamos os componentes < h:commandButton > e < h:commandLink > para
criar botões elinks, devemos definir os outcomes por meio do atributo action. Por outro
lado, quando utilizamos os componentes < h:button > e < h:link >, devemos definir
os outcomes através do atributo outcome.
Além do nome, os outcomes também podem determinar o caminho do arquivo de
resposta. Se ooutcome começar com caractere “/”, esse caminho será definido a partir
do diretório raiz da aplicaçãoweb. Caso contrário, será definido a partir do diretório
atual.
Navegação Explícita
Na navegação explícita, podemos associar um outcome a um arquivo de resposta
independentemente do nome ou do caminho desse arquivo. Essa associação deve ser
registrada no arquivo de configuração do JSF, o faces-config.xml.
Para registrar uma navegação explícita, podemos adicionartrês informações no arquivo
de configuração do JSF:
 O caminho do arquivo que define a tela de origem.
 O outcome.
 O caminho do arquivo que define a tela de resposta.
O código do arquivo faces-config.xml demonstra como definir este tipo de navegação.
O JSF utiliza a seguinte lógica para determinar a página de resposta. Primeiro, ele
verifica se ooutcome é compatível com alguma regra de navegação registrada no
arquivo faces-config.xml. Caso seja, o JSF realizará uma navegação explícita
processando essa regra. Caso contrário, o JSF tentará realizaruma navegação implícita,

81. procurando um arquivo compatível com o outcome. Se esse arquivo não existir, a tela
atual será reapresentada.
A tag < from-view-id > indica que essa regra de navegação será aplicada para todo
arquivo inserir.xhtml (linha 14) e consultar.xhtml (linha 26) do diretório /AgendaJSF.
Podemos criar navegações condicionais. Em cada < navigation-case > podemos definir
por meio da tag < from-outcome > e < to-view-id > para onde será definida a página
de resposta. No exemplo do código XML 3, a <navigation-rule> definida a partir da
linha 25 para a página consultar.xhtml será em caso de sucesso o arquivo
consultarOk.xhtml presente no mesmo diretório. Caso o outcome seja a string “erro”,
então a página definida para navegação será a correspondente ao arquivo
consultarErr.xhtml.
Estrutura do Projeto
Voltando ao projeto AgendaJSF – a estrutura final do projeto deve apresentar algo
como a figura abaixo:
Execução do Projeto
Ao executar o projeto, um navegador será exibido com o resultado dos códigos
implementados. A página inicial (index.xhtml) será requisita e deverá ser apresentado
com o aspecto semelhante ao da figura abaixo:

82. Os componentes na parte superior da página são resultado do uso de componentes da
biblioteca PrimeFaces como por exemplo o FieldSet identificado como “Exemplo
Componente PrimeFaces” e dentro deste componente o componente Carrosel para
exibição de imagens aleatórias. Estes componentes correspondem às tags < p: fieldset
> e < p: carousel > respectivamente no arquivo index.xhtml.
Abaixo um menu (< p: menubar >) faz chamada às páginas para inserção de registros
(inserir.xhtml) e consulta (consultar.xhtml). Estas chamadas são as mesmas realizadas
nos dois links seguintes “Inserir Agenda” e “Consultar Agenda”, no entanto, estes links
foram criados utilizando as tags < h: outputlink >. Um link no canto inferior esquerdo
da tela será apresentado, ao clicá-lo, uma página de exemplos de componentes do
PrimeFaces será apresentada.
Ao clicar no link “Inserir Agenda” a seguinte página correspondente ao arquivo
inserir.xhtml será apresentada:
Realize um teste nesta página e verifique o resultado apresentado.
Ao clicar no link “Consultar Agenda” a seguinte página correspondente ao arquivo
consultar.xhtml será apresentada:
Serão apresentados dois campos para consulta de registros de pessoa, porém, cada um
deles apresentará um comportamento diferente quando nenhum valor for digitado e o
botão de confirmação for pressionado. Experimente e verifique o resultado.
00:00
00:00
Fórum

83. O que você achou do JSF e demais componentes? Você acredita que as tecnologias
vistas e aplicadas podem ser uma alternativa para desenvolvimento de aplicações Web?
O que te chamou atenção na implementação vista?
RESUMO
Nessa unidade nós implementamos um projeto para aplicação prática dos conceitos
vistos na unidade 1, também detalhamos partes específicas do projeto como
no managed bean criado, onde foram utilizadas anotações do tipo @ManagedBean e
@RequestScoped. Aprendemos a dividir em pacotes o projeto, respeitando o padrão
MVC, onde vimos as camadas sendo implementadas individualmente, o modelo
representado pelo arquivo PessoaBean.java, o controlador representado pelo arquivo
ValidaCRUD.java e a persistência, representados pelos arquivos ConexaoBD.java e
PessoaCRUD.java implementados segundo padrão de projeto DAO. Finalmente o
resultado final apresentado em um navegador e as ações e comportamentos
apresentados.
CORDEIRO, Gilliard. Aplicações Java para web com JSF e JPA. 1. ed. São Paulo:
Casa do Código, 2010.
GONÇALVES, Edson. Dominando Java Server Faces e Facelets Utilizando Spring
2.5, Hibernate e JPA. 1. ed. São Paulo: Ciência Moderna, 2008.
DEITEL, Paul. Java como programar. 8. ed. São Paulo: Pearson Prentice Hall, 2010.
WA1 - ESPECIALIZAÇÃO EM TECNOLOGIAS PARA APLICAÇÕES WEB -
DESENVOLVIMENTO JAVA WEB
ESPECIALIZAÇÃO EM TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 1 – Persistência e Reaproveitamento de Código
INTRODUÇÃO
O objetivo desta unidade é apresentar novos conceitos de tecnologias para
desenvolvimento de um projeto de aplicação Java Web. Assim, serão apresentados de
forma resumida funções dos frameworks JSF2 e Hibernate, além de plug-ins e melhores
práticas de programação. Ao final, será possível entender e aplicar ferramentas
avançadas no desenvolvimento eficiente de aplicações Web.

84. VIDEO AULA 1
JPA e Hibernate
Persistência
Aplicações de grande porte usualmente manipulam dados em
grande quantidade. Em geral, esses dados são armazenados em bancos de dados
relacionais, esse tipo de banco de dados é altamente difundido e utilizado pelo mercado.
Por outro lado, atualmente, aplicações corporativas costumam ser desenvolvidas com
linguagens que utilizam o paradigma orientado a objetos.
Devido à diferença existente no modo de estruturar os dados entre o modelo relacional
e orientado a objetos, toda vez que algum dado trafegar da aplicação para o bando de
dados ou ao contrário uma transformação deverá ocorrer. Como os dois modelos são
diferentes, essa transformação não será simples de realizar. No entanto, para facilitar
o processo de transformação de dados, no caso de aplicações Java, podemos utilizar
algumas ferramentas para este fim como é o caso do Hibernate. Essas ferramentas
são como intermediários entre as aplicações e os bancos de dados, o que automatiza
diversos processos importantes relacionados à persistência dos dados. Essas
ferramentas são conhecidas como: ferramentas ORM (Object RelationalMapping).
As ferramentas ORM tem o objetivo de facilitar a transformação de dados além de ser
compatíveis com outros recursos da plataforma Java. O JPA (Java Persistence API) é a
especificação que padroniza essas ferramentas.
JPA e Hibernate
[...] especificação JPA (Java Persistence API) foi criada com o objetivo de padronizar as
ferramentas ORM para aplicações Java, esta especificação define uma forma padrão de
manipulação de dados dentre os vários frameworks criados para este fim.
O JPA especifica um conjunto de classes e métodos que as ferramentas ORM devem
implementar. Note que a JPA é apenas uma especificação. Ela não implementa nenhum
código. Para isso, utilizamos alguma das diversas implementações da JPA.
Quando falamos de frameworks voltados para persistência e bancos de dados,
felizmente, não há tanta dúvida quanto no mundo dos frameworks Web. O Hibernate é
praticamente unanimidade no mercado Java, principalmente se usado como

85. implementação da JPA. Há outras possibilidades, como o Toplink, o EclipseLink, o
OpenJPA, o DataNucleus, o JDO, o iBatis etc. Mas o Hibernate é o mais importante.
Você poderá optar por outra ferramenta ORM aplicando os mesmos conceitos aqui
aprendidos justamente porque eles seguem a mesma especificação. Assim, podemos
programar voltado à especificação e substituir uma implementação pela outra, sem
precisar reescrever o código da aplicação, ainda assim, teríamos que alterar alguns
arquivos de configuração, mas o código da aplicação permaneceria o mesmo
(DESENVOLVIMENTO..., p. 45, 2013).
Figura 1: Multicamadas e JPA
Fonte: Adaptado de Desenvolvimento... (2013)
Mais JPA no site da Oracle:
http://www.oracle.com/technetwork/articles/javaee/jpa-137156.html
Mais JPA e MySql:
http://dev.mysql.com/doc/ndbapi/en/mccj-overview-java.html
Mais JPA e Postgresql:
http://www.patternizando.com.br/2011/08/configuracao-persistence-xml-jpa-para-mysql-derby-h2-
oracle-postgresql-sql-server-e-hsqldb-para-hibernate/
Página1 de 7
 PRÓXIMA
Múltiplas sintaxes da linguagem SQL
Na disciplina “Desenvolvimento WEB JAVA”, utilizamos a especificação JDBC para fazer
uma aplicação Java interagircom um SGBD. Nessa interação, as consultas são definidas
com a linguagem SQL. A sintaxe dessa linguagem pode diferir em cada SGDB, de acordo

86. com o padrão ANSI utilizado, sendo assim, a complexidade do trabalho dos
desenvolvedores aumenta.
Uma solução para este problema:
Consultas definidas através de um mecanismo independente da linguagem SQL
(DESENVOLVIMENTO..., p. 43, 2013).
Figura 2: diferentes sintaxes da linguagem SQL.
Fonte: Desenvolvimento... (2013, p. 43)
Saiba mais sobre Hibernate:
https://www.youtube.com/watch?v=zIbkSmDdI8s
Saiba mais sobre SQL:
http://www.juliobattisti.com.br/artigos/office/nocoessqlconsultas.asp
Orientação a Objetos X Modelo Relacional
Como já vimos anteriormente, há o conflito de paradigmas na comunicação
entre uma aplicação Java e um sistema gerenciador de banco de dados. As aplicações

87. Java utilizam o modelo orientado a objetos enquanto os SGBDs seguem o modelo
relacional.
A transição de dados entre esses modelos não é simples, e para tornar possível essa
transição um mapeamento entre os conceitos desses dois paradigmas deverá ser
definido. Por exemplo:
 Classes: mapeadas para tabelas;
 Objetos: mapeados para registros;
 Atributos: mapeados para campos;
 Referência entre objetos: mapeados para chaves estrangeiras
(DESENVOLVIMENTO... 2013, p. 43).
Figura 3: Modelo Orientado a Objetos X Modelo Relacional.
Fonte: Desenvolvimento... (2013, p. 44)
Ferramentas ORM
Essas “ferramentas oferecem mecanismos de consultas independentes da linguagem
SQL. Dessa forma, o acoplamento entre as aplicações e os SGDBs diminui
significativamente” (DESENVOLVIMENTO..., 2013, p. 44).
Figura 4: Transformação dos dados do modelo relacional para o modelo orientado a
objetos.

88. Fonte: Desenvolvimento... (2013, p. 45)
Figura 5: Transformação dos dados do modelo orientado a objetos para o modelo
relacional.
Fonte: Desenvolvimento... (2013, p. 45)
Bibliotecas
Antes de começar a utilizar o Hibernate, é necessário baixar do site oficial o pacote que
inclui os jar’s do hibernate e todas as suas dependências.
Mais sobre:
A URL do site oficial do Hibernate é:
http://www.hibernate.org/
Página2 de 7
 ANTERIOR
 PRÓXIMA
Configurando o Hibernate
Para configurar o framework Hibernate em uma aplicação, após a correta inclusão da
biblioteca, um arquivo chamado persistence.xml deverá ser criado. Esse arquivo
conterá informações sobre o banco de dados, como:
 url de conexão;
 usuário e senha;
 dados sobre a implementação de JPA que será utilizada.

89. O arquivo persistence.xml deve estar em uma pasta chamada META-INF, que deve
estar no classpath da aplicação.(O Netbeans não segue esse padrão, vocês irão notar
que no projeto AgendaJSF2 o arquivo persistence.xml estádentro do diretório “Arquivos
de Configuração”, um arquivo hibernate.cfg.xml também foi criado dentro do pacote
padrão de códigos fonte como complemento do arquivo persistence.xml) Segue abaixo
um exemplo do arquivo persistence.xml (DESENVOLVIMENTO..., 2013, p.46-47).
Código XML 1: persistence.xml.
A propriedade hibernate.dialect permite que a aplicação escolha qual sintaxe de SQL
deve ser utilizada pelo Hibernate.
Mapeamento entre paradigmas

90. O mapeamento realizado pelas ferramentas ORM entre os conceitos do modelo
orientado a objetos e os conceitos do modelo relacional pode ser definido através de
tags XML ou de maneira mais prática utilizando anotações Java. Essas anotações estão
no pacote javax.persistence.
Segue abaixo as principais anotações Java de mapeamento do JPA:
 @Entity É a principal anotação do JPA. Ela deve figurar antes do
nome de uma classe e deve ser definida em todas as classes
que terão objetos persistidos no banco de dados.
As classes anotadas com @Entity são mapeadas para tabelas. Porconvenção, as tabelas
possuem os mesmos nomes das classes. Esse comportamento pode ser alterado
utilizando a anotação @Table.
Os atributos de uma classe anotada com @Entity são mapeados para colunas na tabela
equivalente à classe. Novamente, por convenção, as colunas possuem os mesmos
nomes dos atributos. Esse padrão pode ser alterado utilizando a anotação @Column.
 @Id Indica qual atributo de uma classe anotada com @Entity será
mapeado para a chave primária da tabela correspondente à classe.
Geralmente o atributo anotado com @Id é do tipo Long.
 @GeneratedValue Acompanha a anotação @Id. Utilizada para indicar
que o atributo é gerado pelo banco, no momento em que um novo
registro é inserido.
 @Table deve ser utilizada para alterar o nome padrão da tabela. Ela
possui o parâmetro “name” para indicar qual nome deve ser utilizado na
tabela. Segue exemplo (DESENVOLVIMENTO..., 2013, p. 45):
Código Java 1: exemplo uso annotation @Table com parâmetro name.
 @Column Utilizado para alterar o nome da coluna que será
usado na tabela. Justifica-se pelo uso de um banco de dados
legado, no qual os nomes das colunas já foram definidos. Além
de estabelecer certas restrições, como determinar se o campo
pode ou não ser nulo (DESENVOLVIMENTO..., 2013, p. 45).
Código Java 1.1: exemplo uso annotation @Column com parâmetro name e nullable.

91.  @Transient Indica que um atributo não deve ser persistido, ou seja, os
atributos anotados com @Transient não são mapeados para colunas.
 @Lob Utilizado para atributos que armazenam textos muito grandes, ou
arquivos binários contendo imagens ou sons que serão persistidos. O
tipo do atributo deve ser String, Byte[], byte[] ou java.sql.Blob.
 @Temporal Utilizado para atributos do tipo Calendar ou Date. Por
padrão, tanto data quanto hora são armazenados no banco de dados.
Mas, com a anotação @Temporal, podemos escolher persistir somente
a data ou somente a hora (DESENVOLVIMENTO..., 2013, p. 45).
Código Java 1.2: exemplo uso annotation @Temporal.
Mais informações sobre JPQL:
http://docs.oracle.com/html/E24396_01/ejb3_langref.html
Mais informações sobre JPQL e HQL:
http://docs.jboss.org/hibernate/orm/4.1/devguide/en-US/html/ch11.html
Mais informações sobre CRUD Hibernate em:
http://www.futurepages.org/wiki/lib/exe/fetch.php?media=quickstart:hibernate_anotacoes.pdf
VIDEO AULA 2
Página3 de 7
 ANTERIOR
 PRÓXIMA
Integração JSF e JPA
Como vimos anteriormente, os SGDBs são utilizados para armazenar os dados
manipulados pelas aplicações. Adicionaremos essa capacidade às aplicações JSF a
seguir. Para isso, conheceremos uma maneira de integrar os recursos do JSF e do JPA.
Bibliotecas
Para utilizar os recursos do JPA em uma aplicação JSF, os jars do provedor JPA e do
driver JDBC que serão utilizados devem estar no classpath da aplicação. O projeto a
ser trabalho nesta disciplina será implantado no Glassfish 3.1.2 que é um servidor de
aplicação Java EE 7.

92. Por padrão, a versão 3.1.2 do Glassfish possui os jars do provedor JPA EclipseLink.
Portanto, as aplicações JSF implantadas nessa versão do Glassfish utilizarão o
EclipseLink como implementação do JPA. Contudo, queremos utilizar o provedor JPA
Hibernate. Podemos facilmente substituir os jars do EclipseLink pelos jars do Hibernate
através da interface de administração do Glassfish.
Mais sobre:
Abaixo segue link para tutorial sobre a substituição dos jars do provedor JPA Eclipse
Link: http://www.infoblogs.com.br/view.action?contentId=241235
Configuração
Devemos configurar as unidades de persistência utilizadas através do arquivo
persistence.xml da aplicação.
Código xml 2: persistence.xml
Código xml 3: persistence.cfg.xml
Mapeamento
Para definir o mapeamento das entidades iremos utilizar as anotações do JPA para
estabelecer este mapeamento.

93. Código Java 3: Pessoa.java
Conexão com o Banco de Dados
A conexão com o banco de dados seguirá o padrão MVC, separando as classes em
camadas de acordo com a responsabilidade de cada uma.
Criando as camadas
Model
O pacote br.com.agenda2.modal do projeto deve conter uma classe chamada Pessoa que
será um POJO (Plain Old Java Object) com as annotations do Hibernate necessárias

94. para utilização do framework. A classe deve ficar como o código Java 3 apresentado
acima.
DAO – Fábrica de Conexões
O pacote br.com.agenda2.banco vai realizar a comunicação com o banco de dados para
realizar as operações de CRUD. Dentro deste pacote haverá uma classe chamada
JPAdao responsável por criar a conexão com o banco de dados estabelecendo a
comunicação com este.
Código Java 4: JPAdao.java
Além da classe JPAdao o pacote br.com.agenda2.banco conterá uma outra classe, a
PessoaRepository responsável por instanciar as novas sessões e realizar as operações
básicas no banco de dados (CRUD).
Página4 de 7
 ANTERIOR
 PRÓXIMA

95. Código Java 5: PessoaRepository.java (parte 1)

96. Código Java 5.2: PessoaRepository.java (parte 2)
Controller
O pacote br.com.agenda2.controller vai realizar a comunicação da Camada de Visão
representada por nossas páginas JSF com o banco de dados sendo responsável por
realizar as operações requisitadas nas páginas JSF e em seguida encaminhar o usuário
para uma página. Este pacote conterá a classe PessoaBean e será como a seguir:

97. Código Java 6.1: PessoaBean.java (parte 1)
Página5 de 7
 ANTERIOR
 PRÓXIMA

98. Código Java 6.2: PessoaBean.java (parte 2)
Mais exemplos de aplicações utilizando CRUD em:
http://jamacedo.com/2010/06/crud-jsf-2-0-hibernate-exemplo-gerenciando-livros-2/
http://jamacedo.com/2010/09/crud-jsf-2-0-hibernate-parte-2-utilizando-a-biblioteca-primefaces-no-
gerenciador-de-livros/
Mais sobre consultas ao banco de dados com hibernate:
http://imasters.com.br/artigo/24039/banco-de-dados/criteria-hibernate-na-pratica/
http://blog.camilolopes.com.br/busca-com-hibernate-annotation-jsf/
http://mballem.wordpress.com/2012/01/09/consultas-com-hibernate-e-a-api-criteria-%E2%80%93-
parte-i/
VIDEO AULA 3
FÓRUM

99. As Aplicações necessitam de uma forma prática e genérica para implementar a
persistência de banco de dados, quais são as vantagens em implementar uma aplicação
utilizando o Hibernate?
RESUMO
Nessa unidade foram apresentados conceitos sobre persistência de dados utilizando o
framework Hibernate e o que este propõe solucionar bem como uma forma de
reaproveitar os códigos de uma aplicação de forma a não reescrevê-lo independente do
sistema gerenciador de banco de dados utilizado.
Página6 de 7
 ANTERIOR
 PRÓXIMA
DESENVOLVIMENTO web com JSF e JPA2. 2013. Disponível em:
<http://k19.com.br/downloads/apostilas/java/k19-k12-desenvolvimento-web-com-jsf2-e-jpa2>.
Acesso em: 27 mar. 2013.
SUGESTÕES DE LEITURA
ARAÚJO, Rogério. Trabalhando com JSF do JAVA – parte 1. Disponível em:
<http://www.videoaulasbrasil.com.br/trabalhando-com-jsf-do-java-parte-1/>. Acesso em: 29
jan. 2013.
BURNS, Ed, et al. Javaserversaces 2.0 the complete reference. New York: The McGraw-
Hill Companies, 2010. Disponível em: <http://jsfcompref.com/>. Acesso em: 28 jan.
2013.
CORDEIRO, Gilliard. Aplicações Java para web com JSF e JPA. São Paulo: Casa do
Código, 2010.
DEITEL Paul. Java como programar.8. ed.São Paulo: Pearson Prentice Hall, 2010.
GONÇALVES, Edson. Dominando Java Server Faces e Facelets Utilizando Spring 2.5,
Hibernate e JPA. 1. ed. São Paulo: Ciência Moderna, 2008.

100. JAVA SERVER FACES. Ferramentas de desenvolvimento. Disponível em:
<http://www.javaserverfaces.com.br/>. Acesso em: 25 nov. 2012.
JSF – h: message. Disponível em: Em:
<http://www.tutorialspoint.com/jsf/jsf_message_tag.htm>. Acesso em: 05 dez. 2012.
JSF TOLBOX. Introdução. 2013. Disponível em:
<http://www.jsftoolbox.com/documentation/help/01-Introduction/index.jsf>. Acesso em: 28 nov.
2012.
KOJIIO, Miguel. JSF 1.2 + Hibernate. Disponível em:
<http://www.t2ti.com/curso/video/java/jsf-hibernate/java_web_jsf_hibernate.php>. Acesso em:
24 jan. 2013.
PEGORETTI, Roberto Cláudio Mascarenhas. Criando uma aplicação com hibernate e JSF
utilizando o netbeans 6.5. Disponível em: <http://www.devmedia.com.br/criando-uma-
aplicacao-com-hibernate-e-jsf-utilizando-o-netbeans-6-5-parte-3/11690>. Acesso em: 23 jan.
2013.
Página7 de 7
 ANTERIOR
ESPECIALIZAÇÃO EM TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 2 – Inclusão de Práticas de Validação, Requisição, outras Linguagens e
Construção de Projeto (Prático-Conceitual)
INTRODUÇÃO
O objetivo desta unidade é apresentar novos conceitos de tecnologias para
desenvolvimento de um projeto de aplicação Java Web. Assim, serão apresentados de forma
resumida funções dos frameworks JSF2, além de plug-ins e melhores práticas de programação.
Ao final, será possível entender e aplicar ferramentas avançadas no desenvolvimento eficiente
de aplicações Web.
Observação sobre a Unidade 2

101. Alguns dos códigos criados e demonstrados nesta web aula farão parte de uma aplicação Web
Java chamada “AgendaJSF2” criada na IDE Netbeans que será utilizada como demonstração
de uma Aplicação usando as tecnologias Java entre outras. Sugiro que vocês implementem tal
aplicação para fixação dos conceitos vistos até esse ponto.
Templates e Modularização
Certamente, você já ouviu alguém falar da importância da reutilização de código no
desenvolvimento de software. Os objetivos principais dessa reutilização são diminuir o tempo
e o custo do desenvolvimento e da manutenção das aplicações.
Sendo assim,
[...] para facilitar todo o processo de desenvolvimento e manutenção das telas de uma aplicação
JSF um projeto chamado Facelets foi concebido. O Facelets faz parte do JSF 2 e/ou superior e
é a engine padrão para o gerenciamento das telas de aplicações web JSF
(DESENVOLVIMENTO..., 2013, p. 127).
Templates
O objetivo do uso de templates está na reutilização do código das telas. A ideia é identificar e
criar um padrão em um determinado conjunto de telas e defini-lo através de uma estrutura
principal, o template. Tanto trechos estáticos e dinâmicos formam o template e o
posicionamento desses trechos é sempre fixo, no entanto, ao contrário do conteúdo de um
trecho estático, o conteúdo de um trecho dinâmico pode diferir de tela para tela.
Considere uma aplicação na qual todas as telas estão divididas em três partes: cabeçalho, corpo
e rodapé.

102. Essas partes estão sempre posicionadas da mesma forma, onde, cabeçalho é posicionado no
topo da página, o rodapé, no final e o corpo, entre os dois anteriores.
O conteúdo do cabeçalho e do rodapé será sempre o mesmo em todas as telas, mas, o conteúdo
do corpo varia de tela para tela (DESENVOLVIMENTO..., 2013, p. 127).
Figura 1: template utilizado por diversas páginas
Fonte: Desenvolvimento..., (2013, p. 128)
Criando um template
Um template pode ser criado de forma simples. Deve-se criar um arquivo XHTML e definir o
posicionamento dos trechos estáticos e dinâmicos. Os trechos estáticos devem ser definidos de
forma usual dentro do template. Por outro lado, o conteúdo dos trechos dinâmicos deverá ser
definido nas telas. Devemos utilizar a tag < ui:insert > para indicar o posicionamento dos
trechos dinâmicos (DESENVOLVIMENTO..., 2013, p. 128).

103. Código XHTML 1: template.xhtml
A tag < ui:insert > é utilizada para posicionar os trechos dinâmicos. O atributo name é utilizado
para nomear os trechos dinâmicos.
Usualmente, a declaração < !DOCTYPE > não varia de tela para tela dentro de uma aplicação.
Dessa forma, podemos adicioná-la de forma estática no template, conforme o exemplo acima.
É imprescindível a utilização dos componentes < h:head > e < h:body >. No exemplo acima, esses
componentes foram definidos de forma estatica no template. Todas as telas que forem utilizar
esse template não correm mais o risco de ficar sem esses componentes (DESENVOLVIMENTO...,
2013, p. 128).

104. Página1 de 7
 PRÓXIMA
Utilizando templates
[...] tela que usa um determinado template será um arquivo XHTML que possuirá a tag <
ui:composition >. O arquivo do template desejado deve ser indicado pelo uso do atributo template
da tag < ui:composition >.
Todo conteúdo não contido na tag < ui:composition > será descartado pelo JSF no processo de
construção da tela.
O conteúdo de um trecho dinâmico pode ser definido através do componente < ui:define >. Esse
componente possui o atributo name que é utilizado para indicar qual trecho dinâmico do
template queremos definir.
No exemplo abaixo, podemos definir o conteúdo do trecho dinâmico corpo_pagina da seguinte
forma (DESENVOLVIMENTO..., 2013, p. 129):

105. Código XHTML 2: index.xhtml
Caso o conteúdo de um trecho dinâmico não seja definido, o JSF utilizará por padrão o conteúdo
existente no corpo da tag < ui:insert > definido no template. No exemplo acima, caso o
conteúdo do trecho dinâmico corpo_pagina não fosse definido no arquivo index.xhtml, o JSF
utilizaria o texto “Espaço para o conteúdo da tela”, que foi definido no arquivo template.xhtml
como conteúdo padrão para esse trecho (DESENVOLVIMENTO..., 2013, p. 130).
Modularização
Os trechos estáticos ou dinâmicos definidos em um template possuem posição fixa. Em
determinadas situações, é necessário tornar flexível o posicionamento de um determinado
trecho.
Imagine uma aplicação com várias páginas diferentes. Os usuários dessa aplicação podem
enviar mensagens para o administrador do sistema através de um formulário HTML quando
identificarem algum problema e esse formulário de contato deve ser exibido em todas as telas
da aplicação.

106. Para resolver a situação acima poderíamos criar um template e definir o formulário de contato
como um trecho estático desse template, mas, há uma restrição importante que descarta essa
opção. O formulário de contato deve ser exibido em diferentes posições nas telas da aplicação.
Ao passo em que algumas telas o formulário aparecerá no topo, em outras ele aparecerá no
centro ou nas extremidades da tela (DESENVOLVIMENTO..., 2013, p. 131).
Figura 2: módulo reaproveitado em diversas páginas
Fonte: Desenvolvimento... (2013, p. 132)
Nesse caso, “[...] a melhor abordagem é definir o formulário de contato, separadamente, em
um arquivo XHTML. O conteúdo desse arquivo será inserido no corpo da tag < ui:composition
> conforme abaixo” (DESENVOLVIMENTO..., 2013, p. 127).
Código XHTML 3: formulário_de_contato.xhtml
“Com o formulário de contato definido em um arquivo separado, podemos utilizar a tag <
ui:include >para adicioná-lo onde for necessário” (DESENVOLVIMENTO..., 2013, p. 127).

107. Código XHTML 4: inserindo o formulário de contato
Página2 de 7
 ANTERIOR
 PRÓXIMA
Conversão e Validação
Conversão
[...] um usuário ao preencher um formulário, os valores informados são enviados
para uma aplicação. De acordo com o protocolo HTTP, esses dados não possuem tipo definido,
ou seja, esses dados são tratados como texto puro. Assim, será necessário realizar a conversão
dos dados todas as vezes que uma aplicação receber os valores que foram preenchidos em
formulários.
Como exemplo prático iremos considerar um formulário que possui um campo “idade”. A
informação digitada nesse campo é tratada como texto até chegar à aplicação, que deve
converter esse dado para algum tipo adequado do Java como int, short ou long.
Ocasionalmente, alguns dados que são enviados para a aplicação não podem ser convertidos,
pois não estão no formato esperado, é o que ocorre em um campo alfanumérico, caso o dado
preenchido possua caracteres não numéricos e não numéricos, a conversão falhará.
O caminho inverso dos dados também ocorre, sendo assim, nem sempre o formato das
informações que estão em uma aplicação Java Web corresponde ao formato que desejamos
que seja apresentado aos usuários, assim, os dados devem ser convertidos antes de serem
enviados para os navegadores.
Abaixo veremos o funcionamento de um mecanismo automatizado de conversão de dados
oferecido pelo JSF.
Conversores Padrão
O JSF define um conjunto de conversores padrão a fim de facilitar o trabalho de
desenvolvimento de uma aplicação. Alguns desses conversores são aplicados automaticamente
ao passo que outros conversores são aplicados apenas se forem indicados de forma explicita.

108. O JSF aplica automaticamente conversores padrão para os seguintes tipos do Java:
 Integer e int
 Long e long
 Short e short
 BigDecimal
 BigInteger
 Character e char
 Double e double
 Float e float
 Boolean e boolean
 Byte e byte
Abaixo, o conteúdo digitado em um “imputText” (caixa de texto) será convertido para o tipo
double automaticamente, pois, o atributo numero da classe Testebean foi definido com este
tipo (DESENVOLVIMENTO..., 2013, p. 159).
Código Java 1: TesteBean.java
Código XHTML 5: caixa de texto vinculada à propriedade número
Conversores Personalizados
Alguns dos conversores padrão opcionalmente ou necessariamente devem usar informações
adicionais para realizar a conversão de dados. Por exemplo, a tag < f:convertNumber > é utilizada
para transmitir informações aos convesores de números (java.lang.Number) assim como a
tag < f:convertDateTime > serve para transmitir informações aos conversores de datas
(java.util.Date e java.sql.Date).
< f:convertNumber >
Esta tag permite que conversões personalizadas sejam feitas em valores numéricos.
Por exemplo, para estipular que um determinado valor numérico seja exibido com um número
máximo de casas decimais, podemosusar o atributo maxFractionDigits. A propriedade numero
do managed bean TesteBean é exibida com duas casas decimais (DESENVOLVIMENTO..., 2013,
p. 159).

109. De forma similar, podemos definir o número mínimo de casas decimais utilizando o atributo
minFractionDigits. Podemos também utilizar uma espécie de expressão regular para definir a
formatação de um número, para isso, podemos usar o atributo pattern, conforme abaixo.
“O atributo type definido com o valor percent apresentará os dados na forma de porcentagem”
(DESENVOLVIMENTO..., 2013, p. 160).
“A tag < f:convertNumber > provê o atributo currencySymbol e locale para personalizar a
exibição de valores monetários. Abaixo, segue exemplo do uso desses dois atributos”
(DESENVOLVIMENTO..., 2013, p. 160).
< f:convertDateTime >
“Permite que conversõesde datas sejam realizadas. Esse conversor pode ser aplicado em dados
do tipo java.util.Date e java.sql.Date. O atributo pattern dessa tag permite a definição do
formato da data que desejada” (DESENVOLVIMENTO..., 2013, p. 161).
Mais sobre o atributo pattern em:
http://docs.oracle.com/javase/1.4.2/docs/api/java/text/SimpleDateFormat.html
Podemos “[...] escolher o formato de data a ser utilizado por meio do atributo locale. Abaixo,
ao definir o valor do atributo locale como pt_BR, o padrão de data será “DD/MM/YYYY”
(DESENVOLVIMENTO..., 2013, p. 161).

110. Página3 de 7
 ANTERIOR
Mensagens de Erro
Os usuários de uma aplicação podem eventualmente preencher as informações de um
formulário de forma inadequada o que impedirá a conversão dos dados. Nessas situações será
necessário apresentar mensagens relacionadas aos erros no preenchimento das informações
(DESENVOLVIMENTO..., 2013, p. 163).
< h:message >
Essa tag permite exibir erros relacionados a um determinado campo. Esse componente deve
ser associado ao campo correspondente aos erros que desejamos exibir, para isto, devemos
definir o valor do atributo “for” do componente < h:message > igual ao valor do atributo “id” do
campo a ser tratado (DESENVOLVIMENTO..., 2013, p. 164).
Código Java 2: PessoaBean.java
Código XHTML 6: exibindo mensagens de erro relacionadas a um campo de texto
Abaixo o campo com o valor digitado pelo usuário e após o processamento da requisição

111. Figura 3: campo de texto associado a uma propriedade numérica (telefone)
Figura 4: mensagem de erro
Validadores Padrão
Para facilitar o trabalho de desenvolvimento de uma aplicação, o JSF define um conjunto de
validadores padrão.
Campo Obrigatório (Required)

112. A validação mais comum de todas é a de verificar se um determinado campo foi preenchido.
Podemos aplicar essa validação utilizando o atributo required.
Código XHTML 7: exibindo mensagens de erro relacionadas a um campo de texto
< f:validateLength >
O validador < f:validateLength > verifica se uma string possui uma quantidade mínima ou
máxima de caracteres.
Código XHTML 8: restrição no número de caracteres na propriedade cidade
Importante:
O JSF possui outros tipos de validadores como por exemplo: < f: validaDoubeRange >, <
f:validateRegex > entre outros.
Mais exemplos podem ser vistos em:
http://tomaszdziurko.pl/2011/10/parametrizing-custom-validator-jsf-2/
http://www.mkyong.com/jsf2/custom-validator-in-jsf-2-0/
Além da documentação oficial disponível em:
http://www.oracle.com/technetwork/java/javaee/documentation/index-137726.html
Vídeo Aula sobre validadores JSF em:
https://www.youtube.com/watch?v=1h4AaCmyS4A
VÍDEO AULA 4
Página4 de 7
 ANTERIOR
 PRÓXIMA
AJAX

113. Ao desenvolver aplicações Java Web Corporativa, é comum existirem telas
significativamente complexas que manipulem um grande volume de dados, o que torna
desinteressante recarregar uma página inteira para modificar apenas uma pequena parte da
tela, como os dados de somente um campo.
Podemos aplicar o conceito de AJAX (Asynchronous Javascript And XML) com o objetivo de
melhorar a interatividade entre as aplicações e os usuários. Duas capacidades muito úteis são
obtidas com o uso de AJAX:
1. Possibilidade de atualizar apenas trechos de uma página ao invés da página inteira.
2. Realizar requisições sem que a navegação dos usuários seja interrompida.
Podemos considerar como exemplo uma aplicação web para a visualização de imagens. Estas
imagens são exibidas individualmente em uma tela que também apresenta outros conteúdos.
Os usuários podem, através de um link “Próximo”, avançar para a próxima imagem, ou voltar
para a anterior através de um link “Anterior”.
Já que o único conteúdo alterado da página é a imagem, não será necessário recarregar a
página inteira quando o usuário decidir visualizar a próxima imagem ou a anterior.
Aplicações de mensagens instantâneas também podem ser consideradas. Podemos atualizar
regularmente a lista de contatos de um usuário sem que ele tenha que pressionar qualquer
botão ou link, e ainda sem a necessidade de recarregar a página e sem interromper a navegação
do usuário.
Diferentemente das anteriores, a versão 2 e superiores do JSF oferece suporte nativo ao AJAX.
Realizando Requisições AJAX
As requisições AJAX são “disparadas” quando determinados eventos ocorrem. Os eventos estão
fortemente relacionados aos componentes visuais adicionados às páginas. Utilizando a tag <
f:ajax > indicamos para o JSF quais componentes e eventos devem realizar requisições AJAX
(DESENVOLVIMENTO..., 2013, p. 203).
Código XHTML 9: aplicando a tag < f:ajax >
“No exemplo acima, toda vez que o valor do imputText (caixa de texto) for modificado uma
requisição AJAX será realizada, considerando que o evento padrão associado ao componente <
h:inputText > é o“onchange”” (DESENVOLVIMENTO..., 2013, p. 203).

114. Podemos ainda deixar explicito o evento que deve disparar as requisições AJAX através do
atributo event da tag < f:ajax >, mas será necessário cautela, pois, cada componente possuium
evento específico e pode não aceitar um evento informado.
Código XHTML 9.1: definindo o tipo de evento que deve disparar requisições AJAX
Ainda utilizando a tag < f:ajax >, podemos agrupar vários componentes para os quais desejamos
oferecer o suporte do AJAX.
Código XHTML 9.2: aplicando a tag < f:ajax > a vários componentes
Relembrando - se não deixarmos explicito o evento que vai “disparar” as requisições AJAX, o
JSF assumirá o evento padrão de cada componente. Por exemplo, nos componentes <h:inputText
> e < h:inputSecret > o padrão é “onchange”. Já o componente < h:commandButton > o evento
padrão é “onclick”.
Como fizemos anteriormente, para um determinado grupo de componentes podemos deixar
explicito o evento que deve disparar as requisições AJAX.
Código XHTML 9.3: definindo o tipo de evento que deve disparar requisições AJAX
Processando uma parte específica da tela
Quando enviamos dados em um formulário, talvez seja necessário avaliar apenas os
componentes que estão no próprio formulário, essa avaliação poderá ser feita através de uma
requisição AJAX determinando quais componentes da tela devem ser avaliados pelo JSF.
O atributo “execute” da tag < f:ajax > defini quais componentes devem ser avaliados no servidor.
Este atributo deve conter uma lista com os identificadores dos componentes que precisam ser
avaliados no servidor. Ao avaliar um componente, todos os demais componentesdefinidos em
seu corpo também serão avaliados.

115. Código XHTML 9.4: definindo quais componentes serão avaliados
No exemplo acima, o formulário e os componentes definidos dentro dele serão avaliados no
servidor após o evento “click” do botão “Enviar” for disparado.
Recarregando parte da tela
A tag < f:ajax > possui o atributo render o qual permite definir quais componentes serão
atualizados quando a resposta de uma requisição AJAX chegar no navegador.
Esse atributo deverá ter como valor uma lista contendo os identificadores dos componentes
que serão atualizados quando a resposta de uma requisição AJAX chegar ao navegador.
No exemplo abaixo, ao pressionar o botão “Gera Número” uma requisição AJAX será realizada.
Apenas o componente < h:output-Text > que contém o identificador numero será atualizado após
a resposta da requisição chegar do servidor.
Código XHTML 9.5: definindo quais componentes serão atualizados
Porém, no código abaixo, dois componentes < h:outputText >, os que contém os
identificadores “numero1” e “numero2” serão atualizados.
Código XHTML 9.6: definindo dois componentes para serem atualizados
Página5 de 7
 ANTERIOR
 PRÓXIMA
Procedimentos associados a uma requisição AJAX

116. O atributo “listener” da tag < f:ajax > permite associar um método a uma requisição AJAX, esse
método será executado durante o processamento de uma determinada requisição no servidor.
(método será executado na fase Invoke Application.
No exemplo abaixo, o componente “commandButton” com atributo value = “Salva” realiza
requisições AJAX associadas ao método salva() do managed bean produtoBean.
Código XHTML 9.7: definindo quais componentes serão atualizados
No projeto AgendaJSF2 na página inserir.xhtml existe uma referência ao AJAX no campo nome,
onde será realizado validação do tamanho do valor informado no campo.
Código XHTML 9.8: detalhe tag < f:ajax > na página inserir.xhtml
Páginas de Erro
Ao realizar o processamento de uma requisição, determinados erros podem ocorrer, por padrão,
páginas com informações técnicas sobre o problema que ocorreu são geradas e exibidas para
os usuários.
Essas páginas podem ser interessantes para os programadores na fase de desenvolvimento,
pois, darão “pistas” para correção dos problemas, por outro lado, se um sistema em fase de

117. produção exibir essas páginas aos usuários, podem além de confundi-los, revelar a estrutura
do sistema, expondo possíveis falhas de segurança.
Figura 5: Expondo possíveis falhas de segurança
Fonte: Desenvolvimento... (2013, p. 164)
Assim, será importante encontrar uma maneira de personalizar as páginas de erro da aplicação,
abaixo veremos como fazer isso:
Em nosso projeto criaremos uma página de erro padrão conforme exemplo abaixo:
Código XHTML 10: pagina-erro.xhtml
Na página inicial (index.xhtml) incluiremos dois botões que sempre produzirão um erro ao
serem clicados. O código terá o seguinte conteúdo:
Código XHTML 10.1: detalhe linhas 20 e 21 index.xhtml
Um managed bean foi criado para provocar propositalmente um erro:

118. Código Java 3: ErroBean.java
O web container deverá direcionar todas as exceptions para a página de erro padrão. Este
direcionamento dever ser realizado através do arquivo web.xml conforme exemplo:
Código xml 1: detalhe do arquivo web.xml
Vocês devem ter notado a existência de dois métodos no managed bean demonstrado no código
ErroBean.java. os dois métodos produzirão um erro durante a execução, no entanto, o primeiro
(geraErroOutCome) por retornar uma String (outcome) no arquivo faces-config.xml.
Este arquivo foi configurado com uma regra de navegação para tratar todos os outcomes do
tipo “erro” de qualquer método do projeto de acordo com as tags a seguir:

119. Código xml 2: detalhe do arquivo faces-config.xml
VÍDEO AULA 5
FÓRUM
O que você achou dos conteúdos vistos sobre JSF e demais componentes? Você acredita que
as tecnologias vistas e aplicadas podem ser uma alternativa para melhorar o desenvolvimento
de aplicações Web? O que te chamou atenção nos exemplos vistos?
RESUMO
Nesta unidade conhecemossobre métodosde validação e conversão além de entendender como
manipular os validadores. Também conhecemos o conceito de template/modularização, além
dos conceitos de AJAX e como aplica-lo em um projeto JSF finalizando com a padronização das
páginas de erro.
Página6 de 7
 ANTERIOR
 PRÓXIMA
DESENVOLVIMENTO web com JSF e JPA2. 2013. Disponível em:
<http://k19.com.br/downloads/apostilas/java/k19-k12-desenvolvimento-web-com-jsf2-e-jpa2>. Acesso em: 27 mar.
2013.
SUGESTÕES DE LEITURA
ARAÚJO, Rogério. Trabalhando com JSF do JAVA – parte 1. Disponível em:
<http://www.videoaulasbrasil.com.br/trabalhando-com-jsf-do-java-parte-1/>. Acesso em: 29 jan. 2013.
BURNS, Ed, et al. Javaserversaces 2.0 the complete reference. New York: The McGraw-Hill Companies,
2010. Disponível em: <http://jsfcompref.com/>. Acesso em: 28 jan. 2013.

120. CORDEIRO, Gilliard. Aplicações Java para web com JSF e JPA. São Paulo: Casa do Código, 2010.
DEITEL Paul. Java como programar.8. ed.São Paulo: Pearson Prentice Hall, 2010.
GONÇALVES, Edson. Dominando Java Server Faces e Facelets Utilizando Spring 2.5, Hibernate e JPA. 1. ed.
São Paulo: Ciência Moderna, 2008.
JAVA SERVER FACES. Ferramentas de desenvolvimento. Disponível em:
<http://www.javaserverfaces.com.br/>. Acesso em: 25 nov. 2012.
JSF – h: message. Disponível em: Em: <http://www.tutorialspoint.com/jsf/jsf_message_tag.htm >. Acesso em:
05 dez. 2012.
JSF TOLBOX. Introdução. 2013. Disponível em: <http://www.jsftoolbox.com/documentation/help/01-
Introduction/index.jsf>. Acesso em: 28 nov. 2012.
KOJIIO, Miguel. JSF 1.2 + Hibernate. Disponível em: <http://www.t2ti.com/curso/video/java/jsf-
hibernate/java_web_jsf_hibernate.php>. Acesso em: 24 jan. 2013.
PEGORETTI, Roberto Cláudio Mascarenhas. Criando uma aplicação com hibernate e JSF utilizando o
netbeans 6.5. Disponível em: <http://www.devmedia.com.br/criando-uma-aplicacao-com-hibernate-e-jsf-utilizando-
o-netbeans-6-5-parte-3/11690>. Acesso em: 23 jan. 2013.
Página7 de 7
 ANTERIOR
TECNOLOGIAS PARA APLICAÇÕES WEB
WEBAULA 1
Unidade I - JSF com PrimeFaces
1 – Desenvolvimento de Aplicações Web
A internet tem sido a grande plataforma para muitos projetos de software da atualidade e independente
de possuir suas interfaces desktop, mobile ou web (rodando no browser), faz uso do modelo cliente-
servidor. Um módulo – servidor – geralmente é responsável pelas regras de negócio, persistência dos
dados ou processamentos mais custosos, como, por exemplo, cálculos matemáticos complexos. Já o
módulo cliente geralmente contém apenas a camada de apresentação da aplicação, a qual possui a

121. interface com o usuário. A comunicação entre cliente e servidor, por sua vez, normalmente é realizada
através de uma rede utilizando-se de algum protocolo de comunicação, como o HTTP COUTINHO (2013).
O acesso às páginas (telas) desses sistemas é realizado utilizandoum modelo chamado
de request-response, ou seja, o cliente solicita que alguma ação seja realizada (request)
e o servidor a realiza e responde para o cliente (response).
Na plataforma Java, esse modelo foi implementado inicialmente através da API de
Servlets e JSP (JavaServer Pages) representado na Figura 02. Um Servlet estende a
funcionalidade de um servidor web para servir páginas dinâmicas aos navegadores,
utilizando o protocolo HTTP. Um servidor que implementa a tecnologia Java servlets e
JavaServer Pages converte uma requisição em um objeto HTTPServletRequest que é
entregue a um componente da aplicação web que seja capaz de interpretar e processar
os dados da requisição de acordo com as regras de negócio da aplicação. Esse objeto
pode ainda interagir com JavaBeans no servidor ou acessar o banco de dados a fim de
gerar conteúdo dinâmico. Com os dados resultantes do processamento no servidor, o
componente responsável por processar o objeto gerado a partir da requisição pode
então gerar um objeto HTTPServletResponse que é convertido em uma resposta HTTP
pelo servidor e enviado para o cliente.

122. Fonte: Oracle (2013)
Existem vários Servlet Container no mercado, os mais importantes
são: Tomcat, Glassfish, JBoss,WebSphere e Jetty.
Desde o lançamento de Servlets e JSPs, outras tecnologias Java e frameworks foram
surgindo com o objetivo de melhorar a produtividade e recursos no desenvolvimento
de aplicações web. Atualmente Java Server Faces é a tecnologia do momento,
requisitada na maioria das oportunidades de emprego para desenvolvedores Java.
Página1 de 13
 PRÓXIMA
2 JavaServer Faces
JSF é uma tecnologia que incorpora características do padrão MVC, que separa a
aplicação em três camadas: modelo, visualização e controle exemplificado na Figura
03.
O modelo é responsável por representar os objetos de negócio, manter o estado da
aplicação e fornecer ao controlador o acesso aos dados. A visualização representa a
interface com o usuário, sendo responsável por definir a forma como os dados serão
apresentados e encaminhar as ações dos usuários para o controlador. Já a camada de
controle é responsável por fazer a ligação entre o modelo e a visualização, além de
interpretar as ações do usuário e as traduzir para uma operação sobre o modelo, onde
são realizadas mudanças e, então, gerar uma visualização apropriada (PITANGA, 2013).

123. Em JSF, o controle é feito através de um servlet chamado Faces Servlet, por arquivos
XML de configuração e por vários manipuladores de ações e observadores de eventos.
O Faces Servlet recebe as requisições dos usuários na web, redireciona para o modelo
e envia uma resposta. Os arquivos de configuração possuem informações sobre
mapeamentos de ações e regras de navegação. Os manipuladores de eventos são
responsáveis por receber os dados da camada de visualização, acessar o modelo e
devolver o resultado para o usuário através do Faces Servlet. A figura 04 representa
esse processo.
2.1 Beans gerenciados
Os exemplos 01 e 02 utilizam os beans gerenciados do JSF para processar dados do
usuário e retê-los entre as solicitações.
Página2 de 13
 ANTERIOR
 PRÓXIMA

124. Exemplo 01:
A a classe Objeto possui duas anotações:
@ManageBean: Essa anotação indica que essa classe é um bean gerenciado;
@ApplicationScopped: Essa anotação indica o escopo do seu objeto em JSF.
Exemplo 02:

125. O escopo nada mais é do que o tempo de vida e morte do seu objeto, ou seja, quando
ele será criado e destruído. Dentre esses escopos estão os apresentados na tabela 01:

126. PARA SABER MAIS
Exemplo de Aplicação JSF
http://www.inf.ufsc.br/~frank/INE5612/Lab3-CartaoRU/
Página3 de 13
 ANTERIOR
 PRÓXIMA
2.2 Usando o Java Server Faces
A especificação do JSF fornece um conjunto de componentes visuais básicos em sua
implementação de referência.
Inclui duas bibliotecas de componentes básicos:
 Biblioteca “HTML” (sigla h): possui componentes que representam diversos elementos HTML à
Namespace: xmlns:h="http://java.sun.com/jsf/html
 Biblioteca “Core” (sigla f): responsável por tarefas comuns no desenvolvimento de sistemas, como
internacionalização, validação e conversão de dados de entrada.
Namespace: xmlns:f="http://java.sun.com/jsf/core
O código abaixo exemplifica o “Alô Mundo” em uma aplicação JSF (é importante saber
se está tudo ok antes de acrescentar outros namespace à o do PrimeFaces).
Obs: no projeto criado nas webaulas será utilizado o Eclipe Juno e o Tomcat (dessa
forma será necessário a lib do JSF).
No site da Exadel contém uma guia de referência do JSF. Eles criaram uma tabela
exemplificando os códigos e o resultado de alguns componentes.

127. Existem várias bibliotecas de componentes – comerciais ou gratuitas – disponíveis,
podendo citar:
Tabela 02 – Bibliotecas de componentes
Bibliotecas de
componentes
Disponível em
PrimeFaces http://primefaces.org/ (usada no projeto)
MyFaces http://myfaces.apache.org/trinidad/index.html
ICEfaces http://www.icesoft.org/java/home.jsf
RichFaces http://www.jboss.org/richfaces
Oracle ADF http://www.oracle.com/technetwork/developer-
tools/adf/overview/index.html
OpenFaces http://openfaces.org/
Fonte: Do autor (2013)
2.3 Conversão e Validação
O usuário ao preencher um formulário em um aplicativo web, está enviando dados ao
servidor. Estes dados não possuem uma ‘tipagem’, pois são tratados apenas como
texto puro, conforme especificação do protocolo HTTP. Devido a ausência de tipagem,
os dados precisam ser convertidos pelo aplicativo para que possam ser tratados de
forma específica.
2.3.1 Conversão

128. Conversão Padrão Implícita
Para os tipos fundamentais da linguagem Java o JSF se encarrega de realizar a
conversão de maneira implícita, ou seja, não é necessário que o desenvolver faça algo,
pois a conversão vai acontecer automaticamente. Os tipos fundamentais do Java são
representados na Tabela 03:
Conversão Padrão Explícita
Em alguns casos, os conversores padrões aplicados implicitamente nos tipos
fundamentais do Java não são suficientes.
Página4 de 13
 ANTERIOR
 PRÓXIMA
2.3.2 Validação
Na maioria dos casos apenas uma conversão não é o suficiente para verificar se uma
informação digitada pelo usuário é valida. Por exemplo, dizerque um campo é requerido
ou que não estão no intervalo definido para o campo. Segue alguns exemplos:

129. A validação mais comum de todas é a de verificar se um determinado campo não deixou
de ser preenchido. Podemos aplicar essa validação utilizando o atributo required (campo
obrigatório) dos inputs.
Bean Validation
Uma nova abordagem para definir validações adicionadas no JSF2 foi o Bean Validation.
A ideia é declarar as regras de validação nas classes de modelo ao invés de inseri-las
nas telas. A grande vantagem das validações definidas nas classes de modelo é que
elas podem ser utilizadas em diversas partes da aplicação.
Também podemos adicionar uma mensagem de erro através da validação:
@NotNull(message="O nome não pode ser nulo")
PARA SABER MAIS
Aula 7: Conversão e Validação
http://www.codigosfontes.com.br/jsf-conversao-e-validacao/
Introdução para JSF 2.0
http://otaviosantana.blogspot.com.br/2012/07/introducao-para-jsf-20.html
Página5 de 13
 ANTERIOR
 PRÓXIMA
3 - Desenvolvimento web com PrimeFaces

130. O PrimeFaces é uma das varias bibliotecas de componentes disponíveis para elaboração
de interfaces de sistemas web.
3.1 Arquitetura do primefaces
O PrimeFaces permite que sejam inseridos em seu conjunto outros componentes
através de especificações em Java Server Faces (JSF). Ele esta organizado em três
módulos: UI Components, Optimus e Faces Trace. A Figura 6 representa esses módulos.
O módulo UI Components compreende os componentes que contém as funcionalidades
encapsuladas de Ajax, Javascript e gráficos animados. Optimus é o módulo que oferece
soluções para facilitar o desenvolvimento com JSF. O FacesTrace é encarregado de
funções relacionadas ao desempenho da aplicação.
3.2 Exemplo - template
O exemplo apresentado na figura 07 abaixo é utilizado no projeto (sessão 4):

131. PARA SABER MAIS
Outros exemplos:
Site - Primefaces
http://www.primefaces.org/showcase/ui/home.jsf
Site: Café sem Java
http://javasemcafe.blogspot.com.br/2011/06/jsf-20-componentes-primefaces-221-parte.html
Página6 de 13
 ANTERIOR
 PRÓXIMA
3.3 Exemplos usando componentes do PrimeFaces
A figura 08 representa a interface do formulário de clientes que incorpora o template
que será definido na seção 4.2.

132. PARA SABER MAIS
uaiHerbet : Quando utilizar “action” ou “actionListener”
http://uaihebert.com/?p=1596&page=14
O componente p:inputText estende a entrada padrão com capacidades esfola que irá
acompanhar o mesmo tema do PrimeFaces.

133. O próximo componente é o p:focus, ele é responsável por setar o foco em um campo
ao abrir a página.
Página7 de 13
 ANTERIOR
 PRÓXIMA

134. Veja no link do p:inputMask as possibilidades de usar a propriedade mask, por exemplo,
pode-se definir que um determinado campo tenha apenas letras, ou apenas números,
ou que o caractere possa ser número ou letra.
O componente p:keyboard, apresenta um teclado virtual ao clicar em um campo. É um
teclado virutal que tem várias possibilidades de uso (o padrão é um teclado completo
com letras e números).

135. Obs: na próxima seção é apresentado o código completo do cadastro de clientes.
Página8 de 13
 ANTERIOR
 PRÓXIMA
4 Criando o projeto
Crie o projeto Projeto_02_JSF_PrimeFaces_Hibernate seguindo os passos descritos no
arquivoDownload_PARTE_01.pdf (sessão 1.2) e coloque as libs do JSF e do PrimeFaces
na pasta lib do projeto.
A estrutura abaixo será criada na webaula 01 (wiew) e na webaula 02

136. 4.1 – Criando o template
Exemplo do template apresentado na sessão 3.2 (adaptado).

137. Página9 de 13
 ANTERIOR
 PRÓXIMA

138. 4.3 Criando o formulário para cadastrar Clientes
Alguns componentes apresentados na sessão 3.3 são utilizados no cadastro de clientes
apresentado na Figura 11.

139. Página10 de 13

140.  ANTERIOR
 PRÓXIMA
PARA SABER MAIS
Conhecendo o comportamento do JavaServer Faces
http://www.edsongoncalves.com.br/tag/glassfish/

141. 5 Temas do PrimeFaces
No site do Primefaces, existe uma área de galeria de temas com modelos prontos para
serem feito o download, eles são baixados em formato .jar e tem que ser configurado
no xml do seu projeto para que possa ser alterado. Também é possível customizar um
tema para o seu projeto pelo JQuery ThemeRoller (http://jqueryui.com/themeroller/.) que é
100% compatível com a ferramenta (veja exemplo: temas.pdf).
Nas figuras 13 e 14 foram utilizados temas do PrimeFaces.
Na web aula 02 na sessão quatro (exemplos de projetos) contêm exemplos de projetos
que usam temas.
Página11 de 13
 ANTERIOR
 PRÓXIMA
6 Internacionalização
Um dos recursos que o Framework JavaServer Faces (JSF) oferece, é a
internacionalização da aplicação, possibilitando que a mesma tenha vários idiomas.

142. A figura 16 representa os arquivos na estrutura do projeto
PARA SABER MAIS
Internacionalização com JSF
http://jabesfelipe.blogspot.com.br/2010/04/internacionalizacao-com-jsf.html
SF – Usando arquivos de propriedades(Resource Bundle) para internacionalização de

143. aplicativos
http://www.devmedia.com.br/jsf-usando-arquivos-de-propriedades-resource-bundle-para-
internacionalizacao-de-aplicativos/6608
6 tema para o fórum
TEMA: SEGURANÇA – APLICAÇÕES WEB
O protocolo HTTP (veja figura 01) não oferece segurança para a comunicação de dados.
Com a ampliação da internet e devido à necessidade de tráfego de dados seguros, foi
implementado HTTPS para prover vários serviços de segurança para as aplicações e
usuários das mesmas.
Os principais serviços oferecidos são: confidencialidade da informação entre o servidor
e o cliente através da criptografia e a autenticação do servidor para o cliente através
de certificados digitais.
Outro problema também relacionado a aplicações web são a Injeção de SQL, Cross site
Scripting, entre outros.
Diante disso é necessário que os profissionais estejam sempre bem preparados e
conheçam as maneiras corretas de impedir que vulnerabilidades sejam exploradas.
Fale sobre o funcionamento do SSL e dê sua opinião.
PARA SABER MAIS
Como Funciona o SSL
http://publib.boulder.ibm.com/tividd/td/TRM/GC32-1323-00/pt_BR/HTML/admin231.htm
O que é SSL?
http://www.tecmundo.com.br/seguranca/1896-o-que-e-ssl-.htm
Como funciona a criptografia
http://informatica.hsw.uol.com.br/criptografia4.htm
Página12 de 13
 ANTERIOR
 PRÓXIMA

144. brunetta, Andii. JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 1. 2011. Disponível em
<http://javasemcafe.blogspot.com.br/2011/05/jsf-20-componentes-primefaces-221-
parte.html > Acesso em 07 abr. 2013
COUTINHO, Paulo César. Servlets, o coração do Java para web - Revista easy Java
Magazine23. 2013. Disponível para assinantes em: < http://www.devmedia.com.br/ servlets-
o-coracao-do-java-para-web-revista-easy-java-magazine-23/26036 >. Acesso em 07 abr.
2013.
FELIPE, Jabes. Internacionalização com JSF. 2013. Disponível em:
<http://jabesfelipe.blogspot.com.br/2010/04/internacionalizacao-com-jsf.html >. Acesso em: 5
abr. 2013.
GONÇALVES, Edson. O que estou fazendo no momento. 2013. Disponível em:
<http://www.edsongoncalves.com.br/tag/jsf-2-0/ >. Acesso em: 5 abr. 2013.
Pitanga, Talita. JavaServer Faces: a mais nova tecnologia Java para desenvolvimento
WEB. . 2013. Disponível em: < http://www.guj.com.br/content/articles/jsf/jsf.pdf >. Acesso
em: 5 abr. 2013.
Domenech, Edson. Desenvolvimento de um sistema Web com JavaServer Faces e
PrimeFaces (Parte I) . 2013. Disponível em: < http://domenechbr.blogspot.com.br/
2012/08/desenvolvimento-de-um-sistema-web-com.html >.Acesso em 07 abr. 2013;
FERNANDO. Java server faces: JSF. 2012. Disponível em:
<http://blog.fimes.edu.br/fernando/files/2012/05/JavaServer-Faces-%E2%80%93-JSF.pdf >.
Acesso em: 8 abr. 2013.
HTTP request/responce basics. Disponível em: < http://devhub.fm/http-requestresponse-
basics/ >. Acesso em: 5 abr. 2013.
JAVASEREVER faces HTML tags reference. 2013. Disponível em:
< http://exadel.com/web/portal/jsftags-guide >. Acesso em: 5 abr. 2013.
ORACLE. Web applications, 2013. Disponível em
< http://docs.oracle.com/javaee/6/tutorial/doc/%20geysj.html>. Acesso em 17 fev. 2013.
PROJETO ECLIPSE. 2013. Disponível em: < http://www.eclipse.org/ >. Acesso em: 8 abr.
2013.
SANTANA, Otávio. Desenvolvimento com soluções livres. 2012. Disponível em:
<http://otaviosantana.blogspot.com.br/2012/07/introducao-para-jsf-20.html >. Acesso em: 5 abr.
2013.

145. VENTURINI, Danilo; MARCHI, Késsia Rita da Costa. Desenvolvimento web utilizando
primefaces. 2013. Disponível em: < http://web.unipar.br/~seinpar/artigos/Danilo-
Venturini.pdf >. Acesso em: 5 abr. 2013.
ZANOTTI, Emerson. Aula 7: conversão e validação. 2012. Disponível em:
<http://www.codigosfontes.com.br/jsf-conversao-e-validacao/ >. Acesso em: 5 abr. 2013.
MATERIAL DE APOIO:
ALGAWORKS. DWJSF – Desenvolvimento Web com JavaServer Faces. Disponível em:
<http://www.algaworks.com/downloads/apostilas/algaworks-dwjsf-desenvolvimento-web-com-
javaserver-faces-2a-edicao.pdf >. Acesso em 17 abr. 2013.2013.
GONÇALVES, Edson. JavaServer Faces 2.0 na Prática – Parte 1. 2013. Disponível em:
<http://www.edsongoncalves.com.br/2010/01/18/javaserver-faces-2-0-na-pratica-parte-1/ >.
Acesso em: 5 abr. 2013.
GONÇALVES, Edson. JavaServer Faces 2.0 na Prática – Parte 2. 2013. Disponível em:
<http://www.edsongoncalves.com.br/2010/02/09/javaserver-faces-2-0-na-pratica-parte-2/ >.
Acesso em: 5 abr. 2013.
GONÇALVES, Edson. JavaServer Faces 2.0 na Prática – Parte 3. 2013. Disponível em:
<http://www.edsongoncalves.com.br/2010/02/21/javaserver-faces-2-0-na-pratica-parte-3/ >.
Acesso em: 5 abr. 2013.
SANTOS, Anderson Carlos Bueno. Desenvolvimento web com PrimeFaces: uso no projeto
banco de dados pragas quarentenárias. Disponível em:
<http://ainfo.cnptia.embrapa.br/digital/bitstream/item/23892/1/p052.pdf >. Acesso em: 17 mar.
2013.
VASCONCELOS, Bruno Garcia. PrimeFaces: biblioteca de componentes JSF para
interfaces ricas. Disponível em < http://brunovasconcelos.files.wordpress.com/2012/06/prime-
faces.pdf > Acesso em 19/02/2013.
WELZEL, Jonathan Nascimento. O framework Java server faces. 2011. 105 f. Trabalho de
Diplomação (Graduação em Tecnologia de Sistemas de Informação) – Universidade
Tecnológica Federal do Paraná. Medianeira, 2011. Disponível em:
<http://repositorio.roca.utfpr.edu.br/jspui/bitstream/1/615/1/MD_COADS_2011_1_05.pdf >
Acesso em: 19 fev. 2013.
Página13 de 13

146.  ANTERIOR
TECNOLOGIAS PARA APLICAÇÕES WEB
WEBAULA 2
Unidade I - JSF com PrimeFaces e Hibernate
1. Desenvolvimento de Aplicações Web – Persistência
Hibernate é uma ferramenta de ORM, Object Relational Mapping (Mapeamento objeto
relacional) que foi desenvolvido por Gave King e hoje faz parte da corporação Red Hat,
juntamente com o JBoss. Uma ferramenta de mapeamento Objeto relacional como o
Hibernate, TopLink, EclipseLink tem como objetivo facilitaro trabalho do desenvolvedor
no que diz respeito ao relacionamento entre uma aplicação Java orientada a objeto e
um banco de dados relacional. A ideia principal é criar uma camada entre a aplicação e
o banco de dados de modo que o desenvolvedor não tenha que se preocupar com
instruções SQL ou com o banco de dados na qual a aplicação irá persistir seus dados,
algo que não é feito utilizando só JDBC. A figura 01 apresenta a arquitetura do
Hibernate.
No intuito padronizar a implementação de tecnologias ORM, surgiu a JPA (Java
Persistence API), que especificou o uso de ferramentas ORM. Em teoria, qualquer
framework que implemente o padrão JPA deve funcionar igualmente.

147. PARA SABER MAIS
Hibernate
http://www.dcc.ufrj.br/~austeclynio/downloads/Hibernate.pdf
Documentação de Referência Hibernate
http://docs.jboss.org/hibernate/core/3.5/reference/pt-BR/pdf/hibernate_reference.pdf
Persistindo Objetos com Java, Hibernate e PostgreSQL
http://www.devmedia.com.br/persistindo-objetos-com-java-hibernate-e-postgresql/4149
Introdução à Java Persistence API – JPA
http://www.dainf.ct.utfpr.edu.br/~caio/hibernate/ppt/Hibernate_Annotations_Rascunho.pdf
1.2 A CLASSE HibernateUtil
Os sistemas que usam Hibernate precisam de uma instância da interface SessionFactory
(fabrica de sessão), que é criada normalmente durante a inicializaçãoda aplicação. Esta
instância pode serusada por qualquer código que queira obter uma Session. Essa classe
é bastante conhecida na comunidade de desenvolvedores Hibernate, pois é um padrão
no desenvolvimento de aplicações com Java e Hibernate.
PARA SABER MAIS
Minha Classe HibernateUtil
http://adrielcafe.com/cafelog/hibernate/54-minha-classe-hibernateutil
Página1 de 8
 PRÓXIMA

148. 1.3 DIALETOS SUPORTADOS
O Hibernate trabalha com dialetos para um grande número de bancos de dados, tais
como: DB2, MySQL, Oracle, Sybase, Progress, PostgreSQL, Microsoft SQL Server,
Ingres, Informix entre outros. Possíveis valores para os dilates estão presentes na
Tabela 01.
2 DOWNLOAD DO HIBERNATE / MYSQL
Faça download do Hibernate para adicionar as libs no seu projeto. No
arquivoDownload_Hibernate_e_configuracoes_PARTE_02.pdf contém os passos para
download e também adicionar as libs no eclipse.
3 Projeto JSF (continuação)
Nesse tópico será utilizado o mesmo projeto Projeto_02_JSF_PrimeFaces_Hibernate
criado na web aula 01.

149. Página2 de 8
 ANTERIOR
 PRÓXIMA

150. 3.3 Arquivo hibernate.cfg.xml
O arquivo de configuração hibernate.cfg.xml (src/java) contém informações sobre a conexão
do banco de dados, os mapeamentos de recursos e outras propriedades da conexão.
PARA SABER MAIS
HIBERNATE - Persistência Relacional para Java Idiomático
http://docs.jboss.org/hibernate/core/3.6/reference/pt-BR/html_single/
CRUD simples com Hibernate e JSF (exemplo: arquivo
persistence.xml) http://joaopetreli.com.br/index.php/2010/10/27/crud-simples-com-hibernate-e-
jsf/

151. Página3 de 8
 ANTERIOR
 PRÓXIMA
3.4 Criando as Camadas
Depois de criar a camada view na webaula 01 agora será criado a classe modelo e
especificado o ManagedBean para se comunicar com o formulário. A figura 05
representa o componente da página JSF se comunicando com o ManagedBean.
PARA SABER MAIS
Conhecendo o comportamento do JavaServer Faces
http://www.edsongoncalves.com.br/tag/glassfish/
3.4.1 Model
O pacote Model do projeto deve conter uma classe chamada Cliente que será um POJO
(Plain Old Java Object) com as annotations do hibernate necessárias para utilização do
framework. A classe deve ficar de acordo com esta:

152. O Hibernate tem seus próprios tipos de dados (Exemplo: Tabela 02), que funcionam
como intermediários entre os tipos da aplicação e o Banco de Dados, garantindo uma
conversão segura.

153. Página4 de 8
 ANTERIOR
 PRÓXIMA
3.4.2 ManagedBean
O nome do ManagedBean deve ser único e é utilizado para acessá-lo em nos arquivos
XHTML (exemplo: os campos do formulário de clientes). Ao utilizar um ManagedBean
sem um nome especificado, o JSF assume que o nome do nosso ManagedBean será o
nome da classe.

154. A classe a ClienteBean foi representa por um ManagedBean, isso significa dizer que
pode vincular (binding) seus atributos ou métodos com componentes com as páginas
JSF (exemplificado na figura 05). É essa característica que torna o JSF um framework
orientado a componentes e a eventos. O que caracteriza a classe como sendo um bean
gerenciado é a anotação @ManagedBean acima da definição da classe. Essa é nova
forma de se declarar ManagedBean no JSF, que substitui a forma antiga onde era
realizado em várias linhas no de configurações do JSF chamado faces-config.xml.
Outra anotação utilizada é @SessionScoped, que informa que o escopo do bean
gerenciado é de sessão, ou seja, enquanto dura a sessão.
PARA SABER MAIS
Anotações e Navegação no JSF 2.0 (escopos – página 10)
http://www.venturus.org.br/wp-content/themes/newera/artigo/anotacoes-navegacao-JSF.pdf
Introdução ao JSF 2.0 com PrimeFaces parte II
http://benignosales.wordpress.com/tag/sessionscoped/
3.4.3 Banco

155. Antes de analisar os códigos das classes especificadas nos arquivos
BancoDeClientes.java e HibernateUtil.java veja um exemplo de “como tornar um objeto
persistente” apresentado na tabela 03.
Quando a sessão for fechada, usuário torna-se uma instância desligada e Qualquer
alteração no seu estado não afeta o banco. Para religá-lo pode-se usar update().
Página5 de 8
 ANTERIOR
 PRÓXIMA
BancoDeClientes.java (pacote banco)
O método salvar da classe BancoDeClientes recebe o objeto salvar(Cliente u). No bloco
de código trychama o método sessao.save(u) passando o objeto u referente ao cliente
e tenta executar o commit (se houver falha irá executar o bloco especificado
em catch desfazendo a transação) e finalmente no blocofinally encerra a sessão.

156. HibernateUtil.java
Obtendo uma SessionFactory: Quando todos os mapeamentos forem analisados pelo
org.hibernate.cfg.Configuration, a aplicação deve obter uma factory para as instâncias
do org.hibernate.Session. O objetivo desta factory é compartilhado por todas as threads
da aplicação.

157. PARA SABER MAIS
Documentação da Referência do Hibernate
http://www.futurepages.org/wiki/lib/exe/fetch.php?media=quickstart:hibernate_reference_pt.pdf
Página6 de 8
 ANTERIOR
 PRÓXIMA
4 Exemplos de projeto
Nessa seção serão apresentados alguns projetos que criei no eclipse utilizando o banco
de dados Mysql (os projetos serão disponibilizados para download em um endereço que
será divulgado no fórum).
Alguns projeto foram criados no NetBeans e na maioria deles contem endereços para
download referenciado pelo próprio autor.
EXEMPLOS DE PROJETOS
4.1 O que é um CRUD
CRUD é um acrônimo para Create, Read, Update and Delete, ou seja, as 4 operações
básicas para se efetuar em um banco de dados.
4.1 Exemplos

158. Exemplo 01 – Seu Primeiro Projeto JSF
Autor: Andre Froes
Disponível em : http://andrefroes.net76.net/?p=71
As ferramentas utilizadas no post foram (Netbeans, Glassfish, Jars do JSF 2.0 (já incluso
no bundle)).
Obs: criei usando o eclipse Juno e adicionei a lib do JSF.
No site da Exadel contém uma guia de referência do JSF (inclua outros testes)
Outros exemplos: Exemplos_Projetos.pdf
5 tema para o fórum
Uma ferramenta de mapeamento Objeto relacional como o Hibernate, TopLink, Kodo,
OpenJPA, EclipseLink entre outros tem como objetivo facilitar o trabalho do
desenvolvedor no que diz respeito ao relacionamento entre uma aplicação java
orientada a objeto e um banco de dados relacional.

159. Como a JPA (Java Persistence API) e a especificação (JSR – Java Specification Request)
está relacionado com as tecnologias ORM representadas na figura 07?
Página7 de 8
 ANTERIOR
 PRÓXIMA
ADRIELCAFE. Hibernate: tipos de dados e dialetos suportados. 2013. Disponível em:
<http://adrielcafe.com/cafelog/hibernate/46-hibernate-tipos-de-dados-e-dialetos-suportados >.
Acesso em: 13 fev. 2013.
ALGAWORKS. DWJSF desenvolvimento web com javaserver faces. 2010. Disponível em:
<http://pt.scribd.com/doc/131495256/95/Criando-a-classe-HibernateUtil >. Acesso em: 5 abr.
2013.
CAMELO, Vladimir. Introdução a Java Persistence API (JPA), 2013. Disponível em:
<http://www.ramon.pro.br/material/alpoo/vladimir/Aula%206%20-
%20Java%20Persistence%20API%20-%20Prof%20Vladimir%20Camelo.pdf >. Acesso em: 17
fev. 2013.
GONÇALVES, Edson. Figura 3. 2010. Disponível em:
< http://www.edsongoncalves.com.br/wp-content/uploads/2010/02/Figura-3.jpg >. Acesso em: 5
abr. 2013.
HIBERNATE tutorial. 2013. Disponível em:
< http://www.cloudsopedia.com/tutorial/hibernate/ >. Acesso em: 5 abr. 2013.

160. USANDO hibernate: conceitos e consultas.2012. Disponível em:
<http://www.facom.ufu.br/~bacala/DAW/06%20-%20Usando%20Hibernate.pdf >. Acesso em: 5
abr. 2013.
JAVASERVER faces HTML tags reference. 2013. Disponível em:
< http://exadel.com/web/portal/jsftags-guide>. Acesso em: 5 abr. 2013.
MATERIAL DE APOIO
DEVMEDIA. Persistindo objetos com Java, hibernate e postgreSQL. 2013. Disponível em:
<http://www.devmedia.com.br/ persistindo-objetos-com-java-hibernate-e-postgresql/4149 >.
Acesso em: 15 fev. 2013.
GUJ - Grupo de Usuários Java. Disponível em: < http://www.guj.com.br >. Acesso em: 5
abr. 2013.
JAVA SEM CAFÉ. JPA 2.0: criando tabelas - parte 1. Disponível em:
<http://javasemcafe.blogspot.com.br/2011/02/jpa-20-criando-tabelas-parte-1.html >. Acesso em:
5 abr. 2013.
JAVA SEM CAFÉ. JPA 2.0: criando tabelas - parte 2. Disponível em:
<http://javasemcafe.blogspot.com.br/2011/03/jpa-20-criando-tabelas-parte-2.html >. Acesso em:
5 abr. 2013.
JAVA SEM CAFÉ. JPA 2.0: criando tabelas - parte 3. Disponível em:
<http://javasemcafe.blogspot.com.br/2011/03/jpa-20-criando-tabelas-parte-3.html >. Acesso em:
5 abr. 2013.
JAVA SEM CAFÉ. JPA 2.0: gerar classes a partir do banco com o Netbeans. Disponível
em: <http://javasemcafe.blogspot.com.br/2011/03/jpa-20-gerar-classes-partir-do-banco.html >.
Acesso em: 5 abr. 2013.
JAVA SEM CAFÉ. JPA 2.0: Java Persistence API. Disponível em:
<http://javasemcafe.blogspot.com.br/2011/02/jpa-20-java-persistence-api.html >. Acesso em: 5
abr. 2013.
KING, Gavin et al. Hibernate – persistência relacional para Java idiomático: documentação
de referência hibernate. Disponível em
< http://docs.jboss.org/hibernate/core/3.5/reference/pt-BR/pdf/hibernate_reference.pdf >. Acesso
em: 5 abr. 2013.

161. PROGRAMANDOJAVA. CRUD JSF 2 + JPA 2 – parte 1. Disponível em:
<http://programandojava.wordpress.com/2012/05/31/crud-parte1/ >.Acesso em: 5 abr. 2013.
PROGRAMANDOJAVA. CRUD JSF 2 + JPA 2 – parte 2. Disponível em:
<http://programandojava.wordpress.com/2012/06/06/crud-parte2/ >. Acesso em: 5 abr. 2013.
PROGRAMANDOJAVA. CRUD JSF 2 + JPA 2 – parte 3. Disponível em:
<http://programandojava.wordpress.com/2012/06/12/crud-parte3/ >.Acesso em: 5 abr. 2013.
PROGRAMANDOJAVA. CRUD JSF 2 + JPA 2 – parte 4. Disponível em:
<http://programandojava.wordpress.com/2012/06/13/crud-parte-4-final/ >. Acesso em: 5 abr.
2013.
PROGRAMANDOJAVA. CRUD JSF 2 + JPA 2 – Segurança com Spring security 3. Disponível
em: <http://programandojava.wordpress.com/2012/07/09/seguranca-spring-security-3/ >.
Acesso em: 5 abr. 2013.
TUTORIAL – Configurando o Eclipse para criar novos projetos Web usando os
frameworks Hibernate e JSF com banco de dados MySQL. Disponível em:
<http://ges.dc.ufscar.br/graduacao/tutorial_criacao_projeto_web_eclipse.pdf >. Acesso em: 5
abr. 2013.
Página8 de 8
 ANTERIOR
TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 1 – Introdução à Plataforma .NET Framework e a Linguagem C#
VÍDEO AULA 01
Um novo modelo de desenvolvimento
A partir dos anos 90 a internet começou a mudar a forma como as organizações se
comunicavam. Aplicações tradicionais como processadores de texto e planilhas
eletrônicas eram criadas para funcionar individualmente, acessando dados que estavam

162. armazenados na própria maquina que o aplicativo era executado. A maioria dos novos
softwares é desenvolvida para funcionarem de forma distribuída, acessando bases
remotas e provendo serviços para outros programas, chamados de aplicativos clientes.
Como resultado o primeiro objetivo dos novos softwares é suportar o compartilhamento
de informações pela rede e a distribuição delas através de mensagem eletrônica, e-mail
e até mesmo redes sociais. Basicamente o novo modelo de desenvolvimento de
software está deixando de apenas criar funcionalidades básicas de um sistema isolado
para a criação de serviços que possibilitam gerar soluções para uma grande quantidade
de aplicações.
O .NET Framework possibilita o desenvolvimento de uma plataforma robusta para
criação de aplicativos para desktop, celulares e Internet. Torna o desenvolvimento para
internet uma tarefa fácil como nunca foi anteriormente.
Fácil publicação e manutenção
Aplicações podem ser criadas utilizando diferentes tecnologias:
Saiba mais: Visão geral do .NET Framework
http://msdn.microsoft.com/pt-br/library/hh425099.aspx
Web pages
Web Services
Bibliotecas (DLLs)
Windows Forms
Console Application
O .NET Framework torna fácil a tarefa de publicação, na maioria dos cenários, basta
copiar o aplicativo e seus componentes em uma pasta e executá-lo. Isso é possível
porque o .NET Framework localiza e carrega todas as dependências necessárias que o
aplicativo precisa, mesmo se houverem diferentes versões do mesmo componente no
sistema.
As configurações pós-instalação também são um ponto importante e que é muito bem
tratado pelo .NET Framework. Configurações de segurança, conexões com banco de
dados e parâmetros da aplicação podem ser facilmente alterados sem a necessidade de

163. compilar a aplicação novamente, isso porque o .NET Framework trabalha com essas
configurações em um modelo baseado em arquivos. Um arquivo de configuração é um
arquivo XML que pode alterar o comportamento de uma aplicação. Por exemplo, o
administrador do sistema pode configurar a aplicação para utilizar apenas uma versão
de um componente instalado no sistema, ou até mesmo alterar o caminho de um banco
de dados se o mesmo foi migrado para outro local, tudo isso de uma forma flexível e
sem impactar o sistema.
Segue abaixo o modelo de um arquivo de configuração utilizado no .NET:
Vídeo: XML – Teoria e Prática
https://www.youtube.com/watch?v=I-me4ipqpxY

164. Cada um dos nós do xml acima contém uma configuração que pode ir de uma referência
de um recurso utilizado na aplicação até uma string de conexão utilizada para conectar
no banco de dados.
Página1 de 21
 PRÓXIMA
Elementos do .NET FRAMEWORK
O .NET Framework consiste em três camadas básicas:
Common Language Runtime
Commom Type System
.NET Class Library
A seguir vamos conhecer cada uma dessas camadas.
Common Language Runtime
O Common Language Runtime (CLR) é uma camada entre a aplicação e o sistema
operacional. O CLR simplifica o desenvolvimento de uma aplicação e reduz a quantidade
de código que os desenvolvedores têm que escrever pois disponibiliza uma grande
quantidade de recursos, dentre eles podemos citar o gerenciamento de memória e de
threads (paralelismo), ciclo de vida de componentes e tratamento de erros. Um dos
maiores trunfos do CLR é a forma transparente como ele provê todos os recursos
citados, não importando a linguagem de programação utilizada e retirando qualquer
esforço requerido do programador.
O CLR também é responsável por compilar o código antes do mesmo ser executado. Ao
contrário de produzir uma compilação binária, como a maioria dos compiladores faz, o
compilador do .NET produz a representação do código em uma linguagem comum para
o .NET Framework, chamada de Microsoft Intermediate Language (MSIL), mais
conhecido com IL. Quando o código é executado pela primeira vez , o CRL invoca um
compilador especial chamado Just In Time (JIT), que transforma o código IL em um
executável específico para o tipo do processador que a aplicação será executada. Como
todas as linguagens do .NET Framework têm como resultado a mesma compilação,
todas têm o mesmo desempenho. Isso quer dizer que um programa escrito em Visual
Basic .NET (VB.NET) pode trabalhar da mesma forma que um programa desenvolvido
em C Sharp (C#).

165. A imagem abaixo ilustra como funciona a compilação de um programa desenvolvido em
uma das linguagens do .NET Framework, no caso o C#:
Figura - Processo de Compilação do .NET
Fonte: Introduction... (2013)
Commom Type System
O Commom Type System (CTS) é um componente do CLR que mantém um conjunto
padrão de tipos de dados, cada um com características e comportamentos em comum.
A grande vantagem por trás do CTS é a possibilidade de trabalhar com os mesmos tipos
de dados utilizando qualquer uma das linguagens do .NET. Por exemplo, se uma
aplicação em C# precisa se comunicar com um componente desenvolvido em VB.NET
ela não precisará conter nenhum código adicional para conseguir se comunicar com o
componente.

166. O CTS permite que cada linguagem de programação do .NET utilize os tipos de dados
especificados na linguagem, o compilador do .NET converte o tipo de dados utilizado
para o tipo de dados definido no CTS. Também é possível utilizar na programação
diretamente o tipo definido no CTS.
A tabela a seguir mostra cada um dos tipos definidos no CTS:
Página2 de 21
 ANTERIOR
 PRÓXIMA
.NET Class Library
O .NET Class Library é a camada que provê uma grande quantidade de classes que
executam as mais diversas funções, por exemplo, efetuar operações matemáticas,
manipular arquivos XML ou bancos de dados.
Para facilitar o uso das classes as mesmas foram dividas em pacotes chamados de
namespaces. O namespace raiz do .NET Class Library é chamado de System, que
contém classes bases e tipos de dados, como a String, o Int16, Console e Array.

167. Exemplos de namespaces do .NET Class Library:
System.Data.SqlClient: Contém classes para trabalhar com o banco de dados SQL
Server;
System.IO: Contém classes para trabalhar com arquivos e dados serializados em
memória.
A grande vantagem de se trabalhar com o .NET Class Library é a possibilidade de utilizar
todos os recursos das classes nas diferentes linguagens do .NET Framework, facilitando
na publicação da aplicação, pois o .NET Class Library está incluso em todas as versões
do .NET Framework.
Tecnologias unificadas
Até agora, foi abordado como funcionam os componentes internos do .NET Framework.
As tecnologias, listadas a seguir, são as diferentes formas disponíveis para utilizartodos
os recursos da plataforma.
Vídeo: .NET Framework e seus componentes
https://www.youtube.com/watch?v=zbDsiOYlBtk
Visual Studio
Windows Forms
ASP.NET
Visual Studio
O Visual Studio é uma IDE (Integrated Development Environment) para
desenvolvimento utilizando qualqueruma das linguagens contidas no .NET Framework.
O Visual Studio disponibiliza recursos para trabalharcom diversas linguagens no mesmo
ambiente. Contém ferramentas para DEBUG, designers para HTML, XML, banco de
dados e códigos de servidor. Além disso conta com IntelliSense, recurso que completa

168. o código, garantindo que o desenvolvedor evite erros, além de adicionar um alto ganho
na produtividade.
Veja na tabela abaixo alguns recursos do Visual Studio:
Windows Forms
Windows Forms é o nome dado para o conjunto de classes que contém funcionalidades
que suportam criar aplicações desktop tradicionais, que contém uma interface gráfica
para interação do usuário. O Windows Forms torna fácil o desenvolvimento de sistemas
para o usuário final utilizando qualquer uma das linguagens do .NET Framework. O
Visual Studio permite o desenvolvimento Windows Forms arrastando controles em uma
ferramenta visual, descartando a necessidade de criar a parte gráfica da aplicação
utilizando código, recurso esse chamado de drag-and-drop (arrastar e soltar).

169. Desenvolvimento Windows Forms no Visual Studio
Saiba mais: Introdução ao Windows Forms
http://msdn.microsoft.com/pt-br/vbasic/ms789117.aspx
Página3 de 21
 ANTERIOR
 PRÓXIMA
ASP.NET
Para o desenvolvimento de aplicações WEB o .NET framework dispõe do ASP.NET, uma
arquitetura de desenvolvimento criada especificamente para criar aplicações WEB
poderosas com alta produtividade.
O ASP.NET é dividido em várias tecnologias, entre ela o ASP.NET Web Forms, ASP.NET
MVC e Web Services.

170. ASP.NET Web Forms
Desenvolvedores que não têm familiaridade com o desenvolvimento para WEB podem
perder muito tempo para descobrir como validar um simples campo de e-mail em um
formulário de contato. Uma validação pode ser executada tanto no lado cliente, como
no lado servidor. Decidir qual lado seguir pode ser complicado pelo fato de que cada
uma das abordagens tem suas vantagens e desvantagens, algumas podem não ficar
explicitamente visíveis no momento do desenvolvimento se não houver a atenção
necessária. Se a validação for feita no lado cliente utilizando Javascript, deve ser
considerado o risco do navegador do usuário não suportar Javascript, ou até mesmo
estar desativado. Dessa forma os dados seriam enviados sem estar devidamente
validados. Se os dados forem validados no servidor, o tempo para enviar esses dados
e obter uma resposta pode frustrar o usuário, ou seja, a aplicação poderá ser segura
mas irá pecar na usabilidade.
O Web Forms simplifica todos os processos da arquitetura cliente-servidor, pois tem
como objetivo facilitar a entrada de desenvolvedores desktop no ambiente WEB,
disponibilizando recursos como o drag-and-drop para adicionar controles em uma
página e editar suas características visualmente.
Ambiente de desenvolvimento em ASP.NET no Visual Studio

171. ASP.NET MVC
Vídeo: Introdução ao ASP.NET
http://msdn.microsoft.com/pt-br/asp.net/gg252004.aspx
O ASP.NET MVC é um framework para trabalhar com o padrão de projeto Model-View-
Controller, permitindo o controle total sobre o que é enviado para o cliente e utilizando
todo o poder do ASP.NET e do .NET Framework. É uma excelente plataforma para
trabalhar com desenvolvimento dirigido por testes por não conter cenários complexos
como o ciclo de vida de páginas baseado em eventos como o ASP.NET Web Forms.
Também introduziu no ASP.NET a possibilidade de configurar rotas para criar endereços
amigáveis, permitindo assim um melhor desempenho na disponibilização de conteúdo
através de mecanismos de busca.
Saiba mais: Padrão MVC
http://msdn.microsoft.com/pt-br/magazine/cc337884.aspx
Web Services
Um Web Service é uma aplicação que expõe funcionalidades na web através de
métodos. Web Services são desenvolvidos para serem consumidos por outras
aplicações e não têm a intenção de interagir diretamente com o usuário final. Web
Services tornam fáceis a criação de recursos para serem acessados remotamente.
Aplicativos clientes podem invocar os métodos de um Web Service como se eles
estivesses definidos na própria aplicação.
VÍDEO AULA 02

172. Linguagem C#
A linguagem C# foi criada pela Microsoft especificamente para a plataforma .NET. A
criadora da linguagem descreve a mesma como simples, moderna, orientada a objetos,
fortemente tipada (apesar dos tipos dinâmicos introduzidos na versão 4) derivada do C
e C++. Algumas pessoas por sua vez diriam que a linguagem também é derivada do
Java, por algumas similaridades em seu design. Sintaticamente o C# é muito parecido
com C++ e Java. Algumas palavras chaves são iguais, blocos de código são marcados
com chaves e as instruções são terminadas com ponto e vírgula. A primeira impressão
ao ver um bloco de código escrito em C# é que ele é muito parecido com C++ e Java.
Apesar de toda essa similaridade o C# é muito mais simples de ser absorvido do que o
C++, mas tendo quase o mesmo nível de dificuldade do Java. Seu design apesar de
similar, é mais moderno que as outras linguagens citadas.
Algumas das principais características do C#:
 Suporte total a programação orientada a objetos, incluindo Herança e Interfaces,
métodos virtuais, e sobrecarga de operadores;
 Uma grande quantidade de tipos de dados bases, como tipos numéricos inteiros
e fracionados;
 Suporte para gerar automaticamente documentação em XML;
 Limpeza de memória automática de recursos não utilizados;
 Acesso total a Class Library do .NET Framework, e fácil acesso as APIs do
Windows;
 Ponteiros e direto acesso a memória são permitidos, mas a linguagem foi
projetada de uma forma para que não seja necessário o uso desses recursos;
 Suporte a propriedades e eventos;
 C# pode ser utilizado para criar qualquer tipo de aplicação dentro da plataforma
.NET, como páginas em ASP.NET e Web Services.
Muitos dos recursos citados também são suportados por outras linguagens do .NET
Framework, como o VB.NET e o Visual C++, mas deve ser levado em consideração que
o C# foi desenvolvido do zero para o .NET. Sendo assim, tem um suporte mais completo
desses recursos, ao mesmo tempo em que sua sintaxe é mais fluída para sua utilização.
Página4 de 21
 ANTERIOR
 PRÓXIMA
O que é preciso para escrever e rodar código C#

173. O .NET Framework, atualmente na versão 4.5, é necessário para executar aplicações
escritas em qualquer linguagem do .NET.
Apesar do C# poder ser escrito em qualquer editor de texto de terceiros, é altamente
recomendado a utilização da IDE oficial, o Visual Studio, pois contém ferramentas
poderosas que possibilitam um ganho considerável na produtividade.
C# Básico
Agora que foram apresentados os principais recursos da linguagem C#, veremos como
utilizá-los, compilando o código de exemplo abaixo:
Saiba mais: Compilador C#
http://msdn.microsoft.com/pt-br/library/vstudio/2fdbz5xd.aspx
Compilando e rodando o programa

174. O código acima pode ser compilado executando pela linha de comando o compilador do
C# (csc.exe) contra o arquivo (que deve ser salvo com extensão .cs), como mostrado
abaixo:
csc primeiro_programa.cs
Nota: O compilador do C# pode ser encontrado no seguinte caminho:
{drive}WindowsMicrosoft.NETFramework{versão do .net framework}
Exemplo:
C:WindowsMicrosoft.NETFrameworkv4.0.30319
Para poder compilar um código direto da linha de comando, deve ser verificado se as
ferramentas de linha de comando do .NET foram instaladas no sistema.
Depois de compilado será gerado um arquivo .exe que pode ser executado da linha de
comando ou através do Windows Explorer como qualquer outro executável.
A saída do programa (considerando que o usuário se chama João) será a seguir:
Página5 de 21
 ANTERIOR
 PRÓXIMA
C# e sua sintaxe

175. Vamos observar alguns detalhes sobre a sintaxe do C#. Como em outras linguagens,
linhas de comando no C# são terminadas com ponto e vírgula, e podem continuar em
múltiplas linhas sem necessidade de um caractere para informar essas continuações,
como vemos a seguir:
Para comentar uma linha basta utilizar duas barras (//). Para várias linhas deve ser
iniciado com barra e asterisco ( /*) e terminar com a mesma combinação ao contrário
( */):

176. Saiba mais: Comentários com XML
http://msdn.microsoft.com/pt-br/library/vstudio/b2s063f7.aspx
Todos esses aspectos mostram as similaridades do C# com o C++ e o Java.
As primeiras linhas do código anterior começam com a utilização de namespaces, um
recurso utilizado para agrupar classes que têm responsabilidades similares. Os
namespaces do C# são equivalentes aos namespaces do C++ e os packages do Java.
A palavra chave namespace seguida de chaves declara em qual namespace uma classe
está contida.
A palavra chave using informa ao compilador em qual namespace deve ser procurado
para encontrar classes que foram referenciadas em seu código mas não foram definidas
no mesmo namespace. Using no C# é equivalente à palavra chave import do Java e
using namespace do C++.
Veremos no código abaixo outra utilização dos namespaces:

177. Nó código acima foi adicionado uma instrução using pois foi referenciada uma classe
contida no namespace System. Vale ressaltar que a maioria das operações
efetuadas no C# dependem das classes bases do .NET. Nesse caso, foi utilizada a
classe Console para imprimir uma mensagem na linha de comando. O C# não tem
nenhum comando para efetuar essa operação.
Como a maioria dos programas em C# utilizam classes e outros elementos do
namespace System, é uma boa prática adicionar uma instrução using para esse
namespace em todos os arquivos.
Depois disso foi definido uma classe chamada Program, como ela foi definida no
namespaceConsoleApplication1, é correto afirmar que seu nome completo
é ConsoleApplication1.Program.
Página6 de 21
 ANTERIOR
 PRÓXIMA
Classes
Como no Java, tudo no C# deve estar contido em uma classe. Classes no C# são
similares a classes no Java e C++. A declaração da classe se dá com a palavra
chave class, seguida do nome da classe e das chaves. Todo código referente associado
a classe deve estar dentro das chaves, como mostrado no exemplo abaixo:

178. No exemplo anterior foi declarado um método chamado Main. Todo executável
desenvolvido em C# (Console, Windows) deve ter um ponto de partida. Esse é o papel
do método Main, ser o primeiro método a ser executado ao abrir o executável.
Um método no C# tem o seguinte formato:
Saiba mais: Orientação a Objetos com C#
http://msdn.microsoft.com/pt-br/library/cc580626.aspx
Por Exemplo:

179. Primeiro devem ser definidos os modificadores do método que servem para especificar
o nível de acesso do método. No exemplo anterior foram utilizadas as palavras
chaves public e static. A palavra chave public define que o método pode ser chamado
de qualquer lugar, inclusive fora da classe que foi definido. Já a palavra chave static
indica que o método não poderá ser invocado de um objeto (instância da classe) e sim
diretamente da classe. Logo depois deve ser definido o tipo de retorno do método, no
caso voidpara informar que o método não retornará nada. No exemplo, o método não
recebe parâmetros. Por fim, são definidas as instruções do método:
A instrução acima declara uma variável do tipo int chamada x. Deve ser observado que
o compilador não deixará essa variável ser utilizada a não ser que ela seja inicializada.
Assim que declarada, pode ser inicializada utilizando o operador de atribuição igual ( =
):
x = 20;
Também é possível declarar e inicializar uma variável ao mesmo tempo:
int x = 20;
Página7 de 21
 ANTERIOR

180.  PRÓXIMA
Se várias variáveis são declaras e inicializadas ao mesmo tempo, todas as variáveis
serão consideradas do mesmo tipo:
Int x = 50, y = 100;
No exemplo anterior as duas variáveis serão do tipo int.
Não é possível declarar variáveis de diferentes tipos ao mesmo tempo:
int x = 20;
bool y = false;
int x = 10, bool y = false; // não compilará
A inicialização de variáveis mostra o nível de segurança do C#. Nenhuma variável pode
ser utilizada sem primeiro ser inicializada. Em algumas linguagens o compilador
mostraria apenas uma mensagem de alerta, mas o compilador do C# trata essa
situação como um erro. Isso previne a leitura de lixo em memória deixado por outros
programas.
O C# utilizada dois diferentes métodos para assegurar que variáveis sempre serão
inicializadas antes de serem utilizadas:
 Variáveis que são definidas como atributos em classes e estruturas, se não
inicializadas explicitamente, são automaticamente inicializadas com valores
padrões do tipo que foram declaradas no momento que são criadas.
 Variáveis locais de um método devem ser explicitamente inicializadas antes de
qualquer instrução que irá utilizar o valor da variável. A inicialização não precisa
ser feita no momento da declaração da variável, mas o compilador verificará
todos os caminhos possíveis do método e gerará um erro caso o valor da variável
esteja sendo acessado sem ser inicializado previamente.
Vídeo: Variáveis no C#
https://www.youtube.com/watch?v=0dVOVeT0rTg
O código abaixo ilustra as afirmações sobre inicialização de variáveis:

181. Ao compilar o código acima, será gerado o seguinte erro:

182. O erro informa que a variável maiorIdade está sendo utilizada sem ser inicializada, isso
porque caso a idade digitada seja menor que 18 nenhum valor será atribuído à variável,
e não haverá um valor para ser testado na instrução if.
Página8 de 21
 ANTERIOR
 PRÓXIMA
Considere a seguinte instrução:
Pessoa objeto;
No C# essa linha de código declara uma variável que pode apontar para um objeto do
tipo Pessoa, mas o objeto ainda não foi criado, logo a variável não aponta para nada.
Qualquer chamada para um método ou propriedade a partir dessa variável irá gerar um
erro.

183. Para instanciar um objeto
no C# deve ser utilizada a palavra chave new. Primeiro é criada a variável como no
exemplo anterior e logo em seguida é instanciado um objeto;
No final fica assim: Pessoa objeto = new Pessoa();
FÓRUM:
Com o conhecimento adquirido sobre a plataforma .NET e a linguagem C#, cite as
vantagens que você identificou ao utilizar essa tecnologia.
RESUMO:
Vimos nesta unidade algumas das tecnologias que compreendem o .NET Framework,
seu padrão de funcionamento junto ao sistema operacional e os diversos tipos de
arquiteturas possíveis para serem trabalhadas, como Windows e Web, além do
ambiente de desenvolvimento Visual Studio. Também foi apresentada a linguagem C#,
sua sintaxe e suas similaridades com as linguagens Java e C++.
INTRODUCTION to the C# Language and the .NET Framework2013. Disponível em: <
http://msdn.microsoft.com/en-us/library/z1zx9t92.aspx >. Acesso em: 21 fev. 2013.
TIPOS de dados (guia de programação). 2013. Disponível em: <
http://msdn.microsoft.com/pt-br/library/ms173104%28v=vs.80%29.aspx >. Acesso
em: 28 jan. 2013.
APLLICATTION development in visual studio. 2013. Disponível em: <
http://msdn.microsoft.com/en-us/library/vstudio/h8w79z10.aspx >. Acesso em: 28
fev. 2013.
SUGESTÃO DE LEITURA
SHARP, John. Visual C# 2008 - passo a passo. Porto Alegre: Bookman, 2008.
LOUREIRO, Henrique. C# 4.0 com visual studio 2010. Lisboa: FCA, 2011.

184. MSDN. .NET framework application essentials. Disponível em: <
http://msdn.microsoft.com/en-US/library/vstudio/ms172157 >. Acesso em: nov.
2012.
MSDN. Introduction to the C# language and the .NET Framework. Disponível em: <
http://msdn.microsoft.com/library/vstudio/z1zx9t92 >. Acesso em: nov. 2012.
Página9 de 21
 ANTERIOR
 PRÓXIMA
WEB AULA 2
Unidade 1 – Linguagem C# Avançado
VÍDEO AULA 03
Inferência de tipo
Inferência de tipo é utilizada para omitir o tipo da variável no momento da declaração.
Para utilizar esse recurso no C# é utilizada a palavra chave var. O compilador irá
descobrir o tipo da variável a partir do momento da inicialização, por exemplo:
var x = 2;
irá se tornar:
int x = 2;
Saiba mais: A lógica da Inferência
http://pt.wikipedia.org/wiki/Infer%C3%AAncia

185. Depois de compilado, as duas instruções são iguais.
Veja mais um exemplo:
Apenas deve ser atentando para algumas regras. A variável deve ser sempre inicializada no
momento da declaração. De outra forma, o compilador não saberia definir o tipo da variável. O valor
inicializado não pode ser null como visto abaixo:

186. Página10 de 21
 ANTERIOR
 PRÓXIMA
Uma vez declarada e inicializada, o tipo da variável não pode ser alterado. Diferente do
tipo Variant doVisual Basic, a palavra chave var irá apenas retirar a responsabilidade
do desenvolvedor de digitar o tipo da variável.
Considere o código:
Vídeo: Introdução ao Visual Basic .NET
O código acima irá gerar o seguinte erro:

187. O erro informa que não é possível converter implicitamente o tipo string para int, isso
porque a variável x foi inicializada com o valor 2, o compilador inferiu o tipo int para
esta variável, logo não é possível guardar um valor do tipo string.
Escopo de Variáveis
O escopo de uma variável é o local do código onde uma variável pode ser acessada. No
geral, o escopo é determinado pelas seguintes regras:
 Um campo ( variável declarada como membro de classe ) é acessível dentro de
qualquer local da classe;
 Uma variável local de um método é acessível apenas no escopo do método em
que foi declarada, assim que o método termina sua execução a variável é
eliminada;
 Uma variável local declarada dentro de qualquer estrutura de repetição (while,
for) é acessível apenas no escopo do loop.
Problemas de escopo em variáveis locais
É comum programas utilizarem o mesmo nome de variável em diferentes partes do
mesmo. Não existe nenhum problema nesse procedimento se as variáveis forem criadas
em diferentes escopos para que não haja a possibilidade de ambiguidade. O mais
importante é ter em mente que duas variáveis com o mesmo nome não podem estar
no mesmo escopo, como mostrado no exemplo abaixo:

188. O código acima simplesmente imprime na tela os números de 0 a 9, e depois os mesmos
números de 9 a 0, utilizando duas estruturas de repetição for. É importante notar que
a variável i foi declarada duas vezes no mesmo método. Isso é perfeitamente possível
porque a variável i foi declarada em estruturas de repetição diferentes, logo são
variáveis locais dos loops.
Página11 de 21
 ANTERIOR
 PRÓXIMA
Vejamos outro exemplo:

189. Se tentarmos compilar o código acima, teremos o seguinte erro:
A local variable named 'j' cannot be declared in this scope because it would give a different
meaning to 'j', which is already used in a 'parent or current' scope to denote something else
Isso ocorre porque a variável “J” foi declarada antes do bloco for, no escopo do método
Main, e só será eliminada quando o método terminar. A segunda declaração de J está
errada, pois o bloco for está contido no método, dessa forma uma variável J já existe
no escopo e não pode ser declarada novamente.
Problemas de escopo entre variáveis locais e campos
Em algumas situações é possível distinguir duas variáveis com o mesmo nome no
mesmo escopo. Nesse caso o compilador permitirá a criação da segunda variável com
o mesmo nome. Isso porque o C# consegue diferenciar variáveis locais (variáveis
declaradas dentro de métodos) de campos ( variáveis declaradas a nível de classe ).
Consideremos o seguinte código:

190. Saiba como encontrar erros através do Visual Studio:
http://msdn.microsoft.com/pt-br/library/vstudio/sc65sadd.aspx
O código acima irá compilar mesmo tendo duas variáveis J no escopo do método Main.
Note que a primeira variável J foi declarada a nível de classe e só será eliminada quando
a classe for destruída ( quando o método Main terminar sua execução e o programa
terminar ). No exemplo, a variável J declarada dentro do método Main esconde a
variável declarada a nível de classe, e a saída do programa será o número 50.
Mas e se precisarmos acessar a variável declarada no nível de classe? Nesse caso é
necessário utilizar o nome da classe para informarmos ao compilador que a variável
que será acessada está declarada a nível de classe, como mostrado no código a seguir:
A saída do programa será o número 20.
Página12 de 21
 ANTERIOR
 PRÓXIMA
Constantes
Como o próprio nome diz, uma constante é uma variável cujo valor não pode ser
alterado durante seu ciclo de vida. Para declarar uma constante basta utilizar a palavra
chave “const” na declaração da variável. Uma constante sempre deve ser inicializada
no momento de sua criação:

191. const int a = 100;
Constantes tem as seguintes características:
 Devem ser inicializadas no momento da declaração e seu valor não pode ser
alterado;
 O valor de uma constante deve ser computado em nível de compilação, isso quer
dizer que não é permitido inicializar uma constante com o valor de uma variável;
 Constantes são implicitamente estáticas e não é permitido utilizara palavra chave
static em sua declaração;
Existem pelo menos 2 vantagens na utilização de constantes em um programa:
 Constantes ajudam a evitar erros. Se em algum local do programa houver a
tentativa de alteração do valor inicializado na constante o compilador apresentará
um erro, não permitindo tal ação.
 Constantes tornam os programas mais flexíveis para alteração, pois vários locais
do programa podem acessá-las, e uma simples alteração em seu valor pode
alterar o comportamento do programa inteiro, poupando tempo e evitando
inconsistências em sua modificação.
VÍDEO AULA 04
Tipos de dados pré-definidos no C#
Agora que conhecemos variáveis e constantes, veremos melhor os tipos de dados
disponíveis no C#. Notaremos que o C# é muito mais rígido quanto à utilização de tipos
do que outras linguagens de programação.
Tipos por Valor e Tipos por Referência
Antes de descobrir os tipos de dados disponíveis no C#, é importante entender que o
C# contém duas categorias de tipos de dados:
 Tipos por Valor
 Tipos por Referência
A principal diferença entre as 2 categorias é que os tipos por valor guardam o valor
diretamente, enquanto os tipos por referência guardam uma referência para onde o
valor está alocado. Tipos de dados que trabalham por valor no C# são basicamente os
tipos menos complexos, como o int, float e bool.
Considere as variáveis abaixo:

192. int i = 123;
string s = “olá mundo”;
Em memória, a representação das variáveis acima funciona dessa forma:
Ou seja, i guarda o valor no próprio local de memória, já s aponta para outro local de
memória que contém o valor.
Página13 de 21
Tipos por valor são alocados em um local de memória chamado de stack, e os tipos
por referência são alocados no heap. É importante saber quando um tipo trabalha por
valor ou por referência pela diferença presente na atribuição de cada uma dessas
categorias. Por exemplo, int é um tipo por valor, isso quer dizer que o código abaixo
irá resultar em dois locais de memória alocando o valor 50:
int i = 50;
int j = i;
Saiba o que são ponteiros na programação:
http://pt.wikipedia.org/wiki/Ponteiro_%28programa%C3%A7%C3%A3o%29
Porém, considere o código abaixo:

193. O código instância um objeto da classe Coordenada. É importante entender que toda
classe no C# é um tipo que trabalha por referência. No código acima apenas um objeto
do tipo Coordenada foi criado. As duas variáveis obj e obj2 apontam para o mesmo
local em memória onde está alocado o objeto. Como obj e obj2 são variáveis de um
tipo que trabalha por referência, a declaração das mesmas não cria um novo objeto,
apenas permite apontar para um objeto do tipo Coordenada. Para criar um objeto é
necessário utilizar a palavra chave new. Como obj e obj2 apontam para o mesmo
objeto, qualquer alteração feita em obj irá alterar obj2, e vice-versa.
Seguindo o comportamento descrito, o código mostrado anteriormente retornará os
valores 30 e 50 respectivamente.
Quando uma variável é de um tipo que trabalha por referência é possível indicar que
ela não aponta para nenhum objeto atribuindo o valor null:
Coordenada x = null;
Qualquer acesso a um membro do tipo Coordenada pela variável acima irá gerar uma
exceção em tempo de execução.
O CLR implementa um algoritmo para identificar se um objeto contém referências para
o mesmo. Caso não exista nenhuma variável apontando para o objeto ele é destruído
e a memória alocada é liberada para uso novamente. Essa tarefa é executada por um
mecanismo chamado Garbage Collector.
O C# foi arquitetado dessa forma pois tipos primitivos simples como o int e bool têm
uma melhor performance trabalhando por valor. Já tipos complexos que podem conter
vários campos, como as classes, têm um melhor desempenho trabalhando por
referência.
Página14 de 21
 ANTERIOR
 PRÓXIMA
Tipos por Valor pré-definidos
Como mencionado na unidade 1, os tipos de dados básicos pré-definidos reconhecidos
pelo C# não são exatamente da linguagem, mas sim do .net Framework. Por exemplo,
quando declaramos um int no C#, na verdade estamos criando uma instância da struct
System.Int32 definidos pelo CTS.

194. Veremos a seguir uma tabela de mapeamento dos tipos por valor do C# para os tipos
por valor definidos no .net Framework:
Tipos por Referência pré-definidos
O C# contém dois tipos de dados pré-definidos que trabalham por referência, object e
string como descrito na tabela abaixo:
O tipo object
Muitas linguagens de programação e hierarquia de classes contêm um tipo base, cujo
todos os outros tipos de dados derivam. O C# não é exceção. No C# o tipo object é o
tipo base para todos os outros tipos de dados definidos na linguagem, pré-definidos ou
criados pelo usuário. Isso quer dizer que o tipo object pode ser utilizado para algumas
situações:
 Para apontar para objetos de qualquer tipo de dados, por exemplo, é possível
empacotar um objeto que trabalha por valor para movê-lo do stack para o heap;
 Útil para trabalhar com reflexão, técnica utilizada quando precisamos trabalhar
com objetos de tipos desconhecidos;

195.  O tipo object implementa alguns métodos básicos, como o Equals, GetType e
ToString, uteis em diversas situações e disponíveis para todos os objetos no C#.
Considere o código abaixo:
Vídeo: Tipo Object
https://www.youtube.com/watch?v=KFE66HfPUFk&feature=youtu.be
Note que foram atribuídos valores do tipo int, string e DateTime em variáveis do tipo
object, isso é perfeitamente possível pois todos os tipos no C# herdam de object.
VÍDEO AULA 05
Página15 de 21
 ANTERIOR
 PRÓXIMA
O tipo string
A palavra chave string no C# é mapeada para o tipo System.String do .net Framework.
Esse é um tipo de dados muito flexível em sua utilização, operações como concatenação
e cópia são efetuadas naturalmente.
Apesar da forma de atribuição, string é um tipo que trabalha por referência.
Internamente o tipo string é alocado no heap, e não no stack, e quando uma variável
string é atribuída a outra são criadas duas referências para o mesmo objeto. Apesar de
ser um tipo por referência, a string tem alguns comportamentos diferentes dos outros
tipos que pertencem a essa categoria. Por exemplo, quando uma string é modificada é
criado um novo objeto para representar essa string, deixando a primeira string intacta.
Considere o seguinte código

196. Vídeo: Concatenação de Strings
http://youtu.be/ZcU56qW8M4U
A saída desse programa será:
Alterar o valor da variável z1 não tem nenhum efeito na variável z2, ao contrário do
que seria esperado de um tipo que trabalha por referência. O que aconteceu foi que ao
atribuir o valor “isso é uma string” na variável z1, um novo objeto foi criado. Quando
z2 foi inicializada com o valor de z1, uma referência ao mesmo objeto apontado por z1
foi passada para z2. Quando o valor da variável z1 foi alterado, ao contrário de alterar
a string original, um novo objeto foi criado e alocado no heap para o novo valor, e a
referência de z1 foi alterada para apontar para esse novo objeto. z2
continuou apontando para a string original.
Literais do tipo string são criados utilizando aspas duplas (“ “), o uso de aspas simples
(‘ ‘) no C# é utilizado para criar literais do tipo char e causam erro em tempo de
compilação se tentarem ser atribuídas a variáveis do tipo string:

197. Página16 de 21
 ANTERIOR
 PRÓXIMA
 Estruturas Condicionais
 Estruturas condicionais permitem que um bloco de código seja executado apenas
se uma ou várias condições forem atendidas. O C# tem duas estruturas para
trabalhar com condições, a estrutura if, que permite testar se uma condição
específica foi atendida, e o bloco switch, que permite testar uma expressão com
um diferente número de valores.
 Estrutura condicional if
 O C# herdou a construção if...else do C e C++. A sintaxe dessa estrutura é muita
intuitiva para qualquer desenvolvedor que já tenha programado com uma
linguagem procedural:

 Se apenas uma instrução será executada em qualquer uma das partes
condicionais, as chaves não são necessárias.

198. 
 Se necessário, um bloco if pode não ter uma bloco else. Também é permitido
combinar cláusulas else if para testar múltiplas condições:
 Exemplo:

199. 
 Não há limite para o número de else if adicionadas a um bloco if
 Página17 de 21
Estrutura condicional switch
A estrutura switch..case é familiar para programadores C++ e Java. É muito útil para
comparar um argumento com várias opções.
Para criar o bloco é necessário passar um argumento para o switch seguido de uma
série de cláusulascase. Quando a expressão da cláusula switch encontra o respectivo
case o código segue imediatamente para aquele case. Para cada case deve haver a
instrução break para que o bloco pare de ser executado. Também é possível utilizar um
case padrão caso nenhum deles seja executado.
O exemplo a seguir testa o valor da variável x:

200. Note que os valores dos blocos case são constantes, variáveis não são permitidas.
Estruturas de repetição
O C# disponibiliza quatro estruturas de repetição ( for, foreach, while, do...while) que
permitem executar um bloco de código quantas vezes for preciso até uma certa
condição ser em encontrada. O for, while e do...while são basicamente iguais aos
encontrados no c++.
Estrutura de repetição for

201. O for é um mecanismo para iterar sobre um loop onde é testado se uma condição ainda
é válida para poder ser executado novamente. A sintaxe é a seguinte:
For(inicializador; condição; iterador)
Instruções
Onde:
 O inicializadoré uma expressão a ser executada antes do loop iniciar ( geralmente
iniciando uma variável para servir como contador);
 A condição é a expressão a ser testada em cada iteração antes do loop ser
executado;
 O iterador é uma expressão a ser executada depois de cada iteração ( geralmente
é um incremento do contador).
A iteração termina quando a expressão retorna false.
O for é um excelente loop para repetir um bloco de código em um determinado número
de vezes. O exemplo seguinte mostra um uso típico de um bloco for, imprimindo na
tela todos os números de 0 a 99:
Vídeo: ‘foreach’, uma alternativa ao ‘for’:
https://www.youtube.com/watch?v=Ys3_QVaAP5w
No exemplo acima foi declarada uma variável i do tipo int e inicializada com o valor 0.
Essa variável será utilizada como contador para o loop. A condição testa se o contador
é menor que 100. Essa condição retornará true enquanto o contador for menor que
100. O contador é incrementado em cada iteração.
O exemplo retornará o seguinte resultado:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

202. 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
Página18 de 21
 ANTERIOR
 PRÓXIMA
Estrutura de repetição while
A estrutura de repetição while é idêntica ao while do C++ e Java. O while tem uma
sintaxe mais simples que o for pois é necessário apenas uma expressão para utilizá-lo:
While(condição)
Instruções
Diferente da estrutura for, o while é geralmente utilizado para repetir um bloco de
código por um número de vezes desconhecido no momento que o loop começa. Uma
variável de controle é utilizada e alterada no interior da estrutura para que a iteração
termine:

203. Estrutura de repetição do... while
O do...while funciona como o while, mas sua condição de parada é testada depois do
loop ser executado. Isso quer dizer que o bloco de código será executado pelo menos
uma vez:

204. Página19 de 21
 ANTERIOR
 PRÓXIMA
Estrutura de repetição foreach
O foreach é uma estrutura que itera sobre cada objeto de uma coleção, não sendo
necessário trabalhar com índices. Para que a estrutura foreach consiga trabalhar com
uma coleção ela deve implementar a interface IEnumerable. Como exemplos de
coleções no C# podemos citar arrays, as classes do namespace System.Collection e
coleções criadas pelo usuário.
Considere o seguinte código:

205. Saiba mais: O que são Interfaces
http://www.linhadecodigo.com.br/artigo/2999/entendendo-interfaces-com-csharp.aspx
O exemplo mostra uma iteração em um vetor de string utilizando a estrutura foreach.
Cada vez que é executado o loop a variável x é alterada para conter um elemento do
vetor.
A inferência de tipo é muito utilizada em estruturas foreach:
A variável x será do tipo string pois o foreach está iterando sobre um vetor de strings.
Um ponto importante que deve ser lembrado é que os itens da coleção não podem ser
modificados dentro de uma estrutura foreach:

206. O código mostrado não irá compilar, pois x não pode ser modificado.
FÓRUM:
Como vimos nesta unidade a linguagem C# tem duas formas básicas de tipos de dados,
por valor e referência. Em sua opinião qual o cenário ideal para utilizar cada um desses
tipos?
RESUMO:
Nesta unidade foram apresentados conceitos primordiais para desenvolver aplicativos
utilizando todas as vantagens que a linguagem C# pode proporcionar. Vimos que
existem diferenças na escolha do tipo de dados e como esses tipos são gerenciados em
memória. Também foram mostradas as estruturas de repetição e condicionais
disponíveis na linguagem, sua sintaxe e suas similaridades com a linguagem C.
Página20 de 21
 ANTERIOR
 PRÓXIMA
BUILT-in types table (C# reference). 2013. Disponível em: <
http://msdn.microsoft.com/en-us/library/ya5y69ds.aspx >. Acesso em: 28 fev. 2013.

207. SUGESTÕES DE LEITURA
SHARP, John. Visual C# 2008 - passo a passo. Porto Alegre: Bookman, 2008.
LOUREIRO, Henrique. C# 4.0 com visual studio 2010. Lisboa: FCA, 2011.
MSDN. .NET framework application essentials. Disponível em: <
http://msdn.microsoft.com/en-US/library/vstudio/ms172157 >. Acesso em: nov.
2012.
MSDN. Introduction to the C# language and the .NET Framework. Disponível em: <
http://msdn.microsoft.com/library/vstudio/z1zx9t92 >. Acesso em: nov. 2012.
Página21 de 21
 ANTERIOR
TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 2 – Introdução ao ASP.NET
VÍDEO AULA 01
Visão geral de uma aplicação WEB
Para começar a criar uma aplicação WEB primeiro devem estar claros três importantes
tópicos:
 Como funciona uma requisição HTTP;
 O que é o HTML e como ele funciona;
 Como as requisições HTTP são tratadas pelo IIS, o servidor WEB da Microsoft;
Mesmo com o ASP.NET facilitando a vida do desenvolvedor como nunca foi antes,
entender os mecanismos citados é muito importante para aproveitar ao máximo cada
mecanismo do desenvolvimento para Internet.

208. Requisições HTTP
O protocolo de comunicação utilizado pelos browsers para se comunicar com qualquer
site é chamado de Hypertext Transfer Protocol (HTTP).
O HTTP permite que um cliente (navegador) requisite uma página para o servidor
utilizando métodos específicos para cada situação. Entre os mais importantes estão os
métodos GET e POST.
A URL (Uniform Resource Locator) acima é utilizada para recuperar os dados do produto
cujo identificadoré o 5. Quando os parâmetros de uma requisição são enviados na URL,
como acontece com o código no caso acima, é utilizada uma requisição do tipo GET.
Quando uma requisição pode ser executada várias vezes (vários usuários irão acessar
essa mesma página) é recomendado que se use o método GET.
O método POST é recomendado para ser utilizado em formulários HTML como, por
exemplo, na inserção de uma nova notícia em uma página. Como essa operação irá
alterar o estado de um recurso no servidor deve ser evitado utilizaro método GET, pois
essa operação poderia ser executada facilmente pela URL, o que poderia causar falhas
de segurança. Também deve ser observado que uma requisição feita utilizando o
método POST não altera o formato da URL, pois os parâmetros são enviados no corpo
da requisição HTTP.
Hypertext Markup Language
O HTML é uma linguagem de marcação utilizada para formatar documentos, e todos os
navegadores conseguem interpretar HTML.
A primeira versão do HTML utilizada em grande escala foi a versão 2.0. A versão 3.2
introduziu novos recursos como as tabelas e applets. Atualmente o HTML se encontra

209. na versão 5 e promete revolucionar a forma como documentos são apresentados na
WEB, incluindo suporte nativo para áudio, vídeo e outros recursos.
Ao trabalhar com ASP.NET veremos que ele gera a maior parte do código HTML que
teríamos que criar manualmente, mas é importante entender como funciona o HTML
para ter um maior domínio sobre a página gerada.
Por exemplo, o código HTML a seguir renderiza uma página com uma lista de opções e
um botão:
Página1 de 21
A figura abaixo mostra a página renderizada pelo navegador:
Vídeo: Introdução ao HTML 5
http://youtu.be/CHlp835aYz0

210. Internet Information Services (IIS)
No geral toda arquitetura voltada para aplicações WEB funciona da mesma forma. Não
importa que hardware ou software seja utilizado, sempre será necessário algum
software no servidor monitorando a porta 80 para recuperar as requisições feitas pelo
cliente. Quando uma requisição é detectada, é trabalho do servidor responder da forma
esperada.
No Windows o servidor responsável por receber requisições é o IIS, apesar de
inicialmente não ser importante conhecê-lo a fundo, é interessante saber como ele
funciona para fins de debug, testes e publicação das aplicações desenvolvidas em
ASP.NET.
Para entender o papel do IIS, veremos a seguir como funciona uma arquitetura cliente-
servidor:
Inicialmente a máquina cliente faz uma requisição para o servidor web pedindo o
recurso clientes.aspx. O IIS juntamente com o módulo do ASP.NET interpreta a página
e responde HTML para o cliente, a linguagem que o navegador consegue interpretar.

211. Isso mostra que qualquer página desenvolvida em ASP.NET não será executada no lado
cliente, pois o navegador não consegue interpretar a página, para essa tarefa é
necessário o IIS.
VÍDEO AULA 02
Página2 de 21
 ANTERIOR
 PRÓXIMA
Introdução ao ASP.NET
O ASP.NET é o framework da Microsoft para criar aplicações para Internet. É o sucessor
do antigo ASP e sua principal vantagem é ter disponível todos os recursos do .net
Framework, como segurança, código gerenciado e as diversas classes já existentes.
O ASP.NET é totalmente integrado ao Visual Studio. Com isso nunca foi tão fácil
desenvolver para WEB. O Visual Studio provê ferramentas de design, uma toolbox para
trabalhar com controles e recursos poderosos para debug.
A seguir veremos algumas das vantagens do ASP.NET sobre o antigo ASP:
 Melhor performance: O código desenvolvido no ASP.NET é compilado pelo CLR, que
fornece otimização nativa do código através de um recurso chamado Just-In-Time, que
compila apenas os blocos de código necessários;
 Flexibilidade: Todas as classes do .net Framework podem ser acessadas através de uma
aplicação ASP.NET. Além disso, qualquer linguagem disponível no .NET pode ser
utilizada;
 Configuração simplificada: Toda configuração de uma aplicação em ASP.NET é guardada
em formato XML, logo é muito fácil fazer alterações, como por exemplo alterar uma string
de conexão. Portabilidade
Existem diversas formas de se criar aplicações em ASP.NET. Cada uma delas segue
padrões para fins específicos, entre elas está o ASP.NET Web Forms, tecnologia que
veremos a seguir.

212. ASP.NET Web Forms
O ASP.NET Web Forms é um padrão de desenvolvimento baseado em formulários. É
similar ao desenvolvimento para aplicações Windows, contendo controles e tratamento
de eventos, com isso o Web Forms não traz um impacto tão grande para
desenvolvedores que sempre trabalharam com aplicações desktop e nunca tiveram
contato com desenvolvimento para WEB.
Como vantagens do Web Forms, podemos citar:
 É muito produtivo pois conta com uma grande quantidade de controles prontos para
serem utilizados;
 Baseado em eventos, fácil para entrada de desenvolvedores Windows;
 Gera grande parte do código HTML e Javascript, tirando a responsabilidade do
desenvolvedor;
 Separa o código servidor do código cliente, evitando confusão na manutenção;
 Contém recursos para reaproveitamento de código como Master Pages e User Controls,
que serão discutidos mais a frente.
Criando a primeira aplicação em ASP.NET Web Forms
Vamos criar nossa primeira aplicação em ASP.NET utilizando o Visual Studio. Para todos
os exemplos desta aula será utilizado o Visual Studio 2012 Express for WEB que pode ser
baixado no link abaixo:
http://www.microsoft.com/visualstudio/eng/downloads#d-express-web
Para criar um projeto abra o Visual Studio e clique no menu File > New > Project como
mostrado na figura abaixo:
Em seguida deve ser selecionado o tipo do projeto. Em templates selecione a opção
WEB e na direita ASP.NET Web Forms Application:

213. Na mesma tela também podem ser alterados o nome do projeto e da solução, e onde
eles serão salvos.
Página3 de 21
 ANTERIOR
 PRÓXIMA
Veremos a seguir alguns dos diretórios e arquivos adicionados automaticamente no
projeto:
App_Data: Pasta destinada a conter arquivos de dados, como arquivos xml, txt, excel,
bancos de dados, etc.
Content: Pasta que contém todos os elementos que compõe o layout de uma página,
como arquivos CSS e imagens.
Images: Imagens que não fazem parte do layout das páginas e sim do conteúdo.
Scripts: Bibliotecas em são alocadas nesta pasta, como o JQuery e Modernizr.
Arquivos .aspx: páginas (web forms) adicionadas ao projeto, podem ser excluídas se
necessário. ASPX é a extensão padrão de páginas ASP.NET.
Arquivos .config: Arquivos de configuração da aplicação, como pacotes de estilo e
javascript que serão utilizados, strings de conexão, configurações de autenticação e
outros recursos.
Site.Master: Arquivo que representa uma Master Page, recurso utilizado para
reaproveitamento de código, será abordado em detalhes posteriormente.

214. Saiba mais: O que é o JQuery
http://www.codigofonte.net/dicas/javascript/310_jquery-o-que-e-e-como-usar
Saiba mais: O que é o Modernizr
http://maujor.com/tutorial/css3-html5-modernizr.php
Criando a primeira página
Para criar uma página clique com o botão direito no nome do projeto, logo depois em
Add New Item, selecione a opção Web Form. Daremos o nome de exemplo.aspx:
Dica: Caso não tenha sido dado um nome para o projeto no momento de sua criação o
nome padrão será WebApplication1.
Ao adicionar o Web Form deve ser observado:
 Foi adicionado um arquivo exemplo.aspx, nesse arquivo deve ser colocado apenas o
código necessário para montar a apresentação de conteúdo para o usuário (basicamente
HTML com algum código de servidor).
 O arquivo exemplo.aspx.cs terá todo o código de servidor para tratar a requisição do
usuário. Basicamente é uma classe com métodos para receber e tratar eventos.
Veremos a seguir o código adicionado no arquivo exemplo.aspx:

216. Página4 de 21
 ANTERIOR
 PRÓXIMA
No ASP.NET todo HTML que poderá ser manipulado no servidor precisa conter a
propriedade runat=”server”. Deve ser observado que todo o conteúdo de uma página
ASP.NET é contido dentro de uma tag com o atributo runat=”server”, ou seja,
a página é um grande formulário, daí o nome Web Forms.
Vamos testara página. Para isso clique com o botão direito na página aspx e em seguida
em View in Browser.Será exibida uma página em branco. O mais importante nesse
ponto é ver o código fonte da mesma:

217. Sobre o código:
Podemos notar que foi apenas enviado para o cliente o conteúdo estático (HTML) e
nenhuma instrução de servidor. Da página aspx criada para o código fonte gerado
houve apenas uma diferença, a adição de uma div identificada pela classe
aspNetHidden. Esse é um recurso chamado View State muito utilizado no modelo Web
Forms e será discutido em um capitulo específico.
Entendendo o ciclo de vida de uma página
É importante entender que, quando uma página aspx é requisitada vários processos
são executados, entre eles alguns eventos e mecanismos para renderizar os controles
do asp.net adicionados na página.
Para poder rastrear o que acontece com uma página quando ela é requisitada basta
adicionar a propriedade Trace nas configurações da página como mostrado abaixo:

218. Depois basta carregar a página e serão exibidas algumas informações como os eventos
que foram executados e controles renderizados:
Página5 de 21
 ANTERIOR
 PRÓXIMA
Tratando Eventos
Eventos são métodos especiais que são executados quando uma ação é disparada. Uma
página ASP.NET pode conter quantos eventos forem necessários,
Um dos eventos mais utilizados de uma página é o Page_Load. Esse evento é executado
quando uma página é requisitada e carregada.
Para entender como o evento Page_Load funciona adicione a seguinte tag em uma
página aspx:

219. Mas e se quisermos mostrar essa informação apenas quando o usuário efetuar uma
ação, como o clique de um botão?
Adicione as seguintes tags em uma página aspx:
Vídeo: Controlando comportamentos com eventos:

220. http://youtu.be/_hIZiJBpeoc
Página6 de 21
 ANTERIOR
 PRÓXIMA
Entendendo o PostBack
Verificamos anteriormente que um Web Form nada mais é que um grande formulário
contendo todos os elementos da página. Mas o que acontece quando um desses
elementos é acionado? Por exemplo, quando um botão é pressionado?
No modelo Web Form todo controle que é adicionado na página e pode disparar um
evento utiliza um recurso da arquitetura chamado PostBack. Um PostBack nada mais é
que um POST para a mesma página, ou seja, uma requisição para o servidor para a
mesma página em que se encontra o controle.
Veremos passo a passo como funciona esse processo:
Figura - Esquema de Postback no ASP.NET
Fonte: How... (2013)
1- O usuário acessa a página que irá interagir;
2- Algum controle é utilizado. Exemplo: Um botão é clicado, um campo de texto tem
o conteúdo alterado, uma linha de um componente de dados é selecionada;

221. 3- Um evento é disparado automaticamente (utilizando Javascript), a página é enviada
para o servidor;
4- O servidor carrega a mesma página (todo o ciclo de vida é realizado novamente) e
o evento é tratado.
5- A página é enviada para o cliente
É importante entender que nem toda requisição para o servidor é um PostBack. Quando
um usuário acessa a página diretamente, ou um redirecionamento é executado,
nenhuma dessas ações são consideradas PostBack.
Veremos no exemplo a seguir como descobrir se uma requisição foi efetuada através
de um postback:
ASPX:

222. Ao executar a página com o código acima poderemos notar que apesar da data atual
ser atribuída ao parágrafo “data” no evento Page_Load essa informação não é
apresentada na página quando ela é carregada. Isso acontece por que foi adicionada
uma estrutura condicional que testa se a página foi solicitada através de um PostBack
ou não.
A propriedade IsPostBack é uma propriedade booleana da página que tem o propósito
de informar se a página está sendo solicitada através de um PostBack. Se o acesso tiver
sido realizado diretamente, ou seja, fruto de um redirecionamento a propriedade terá
o valor False, caso contrário True.
Também é importante notar que no momento que o botão for pressionado o evento
Page_Load será disparado antes do evento btnTestar_Click. Isso acontece porque o
ciclo de vida da página é executado normalmente, não importando se é um PostBack
ou não.
Página7 de 21
 ANTERIOR
 PRÓXIMA
Mantendo o estado da página com View State
Quando uma página da web é solicitada ela é enviada para o cliente em seu estado
inicial. Ao interagir com a página o usuário pode modificar o estado dela alterando
algumas informações, como por exemplo, digitando dados em um formulário.
Ao enviar os dados para o servidor ele irá validar as informações e caso alguma coisa
esteja incorreta a página deverá ser enviada para o cliente novamente para que corrija
as informações incorretas. Mas um detalhe deve ser levado em conta, ao enviar a
página para o cliente o estado da página deve ser mantido, ou seja, todos os dados que
ele informou devem estar presentes na página, caso contrário o usuário terá que
informar todos os dados novamente.

223. O ASP.NET conta com um recurso chamado de ViewState para manter o estado da
página, ou seja, quando um formulário é submetido para o servidor, ele retorna para o
cliente com todos os dados informados sem que nenhum esforço do programador seja
necessário. Mas como isso funciona?
Considere a seguinte página:
ASPX:

224. Ao clicar no botão “Validar” com um valor inválido no TextBox ( no exemplo: NaN )
teremos o seguinte resultado:
Note que o valor do TextBox foi validado no servidor, a página foi respondida para o
cliente e o valor do TextBox foi mantido. Isso acontece porque toda página em ASP.NET
guarda o estado da página em um campo hidden para que os dados não sejam perdidos
em cada requisição. Se observarmos o fonte da página iremos encontrar uma tag com
o padrão abaixo:
Página8 de 21
 ANTERIOR
 PRÓXIMA
View State e seu custo

225. Apesar do View State ser um poderoso recurso ele tem seus custos:
 Em cada página visitada os dados de todos os controles são coletados e serializados em
uma string codificada na base64. Quando um postback é efetuado é executado o processo
inverso para resgatar as informações e atualizar os respectivos controles, gerando custo
de processamento para o servidor;
 O campo hidden que guarda os dados serializados gera informações extras que devem
ser enviadas para o cliente. Dependendo do tamanho do View State e da conexão do
cliente isso pode custar alguns segundos de download.
Saiba mais: Codificação Base64
http://pt.kioskea.net/contents/base/base64.php3
Redirecionamentos
Quando falamos de redirecionamentos deve ficar claro que eles
podem ser feitos em 2 locais:
1. Cliente: Através de Javascript;
2. Servidor: Pelo próprio ASP.NET
Quando um redirecionamento é executado do lado do servidor o recurso respondido
não é o recurso solicitado.
Como exemplo podemos citar uma página que necessita de autenticação. Se o usuário
não estiverlogado o mesmo deve ser redirecionado para uma página de login. Veremos
essa situação no exemplo abaixo:
CS:

226. No exemplo acima foi utilizada a instrução “Response.Redirect” para redirecionar o
usuário para a página “login.aspx” caso o usuário não esteja logado.
É importante notar que caso o usuário requisite o endereço “restrito.aspx” ele terá como
retorno a página “login.aspx”, isso porque o navegador fica ciente no redirecionamento
pois o servidor retorna um status 302 ( Movido Temporariamente ) como mostrado
abaixo:
Saiba mais: Lista de códigos de status HTTP
http://pt.wikipedia.org/wiki/Anexo:Lista_de_c%C3%B3digos_de_status_HTTP
FÓRUM:

227. Em sua opinião quais são as vantagens de uma aplicação WEB sobre uma aplicação
desktop?
Quais os desafios ao se construir uma aplicação para Internet, levando em consideração
o tipo de arquitetura e a grande quantidade de variáveis existentes nesse tipo de
aplicação?
RESUMO:
Apresentamos nesta unidade os processos e tecnologias envolvidas na construção de
uma aplicação voltada para a Internet.
Foi introduzida a plataforma ASP.NET Web Forms, que nada mais é que um ambiente
para construção de aplicações WEB, vimos que seu modelo de desenvolvimento é muito
parecido com o padrão de construção de aplicações para desktop. Também conhecemos
alguns recursos importantes da plataforma, como o PostBack e View State.
Página9 de 21
 ANTERIOR
 PRÓXIMA
NETWORKS. 2013. Disponível em: < http://jdjua.com/networking.htm >. Acesso em:
28 fev. 2013.
HOW postback events work in ASP.NET. 2013. Disponível em: <
http://www.howtoasp.net/asp-net-tutorials/how-postback-events-work-in-asp-net/ >.
Acesso em: 28 fev. 2013.
SUGESTÕES DE LEITURA
SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML. São Paulo: Novatec, 2008
SHEPERD, George. Microsoft ASP.NET 4 Step by Step. Redmond: Microsoft Press, 2010

228. MSDN. ASP.NET Reference. Disponível em: < http://msdn.microsoft.com/pt-
br/library/9k6k3k4a%28VS.85%29.aspx >. Acesso em: nov. 2012.
W3C. Architecture of the World Wide Web, Volume One. Disponível em: <
http://www.w3.org/TR/2004/REC-webarch-20041215 >. Acesso em: nov. 2012
Página10 de 21
 ANTERIOR
 PRÓXIMA
WEB AULA 2
Unidade 2 – Introdução ao ASP.NET
VÍDEO AULA 03
ASP.NET e Banco de Dados
Uma das grandes vantagens de se trabalhar com o ASP.NET é a grande biblioteca de
classes já disponíveis no momento que um projeto é iniciado, isso porque a base do
ASP.NET é o .net Framework. Além de uma ampla variedade de recursos para tratar
controles de entrada e saída de dados e requisições HTTP o .net Framework inclui uma
biblioteca para conectar e manipular uma grande variedade de bancos de dados,
chamada de ADO.NET (ActiveX Data Objects).
O ADO.NET contém classes para conectar, manipular e consumir um banco de dados
de forma rápida e simples.
Existem basicamente dois namespaces que proveem acesso à base de dados no
ADO.NET:
 System.Data.OleDb: Permite conectar em uma grande variedade de bancos de dados.

229.  System.Data.SqlClient: Provedor específico para trabalhar com o banco de dados Sql
Server.
Saiba mais: Visão geral do Sql Server
https://www.microsoft.com/sqlserver/pt/br/product-info/overview-capabilities.aspx
Os 2 namespaces são muito parecidos no que se referem a nomenclatura das classes e
como elas deve ser utilizadas. Vejamos o esquema a seguir:
Figura - Namespaces do ADO.NET
Fonte: Adaptado de Marcorati (2013)
Podemos notar no esquema apresentado a similaridade entre as classes disponíveis
para os 2 namespaces. Isso implica em uma facilidade para migrar de um namespace
para outro se for necessário.
Iremos focar no namespace System.Data.SqlClient para os exemplos posteriores.
Utilizaremos o banco de dados SQL Server 2008 R2 Express que pode ser baixado
facilmente na página da Microsoft pelo link abaixo:
http://www.microsoft.com/pt-br/download/details.aspx?id=23650
Página11 de 21

230.  ANTERIOR
 PRÓXIMA
Veremos a seguir para que servem algumas das classes mais importantes do
namespace System.Data.SqlClient:
 SqlConnection: É a classe responsável por gerenciar a conexão com o banco de dados.
Através dessa classe é possível abrir, fechar e verificar o estado da conexão com o banco.
 SqlCommand: Classe responsável por configurar e executar instruções SQL contra o
banco.
 SqlDataReader: Responsável por fornecer um mecanismo para consultar registros do
banco de dados. Trabalha de forma conectada, ou seja, enquanto a leitura for necessária
a conexão precisa estar aberta.
 SqlDataAdapter: Representa um conjunto de comandos para trabalhar com objetos do
tipo DataSet.
DataSet
Veja no vídeo abaixo os detalhes de como trabalhar com o DataSet:
http://youtu.be/3awsqUSN1YQ
O DataSet faz parte de um modelo do ADO.NET chamado de “Modelo Desconectado”. O
DataSet permite uma aplicação ter a representação do banco de dados em memória
sem a necessidade de estar conectado. Isso quer dizer que uma aplicação pode fazer
as modificações necessárias em memória para posteriormente replica-las ao banco,
permitindo dessa forma que o banco tenha mais conexões disponíveis para serem
utilizadas.
Veremos a seguir como trabalhar com algumas das classes descritas considerando a
seguinte tabela:
Nome: tbCliente
Colunas: codigo (int), nome (varchar), cpf (varchar), dataNascimento (datetime).
O código abaixo insere um cliente na tabela:
Classe Cliente:

232. Página12 de 21
 ANTERIOR
Entendendo o código:
Primeiramente foi criada uma string que contém todos os dados para abrir uma
conexão, como caminho do servidor, nome do banco e opcionalmente usuário e senha.
É importante notar que existem vários padrões para construção de uma string de
conexão. Para saber o formato de string de conexão que deve ser utilizada para um
banco específico acesse o site:
http://www.connectionstrings.com

233. Logo depois foi instanciado um objeto do tipo SqlConnection. Como vimos
anteriormente esse objeto irá abrir a conexão com o banco de dados. O Objeto do tipo
SqlCommand foi criado com a instrução SQL para persistiro cliente no banco de dados,
foram utilizados parâmetros para receber os dados.
A instrução é executada através do método ExecuteNonQuery. Esse método retorna o
número de linhas afetadas no banco de dados e, caso algum erro ocorra, o método
Inserir retornará o valor -1.
Lendo dados da tabela
Considerando a mesma tabela do exemplo anterior veremos como trazer dados do
banco para a aplicação:

235. Entendendo o código:
Nesse exemplo foi utilizado o método ExecuteReader que retorna um objeto do tipo
SqlDataReader que permite ler dados do banco. O SqlDataReader contém um método
chamado Read que retorna um valor booleano True enquanto existirem linhas para
serem lidas, dessa forma podemos facilmente utilizar uma estrutura de repetição para
ler todos os valores retornados pela instrução executada.
VÍDEO AULA 04
Página13 de 21
 ANTERIOR
 PRÓXIMA
Entity Framework

236. Vimos anteriormente que é muito fácil trabalhar com banco de dados utilizando o
ADO.NET. O problema do código anterior é que ele trabalha com dados e não com
objetos.
Atualmente a maioria dos bancos utilizados comercialmente trabalha de forma
relacional e seu modelo se baseia basicamente em dados distribuídos em tabelas, linhas
e colunas.
O C# guarda as informações em objetos, logo para enviar esses dados para uma base
relacional deve ser feito o mapeamento desses dados. Esse trabalho pode gerar muito
código e custar um tempo elevado de desenvolvimento.
Para resolver esse problema surgiu o Entity Framework, responsável por fazer o
mapeamento dos objetos da aplicação e enviá-los para o banco de dados, e vice-versa.
A figura abaixo mostra como o Entity Framework é estruturado:
Figura – Arquitetura do Entity Framework

237. Note que nesse modelo existe uma camada entre aplicação e o ADO.NET. Essa camada
é o Entity Framework que fica responsável em mapear os objetos da aplicação e enviá-
los para o provedor de dados prontos para serem persistidos.
Podemos citar como principais vantagens do Entity Framework:
 Permite trabalhar com dados na forma de propriedades e objetos específicos do domínio.
Ex: Produtos, Clientes;
 Renova o modelo conceitual permitindo consultas diretamente em entidades;
 Libera as aplicações da responsabilidade de tratar código específico de uma fonte de
dados particular;
 Menor tempo de desenvolvimento: o framework fornece as capacidades básicas de
acesso de dados para que os desenvolvedores possam se concentrar na lógica do
aplicativo.
 Permite fazer mapeamento para diversas bases de dados (SQLServer, Oracle, MySql…);
 LINQ to Entities - Fornece suporte as consultas LINQ para consultar tipos de entidades
que são definidos no modelo conceitual.
Página14 de 21
 ANTERIOR
 PRÓXIMA
Mas o que é LINQ?
LINQ (consulta integrada à linguagem) é uma das novidades adicionada no Visual
Studio 2008 e .NET Framework 3.5 que veio para aproximar o mundo dos objetos do
mundo dos dados.
Consiste na execução de “queries” semelhantes às escritas em SQL e permite consultas
em coleções de objetos fortemente tipados utilizando linguagens e operadores com
suporte a IntelliSense.
Vejamos o exemplo a seguir:

238. No exemplo acima foi utilizada uma consulta em LINQ para filtrar todos os clientes com
nome iniciado pela letra J.
Vídeo: Iniciando com LINQ
http://youtu.be/h4QpwdK-aqY
Tratando requisições GET/POST
Como vimos anteriormente uma requisição pode enviar dados para o servidor de duas
formas:
1. GET: Através da URL
2. POST: no corpo da requisição
No ASP.NET é muito simples recuperar os dados enviados para a aplicação, não
importando o método que foi utilizado.
Capturando via método GET

239. Ao final da execução do exemplo acima a variável id conterá o valor “1”.
Caso a página solicitada não informe um parâmetro com nome id, o valor da variável
será null.
Mas e se a página solicitada contiver múltiplos parâmetros? Por exemplo:
produtos.aspx?id=1&c=5&pagina=2? Nesse basta adicionar uma instrução para cada
parâmetro, como ilustrado abaixo:
Página15 de 21
 ANTERIOR
 PRÓXIMA
Capturando via método POST

240. O formulário acima irá enviar os dados para a página “default.aspx” que irá capturar as
informações utilizando o seguinte código:
Lembrando que, se algum dos inputs do formulário não definirum valor para o atributo
“name”, não será possível capturar o valor desse campo no servidor:

241. VÍDEO AULA 05
Página16 de 21
 ANTERIOR
 PRÓXIMA
Recursos para Layout
Vamos ver em seguida alguns recursos poderosos disponíveis no ASP.NET para
aproveitamento e customização de Layouts: Master Pages, User Controls e Temas.
 Master Pages
A maioria dos sites da web trabalha com uma estrutura padrão que é utilizada para
todas as páginas, sendo assim apenas o espaço para informações é alterado
dependendo da seção acessada.
Considere o site abaixo: http://www.freewebsitetemplates.com/preview/skitemplate/

242. Analisando o site apresentado podemos perceber que ele contém partes que serão
repetidas em várias páginas, como o topo, menu e rodapé.
Copiar e colar esses elementos em todas as seções do site seria uma estratégia ruim,
pois a manutenção se tornaria praticamente impraticável.
Para resolver esse problema o ASP.NET contém um recurso chamado Master Page. Uma
Master Page é uma página que contém os elementos que estarão presentes em todas
as seções do site, dessa forma esses elementos estarão centralizados em apenas um
arquivo, tornando o processo de alteração simples e rápido.
Vídeo: Trabalhando com Master Pages
http://youtu.be/_AN18ubz-xo
 User Controls

243. Como vimos a Master Page é um recurso poderoso para evitar repetição de código em
um projeto, mas ela não é ideal para todos os cenários, como por exemplo
reaproveitamento de funcionalidades em sites diferentes.
Vamos tomar como exemplo o calendário abaixo:
Um calendário pode ser útil em sites de diversos setores, como sites que precisam
controlar eventos e sites educacionais.
Página17 de 21
 ANTERIOR
 PRÓXIMA
O ASP.NET dispõe de um recurso chamada User Control para permitir a criação de
controles com funcionalidades que podem ser utilizadas em mais de um projeto,
permitindo assim criar uma “ToolBox” com controles personalizados pelo usuário.
Um User Control é um arquivo “.ascx” que contém a seguinte diretiva:

244. Saiba mais: Conceitos e Exemplo Prático: User Control
http://programandodotnet.wordpress.com/2010/11/12/conceitos-e-exemplo-pratico-user-control
 Temas
Temas são uma coleção de estilos que podem ser aplicados em controles ou até mesmo
em todas as páginas de um site. A grande vantagem de se utilizar Temas é a
possibilidade de centralizar códigos voltados à aparência em apenas um local, tornando
rápido o processo de alteração.
Dentro de um projeto um Tema nada mais é que uma pasta especial do ASP.NET. É
importante lembrar que o nome da pasta será o nome do Tema. Para criar um Tema
basta clicar com o botão direito no projeto e acessar o menu: Add -> Add ASP.NET
Folder -> Theme como mostrado abaixo:

245. Temas podem conter vários tipos de arquivos para modificar a aparência de elementos
da página, entre eles arquivos .css e .skin.
Arquivos CSS
Um arquivo .css (Cascading Style Sheets) adicionado dentro de uma pasta Tema será
aplicado ao escopo definido para o Tema.
Considere a seguinte regra CSS:
Todas as páginas dentro do escopo do Tema acima terão a cor de fundo amarelo e as
outras regas aplicadas.
Página18 de 21
 ANTERIOR

246.  PRÓXIMA
Arquivos SKIN
Um arquivo .skin nada mais é que um conjunto de definições que serão aplicados a
controles do ASP.NET, por exemplo:
O código acima define que todo controle “
Também é possível definir estilos em um arquivo skin da seguinte forma:
Dessa forma apenas os controles “
Escopo
Temas podem ser aplicados em basicamente 2 escopos: Global e Página
 Global
Um Tema global irá modificar a aparência de todas as páginas e controles de um site.
Para aplicar um tema globalmente deve ser inserida a seguinte configuração na seção
System.Web do arquivo Web.config:
 Página
Para identificar que uma página em específico irá utilizar um tema basta adicionar a
propriedade Theme na diretiva do Web Form:
Dessa forma apenas a página WebForm1 terá o tema aplicado.
Internacionalização

247. Ao criar um site devemos nos preocupar em conseguir atender o máximo de usuário
possível e uma forma de alcançar esse objetivo é disponibilizar as páginas no idioma
dos visitantes.
Uma forma muito utilizada é criar uma página para cada idioma em que queremos
disponibilizar conteúdo, mas esse processo é demorado e consequentemente custoso.
Além disso torna difícil o processo de manutenção.
O ASP.NET permite criar arquivos especiais para guardar dados em idiomas diferentes,
em cada requisição do usuário o ASP.NET verifica a preferência do visitante baseado
em seu navegador e apresenta os dados no idioma correto.
Página19 de 21
 ANTERIOR
 PRÓXIMA
Arquivos Resource
Um arquivo Resource é um arquivo XML que contém chaves e valores em diferentes
idiomas. Para cada idioma é criado um arquivo Resource com as mesmas chaves, mas
valores diferentes como mostrado abaixo:
Arquivos Resource tem a extensão .resx e devem ser nomeados de acordo com o idioma
que o arquivo representa, como mostrado abaixo:
MeuResource.resx – Arquivo padrão
MeuResource.pt-BR.resx – Português – Brasil

248. MeuResource.en-uS.resx – Inglês – Estados Unidos
MeuResource.en.resx – Inglês
Note que o primeiro arquivo não tem nenhuma definição de idioma, isso porque caso o
usuário acesse o site com uma configuração de idioma que não esteja na lista (como
Espanhol) o arquivo padrão será escolhido.
Note que é possível criar arquivos de idiomas específicos para certas regiões como no
caso do “Inglês – Estados Unidos” ou apenas para o idioma.
Para uma lista completa de idiomas acesse o link abaixo:
http://www.csharp-examples.net/culture-names/
Arquivos Resource podem ser adicionados em duas pastas: App_GlobalResources e
App_LocalResources como ilustrado abaixo:
Local Resources
Um Local Resource é um arquivo que pode ser utilizadoem apenas uma página ASP.NET
e deve ser associado ao Web Form da seguinte forma:
Web Form: default.aspx
Resources:
default.aspx.en.resx -> Inglês
default.aspx.pt-br.resx -> Português – Brasil

249. Para utilizar na página basta utilizar a sintaxe:
Global Resources
Podem conter qualquer nome seguindo o padrão mostrado anteriormente e podem ser
utilizados em qualquer página da aplicação. Segue um exemplo de utilização:
Saiba mais: Lendo resources automaticamente
http://www.devmedia.com.br/globalizacao-lendo-resources-automaticamente/6428
Em sua opinião qual a vantagem da utilização de recursos para reaproveitamento de
layout e da internacionalização de um site?
RESUMO:
Vimos nesta unidade como trabalhar com dados provindos de um banco através do
ASP.NET, além de recursos poderosos como o Entity Framework e o LINQ. Também
foram apresentadas técnicas para trabalharcom a parte visual de um site e como deixá-
lo disponível para pessoas do mundo inteiro utilizando internacionalização.
Página20 de 21
 ANTERIOR
 PRÓXIMA
VISÂO geral e breve análise do ADO.NET entity framework. 2013. Disponível em: <
http://msdn.microsoft.com/pt-br/data/aa937709.aspx >. Acesso em: 28 fev. 2013.

250. MARCORATTI.net. ADO.NET – roteiro básico e boas práticas. 2013. Disponível em: <
http://www.macoratti.net/adn_bpu1.htm >. Acesso em: 28/02/2013.
SUGESTÕES DE LEITURA
SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML. São Paulo: Novatec, 2008
SHEPERD, George. Microsoft ASP.NET 4 Step by Step. Redmond: Microsoft Press, 2010
MSDN. ASP.NET Reference. Disponível em: < http://msdn.microsoft.com/pt-
br/library/9k6k3k4a%28VS.85%29.aspx >. Acesso em: nov. 2012.
W3C. Architecture of the World Wide Web, Volume One. Disponível em: <
http://www.w3.org/TR/2004/REC-webarch-20041215 >. Acesso em: nov. 2012
Página21 de 21
 ANTERIOR
TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 3 – Introdução ao Padrão MVC com ASP.NET
VÍDEO AULA 01
Quando falamos de sistemas computacionais geralmente nos
deparamos com o seguinte cenário: um banco de dados fornecendo informações para

251. serem apresentadas para o usuário. Na web esse cenário não muda. Quando entramos
em um site estamos solicitando informações para uma aplicação, que deve buscar esses
dados em uma fonte e então apresentá-los em uma interface amigável. Quando temos
que desenvolver uma aplicação que deve se comportar dessa forma, somos inclinados
a escrever o código de acesso a banco no mesmo local do código da interface, buscando
melhor desempenho e pouco código. Mas será que essa é a melhor forma de
desenvolvimento para essa situação? Temos que pensar que interfaces mudam mais
frequentemente que regras de negócio. Dessa forma toda alteração referente à
interface seria difícil por estar amarrada a código de acesso a banco e regra de negócio.
Mas como podemos resolver esse problema?
Para responder essa pergunta devemos entender as variáveis existentes no contexto
desse tipo de aplicação:
 Como dito anteriormente interfaces tendem a mudar constantemente, principalmente
quando falamos de WEB. Páginas podem ser alteradas várias vezes em um curto período
de tempo para proporcionar uma melhor experiência para os usuários;
 Dados podem ser disponibilizados de muitas formas, por exemplo, notícias podem ser
disponibilizadas na web em HTML, para serem visualizadas em navegadores, mas
também podem estar disponíveis em XML ou JSON para serem consumidas por
aplicativos cliente;
 Interfaces tendem a ser mais dependentes dos dispositivos que irão apresenta-las, por
exemplo, um sistema pode ter um excelente design para rodar em um desktop, mas o
mesmo design não funciona em um celular;
 Criar interfaces para o usuário final e regras de negócio são tipos de trabalhos para
profissionais diferentes, logo é necessário ter uma equipe com profissionais de diferentes
áreas para trabalhar com esse tipo de aplicação.
Saiba mais: Serialização JSON
http://www.json.org/json-pt.html
Note que todos os pontos citados tem alguma relação com a apresentação final para o
usuário, isso porque as regras de negócio de uma aplicação são pouco alteradas se
comparadas com a interface. Logo elas devem ser separadas de alguma forma para
facilitar a manutenção de código e permitir futuras extensões da aplicação.

252. Padrão MVC
O MVC (Modelo-Visão-Controle) é um padrão de desenvolvimento que separa a
interface, as regras de negócio e as ações disponíveis na aplicação em 3 diferentes
módulos:
 Modelo: O modelo é responsável por gerenciar os dados e o comportamento de uma
aplicação, disponibiliza informações sempre que solicitado.
 Visão: A visão tem como único objetivo montar a apresentação das informações para
quem solicitou.
 Controle: O controle tem como responsabilidade receber solicitações, sejam elas através
de um mouse ou teclado ( caso o contexto permita ) ou uma simples requisição WEB,
alertar o modelo sobre a solicitação e escolher uma visão para apresentar o resultado da
ação.
Página1 de 18
 PRÓXIMA
O padrão MVC especifica uma separação clara das responsabilidades da aplicação,
permitindo dessa forma um baixo acoplamento entre as partes, ou seja, cada elemento
depende o mínimo possível um do outro. Essa separação permite dividir uma aplicação
em 3 partes, diminuindo a complexidade do todo pois permite o desenvolvedor focar
em um módulo sem depender do outro.
Figura – Modelo MVC

253. Fonte: ASP.NET (2013)
É importante entender que o modelo não é dependente em nenhum nível do controle
ou da visão. Dessa forma é possível construir a lógica de negócio da aplicação sem se
preocupar com a apresentação.
Existem algumas variações do padrão MVC, como o MVP (Model-View-Presenter), veja
no link abaixo como funciona esse padrão:
Saiba mais: Padrão MVP
http://imasters.com.br/artigo/18683/dotnet/mvp-e-aspnet-introducao-ao-passive-view/
VÍDEO AULA 02
ASP.NET MVC
O ASP.NET MVC é um framework que contém todos os recursos disponíveis no ASP.NET,
permitindo criar aplicações WEB ricas utilizando o padrão MVC.

254. Algo que deve ficar claro é que o ASP.NET MVC não veio para substituiro já consolidado
ASP.NET Web Forms, e sim para adicionar uma nova forma de construir aplicações web
poderosas utilizando a plataforma .NET.
Vídeo: MVC ou WebForms:
http://youtu.be/GYxQSIjftqs
Com a inclusão do ASP.NET MVC como mais uma opção para desenvolvimento WEB
devemos entender quando devemos deixar de utilizar o já conhecido Web Forms em
favor do MVC. Vejamos algumas das vantagens dessa arquitetura:
 Sugere a utilização de um padrão, separando responsabilidades e tornando o código mais
claro para manutenção.
 Facilita testes por ser uma arquitetura simples.
 Permite o desenvolvedor ter o controle total do que será enviado para o cliente.
Veremos a seguir um resumo do papel de cada “camada” do ASP. NET MVC:
Modelo
Temos no modelo basicamente classes de domínio (que representam o negócio) e
classes para acesso a fonte de dados. O modelo é responsável por passaros dados para
o controle.
Uma forma de se construir o modelo é a utilização do Entity Framework, que além de
criar as classes de domínio também cria todas as classes necessárias para acesso aos
dados que representam essas classes.
Visão
A visão é responsável por apresentar os dados da forma solicitada. Quando falamos de
WEB geralmente essa apresentação é feita através de HTML, CSS e Javascript.
No ASP. NET MVC uma Visão é construída utilizando um mecanismo chamado de View
Engine. Uma View Engine é uma sintaxe especial disponível para construir uma Visão.

255. Existem diversas View Engines disponíveis para serem utilizadas no ASP.NET MVC, mas
a mais utilizada atualmente é chamada Razor.
Veremos em detalhes as Views Engines no tópico sobre Visões.
Página2 de 18
 ANTERIOR
 PRÓXIMA
Controle
O Controle é responsável por receber as requisições dos clientes e mapeá-las para
métodos chamados de ações. O papel das ações é pedir as informações requisitadas
para o modelo e devolve-las para as visões.
É importante entender que as Ações devem ter responsabilidades únicas e geralmente
são compostas por pouco código. Se você notar que uma ação está muito extensa,
desconfie, pois algo pode estar errado.
Veremos a seguir como trabalhar com cada uma das partes do ASP.NET MVC.
Modelo com Entity Framework
Vimos anteriormente que no modelo temos as classes de domínio e de persistência de
dados. Classes podem ser criadas de diferentes formas, entre elas as já conhecidas
classes POCO (Plain Old CLR Object) e através do Enttiy Framework, que além de já
criar as classes chamadas de Entidades, também já as vinculam a uma fonte de dados.
O Entity Framework Code First permite que criemos classes POCO, essas classes são
mapeadas para o banco de dados através de um recurso chamado de Data Anotations,
que nada mais são que atributos para informar como uma classe e suas propriedades
devem ser mapeadas.
Veremos abaixo a representação de classes utilizando os recurso do Data Anotations:

256. O código acima representa duas Entidades: Produto e Categoria. Não existe nada de
diferente com relação ao código que utilizávamos para criar classes antes do Entity
Framework, exceto pelos atributos adicionados nas propriedades. Primeiramente temos
que entender que cada uma das propriedades da classe irá ser mapeada para uma
coluna no banco de dados. Dessa forma é necessário adicionar instruções para
configurar como essas propriedades serão mapeadas, é nesse momento que entra os
Data Anotations.
Cada um dos atributos adicionados na classe adicionam uma configuração para o
mapeamento: “Key” marca a propriedade como chave primária, “Required” seta a
propriedade como não nula, e assim por diante.
Saiba mais: A importância do Data Annotation
http://msdn.microsoft.com/pt-br/library/jj129537.aspx

257. Página3 de 18
 ANTERIOR
 PRÓXIMA
Mas as classes acima sozinhas não serão mapeadas para o banco. Para isso precisamos
de uma classe auxiliar que irá fazer esse trabalho:
A Classe “Contexto” criada acima será responsável por criar o banco de dados caso ele
não exista, por herdar de “DbContext” ela já tem todos os recursos necessários para
fazer o mapeamento das classes para tabelas no banco.
Note que a palavra “conexao” está sendo passadA para o construtor da classe base,
esse é o nome da string de conexão que foi criado no arquivo de configuração
App.config como mostrado abaixo:
Saiba mais: Usando Arquivos de Configuração
http://msdn.microsoft.com/pt-br/library/gg537280.aspx#intro

258. Visões
Uma visão no ASP.NET MVC é composta basicamente de 2 tipos de elementos:
- Estáticos: é a parte da visão que é enviada diretamente para o cliente sem nenhum
tipo de processamento, entre ele podemos citar o HTML, CSS e Javascript (esse ultimo
sendo dinâmico apenas no cliente).
- Dinâmicos: é a seção da visão que é processada no servidor antes de ser enviada para
o cliente, geralmente o resultado do processamento gera conteúdo estático para ser
enviado para o cliente.
Para criar conteúdo dinâmico em visões no ASP.NET utilizamos um conceito chamado
de View Engine. Uma View Engine é um módulo plugável do ASP.NET, ou seja, pode
ser substituída por outra. A diferença básica entre as diferente View Engines disponíveis
é a sintaxe utilizada porcada uma delas. Cada View Engine utilizauma sintaxe diferente
para construção do conteúdo dinâmico em uma Visão, isso quer dizer que a escolha da
View Engine irá impactar diretamente em como as Visões da sua aplicação deverão ser
escritas.
A View Engine padrão do ASP.NET é conhecida como ASPX, suas extenções de arquivo
geralmente são:
- aspx: páginas/visões;
- ascx: user controls;
- master: master pages.
Para entendermos qual o papel da View Engine vamos analisar o código abaixo:

259. No exemplo acima foi utilizado o tipo DateTime, saiba mais sobre ele no link abaixo:
http://msdn.microsoft.com/pt-br/library/vstudio/system.datetime.aspx
Página4 de 18
 ANTERIOR
 PRÓXIMA
Podemos notar no exemplo acima a presença do delimitador . Esse delimitador
é responsável por marcar o começo e término do código que será processado no
servidor, gerando conteúdo estático que será enviado para o cliente.
Ainda no exemplo acima temos a presença de duas expressões dentro dos delimitadores
do ASPX, são elas:
Se considerarmos que a variável nome contém o valor “João” e a data/hora atual do
servidor seja “01/01/2013 12:00:00” teremos o seguinte resultado para o cliente:
Algo que devemos notar é que para cada bloco de código dinâmico utilizando a View
Engine ASPX devemos ter pelo menos 4 caracteres () para delimitar o começo e fim do
bloco. O uso desses caracteres pode tornar o código de difícil leitura caso a Visão
contenha uma quantia considerável de conteúdo dinâmico.
VÍDEO AULA 03

260. Para resolver o problema mostrado acima foi criada uma nova View Engine
chamada Razor. O Razor contém uma sintaxe mais simples e inteligente e está sendo
amplamente utilizada no ASP.NET MVC.
Para efeito de comparação entre as duas View Engines, veremos como ficaria o exemplo
mostrado anteriormente utilizando o Razor:
O Razor utiliza o caractere @ para marcar o início do bloco e não necessita de um
delimitador para fechar o bloco, ou seja, ele é esperto o bastante para identificar
quando o bloco terminou e conteúdo estático (html) começou.
Vamos ver alguns cenários onde o Razor pode ser aplicado:
Estruturas de repetição:
Vejamos um exemplo de um bloco foreach na sintaxe do Razor:
Note que dentro do bloco foreach temos marcações HTML. Não foi necessário terminar
o bloco para inserir o conteúdo que será repetido, como mostrado anteriormente o
Razor sabe diferenciar código de servidor de código do cliente na maioria dos cenários.
Página5 de 18
 ANTERIOR
 PRÓXIMA

261. O mesmo padrão pode ser aplicado para outras estruturas de repetição como o for ou
while.
Atenção para o seguinte detalhe
Considere o código abaixo:
O código acima irá gerar um erro pois a sintaxe do Razor irá entender que “Cliente” é
um código de servidor (C#) e não um literal, para resolver esse problema pode ser
utilizada uma tag HTML para envolver o conteúdo:
Estruturas condicionais:
As estruturas condicionais são escritas utilizando o mesmo padrão mostrado
anteriormente nas estruturas de repetição, veremos abaixo um exemplo utilizando uma
estrutura if:

262. Múltiplas linhas de código
Conheça outras View Engines no link abaixo:
http://www.infoq.com/br/news/2010/07/Razor
Página6 de 18
 ANTERIOR
 PRÓXIMA
Layouts
O ASP .NET 2.0 introduziu o conceito de Master Pages que permite uma aplicação WEB
definir uma estrutura visual padrão onde todas as páginas irão herdar, tornando o
processo de alteração simples e rápido.

263. O Razor utiliza esse mesmo conceito, simplificando ainda mais o processo nomeado de
Layout. Um Layout pode conter código estático e dinâmico que será aproveitado por
todas as outras páginas.
Veremos no exemplo abaixo como um Layout pode ser construído:
O código acima será apresentado em todas as Visões que utilizarem o Layout, o
conteúdo específico de cada Visão será inserido no local que contém a instrução
@RenderBody().
Para especificar que uma Visão irá utilizar um Layout basta utilizar o seguinte código:
Onde “nome_do_layout.cshtml” deve ser substituido pelo nome dado ao Layout da sua
aplicação.
Considere o seguinte Layout e Visão:
layout1.cshtml

264. Página7 de 18
 ANTERIOR
 PRÓXIMA
Resultado enviado para o cliente:
O resultado para o cliente caso a visão home seja mostrada será o HTML abaixo:

265. Conheça o recurso de “Seções” no Razor
http://weblogs.asp.net/scottguportuguese/archive/2010/12/30/asp-net-mvc-3-layouts-e-secoes-
com-o-
razor.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+scottguportug
uese+%28ScottGu%27s+Blog+em+Portugu%C3%AAs%29
Controles
Controles são classes derivadas da classe System.Web..Mvc.Controller e são
basicamente compostas de Ações. Ações são métodos invocados quando uma
requisição é disparada.

266. Considerando essa URL uma ação chamada Detalhes do controle Cliente será invocada.
Uma ação é definida como um método público em um controle, é importante saber que
todo método público dentro de um controle é automaticamente considerado uma ação
e é exposto para qualquer usuário que tenha conhecimento da correta URL para invoca-
lo.
Ações retornam resultados do tipo Action Result. Um Action Result pode representar
vários tipos de resposta, como uma Visão, um arquivo ou até mesmo um
redirecionamento.
Seguem abaixo alguns dos tipos derivados de ActionResult que podem ser retornados
por uma ação:
 ViewResult – HTML, CSS, Javascript e outras marcações existentes em uma página WEB.
 JsonResult – Dados serializados em JSON (Javascript Object Notation), muito utilizados
em aplicativos clientes que utilizam AJAX.
 RedirectResult – Representa um redirecionamento.
 ContentResult – Representa um texto.
Veja todos os tipos derivados de ActionResult no link abaixo:
http://msdn.microsoft.com/en-us/library/system.web.mvc.actionresult%28v=vs.108%29.aspx
Vejamos abaixo um controle com uma ação com retorno do tipo ViewResult:
O retorno do método View() é do tipo ViewResult apesarde a assinatura da ação Index()
ser do tipo ActionResult. Isso é possível porque ViewResult é derivada da classe
ActionResult.
Segue outro exemplo:

267. O exemplo acima retorna um redirecionamento para outra ação através do método
RedirectToAction().
Página8 de 18
 ANTERIOR
 PRÓXIMA
Caso uma ação retorne um tipo que não é um ActionResult, por exemplo uma string ou
um int, o resultado será convertido para o tipo ContentResult que irá retornar o
resultado em formato texto. Por exemplo:
O método acima retornará um ContentResult, o mesmo resultado poderia ser alcançado
da seguinte forma:
FÓRUM:
Considerando os conceitos apresentados, cite as vantagens que você identificou quanto
a utilização o padrão MVC para o desenvolvimento na WEB. Quais os cenários ideais
para utilização do ASP.NET MVC?

268. RESUMO
Vimos nesta unidade como o padrão MVC é estruturado e suas grandes vantagens
quando aplicado adequadamente no desenvolvimento de aplicações para WEB.
Foi apresentada a tecnologia ASP.NET MVC, o framework que utiliza todos os recursos
já existentes no ASP.NET aplicado ao padrão MVC, como funcionam suas partes
(Modelo,Visão e Controle) e como construí-las utilizando recursos como o Entity
Framework e a View Engine Razor.
ASP.NET MVC overview. 2013. Disponível em: <
http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview >.
Acesso em: 28 fev. 2013.
SUGESTÕES DE LEITURA
LOUREIRO, Henrique. C# 4.0 com Visual Studio 2010. Lisboa: FCA, 2011
MSDN. ASP.NET MVC Overview. Disponível em: < http://msdn.microsoft.com/en-
us/library/dd381412%28v=vs.108%29.aspx >. Acesso em: nov. 2012.
MSDN. ASP.NET MVC 3 Razor. Disponível em: < http://msdn.microsoft.com/en-
us/vs2010trainingcourse_aspnetmvc3razor.aspx >. Acesso em: nov. 2012
PALERMO, Jeffrey; Scheirman, Ben; Bogard, Jimmy. ASP.NET MVC em Ação. São Paulo:
Novatec, 2010
Página9 de 18
 ANTERIOR
 PRÓXIMA

269. WEB AULA 2
Unidade 3 – ASP.NET MVC - Parte 2
Como criar um Projeto em ASP.NET MVC
Veremos abaixo como criar um projeto para começarmos a trabalhar com o ASP.NET
MVC. Para todos os exemplos será utilizado o Microsoft Visual Studio Express 2012 for
Web, .NET Framework 4.5 e ASP.NET MVC 4.
Todos os produtos citados podem ser baixados no link abaixo:
http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-for-web
Crie um novo projeto conforme o modelo abaixo:
Ao criar o projeto será apresentada a seguinte tela:

270. A tela acima pede para ser selecionado um template para o projeto. Dependendo da
opção selecionada arquivos adicionais podem ou não ser inseridos no projeto, deve ser
levado em conta o contexto da aplicação para selecionar o template, por exemplo, se
a opção Internet Application for selecionada serão adicionados arquivos para
autenticação e controle de usuário, funcionalidades que geralmente se aplicam a esse
tipo de cenário.
Iremos selecionar a opção Basic que irá adicionar apenas os arquivos básicos para o
funcionamento do projeto.
Nessa tela também deverá ser selecionado a View Engine padrão para construção das
Visões, selecione a opção Razor.
Ainda nessa tela temos a opção de criar um projeto para testes da aplicação, marque
a caixa “Create a unit teste project”’se esse for o caso.

271. Saiba mais: Testes Unitários
http://msdn.microsoft.com/pt-br/library/ms182515%28v=vs.90%29.aspx
Esses são os passos necessários para criar um projeto com a estrutura básica para
começar a desenvolver, Veremos a seguir alguns conceitos importantes para entender
como o ASP.NET MVC trabalha com requisições.
VÍDEO AULA 04
Página10 de 18
 ANTERIOR
 PRÓXIMA
Roteamento
O ASP.NET MVC contém um importante sistema de roteamento para conseguir mapear
uma requisição provinda de um cliente para algum local que irá tratar e responder essa
requisição.
Toda requisição no ASP.NET MVC é mapeada para uma Ação de um Controle e a URL
informada irá determinar quem irá tratar essa requisição.
Quando criamos uma aplicação em ASP.NET MVC esta já contém uma configuração
padrão de roteamento para conseguir mapear requisições. O arquivo padrão para
configuração das rotas é chamado de Global.asax.
Saiba mais: Arquivo Globalx.asax
http://msdn.microsoft.com/pt-br/library/2027ewzw%28v=vs.85%29.aspx
Para entender melhor vamos analisar a figura abaixo:

272. Figura – Fluxo de Roteamento no ASP.NET MVC
Fonte: WHAT... (2013)
Fonte: Rashid (2008)
Conforme ilustrado acima, alguns passos são executados do momento que o cliente
pede uma página até o retorno do servidor:
1- A requisição é feita ao servidor;
2- O roteamento do ASP.NET verifica se a requisição se encaixa em uma das regras
definidas e escolhe o controle apropriado;
3- O Controle pede as informações requisitadas para o modelo;
4- O Modelo busca as informações da base de dados e retorna ao Controle;
5- O controle envia os dados para a Visão que por sua vez é respondida ao cliente;
Para entendermos como as configurações de roteamento funcionam, veremos o
exemplo do mapeamento padrão abaixo:

273. O código acima consegue mapear requisições nos padrões abaixo:
http://www.dominio.com.br/controle/acao/parametro
http://www.dominio.com.br/controle/acao
http://www.dominio.com.br/controle/
http://www.dominio.com.br/
Mas como esse mapeamento funciona?
Note que na configuração da rota existe a seguinte seção: {controller}/{action}/{id}, esse
é o padrão esperado para uma URL. Vamos considerar a URL abaixo:
http://www.meusite.com.br/cliente/deletar/5
Na URL acima temos os seguintes elementos:
Domínio: meusite.com.br
Controle: cliente
Ação: deletar
Parâmetro: 5
Ou seja, ao receber a requisição acima será procurado um controle com nome “Cliente”,
nesse controle deverá existir uma Ação chamada “Deletar”, e para essa Ação será
passado o valor 5.
Página11 de 18
 ANTERIOR
 PRÓXIMA
Também devemos nos atentar a seguinte seção da configuração:
new { controller = "Home", action = "Index", id = "" }, esse é um objeto anônimo que
representa valores padrões caso algum (ou nenhum) dos valores seja informado. Caso
o parâmetro não seja informado uma string vazia será enviada para a ação, se ela
também não for informada será escolhida uma com nome Index, e por fim se o controle
não for informado será selecionado o controle Home.

274. Saiba mais: Tipos Anônimos
http://msdn.microsoft.com/pt-br/library/vstudio/bb397696.aspx
Para entender melhor vejamos os exemplos abaixo:
Note que para cada valor não informado um valor padrão é escolhido.
Criando rotas personalizadas
Para aplicações pequenas o esquema de roteamento padrão é suficiente, mas existem
alguns casos onde haverá necessidade de utilizaroutros tipos de padrão de URL, nesses
casos será necessário criar mapeamentos customizados adicionais.
Vamos considerar um blog, uma das funcionalidades desse tipo de sistema é a
possibilidade de listar todas as postagens de um determinado período. Para permitir
essa funcionalidade na rota padrão teríamos que utilizar algo parecido com a URL
abaixo:
Considerando a URL acima teríamos um controle chamado “Arquivo” e uma ação
“Listar” recebendo um parâmetro representando a data pela qual os dados devem ser
filtrados.
Mas e se quisermos uma URL no seguinte padrão?
Isso seria um problema pois o roteamento consideraria que o valor “11-2012” é a ação
desejada, e não um parâmetro.
Para corrigir o comportamento permitindo um novo padrão de URL devemos adicionar
mais um padrão no arquivo Global.asax conforme mostrado abaixo:

275. Importante: Uma aplicação não está limitada a um número máximo de padrões de rotas,
mas a ordem que elas são definidas irá impactar diretamente no mapeamento realizado
pela aplicação.
Vamos considerar uma aplicação com os 2 mapeamentos abaixo:
Página12 de 18
 ANTERIOR
 PRÓXIMA
Caso a URL seja acessada o primeiro padrão de rota acima será escolhido e não o
segundo como esperado, isso porque as rotas são analisadas sequencialmente de cima
para baixo, o primeira padrão que se encaixa a URL informada é escolhida.
Isso quer dizer que caso a rota padrão seja mantida na aplicação ela deverá ser deixada
por último, caso contrários as rotas customizadas serão ignoradas.
Por fim, o arquivo Global.asax ficaria da seguinte forma:

276. VÍDEO AULA 05
Sessão
A seção no ASP.NET é um recurso utilizado para guardar informações do usuário que
devem ser mantidas entre as requisições ao servidor. Como exemplo podemos citar
uma aplicação web que contém um sistema de autenticação. Nesse sistema o usuário
deve se logar através de um formulário e em cada requisição posterior o servidor deve
reconhecer o usuário sem a necessidade de um novo login.

277. Para entender como funciona o recurso de sessão no ASP.NET vamos primeiramente
entender o problema que ele veio resolver através do exemplo abaixo:
View:
O exemplo acima se baseia em um formulário para entrada de números, em cada envio
ao servidor é somado o novo valor ao campo soma que serve como um acumulador. A
soma é respondida para o cliente através de um componente Literal.
Página13 de 18
 ANTERIOR
 PRÓXIMA
Sabendo do funcionamento da página podemos deduzir que o resultado final se o
usuário informar os valores 200, 50, 20 será de 270. Esse não será o resultado pois
cada requisição é tratada de forma independente, ou seja, o estado não se mantém.
Isso quer dizer que cada clique no botão irá criar um novo objeto no servidor cujo
estado inicial do campo soma será sempre 0.

278. Mas como resolvemos esse problema? Vejamos o exemplo abaixo:
No exemplo acima foi utilizada uma sessão para manter o estado da soma. Note que
para guardar ou resgatar um valor da sessão basta utilizar o nome Session seguindo
da chave de identificação entre [].
Uma sessão que não existe é criada no momento em que é adicionado um valor pela
primeira vez, sem necessidade de código adicional:

279. Toda sessão tem um tempo de expiração, ou seja, depois de um determinado intervalo
ela é descartada pelo servidor. O timeout padrão das sessões no ASP.NET é de 20
minutos, esse tempo pode ser alterado no Web.Config da seguinte forma:
Cookies
Cookies são pequenos arquivos de texto armazenados no computador cliente. O cookie
sempre é enviado para o servidor quando uma requisição é feita, e pode conter
informações importantes para o funcionamento de uma página, por exemplo o nome
de usuário do visitante e suas preferências.
Para criar um cookie basta serem informados o nome, valor e data de expiração. Todo
cookie deve conter uma data de expiração para que possa ser eliminado. Devemos
lembrar que um cookie pode ser eliminado antes da data de expiração, pois o usuário
pode limpar os cookies do navegador a qualquer momento.
Veremos a seguir o código para criar um cookie:
HttpCookie cookie = new HttpCookie("ultimo_acesso");
cookie.Value = DateTime.Now.ToString();
cookie.Expires = DateTime.Now.AddDays(1);
Response.Cookies.Add(cookie);
Primeiro é instanciado um objeto do tipo HttpCookie e é passado seu nome para o
construtor. Depois são atribuídos valores para as propriedades Value e Expires. A
propriedade Value guarda o valor do cookie, no caso acima a data do ultimo acesso do
usuário ao site. Já a propriedade Expires guarda a data de expiração do cookie, o valor
DateTime.Now.AddDays(1) representa a data atual acrescida de 1 dia. Por fim é
utilizado o comando “Response.Cookies.Add(cookie)” para gravar o cookie na maquina
cliente na resposta da requisição.
Página14 de 18
 ANTERIOR
 PRÓXIMA

280. Veremos no exemplo ao seguir como podemos mostrar ao usuário a data do ultimo
acesso utilizando cookies:
View “Index”:

281. No exemplo acima é gravado um cookie sempre que o usuário venha a clicar no botão.
Em toda requisição é verificado se o cookie “ultimo_acesso” existe através da expressão
“Request.Cookies["ultimo_acesso"] != null”, caso o cookie exista seu valor é resgatado
com a instrução “Request.Cookies["ultimo_acesso"].Value”.
Em cada visita da página acima será mostrado a data da última visita, desde que o
usuário clique no botão para gravar o cookie.
Para deletar um cookie da máquina do cliente basta enviar para o cliente o cookei que
deseja remover com alguma data passada:
HttpCookie cookie = new HttpCookie("ultimo_acesso");
cookie.Expires = DateTime.Now.AddDays(-1);
Response.Cookies.Add(cookie);
No código acima o cookie “ultimo_acesso” será deletado, pois ele tem a data de
expiração menor que a atual.
Página15 de 18
 ANTERIOR
 PRÓXIMA
Expondo Serviços na Internet com ASP.NET WEB API
Grande parte do sucesso de alguns dos maiores sites vem pelo extremo cuidado com
relação à usabilidade. Os visitantes estão cada vez mais exigentes e esperam uma
experiência semelhante a que tinham nos aplicativos desktop, ou seja, querem
respostas rápidas e rica interação. O recurso utilizado para alcançar esse nível de
usabilidade na WEB é chamado de AJAX (Asynchronous Javascript and XML) que faz
uso de requisições assíncronas para evitar a atualização total da página.
Saiba mais: Introdução ao AJAX
http://www.linhadecodigo.com.br/artigo/3585/ajax-basico-introducao.aspx
Para utilizar AJAX em uma página precisamos de um serviço que disponibilize os dados
serializados em XML ou JSON, para isso existem várias tecnologias disponíveis na
plataforma .NET, entre ela podemos citar os serviços em ASMX, ASHX e WCF.

282. Com a chegada do ASP.NET 4 foi introduzida uma nova tecnologia chamada de ASP.NET
WEB API, que permite a criação de serviços HTTP que podem ser consumidos pelos
mais diversos tipos de clientes, como navegadores e aplicativos móveis.
O ASP.NET WEB API é mais uma das tecnologias que utilizam todos os recursos do
ASP.NET, mas é importante entender que esse recurso tem como objetivo criar serviços
e não páginas WEB, como mostrado abaixo:
A figura mostra o lugar do ASP.NET WEB API dentre as várias tecnologias disponíveis
na plataforma .NET.
O ASP.NET WEB API utiliza uma arquitetura baseada em controles, mas diferente do
ASP.NET MVC, os controles do WEB API são derivados de uma classe base chamada de
ApiController.
Segue abaixo um exemplo da estrutura de um controle no WEB API:

283. Saiba mais: Status HTTP através da enumeração HttpStatusCode:
http://msdn.microsoft.com/en-
us/library/system.net.httpstatuscode%28v=vs.80%29.aspx
O código acima cria um controle com um método chamado “GetCliente” que recebe um
parâmetro. Se o valor recebido for 1 será retornado o cliente João, caso contrário será
enviado para o cliente um status 404 (Página não encontrada).
Página16 de 18
 ANTERIOR

284.  PRÓXIMA
Mas qual o padrão de acesso?
Para entender vamos verificar a rota adicionada ao projeto no momento de sua criação:
Um detalhe interessante é que o nome do método não precisa ser especificado na URL,
isso porque o WEB API seleciona o método apropriado tomando como parâmetro o
verbo HTTP (GET, POST, PUT, DELETE) que foi utilizado para efetuar a requisição.
Saiba mais: REST e verbos HTTP
http://msdn.microsoft.com/pt-br/magazine/dd315413.aspx
A seguinte convenção deve ser utilizada para que um método consiga ser invocado:
Nome do Método: verbo HTTP + Descrição
Exemplo: GETCliente(), POSTCliente()
Invocando o serviço Com Ajax
Vamos chamar o cliente GetCliente() utilizando jQuery e apresentar o retorno em um
elemento HTML.
HTML:

285. JAVASCRIPT:

286. Saiba mais: jQuery
http://www.maujor.com/blog/2008/10/22/introducao-a-biblioteca-jquery/
FÓRUM:
Cite cenários adequados para a utilização de Cookies e Sessão no ASP.NET, e quais as
desvantagens de cada um dos recursos.
RESUMO:
Vimos nesta unidade como trabalhar com um recurso importante do ASP.NET MVC, o
roteamento de requisições. Também foram apresentados elementos para trabalhar com
persistência de dados entre requisições e a tecnologia ASP.NET WEB API, tecnologia
que permite criar e disponibilizar requisições na WEB.
Página17 de 18
 ANTERIOR
 PRÓXIMA
RASHID, Kazi Mansur. Learn how to develop a Digg-like application with ASP.NET MVC,
LINQ to SQL and ASP.NET AJAX. 2008. Disponível em: <
http://dotnetslackers.com/articles/aspnet/KiggBuildingADiggCloneWithASPNETMVC1.a
spx >. Acesso em: 21 fev. 2013.
WHAT is MVC (modell view controller). 2013. Disponível em: <
http://www.crcdata.net/technologies/what-is-mvc-model-view-controller >. Acesso
em: 28 fev. 2013.
SUGESTÕES DE LEITURA
PALERMO, Jeffrey; Scheirman, Ben; Bogard, Jimmy. ASP.NET MVC em Ação. São Paulo:
Novatec, 2010

287. LOUREIRO, Henrique. C# 4.0 com Visual Studio 2010. Lisboa: FCA, 2011
MSDN. ASP.NET MVC Overview. Disponível em: < http://msdn.microsoft.com/en-
us/library/dd381412%28v=vs.108%29.aspx >. Acesso em: nov. 2012.
MSDN. ASP.NET MVC 3 Razor. Disponível em: < http://msdn.microsoft.com/en-
us/vs2010trainingcourse_aspnetmvc3razor.aspx >. Acesso em: nov. 2012
Página18 de 18
 ANTERIOR