7. Applicazione Web MVC [person] – Versione 3
Lettura consigliata in [ref1]: Capitolo 9
7.1. Introduzione
Proponiamo di aggiungere codice JavaScript alle pagine HTML inviate al browser. È il browser che esegue il codice JavaScript incorporato nella pagina che visualizza. Questa tecnologia è indipendente da quella utilizzata dal server web per generare il documento HTML (Java/servlet/JSP, ASP.NET, ASP, PHP, Perl, Python, ...).
[form.jsp]
La vista generata da questa pagina avrà questo aspetto:
I pulsanti con il testo all'interno di un riquadro utilizzano codice JavaScript incorporato nella pagina HTML:
Etichetta | Tipo HTML | Funzione |
<submit> | Funziona come il pulsante [Invia] nelle versioni precedenti: invia i valori inseriti al controller | |
<button> | Nuovo pulsante – verifica localmente la validità dei dati inseriti prima di inviarli al controller | |
<reset> | ripristina il modulo allo stato in cui è stato inizialmente ricevuto dal browser | |
<button> | cancella il contenuto di entrambi i campi di immissione |
Ecco un esempio di come utilizzare i pulsanti [Invia] e [Cancella]:
 |  |
 |  |
Utilizzeremo inoltre del codice JavaScript per gestire il link [Torna al modulo] nelle viste [errori] e [risposta]. Prendiamo come esempio la vista [risposta]:
 | 1  |
La differenza sta nell'URL visualizzato in [1]. Nella versione precedente era:
Qui, l'azione non fa più parte dell'URL perché verrà inviata tramite una richiesta POST anziché una richiesta GET. Questa modifica implica che l'unico URL visualizzato dal browser sarà [http://localhost:8080/personne3/main] indipendentemente dall'azione richiesta.
7.2. Il progetto Eclipse
Per creare il progetto Eclipse [mvc-personne-03] per l'applicazione web [/personne3], duplicare il progetto [mvc-personne-02] seguendo la procedura descritta nella sezione 6.2, pagina 78.
 |  |
