2.4. Instalando SDK android.

Si queremos compilar aplicaciones para android necesitaremos instalar algunas herramientas en nuestro equipo que nos permitirn generar nuestra aplicacin phonegap para dispositivos android. La primera de estas herramientas ser eclipse cuya descarga la llevaremos a cabo desde su pgina www.eclipse.org , donde podremos descargar el entorno de desarrollo eclipse que mas convenga a nuestros proyectos y sistema operativo. Una vez descargado eclipse, desde la pagina www.developer.android.com descargaremos el sdk de android. Esta descarga se encuentra disponible para los sistemas operativos Windows, Mac, y Linux. Por ltimo descargaremos el ADT (android development tools) que es un plugin para eclipse que nos permite crear aplicaciones android dentro de este entorno de desarrollo. Este plugin lo podremos encontrar en la pgina www.developer.android.com seccin SDK apartado ADT. Para poder descargar este plugin no encontraremos un link para su descarga. En su lugar podremos encontrar una url. Esta url tendremos que copiarla, abriremos eclipse y desde el apartado help opcin install new software y en el cuadro de dialogo emplearemos la opcin add que nos llevar a una nueva ventana (add repository) donde podremos especificar un nombre y una url para la instalacin del nuevo software. Una vez colocada la url elegiremos las opcines que nos permitan descargar todas las herramientas de desarrollo (developer tools) y ejecutaremos su instalacin. Una vez instalado podremos ver un pequeo icono de android en la barra de herramientas. Adems dentro del men file new other, podremos observar una carpeta con el nombre andoid donde se encuentran alojadas las opciones para crear proyectos android de Java. Pero an no habremos terminado la con la configuracin de nuestras herramientas. De nuevo desde la interfaz principal de eclipse clicaremos en el icono SDK manager situado en la barra de herramientas. Esta herramienta nos permite administrar los destinos de android que tenemos instalados ya que el SDK que hemos descargado es en realidad un admoinistrador de SDKs . Desde esta herramienta descargaremos la versin o versiones de android para las que queremos emular y compilar aplicaciones. Si no descargamos ninguna versin de android no ser posible compilar aplicaciones para este sistema operativo. Si por cualquier motivo no encontrramos en icono de SDK manager en la interfaz de eclipse podremos ejecutarlo desde la carpeta de la descarga localizando el archivo android.bat. Una vez descargado algn SDK podremos generar lo que se conoce como virtual devices (dispositivos virtuales de android) o emuladores. Desde el icono de virtual devices accederemos a una ventana de dilogo para la creacin des estos emuladores. Desde el botn new de esta ventana abriremos ahora el cuadro de opciones de configuracin de nuestro nuevo emulador. En este cuadro especificaremos las siguientes opciones de configuracin: Nombre para el emulador. Versin de android de las instaladas que utilizaremos.

Podremos incluir un tamao para la tarjeta sd de el emulador. Resolucin de la pantalla.

Podremos crear entonces diferentes emuladores con diferentes caracterstica par probar nuestra aplicacin. Para utilizar un emulador concreto lo seleccionaremos de la lista de emuladores disponibles y lo activaremos mediante la opcin start Launch del men. Este emulador se compone de la pantalla donde ser visible es sistema operativo, un teclado completo (querty) y las teclas de men, cursores, ejecucin de llamadas, volumen, cmara etc. 2.5. Creando proyecto android. Una vez que hemos instalado eclipse, el SDK de android con una versin de android instalada y el ADT (Android developer tools), estaremos listo para crear un nuevo proyecto de tipo android Project, desde el men file new other - android Project. Para configurar nuestro proyecto necesitaremos incluir los siguientes datos: Nombre del proyecto. Ubicacin de la carpeta del poyecto. Versin de android de las instaladas para la que queremos compilar y en la que emularemos nuestro proyecto. Nombre que tendr la aplicacin en pantalla. Nombre del paquete (Java). Crear actividad (en android cada pantalla es considerada una actividad o activity). Versin mnima del SDK para la que deseamos compilar. Si el sistema es inferior al seleccionado, la aplicacin no se instalar.

Ya tendremos generado nuestro proyecto android el cual podremos ver en el rbol de archivos de eclipse con la tpica construccin de un proyecto en Java. Destacaremos del rbol de archivos el situado en la carpeta src con el nombre nombreaplicacinActivity.java que contiene la clase activity y que se iniciara al comienzo de la aplicacin y las carpeta drawable situadas dentro de la carpeta resources donde ubicaremos nuestros grficos tales como iconos fondos de pantalla etc. La primera vez que ejecutemos nuestro proyecto desde el icono run es recomendable seleccionar la opcin run configurations que nos abrir una ventana donde podremos generar una nueva configuracin de aplicacin de android.

