phonegap

Ing. César Eduardo Suárez Trujillo@cesarlarsson

Simplemente JS o cualquiera de los demás frameworks

¿QUE ES PHONEGAP?

Este framework nace en San Francisco en 2009 por la empresa Nitobi Software obteniendo el premio del publico en el O’Reilly Media de ese año.

En Octubre de 2011 Adobe compra Nitobi

¿CÓMO FUNCIONA?

Esta grafica ilustra fácilmente como funciona

NATIVA O BASADA EN WEB

Ventajas de la tecnologías nativas: Mejor experiencia del usuario (en la interfaz del móvil) y mejor uso de las características de hardware del mismo. Desventajas: Incompatibilidad de plataformas por lo que el app debe desarrollarse varias veces, una por cada plataforma que se quiera (Android, iOS, Blackberry, Windows Phone, etc.) utilizar.

Ventajas de tecnologías Web: Un desarrollo que funcionará para cualquier plataforma. Sólida integración con aplicaciones basadas en servidores empresariales (aplicaciones Web y de bases de datos). Desventajas: Una interfaz de usuario móvil comparativamente débil y poca capacidad de interactuar con el móvil (sonido, pantalla, GPS, cámara, etc.). Además, no se pueden publicar en los App Stores y Markets para distribuirse y ser descargadas.

¿Y COMO ES ESTA VUELTA?Lo primero que tenemos que saber que a pesar de que nuestra aplicación técnicamente solo la vamos a escribir una vez (html- css -javascript). Cada plataforma de desarrollo tiene sus librerías propias para la compilación del proyecto.

En esta guía hablaremos de Android y iOS

JQUERY MOBILE

jQuery mobile es un framework de javascript que extiende la funcionalodad del framework estandar de jQuery como lo hace jQueryUI para las aplicaciones web.

UNIVERSO PHONEGAP

CREANDO LA INTERFAZ Nuestra aplicación requiere una interfaz, es por eso que

recurrimos a jQuery Mobile. Ventajas:

• Simple: El framework es muy facil de usar. • Mejora progresiva: La filosofía de jQuery Mobile es soportar tanto

la gama alta de los dispositivos, como aquellos que no soportan grandes funcionalidades.

• Accesibilidad: jQuery Mobile ha sido diseñado pensando en la accesibilidad.

• Tamaño pequeño: El tamaño total de jQuery Mobile framework es relativamente pequeño. Unos 12kb de la biblioteca JavaScript, 6kb de CSS y algunos íconos.

• Tematización: proporciona un sistema de temas que nos ofrece una aplicación a nuestro propio estilo.

COMPARATIVO

Area JQueryMobile Sencha Touch SproutCore DHTMLX Touch jQTouch Dojo Toolkit Vaadin GWTExecution 70% 75% 58% 62% 55% 55% 57% 57%Development 98% 77% 52% 73% 80% 64% 41% 52%Product 88% 100% 48% 48% 55% 60% 48% 63%Support and Documentation 65% 65% 65% 65% 65% 65% 65% 65%

Acumulated score 3,20 3,17 2,23 2,47 2,55 2,44 2,10 2,36Average 80,06% 79,32% 55,78% 61,72% 63,64% 60,91% 52,52% 59,11%

ESTRUCTURA BÁSICA Nuestra primera pagina en jQuery debe tener los

siguiente elementos básicos:<!DOCTYPE html> <html> <head>

<title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head> <body>

<div data-role="page">

<div data-role="header"><h1>Titulo de la pagina</h1>

</div>

<div data-role="content"><p>Contenido de la pagina.</p>

</div>

<div data-role="footer"><h4>Pie de pagina</h4>

</div></div>

</body></html>

Un solo documento html puede contener multiples paginas

<div data-role="page” id=“pagina1”><div data-role="header">

<h1>Titulo de la pagina</h1>

</div>

<div data-role="content"><p>Contenido de la

pagina.</p></div>

<div data-role="footer"><h4>Pie de pagina</h4>

</div></div>

