Prévia do material em texto

• Gerenciamento do ciclo de vida dos componentes visuais e a
responsabilidade na geração do HTML a partir deles.
• Disponibilização de uma biblioteca de componentes visuais básicos análogos
aos componentes HTML.
• Suporte à templates de tela para reuso de estruturas de interfaces Web;
• Desenvolvimento de componentes visuais personalizados;
• Suporte embutido à ajax.
• Validação, conversão e formatação de dados de formulários.
• Tratamento de eventos entre telas Web.
• Gerenciamento da navegabilidade da aplicação.
FONTE: Disponível em: <bit.ly/>. Acesso em: 20 set. 2015.
Da mesma forma que as demais tecnologias que fazem parte da plataforma Java, o
JSF é de�nido por uma especi�cação mantida pelo JCP através de JSRs. Ele de�ne
uma API padrão e extensível através de classes e interfaces, simpli�cando o
desenvolvimento e aumentando a produtividade de aplicações em Java para Web.
As principais funcionalidades que o JSF traz para uma aplicação web incluem
(SOFTPLAN, 2015):
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
2 of 30 26/06/2024, 16:25
https://bit.ly/3R7jWzK
https://bit.ly/3R7jWzK
Fonte: O autor.
A próxima etapa consiste em con�gurar o projeto de forma que ele permita a
utilização das tecnologias que veremos ao longo do caderno. A Figura 35 ilustra a
interface de con�guração deste tipo de projeto. Os números 1, 2 e 3 destacam o
nome do projeto, o AS que utilizaremos e quais APIs farão parte do projeto,
respectivamente.
Para o nome do projeto, você pode colocar o que achar mais adequado. O Servidor
de Aplicação que utilizaremos será o mesmo que instalamos no tópico anterior, o
WildFly. A con�guração, entretanto, exige um pouco mais de cuidado. Clicando no
botão modify, a imagem da Figura 36 permite que selecionemos somente as APIs
que utilizaremos no projeto. Para o nosso projeto, selecione as mesmas APIs da
�gura e clique no botão OK.
FIGURA 35 - CONFIGURAÇÃO DO PROJETO
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
4 of 30 26/06/2024, 16:25
Fonte: O autor.
FIGURA 37 - CONFIGURAÇÃO DO JPA
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
6 of 30 26/06/2024, 16:25
FONTE: O autor
Para criar nosso primeiro JSF, clique com o botão direito do mouse no diretório
WebContent e selecione a opção New XHTML Page. Dê o nome formulario.xhtml
para a mesma e clique no botão Next. Na tela apresentada a seguir, mantenha a
con�guração mostrada na Figura a seguir e clique em Finish. Isso criará um
template XHTML vazio para nossa aplicação.
FIGURA 40 - CONFIGURAÇÃO DO TEMPLATE XHTML
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
8 of 30 26/06/2024, 16:25
visuais do JSF. O InputText é mapeado diretamente para um atributo do
formularioMB e o Button é mapeado diretamente para um método do mesmo
arquivo. No exemplo em questão, não faremos a criação do model e utilizaremos o
controller para simular esta função.
Note que este mapeamento de um componente de formulário diretamente para
um atributo e de um botão diretamente para um método aumenta muito a
produtividade no desenvolvimento. Em algumas IDEs, é possível inclusive gerar
Views e Controllers automaticamente a partir de classes de domínio.
FIGURA 41 - IMPORTAÇÃO DAS BIBLIOTECAS
FONTE: O autor
FIGURA 42 - CÓDIGO FONTE DO ARQUIVO JSF
FONTE: O autor
Mas o que é o formularioMB? O JSF funciona através de uma arquitetura MVC, o
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
10 of 30 26/06/2024, 16:25
simpli�cação. Na verdade, o MB segue a convenção Java Bean: métodos getters e
setters para todos os atributos, um construtor vazio e a implementação da
interface Serializable. O método executar serve simplesmente para ilustrarmos o
funcionamento do botão. 
Para criar esta classe, expanda o diretório Java Resources de seu projeto e clique
com o botão direito do mouse no diretório src. Selecione a opção Java Class e copie
o código-fonte contido na imagem do MB. Atenção para o nome do pacote, pois o
utilizaremos nos exemplos posteriores. Uma vez que a classe esteja pronta, clique
com o botão direito do mouse no arquivo formulario.xhml e selecione a opção Run
on Server. 
FIGURA 44 - DEPLOYMENT E EXECUÇÃO DO PROJETO
FONTE: O autor
Ao seguir este procedimento, a aplicação então é exibida no navegador interno do
Eclipse. Ao testá-la, podemos ver mensagens sendo exibidas no console do AS.
33 CCIICCLLOO DDEE VVIIDDAA EE EESSCCOOPPOOSS DDOO JJSSFF
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
12 of 30 26/06/2024, 16:25
vem com um valor alfanumérico. Neste passo, caso alguma das validações
não seja bem sucedida, o JSF interrompe seu ciclo de vida retornando para o
navegador do usuário com uma mensagem de erro.
4. Caso a validação seja bem sucedida, o próximo passo é atualizar os valores
dos campos dentro do Managed Bean. Neste momento, todos os métodos
setters dentro do MB serão invocados.
5. Neste passo os métodos associados a ações de botões são executados
dentro do MB.
6. Aqui o JSF gera o HTML a ser enviado para o usuário com base na árvore de
componentes. Antes disso, os valores dos componentes são extraídos do MB,
através da invocação de todos os métodos getters. Quando o processo
encerra, o HTML é �nalmente enviado ao navegador.
O Front Controller é um padrão de projeto relacionado a aplicações web.
Consiste basicamente de um ponto central de entrada que gerencia as
requisições de usuários. É o que ocorre com o JSF. Maiores detalhes podem
ser obtidos em: <mmaarrttiinnffoowwlleerr..ccoomm//eeaaaaCCaattaalloogg//ffrroonnttCCoonnttrroolllleerr..hhttmmll>.
Faremos a seguir algumas modi�cações em nosso exemplo anterior que
permitirão a compreensão deste mecanismo. A primeira etapa já está pronta e
consiste na impressão de uma mensagem no momento em que o construtor vazio
do MB é invocado.  Colocaremos mensagens ainda dentro do método getNome() e
do método setNome(), conforme ilustrado na Figura 46. 
Agora faremos novamente a publicação da aplicação, clicando com o botão direito
do mouse sobre o arquivo formulario.xhtml e selecionando a opção Run As->Run
On Server. Essa ação permitirá a visualização das alterações em nosso exemplo.
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
14 of 30 26/06/2024, 16:25
http://www.martinfowler.com/eaaCatalog/frontController.html
http://www.martinfowler.com/eaaCatalog/frontController.html
FIGURA 47 - CICLO DE VIDA DO JSF
FONTE: O autor
Mas o que acontece quando colocamos um valor para Nome e clicamos em
executar? Faça o teste em sua aplicação que eu explicarei os resultados  obtidos
aqui. Depois da primeira requisição, ciclo de vida do JSF é executado sempre da
mesma forma, como podemos avaliar observando a Figura 48. 
Cada número indica um passo do ciclo de vida. A linha destacada pelo número 1
ilustra a criação de uma nova instância do MB, enquanto a linha 2 trata da busca
da árvore dos componentes visuais e dos valores dos atributos do MB. Por
enquanto o nome continua nulo. Na linha destacada pelo número 3, os métodos
setters do MB são invocados e, como agora possuímos o valor “Catarina” no
componente associado ao nome, o MB recebe este valor. O número 4 mostra as
duas linhas que são impressas ao invocarmos o método executar. Lembre-se de
que a ação que efetivamente faz essa invocação é o clique no botão. Por �m, o
número 5 trata da renderização dos componentes em HTML para envio aoUnidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
16 of 30 26/06/2024, 16:25
Session. Basta alterar a annotation @RequestScoped para @SessionScoped.
Perceba que o comportamento da primeira e segunda vez que executamos (1) é o
mesmo do @RequestScoped, entretanto, no terceiro acesso (2),  o método 
getNome busca o valor já existente no MB, agora persistente entre as requisições
do usuário. No próximo passo, o método setter é invocado e o nome Catarina é
substituído por Cecilia no MB (3). O método executar é invocado novamente (4) e,
�nalmente, o HTML é renderizado com o valor atualizado no componente, obtido
através do método getNome (5).
FIGURA 49 - MANAGED BEAN COM ESCOPO DE SESSÃO
FONTE: O autor
Uma experiência interessante para comprovar o funcionamento deste escopo é
pegar a URL do navegador interno do Eclipse, copiá-la e acessar a aplicação através
de um navegador externo. Mas espere aí... os valores que eu coloquei não
aparecem fora do Eclipse. Isto ocorre porque o AS trata este acesso como um
segundo acesso feito por outro usuário. Se você observar os logs do servidor,
perceberá que ele obedecerá o mesmo ciclo de vida. Mas e por que ele não cria
uma nova instância do MB?  Isto signi�ca que os valores se confundirão entre os
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
18 of 30 26/06/2024, 16:25
Até lá e bons estudos!
LLEEIITTUURRAA CCOOMMPPLLEEMMEENNTTAARR
Artigo disponível em: <ddeevvmmeeddiiaa..ccoomm..bbrr//iinnttrroodduuccaaoo--aaoo--ppaaddrraaoo--mmvvcc//2299330088>.
IINNTTRROODDUUÇÇÃÃOO AAOO PPAADDRRÃÃOO DDEE PPRROOJJEETTOO MMOODDEELL,, VVIIEEWW,, CCOONNTTRROOLLLLEERR
    