Haremos doble clic en la opcin android configuration e introduciremos los siguientes datos: Nombre para la nueva configuracin Carpeta del proyecto escogido. Opcin target mode. Esta opcin nos permite seleccionar el sistema operativo de nuestro emulador pudiendo seleccionar uno o todos los existentes. Tambin contaremos con la opcin manual que har que cada vez que ejecutemos el emulador este nos preguntara con que versin deseamos que se ejecute nuestro proyecto.

Al ejecutar la opcin run y una vez seleccionado el emulador en el que queremos probar nuestra aplicacin, esta se compilar e instala en el dispositivo emulado, pudiendo entonces visualizarla en la interfaz del mismo o seleccionarla desde su men de aplicaciones, donde podremos encontrarla con el icono de android por defecto. Si quisiramos cambiar este icono localizaremos el archivo androidManifest.xml y haciendo doble clic en el, accederemos a una ventana de opciones que contiene la posibilidad de seleccionar el icono de nuestra aplicacin mediante la opcin aplicacin icon (icono que se encontrarn dentro de la carpeta resources/drawable). Si quisiramos conectar un dispositivo android a nuestro equipo para realizar las pruebas, tendremos que acceder al men aplicaciones desarrollo usb debugging (depuracin usb). Sin esta opcin activada ser imposible llevar a cabo las pruebas en nuestros propios dispositivos. Si utilizamos Windows como sistema operativo es muy posible que necesitemos instalar controladores del fabricante para poder ejecutar estas aplicaciones en el modo de depuracin. En este punto ya tendremos una aplicacin de android funcionando. 3.2. Bases framework. Empezaremos ahora viendo la estructura de un documento en html5. <!DOCTYPE html> // Declaracin del documento en html5. <html> // Etiqueta global para contenidos en html. (No necesaria en html5). <head> // Etiqueta head del documento html. (No necesaria en html5). <meta charset=utf8> // Etiqueta meta que define el juego de caracteres del documento. <title>Ttulo de pgina</title> // Ttulo de la pgina.(necesaria aunque no visible en aplicaciones mviles).

<script src=jquery.js></script> // Enlace a la librera de jquery mediante la ruta que apunta al documento javascript. <script > // Espacio para incluir cdigo javascript. $(document).funcionjquery(parametro); // Llamada a la librera jquery mediante el smbolo $. </script> Cierre del espacio para el cdigo javascript. </head> // Cierre de la etiqueta head del documento. <body> // Apertura de la etiqueta body que contendr el cdigo html del documento. <h1>Encabezado</h1> // Encabezado de primer nivel. </body> // Cierre de la etiqueta body. </html> // Cierre del contenido html. 3.3. Funciones html encadenamiento. En jquery es habitual trabajar con un evento llamado $(document).ready que indicar que las acciones incluidas se ejecutarn cuando el documento este listo, de forma que cualquier modificacin que se lleve a cabo en el, se har cuando el documento est completamente cargado. $(document).ready() // Dentro de los parmetro del mtodo ready incluiremos una funcin llamada funcin en lnea, y dentro de esta comenzara la manipulacin del documento. Ejemplo de construccin: $(document).ready(function(){ // Evita la ejecucin del script antes de la carga del documento. $ (selector).funciondejquery(parmetros funcin); // Selecciona un elemento a modificar y le aplica una funcin de jquery. }); Ejemplo completo: $(document).ready(function(){// Evita la ejecucin del script antes de la carga del documento. $(#caja).html(Mi texto); Selecciona el elemento con el ID caja y mediante el mtodo html de jquery coloca dentro el texti Mi texto, que es pasado como parmetro a la funcin. });

