1ª prova pós web 1ª chamada

309
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;

Transcript of 1ª prova pós web 1ª chamada

Page 1: 1ª prova pós web 1ª chamada

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 CS5o 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.0o Fundamentos do Action Script;

o Funções Play, Stop;

Page 2: 1ª prova pós web 1ª chamada

o Carregamento de URLs;

o Carregamento de Filmes Externos;

o Criação de Sites.

Elementos Multimídiao 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

Page 3: 1ª prova pós web 1ª chamada

ao debate da disciplina, sendo assim, devem ser evitados. Os textos devem sempre vir acompanhados das justificativas para a opinião do 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 1Unidade 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

Page 4: 1ª prova pós web 1ª chamada

 

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)

Page 5: 1ª prova pós web 1ª chamada

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  

Page 6: 1ª prova pós web 1ª chamada

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.

Page 7: 1ª prova pós web 1ª chamada

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.

Page 8: 1ª prova pós web 1ª chamada

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.

Ícone 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

Page 9: 1ª prova pós web 1ª chamada

Í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.

Page 10: 1ª prova pós web 1ª chamada

 

     Que tal discutir sobre isso no Forum?    

 

Para trabalhar no Flash Professional, basta seguir alguns passos básicos:

Planeje o que vai ser feitoo 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 SWFo É 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

Page 11: 1ª prova pós web 1ª chamada

 

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

Page 12: 1ª prova pós web 1ª chamada

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.  LINHA DE TEMPO: onde estã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: mostra os 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.

Page 13: 1ª prova pós web 1ª chamada

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

Page 14: 1ª prova pós web 1ª chamada

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 3DII. Animação do tipo MotionIII. 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

Page 15: 1ª prova pós web 1ª chamada

botão 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.

Page 16: 1ª prova pós web 1ª chamada

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.

Page 17: 1ª prova pós web 1ª chamada

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

Page 18: 1ª prova pós web 1ª chamada

formas mais complexas. Vamos ver como desenhar formas básicas e transformá-las. Para se acessar a ferramenta polígono devemos clicar na 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

Page 19: 1ª prova pós web 1ª chamada

PRÓXIMA  

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.

Page 20: 1ª prova pós web 1ª chamada

Para desenhar linhas e traçados temos quatro ferramentas:

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

Page 21: 1ª prova pós web 1ª chamada

Podemos usar também a ferramenta Pen para desenhar polí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

Page 22: 1ª prova pós web 1ª chamada

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

 

 

A. Indicador de reprodução

B. Quadro-chave vazio

C. Camada

D. Ícone da camada de guia

E. Menu pop-up Exibição de quadros

F. 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

Page 23: 1ª prova pós web 1ª chamada

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

>  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.

Page 24: 1ª prova pós web 1ª chamada

Figura  12 - Múltiplas Linhas de Tempo dentro dos símbolos

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  

Page 25: 1ª prova pós web 1ª chamada

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

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

Page 26: 1ª prova pós web 1ª chamada

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

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  

Page 27: 1ª prova pós web 1ª chamada

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

 

 

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 Camada para 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.

Page 28: 1ª prova pós web 1ª chamada

Interpolação de Movimento (Motion Tween)

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.

Page 29: 1ª prova pós web 1ª chamada

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

Page 30: 1ª prova pós web 1ª chamada

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

Page 31: 1ª prova pós web 1ª chamada

 

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 testar uma 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

Page 32: 1ª prova pós web 1ª chamada

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 estender o 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.

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

Page 33: 1ª prova pós web 1ª chamada

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

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

Page 34: 1ª prova pós web 1ª chamada

 

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.

Page 35: 1ª prova pós web 1ª chamada

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 editar 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

Page 36: 1ª prova pós web 1ª chamada

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

Page 37: 1ª prova pós web 1ª chamada

 

Figura 24 -   Interface no modo Classic

 

Página17 de 18

Page 38: 1ª prova pós web 1ª chamada

  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

Page 39: 1ª prova pós web 1ª chamada

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

Page 40: 1ª prova pós web 1ª chamada

ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES WEB

