6. Aplicativo web MVC [personne] – versão 2
Agora, vamos propor variantes da aplicação [/personne1] anterior, que chamaremos de [/personne2, /personne3, ...]. Essas variantes não alteram a arquitetura inicial da aplicação, que permanece a seguinte:
Para essas variantes, nossas explicações serão mais sucintas. Apresentaremos apenas as alterações feitas em relação à versão anterior.
6.1. Introduction
Propomos agora adicionar à nossa aplicação um gerenciamento de sessão. Vale lembrar os seguintes pontos:
- o diálogo cliente-servidor HTTP é uma sequência de trocas de solicitação-resposta independentes entre si
- a sessão funciona como memória entre diferentes sequências de solicitação-resposta de um mesmo usuário. Se houver N usuários, haverá N sessões.
A sequência de telas a seguir mostra o que agora se deseja no funcionamento do aplicativo:
Intercâmbio n.º 1
 |  |
A novidade é o link de retorno ao formulário, que foi adicionado à visualização [erreurs].
Troca n.º 2
 |  |
Na troca nº 1, o usuário forneceu os valores (xx, yy) para o par (nome, idade). Se, durante a troca, o servidor tomou conhecimento desses valores, ao final da troca ele os “esquece”. No entanto, pode-se observar que, durante a troca nº 2, ele é capaz de exibir novamente esses valores em sua resposta. É o conceito de sessão que, neste caso, permitirá que o servidor web memorize dados ao longo das sucessivas trocas cliente-servidor. Existem outras soluções possíveis para resolver esse problema.
Durante a troca nº 1, o servidor memorizará na sessão o par (nome, idade) que o cliente lhe enviou, a fim de poder exibi-lo durante a troca nº 2.
Aqui está outro exemplo de implementação da sessão entre duas trocas:
Intercâmbio nº 1
 |  |
A novidade é o link de retorno ao formulário, que foi adicionado à página da resposta.
Troca n.º 2
 |  |
6.2. O projeto Eclipse
Para criar o projeto Eclipse [mvc-personne-02] da aplicação web [/personne2], vamos duplicar o projeto Eclipse [mvc-personne-01] a fim de recuperar o que já existe. Para isso, procedamos da seguinte maneira:
[clic droit sur projet mvc-personne-01 -> Copy]:
e, em seguida, [clic droit dans Package Explorer -> Paste]:
 |  - definamos em [1] o nome do novo projeto e em [2] o nome de uma pasta existente, porém vazia |
O projeto [mvc-personne-02] é então criado:
Por enquanto, ele é idêntico ao projeto [mvc-personne-01]. Precisaremos fazer algumas alterações manualmente antes de poder utilizá-lo. Vamos para a visualização [Servers] e tentemos adicionar esse novo aplicativo aos gerenciados pelo Tomcat:
 |  |