Como hemos podido observar con muy poco cdigo jquery podemos llevar a cabo nuestras modificaciones en html, pero esto no significar que utilicemos jquery para todo el contenido en html, sino que lo emplearemos para poder llevar a cabo ciertos cambios en la pgina. Otra cosa que podremos hacer mediante jquery ser agregar o modificar tanto elementos como atributos. Ejemplo: Contamos con un enlace que no dsipone de atributo href. <a>Esto es un link</a> // No se muestra como link hasta aadir el atributo href mediante jquery de este modo: $(a).attr(href , http://www.mipagina.es); // Aade a la etiqueta <a> seleccionada el atributo href y la direccin a la que apunta el enlace mediante el mtodo attr de jquery. Tambin podremos el texto que contiene el enlace : $(a).html(Mipgina); // Sustituye el texto de la etiqueta <a> seleccionada por el incluido como parmetro dentro del mtodo html de jquery. Podramos encadenar estas funciones en una misma lnea de cdigo utilizando el smbolo . Como podemos ver en el ejemplo: $(a).attr(href , http://www.mipagina.es) .html(Mipagina); El encadenamiento de funciones en jquery es algo muy poderoso, ya que no s permite llevar a cabo mltiples modificaciones con el uso de un solo selector. Debemos recordar que el uso de ; ha de estar reservado nicamente para finalizar la cadena de modificaciones llevadas a cabo en el selector seleccionado. $(a).attr(href , http://www.mipagina.es) // Aade el atributo href al elemento. .attr (target, _blank) // Aade otro atributo target al elemento .html (Mipagina); // Modifica el texto del elemento. Como podemos ver en el ejemplo anterior hemos incluido dos atributos al elemento seleccionado. Podramos llevar a cabo el aadido de estos atributos en una sola lnea mediante la nomenclatura json, quedando entonces el script de la siguiente forma: $(a).attr({ href: http://www.mipagina.es, target: _blank})

.html (Mipagina); De esta forma mediante el mtodo json podremos definir tantos parmetros como sean necesarios para modificar, con una sola llamada al mtodo jquery que requiere esos parmetros. En estos ejemplo hemos vistos dos de la funciones mas bsicas de jquery, como son la funcin html que incluir html en el documento y la funcin attr que aade atributos al elemento. Tambin existe en jquery una funcin que eliminar los atributos de los elementos de forma contraria al mtodo attr: removeAttr () // Elimina el atributo pasado como parmetro al elemento seleccionado.