WEBAULA 1Unidade 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>

Page 41: 1ª prova pós web 1ª chamada

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

Page 42: 1ª prova pós web 1ª chamada

Exemplo de uma Classe em Action ScriptNo 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 estiver descrito 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/index.html>

2.2  FLASH E ORIENTAÇÃO A OBJETOVamos 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 à objetoclass Nomedaclasse{      function Nomedaclasse(){      //...      }}

Page 43: 1ª prova pós web 1ª chamada

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 Flashfunction 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.

Page 44: 1ª prova pós web 1ª chamada

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.SINTAXENo 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

“ para valores do tipo texto (string)

Page 45: 1ª prova pós web 1ª chamada

No Flash os objetos mais usados geralmente são esses:Tipos de valores: Formato

String “nome”Movie clip nomeButton nomeText field nomeNumber 5Boolean true / falseObject NomeFunction Nome

 2.3 CARREGANDO UM MOVIECLIP DA BIBLIOTECA PARA O PALCOPara 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 TEMPOPara 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.

Page 46: 1ª prova pós web 1ª chamada

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 urlO 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);

Page 47: 1ª prova pós web 1ª chamada

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+'%';

     if (percent>99) {

Page 48: 1ª prova pós web 1ª chamada

           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.

}

function adicionaBalao () {

       var balao:Balao = new Balao();

Page 49: 1ª prova pós web 1ª chamada

       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.

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

Page 50: 1ª prova pós web 1ª chamada

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();}

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.

Page 51: 1ª prova pós web 1ª chamada

<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 adicionar uma 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

TECNOLOGIAS PARA APLICAÇÕES WEB 

WEBAULA 1UNIDADE 1: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE EDITION(Conceitual)O que é uma aplicação Java Web?

Page 52: 1ª prova pós web 1ª chamada

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.

 

Saiba mais sobre linguagens de marcação: http://www.w3schools.com/html/html_intro.asphttp://www.w3schools.com/html/html_xhtml.asphttp://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 WebO 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/index.htmlPara 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 DesenvolvimentoUma 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.

Page 53: 1ª prova pós web 1ª chamada

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 ControllerO 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 ContainerNecessidades de uma aplicação WebHTTP

Page 54: 1ª prova pós web 1ª chamada

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´sO 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´sSe 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 URLTabela 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 respostaQuando dado uma URL, um navegador Web realiza uma transação HTTP para recuperar e exibir a página Web nesse endereço.

Page 55: 1ª prova pós web 1ª chamada

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.

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.1A 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 OKindica sucesso, enquantoHTTP/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

 

Page 56: 1ª prova pós web 1ª chamada

 O cabeçalho HTTPO 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/htmlAs 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 PostOs 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=unoparNesse 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

Page 57: 1ª prova pós web 1ª chamada

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.Conteúdo dinâmicoAs 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çãoResolver 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.

Page 58: 1ª prova pós web 1ª chamada

 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

ServletComo é 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

Page 59: 1ª prova pós web 1ª chamada

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 RespostaPara inserir conteúdo texto na resposta HTTP que será enviada para o navegador do usuário, devemos utilizar os métodos getWriter ( ) e println( ). Geralmente, o conteúdo inserido na resposta HTTP é texto HTML, conforme o exemplo abaixo:

Page 60: 1ª prova pós web 1ª chamada

Mais sobre Servlets:http://www.devmedia.com.br/desvendando-os-servlets-3-0-java- magazine-81/17436http://www.oracle.com/technetwork/java/index-jsp-135475.htmlhttp://www.javabeat.net/2008/12/new-features-in-servlets-3-0/

Aplicação Web JavaA 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:     

Page 61: 1ª prova pós web 1ª chamada

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çõesApó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.FrameworksAtualmente, é improvável que um projeto de desenvolvimento de uma aplicação Web utilize diretamente Servlets, pois a produtividade seria pequena e a manutenção

Page 62: 1ª prova pós web 1ª chamada

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 2Atualmente, 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).

Page 63: 1ª prova pós web 1ª chamada

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: VantagensO 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