Percebe-se que, no [1], o novo projeto [mvc-personne-02] não é reconhecido pelo Tomcat. Para que ele o reconheça, é necessário modificar um arquivo de configuração do projeto [mvc-personne-02]. Vamos usar a opção [File / Open File] para abrir o arquivo [<mvc-personne-02>/.settings/.component]:
<?xml version="1.0" encoding="UTF-8"?>
<project-modules id="moduleCoreId">
<wb-module deploy-name="mvc-personne-01">
<wb-resource deploy-path="/" source-path="/WebContent"/>
<wb-resource deploy-path="/WEB-INF/classes" source-path="/src"/>
<property name="java-output-path" value="/build/classes/"/>
<property name="context-root" value="personne1"/>
</wb-module>
</project-modules>
A linha 3 indica o nome do módulo web a ser implantado no Tomcat. Esse nome, neste caso, é o mesmo do projeto [mvc-personne-01]. Vamos alterá-lo para [mvc-personne-02]:
<wb-module deploy-name="mvc-personne-02">
Além disso, podemos aproveitar para alterar, na linha 7, o nome do contexto da aplicação [mvc-personne-02], que está em conflito com o do projeto [mvc-personne-01]:
<property name="context-root" value="personne2"/>
Essa segunda alteração poderia ter sido feita diretamente no Eclipse. Por outro lado, não vi como fazer a primeira sem passar pelo arquivo de configuração.
Feito isso, salvamos o novo arquivo [.content], saímos e reiniciamos o Eclipse para que as alterações sejam aplicadas.
Depois que o Eclipse for reiniciado, vamos tentar realizar a operação que falhou anteriormente:
|  |
Desta vez, o projeto [mvc-personne-02] é reconhecido corretamente. Nós o adicionamos aos projetos configurados para serem executados pelo Tomcat:
6.3. Configuração da aplicação web [personne2]
O arquivo web.xml da aplicação /pessoa2 é o seguinte:
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>mvc-personne-02</display-name>
<!-- ServletPersonne -->
<servlet>
<servlet-name>personne</servlet-name>
<servlet-class>
istia.st.servlets.personne.ServletPersonne
</servlet-class>
<init-param>
<param-name>urlReponse</param-name>
<param-value>
/WEB-INF/vues/reponse.jsp
</param-value>
</init-param>
<init-param>
<param-name>urlErreurs</param-name>
<param-value>
/WEB-INF/vues/erreurs.jsp
</param-value>
</init-param>
<init-param>
<param-name>urlFormulaire</param-name>
<param-value>
/WEB-INF/vues/formulaire.jsp
</param-value>
</init-param>
<init-param>
<param-name>urlControleur</param-name>
<param-value>
main
</param-value>
</init-param>
<init-param>
<param-name>lienRetourFormulaire</param-name>
<param-value>
Retour au formulaire
</param-value>
</init-param>
</servlet>
<!-- Mapeamento ServletPersonne-->
<servlet-mapping>
<servlet-name>personne</servlet-name>
<url-pattern>/main</url-pattern>
</servlet-mapping>
<!-- arquivos de recepção -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
Esse arquivo é idêntico ao da versão anterior, exceto pelo fato de declarar dois novos parâmetros de inicialização:
- linha 6: o nome de exibição da aplicação web mudou para [mvc-personne-02]
- linhas 31-36: definem o parâmetro de configuração denominado [urlControleur], que é a URL [main] que leva ao servlet [ServletPersonne]
- linhas 37-42: definem um parâmetro de configuração chamado [lienRetourFormulaire], que é o texto do link de retorno ao formulário nas páginas JSP, [erreurs.jsp] e [reponse.jsp].
A página inicial [index.jsp] é alterada:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
response.sendRedirect("/personne2/main");
%>
- linha 5: a página [index.jsp] redireciona o cliente para a URL do controlador [ServletPersonne] do aplicativo [/personne2].
6.4. O código das visualizações
6.4.1. A visualização [formulaire]
Esta visualização é idêntica à da versão anterior:
Ela é gerada pela página JSP [formulaire.jsp] a seguir:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
// os dados do modelo são recuperados
String nom=(String)session.getAttribute("nom");
String age=(String)session.getAttribute("age");
String urlAction=(String)request.getAttribute("urlAction");
%>
<html>
<head>
<title>Personne - formulaire</title>
</head>
<body>
<center>
<h2>Personne - formulaire</h2>
<hr>
<form action="<%=urlAction%>" method="post">
<table>
<tr>
<td>Nom</td>
<td><input name="txtNom" value="<%= nom %>" type="text" size="20"></td>
</tr>
<tr>
<td>Age</td>
<td><input name="txtAge" value="<%= age %>" type="text" size="3"></td>
</tr>
<tr>
</table>
<table>
<tr>
<td><input type="submit" value="Envoyer"></td>
<td><input type="reset" value="Rétablir"></td>
<td><input type="button" value="Effacer"></td>
</tr>
</table>
<input type="hidden" name="action" value="validationFormulaire">
</form>
</center>
</body>
</html>
Novidades:
- na linha 19, o formulário agora possui um atributo [action] cujo valor é a URL para a qual o navegador deverá enviar os valores do formulário quando o usuário clicar no botão [Envoyer] do tipo submit. A variável [urlAction] terá o valor action="main". A visualização [formulaire] é exibida após as seguintes ações do usuário:
- solicitação inicial: GET /pessoa2/main
- clique no link [Retour au formulaire]: GET /pessoa2/main?action=retourFormulaire
Como o atributo [action] não especifica uma URL absoluta (que começa com /), mas sim uma URL relativa (que não começa com /), o navegador utilizará a primeira parte da URL da página atualmente exibida, [/personne2], e adicionará a URL relativa a ela. A URL de POST será, portanto, [/personne2/main], a do controlador. Essa solicitação POST será acompanhada pelos parâmetros [txtNom, txtAge, action] das linhas 23, 27 e 38.
- linha 8: recupera-se o valor do elemento [urlAction] do modelo. Ele é buscado nos atributos da solicitação atual. Será utilizado na linha 19.
- linhas 6-7: recuperam-se os valores dos elementos [nom, age] do modelo. Eles são buscados nos atributos da sessão e não mais nos da consulta, como na versão anterior. Isso para atender às necessidades da consulta [GET /personne2/main?action=retourFormulaire] do link das visualizações [réponse] e [erreurs]. Antes de exibir essas duas visualizações, o controlador armazena na sessão os dados inseridos no formulário, o que lhe permite recuperá-los quando o usuário utiliza o link [Retour au formulaire] das visualizações [réponse] e [erreurs].
6.4.2. A visualização [reponse]
Essa visualização exibe os valores inseridos no formulário quando estes são válidos:
 | |
