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.
Este post quedo solo en parte 1?
creo que sí lo escribe hace ya bastante
[…] Otros artículos relacionados : Java y su evolución , Arquitecturas SPA […]
[…] artículos relacionados: Arquitecturas SPA ,HTML5 History […]
[…] en como JQuery Mobile ha cargado cada una de las páginas veremos que ha elegido un modelo de SPA .Esto quiere decir lo siguiente .Cuando solicitamos la segunda página desde la primera ,se […]