Page 64: 1ª prova pós web 1ª chamada

personalizados. Bibliotecas de componentes adicionais são disponibilizadas por vários projetos de código-fonte aberto e de fornecedores independentes. 

JavaDoc: JavaServer Faceshttp://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çãoEm 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.

Page 65: 1ª prova pós web 1ª chamada

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

Page 66: 1ª prova pós web 1ª chamada

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:0000:00

 

DAO – Data Access ObjectA 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

 

Page 67: 1ª prova pós web 1ª chamada

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.htmlhttp://www.javabuilding.com/academy/patterns/dao.htmlhttp://www.oficinadanet.com.br/artigo/java/criando-um-cadastro-de-usuario-em-javaFó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?RESUMONessa 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.

 

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

Page 68: 1ª prova pós web 1ª chamada

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 1UNIDADE 2: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE EDITION(Prático-Conceitual)

Configurando uma aplicação JSFUma aplicação JSF deve respeitar a 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.

 

JSF na práticaCriando um projeto

Page 69: 1ª prova pós web 1ª chamada

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.

 Selecione o framework “JavaServer Faces” e na aba “Componentes” selecione “PrimeFaces”, clique em finalizar.

Page 70: 1ª prova pós web 1ª chamada

  A estrutura básica do projeto criado deverá ser algo semelhante à figura 5:

 

Web.xmlA 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.

Page 71: 1ª prova pós web 1ª chamada

Mais sobre o arquivo web.xml em:http://docs.oracle.com/cd/E14571_01/web.1111/e13712/web_xml.htm

faces-config.xmlUm arquivo faces-config.xml deverá ser adicionado ao diretório WEB-INF. Nesse arquivo, podemos alterar diversas configurações do JSF.

Page 72: 1ª prova pós web 1ª chamada

Mais sobre o arquivo faces.config.xml em:http://docs.oracle.com/cd/B31017_01/web.1013/b28967/appendixa010.htm#ADFDG010

BibliotecasPara 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 BeansOs 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 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.shtmlhttp://www.guj.com.br/java/206651-o-que-e-pojo-afinal

Criando um Managed BeanUm 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:

Page 73: 1ª prova pós web 1ª chamada

No registro de um managed bean devemos definir o nome, a classe e o escopo do managed bean. O nome será utilizado para 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/20436A 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:

Page 74: 1ª prova pós web 1ª chamada

PropriedadesConsidere 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):

 

 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

Page 75: 1ª prova pós web 1ª chamada

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.

 Componentes VisuaisNo 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 JSFA 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.

Page 76: 1ª prova pós web 1ª chamada

Documentação completa das tags das bibliotecas vistas acima em:http://www.jcp.org/en/jsr/detail?id=314

TelasUma 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”.

Page 77: 1ª prova pós web 1ª chamada

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çãoNavegar 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ícitaNa 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.

Page 78: 1ª prova pós web 1ª chamada

 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ícitaNa 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 adicionar trê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á realizar uma navegação implícita, procurando um arquivo compatível com o outcome. Se esse arquivo não existir, a tela atual será reapresentada.

Page 79: 1ª prova pós web 1ª chamada

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 ProjetoAo 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:

Page 80: 1ª prova pós web 1ª chamada

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:0000:00

Fórum

O que você achou do JSF e demais componentes? Você acredita que as tecnologias

Page 81: 1ª prova pós web 1ª chamada

vistas e aplicadas podem ser uma alternativa para desenvolvimento de aplicações Web? O que te chamou atenção na implementação vista?RESUMONessa 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.

VIDEO AULA 1

Page 82: 1ª prova pós web 1ª chamada

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

Page 83: 1ª prova pós web 1ª chamada

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 interagir com um SGBD. Nessa interação, as consultas são definidas com a linguagem SQL. A sintaxe dessa linguagem pode diferir em cada

Page 84: 1ª prova pós web 1ª chamada

SGDB, de acordo 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

Page 85: 1ª prova pós web 1ª chamada

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.

Page 86: 1ª prova pós web 1ª chamada

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.

Page 87: 1ª prova pós web 1ª chamada

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

