Arquitetura MVC com JSF

Prévia do material em texto

1. View: responsável pela renderização da interface grá�ca da aplicação.
2. Controller: responsável por receber e tratar os eventos da View.
3. Model: responsável pela implementação da lógica de negócios.
INTRODUÇÃO AO JAVA ENTERPRISE
EDITION
UNIDADE 1
JJAAVVAA SSEERRVVEERR FFAACCEESS ((JJSSFF))
TTÓÓPPIICCOO 33
11 IINNTTRROODDUUÇÇÃÃOO
O Java Server Faces (JSF) é o framework padrão da plataforma Java para a
construção de aplicações web com JEE.  Ele de�ne e implementa um modelo de
componentes visuais para WEB, utilizando uma arquitetura MVC (model-view-
controller). Esta arquitetura propõe a divisão das responsabilidades de uma
aplicação em três camadas distintas (Figura 32):
FIGURA 32 - ARQUITETURA MVC
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
1 of 30 26/06/2024, 16:25
O JSF funciona baseado em objetos que são mantidos em memória no servidor e
que �cam responsáveis pela geração do HTML que será enviado ao navegador.
Esta estratégia permite que os valores contidos nos componentes mantenham seu
estado, permitindo sua recuperação mesmo após várias requisições. O objetivo
desta arquitetura é a limitação imposta pela característica stateless do HTTP.
A Figura 33, retirada de SOFTPLAN (2015), exempli�ca o funcionamento do JSF.
Imagine um cliente que faz uma primeira requisição para uma aplicação web em
um AS. O JSF utiliza um arquivo no formato xHTML para descrever uma interface
da aplicação. Quando o recurso representado por esse arquivo é solicitado, uma
árvore de componentes é gerada no servidor e um HTML é enviado ao cliente.
Para as próximas requisições a este recurso pelo mesmo cliente, o servidor utiliza
a árvore já em memória para montar o HTML. Este processo faz parte do ciclo de
vida do JSF.
FIGURA 33 - ARQUITETURA DO JSF
FONTE:  SOFTPLAN, 2015 
22 CCRRIIAAÇÇÃÃOO DDAA PPRRIIMMEEIIRRAA AAPPLLIICCAAÇÇÃÃOO
Vamos agora demonstrar como criar uma pequena aplicação utilizando as
capacidades básicas do JSF. Abra o Eclipse e selecione um projeto do tipo Dynamic
Web Project, conforme a Figura 34.
FIGURA 34 - CRIAÇÃO DO PROJETO NO ECLIPSE
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
3 of 30 26/06/2024, 16:25
Fonte: O autor.
De volta a tela principal de con�guração, prossiga clicando no botão Next até
encontrar a tela mostrada na Figura 37.  Esta é a tela de con�guração da
implementação para o JPA. Sugerimos con�gurar exatamente como mostrado na
�gura, pois embora não iremos utilizar JPA no primeiro exemplo, a con�guração do
mesmo neste momento nos poupará esforço futuro. Não se esqueça de con�gurar
também a conexão com o MySQL.
FIGURA 36 - APIS UTILIZADAS
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
5 of 30 26/06/2024, 16:25
Fonte: O autor.
Prossiga pressionando o botão Next até se deparar com a tela mostrada na Figura
38. Esta tela con�gura a geração automática do arquivo beans.xml, necessário
para se utilizar CDI. Mantenha a con�guração como na �gura e pressione o botão
Finish.
FIGURA 38 - CONFIGURAÇÃO DO CDI
FONTE: O autor
Pronto! A partir de agora utilizaremos este projeto para nossos exemplos. Para
conferir se a criação foi feita corretamente, basta expandir o projeto recém-criado
no Eclipse. A estrutura de diretórios deve �car semelhante à mostrada na Figura
39.
FIGURA 39 - ESTRUTURA DO PROJETO
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
7 of 30 26/06/2024, 16:25
FONTE: O autor
O Eclipse gera um template vazio para uma página XHTML, entretanto, a
importação das bibliotecas que contém os componentes visuais já está feita. Na
Figura 41 podemos perceber a existência destas bibliotecas e sua efetiva utilização.
Entre as linhas 2 e 5 são referenciadas URLs através dos pre�xos ui, f e h. Estes
pre�xos servirão para utilizar os componentes visuais, de acordo com sua
natureza. Isto pode ser percebido através do componente head que aqui ele é
<h:head>, o que indica que a importação ocorrerá através da URL referenciado no
pre�xo h.
O exemplo contendo o código fonte completo pode ser visualizado na Figura 42. A
linha 1 foi removida para simpli�car o exemplo. Da mesma forma que no HTML, os
componentes visíveis �cam dentro da tag <body>. Na linha 11 criamos um
formulário que contém um Label, um InputText e um Button, todos componentes
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
9 of 30 26/06/2024, 16:25
que exige a presença de um intermediário entre o model e a view. Este
intermediário é o controller, que no caso do JSF é chamado de Managed Bean
(MB). Cabe ao MB mapear os componentes para o model, instanciar os objetos no
lado do servidor e também reagir aos eventos gerados na view.
O MB sempre é uma classe serializável com métodos getters e setters para
permitir o acesso aos componentes visuais. A �gura a seguir mostra o código-fonte
de um MB. Inicialmente, a anotação named permite que o MB seja visualizado
dentro dos arquivos XHTML. É por causa desta anotação que conseguimos
referenciar métodos públicos e atributos do MB. A anotação @RequestScoped
indica que o escopo do MB é de request, ou seja, os valores da árvore de objetos
devem ser mantidos somente durante o request.
FIGURA 43 – CÓDIGO-FONTE DO MB
FONTE: O autor
Para este exemplo utilizamos uma String como o objeto de domínio, para �ns de
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
11 of 30 26/06/2024, 16:25
1. O primeiro passo é a restauração da árvore de componentes. Caso seja o
primeiro acesso daquele cliente, o JSF cria a árvore de acordo com a
descrição do arquivo .xhtml. Caso não seja o primeiro acesso, a árvore é
recuperada da memória no servidor.
2. O segundo passo é a extração dos valores de campos de formulários vindos
com a requisição e atribuição dos mesmos aos respectivos componentes
dentro da árvore, atualizando-os. Neste momento ocorre também a
conversão dos dados.
3. O terceiro passo consiste na validação dos valores dos componentes que
possuírem regras de validação associadas. Por exemplo, um campo
obrigatório que é submetido sem nenhum valor ou um campo numérico que
Para entendermos de que forma o JSF se comporta na questão da árvore de
objetos em memória, e consequentemente extrairmos o máximo da tecnologia, é
essencial entender o ciclo de vida e os escopos do JSF. 
FIGURA 45 - TESTE DA APLICAÇÃO JSF
FONTE: O autor
Conforme SOFTPLAN (2015), o ciclo de vida do JSF é simplesmente a sequência dos
passos que o Front Controller do JSF executa ao receber uma requisição de um
cliente, conforme descrito a seguir:
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
13 of 30 26/06/2024, 16:25
FIGURA 46 - O CICLO DE VIDA DO JSF
FONTE: O autor
Na Figura 47, podemos perceber que a aplicação carregou normalmente no
navegador, mas o importante é conseguir observar as mensagens do console.
Neste caso, o construtor do MB foi invocado e também o método getter. É possível
ainda notar que duas instâncias do MB são criadas, ao invés de somente uma. O
motivo para tal comportamento será explicado na Unidade 3 deste Caderno de
Estudos.
Mas por que o valor de nome é igual a null? Isso ocorre devido ao próprio ciclo de
vida do JSF, onde o MB é instanciado e, como esta é a primeira requisição, a árvore
de componentes deve ser montada com base no arquivo xhtml e alocada na
memória. O último passo antes de renderizar o HTML é  atribuir os valores do MB
aos componentes visuais.Como nosso MB não possui nenhum valor,  o getNome
aparece retornando null.
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
15 of 30 26/06/2024, 16:25
navegador. Neste passo, o valor dos componentes é atualizado com o valor
existente no atributo do MB associado através da expression language.
FIGURA 48 - CONTINUAÇÃO DO CICLO DE VIDA JSF
FONTE: O autor
Cada vez que você clicar no botão Executar, uma nova instância de FormularioMB
é criada e o getNome retornará null. Este comportamento é característico da
annotation @RequestScoped, onde uma nova instância de FormularioMB é criada
a cada requisição do usuário. Esta anotação de�ne que o tempo de vida deste
objeto é marcado pela requisição do usuário.
Outro escopo existente é o SessionScope, onde o tempo de vida do MB é marcado
pela sessão do usuário. Caso nenhuma con�guração adicional seja feita, o MB se
mantém desde pressionarmos o botão até fecharmos o navegador. Este tipo de
escopo é interessante para guardar uma sessão de login do usuário, garantindo
que ele tenha passado por uma página e se identi�cado antes de acessar a parte
protegida de uma aplicação. Você já deve ter visto aplicações web onde o tempo
de sessão é de�nido em minutos, para aumentar a segurança. Em geral, este tipo
de con�guração é utilizado em aplicações de Home Banking e cartões de crédito.
Na �gura a seguir demonstramos como alterar o escopo de nosso MB para
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
17 of 30 26/06/2024, 16:25
usuários? Vou responder a esta pergunta com outra. Você se lembra de quando
acessamos nossa aplicação pela primeira vez e o servidor criou duas instâncias do
FormularioMB? O segundo usuário está acessando nossa aplicação através
daquela segunda instância, que o AS já criou para evitar o overhead de
instanciação de um novo objeto e melhorar a performance da aplicação.
Lembrando que esta característica é con�gurável.
A última experiência consiste em abrir uma instância da aplicação através de outro
navegador (se você abriu o Chrome, tente acessar a aplicação do Firefox e, em
último caso, do Internet Explorer). Observando o log no console, percebemos que
o mesmo mostra a criação de uma nova instância do FormularioMB, pois para o
servidor somos um novo usuário e nossas duas instâncias iniciais já estão
ocupadas.
Existem outros escopos no JSF além do Request e Session. Para maiores
detalhes acesse: uuaaiihheebbeerrtt..ccoomm//jjssff--mmiinnii--lliivvrroo--ddiiccaass--ccoonncceeiittooss--ee--bbooaass--pprraattii
ccaass//
Nesta unidade percorremos bastante conteúdo... entendemos o contexto onde
são aplicadas as aplicações JEE, compreendemos a necessidade de um servidor de
aplicação, criamos e con�guramos um ambiente para a criação de aplicações
enterprise e, por �m, introduzimos as Java Server Faces de forma prática,
enfatizando a caracterização de sua arquitetura e seu ciclo de vida. Nas próximas
unidades abordaremos aspectos avançados de JSF e demonstraremos o
funcionamento de outras tecnologias chave que fazem parte da especi�cação JEE,
como CDI e EJB. Novamente queremos destacar a necessidade de realização das
autoatividades e de todas as implementações que são solicitadas no caderno. É
somente através da prática que você alcançará a compreensão deste conteúco.
Nos veremos na próxima unidade.
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
19 of 30 26/06/2024, 16:25
http://uaihebert.com/jsf-mini-livro-dicas-conceitos-e-boas-praticas/
http://uaihebert.com/jsf-mini-livro-dicas-conceitos-e-boas-praticas/
http://uaihebert.com/jsf-mini-livro-dicas-conceitos-e-boas-praticas/
http://uaihebert.com/jsf-mini-livro-dicas-conceitos-e-boas-praticas/
elementos de interação, elementos que fazem parte do domínio do problema,
elementos de conexão, elementos de persistência etc. Dessa forma, na arquitetura
sempre de�nimos os seus elementos que precisarão ser utilizados no software e
como eles se conectam. Uma arquitetura complexa exige mais tempo para
desenvolvimento, porém, através de geração automática de aplicações isso pode
se tornar mais produtivo. Por isso algumas equipes de�nem um framework para
uma determinada aplicação, assim podemos utilizar muitas coisas pré-prontas que
facilitam o desenvolvimento.
No entanto, alguns padrões arquiteturais já foram pensados para resolver
problemas corriqueiros. Alguns projetos ou organizações combinam esses padrões
arquiteturais, pois atendem melhor às suas necessidades ou deram certo para o
seu tipo de aplicação. Por isso é sempre interessante entender as características
básicas de cada um dos estilos e escolher ou combinar aqueles que atendem
melhor às necessidades de um projeto especí�co, isso tudo deve ser feito após
uma análise do sistema a ser desenvolvido. Entre as arquiteturas existentes temos:
Cliente-servidor, P2P - Peer to Peer, Dados compartilhados, Máquina virtual,
Camadas, MVC e muitos outros.
No restante do artigo veremos mais sobre o padrão arquitetural MVC (Model-View-
Controller) que é um dos mais antigos e mais utilizados atualmente.
    
