7. Aplicação web MVC [personne] – versão 3
Leituras recomendadas em [ref1]: capítulo 9
7.1. Introduction
Propomos adicionar código JavaScript às páginas HTML enviadas ao navegador. É o próprio navegador que executa o código JavaScript incorporado na página que apresenta. Esta tecnologia é independente daquela utilizada pelo servidor web para gerar o documento HTML (Java/servlets/JSP, ASP.NET, ASP, PHP, Perl, Python, ...).
[formulaire.jsp]
A visualização resultante desta página terá o seguinte aspeto:
Os botões cujo texto está emoldurado utilizam código JavaScript incorporado na página HTML:
Texto | Tipo HTML | Função |
<submit> | desempenha a função do botão [Envoyer] das versões anteriores: envia os valores introduzidos para o controlador | |
<button> | novo botão – verifica localmente a validade dos dados introduzidos antes de os enviar para o controlador | |
<reset> | Restaura o formulário ao estado em que foi inicialmente recebido pelo navegador | |
<button> | apaga o conteúdo dos dois campos de introdução de dados |
Eis um exemplo de utilização dos botões [Envoyer] e [Effacer]:
 |  |
 |  |
Iremos também utilizar código JavaScript para gerir a ligação [Retour au formulaire] das vistas [erreurs] e [réponse]. Tomemos como exemplo a vista [réponse]:
 | 1  |
