Crear Aplicaciones con jQuery Mobile

jQuery Mobile es uno de los frameworks mas utilizados de Javascript en la web. Al igual que jQuery que sirve para crear interactividad del lado del cliente también tiene su versión adaptada para dispositivos móviles.

jquerymobile

 

Una vez activo, jQuery Mobile hace dos cosas: primero, optimiza las funciones nativas para mejorar su performance en equipos móviles , segundo, modifica el HTML y genera un layout con una serie de elementos gráficos predefinidos que acelera sustancialmente la velocidad de producción.

Conocimientos previos

Para utilizar jQuery Mobile se recomienda tener una buena base de jQuery. Puedes aprender jQuery desde cero en nuestros cursos en Zenva Academy:

Instalar jQuery Mobile

Aunque es posible y es una técnica muy común en sitios web, instalar jQuery Mobile enlazando directamente a los archivos almacenados en la nube, se recomienda ampliamente no aplicar esa técnica para aplicaciones PhoneGap. Muy frecuentemente tu aplicación será utilizada sin ninguna conexión a internet o con conexión intermitente. Si los archivos de jQuery están enlazados a documentos en la nube, la aplicación quedaría posiblemente inutilizable.

Para instalar este framework, lo primero que debes hacer es descargar jQuery en su página oficial.

Crea una subcarpeta llamada “js” dentro de tu proyecto PhoneGap y guarda allí el archivo de jQuery.

Una vez descargado jQuery, debes descargar el plugin de jQuery Mobile desde su sitio web oficial.

Crea una carpeta con el nombre “jQueryMobile”, descomprime el archivo .zip  que acabas de descargar y copia allí todos los archivos que contiene. Al final deberías tener una estructura similar a esta:

estructurajquerym

 

El nombre de los archivos de jQuery y jQuery Mobile cambia según la versión. Si la versión que descargaste tiene otro nombre recuerda hacer los ajustes en el código del ejercicio.

Como mencionamos jQuery Mobile cumple dos funciones: optimiza las acciones de jQuery y genera una interfaz adaptada para dispositivos móviles, por eso es que este plugin contiene imágenes y hojas de estilo.

Pongamos manos a la obra con el código y comencemos a construir una aplicación con jQuery Mobile. comencemos con este código base:



    
    
    
        
        
        
    

 

Como se puede observar  agregamos 3 líneas de código extra para incluir los archivos descargados. La primera incluye la hoja de estilos de jQuery Mobile que se usará para crear las interfaces, la segunda línea incluye el el framework de jQuery propiamente dicho y la tercera es la que inserta el plugin de jQuery Mobile.

Por ahora el código no muestra ningún elemento en el navegador, a continuación vamos a explorar cómo crear una interfaz de usuario con jQuery Mobile.

Creación de Interfaces

jQuery Mobile nos permite crear interfaces optimizadas para dispositivos móviles muy rápidamente y con relativamente poco esfuerzo.

La forma en que trabaja, es reescribiendo el código original del documento y generando uno nuevo, más complejo, según las características y argumentos solicitados.

Una característica interesante de jQuery Mobile es que, a diferencia de un sitio web, que pasa de un documento HTML a otro para mostrar la información, las páginas o “pantallas” de una aplicación se manejan desde un solo documento HTML.

Las páginas o “pantallas” están en un único archivo, jQuery Mobile las administra para mostrar sólo la parte del documento correspondiente a cada pantalla mientras que el resto permanece oculto. De esta forma se acelera sustancialmente la carga de páginas, también permite administrar eventos y animaciones entre una pantalla y otra.

jQuery Mobile aprovecha al máximo los nuevos elementos de HTML5 y hace un uso intensivo de los atributos personalizados que se definen con el prefijo “data-”

Por ejemplo “data-role”, uno de los atributos más usados en jQuery Mobile, permite definir el rol a nivel de funcionalidad y apariencia del elemento que lo contiene. Al definir el rol de un elemento, este atributo permite crear páginas, botones, menús y muchos elementos más.

Al insertar el atributo “data-role” en cualquier tag lo convertimos en un elemento de la interfaz. Sin necesidad agregar ningún código adicional jQuery agrega todos los elementos gráficos, clases y hasta animaciones necesarios para el funcionamiento de ese elemento en particular.

Por ejemplo, para crear una página se utiliza el atributo data-role=”page” de esta forma:

    Inicio

 

Cuando jQuery Mobile renderiza la aplicación comprende que este div debe ser interpretado como una página. Le agrega el código y eventos necesarios para que se comporte y vea como tal.