ETIQUETAS IMPORANTES

En esta pagina de la documentación la encontramos http://jquerymobile.com/test/docs/api/data-attributes.html

Component HTML5 data-*Header, Footer <div data-role="header">

<div data-role="footer">

Content body <div data-role="content">

Buttons <a href="index.html" data-role="button" data-icon="info">Button</a>

Grouped buttons <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a></div>

Inline buttons <div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a></div>

Component HTML5 data-*Form element (Select menu)

<div data-role="fieldcontain"> <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select></div>

Basic List views <ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li></ul>

Dialogs <a href="foo.html" data-rel="dialog">Open dialog</a><a href="dialog.html" data-role="button" data-inline="true” data-rel="dialog" data-transition="pop">Open dialog</a>

Transitions <a href="index.html" data-transition="pop" data-back="true">

LISTAS

No hay elemento más básico en una aplicación movil tradicional. El contenido principal de nuestra aplicación o nuestro web site se puede plasmar como una lista.

<ul data-role="listview" data-theme="g"><li><a

href="acura.html">Acura</a></li><li><a

href="audi.html">Audi</a></li><li><a

href="bmw.html">BMW</a></li></ul>Si agregamos elementos dinámicamente simplemente usamos $('#mylist').listview('refresh')Para actualizar los nuevos elementos.

http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html

ENTRADAS EN HMTL5

Una de las cosas que nos trae HTML5 es poder tener inputs con tipos de datos específicos. Estos tipos nos ayudaran a decirle al dispositivo que “teclado” nos debe mostrar.• Email• Url• Number• Range• Date pickers (date, month, week, time, datetime,

datetime-local)• Search• Color

TRANSICIONES

Slide – La página actual se desplaza hacia la izquierda a la vez que entra desde la derecha la página nueva.Pop – La página nueva se abre sobra la antigua en forma de pop-up pero ocupando todo el espacio.Slideup – La página nueva aparece desde abajo, desplazándose hasta ocupar toda la pantalla.Slidedown – La página nueva aparece desde arriba y se desplaza hacia abajo ocupando la pantalla.Fade – La pantalla nueva se monta sobre la actual con una transición de cambio de opacidad.Flip – El más espectacular. Esta transición entre pantallas simula un giro de 180º de la página, simulando que la nueva es el dorso de la que teníamos.

Para utilizar esta transicion en nuestra pagina:

<a href="index.html" data-transition="pop”>Page2</a>

EVENTOS

El framework de jQuery ya nos traía una serie de eventos simples de usar, pero en jQueryMobile tenemos que tener en cuenta lo siguiente:

$(document).bind('pageinit'), no $(document).ready()

Realmente cada una de la paginas va cargando según se van llamando

http://jquerymobile.com/test/docs/api/events.html