Page 88: 1ª prova pós web 1ª chamada

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. Por convençã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.

Page 89: 1ª prova pós web 1ª chamada

@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

Page 90: 1ª prova pós web 1ª chamada

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.

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 EclipseLink: 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

Page 91: 1ª prova pós web 1ª chamada

Mapeamento

Para definir o mapeamento das entidades iremos utilizar as anotações do JPA para estabelecer este mapeamento.

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

Page 92: 1ª prova pós web 1ª chamada

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 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).

Page 93: 1ª prova pós web 1ª chamada

Página4 de 7

 ANTERIOR

PRÓXIMA 

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

Page 94: 1ª prova pós web 1ª chamada

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:

Page 95: 1ª prova pós web 1ª chamada

Código Java 6.1: PessoaBean.java (parte 1)

Página5 de 7

 ANTERIOR

PRÓXIMA 

Page 96: 1ª prova pós web 1ª chamada

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

Page 97: 1ª prova pós web 1ª chamada

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.

JAVA SERVER FACES. Ferramentas de desenvolvimento. Disponível em: <http://www.javaserverfaces.com.br/>. Acesso em: 25 nov. 2012.

Page 98: 1ª prova pós web 1ª chamada

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

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

Page 99: 1ª prova pós web 1ª chamada

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é.

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.

Page 100: 1ª prova pós web 1ª chamada

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).

Page 101: 1ª prova pós web 1ª chamada

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).

Page 102: 1ª prova pós web 1ª chamada

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):

Page 103: 1ª prova pós web 1ª chamada

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

Page 104: 1ª prova pós web 1ª chamada

identificarem algum problema e esse formulário de contato deve ser exibido em todas as telas da aplicação.

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

Page 105: 1ª prova pós web 1ª chamada

“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).

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

Page 106: 1ª prova pós web 1ª chamada

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.

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.

Page 107: 1ª prova pós web 1ª chamada

Por exemplo, para estipular que um determinado valor numérico seja exibido com um número máximo de casas decimais, podemos usar o atributo maxFractionDigits. A propriedade numero do managed bean TesteBean é exibida com duas casas decimais (DESENVOLVIMENTO..., 2013, p. 159).

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ões de 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

Page 108: 1ª prova pós web 1ª chamada

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).

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

Page 109: 1ª prova pós web 1ª chamada

Abaixo o campo com o valor digitado pelo usuário e após o processamento da requisição

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.

Page 110: 1ª prova pós web 1ª chamada

Campo Obrigatório (Required)

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

Page 111: 1ª prova pós web 1ª chamada

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).

Page 112: 1ª prova pós web 1ª chamada

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 possui um 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 componentes definidos em seu corpo também serão avaliados.

Page 113: 1ª prova pós web 1ª chamada

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

Page 114: 1ª prova pós web 1ª chamada

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

Page 115: 1ª prova pós web 1ª chamada

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:

Page 116: 1ª prova pós web 1ª chamada

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:

Page 117: 1ª prova pós web 1ª chamada

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 conhecemos sobre métodos de 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.

Page 118: 1ª prova pós web 1ª chamada

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 1Unidade 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 interface com o usuário. A comunicação entre cliente e servidor, por sua vez,

Page 119: 1ª prova pós web 1ª chamada

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 utilizando um 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.

Page 120: 1ª prova pós web 1ª chamada

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).

Page 121: 1ª prova pós web 1ª chamada

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

Page 122: 1ª prova pós web 1ª chamada

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:

Page 123: 1ª prova pós web 1ª chamada

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:

Page 124: 1ª prova pós web 1ª chamada

PARA SABER MAISExemplo de Aplicação JSFhttp://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.

Page 125: 1ª prova pós web 1ª chamada

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çãoO 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

Page 126: 1ª prova pós web 1ª chamada

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, dizer que um campo é requerido ou que não estão no intervalo definido para o campo. Segue alguns exemplos:

Page 127: 1ª prova pós web 1ª chamada

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 MAISAula 7: Conversão e Validaçãohttp://www.codigosfontes.com.br/jsf-conversao-e-validacao/Introdução para JSF 2.0http://otaviosantana.blogspot.com.br/2012/07/introducao-para-jsf-20.html