A diferença está no URL apresentado em [1]. Na versão anterior, este era:
Aqui, a ação já não faz parte da URL, pois será enviada por um POST em vez de um GET. Esta alteração fará com que a única URL apresentada pelo navegador seja [http://localhost:8080/personne3/main], independentemente da ação solicitada.
7.2. O projeto Eclipse
Para criar o projeto Eclipse [mvc-personne-03] da aplicação web [/personne3], duplicaremos o projeto [mvc-personne-02], seguindo o procedimento descrito no parágrafo 6.2, página 78.
 |  |
7.3. Configuração da aplicação web [personne3]
O ficheiro web.xml da aplicação /personne3 é 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-03</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>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>
<!-- ficheiros de início -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
Este ficheiro é idêntico ao da versão anterior, com exceção de alguns detalhes:
- linha 6: o nome de exibição da aplicação web mudou para [mvc-personne-03]
O parâmetro [urlControleur] desapareceu. Na versão anterior, servia para definir o destino do POST da vista [formulaire]. Nesta nova versão, o destino será a cadeia vazia, c.a.d. A URL apresentada pelo navegador. Já explicámos que esta seria sempre [http://localhost:8080/personne3/main], a que precisamos para o POST da vista [formulaire].
A página inicial [index.jsp] altera-se:
<%@ 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("/personne3/main");
%>
- linha 5: a página [index.jsp] redireciona o cliente para o URL do controlador [ServletPersonne] da aplicação [/personne3].
7.4. O código das vistas
7.4.1. A vista [formulaire]
Esta vista passou a ter o seguinte aspeto:
É gerada pela página JSP [formulaire.jsp] seguinte:
<%@ 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) session.getAttribute("nom");
String age = (String) session.getAttribute("age");
%>
<html>
<head>
<title>Personne - formulaire</title>
<script language="javascript">
// -------------------------------
function effacer(){
// limpa-se os campos de introdução de dados
with(document.frmPersonne){
txtNom.value="";
txtAge.value="";
}//com
}//apagar
// -------------------------------
function envoyer(){
// verificação dos parâmetros antes do envio
with(document.frmPersonne){
// o nome não pode estar vazio
champs=/^\s*$/.exec(txtNom.value);
if(champs!=null){
// o nome está vazio
alert("Vous devez indiquer un nom");
txtNom.value="";
txtNom.focus();
// regresso à interface visual
return;
}//if
// a idade deve ser um número inteiro positivo
champs=/^\s*\d+\s*$/.exec(txtAge.value);
if(champs==null){
// a idade está incorreta
alert("Age incorrect");
txtAge.focus();
// voltar à interface visual
return;
}//if
// os parâmetros estão corretos — enviam-se para o servidor
submit();
}//com
}//enviar
</script>
</head>
<body>
<center>
<h2>Personne - formulaire</h2>
<hr>
<form name="frmPersonne" 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="Submit"></td>
<td><input type="button" value="[Envoyer]" onclick="envoyer()"></td>
<td><input type="reset" value="Rétablir"></td>
<td><input type="button" value="[Effacer]" onclick="effacer()"></td>
</tr>
</table>
<input type="hidden" name="action" value="validationFormulaire">
</form>
</center>
</body>
</html>
Novidades:
- linha 56: o formulário tem o nome [frmPersonne]. Este nome será utilizado no código JavaScript. De notar a ausência do atributo [action], o que faz com que o formulário [frmPersonne] seja enviado para o URL apresentado pelo navegador.
- linha 70: o botão [Submit] desempenha a função do botão [Envoyer] das versões anteriores
- linha 71: um clique no botão [Envoyer], do tipo [Button], executa a função JavaScript [envoyer] definida na linha 24
- linha 72: o botão [Rétablir] não sofreu alterações na sua função
- linha 73: ao clicar no botão [Effacer], do tipo [Button], é executada a função JavaScript [effacer], definida na linha 16
Antes de comentar o código JavaScript, recordemos algumas notas:
O JavaScript gere a página apresentada e o seu conteúdo como uma árvore de objetos cuja raiz é o objeto [document]. Neste documento, pode haver um ou mais formulários. [document.frmPersonne] designa o formulário com o nome [frmPersonne], definido na linha 56. Este formulário também contém objetos. Os campos de introdução de dados fazem parte desses objetos. Assim, [document.frmPersonne.txtNom] designa o objeto de imagem do campo de introdução de dados HTML, definido na linha 60. O objeto [txtNom] possui várias propriedades, entre as quais a propriedade [value], que designa o conteúdo do campo de entrada. Assim, [document.frmPersonne.txtNom.value] designa o conteúdo do campo de entrada [txtNom].
- linhas 16-22: a função JavaScript [effacer] insere uma cadeia de caracteres vazia nos campos de entrada [txtNom, txtAge].
- linhas 24-49: a função JavaScript [envoyer] verifica a validade dos valores dos campos de entrada [txtNom, txtAge] antes de os enviar. Para tal, utiliza expressões regulares.
- linha 28: verifica se o valor do campo de entrada [txtNom] corresponde ao padrão /s*, que significa 0 ou mais espaços. Se a resposta for sim, isso significa que o utilizador não indicou nenhum nome. Se houver correspondência com o padrão, a variável champs terá um valor diferente do ponteiro null; caso contrário, terá o valor null.
- linha 29: se houver correspondência com o modelo
- linha 30: é exibida uma mensagem ao utilizador
- linha 32: insere-se a cadeia vazia no campo [txtNom] (poderia haver uma sequência de espaços)
- linha 33: posiciona-se o cursor intermitente no campo [txtNom]
- linha 34: interrompe-se a função. Assim, não há nenhum POST no servidor com os valores introduzidos.
- linhas 38-45: segue-se um procedimento semelhante com o campo [txtAge]
- linha 47: se chegarmos até aqui, significa que os valores introduzidos estão corretos. Enviamos (submit) então o formulário [frmPersonne] para o servidor web. Tudo decorre então como se tivéssemos clicado no botão com a legenda [Submit].
7.4.2. A vista [reponse]
Esta vista apresenta os valores introduzidos no formulário quando estes são válidos:
 |  |
Em comparação com a versão anterior, a novidade só aparece quando se utiliza o link [Retour au formulaire] da vista [réponse]:
|  |
A diferença reside no URL apresentado em [1]. Na versão anterior, este era:
Aqui, a ação já não faz parte da URL, pois será enviada por um POST em vez de um GET. A nova página JSP [reponse.jsp] é lqqqaaaaaaaaaqqAAAaaa
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>
<form name="frmPersonne" method="post">
<input type="hidden" name="action" value="retourFormulaire">
</form>
<a href="javascript:document.frmPersonne.submit();">
<%= lienRetourFormulaire %>
</a>
</body>
</html>
Novidades:
- linhas 35-37: o link [Retour au formulaire] contém JavaScript. Ao clicar neste link, o código JavaScript do atributo [href] é executado. Tal como vimos na análise de [formulaire.jsp], sabemos que este código envia os valores dos campos do tipo <input>, <select>, ... do formulário [frmPersonne].
- linhas 32-34: definem o formulário [frmPersonne]. Este tem apenas um campo do tipo <input type="hidden" ...>, ou seja, um campo oculto. Este campo [action] serve para transmitir ao controlador o nome da ação a executar, neste caso [retourFormulaire].
7.4.3. A vista [erreurs]
Esta vista assinala os erros de introdução de dados no formulário. A alteração introduzida é a mesma que na vista [réponse]:
 |  |
A diferença reside no URL apresentado em [1]. Na versão anterior, este era:
Aqui, a ação já não faz parte da URL, pois será enviada por um POST em vez de um GET. A nova página JSP [reponse.jsp] seguinte:
<%@ 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" %>
<%
// recuperam-se 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>
<form name="frmPersonne" method="post">
<input type="hidden" name="action" value="retourFormulaire">
</form>
<a href="javascript:document.frmPersonne.submit();">
<%= lienRetourFormulaire %>
</a>
</body>
</html>
Novidades:
- linhas 30-32: o novo tratamento do clique no link. As explicações fornecidas sobre este assunto no estudo de [réponse.jsp] aplicam-se igualmente aqui.
7.5. Testes das visualizações
Para realizar os testes das vistas anteriores, duplicamos as respetivas páginas JSP na pasta /WebContent/JSP do projeto Eclipse:
Em seguida, na pasta JSP, as páginas são alteradas da seguinte forma:
[formulaire.jsp]:
...
<%
// -- teste: cria-se o modelo da página
session.setAttribute("nom","tintin");
session.setAttribute("age","30");
%>
<%// recuperam-se os dados do modelo
String nom = (String) session.getAttribute("nom");
String age = (String) session.getAttribute("age");
%>
As linhas 4-5 foram adicionadas para criar o modelo necessário à página das linhas 9-10.
[reponse.jsp]:
...
<%
// -- teste: cria-se o modelo da página
request.setAttribute("nom","milou");
request.setAttribute("age","10");
request.setAttribute("lienRetourFormulaire","Retour au formulaire");
%>
<%
// recuperam-se 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-6 foram adicionadas para criar o modelo necessário para a página das linhas 11-13.
[erreurs.jsp]:
<%
// -- teste: cria-se 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-8 foram adicionadas para criar o modelo necessário para a página das linhas 13-14.
Inicie o Tomcat, se ainda não o tiver feito, e, em seguida, aceda aos seguintes URLs:
 |  |
 |
Conseguimos, de facto, as visualizações esperadas.
7.6. O controlador [ServletPersonne]
O controlador [ServletPersonne] da aplicação web [/personne3] irá processar as seguintes ações:
n.º | pedido | origem | processamento |
1 | [GET /personne3/main] | URL introduzida pelo utilizador | - enviar a vista [formulaire] vazia |
2 | [POST /personne3/main] com parâmetros [txtNom, txtAge, action=validationFormulaire] enviados | clicando no botão [Envoyer] da vista [formulaire] | - verificar os valores dos parâmetros [txtNom, txtAge] - se estiverem incorretos, enviar a vista [erreurs(erreurs)] - se estiverem corretos, enviar a vista [reponse(nom,age)] |
3 | [POST /personne3/main] com parâmetros [action=retourFormulaire] ostés | clique na ligação [Voltar ao formulário] nas visualizações [réponse] e [erreurs]. | - enviar a vista [formulaire] pré-preenchida com os últimos valores introduzidos |
Temos, portanto, uma nova ação a tratar: [POST /personne3/main] com o parâmetro enviado [action=retourFormulaire], em substituição da antiga ação [GET /personne3/main?action=retourFormulaire].
7.6.1. Estrutura do controlador
A estrutura do controlador [ServletPersonne] é idêntica à da versão anterior.
Novidades:
- na linha 11, a tabela [paramètres] já não contém o parâmetro [urlControleur], que foi removido do ficheiro [web.xml].
Os métodos [init, doValidationFormulaire] permanecem inalterados. Os métodos [doGet, doInit, doRetourFormulaire] sofrem pequenas alterações.
7.6.2. O método [doGet]
O método [doGet] deve processar a ação [POST /personne3/main] com o parâmetro enviado [action=retourFormulaire]:
- linhas 6-9: processamento da ação [POST /personne3/main] com o parâmetro enviado [action=retourFormulaire]
7.6.3. O método [doInit]
Este método processa a solicitação n.º 1 [GET /personne3/main]. O seu código é o seguinte:
A novidade é que a vista [formulaire] apresentada na linha 8 já não inclui o elemento [action] no seu modelo.
7.6.4. O método [doRetourFormulaire]
Este método processa a solicitação n.º 1 [POST /personne3/main] com [action=retourFormulaire] nos elementos enviados. O seu código é o seguinte:
A novidade é que a vista [formulaire] apresentada na linha 14 já não inclui o elemento [action] no seu modelo.
7.7. Tests
Inicie ou reinicie o Tomcat após ter integrado o projeto Eclipse [personne-mvc-03]. Aceda à URL [http://localhost:8080/personne3] e, em seguida, retome os testes apresentados como exemplo no parágrafo 7.1.