Em relação à versão anterior, a novidade está no link [Retour au formulaire]. A visualização é gerada pela página JSP [reponse.jsp] a seguir:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
// recuperam-se os dados do modelo
String nom=(String)request.getAttribute("nom");
String age=(String)request.getAttribute("age");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
<html>
<head>
<title>Personne</title>
</head>
<body>
<h2>Personne - réponse</h2>
<hr>
<table>
<tr>
<td>Nom</td>
<td><%= nom %>
</tr>
<tr>
<td>Age</td>
<td><%= age %>
</tr>
</table>
<br>
<a href="?action=retourFormulaire"><%= lienRetourFormulaire %></a>
</body>
</html>
- linha 31: o link de retorno ao formulário. Esse link possui dois componentes:
- o destino [href="?action=retourFormulaire"]. A visualização [réponse] é exibida após a POST do formulário [formulaire.jsp] na URL [/personne2/main]. Portanto, é essa última URL que é exibida no navegador quando a visualização [réponse] é exibida. Um clique no link [Retour au formulaire] provocará, então, uma solicitação GET do navegador para a URL especificada pelo atributo [href] do link, neste caso “?action=retourFormulaire”. Na ausência de uma URL em [href], o navegador utilizará a da visualização atualmente exibida, c.a.d. [/personne2/main]. Por fim, clicar no link [Retour au formulaire] provocará uma solicitação GET do navegador para a URL [/personne2/main?action=retourFormulaire], c.a.d, a URL do controlador do aplicativo, acompanhada do parâmetro [action] para indicar a ele o que deve fazer.
- o texto do link. Esse texto fará parte do modelo transmitido à página pelo controlador e recuperado na linha 10.
6.4.3. A visualização [erreurs]
Esta vista sinaliza os erros de preenchimento no formulário:
| |
Em relação à versão anterior, a novidade vem do link [Retour au formulaire]. A visualização é gerada pela página JSP [erreurs.jsp] a seguir:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page import="java.util.ArrayList" %>
<%
// recuperando os dados do modelo
ArrayList erreurs=(ArrayList)request.getAttribute("erreurs");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
<html>
<head>
<title>Personne</title>
</head>
<body>
<h2>Les erreurs suivantes se sont produites</h2>
<ul>
<%
for(int i=0;i<erreurs.size();i++){
out.println("<li>" + (String) erreurs.get(i) + "</li>\n");
}//para
%>
</ul>
<br>
<a href="?action=retourFormulaire"><%= lienRetourFormulaire %></a>
</body>
</html>
- linha 26: o link de retorno ao formulário. Esse link é idêntico ao da visualização [réponse]. Recomenda-se ao leitor que, se necessário, releia as explicações fornecidas para essa visualização.
6.5. Testes das visualizações
Para realizar os testes das visualizações anteriores, duplicamos suas páginas JSP na pasta /WebContent/JSP do projeto Eclipse:
Em seguida, na pasta JSP, as páginas são modificadas da seguinte maneira:
[formulaire.jsp]:
...
<%
// -- teste: cria-se o modelo da página
session.setAttribute("nom","tintin");
session.setAttribute("age","30");
request.setAttribute("urlAction","main");
%>
<%
// recuperam-se os dados do modelo
String nom=(String)session.getAttribute("nom");
String age=(String)session.getAttribute("age");
String urlAction=(String)request.getAttribute("urlAction");
%>
As linhas 4-5 foram adicionadas para criar o modelo necessário para a página nas linhas 11-13.
[reponse.jsp]:
<%
// -- teste: cria-se o modelo da página
request.setAttribute("nom","milou");
request.setAttribute("age","10");
request.setAttribute("lienRetourFormulaire","Retour au formulaire");
%>
<%
// recuperamos os dados do modelo
String nom=(String)request.getAttribute("nom");
String age=(String)request.getAttribute("age");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
As linhas 4 a 6 foram adicionadas para criar o modelo necessário para a página das linhas 11 a 13.
[erreurs.jsp]:
<%
// -- teste: criamos o modelo da página
ArrayList<String> erreurs1=new ArrayList<String>();
erreurs1.add("erreur1");
erreurs1.add("erreur2");
request.setAttribute("erreurs",erreurs1);
request.setAttribute("lienRetourFormulaire","Retour au formulaire");
%>
<%
// recuperam-se os dados do modelo
ArrayList erreurs=(ArrayList)request.getAttribute("erreurs");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
As linhas 4 a 8 foram adicionadas para criar o modelo necessário para a página das linhas 13 a 14.
Vamos iniciar o Tomcat, caso ainda não tenha sido feito, e acessar as seguintes URLs:
 |  |
 |