11 IInnttrroodduuççããoo
Na fase de Projeto começamos a nos preocupar com a arquitetura da aplicação.
Nesta fase damos realmente valor à tecnologia, diferente da fase de análise onde
ainda estamos esboçando o problema a ser resolvido. De�nimos a plataforma e
como os componentes do sistema irão se organizar. Evidentemente que os
requisitos ainda são importantes, pois, por exemplo, um sistema Web ou então
uma aplicação de tempo real deverá in�uenciar na arquitetura.
Mesmo não possuindo uma de�nição consensual, a�nal diversos livros, artigos ou
autores de�nem o que é arquitetura da sua forma, a arquitetura de software de
um sistema computacional pode ser de�nida como as suas estruturas, que são
compostas de elementos de software, de propriedades externamente visíveis
desses componentes, e do relacionamento entre eles. Ou seja, a arquitetura de�ne
os elementos de software e como eles interagem entre si.
Para realizar a arquitetura de uma aplicação não basta estar num dia inspirado ou
acordar com bastante vontade de realizar uma arquitetura, muito pelo contrário,
precisamos de bastante experiência em diferentes organizações, diferentes tipos
de projetos, conhecimentos de diferentes arquiteturas etc. A experiência prática
ainda é a melhor solução. O trabalho em equipe também é uma forma excelente
de de�nir uma arquitetura. Muitas vezes, alguns programadores possuem outras
experiências ou conhecimentos e a troca dessa experiência é sempre válida,
mesmo quando temos um arquiteto bastante experiente na equipe.
A arquitetura de um sistema tem diversos elementos como: elementos utilitários,
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
20 of 30 26/06/2024, 16:25
http://www.devmedia.com.br/introducao-ao-padrao-mvc/29308
http://www.devmedia.com.br/introducao-ao-padrao-mvc/29308
FIGURA 1: MAPEAMENTO DAS TRÊS PARTES DE UMA APLICAÇÃO PARA O MVC
A �gura abaixo demonstra que a entrada do usuário, a modelagem do mundo
externo e o feedback visual para o usuário são separados e gerenciados pelos
objetos Modelo (Model), Visão (View) e Controlador (Controller).
FIGURA 2: OBJETOS UTILIZADOS NO MVC E SUAS INTERAÇÕES
Explicando cada um dos objetos do padrão MVC tem-se primeiramente o
controlador (Controller) que interpreta as entradas do mouse ou do teclado
enviado pelo usuário e mapeia essas ações do usuário em comandos que são
enviados para o modelo (Model) e/ou para a janela de visualização (View) para
efetuar a alteração apropriada. Por sua vez o modelo (Model) gerencia um ou mais
elementos de dados, responde a perguntas sobre o seu estado e responde a
instruções para mudar de estado. O modelo sabe o que o aplicativo quer fazer e é
a principal estrutura computacional da arquitetura, pois é ele quem modela o
problema que está se tentando resolver. Por �m, a visão (View) gerencia a área
retangular do display e é responsável por apresentar as informações para o
usuário através de uma combinação de grá�cos e textos. A visão não sabe nada
sobre o que a aplicação está atualmente fazendo, tudo que ela realmente faz é
receber instruções do controle e informações do modelo e então exibir elas. A
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
22 of 30 26/06/2024, 16:25
muito utilizados em diversos projetos. Entre eles temos o JSF, Struts 1 e Struts 2,
Spring MVC, Play Framework, Tapestry, e diversos outros. Existem diversos artigos
e sites especializados que comparam as diferenças e vantagens entre esses
diferentes frameworks. No entanto, o melhor é sempre veri�car o que cada
framework disponibiliza para os desenvolvedores e analisar se ele atende às
nossas expectativas.
Outras linguagens/plataformas também possuem frameworks que aderem ao
padrão arquitetural MVC. Isso não inviabiliza que uma equipe crie o seu próprio
framework, mas é preciso lembrar que um desenvolvedor novo precisa de tempo
para aprender a desenvolver em determinada arquitetura e caso a empresa/
projeto já utilize um framework bastante popular a curva de aprendizado será bem
menor ou praticamente nula. Isso inclusive ajuda na contratação de novos
funcionários, onde a empresa já pode exigir como pré-requisito conhecimentos
neste framework.
   