22 PPaaddrrããoo MMooddeell--VViieeww--CCoonnttrroolllleerr
O padrão arquitetural Model-View-Controller (MVC) é uma forma de quebrar uma
aplicação, ou até mesmo um pedaço da interface de uma aplicação, em três
partes: o modelo, a visão e o controlador.
O MVC inicialmente foi desenvolvido no intuito de mapear o método tradicional de
entrada, processamento, e saída que os diversos programas baseados em GUI
utilizavam. No padrão MVC, teríamos então o mapeamento de cada uma dessas
três partes para o padrão MVC conforme ilustra a imagem abaixo:
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
21 of 30 26/06/2024, 16:25
visão também se comunica de volta com o modelo e com o controlador para
reportar o seu estado.
Tão importante quanto explicar cada um dos objetos do padrão arquitetural MVC é
explicar como é o seu �uxo tipicamente. Primeiramente o usuário interage com a
interface (por exemplo, pressionando um botão) e o controlador gerenciar esse
evento de entrada da interface do usuário. A interface do usuário é exibida pela
visão (view), mas controlada pelo controlador. O controlador não tem nenhum
conhecimento direto da View, ele apenas envia mensagens quando ela precisa de
algo na tela atualizado. O controlador acessa o modelo, possivelmente atualizando
ela de forma apropriada para as ações do usuário (por exemplo, o controlador
solicita ao modelo que o carrinho de compras seja atualizado pelo modelo, pois o
usuário incluiu um novo item). Isto normalmente causa uma alteração no estado
do modelo tanto quanto nas informações. Por �m, a visão usa o modelo para gerar
uma interface com o usuário apropriada. A visão recebe as informações do
modelo. O modelo não tem conhecimento direto da visão. Ele apenas responde a
requisições por informações de quem quer que seja e requisita por
transformações nas informações feitas pelo controlador. Após isso, o controlador,
como um gerenciador da interface do usuário, aguarda por mais interações do
usuário, onde inicia novamente todo o ciclo.
Portanto, a principal ideia do padrão arquitetural MVC é a separação dos conceitos
- e do código. O MVC é como a clássica programação orientada a objetos, ou seja,
criar objetos que escondem as suas informações e como elas são manipuladas e
então apresentar apenas uma simples interface para o mundo. Entre as diversas
vantagens do padrão MVC estão a possibilidade de reescrita da GUI ou do
Controller sem alterar o nosso modelo, reutilização da GUI para diferentes
aplicações com pouco esforço, facilidade na manutenção e adição de recursos,
reaproveitamentode código, facilidade de manter o código sempre limpo etc.
   
