Cecilio Álvarez Caules

Arquitecturas SPA (I)

Varias personas me han solicitado que amplie un poco el tema de SPA y voy a dedicar algunos POST a este tema ya que pronto o tarde la mayor parte de la gente lo va a necesitar.Vamos a ver en este POST como a partir de una aplicación web normal  crear una primera versión de esta en formato SPA. Para ello partiremos de un conjunto de formularios que definen un asistente para introducir (nombre,apellidos y edad).

A continuación mostramos el código fuente de cada una de estas paginas:

Pagina1

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="Pagina2.jsp">
<fieldset>
<legend>Formulario Nombre</legend>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre"/>
<input type="submit" value="Aceptar"/>

</fieldset>
</form>
</body>
</html>

Pagina2

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="Pagina2.jsp">
<fieldset>
<legend>Formulario Nombre</legend>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre"/>
<input type="submit" value="Aceptar"/>

</fieldset>
</form>
</body>
</html>

Pagina 3

</pre>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="Resultado.jsp">
<fieldset>
<legend>Edad</legend>
<label for="edad">Edad:</label>
<input type="text" name="edad"/>
<input type="submit" value="Aceptar"/>
</fieldset>
</form>
</body>
</html>
<pre>

Resultado

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
Pagina Destino
</body>
</html>

Una vez tenemos claro cuales son las páginas .Vamos a agruparlas todas ellas en una arquitectura SPA de tal forma que esten ubicadas en un solo fichero html.

Vamos a ver el código

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div id="pagina1">

<form action="Pagina2.jsp" id="formulario1">
 <fieldset>
 <legend>Formulario Nombre</legend>
 <label for="nombre">Nombre:</label> <input type="text" name="nombre" />
 <input type="submit" value="Aceptar" />
 </fieldset>
 </form>
 </div>
 <div id="pagina2">
 <form action="Pagina3.jsp" id="formulario2">
 <fieldset>
 <legend>Formulario Apellidos</legend>
 <label for="apelidos">Apellidos:</label> <input type="text"
 name="apellidos" /> <input type="submit" value="Aceptar" />
 </fieldset>
 </form>
 </div>
 <div id="pagina3">
 <form action="Resultado.jsp" id="formulario3">
 <fieldset>
 <legend>Edad</legend>
 <label for="edad">Edad:</label> <input type="text" name="edad" /> <input
 type="submit" value="Aceptar" />
 </fieldset>
 </form>
 </div>
 <div id="destino">Pagina de destino</div>

</body>
</html>

Realizados estos cambios podemos ver que hemos asignado cada uno de los formularios a un DIV en concreto.Nos queda construir el código de Javascript con JQuery para gestionar cada uno de los formularios en la página.


<script type="text/javascript">
 $(document).ready(function() {

$("div").hide();
 $("div:first").show();

 $("#formulario1").submit(function() {
 $("div").hide();
 $("#pagina2").show();
 return false;

 });
 $("#formulario2").submit(function() {
 $("div").hide();
 $("#pagina3").show();
 return false;

 });
 $("#formulario3").submit(function() {
 $("div").hide();
 $("#destino").show();
 return false;

 });

});
</script>

Como podemos ver cada vez que pulsamos en uno de los formularios en el boton de submit se ocultaran el resto de vistas y se mostrará el formulario siguiente. De esta forma tenemos varias páginas ubicadas en un solo documento.

Descargar PDF