Conseguimos, de fato, as visualizações esperadas.
6.6. O controlador [ServletPersonne]
O controlador [ServletPersonne] do aplicativo web [/personne2] processará as seguintes ações:
n.º | solicitação | origem | processamento |
1 | [GET /personne2/main] | URL digitada pelo usuário | - enviar a visualização [formulaire] vazia |
2 | [POST /personne2/main] com parâmetros [txtNom, txtAge, ação] enviados | clicar no botão [Envoyer] da visualização [formulaire] | - verificar os valores dos parâmetros [txtNom, txtAge] - se estiverem incorretos, enviar a visualização [erreurs(erreurs)] - se estiverem corretos, enviar a visualização [reponse(nom,age)] |
3 | [GET /pessoa2/main? action=retourFormulaire] | clique no link [Voltar ao formulário] das visualizações resposta] e [erreurs]. | - enviar a visualização [formulaire] pré-preenchida com os últimos valores inseridos |
Portanto, temos uma nova ação a ser processada: [GET /personne2/main?action=retourFormulaire].
6.6.1. Estrutura do controlador
A estrutura do controlador [ServletPersonne] é praticamente idêntica à da versão anterior:
Novidades:
- linha 4: o uso de uma sessão exige a importação do pacote [HttpSession]
- linhas 28-30: o novo método [doRetourFormulaire] processa a nova ação: [GET /personne2/main?action=retourFormulaire].
6.6.2. Inicialização do controlador [init]
O método [init] é idêntico ao da versão anterior. Ele verifica a presença, no arquivo [web.xml], dos elementos declarados na tabela [paramètres]:
- linha 5: os parâmetros [urlControleur] (URL do controlador) e [lienRetourFormulaire] (texto do link das visualizações [réponse] e [erreurs]) foram adicionados.
6.6.3. O método [doGet]
O método [doGet] deve processar a ação [GET /personne2/main?action=retourFormulaire], que não existia anteriormente:
- linhas 6-14: verifica-se se a lista de erros de inicialização está vazia. Caso contrário, exibe-se a visualização [erreurs(erreursInitialisation)], que sinalizará o(s) erro(s).
Para entender esse código, é preciso lembrar o modelo da visualização [erreurs]:
<%
// recuperação dos dados do modelo
ArrayList erreurs=(ArrayList)request.getAttribute("erreurs");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
A visualização [erreurs] espera um elemento-chave “erros” na consulta. O controlador cria esse elemento na linha 8. Ela também espera um elemento-chave “lienRetourFormulaire”. O controlador cria esse elemento na linha 9. Aqui, o texto do link ficará vazio. Portanto, não haverá nenhum link na visualização [erreurs] enviada. De fato, se ocorreram erros na inicialização do aplicativo, ele deve ser reconfigurado. Não há motivo para oferecer ao usuário a opção de continuar o aplicativo por meio de um link.
- linhas 34-37: processamento da nova ação [GET /personne2/main?action=retourFormulaire]
6.6.4. O método [doInit]
Este método processa a solicitação nº 1 [GET /personne2/main]. Nessa solicitação, ele deve enviar a visualização [formulaire(nom,age)] vazia. Seu código é o seguinte:
- linha 4: a sessão atual é recuperada, se existir; caso contrário, é criada (parâmetro true de getSession).
- linhas 9-10: a visualização [formulaire] é exibida. Vale lembrar o modelo esperado por essa visualização:
<%
// recuperação dos dados do modelo
String nom=(String)session.getAttribute("nom");
String age=(String)session.getAttribute("age");
String urlAction=(String)request.getAttribute("urlAction");
%>
- linhas 6-7: os elementos [nom,age] do modelo da visualização [formulaire] são inicializados com cadeias vazias e colocados na sessão, pois é lá que a visualização os espera.
- linha 8: o elemento [urlAction] do modelo é inicializado com o valor do parâmetro [urlControleur] do arquivo [web.xml] e colocado na consulta.
6.6.5. O método [doValidationFormulaire]
Este método processa a solicitação nº 2, [POST /personne2/main], na qual os parâmetros enviados são [action, txtNom, txtAge]. Seu código é o seguinte:
- linhas 5-6: recuperam-se da solicitação do cliente os valores dos parâmetros “txtNom” e “txtAge”.
- linhas 8-10: esses valores são armazenados na sessão para que possam ser recuperados quando o usuário clicar no link [Retour au formulaire] nas visualizações [réponse] e [erreurs].
- linhas 12-19: verifica-se a validade dos valores dos dois parâmetros
- linhas 21-28: se algum dos parâmetros estiver incorreto, exibe-se a visão [erreurs(erreurs,lienRetourFormulaire)]. Vale lembrar o modelo dessa visão:
<%
// recuperando os dados do modelo
ArrayList erreurs=(ArrayList)request.getAttribute("erreurs");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
- linhas 30-34: se os dois parâmetros “txtNom” e “txtAge” recuperados tiverem valores válidos, exibe-se a visão [reponse(nom,age,lienRetourFormulaire)]. É preciso lembrar o modelo da visualização [reponse]:
<%
// recuperando os dados do modelo
String nom=(String)request.getAttribute("nom");
String age=(String)request.getAttribute("age");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
6.6.6. O método [doRetourFormulaire]
Este método processa a consulta nº 3, [GET /personne2/main?action=retourFormulaire]. Seu código é o seguinte:
Ao final deste método, deve-se exibir a visualização [formulaire] pré-preenchida com as últimas entradas feitas pelo usuário. Vale lembrar o modelo da visualização [formulaire]:
<%
// recuperam-se os dados do modelo
String nom=(String)session.getAttribute("nom");
String age=(String)session.getAttribute("age");
String urlAction=(String)request.getAttribute("urlAction");
%>
O método [doRetourFormulaire] deve, portanto, construir o modelo anterior.
- linha 4: recupera-se a sessão na qual o controlador armazenou os valores (nome, idade) inseridos.
- linha 7: recupera-se o nome da sessão
- linhas 8-9: se ele não estiver lá, é inserido com um valor vazio. Esse caso não deveria ocorrer no funcionamento normal do aplicativo, já que a ação [retourFormulaire] sempre ocorre após a ação [validationFormulaire], ou seja, após o armazenamento dos dados inseridos na sessão. No entanto, uma sessão pode expirar, pois tem uma duração limitada, geralmente algumas dezenas de minutos. Nesse caso, a linha 4 recriou uma nova sessão na qual o nome não estará presente. Coloca-se, então, um nome vazio na nova sessão.
- linhas 11-13: faz-se o mesmo para a idade
- Se ignorarmos o problema da sessão expirada, as linhas 3 a 13 são desnecessárias. Os elementos [nom,age] do modelo já estão na sessão. Portanto, não é necessário inseri-los novamente.
- linha 15: define-se o valor do elemento [urlAction] do modelo
6.7. Tests
Inicie ou reinicie o Tomcat. Acesse a URL [http://localhost:8080/personne2] e, em seguida, retome os testes apresentados como exemplo no parágrafo 6.1.