Página5 de 13

  ANTERIOR

PRÓXIMA

3 - Desenvolvimento web com PrimeFaces

Page 128: 1ª prova pós web 1ª chamada

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):

Page 129: 1ª prova pós web 1ª chamada

PARA SABER MAISOutros exemplos:Site - Primefaceshttp://www.primefaces.org/showcase/ui/home.jsfSite: Café sem Javahttp://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.

Page 130: 1ª prova pós web 1ª chamada

PARA SABER MAISuaiHerbet : 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.

Page 131: 1ª prova pós web 1ª chamada

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 

Page 132: 1ª prova pós web 1ª chamada

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).

Page 133: 1ª prova pós web 1ª chamada

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

Page 134: 1ª prova pós web 1ª chamada

4.1 – Criando o template

Exemplo do template apresentado na sessão 3.2 (adaptado).

Page 135: 1ª prova pós web 1ª chamada

Página9 de 13

  ANTERIOR

PRÓXIMA  

Page 136: 1ª prova pós web 1ª chamada

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.

Page 137: 1ª prova pós web 1ª chamada

Página10 de 13

Page 138: 1ª prova pós web 1ª chamada

  ANTERIOR

PRÓXIMA 

PARA SABER MAISConhecendo o comportamento do  JavaServer Faceshttp://www.edsongoncalves.com.br/tag/glassfish/

Page 139: 1ª prova pós web 1ª chamada

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.

Page 140: 1ª prova pós web 1ª chamada

A figura 16 representa os arquivos na estrutura do projeto

PARA SABER MAISInternacionalização com JSF

http://jabesfelipe.blogspot.com.br/2010/04/internacionalizacao-com-jsf.htmlSF – Usando arquivos de propriedades(Resource Bundle) para internacionalização de

Page 141: 1ª prova pós web 1ª chamada

aplicativoshttp://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 MAISComo Funciona o SSLhttp://publib.boulder.ibm.com/tividd/td/TRM/GC32-1323-00/pt_BR/HTML/admin231.htmO que é SSL?http://www.tecmundo.com.br/seguranca/1896-o-que-e-ssl-.htmComo funciona a criptografiahttp://informatica.hsw.uol.com.br/criptografia4.htm

Página12 de 13

  ANTERIOR

PRÓXIMA  

Page 142: 1ª prova pós web 1ª chamada

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 Magazine 23. 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.

Page 143: 1ª prova pós web 1ª chamada

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

Page 144: 1ª prova pós web 1ª chamada

  ANTERIOR

TECNOLOGIAS PARA APLICAÇÕES WEB

WEBAULA 2Unidade 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 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. 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.

Page 145: 1ª prova pós web 1ª chamada

PARA SABER MAISHibernatehttp://www.dcc.ufrj.br/~austeclynio/downloads/Hibernate.pdfDocumentação de Referência Hibernatehttp://docs.jboss.org/hibernate/core/3.5/reference/pt-BR/pdf/hibernate_reference.pdfPersistindo Objetos com Java, Hibernate e PostgreSQLhttp://www.devmedia.com.br/persistindo-objetos-com-java-hibernate-e-postgresql/4149Introdução à Java Persistence API – JPAhttp://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ção da aplicação. Esta instância pode ser usada 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 MAISMinha Classe HibernateUtilhttp://adrielcafe.com/cafelog/hibernate/54-minha-classe-hibernateutil

Página1 de 8

PRÓXIMA

Page 146: 1ª prova pós web 1ª chamada

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.

Page 147: 1ª prova pós web 1ª chamada

Página2 de 8

  ANTERIOR

PRÓXIMA

Page 148: 1ª prova pós web 1ª chamada

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 MAISHIBERNATE - Persistência Relacional para Java Idiomáticohttp://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/

Page 149: 1ª prova pós web 1ª chamada

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 MAISConhecendo o comportamento do  JavaServer Faceshttp://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:

Page 150: 1ª prova pós web 1ª chamada

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.

Page 151: 1ª prova pós web 1ª chamada

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. 

Page 152: 1ª prova pós web 1ª chamada

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 MAISAnotaçõ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.pdfIntrodução ao JSF 2.0 com PrimeFaces parte IIhttp://benignosales.wordpress.com/tag/sessionscoped/

3.4.3 Banco

Page 153: 1ª prova pós web 1ª chamada

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.

Page 154: 1ª prova pós web 1ª chamada

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.

Page 155: 1ª prova pós web 1ª chamada

PARA SABER MAISDocumentação da Referência do Hibernatehttp://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

Page 156: 1ª prova pós web 1ª chamada

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.

Page 157: 1ª prova pós web 1ª chamada

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.

Page 158: 1ª prova pós web 1ª chamada

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.

Page 159: 1ª prova pós web 1ª chamada

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 1Unidade 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

Page 160: 1ª prova pós web 1ª chamada

estavam 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 Frameworkhttp://msdn.microsoft.com/pt-br/library/hh425099.aspx

Web pagesWeb ServicesBibliotecas (DLLs)Windows FormsConsole 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

Page 161: 1ª prova pós web 1ª chamada

de 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

Page 162: 1ª prova pós web 1ª chamada

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 RuntimeCommom 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#).

Page 163: 1ª prova pós web 1ª chamada

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.

Page 164: 1ª prova pós web 1ª chamada

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.

Page 165: 1ª prova pós web 1ª chamada

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 utilizar todos os recursos da plataforma.

Vídeo: .NET Framework e seus componentes

https://www.youtube.com/watch?v=zbDsiOYlBtk

Visual StudioWindows FormsASP.NET

Visual Studio

O Visual Studio é uma IDE (Integrated Development Environment) para desenvolvimento utilizando qualquer uma das linguagens contidas no .NET Framework. O Visual Studio disponibiliza recursos para trabalhar com 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,

Page 166: 1ª prova pós web 1ª chamada

recurso que completa 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).

Page 167: 1ª prova pós web 1ª chamada

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.

Page 168: 1ª prova pós web 1ª chamada

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

Page 169: 1ª prova pós web 1ª chamada

 

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

 

 

Page 170: 1ª prova pós web 1ª chamada

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

Page 171: 1ª prova pós web 1ª chamada

O que é preciso para escrever e rodar código C#

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

Page 172: 1ª prova pós web 1ª chamada

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}\Windows\Microsoft.NET\Framework\{versão do .net framework}

Exemplo:

C:\Windows\Microsoft.NET\Framework\v4.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

Page 173: 1ª prova pós web 1ª chamada

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 ( */):

Page 174: 1ª prova pós web 1ª chamada

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:

Page 175: 1ª prova pós web 1ª chamada

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:

Page 176: 1ª prova pós web 1ª chamada

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:

Page 177: 1ª prova pós web 1ª chamada

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

Page 178: 1ª prova pós web 1ª chamada

 ANTERIOR

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:

Page 179: 1ª prova pós web 1ª chamada

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

Page 180: 1ª prova pós web 1ª chamada

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.

Page 181: 1ª prova pós web 1ª chamada

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.

Page 182: 1ª prova pós web 1ª chamada

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 2Unidade 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

Page 183: 1ª prova pós web 1ª chamada

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:

Page 184: 1ª prova pós web 1ª chamada

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:

Page 185: 1ª prova pós web 1ª chamada

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:

Page 186: 1ª prova pós web 1ª chamada

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:

Page 187: 1ª prova pós web 1ª chamada

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:

Page 188: 1ª prova pós web 1ª chamada

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

Page 189: 1ª prova pós web 1ª chamada

palavra chave “const” na declaração da variável. Uma constante sempre deve ser inicializada no momento de sua criação:

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 utilizar a 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.

Page 190: 1ª prova pós web 1ª chamada

Considere as variáveis abaixo:

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:

Page 191: 1ª prova pós web 1ª chamada

   

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

Page 192: 1ª prova pós web 1ª chamada

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.

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