3.4. Funciones DOM. Jquery tambin nos ofrece algunos mtodos para la manipulacin de los objetos del DOM. El DOM (modelo de objetos del documento)que representa la posibilidad de manipular los elementos de nuestra pgina web. Imaginemos por un momento que queremos agregar un link dentro de un div que cuenta con un identificador de nombre caja mediante javascript: $(document). Ready (function(){ // Evita la ejecucin del script antes de la carga del documento.

$(#caja).append(<a href= >link</a>); // Aade al elemento caja mediante el mtodo append el link que es pasado como parmetro al mtodo }); Los mtodos jquery mas comunes para agregar nuevos elemento son: append () // agrega al final delos elementos nuevos elemento al elemento seleccionado. prepend () // agrega al principio de los elementos nuevos elemento al elemento seleccionado. replaceWith () // reemplaza el elemento seleccionado por el elemento pasado como parmetro a la funcin. after() // agrega el elemento pasado como parmetro a la funcin antes del elemento seleccionado pero fuera de este. before() // agrega el elemento pasado como parmetro a la funcin despus del elemento seleccionado pero fuera de este.

wrap() // encierra el elemento seleccionado dentro del elemento pasado como parmetro a la funcin.

Hasta el momento nicamente hemos pasado texto en nuestras funciones (string), pero tambin podramos pasar un elemento generado dinmicamente por jquery, para esto utilizaremos de nuevo el smbolo $ y un constructor de elementos de forma que este es aadido al DOM y podemos aplicar los mismos mtodos que a cualquier otro elemento html. $ (#caja).append ($(<a>).html(linkgeneradodinamicamente);) // Genera dinmicamente un link utilizando como parmetro del mtodo append el smbolo $ y como parmetro de este un constructor <> con la etiqueta <a> al cual le aplica el mtodo html para aadir el texto de este nuevo link. Podramos llevar a cabo el mismo resultado almacenando este nuevo link en una variable como se muestra a continuacin: Var contenido = $(<a>).html(linkgeneradodinamicamente; // almacena este nuevo link en la variable contenido $(#caja).append(contenido); // Aade el contenido almacenado en la variable contenido mediante el mtodo append. Dentro de esta variable podramos seguir aplicndolos mtodos necesarios como aadir estilos, atributos etc. Var contenido = $(<a>).html(linkgeneradodinamicamente // almacena este nuevo link en la variable contenido .attr(href , http://www.mipagina.es); // aplica un Nuevo atributo al link almacenado en la variable. $(#caja).append(contenido); ); // Aade el contenido almacenado en la variable contenido mediante el mtodo append. Tambien podramos generar este nuevo enlace de forma pasiva mediante el mtodo appenTo () , que se encargar de incluirlo en el elemento pasado como paramentro. Var contenido = $(<a>).html(linkgeneradodinamicamente )// almacena este nuevo link en la variable contenido .attr(href , http://www.mipagina.es) // aplica un Nuevo atributo al link almacenado en la variable. .appendTo (#caja); // agrega el elemento al elemento pasado como parmetro. Ambos ejemplos conseguirn el mismo resultado, generaran un link con sus atributos y lo agregarn dentro del contenido del elemento con el

identificador caja, pero el segundo lo hace de forma pasiva ya que el mtodo que lo agrega estar tambin contenido en la variable. Estos son algunos de los elementos mas utilizados en jquery para agregar elementos que nos ayudarn en la construccin de aplicaciones simples o complejas mediante phonegap. 3.5. Funciones CSS. Siguiendo con el ejemplo anterior, podramos definir una clase para este nuevo vinculo creado mediante el mtodo addClass(). Var contenido = $(<a>).html(linkgeneradodinamicamente) // almacena este nuevo link en la variable contenido .attr(href , http://www.mipagina.es) // aplica un Nuevo atributo al link almacenado en la variable. .addClass (vinculo); // Aade al elemento seleccionado la clase vinculo. .appendTo (#caja); // agrega el elemento al elemento pasado como parmetro. Este mtodo addClass adems tendr su mtodo contrario removeClass () que eliminar la clase pasada como parmetro al mtodo. Tambien existe un mtodo para aadir clases asociado a un even to de ratn, hablamos del mtodo toggleClass que ira asignado o eliminando la clase que le es pasada como parmetro en cada clic del ratn. Pero no solo podremos asignar o eliminar una clase a un elemento con jquery, sino que podremos trabajar directamente con el estilo mediante el mtodo css(). Var contenido = $(<a>).html(linkgeneradodinamicamente) // almacena este nuevo link en la variable contenido .attr(href , http://www.mipagina.es) // aplica un Nuevo atributo al link almacenado en la variable. .css (Font-size , 18px); // Aade el estilo para el tamao de la fuente mediante el mtodo css () al elemento seleccionado. .appendTo (#caja); // agrega el elemento al elemento pasado como parmetro. Si necesitramos modificar ms de una propiedad del estilo css del elemento podramos utilizar la nomenclatura json en el mtodo css(). Otro de los mtodos ms utilizados en jquery ser la captura del clic del ratn mediante el mtodo click(), al que se le pasara una funcin como

parmetro que contendr las acciones a realizar al ejcutar el clic del ratn en el elemento seleccionado. Var contenido = $(<a>).html(linkgeneradodinamicamente) // almacena este nuevo link en la variable contenido .attr(href , http://www.mipagina.es) // aplica un Nuevo atributo al link almacenado en la variable. .css (Font-size , 18px); // Aade el estilo para el tamao de la fuente mediante el mtodo css () al elemento seleccionado. .click(function(){ // aade el evento clic del ratn mediante el que se ejecutar una funcin. $(this).toogleClass(vinculo); // Aadir o eliminar la clase pasada como prmetro al mtodo toogleClass, vinculo, en cada clic de ratn sobre el elemento seleccionado, en este caso utilizando la palabra reservada this que har referencia al elemento que estamos seleccionando, en este caso la etiqueta <a>. }) .appendTo (#caja); // agrega el elemento al elemento pasado como parmetro. Otras de las funciones que usaremos con frecuencia en nuestras aplicaciones sern: hide() // oculta el elemento seleccionado. Nos permite definir adems como parmetro una animacin hight si queremos que la animacin durante la ocultacin se realice de forma rpida y slow, si queremos que esta animacin durante la ocultacin se ejecute de forma lenta. show() // muestra el elemento seleccionado. Nos permite definir adems como parmetro una animacin hight si queremos que la animacin durante la ocultacin se realice de forma rpida y slow, si queremos que esta animacin durante la ocultacin se ejecute de forma lenta.

Este tipo de animaciones no suelen ser muy recomendables para su uso en dispositivos mviles, para conseguir estos mismo resultados en dispositivos mviles es ms recomendable el uso de animaciones en CSS3. 3.6. Funciones eventos. Los eventos son elementos propios del lenguaje javascript que nos permiten capturar la interactividad llevada a cabo por el usuario durante

el uso de la aplicacin. Jquery nos ayudara a que el manejo de eventos sea mucho ms sencillo de forma que podamos capturar todos los eventos necesarios para nuestra plicacin directamente con javascript. El primer evento que estamos utilizando ser el evento .ready() el cual en ejemplos anteriores aplicamos a todo el documento para evitar la ejecucin de nuestros scripts antes de la carga completa de la pgina. Este evento permite la interaccin con nuestra pgina a partir de la carga completa del DOM de la misma. Existe tambin un elemento load() que a diferencia del evento ready(), no permitir la interaccin con la pgina hasta la carga total de esta y de todos los archivos relacionados con la misma (CSS, imgenes, javascript, etc). Todos los eventos relacionados con la interaccin del usuario en la aplicacin tienen su mtodo correspondiente en jquery que nos permite capturar el mismo,de forma directa. No obstante jquey cuenta con un metdo que nos permitir capturar eventos de forma indirecta, hablamos del mtodo bind (). (enlazar). Este mtodo recibir dos parmetros: Una cadena con el evento al que queremos asociar la captura. La funcin que contendr el script de cdigo a ejecutar. $(#btn1).bind(click , function(){ // Selecciona el elemento (botn) con el identificador #btn1 y enalaza mediante el mtodo bind() al clic del ratn la ejecucin de la funcin. Alert(hemos capturado tu clic de ratn)}; // Ejecuta el mtodo alert() mostrando en pantalla un mensaje de alerta con el texto hemos capturado tu clic de ratn, que es pasado como parmetro al mtodo. 5.1. Evento device_ready. Antes de empezar un proyecto desde cero revisaremos todas las APIS disponibles dentro del mundo de phonegap para actuar con los dispositivos. En nuestro proyecto base contamos con un archivo index.html sin contenido, nicamente contendr la etiqueta <meta> del viewport y las llamadas a las libreras de phonegap y de jquery. Para la edicin de este documento podremos utilizar cualquier editor de texto, nosotros hemos elegido Dreamweaver en el que hemos creado un nuevo sitio que apunta directamente a la carpeta www de nuestra aplicacin. Lo primero que vamos a analizar sern los eventos. Recordando ocasiones anteriores vemos que el primer evento que utilizbamos en nuestra aplicacin era el evento ready() de jquery que evitaba la ejecucin del script antes de la carga del DOM de forma que ya pudiramos manipularlo. Pero

en el caso de phonegap, que una librera de javascript y a su vez una librera nativa (objective C en el caso de sistemas IOS y JAVA en el caso de sistemas Android), estas libreras deben estar completamente cargadas y encontrarse en la memoria para que la libreria de phonegap de javascript funcione y eso podra demorarse algunas milsimas de segundo por lo que es posible que el evento ready se ejecute antes de que estas libreras estn cargadas por lo que si quisiramos acceder a algn componente de la librera de phonegap esto no sera posible, solo podramos ejecutar las acciones referentes a la manipulacin del DOM como la captura de eventos de ratn etc. Existe un nuevo evento que deberemos capturar sobre todo el documento y que no contar con un atajo en jquery al no ser un mtodo estndar de html. Por tanto la llamada a este mtodo tendremos que llevarla a cabo mediante el mtodo bind(). Este evento concreto del que hablamos es el mtodo deviceready propio de phonegap y que phonegap dispara cuando su librera se encuantra disponible en su totalidad (El dispositivo esta listo).A partir de aqu podremos utilizar cualquiera de las Apis de phonegap. $.(document).bind(deviceready , function (){ // Evita la ejecucin de Apis de phonegap hasta que su librera este cargada Llamada a las libreras (APIS) de phonegap }) 5.2. Usando notificaciones. En este caso empezaremos a manipular las Apis de phonegap. Para esto debemos contar con algunos links con sus propios estilos css que definen su apariencia visual yque llamaran a funciones de javascript que probarn cada una de las funcionalidades. Primer link. <a href=javascript : alertas()>Alertas</a> // Genera un link que llamar a una funcin de javascript (alertas()) que est contenida dentro del parmetro href del enlace. Ahora nuestra funcin de javascript que ejecutar las acciones deseadas y que ha de encontrarse dentro de la funcin deviceready que impide la ejecucin de las Apis antes de la carga total de la librera de phonegap. <script> $(document).bind(deviceready , function(){ }); Function alertas(){ // Crea la funcin alertas ()de javascript.

Alert (Hola desde phonegap);} mediante el mtodo alert(). </script>

// Genera la alerta a mostrar

Si ejecutamos ahora nuestra aplicacin en el emulador al pulsar sobre el link creado, se nos mostrar una alerta con el texto hola desde phonegap. Pero esta alerta es una alerta comn y carece de elegancia de hecho nos muestra el nombre del archivo que se est ejecutando en este caso index.html y el texto del botn aceptar aparece en ingls con el texto ok. Para mejorar este aspecto phonegap cuenta con una librera, la api de notificaciones con lo nuestro cdigo quedara: <script> $(document).bind(deviceready , function(){ }); function alertas(){// Crea la funcin alertas ()de javascript. navigator.notification.alert (Hola desde phonegap, function(){} , mi aplicacion , aceptar);} // utiliza la api de nitificaciones de phonegap mediante el mtodo navigator.notification.alert que nos permite aadir algunos parmetros: Texto (mensaje) de la alerta. Funcin de callback. Funcin que se ejecutar cuando el usuario cierre el cuadro de notificacin.

Y como parmetro opcionales: El ttulo de la alerta (sustituye al anterior ttulo index.html). El texto que ha de mostrar el botn de aceptar que se utiliza para cerrar el cuadro de dilogo de la alerta.

</script> Ejecutando de nuevo nuestra aplicacin podremos ver que ahora contamos con una alerta mas personalizada ya que hemos definido el ttulo de la misma, el mensaje que contiene as como el texto del botn de aceptacin. Si hubiramos incluido algunas acciones en nuestra funcin de callback, estas se ejecutaran al cerrar el cuadro de nuestra alerta. Esta api adems cuenta con alertas para confirmacin por parte del usuario. Para ver estas alertas generaremos un nuevo link: <a href=javascript : confirmacion()>Confirmacin</a> // Genera un link que llamar a una funcin de javascript (confirmacion ()) que est contenida dentro del parmetro href del enlace.

Ahora generaremos el cdigo a ejecutar mediante este link: <script> $(document).bind(deviceready , function(){ }); function confirmacion (){// Crea la funcin confirmacion ()de javascript. navigator.notification.confirm (Cual es tu sexo?, function(resultado){ notificacin.navigator.alert (has elegido la opcin + resultado ); } , Sexo , homb re, mujer);} // utiliza la api de nitificaciones de phonegap mediante el mtodo navigator.notification.confirm que nos permite aadir algunos parmetros: Texto (mensaje) de la confirmacin. Funcin de callback. Funcin que se ejecutar cuando el usuario cierre el cuadro de notificacin y que contar con un parmetro (variable) donde se almacenar el resultado de la confirmacin del usuario en forma de ndice (1 o 2), ya que este mtodo de confirmacin contara con dos posibles opciones. El ttulo del mensaje de confirmacin (sustituye al anterior ttulo index.html). El texto que han de mostrar los dos botones de opciones para la confirmacin del usuario. Estos textos irn expresados en forma de string y sus valores separados mediante comas.

</script> Si ejecutamos ahora nuestra aplicacin podremos ver nuestro cuadro de confirmacin, al seleccionar una de las opciones se ejecutar nuestra funcin de callback que en este caso contiene una alerta con el texto has seleccionado la opcin y el ndice contenido en la variable resultado que es devuelto de la opcin elegida por el usuario. De esta forma podremos crear cuadros de dilogo para interactuar con el usuario en nuestra aplicacin. Estas son algunas de las otras opciones con las que cuenta esta api de notificaciones de phonegap: Navigator.notification.beep (4) // El equipo emitir un sonido. Este mtodo incluye como parmetro el nmero de veces que queremos que se repita este sonido, en este caso 4 veces.

Navigator.notification.vibrate (500) // El equipo vibrar. Este mtodo incluye como parmetro el tiempo que durar la vibracin expresado en milisegundos (1000ms = 1s)

Esta api de notificaciones de phonegap se encuentra disponible para todas las plataformas aunque algunas de estas pueden no admitir algunas de las caractersticas escritas en el cdigo. Esto no generar un problema puesto que esas caractersticas sern obviadas por la plataforma, de modo que el cdigo de nuestra aplicacin siempre ser el mismo para las distintas plataformas. 5.3. Tomando foto. En esta ocasin veremos como tomar una foto con la cmara del dispositivo o seleccionar alguna de las existentes en nuestra galera. Lo primero que tendremos que hacer ser generar el link que ejecutara nuestra funcin de javascript: <a href= javascript : foto()>Tomar foto de galera</a> Ahora incluiremos la funcin con la que llevaremos a cabo el objetivo planteado: $(document).bind(deviceready , function () { }); Function foto (){ // Genera la function foto de javascript. Navigator.camera.getPicture (// llama al mtodo navigator.camera.getPicture que tomar la foto y que recibir tres parmetros: Una funcin de callback de xito (la foto ha podido ser tomada). Esta funcin contar con un parmetro, una variable que almacenar los datos referentes a la fotografa tomada. Aqu en nuestro ejemplo hemos incluido el cdigo necesario para mostrar la fotografa en un <div> con el identificador #imagenes. Esta imagen se mostrar con las opciones disponibles establecidas en el parmetro numero 3 de la funcin que han de encontrarse en formato json. Una funcin de callback de error. (La foto no ha podido ser tomada por diferentes motivos). En este caso mostraremos un mensaje de error mediante una alerta con el texto no se ha podido tomar la foto Opciones disponibles para la fotografa. Estas opciones debern encontrarse en el parmetro en formato json. Las Opciones disponibles para la toma de fotografas son:

quality. Define la calidad de la foto expresada mediante un nmero de 0 al 100, siendo el 100 la mayor calidad posible (tamao de archivo mas grande). sourceType. Define desde donde queremos tomar la foto, su origen. Para esto usaremos unas constantes ya definidas dentro del objeto camera.Picture.SourceType. y donde contaremos con tres opciones.

- CAMERA. Tomar la fotografa en vivo con la cmara del dispositivo. - PHOTOLIBRARY. Toma la foto desde la galera de fotografas del dispositivo. - SAVEDPHOTOALBUM. Toma la foto del lbum de fotos guardado del usuario (dispositivos IOS). - destinationType. Destino de la fotografa tomada. Tambien definida dentro de una constante el objeto camera.destinationType. donde contaremos con dos opciones. - DATA_URL. La variable incluida como parmetro en nuestro funcin (foto) callback de xito recibir los datos de la fotografa tomada en bytes en el formato conocido como base64 que permite manipular la imagen de forma directa como un string de texto. El problema de este mtodo es que la foto ocupar mas en este formato pudiendo ocasionar problemas de memoria. - FILE_URI. La variable incluida como parmetro en nuestra funcin (foto) callback de xito recibir una url con la direccin de la fotografa tomada (ruta del archivo). Estos datos nos servirn tanto para mostrar la imagen en nuestra pgina, como para utilizarla mediante la API de archivos para abrirla y llevar acabo alguna accin con ella. - allowEdit. Recibe un valor booleano true o false dependiendo si queremos o no permitir que la fotografa pueda ser editada (solo para dispositivos IOS). - encodingType. Especifica el formato en el que ser guardada la fotografa definidos en la constante camera.encodingType que nos ofrece dos posibles formatos: - JPEG. Guardar el archivo en formato jpeg. - PNG. Gardar el archivo en formato png. - targetWidht. Especifica el factor de escala en el ancho de la imagen estableciendo un porcentaje.

- targetHight. Especifica el factor de escala en el alto de la imagen estableciendo un porcentaje. Todas estos parmetro son opcionales, si no establecemos ninguno de ellos en particular sern aplicadas las establecidas por defecto en la librera. Una vez recibida la url (ruta del archivo) de la fotografa seleccionada tomaremos las acciones oportunas con los datos almacenados en la variable foto. En este caso lo hemos colocado mediante jquery en la pagina dentro de una etiqueta <div> con el identificador #imagenes y hemos creado una nueva etiqueta <img> para mostrarla cuyo atributo source (src) sern los datos almacenados en la variable foto que contendr la ruta de la imagen seleccionada. function (foto){ // Funcion callback xito $(#imagenes).append($(<img>) .attr (src, foto)) ; } , function (){ Navigator.notification.alert (no se ha podido tomar la foto);} , // Funcion callback error { quality : 75, // opciones de fotografa sourceType : camera.pictureSourceType.PHOTOLIBRARY, destinationType : camera.DestinationType.FILE_URI, allowEdit : true, encodingType : camera.EncodingType.JPEG, targetWidht : 50, targetHeight : 50 // opciones de fotografa }); } 5.4. Capturando video y audio. En este caso veremos la API de phonegap mediaCapture que tambin permitir capturar fotografas con menos opciones que la api de cmara pero que adems nos permite capturar audio y video. Para probar este api generaremos un nuevo enlace que ejecutar nuestra funcin de javascript: <a href= javascript : audio ()>Capturar audio</a> // Genera el link que ejecuta la funcin de javascript audio(). Ahora generaremos el cdigo a ejecutar:

<script> $(document).bind(deviceready , function(){ }); function audio (){ // utiliza la api de captura de audio mediante el mtodo navigator.device.capture.captureAudio () que nos permite aadir tres parmetros en este orden: Funcin callback xito. Recibe como parmetro siempre una coleccin de objetos que almacena todos los datos del archivo o archivos recibidos (nombre, tipo de archivo MIME, ruta del archivo), siendo la ruta del archivo el dato ms importante puesto que nos servir para poder subir este archivo a un servidor externo o bien utilizarlo en nuestra aplicacin mediante las etiquetas <audio> y <video > de html5. Para poder acceder a los datos de esta coleccin recorreremos esta mediante un bucle for que recorrer la coleccin y almacenar todos los datos de los audios recibidos en la matriz audio y los datos de la ruta del archivo mediante el mtodo fullPath que es aplicado a esta nueva matriz. Funcin de callback error. Esta funcin se ejecutara si el archivo no ha podido ser capturado pudiendo incluir las acciones a tomar en este caso. Opciones disponibles para la captura. Estas opciones deben encontrarse en el fomato de almacenamiento de datos json. En este caso las opciones disponibles sern las mismas tanto para la captura de audio como para la captura de video: - Limit. Cantidad de kit de audio que el directorio puede grabar. Entendemos como kits de audio los archivos generados en varias tomas ya que esta api es una api multiarchivo. No disponible en sistemas IOS pero si en sistemas android. - duration. Duracin mxima del archivo que queremos obtener expresado en segundos. No disponible en sistemas android pero si en sistemas IOS. navigator.device.capture.captureAudio(function (datos) { for (var i = 0; i<datos.lenght; i++ ){ // Funcin callback xito var audio = datos[i]; var ruta = audio.fullPath; }} , function (){} , // funcin callback de error

{ Limit : 2, Duration : 10} // Opciones en formato de datos json )} </script> Captura de vdeo. Para probar este api generaremos un nuevo enlace que ejecutar nuestra funcin de javascript: <a href= javascript : avideo ()>Capturar video</a> // Genera el link que ejecuta la funcin de javascript video(). Ahora generaremos el cdigo a ejecutar: <script> $(document).bind(deviceready , function(){ }); function video (){ // utiliza la api de captura de video mediante el mtodo navigator.device.capture.captureVideo () que nos permite aadir tres parmetros en este orden: Funcin callback xito. Recibe como parmetro siempre una coleccin de objetos que almacena todos los datos del archivo o archivos recibidos (nombre, tipo de archivo MIME, ruta del archivo), siendo la ruta del archivo el dato ms importante puesto que nos servir para poder subir este archivo a un servidor externo o bien utilizarlo en nuestra aplicacin mediante las etiquetas <audio> y <video > de html5. Para poder acceder a los datos de esta coleccin recorreremos esta mediante un bucle for que recorrer la coleccin y almacenar todos los datos de los audios recibidos en la matriz audio y los datos de la ruta del archivo mediante el mtodo fullPath que es aplicado a esta nueva matriz. Funcin de callback error. Esta funcin se ejecutara si el archivo no ha podido ser capturado pudiendo incluir las acciones a tomar en este caso. Opciones disponibles para la captura. Estas opciones deben encontrarse en el fomato de almacenamiento de datos json. En este caso las opciones disponibles sern las mismas tanto para la captura de audio como para la captura de video:

- Limit. Cantidad de kit de audio que el directorio puede grabar. Entendemos como kits de audio los archivos generados en varias tomas ya que esta api es una api multiarchivo. No disponible en sistemas IOS pero si en sistemas android. - duration. Duracin mxima del archivo que queremos obtener expresado en segundos. No disponible en sistemas android pero si en sistemas IOS. navigator.device.capture.captureVideo(function (datos) { for (var i = 0; i<datos.lenght; i++ ){ // Funcin callback xito var video = datos[i]; var ruta = video.fullPath; }} , function (){} , // funcin callback de error { Limit : 2, Duration : 10} // Opciones en formato de datos json )} </script> En este las opciones de configuracin solo sern vlidas para android, en el caso de IOS el usuario podr establecer la duracin deseada y solamente un clic por sesin, es decir por cada una de las veces que llamamos al mtodo captureVideo (). En estos dos mtodos, tanto en la captura de audio com en la de video, si el usuario cancela la captura se ejecutar el callback de error propuesto para el mtodo. 5.5. Nuevo contacto.