44 CCoonncclluussããoo
Neste artigo, vimos o que é a arquitetura de software, quais são seus elementos, o
que são as suas interações. Também vimos mais detalhadamente o padrão de
arquitetura de software MVC (Model-View-Controller) que é muito utilizado nos
projetos de software. Analisamos os seus elementos e como eles interagem entre
si e, além disso, vimos as principais vantagens de adotar um padrão como o MVC
que se caracteriza pela facilidade na obtenção de múltiplas visões dos mesmos
dados, desacoplar a interface da lógica da aplicação, entre outras vantagens. No
entanto, vimos que de�nir a arquitetura de um software é ainda mais do que
escolher o seu padrão arquitetural, precisamos de�nir a tecnologia (JEE ou .Net),
linguagens a integrar, forma de persistência, interfaces com o usuário e muito
mais. Dessa forma, devemos sempre reunir o máximo de pessoas experientes
possíveis, conhecimentos, análise do projeto, todos os seus requisitos funcionais e
não funcionais, a �m de de�nirmos a melhor arquitetura possível para o software
que está sendo desenvolvido.
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
24 of 30 26/06/2024, 16:25
AAUUTTOOAATTIIVVIIDDAADDEESS
A) 
B) 
C) 
Unidade 1 - Tópico 3
1  O JSF é um framework da plataforma Java, cujo funcionamento é baseado em
objetos, os quais são mantidos no servidor de aplicação. Referente ao framework
JSF, analise as a�rmativas a seguir:
   