33 IImmpplleemmeennttaaççããoo ddoo MMVVCC
Existem diversos frameworks para Java que implementam o padrão MVC e são
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
23 of 30 26/06/2024, 16:25
RREESSUUMMOO DDOO TTÓÓPPIICCOO
• O Java Server Faces (JSF) é o framework padrão da plataforma Java para a
construção de aplicações web com JEE.
• 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.
• O JSF funciona baseado em objetos que são mantidos em memória no
servidor e que �cam responsáveis pela geração do HTML que será enviado ao
navegador.
• 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.
• O JSF funciona através de uma arquitetura MVC, o que exige a presença de
um intermediário entre o model e a view. Este intermediário é o controller,
que no caso do JSF é chamado de Managed Bean (MB).
• Cabe ao MB mapear os componentes para o model, instanciar os objetos no
lado do servidor e também reagir aos eventos gerados na view.
• O MB sempre é uma classe serializável com métodos getters e setters para
permitir o acesso aos componentes visuais.
• No escopo marcado pela anotação @SessionScoped o tempo de vida do MB é
marcado pela sessão do usuário. Caso nenhuma con�guração adicional seja
feita, o MB se mantém desde pressionarmos o botão até fecharmos o
navegador. O escopo de Sessão é interessante para guardar uma sessão de
login do usuário, garantindo que ele tenha passado por uma página e se
identi�cado antes de acessar a parte protegida de uma aplicação.
NNeessttee ttóóppiiccoo vviimmooss qquuee:
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
25 of 30 26/06/2024, 16:25
D) 
Responder
Responder
II, III e IV
2  Diferencie e descreva a aplicabilidade das anotações @RequestScoped e
@SessionScoped:
3  Implemente uma aplicação que contenha uma tela de login e senha utilizando o
JSF. Deve existir um MB que veri�ca os valores para ver se são iguais a “admin”
para o login e “admin” para a senha. Após a validação ou não dos valores, uma
mensagem deverá ser exibida no console do AS.
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
27 of 30 26/06/2024, 16:25
B) 
C) 
D) 
Responder
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
5  O framework JSF (Java Server Faces), permite o desenvolvimento de aplicações
robustas e com vários recursos que facilitam o desenvolvimento. O JSF utiliza
classes Managed Beans, as quais permitem o controle de formulários de páginas
web dentro destas classes. Referente ao JSF e seus componentes, analise as
a�rmativas a seguir:
   
I - O Managed Bean permite que um método seu seja invocado pelo componente
do tipo “commandButton”.
II - O Managed Bean funciona como intermediário entre as camadas model e view.
III -  A anotação @RequestScoped possui a mesma funcionalidade da anotação
@SessionScoped.
IV - A anotação @SessionScoped não pode ser utilizada em um Managed  Bean.
   
Agora assinale a alternative CORRETA:
Unidade 1 - Tópico 3 
Livro Digital - Programação para Web II https://livrodigital.uniasselvi.com.br/ADS27_programacao_para_web_ii...
29 of 30 26/06/2024, 16:25