Cada día desarrollamos mas en entornos móviles y uno de los frameworks de referencia a la hora de abordar proyectos de este tipo es JQuery Mobile . Se trata de un framework construido por la gente de JQuery que facilita sobremanera el desarrollo de aplicaciones orientadas a móviles. El framework se apoya en data-atributos de html5 para generar una presentación orientada al movil.
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h6>Cabecera de la pagina</h6> </div> <div data-role="content"><a href="pagina2.html" data-role="button"> Ir a la pagina 2</a> </div> <div data-role="footer"> <h6>Pie de la pagina</h6> </div> </body> </html>
JQuery Mobile Data-Atributos
JQuery Mobile utiliza el atributo data-role para asignar diferentes roles a las diferentes partes de la página. En este caso tenemos los roles de página, cabecera,contenido y pie. Si cargamos la página en un navegador veremos lo siguiente .
El código de la página dos es muy similar al de la primera con la única diferencia que tiene un botón de volver que permite cargar la página anterior:
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h6>Cabecera de la pagina</h6> </div> <div data-role="content"> <a href="pagina3.html" data-role="button">Ir a la pagina 3</a> <a href="#" data-role="button" data-rel="back">Volver</a></div> <div data-role="footer"> <h6>Pie de la pagina</h6> </div> </body> </html>
El navegador nos muestra lo siguiente :
La página 3 es prácticamente idéntica a la página 2 salvo que cambiamos el mensaje
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h6>Cabecera de la pagina</h6> </div> <div data-role="content"> Pagina final <a href="#" data-role="button" data-rel="back">Volver</a></div> </div> <div data-role="footer"> <h6>Pie de la pagina</h6> </div> </body> </html>
El navegador muestra :
Todo lo que hemos hecho es muy muy sencillo y podemos ver la potencia que tiene el framework
¿Es JQuery Mobile Sencillo?
Lamentablemente las cosas no son tan sencillas como parecen de entrada . Si nos fijamos 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 muestra en el navegador la segunda página pero no hemos cambiado de página realmente sino que se ha cargado via AJAX el contenido de la segunda página en la primera . Hecho esto JQuery Mobile ha escondido el contenido de la primera página y ha mostrado unicamente el de la segunda.
Algo similar sucedera cuando desde la segunda página solicitemos la tercera .En este caso se descargará la página2 de memoria y se cargará la 3.
Aunque JQuery Mobile parezca un framework muy sencillo de manejar cuando realizamos el ejemplo de hola mundo ,es quizas uno de los frameworks que mas cuesta a los desarrolladores entender su funcionamiento real. Si en algún momento tenemos que trabajar con el … hay que tomarselo con calma,ya que convertirse en experto no es trivial.
Hola excelente tutorial,
1)Como podria conectarme a una BDD y por ejemplo llenar una lista?
2) Que IDE es bueno para programar con jquery mobile?
3) se puede usar junto con java?
Gracias!!
Deberias usar Ajax para leer de una base de datos remota. Por otro lado se puede integrar con java facilmente a traves de servicios REST.
La logica de negocios estaria en los WS de Java y el resto de logica de la aplicacion estaría en JS? como las validaciones en los forms por ejemplo o de navegacion? es correcto?
excelente tutorial
Gracias 🙂