I - O JSF funciona através da arquitetura MVC.
II - O Managed Bean (MB) funciona como intermediário entre as camadas Model e
View.
III - O Managed Bean (MB) não consegue instanciar objetos no lado do servidor,
porém reage a eventos da camada View.
IV - A classe que implementa um ManagedBean (MB) não deve ser serializável, o
que permite o acesso aos componentes.
   
Agora assinale a alternativa que apresenta as a�rmaticas CORRETAS:
I e II
II e III
I, II e III
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
26 of 30 26/06/2024, 16:25
Responder
A) 
4  A linguagem de programação Java permite o desenvolvimento de aplicações
robustas, atendendo tanto pequenas quanto grandes empresas., disponibilizando
a vários frameworks de desenvolvimento. Referente ao framework JSF (Java Server
Faces), estudado nesta disciplina, analise as a�rmativas a seguir:
   
I - O JSF permite o desenvolvimento de aplicações web.
II - O JSF utiliza a arquitetura de desenvolvimento de componentes chamado MVC
(Model-View-Controller).
III -  O JSF não possui o gerenciamento do ciclo de vida dos componentes visuais.
IV - O JSF não possui suporte a funcionalidade ajax.
   
Agora assinale a alternative CORRETA:
Apenas as a�rmativas I e II estão corretas
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
28 of 30 26/06/2024, 16:25
A) 
B) 
C) 
D) 
Responder
Tópico 2  Unidade 2
Conteúdo escrito por:
Apenas as a�rmativas I e II estão corretas.
Apenas as a�rmativas II e III estão corretas.
Apenas as a�rmativas I, II e III estão corretas.
Apenas as a�rmativas II, III e IV estão corretas.
Todos os direitos reservados © Prof. Cristiano Roberto Franco
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
30 of 30 26/06/2024, 16:25
https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii/unidade2.html
https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii/unidade2.html
https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii/unidade2.html
https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii/unidade2.html
https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii/unidade2.html