Page 193: 1ª prova pós web 1ª chamada

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;

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

Page 194: 1ª prova pós web 1ª chamada

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

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

Page 195: 1ª prova pós web 1ª chamada

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:

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.

Page 196: 1ª prova pós web 1ª chamada

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:

Page 197: 1ª prova pós web 1ª chamada

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.

Page 198: 1ª prova pós web 1ª chamada

O exemplo a seguir testa o valor da variável x:

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

Page 199: 1ª prova pós web 1ª chamada

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

Page 200: 1ª prova pós web 1ª chamada

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:

Page 201: 1ª prova pós web 1ª chamada

 

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:

Page 202: 1ª prova pós web 1ª chamada

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:

Page 203: 1ª prova pós web 1ª chamada

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:

Page 204: 1ª prova pós web 1ª chamada

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.

Page 205: 1ª prova pós web 1ª chamada

 

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 1Unidade 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.

Page 206: 1ª prova pós web 1ª chamada

 

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 utilizar o 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.

Page 207: 1ª prova pós web 1ª chamada

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 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

Page 208: 1ª prova pós web 1ª chamada

http://youtu.be/CHlp835aYz0

 

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:

Page 209: 1ª prova pós web 1ª chamada

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.

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

Page 210: 1ª prova pós web 1ª chamada

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.

 

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:

Page 211: 1ª prova pós web 1ª chamada

Em seguida deve ser selecionado o tipo do projeto. Em templates selecione a opção WEB e na direita ASP.NET Web Forms Application:

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.

Page 212: 1ª prova pós web 1ª chamada

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.

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:

Page 213: 1ª prova pós web 1ª chamada
Page 214: 1ª prova pós web 1ª chamada

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 testar a 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:

Page 215: 1ª prova pós web 1ª chamada

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:

Page 216: 1ª prova pós web 1ª chamada

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:

Page 217: 1ª prova pós web 1ª chamada

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:

Page 218: 1ª prova pós web 1ª chamada

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;

Page 219: 1ª prova pós web 1ª chamada

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:

Page 220: 1ª prova pós web 1ª chamada

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.

Page 221: 1ª prova pós web 1ª chamada

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:

Page 222: 1ª prova pós web 1ª chamada

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

Page 223: 1ª prova pós web 1ª chamada

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 estiver logado o mesmo deve ser redirecionado para uma página de login. Veremos essa situação no exemplo abaixo:

CS:

Page 224: 1ª prova pós web 1ª chamada

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

 

Page 225: 1ª prova pós web 1ª chamada

FÓRUM:

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

Page 226: 1ª prova pós web 1ª chamada

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ágina10 de 21

  ANTERIOR

PRÓXIMA  

WEB AULA 2Unidade 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.

Page 227: 1ª prova pós web 1ª chamada

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.

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:

Page 228: 1ª prova pós web 1ª chamada

http://www.microsoft.com/pt-br/download/details.aspx?id=23650

Página11 de 21

  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:

Page 229: 1ª prova pós web 1ª chamada

Classe Cliente:

Page 230: 1ª prova pós web 1ª chamada

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

Page 231: 1ª prova pós web 1ª chamada

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 persistir o 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:

Page 232: 1ª prova pós web 1ª chamada
Page 233: 1ª prova pós web 1ª chamada

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

Page 234: 1ª prova pós web 1ª chamada

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

Page 235: 1ª prova pós web 1ª chamada

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:

Page 236: 1ª prova pós web 1ª chamada

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

Page 237: 1ª prova pós web 1ª chamada

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

Page 238: 1ª prova pós web 1ª chamada

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 definir um valor para o atributo “name”, não será possível capturar o valor desse campo no servidor:

Page 239: 1ª prova pós web 1ª chamada

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/

Page 240: 1ª prova pós web 1ª chamada

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

Page 241: 1ª prova pós web 1ª chamada

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:

Page 242: 1ª prova pós web 1ª chamada

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:

Page 243: 1ª prova pós web 1ª chamada

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

Page 244: 1ª prova pós web 1ª chamada

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

