JQuery Mobile es la librería que hace uso de HTML5 para desarrollar aplicaciones web con diseño responsive o adaptables a cualquier tipo de tamaño de pantalla, es parte de la familia del famoso jQuery por lo que requiere de este para funcionar.

En el artículo anterior explicamos como podemos crear nuestra primera aplicación con Phonegap, pues ahora vamos a utilizar la misma aplicación para integrar la librería jQuery y poder hacer uso de sus características en nuestra aplicación.

Descargar jQuery Mobile

Debemos realizar la descarga de la librería desde su página web jquerymobile.com, también debemos también descargar la librería de jQuery.

jquery-mobile-descarga

jquery-descarga

Una vez realizado la descarga de ambas librerías procedemos a realizar la integración en nuestro proyecto Phonegap.

Abrimos nuestro proyecto realizado anteriormente y si revisamos tendremos la siguiente estructura de carpetas.

jquery-mobile-codigo-1

Como podemos apreciar en la figura enterior ya tenemos una estructura muy recomendada para aplicaciones de este tipo, tenemos la carpeta JS para ubicar nuestros archivos javascript y tenemos la carpeta CSS para ubicar nuestras hojas de estilo. Vamos a descomprimir lo que descargamos y debemos tener la estrutura siguiente ya con los archivos ubicados en las carpetas indicadas.

jquery-mobile-codigo-2

Como apreciamos en la imagen anterior ya hemos ubicado los archivos de las librerías de jQuery Mobile y jQuery en las respectivas carpetas CSS y JS de nuestro proyecto. Procedemos a ubicar en nuestro código fuente el enlace a estos archivos para ser integrados en la aplicación, esto se realiza en la sección <head></head> de nuestro index.html

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />    

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
    <script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>

    <title>Jquery Mobile - Phonegap</title>
</head>

Utilizar las clases de JQuery Mobile

Una vez que ya tenemos nuestro código que integra las librerías, vamos a proceder a probar las clases propias de jQuery Mobile, por ejemplo integramos el sigueinte código dentro del <body></body>:

<body>
    <div data-role="page" id="principal">
        <div data-role="header">
            <h1>Principal</h1>
        </div>
        <ul data-role="listview" data-inset="true">
            <li><a href="#segundo">Pantalla 2</a></li>
            <li><a href="#tercero">Pantalla 3</a></li>
        </ul>
        <div data-role="footer"></div>
    </div>
    <div data-role="page" id="segundo">
        <div data-role="header">
            <h1>Segundo</h2>
        </div>
        <ul data-role="listview">
            <li><a href="#principal">Pantalla 1</a></li>
            <li><a href="#tercero">Pantalla 3</a></li>
        </ul>
        <div data-role="footer"></div>
    </div>
    <div data-role="page" id="tercero">
        <div data-role="header">
            <h1>Tercero</h2>
        </div>
        <ul data-role="listview">
            <li><a href="#principal">Pantalla 1</a></li>
            <li><a href="#segundo">Pantalla 2</a></li>
        </ul>
        <div data-role="footer"></div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

Ejecutamos nuestra aplicación y tendremos la siguiente visualización:

jquery-mobile-phonegap-1

jquery-mobile-phonegap

Como podemos apreciar estamos utilizando los roles page, header, listview y footer para definir la interfaz de nuestra aplicación , jQuery mobile ya se encarga de trabajar la interfaz por nosotros, ejecutamos desde nuestra aplicación de Phonegap Developer de nuestro móvil y veremos la funcionalidad asignada en el código anterior.

La clase page permite que cada bloque sea una página o pantalla de nuestra aplicación, como si de actividades se tratasen haciendo mención al desarrollo nativo de Java.

Si aún no sabes como poder ejecutar una aplicación phonegap te invito a revisar el post-Nuestra primera aplicación con Phonegap, donde hablamos de como realizar este paso.

Indicarte además que JQuery Mobile tiene varias funciones (revisar documentación) para hacer nuestras aplicaciones muy atractivas en cuanto a diseño, sobre todo que nos ahorra el trabajo y es una de las librerías más utilizadas para el diseño de nuestras aplicaciones móviles.

Te invito a suscribirte a nuestro boletín y así puedas tener este y futuros artículos en tu Email, así como las novedades en programación, también te invito a compartirlo en tus redes sociales. Nos encontramos en el próximo artículo.
[maillite]