7.3. Configurazione dell'applicazione web [personne3]
Il file web.xml per l'applicazione /personne3 è il seguente:
<?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>
<!-- Mapping ServletPersonne-->
<servlet-mapping>
<servlet-name>personne</servlet-name>
<url-pattern>/main</url-pattern>
</servlet-mapping>
<!-- welcome files -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
Questo file è identico a quello della versione precedente, tranne che per alcuni dettagli:
- riga 6: il nome visualizzato dell'applicazione web è cambiato in [mvc-personne-03]
Il parametro [urlController] è stato rimosso. Nella versione precedente, veniva utilizzato per impostare la destinazione POST per la vista [form]. In questa nuova versione, la destinazione sarà la stringa vuota, ovvero l'URL visualizzato dal browser. Abbiamo spiegato che questo sarà sempre [http://localhost:8080/personne3/main], che è ciò di cui abbiamo bisogno per la richiesta POST dalla vista [form].
La pagina iniziale [index.jsp] cambia:
<%@ 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");
%>
- Riga 5: La pagina [index.jsp] reindirizza il client all'URL del controller [ServletPersonne] nell'applicazione [/personne3].
7.4. Il codice della vista
7.4.1. La vista [form]
Questa vista è diventata la seguente:
È generata dalla seguente pagina JSP [formulaire.jsp]:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%// on récupère les données du modèle
String nom = (String) session.getAttribute("nom");
String age = (String) session.getAttribute("age");
%>
<html>
<head>
<title>Personne - formulaire</title>
<script language="javascript">
// -------------------------------
function effacer(){
// on efface les champs de saisie
with(document.frmPersonne){
txtNom.value="";
txtAge.value="";
}//with
}//effacer
// -------------------------------
function envoyer(){
// vérification des paramètres avant de les envoyer
with(document.frmPersonne){
// le nom ne doit pas être vide
champs=/^\s*$/.exec(txtNom.value);
if(champs!=null){
// le nom est vide
alert("Vous devez indiquer un nom");
txtNom.value="";
txtNom.focus();
// retour à l'interface visuelle
return;
}//if
// l'âge doit être un entier positif
champs=/^\s*\d+\s*$/.exec(txtAge.value);
if(champs==null){
// l'âge est incorrect
alert("Age incorrect");
txtAge.focus();
// retour à l'interface visuelle
return;
}//if
// les paramètres sont corrects - on les envoie au serveur
submit();
}//with
}//envoyer
</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>
Novità:
- Riga 56: Il modulo ha un nome [frmPersonne]. Questo nome verrà utilizzato nel codice JavaScript. Si noti l'assenza dell'attributo [action], il che significa che il modulo [frmPersonne] verrà inviato all'URL visualizzato dal browser.
- Riga 70: Il pulsante [Submit] ha la stessa funzione del pulsante [Envoyer] nelle versioni precedenti
- Riga 71: Cliccando sul pulsante [Envoyer] (di tipo [Button]) si esegue la funzione JavaScript [envoyer] definita alla riga 24
- Riga 72: Il pulsante [Reset] non ha cambiato la sua funzione
- Riga 73: cliccando sul pulsante [Clear] (tipo [Button]) si esegue la funzione JavaScript [clear] definita alla riga 16
Prima di commentare il codice JavaScript, rivediamo alcune convenzioni:
JavaScript gestisce la pagina visualizzata e il suo contenuto come un albero di oggetti la cui radice è l’oggetto [document]. Questo documento può contenere uno o più moduli. [document.frmPersonne] si riferisce al modulo denominato [frmPersonne] definito alla riga 56. Anche questo modulo contiene oggetti. I campi di immissione ne fanno parte. Pertanto, [document.frmPersonne.txtName] si riferisce all'oggetto che rappresenta il campo di immissione HTML definito alla riga 60. L'oggetto [txtName] ha varie proprietà, tra cui la proprietà [value], che si riferisce al contenuto del campo di immissione. Pertanto, [document.frmPersonne.txtName.value] si riferisce al contenuto del campo di immissione [txtName].
- righe 16–22: La funzione JavaScript [clear] imposta una stringa vuota nei campi di immissione [txtName, txtAge].
- Righe 24–49: La funzione JavaScript [submit] verifica la validità dei valori nei campi di immissione [txtName, txtAge] prima di inviarli. A tal fine utilizza espressioni regolari.
- Riga 28: Verifica se il valore del campo di immissione [txtNom] corrisponde al modello /s*, che significa zero o più spazi. Se la risposta è sì, significa che l'utente non ha inserito un nome. Se c'è una corrispondenza con il modello, la variabile `champs` avrà un valore diverso dal puntatore nullo; altrimenti, avrà il valore nullo.
- Riga 29: Se c'è una corrispondenza con il modello
- Riga 30: Visualizza un messaggio all'utente
- riga 32: impostiamo il campo [txtName] su una stringa vuota (potrebbe esserci stata una sequenza di spazi)
- riga 33: il cursore lampeggiante viene posizionato sul campo [txtName]
- riga 34: la funzione viene terminata. I valori inseriti non vengono quindi inviati al server.
- Righe 38–45: Seguiamo una procedura simile con il campo [txtAge]
- Riga 47: se raggiungiamo questo punto, significa che i valori inseriti sono corretti. Inviamo quindi il modulo [frmPersonne] al server web. Tutto procede quindi come se avessimo cliccato sul pulsante [Invia].
7.4.2. La vista [reponse]
Questa vista mostra i valori inseriti nel modulo quando sono validi:
 |  |
Rispetto alla versione precedente, la nuova funzionalità appare solo quando si utilizza il link [Torna al modulo] nella vista [risposta]:
|  |
La differenza sta nell'URL visualizzato in [1]. Nella versione precedente era:
Qui, l'azione non fa più parte dell'URL perché verrà inviata tramite una richiesta POST invece che una richiesta GET. La nuova pagina JSP [reponse.jsp] è lqqqaaaaaaaaaqqAAAaaa
come segue:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
// on récupère les données du modèle
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>
Novità:
- righe 35-37: il link [Torna al modulo] contiene JavaScript. Cliccando su questo link si avvia l'esecuzione del codice JavaScript nell'attributo [href]. Come abbiamo visto nello studio di [formulaire.jsp], sappiamo che questo codice invia i valori dei campi <input>, <select>, ... nel modulo [frmPersonne].
- Righe 32–34: definiscono il modulo [frmPersonne]. Questo modulo ha un solo campo di tipo <input type="hidden" ...>, ovvero un campo nascosto. Questo campo [action] serve a passare al controller il nome dell'azione da eseguire, in questo caso [retourFormulaire].
7.4.3. La vista [errors]
Questa vista segnala gli errori di immissione nel modulo. La modifica apportata è la stessa della vista [response]:
 |  |