$( '#aboutPage' ).live( 'pageinit',function(event){ alert( ‘Esta pagina se ha cargado' );});

$('.quickNav').live('tap',function(event) { $(".select_body").toggle(); // toggles the visibility/display of the element.});

TOUCH EVENTS

Algo realmente importante en dispositivo móviles y tablets son lo eventos sobre la pantalla, jQuery Mobile trae consigo una serie de eventos para tal fin como son:

tap : Toque rápidotaphold : Toque completo (1 seg aprox)swipe : Cuando arrastras en horizontal más de 30px o 20px en vertical durante 1 seg.swipeleft : Cuando te desplazas a la izquierdaswiperight : Cuando te desplazas a la derechaorientationchange : Cuando se cambia la orientación del dispositivoscrollstart : Se activa al empezar el scroll.scrollstop : Se activa al finalizar el scroll.

También podemos detectar cambio de orientación

• orientationchange

TEMAS

Los temas son algo clave, podemos generar nuestro propios temas desde la aplicación online <a href="#" data-role="button" data-theme="a">About this app</a> <a href="#" data-role="button" data-theme="b">About this app</a>

Para cambiar temas utilizamos el atributo data-theme=“d” en el Elemento al que se le desee cambiar el tema especifico. Tambien de manera general se puede cambiar de forma general los elementos.

$.mobile.page.prototype.options.theme = "d"; $.mobile.page.prototype.options.addBackBtn = false; $.mobile.page.prototype.options.backBtnTheme = "d";

// Page $.mobile.page.prototype.options.headerTheme = "d"; // Page header only $.mobile.page.prototype.options.contentTheme = "d"; $.mobile.page.prototype.options.footerTheme = "d";

// Listviews $.mobile.listview.prototype.options.headerTheme = "d"; // Header for nested lists $.mobile.listview.prototype.options.theme = "d"; // List items / content $.mobile.listview.prototype.options.dividerTheme = "d"; // List divider

$.mobile.listview.prototype.options.splitTheme = "d"; $.mobile.listview.prototype.options.countTheme = "d"; $.mobile.listview.prototype.options.filterTheme = "d";

$.mobile.listview.prototype.options.filterPlaceholder = "Buscar por...";

ANDROID Y PHONEGAP

Lo primero que tenemos que hacer es bajar el SDK de Android que esta disponible para Windows, MacOS y Linux

http://developer.android.com/sdk/index.html

La pagina de desarrollo de Android recomienda, el uso de eclipsey realmente es muy bueno para las aplicaciones nativas, pero cuandose trata de phonegap, netbeans tiene ventajas dado su interfaz para el manejo de HTML, css y javascript

Para utilizar facilmente netbeans con nuestro SDK de Android, ingresamos a Options->plugins

http://kenai.com/projects/nbandroid

http://kenai.com/projects/nbandroid/downloads/download/updatecenter/updates.xml

http://kenai.com/projects/nbandroid/downloads/download/

http://kenai.com/projects/nbandroid/downloads/download/

CONFIGURANDO PHONEGAPBueno phone son realmente una serie de librerias que debemo integrar a nuestro proyecto, por eso primero debemos ingresar al sitio oficial http://phonegap.com/ en la sección descargas seleccionamos la version que queramos. Para este momento acaban de liberal la versión 1.8, igual utilizaremos la 1.7 denominada apache cordova, aquí estan la librerías para cada una de la plataformas.

http://phonegap.com/

http://phonegap.com/

HELLO WORLD

Como en todo inicio, no hay nada como nuestro hello world, por defecto si corremos nuestro proyectos no crea un hello world nativo, pero lo que haremos sera crear nuestro hello world con phonegap.

Luego configuramos nuestro proyecto, y seleccionamos a quePlataforma vamos a usa en nuestro proyecto. Creo que la 2.2 Cobija una gran gama de dispositivos

Importamos las librerias de phonegap e nuestro proyectos

Luego de editar nuestro principal archivo de actividades, modificamos elManifiesto AndroidManifest.xml que se encuentra

En la carpeta assets creamos la carpeta /www donde se colocara nuestro proyecto. Por defecto netbeans no es capaz de encontrar esta ubicación, por eso debemos realizar los siguiente:

Buscar el archivo project.properties

Agregar los siguiente:assets.dir=assetsassets.available=true

Ahora agregamos nuestro archivo index.html a nuestra carpeta www y lo ejecutamos.

PHONEGAP Y IOS

Para trabajar con phonegap en iOS es mucho mas sencillo, simplemente en el paquete que descargamos instalamos el plugin utilizando cordova-1.7.0.dmg

Si corremos el emulador a la loca tendremos lo siguiente

CASOS DE ESTUDIO

http://phonegap.com/app/hockey-community/

http://phonegap.com/app/tiny-terrors/

ALTERNATIVAS

Phonegap no es el único proyecto de este tipo, existen más de 15 proyectos mal contados de este estilo. Algunos incluso con mas potencial (unas pagas) en este momento que phonegap. Entre lo mas importantes estan:

http://appspresso.com/

http://www.quickconnectfamily.org/

http://www.sencha.com/

http://www.appfurnace.com/

http://www.iui-js.org/

http://www.applicationcraft.com/

GRACIAS!!!

phonegap

Technology