Page 245: 1ª prova pós web 1ª chamada

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ãoMeuResource.pt-BR.resx – Português – Brasil

Page 246: 1ª prova pós web 1ª chamada

MeuResource.en-uS.resx – Inglês – Estados UnidosMeuResource.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 utilizado em 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êsdefault.aspx.pt-br.resx -> Português – Brasil

Page 247: 1ª prova pós web 1ª chamada

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 trabalhar com 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.

Page 248: 1ª prova pós web 1ª chamada

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 1Unidade 3 – Introdução ao Padrão MVC com ASP.NET

VÍDEO AULA 01

Page 249: 1ª prova pós web 1ª chamada

Quando falamos de sistemas computacionais geralmente nos deparamos com o seguinte cenário: um banco de dados fornecendo informações para 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

Page 250: 1ª prova pós web 1ª chamada

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.

 

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

Page 251: 1ª prova pós web 1ª chamada

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.

Page 252: 1ª prova pós web 1ª chamada

Algo que deve ficar claro é que o ASP.NET MVC não veio para substituir o 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 passar os 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.

Page 253: 1ª prova pós web 1ª chamada

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.

Page 254: 1ª prova pós web 1ª chamada

Veremos abaixo a representação de classes utilizando os recurso do Data Anotations:

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.

Page 255: 1ª prova pós web 1ª chamada

Saiba mais: A importância do Data Annotation

http://msdn.microsoft.com/pt-br/library/jj129537.aspx

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:

Page 256: 1ª prova pós web 1ª chamada

Saiba mais: Usando Arquivos de Configuração

http://msdn.microsoft.com/pt-br/library/gg537280.aspx#intro

 

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 por cada uma delas. Cada View Engine utiliza uma 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.

Page 257: 1ª prova pós web 1ª chamada

Para entendermos qual o papel da View Engine vamos analisar o código abaixo:

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.

Page 258: 1ª prova pós web 1ª chamada

VÍDEO AULA 03

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

Page 259: 1ª prova pós web 1ª chamada

PRÓXIMA

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:

Page 260: 1ª prova pós web 1ª chamada

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.

Page 261: 1ª prova pós web 1ª chamada

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

Page 262: 1ª prova pós web 1ª chamada

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:

Page 263: 1ª prova pós web 1ª chamada

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+scottguportuguese+%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.

Page 264: 1ª prova pós web 1ª chamada

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 apesar de a assinatura da ação Index() ser do tipo ActionResult. Isso é possível porque ViewResult é derivada da classe ActionResult.

Segue outro exemplo:

Page 265: 1ª prova pós web 1ª chamada

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?

Page 266: 1ª prova pós web 1ª chamada

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

Page 267: 1ª prova pós web 1ª chamada

WEB AULA 2Unidade 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:

Page 268: 1ª prova pós web 1ª chamada

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.

Page 269: 1ª prova pós web 1ª chamada

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:

Page 270: 1ª prova pós web 1ª chamada

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:

Page 271: 1ª prova pós web 1ª chamada

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.brControle: clienteAção: deletarParâ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.

Page 272: 1ª prova pós web 1ª chamada

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 utilizar outros 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:

Page 273: 1ª prova pós web 1ª chamada

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:

Page 274: 1ª prova pós web 1ª chamada

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.

Page 275: 1ª prova pós web 1ª chamada

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.

Page 276: 1ª prova pós web 1ª chamada

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:

Page 277: 1ª prova pós web 1ª chamada

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

Page 278: 1ª prova pós web 1ª chamada

Veremos no exemplo ao seguir como podemos mostrar ao usuário a data do ultimo acesso utilizando cookies:

View “Index”:

Page 279: 1ª prova pós web 1ª chamada

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.

Page 280: 1ª prova pós web 1ª chamada

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:

Page 281: 1ª prova pós web 1ª chamada

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

Page 282: 1ª prova pós web 1ª chamada

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:

Page 283: 1ª prova pós web 1ª chamada

 

JAVASCRIPT:

Page 284: 1ª prova pós web 1ª chamada

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.aspx >. 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

Page 285: 1ª prova pós web 1ª chamada

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