La differenza sta nell'URL visualizzato in [1]. Nella versione precedente era:
Qui, l'azione non fa più parte dell'URL perché verrà inviata tramite una richiesta POST anziché una richiesta GET. La nuova pagina JSP [response.jsp] è la seguente:
<%@ 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" %>
<%
// on récupère les données du modèle
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");
}//for
%>
</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>
Novità:
- Righe 30-32: la nuova gestione dei clic sui link. Le spiegazioni fornite su questo argomento nello studio di [response.jsp] valgono anche in questo caso.
7.5. Test delle viste
Per testare le viste precedenti, duplichiamo le loro pagine JSP nella cartella /WebContent/JSP del progetto Eclipse:
Quindi, nella cartella JSP, le pagine vengono modificate come segue:
[form.jsp]:
...
<%
// -- test : on crée le modèle de la page
session.setAttribute("nom","tintin");
session.setAttribute("age","30");
%>
<%// on récupère les données du modèle
String nom = (String) session.getAttribute("nom");
String age = (String) session.getAttribute("age");
%>
Le righe 4–5 sono state aggiunte per creare il modello richiesto dalla pagina nelle righe 9–10.
[reponse.jsp]:
...
<%
// -- test : on crée le modèle de la page
request.setAttribute("nom","milou");
request.setAttribute("age","10");
request.setAttribute("lienRetourFormulaire","Retour au formulaire");
%>
<%
// on récupère les données du modèle
String nom=(String)request.getAttribute("nom");
String age=(String)request.getAttribute("age");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
...
Le righe 4–6 sono state aggiunte per creare il modello richiesto dalla pagina nelle righe 11–13.
[errors.jsp]:
<%
// -- test : on crée le modèle de la page
ArrayList<String> erreurs1=new ArrayList<String>();
erreurs1.add("erreur1");
erreurs1.add("erreur2");
request.setAttribute("erreurs",erreurs1);
request.setAttribute("lienRetourFormulaire","Retour au formulaire");
%>
<%
// on récupère les données du modèle
ArrayList erreurs=(ArrayList)request.getAttribute("erreurs");
String lienRetourFormulaire=(String)request.getAttribute("lienRetourFormulaire");
%>
Le righe 4–8 sono state aggiunte per creare il modello richiesto dalla pagina nelle righe 13–14.
Avvia Tomcat se non l'hai già fatto, quindi richiedi i seguenti URL:
 |  |
 |
Otteniamo le visualizzazioni previste.
7.6. Il controller [ServletPersonne]
Il controller [ServletPersonne] dell'applicazione web [/personne3] gestirà le seguenti azioni:
No. | richiesta | origine | elaborazione |
1 | [GET /person3/hand] | URL inserito dall'utente | - Invia il [modulo] vuoto |
2 | [POST /person3/main] con i parametri [txtName, txtAge, action=validateForm] pubblicato | fare clic sul pulsante [Invia] nel [form] | - controlla i valori dei parametri [txtName, txtAge] - se non sono corretti, inviare la vista [errors(errors)] - se sono corretti, invia la vista [response(name,age)] |
3 | [POST /person3/main] con i parametri [action=returnForm] ospitato | clicca sul [Torna al modulo] visualizza [risposta] e [errori]. | - Invia la vista [modulo] precompilata con gli ultimi valori inseriti |
Abbiamo quindi una nuova azione da gestire: [POST /person3/main] con il parametro inviato [action=returnForm]. Al posto della vecchia azione [GET /person3/main?action=returnForm].
7.6.1. Scheletro del controller
Lo scheletro del controller [ServletPersonne] è identico a quello della versione precedente.
Novità:
- Riga 11: L'array [parameters] non contiene più il parametro [urlController], che è stato rimosso dal file [web.xml].
I metodi [init, doValidationFormulaire] rimangono invariati. I metodi [doGet, doInit, doRetourFormulaire] sono stati leggermente modificati.
7.6.2. Il metodo [doGet]
Il metodo [doGet] deve gestire l'azione [POST /person3/main] con il parametro inviato [action=returnForm]:
- righe 6-9: elaborazione dell'azione [POST /person3/main] con il parametro inviato [action=returnForm]
7.6.3. Il metodo [doInit]
Questo metodo gestisce la richiesta n. 1 [GET /person3/hand]. Il suo codice è il seguente:
La modifica consiste nel fatto che la vista [form] visualizzata alla riga 8 non contiene più l'elemento [action] nel proprio modello.
7.6.4. Il metodo [doRetourFormulaire]
Questo metodo elabora la richiesta n. 1 [POST /person3/main] con [action=formSubmit] negli elementi inviati. Il suo codice è il seguente:
La modifica consiste nel fatto che la vista [form] visualizzata alla riga 14 non contiene più l'elemento [action] nel proprio modello.
7.7. Test
Avviare o riavviare Tomcat dopo aver integrato il progetto Eclipse [personne-mvc-03] al suo interno. Richiedere l'URL [http://localhost:8080/personne3] e quindi ripetere i test mostrati come esempio nella sezione 7.1.