Usando el mismo principio, vamos a utilizar el atributo data-role=”header” para agregar un encabezado a la página que acabamos de crear:

 

 Inicio

 

 

Ya tenemos una pagina con un encabezado, fijate que se generó un fondo negro detrás del texto, en este caso como jQuery detectó que ese elemento era un header y automáticamente le agregó las imágenes necesarias para que tenga la apariencia de un encabezado.

app

Como se mencionó antes, jQuery Mobile encapsula toda la aplicación en un solo documento, así que todas las pantallas deben agregarse en el mismo documento, agreguemos dos pantallas más a esta aplicación:

 

 Pantalla 2

 

 

 Pantalla 3

 

 

Tenemos tres pantallas pero la aplicación se sigue viendo exactamente igual. Esto porque aun no tenemos ninguna forma de navegar entre ellas, para crear elementos de navegación sólo es necesario agregar un enlace normal de HTML, en este caso vamos a incluirlo en la primera pantalla, al inicio de la aplicación:

 

 Inicio

 

 Ir a Pantalla 2 

 

Como habrá notado el lector, en el código todas las pantallas tienen un atributo “id” diferente. Para navegar entre pantallas los enlaces deben usar el nombre del ID agregando el signo “#” al inicio.

app2

 

El enlace del ejemplo no solo permite ir a la pantalla 2 , jQuery Mobile automáticamente incluyó una animación de transición para darle una apariencia similar a la de una aplicación nativa.

Llevemos un poco más lejos el enlace que acabamos de crear y agreguemos el atributo de jQuery Mobile data-role=”button” para que este enlace se comporte como un botón:

 Ir a Pantalla 2 

Al probar el código anterior se verá algo similar a esto:

app3

 

cada vez se ve más se acerca a una verdadera aplicación. El siguiente problema es que, en esta aplicación, cuando avanzamos a la siguiente pantalla, no hay forma de regresar.

Para regresar a la página principal, se puede aplicar la técnica anterior de enlazar un link al id de la página principal, o más sencillo aún, se puede utilizar el atributo data-rel=”back” que regresa la aplicación a la pantalla inmediatamente anterior.

 Regresar 

app4

En este punto ya tenemos una aplicación mínima con una navegación básica y hasta transiciones de pantalla.

Para crear una aplicación más compleja con muchas secciones, es posible que se necesite mostrar estas secciones en forma de lista de enlaces directos a cada sección. Esto lo logramos aplicando el atributo data-role=”listview” a cualquier lista regular :

 

 

 

 

 

 

 

En el código anterior creamos una lista normal de enlaces, pero con el uso de listview se genera un nuevo elemento de tipo lista:

app5

Con las listas podemos crear menús extensos que abarquen múltiples páginas internas. Al igual que en con los otros elementos de navegación, las transiciones entre pantallas incluyen las animaciones automáticamente.

Por último, vamos a agregar un menú de navegación en esta pantalla. Al igual que con el elemento anterior, utilizamos una lista con enlaces para generar el elemento, pero esta vez se usará el atributo data-role=”navbar” para crear una barra de navegación :

 

app6

 

El siguiente ejercicio integra todos los elementos que examinamos en una sola aplicación:



    
    
    
        
        
        
    

    

 Inicio

 Ir a Pantalla 2 

 Pantalla 2

 Regresar 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!– /navbar –>

 Pantalla 3

 Regresar 

 

Pros y contras de usar jQuery Mobile

No hay tecnología perfecta y jQuery no es la excepción. Muchos desarrolladores crean todas sus aplicaciones con esta tecnología mientras que otros la evitan al máximo, todo depende de las preferencias personales.

Pros:

  • Desarrollo rápido de interfaces.
  • Sintaxis sencilla.
  • Efectos prediseñados.
  • Manejo de eventos.
  • Baja curva de aprendizaje.

Contras:

  • Agrega peso extra a la aplicación.
  • Manejo complejo de CSS.
  • Los efectos no funcionan fluidamente en algunos equipos de baja gama.
  • Las aplicaciones más grandes pueden hacer lenta la carga por trabajar en un solo archivo.
  • Menos control general del código.

jQuery Mobile es una excelente plataforma para comenzar a desarrollar, para aplicaciones pequeñas o medianas y para acelerar tu producción.

Si deseas aprender más sobre este framework puedes encontrar documentación detallada en su sitio oficial

http://jQuerymobile.com/demos/