Q

uiero dedicar este libro a mi mujer e hija sin cuyo cario y entendimiento diario no sera posible este trabajo ni los desarrollos que realizo da a da. Todas estas tareas me quitan algunas horas de sueo y sobre todo el estar con ellas todo lo que debera, por lo que este libro es enteramente suyo. Para mis dos chicas.!!! Agradecer a Eduardo Fernndez Rojo, Carlos Laita Santaflorentina, Ignacio Manzanares Galen, Jorge Del Casar, Astrit Fernndez, Victoria Tejero y toda la gente de RIM y Tinkle que me han ayudado y aportado su granito de arena para que este libro llegase a ver la luz. Carlos Longarela, Lugo 2012.

https://twitter.com/CarlosLongarela

Web del libro: http://webworksbook.com

Programando para PlayBook y BB10 con WebWorks por Carlos Longarela se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.

http://creativecommons.org/licenses/by-nc-sa/3.0/deed.es_ES

Reconocimiento-NoComercial-CompartirIgual 3.0 Unported (CC BY-NC-SA 3.0)

Esto es un resumen fcilmente legible del texto legal (la licencia completa http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode). Usted es libre de: copiar, distribuir y comunicar pblicamente la obra Remezclar - transformar la obra Bajo las condiciones siguientes:

Reconocimiento - Debe reconocer los crditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).

No comercial - No puede utilizar esta obra para fines comerciales.

Compartir bajo la misma licencia - Si altera o transforma esta obra, o genera una obra derivada, slo puede distribuir la obra generada bajo una licencia idntica a sta.

Entendiendo que: Renuncia - Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor Dominio Pblico - Cuando la obra o alguno de sus elementos se halle en el dominio pblico segn la ley vigente aplicable, esta situacin no quedar afectada por la licencia. Otros derechos - Los derechos siguientes no quedan afectados por la licencia de ninguna manera: Los derechos derivados de usos legtimos u otras limitaciones reconocidas por ley no se ven afectados por lo anterior. Los derechos morales del autor; Derechos que pueden ostentar otras personas sobre la propia obra o su uso, como por ejemplo derechos de imagen o de privacidad. Aviso - Al reutilizar o distribuir la obra, tiene que dejar bien claro los trminos de la licencia de esta obra.

ndice
1. Prlogo de Eduardo Fernndez Rojo 10 2. RIM y BlackBerry 15 1. El origen del nombre de la marca BlackBerry 16 2. BlackBerry Messenger 17 3. Sistema Operativo 18 4. Presente y futuro de RIM 18 3. Por qu programar para BlackBerry? 2 3 1. Por qu WebWorks? 2 5 2. PlayBook 2 6 3. BlackBerry 10 2 7 4. Configurando nuestro entorno 31 1. Editor 31 2. WebWorks SDK 3 5 3. PlayBook Simulator y BlackBerry 10 Simulator 3 6 5. Comenzando a desarrollar 3 9 1. Usando un servidor web local 3 9 2. Usando Ripple 4 2 3. Nuestra primera aplicacin 5 0 4. Empaquetando la aplicacin 5 4 5. Probando la aplicacin 5 7 6. Usando el API de WebWorks 61 1. Eventos y sistema 61 2. Guardando datos en el dispositivo 6 5 3. Movimientos del dispositivo y GPS 7 2 4. Invocando aplicaciones del dispositivo 76
Pgina 8

5. Audio y vdeo 8 0 6. Interactuar con la pantalla 8 6 7. Interface de usuario 9 2 8. Pagos 10 6 9. tiles 111 7. Nuestra aplicacin disponible para el mundo 1. Firmando nuestra aplicacin 2. Alta en el BlackBerry App World y publicacin 3. Promocionando nuestra aplicacin 117 117 12 3 12 9

8. Eplogo 13 3

Pgina 9

1. Prlogo de Eduardo Fernndez Rojo

I love it when its cloudy

sta maana tena viaje a Lisboa. Adems le deba a Carlos Longarela un prlogo para su libro sobre WebWorks y desarrollo para BB10, el primero en castellano que se va a publicar.

Ya en el avin, apunto de despegar, tengo apenas 5 min de cobertura, hago bsqueda universal en la BB y en Evernote, tengo seguro un necesita sincronizarse y la ltima limpieza de mi inbox ha descolocado el email original. email de Carlos con el draft del libro, pero no lo encuentro, Evernote

Mientras sincroniza Evernote hago ping a Carlos por BBM, quedan 4 minutos. Carlos me responde ipso facto, esta tomando caf en Lugo, su ciudad, necesita llegar a su PC para poder reenviarme el draft. Quedan 3 minutos de cobertura, sentado en el avin la azafata me que ponga en peligro la vida de los pasajeros. mira con ojos represivos, si no apago el mvil ser un criminal mas Evernote terminando de sincronizar, no tengo resultados todava... Voila! * notificacin de Carlos por BBM desde la cafetera, quedan 2 minutos, prueba este link a Dropbox me dice. Click al link, se abre

la web de Dropbox, el avin despega, click botn direct download (escondo la BB bajo la chaqueta para que no me vea la azafata), click a save, downloading.... Tengo 1 min mas descuento del arbitro hasta desde el aire ya.... perder cobertura de datos... Downloading pdf file 4,1Mb... Se ve la T2

Pgina 10

Mientras se descarga aviso a Carlos por BBM de que ha funcionado el link, nos remos y damos gracias a Dios y a la nube, el se termina a las mujeres de su vida. tranquilamente su caf, yo leo su libro durante el vuelo, esta dedicado

Foto de Eduardo Fernndez Nuestro entorno se est configurando rpidamente hacia la se han enriquecido y la forma de compartir informacin tanto escrita como visual han dado un salto cuntico, como demuestran las redes sociales actuales. hiperconectividad, instantnea y en movimiento. Las comunicaciones

En este contexto, la informacin, los servicios y sus aplicaciones desde la nube no han hecho nada mas que arrancar y sobre todo en el lado de las Apps, la experiencia de usuario y la interaccin con los servidores (la nube de nuevo) solo estamos en el estado de infancia.
Pgina 11

Las tecnologas abiertas en internet son una de las claves fundamentales del desarrollo para mviles en los prximos aos. WebWorks es una plataforma de desarrollo abierta, Open Source, basada en estndares Este libro habla de eso, de como iniciarse en la programacin sobre la plataforma WebWorks de BlackBerry. De una forma clara y directa, incluyendo ejemplos practicos Carlos ha creado una gua prctica para desarrollar Apps y entender WebWorks, su entorno y configuracin, el SDK, Ripple, sus APIs e incluso el proceso de publicacin en App World, la tienda de aplicaciones de BlackBerry. Le estar eternamente agradecido a Carlos, porque yo me cri con el

abiertos: HTML5, CSS3 y JavaScript, los estndares de la web de hoy.

ensamblador del Commodore 64, y me quede en el C++ de unos aos nivel de la nueva generacin de jvenes programadores y, con un poco de suerte y mucho esfuerzo, cambiar el mundo. Gracias Carlos. Ed

despus, en los 90, y ahora, gracias a este libro, podr ponerme al

Eduardo Fernndez Rojo es VP and Managing Director, Spain & Mediterranean en Research In Motion (RIM) y se define como Wireless industry veteran accelerating mobile computing adoption, hyperconnectivity & multitasking.1st PC = Commodore 64 @ 1MHZ w/ 64Kb BlackBerry evangelist https://twitter.com/efernandez

Pgina 12

2. RIM y BlackBerry

esearch In Motion Limited (RIM) es la compaa canadiense creadora de los dispositivos de comunicacin BlackBerry. La sede de la empresa est en Waterloo, Ontario, y fue fundada por Mike Lazaridis, que desempe el cargo de CEO de la compaa junto con Jim Balsillie hasta Enero de 2012 en el que Lazaridis qued como vicepresidente y Balsillie forma parte del consejo, pasando al cargo de CEO Thorsten Heins. Antes de la fabricacin de los dispositivos BlackBerry, RIM trabaj con la empresa RAM Mobile Data y con Ericcson para desarrollar una red de datos inalmbrica llamada Mobitex, con caractersticas como paginacin dual y sistema inalmbrico de correo electrnico. Algo fundamental en este desarrollo fue la liberacin del paginador de datos Inter @ctive pager 950 cuyo lanzamiento se dio en Agosto del ao 2000. Con el tamao de una barra de jabn este dispositivo competira con Skytel desarrollado por Motorola y que era tambin un sistema de datos dual o de doble va.

Pgina 15

Los principios de Research In Motion como desarrollador se dieron en 19951 con el financiamiento de 5.000.000 de Dlares Canadienses por parte de instituciones Canadienses de capital. Desde entonces, RIM ha actualizado y lanzado al mercado internacional una gran variedad de dispositivos que se ejecutan sobre redes GSM, CDMA, iDEN de Motorola y recientemente redes HSDPA, UMTS, EDGE, 3G y 4G LTE. Los telfonos inteligentes BlackBerry usan el sistema operativo BlackBerry OS. BlackBerry es apreciada en los entornos empresariales y se hizo popular al ser utilizada por personajes como Barack Obama. En el mundo, un 11% de los telfonos inteligentes vendidos y un 2,9% de los dispositivos mviles en general son BlackBerry, lo que convierte a RIM en el cuarto proveedor de OS/telfonos inteligentes y en el sexto fabricante de terminales2. El primer dispositivo de BlackBerry fue el 1990, que se lanz en el ao 1999 y funcionaba como un localizador de cinco vas. El BlackBerry ms conocido sali al mercado en 2002; soportaba push e-mail, telefona mvil, mensajera de texto, faxes por Internet, navegacin web y otros servicios informticos inalmbricos. Actualmente, el ms vendido y utilizado por los usuarios es el BlackBerry Curve 8520.

1. El origen del nombre de la marca BlackBerry

Hacia mediados del ao 2000, la empresa RIM gestora de los telfonos inteligentes contrat a Lexicon Branding, una compaa encar-

1. - Fu fundada en 1984. 2. - Segundo fabricante de telfonos inteligentes en el mundo por volumen en el 2010. Pgina 16

gada de buscar nombres para productos, que estableci una conexin entre la fruta blackberry (mora en Ingls), el color oscuro y la conformacin del teclado del dispositivo. La mayora de los modelos actuales de BlackBerry traen incorporado un teclado QWERTY optimizado, en el que se utilizan los pulgares para escribir, otros incluyen un teclado SureType, pero no todos los modelos tienen teclado fsico ya que hay algunos modelos de pantalla tctil. El sistema de navegacin se logra principalmente por una bola de desplazamiento o Trackball en el centro del aparato; los ms antiguos utilizan una rueda de pista en el lado, y en los nuevos dispositivos, se navega mediante un botn o almohadilla sensible a la friccin, el trackpad (almohadilla de seguimiento), en lugar de la rueda de desplazamiento. Algunos modelos tambin incorporan un Push to Talk (PTT, presiona para hablar en ingls), similar a un radio de dos vas, aunque este servicio depende del operador, el nico equipo que dispone de un Push To Talk real es el BlackBerry de la Serie Curve 8350i que utiliza una red iDen, que no es compatible con redes GSM o CDMA ya que trabaja con Bandas de un mximo de 840 Mhz.

2. BlackBerry Messenger
BlackBerry Messenger (BBM, mensajera de BlackBerry) es una aplicacin de mensajera instantnea exclusiva para todos los telfono inteligentes de la marca BlackBerry. El BBM le permite al usuario chatear con sus contactos BlackBerry; adems, se pueden crear grupos entre familiares, amigos o compaeros para intercambiar archivos, fotos, msica, mensajes. Gracias a las aplicaciones conectadas, los usuarios del BBM pueden compartir todo lo que tengan en su telfono inteligente. El BBM da la oportunidad de comunicarse al instante y se puede ver con
Pgina 17

claridad cuando el receptor de tu mensaje lo ha recibido, ledo y te est contestando. Funciona a travs de un cdigo PIN (Personal Identification Number o nmero de identificacin personal) y se puede personalizar con una foto de perfil, aadirle una frase e incluso mostrar la msica que el usuario est escuchando o su localizacin mediante Foursquare3.

3. Sistema Operativo
RIM proporciona un OS (Sistema Operativo) multitarea para el BlackBerry, lo que permite un uso intensivo de los dispositivos de entrada disponibles en los telfonos, en particular la rueda de desplazamiento y el trackpad (septiembre 2009 hasta la actualidad). El sistema operativo proporciona soporte para Java MIDP 1.0 y WAP 2.0. Las versiones anteriores permitan la sincronizacin inalmbrica con Microsoft Exchange Server para el correo electrnico y calendario, al igual como con Lotus Domino e-mail. El actual OS (OS 5.0, 6.0, 7.0) proporciona un subconjunto de MIDP 2.0 y permite activacin inalmbrica completa y sincronizacin con Exchange de correo electrnico, calendario, tareas, notas y contactos, y aade un soporte para Novell GroupWise y Lotus Notes.

4. Presente y futuro de RIM

RIM anunci, en febrero de 2009, que estaba expandiendo sus operaciones globales mediante la apertura de una oficina y centro de entrenamiento en el norte de Sidney, Nueva Gales del Sur, Australia. La nueva oficina cuenta con los servicios de formacin, un centro de investigacin y desarrollo, un centro de comercializacin para socios estratgicos, y servicios de apoyo tcnico.

3. - https://es.foursquare.com/ Pgina 18

El 12 de abril de 2010, RIM lleg a un acuerdo con Harman Internacional para adquirir QNX Software Systems. RIM est muy entusiasmado con el proyecto de adquisicin de QNX Software Systems y esperamos con inters la colaboracin permanente entre Harman, QNX y RIM para integrar y mejorar an ms la experiencia del usuario entre los smartphones y en los vehculos de audio y sistemas de informacin y entretenimiento dijo Mike Lazaridis, vicepresidente de RIM. Adems de nuestros intereses en la expansin de las oportunidades de QNX en el sector de la automocin y otros mercados, creemos que el proyecto de adquisicin de QNX tambin traer otro valor a RIM en trminos de apoyo a determinados planes de producto sin previo aviso para los perifricos inteligentes, aadiendo valiosa propiedad intelectual. Siendo una compaa en expansin, BlackBerry ha adquirido a otras compaas para mejorar las prestaciones de sus productos: Diciembre 2008 Chalk Media, plataforma de entrega de contenidos mediante la tecnologa Push de la plataforma BlackBerry. Agosto 2009 Torch Mobile, navegadores web para diversas plataformas mviles. Marzo 2010 Viigo, lectores de RSS para dispositivos mviles. Abril 2010 QNX Software, sistema operativo de plataforma abierta. Agosto 2010 Cellmania, compaa desarrolladora de software para mviles. Septiembre 2010 DataViz, soluciones de productividad a travs de una variedad de plataformas y compatibilidad de Ofce. Diciembre de 2010 The Astonishing Tribe (TAT), software para telfonos mviles y especialista en la interfaz de usuario.
Pgina 19

Febrero de 2011 Gist, soluciones para la gestin de los contactos de los usuarios. Marzo de 2011 tinyHippos, emulador de entornos mviles. Abril de 2011 Tungle, un proveedor lder de calendario y planicacin de citas online. Mayo de 2011 ubitexx GmbH, gestin de dispositivos mviles para dispositivos no RIM. Junio de 2011 Scoreloop, especialista en juegos sociales mviles. Julio de 2011 JayCut, editor de video online. Octubre 2011 NewBays LifeCache, la plataforma facilita a las operadoras y fabricantes de dispositivos la entrega de contenidos a mltiples dispositivos como telfonos inteligentes, PCs y tabletas. Marzo 2012 Paratek Microwave, Inc., desarrolladores de tecnologa de adaptacin frecuencia de radio ajustable (RF).

Texto extrado de Wikipedia y fuentes de RIM4

4. - http://es.wikipedia.org/wiki/Blackberry http://es.wikipedia.org/wiki/Research_In_Motion http://www.rim.com/newsroom/ Pgina 20

Mike Lazaridis (vicepresidente y fundador de RIM) .

Pgina 21

3. Por qu programar para BlackBerry?

rogramar para el entorno BlackBerry puede brindarnos numerosas ventajas como desarrolladores, pero para hacernos una idea veamos algunos datos: Segundo fabricante de telfonos inteligentes en el mundo en el 2010. El BlackBerry Curve 8520 ha sido el telfono inteligente ms vendido en Espaa en el 2010. La plataforma BlackBerry est disponible en ms de 175 pases con ms de 565 operadoras y partners de distribucin. BlackBerry App World (el servicio de distribucin de aplicaciones de BlackBerry) cuenta con ms de 28.000 desarrolladores registrados. Los usuarios de App World que compran a travs de la operadora descargan un 70% ms de aplicaciones de pago. El 35% de las compras en el App World se pagan con la factura de la operadora. Las aplicaciones del App World generan un 40% ms ingresos que las de Android Market. Las aplicaciones del App World tienen 1,5 veces ms descargas que en App Store. Mippin5 indica que su aplicacin del Daily Star para BlackBerry y PlayBook tena 2.494 descargas en dos semanas y creci a las 41.194 (+1550%) al convertirla en SuperApp (integrada con las funciones de BlackBerry).

5. - http://mippin.com/web/ Pgina 23

Ms de tres millones de descargas de la aplicacin de Facebook para BlackBerry en el primer trimestre de 2011. El 13% de los desarrolladores de BlackBerry han ganado 100.000 $ o ms con aplicaciones del App World. 2.000 millones de descargas de aplicaciones del App World alcanzadas en enero de 2012. 3.000 millones de descargas de aplicaciones del App World alcanzadas a mediados del 2012 (786 das en alcanzar la marca de mil millones, 210 das para alcanzar los dos mil millones y slo 176 das en alcanzar los tres mil millones). 26 monedas soportadas en el App World y pagos por medio de la operadora soportados en 40 operadoras en todo el mundo. Ms de 90.000 aplicaciones disponibles en el App World y unos 6 millones de descargas diarias de aplicaciones de media. Segn GfK6 BlackBerry creci en Espaa un 162% en el 2011 con respecto al ao anterior, mas del doble de ventas. Ms de 250.000 BlackBerry Entreprise Servers activos. Ms de 129 millones de dispositivos vendidos (ms de 14 millones doscientos mil en el ltimo ao fiscal). Ms de 75 millones de suscriptores de BlackBerry. El uso de BlackBerry Messenger ha aumentado ms de un 500% en el ao fiscal 2010, alcanzando los 33 millones de usuarios.

6. - http://www.gfk-emer.com/ Pgina 24

El entorno BlackBerry (BIS y BES) optimiza el uso de ancho de banda, siendo el ahorro en la navegacin y uso de Facebook de un 2x y de un 4x en el caso del correo electrnico.

Adems podemos realizar todo el desarrollo con herramientas gratuitas y el alta en el App World para distribuir nuestras aplicaciones es gratuita (ya sean aplicaciones gratis o de pago).

1. Por qu WebWorks?
La plataforma de desarrollo WebWorks 7 es Open Source y est basada en estndares abiertos como son HTML58, CSS39 y JavaScript10, que al ser estndares para la web nos brindan la oportunidad de portar fcilmente

7. - http://blackberry.github.com/webworks/index.html 8. - http://dev.w3.org/html5/spec/Overview.html 9. - http://www.w3.org/Style/CSS/ 10. - http://es.wikipedia.org/wiki/JavaScript Pgina 25

nuestros desarrollos web a la plataforma de BlackBerry, y con un nico cdigo fuente podemos desarrollar nuestras aplicaciones tanto para los telfonos inteligentes BlackBerry como para la tableta BlackBerry PlayBook. Tenemos disponibles mltiples funciones en el API de BlackBerry Web Works para acceso a funciones de mensajera (en el telfono), cmara, GPS, sistema de archivos y muchas otras funciones nativas de los dispositivos, pudiendo realizar aplicaciones de gran atractivo, integracin e interactividad con el usuario con funcionalidades como WebGL (PlayBook y BlackBerry 10), mensajes Push (en el telfono), etc.

2. PlayBook
La BlackBerry PlayBook es la tableta de RIM de calidad profesional y diseada para ofrecer una experiencia de alto rendimiento con un procesador de doble ncleo a 1 GHz. BlackBerry Tablet OS con multiprocesamiento simtrico y 1 GB de RAM, ofrece total compatibilidad con Adobe Flash 10.1 y dispone de soporte integrado para HTML 5. Su pantalla LCD de 7 pulgadas tiene una resolucin de 1024 x 600, es capacitiva con compatibilidad para gestos multitctiles de 4 dedos y dos cmaras11, salida de vdeo H.264, MPEG4 y WMV HDMI con puerto micro HDMI para reproduccin 1080p y compatible con POSIX OS, SMP, Open GL, WebKit, Adobe Flash y Adobe Mobile AIR. Todo esto en un tamao de 194x130 milmetros y un grosor de 10mm. con un peso de 425 gramos.

11. - Cmara frontal de alta definicin 1080p con 3 MP y cmara posterior de alta definicin 1080p con 5 MP. Pgina 26

Con esta lista de caractersticas y la potencia y facilidad que nos brinda WebWorks, el nico lmite a la hora de desarrollar estar en nuestra capacidad de innovacin e inventiva.

3. BlackBerry 10
BlackBerry 10 es el nuevo Sistema Operativo de BlackBerry que estar disponible desde principios de 2013 y que brindar una nueva dimensin a los SmartPhones y tabletas (la PlayBook recibir actualizacin a BlackBerry 10).

Pgina 27

Las caractersticas de los nuevos dispositivos se conocern con la salida del sistema operativo en el 2013, pero de momento ya tenemos entre nuestras manos un dispositivo para desarrolladores que nos ha brindado RIM para que probemos nuestras aplicaciones en un entono real (adems de los simuladores). El BlackBerry 10 Dev Alpha tiene una resolucin de pantalla de 1280x768 pixels (356dpi) en una pantalla de 4,2 pulgadas, con 16GB. de almacenamiento interno, conectividad Bluetooth y NFC, cmaras delantera y trasera, entre otras caractersticas. Aunque el primer dispositivo con BlackBerry 10 tendr la resolucin de pantalla del Dev Alpha, los dems dispositivos estandarizarn su resolucin con 1280x720 pixels (proporcin 16:9) para los dispositivos tctiles
Pgina 28

y para los dispositivos con teclado ser de 720x720 pixels (proporcin 1:1). Para identificar los dispositivos con navegador Webkit de dispositivos BlackBerry 10, se ha incluido una nueva cadena de navegador: Mozilla/5.0 (BB10; <Device Model>) AppleWebKit/<WebKit Version> (KHTML, like Gecko) Version/<BB Version #> Mobile Safari/<WebKit Version> Con las siguientes caractersticas: Mozilla/5.0 utilizado histricamente para indicar un navegador compatible Mozilla. BB10 El identificador primario de un dispositivo BlackBerry 10. <Device Model> Modelo del dispositivo AppleWebKit/<WebKit Version> Nmero de la versin de WebKit. KHTML, like Gecko Origen del motor WebKit. Version/<BB Version #> Nmero de versin de software. Mobile Indica que el dispositivo es mvil, puede tener una pantalla fsica pequea y ancho de banda limitado. Safari/<WebKit Version> utilizado histricamente para indicar un navegador compatible Safari.

Los principales cambios de la nueva cadena de navegador es la eliminacin del mismo de la palabra BlackBerry debido a que muchos sitios web filtraban dicha cadena para servir un sitio web con caractersticas recortadas mostrando los sitios completos y de mayor contenido a

Pgina 29

otras cadenas de dispositivos mviles. Dicha cadena se ha eliminado y se ha aadido BB10. Adems de ha limpiado la cadena eliminando la versin de locale (por ejemplo en-US) y el indicador de fuerte encriptacin (ej: U), aunque se mantiene dicha encriptacin.

Pgina 30

4. Configurando nuestro entorno

amos a comenzar con la preparacin de nuestro entorno para la realizacin de aplicaciones para la BlackBerry PlayBook y lo primero es nuestro editor de HTML, CSS, JavaScript y XML, a continuacin instalaremos el SDK de WebWorks para nuestros desarrollos y por ltimo el simulador del PlayBook o de BlackBerry 10 para la prueba de nuestras aplicaciones, adems de ver como realizar las prueba en el entorno real, es decir, con una PlayBook fsica o un Dev Alpha.

1. Editor
Nuestro trabajo diario en la programacin con WebWorks la realizaremos con una combinacin del IDE12 Eclipse13 con el Plug-in Aptana Studio14. Descargamos el Eclipse Clasic (actualmente versin 4.2.1 Juno), la versin de 32 o 64 bits segn nuestro SO, para poder ejecutarlo deberemos tener instalado Java runtime environment (JRE)15 5 o superior. Descomprimimos el archivo zip descargado en nuestro PC y ejecutamos Eclipse, seleccionamos donde se guardar nuestro espacio de trabajo y pasamos a instalar el Plug-in Aptana Studio 3.

12. - http://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado 13. - http://www.eclipse.org/downloads/ 14. - http://aptana.com/products/studio3/download 15. - http://java.com/es/download/ Pgina 31

Para instalar Aptana Studio 3 como Plug-in de Eclipse, vamos al men Help -> Install New Software se nos abrir el dilogo de nuevo software y en el recuadro Work With pondremos la url http://download.aptana. com/studio3/plugin/install pulsamos la tecla enter y a continuacin marcaremos el recuadro junto al Plug-in (seleccionaremos Next y aceptamos los trminos de licencia). A continuacin podremos configurar nuestro entorno en castellano para lo que vamos de nuevo a Help -> Install New Software y en Work with: ponemos http://download.eclipse.org/technology/babel/update-site/R0.9.1/indigo y a continuacin seleccionamos eclipse y espaol (siguiendo los pasos y aceptando los trminos de licencia). Ya tenemos nuestro entorno de edicin (IDE) con todo lo necesario para crear nuestras aplicaciones. Podemos configurar diversas opciones de resaltado de sintaxis, la tabulacin por defecto, el navegador donde queremos ver los resultados, la codificacin de los archivos y multitud de opciones ms.

Pgina 32

El entorno dispone de autocompletado de funciones, reconociendo HTML5, CSS3, JavaScript y diversas libreras como jQuery16 que nos resultar muy til en nuestros desarrollos.

Si mostramos la vista esquema podremos observar y navegar por la estructura de nuestro archivo JavaScript (accediendo a la variables y funciones), HTML, CSS XML.

16. - http://jquery.com/ Pgina 33

La primera visualizacin de nuestras aplicaciones la realizaremos desde el navegador (desde el que tambin podremos ir depurando), para lo que utilizaremos el navegador basado en WebKit17 Chrome18. La instalacin del navegador Chrome es tan sencilla como la descarga y ejecucin del archivo descargado. Para acceder al DOM de la pgina, depuracin y perfilado podemos ir a las opciones del navegador (icono de llave inglesa en la parte superior derecha del navegador) y seleccionar Herramientas -> Herramientas para desarrolladores (Ctrl+Mays+I) o tambin sobre cualquier elemento de la pgina podemos pulsar el botn derecho del ratn y seleccionar Inspeccionar elemento.

17. - http://www.webkit.org/ 18. - https://www.google.com/chrome/ Pgina 34

2. WebWorks SDK
Una vez instalado y configurado nuestro IDE, debemos instalar el SDK de WebWorks. Antes de la instalacin del SDK de WebWorks, deberemos instalar Adobe AIR SDK v2.7 o superior, que descargaremos desde http://www. adobe.com/special/products/air/sdk/ y una vez instalado19 ya podemos proceder a la descarga del SDK de WebWorks desde https://bdsc.webapps.blackberry.com/html5/download/sdk, despus comenzaremos con la instalacin siguiendo los pasos del asistente que sern los siguientes: 1. Localizamos el instalador del SDK de WebWorks previamente descargado y ejecutamos el archivo. 2. Hacemos click en siguiente para comenzar el proceso de instalacin. 3. Revisamos el acuerdo de licencia y si estamos de acuerdo con el mismo, seleccionamos Aceptar los trminos de licencia y hacemos click en siguiente. 4. Especificamos la localizacin donde queremos instalar el SDK de WebWorks y hacemos click en siguiente. 5. Especificamos la localizacin de Adobe AIR SDK (instalado en el proceso anterior) y hacemos click en siguiente. 6. Revisamos el sumario de pre-instalacin y hacemos click en Instalar.

19. - Adobe AIR SDK v2.7 o superior es necesario para la creacin de Apps para la PlayBook, para SmartPhones hasta BlackBerry 7.x es preciso tener instalado Java SE 6 JDK 32-bit (http://www.oracle.com/technetwork/java/javasebusiness/downloads/ java-archive-downloads-javase6-419409.html) Pgina 35

7. Hacemos click en Aceptar cuando se complete el proceso de instalacin. Entre los requisitos para la ejecucin de WebWorks, deberemos tener en cuenta que adems del anteriormente sealado Adobe AIR SDK v2.7 o superior, deberemos tener instalado en nuestro sistema Java Run time Environment 1.620 al menos 1GB de espacio disponible en nuestro ordenador y 2GB o ms de RAM, con una resolucin mnima de pantalla de 1024x768 y un procesador Intel Pentium 4 o AMD Athlon de al menos 2 GHz con un Sistema Operativo Windows XP SP3 32-bit, Windows 7 32-bit o 64-bit, o Mac OS X 10.6.4 o posterior.

3. PlayBook Simulator y BlackBerry 10 Simulator

La mquina virtual de la PlayBook y BlackBerry 10, la descargaremos e instalaremos en un directorio de nuestra eleccin. La descarga de la misma desde http://us.blackberry.com/developers/resources/simulators.jsp est disponible para sistemas Windows, Mac y Linux. Para ejecutarla deberemos instalar el VMware Player21 a continuacin y una vez finalizado el proceso de instalacin de VMware Player, lo ejecutamos y seleccionamos Open a Virtual Machine y navegamos hasta el directorio donde instalamos el BlackBerry OS.

20. - http://www.java.com/es/download/ 21. - http://www.vmware.com/products/player/ Pgina 36

Y ya tendremos creada nuestra mquina virtual con el BlackBerry PlayBook Simulator o BlackBerry 10 (con 1GB de RAM como el real, por lo que nos consumir 1GB de nuestra mquina anfitrin). Ahora nos queda ejecutar la mquina virtual haciendo click en Play Virtual Machine (teniendo seleccionada BlackBerry Simulator en la parte izquierda del selector de mquinas virtuales) y comenzar a ejecutarse nuestra mquina virtual con la PlayBook o BlackBerry 10.
Pgina 37

Una vez iniciada, veremos que ya est en modo de desarrollo (la IP que nos muestra la necesitaremos para enviar nuestras Apps, lo que veremos en prximos captulos), lo que podremos cambiar y volver a activar en las opciones (el icono con forma de tuerca de la esquina superior derecha) en seguridad. Tambin en las opciones en Idioma, podremos ponerlo en Espaol.

Pgina 38

5. Comenzando a desarrollar

a tenemos instalado todo nuestro sistema base para el desarrollo de aplicaciones de la BlackBerry PlayBook y BlackBerry 10, tenemos instalado un entorno de desarrollo, el sistema necesario para interactuar con la tableta (WebWorks) y una mquina virtual para ver el resultado de nuestros desarrollos. Ha llegado el momento de empezar a afinar nuestras herramientas y comenzar con la creacin de aplicaciones.

1. Usando un servidor web local

Como veremos en la siguiente seccin, Ripple tiene un servidor web integrado, pero yo prefiero desarrollar la primera fase de la aplicacin probando el resultado en Google Chrome (recordemos que es motor WebKit al igual que el motor de ejecucin de nuestras aplicaciones) bajo un servidor local. Para dicha tarea podemos instalar en nuestro PC el servidor web que ms nos guste, ya sea Apache22, lighttpd23 o el que yo uso y que describir que es Nginx24. El proceso de instalacin es muy sencillo, desde la pgina de descarga http://nginx.org/en/download.html seleccionamos nuestro sistema (aqu explicar el proceso para Windows), descomprimimos la carpeta y ya tenemos un servidor web operativo.

22. - http://httpd.apache.org/ 23. - http://www.lighttpd.net/ 24. - http://www.nginx.com/ Pgina 39

Si utilizis Skype y lo tenis abierto, deberis cerrarlo antes de arrancar el servidor web si vais a utilizar el puerto 80 por defecto (ya que normalmente es el que utiliza Skype si lo encuentra libre), pero una vez cerrado, arrancis el servidor web (Nginx) y despus podis volver a iniciar Skype, el cual utilizar un nuevo puerto al encontrar ocupado el 80. Para configurar nuestro primer sitio web, en el archivo de configuracin de Nginx (/RutaInstalacion/conf/nginx.conf) aadimos la siguiente configuracin:
01. 02. 03. 04. 05. 06. server { listen 80; server_name playbook.web; root D:/APPs_BB/PlayBook/HolaMundo; index index.htm index.html; }

Guardamos el archivo nginx.conf y aadimos nuestro DNS falso al archivo de hosts (C:\Windows\System32\drivers\etc\hosts). En el ejemplo anterior el DNS playbook.web mostrar en el navegador el archivo index.htm index.html (en este orden) de la ruta indicada en la lnea root, para lo que deberemos aadir al archivo de hosts la siguiente lnea:
01. 127.0.0.1 playbook.web

Una vez guardado el archivo de hosts ya podemos arrancar nuestro servidor web ejecutando la ordenes en lnea de comando, o para facilitar el proceso crearemos un archivo por lotes, por lo que al hacer doble click sobre el mismo primero terminar todas las tareas en ejecucin de Nginx (si existen) y lo arrancar de nuevo. Para evitar que quede abierta la ventana de comandos (cmd), utilizaremos un pequeo programa (RunHiddenConsole) que podemos encontrar con una rpida bsqueda
Pgina 40

por Internet y situar en nuestra carpeta de Windows System32 para poder ejecutarlo desde cualquier ruta.

El contenido del archivo por lotes ser el siguiente:

01. 02. 03. 04. 05. @ECHO OFF taskkill /f /IM nginx.exe ECHO Iniciando Nginx... RunHiddenConsole.exe C:\nginx\nginx.exe EXIT

Hacemos doble click sobre nuestro archivo por lotes (por ejemplo inicia_server.bat) y ya tenemos nuestro servidor web ejecutndose y listo para servir el contenido de nuestras pginas web (que sern nuestras aplicaciones para la PlayBook y BlackBerry 10).

Pgina 41

Visualizacin de aplicacin en Google Chrome

2. Usando Ripple
Otra alternativa al uso de Google Chrome y nuestro servidor web local, es usar el entorno Ripple. No creo que sean excluyentes y yo os recomiendo usar la previsualizacin y depuracin de las aplicaciones, tanto en Google Chrome como en Ripple (y posteriormente en el simulador y en una PlayBook real BlackBerry 10). Uno de los motivos para el uso de ambos es que la visualizacin de nuestro HTML en Ripple no se ajusta totalmente al entorno real, y la aplicacin mostrada en el ejemplo anterior (Palabra Clave25) se ve igual en el navegador y en el simulador de nuestra mquina virtual, pero en Ripple aumenta ligeramente el tamao de letra y veremos que el tiempo en la parte superior izquierda pasa a ocupar dos lneas, aunque con cada nueva versin se van corrigiendo ms bugs y cada vez es ms real la apariencia mostrada (recordemos que Ripple an est en fase Beta).
25. - http://appworld.blackberry.com/webstore/content/79684/?lang=es Pgina 42

Visualizacin de aplicacin en Ripple

Para instalar Ripple deberemos descargar la extensin para Google Chrome26 desde nuestro navegador, si utilizamos Chrome para la descarga intentar instalarlo, pero Chrome no lo instalar avisndonos de que Solo se pueden agregar extensiones, aplicaciones y secuencias de comandos de usuario procedentes de Chrome Web Store, aceptaremos y procederemos a ejecutar los siguientes pasos para su instalacin.

26. - https://developer.blackberry.com/html5/download/ripple Pgina 43

Haremos clic en el icono de llave inglesa situado en la barra de herramientas del navegador (parte superior derecha). Seleccionamos Herramientas > Extensiones. Buscamos el archivo descargado de la extensin Ripple (ripple_ui.crx) en el ordenador y arrastramos el archivo a la pgina Extensiones (nos aparecer un recuadro indicndonos que debemos Soltar para instalar).

Revisamos la lista de permisos en el cuadro de dilogo que se nos mostrar y hacemos clic en Agregar.

Pgina 44

Nos aparecer un recuadro avisndonos de la correcta instalacin de Ripple y que deberemos hacer clic sobre su icono para activar la extensin (cuando nos encontremos en una url de un proyecto nuestro para Ripple).

Y ya tendremos Ripple instalado. Para activarlo, ponemos en la barra de direcciones la url de uno de nuestro proyectos y una vez cargado en el navegador, pulsamos sobre el botn de Ripple para activar la extensin en esta url. Si es la primera vez que ejecutamos Ripple nos aparecer el acuerdo de licencia que aceptaremos. Despus seleccionaremos el entorno para el que desarrollaremos el proyecto actual: Para BlackBerry 10 seleccionaremos BlackBerry 10 WebWorks. Para BlackBerry PlayBook seleccionaremos WebWorks-TabletOS. Para BlackBerry OS (5, 6 7) seleccionaremos WebWorks.

Y dentro de cada tipo podremos seleccionar el dispositivo de nuestra eleccin (de momento slo en WebWorks, ya que en los otros dos slo hay un dispositivo de cada, el PlayBook y el 10 Dev Alpha).

Pgina 45

Entorno Ripple

Entre las numerosa opciones de Ripple podemos encontrar en la parte izquierda las siguientes secciones: 1. Devices En esta seccin configuramos nuestro dispositivo, que en nuestro caso es la BlackBerry PlayBook (si estamos desarrollando una aplicacin para SmartPhone en esta seccin elegiremos el modelo de telfono para probar nuestra aplicacin BlackBerry 10).

2. Platforms Eleccin de la plataforma con la que estamos desarrollando (Web Works , WebWorks para tablets, PhoneGap web mvil) y versin de la misma (en nuestro caso WebWorks para tablets).
Pgina 46

3. Information Aqu vemos la informacin sobre nuestra aplicacin, como puede ser el nombre de la misma, versin, icono, plataforma de desarrollo, dispositivo, SO, resolucin de pantalla y densidad de puntos por pulgada de la misma, etc...

4. Accelerometer Desde este apartado podemos cambiar la orientacin de pantalla, rotarla en los tres ejes, cambiar su gamma, agitarla, etc...

5. Invoke Si nos encontramos en BlackBerry 10, para las opciones del objeto Invoke.

6. Messaging Si nos encontramos en BlackBerry 5, 6 y 7. Pruebas de opciones de envo de SMS donde pondremos el usuario origen y texto a enviar.

7. Push Si nos encontramos en BlackBerry 5, 6 y 7. Para la prueba de envo de notificaciones Push, donde pondremos el puerto y datos a enviar.

Y en la parte derecha encontramos: 1. Settings Podemos configurar si se muestran los tooltips (o etiquetas que aparecen al pasar sobre los elementos), activar/desactivar Cross Domain Proxy y el tema de Ripple (oscuro o claro).
Pgina 47

2. Device & Network Settings Acceso a distintas configuraciones del dispositivo elegido como si est conectado por Wifi, el PIN del mismo, si el dispositivo se est cargando, el nivel de carga del mismo, tipo de conexin 3G, CDMA, etc... (para SmartPhones)

3. Geo Location Acceso a datos de GeoLocalizacin, pudiendo configurar la posicin GPS, precisin de la misma, tiempo de retardo, simular tiempo de espera del GPS agotado, ver la posicin en un mapa, etc...

4. Events Desde esta seccin podremos lanzar eventos como arrastrar el marco superior hacia abajo (para mostrar un men), inicio de arrastre, salir de la aplicacin, pasar la aplicacin a segundo plano o traerla a primer plano, etc...

5. Config En esta seccin veremos los parmetros del archivo config.xml de nuestra aplicacin, las caractersticas, nombre, descripcin, permisos, autor, licencia, etc... mostrndonos en verde los nodos que estn correctos (y han pasado la validacin), en rojo los nodos incorrectos (deberemos revisar la configuracin de dichos parmetros en nuestro archivo config.xml) y en blanco los ausentes pero no requeridos.

6. Phone Si nos encontramos en BlackBerry 5, 6 y 7. Desde esta seccin podemos configurar opciones del estado del telfono, como en llaPgina 48

mada, espera, desconectado, fallo, etc... 7. Build En esta seccin podemos configurar las opciones con la ruta de nuestro SDK de WebWorks, nuestras claves de aplicacin y la IP de nuestra PlayBook BlackBerry 10 (ya sea fsica o del simulador) para poder empaquetar nuestras aplicaciones, empaquetarlas y firmarlas o empaquetarlas y ejecutarlas en la PlayBook BlackBerry 10 (aunque yo os explicar el mtodo con la herramienta BlackBerryGraphicalAid que dispone de ms opciones).

Opciones de Ripple para empaquetar y firmar aplicaciones

Los requisitos del sistema para la instalacin de Ripple son un ordenador con procesador Intel Pentium 4 o AMD Athlon con una velocidad de al menos 2 GHz, con un espacio disponible en disco mnimo de 1 GB, 2 GB de RAM (o ms), una resolucin de pantalla mnima de 1024 x 768 y sistema operativo Windows XP SP3 32-bit, Windows 7 32-bit o 64-bit, o Mac OS X 10.6.4 o posterior27.
27. - Buscando un poco por la red podris ver Ripple ejecutndose en Linux bajo Chromium y con node.js sirviendo en el puerto 9910 utilizado por Ripple. Pgina 49

3. Nuestra primera aplicacin

Ahora que tenemos las herramientas preparadas para la realizacin de Aplicaciones vamos a ver como crearlas. Una aplicacin en WebWorks es una pgina html o un conjunto de pginas (sin lmite), con sus respectivos archivos de CSS para proporcionarle la apariencia adecuada, los archivos JavaScript en los que crearemos la lgica y funcionalidad de nuestra aplicacin y los archivos de imgenes, audio, vdeo, flash, xml, archivos de texto y todo tipo de archivos que podamos utilizar en nuestras pginas html. Adems de todo esto necesitamos tener un archivo config.xml en el que definiremos los iconos de nuestra aplicacin, su nombre, archivo inicial, si se puede utilizar en modo vertical, horizontal o ambos modos, la imagen de inicio, los permisos necesarios (acceder a archivos compartidos, urls externas, usar la cmara, etc.). Las diferentes opciones disponibles las podemos ver en https://developer.blackberry.com/html5/ documentation/config_doc_elements.html Un ejemplo de documento de configuracin bsico:
01. 02. 03. 04. 05. 06. 07. 08. 09. <?xml version=1.0 encoding=UTF-8?> <widget xmlns=http://www.w3.org/ns/widgets xmlns:rim=http://www.blackberry.com/ns/widgets version=1.0.0.0 rim:header=WebWorks Sample> </widget> <name>Programando para PlayBook y BB10 con WebWorks</name> <description>Archivo de configuracin de nuestra App.</description> <content src=index.html/>

Para el archivo index.html es una buena idea crear un contenedor en le que mostrar los diferentes contenidos y opciones, que mediante CSS y
Pgina 50

con declaraciones condicionales (CSS Media Queries) podremos adaptar a los diferentes tamaos de pantalla y a los modos vertical y horizontal.
01. //Ejemplo de inclusin de CSS para dispositivo tctil BB10 02. <link rel=stylesheet media=screen and (min-width: 1200px) and (min-height: 700px) href=css/bb10.css /> 03. 04. //Ejemplo de inclusin de CSS para PlayBook 05. <link rel=stylesheet media=screen and (max-width: 1100px) and (max-height: 650px) href=css/pb.css /> 06. 07. //Segn la orientacin del dispositivo 08. @media screen and (orientation:landscape) { 09. /** css para modo horizontal **/ 10. } 11. 12. @media screen and (orientation:portrait) { 13. /** css para modo vertical **/ 14. }

Nuestro archivo index.html encargado de ejecutar y mostrar la aplicacin:

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Programando para PlayBook y BB10 con WebWorks</title> <meta name=viewport id=viewport content=initial-scale=1.0,user- scalable=no /> <meta id=touch-event-mode content=native /> </head> <body> <div id=contenido> <h1>Nuestra primera App</h1> </div> </body> </html>

Pgina 51

En el caso de estar desarrollando una aplicacin para BlackBerry 10, en nuestro archivo de inicio (en el ejemplo mostrado index.html) deberemos incluir el archivo JavaScript de WebWorks con la versin correcta (webworks-<version>.js), por ejemplo <script src=webworks1.0.2.9.js></script> para la versin 1.0.2.9 beta28, adems, deberemos copiar dicho archivo en la ruta correcta de nuestra aplicacin (en el raz de nuestra aplicacin en el ejemplo mostrado), dicho archivo se distribuye con el SDK de WebWorks para BlackBerry 10, localizndose en las siguientes rutas: Windows XP: C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>\Framework\clientFiles29 Windows 7: C:\Program Files (x86)\Research In Motion\BlackBerry 10 WebWorks SDK <version>\Framework\clientFiles Mac OS: /Developer/SDKs/Research In Motion/BlackBerry 10 Web Works SDK <version>/Framework/clientFiles

Adems para aplicaciones de BlackBerry 10, antes de realizar llamadas a cualquier funcin del API, debemos aadir un listener del evento web worksready de la siguiente manera:
01. document.addEventListener(webworksready, start());

quedando nuestro archivo index.html de la siguiente manera:

28. - La ltima en el momento de escribir estas lneas https://developer.blackberry. com/html5/downloads/sdk/ 29. - Si nuestro SO est en espaol ser Archivos de Programa en vez de Program Files si lo vemos desde el explorador de archivos, aunque la ruta real sea Program Files. Si es Windows 7 64 bits ser Program Files o Archivos de Programa, sin el (x86), en mi caso la ruta es C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK 1.0.2.9\Framework\clientFiles Pgina 52

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Programando para PlayBook y BB10 con WebWorks</title> <meta name=viewport id=viewport content=initial-scale=1.0,user- scalable=no /> <meta id=touch-event-mode content=native /> <script src=webworks-1.0.2.9.js></script> <script> window.addEventListener(load, function(e) { document.addEventListener(webworksready, function(e) { document.getElementById(contenido).value = <h1>Nuestra primera App para BB10</h1>; }, false); }, false); </script> </head> <body> <div id=contenido> <h1>Nuestra primera App</h1> </div> </body> </html>

Aplicndole algo de estilo CSS como un fondo degradado a nuestro div contenedor y sombra al texto:
01. #contenido {background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.31, rgb(122,121,121)), color-stop(0.66, rgb(79,77,77)), colorstop(0.83, rgb(56,54,56)) );} 02. h1 {color:#FFF; font-size: 3em; text-shadow: 5px 5px 8px #000; font-family: Georgia;}

obtenemos el primer resultado de nuestra aplicacin (el clsico Hola Mundo30 pero con nuestro texto de BlackBerry), que podemos visuali30. - Aunque en el HTML hemos escrito Nuestra primera App, nos mostrar Nuestra primera App para BB10 ya que mediante javascript cambiamos el contenido del div Pgina 53

zar directamente en nuestro navegador Chrome (recordad que estamos utilizando CSS especfico de webkit, el motor de nuestras aplicaciones BlackBerry al igual que Google Chrome o Safari). Podremos ver la parte degradada, que ser la que muestre nuestra aplicacin y el resto (en blanco si no definimos ningn color de fondo para el html o body) que estar fuera del alcance visual de nuestro dispositivo (aunque podemos interactuar con dichos elementos que siguen formando parte de nuestra aplicacin).

4. Empaquetando la aplicacin
Una vez realizada nuestra primera aplicacin, debemos empaquetarla para poder usarla en nuestro dispositivo, ya sea el simulador de la PlayBook, Dev Alpha o cualquiera de los dos anteriormente mencionados pero reales. Adems de probarlo en los simuladores, deberis hacer pruebas en los dispositivos reales, porque aunque funcionan muy bien, a veces hay cambios en el hardware real y ya me he encontrado con

contenido en el evento webworksready. Pgina 54

aplicaciones que muestran algn texto ligeramente ms grande en alguno y descuadra la maquetacin realizada en nuestra aplicacin. Para empaquetar nuestra aplicacin, lo primero que deberemos hacer es crear un zip con los archivos necesarios de nuestra aplicacin, desde los iconos de la misma, grficos de inicio (Splash Screen), archivos css y js (sin olvidarnos de webworks-<version>.js si nuestra aplicacin es para BlackBerry 10) y htmls, imgenes, etc... Con este archivo zip conteniendo todo lo necesario para ejecutar nuestra aplicacin, deberemos crear el archivo .bar que es el que se instalar en nuestro simulador o dispositivo real. Para la creacin del archivo .bar, evidentemente deberemos tener descargado e instalado el SDK para la plataforma a la que est destinado nuestra aplicacin (PlayBook o BlackBerry 10)31 y para crear nuestro archivo empaquetado podemos optar por al menos tres opciones: 1. Crear el archivo .bar desde la lnea de comandos32 2. Crear el archivo .bar desde Ripple 3. Crear el archivo .bar desde BlackBerryGraphicalAid Nosotros vamos a utilizar la tercera opcin, creando nuestro archivo .bar desde BlackBerryGraphicalAid33, por lo que lo primero que haremos ser descargar el programa desde http://supportforums.blackberry.

31. - Podemos tener instalados ambos SDKs y ser necesario si queremos desarrollar para ambas plataformas. Ms adelante la PlayBook recibir actualizacin a BlackBerry 10 por lo que compilaremos nicamente para la nueva plataforma. 32. - Podemos usar un archivo .bat .cmd por lotes (shell scripts en Mac) para las distintas opciones. 33. - Herramienta creada con Adobe AIR. Pgina 55

com/t5/Testing-and-Deployment/BlackBerry-Tablet-OS-Graphical-Aid/ ta-p/1207067
Una vez instalada deberemos ir a la pestaa Configuration y ejecutar el asistente de configuracin (Run Configuration Wizard) para indicarle al programa donde se encuentran los diferentes SDKs. Una vez configurado el programa y con el archivo zip creado de nuestra aplicacin, dentro de la herramienta BlackBerryGraphicalAid iremos a la pestaa Build WebWorks. Seleccionamos nuestro archivo zip (botn Choose WebWorks Zip File). Seleccionamos el directorio de salida donde se crear el archivo .bar (botn Choose Bar Output Location)34. Si marcamos la casilla de Use Build ID podremos especificar un nmero en el cuadro de seleccin siguiente. Esta opcin es necesaria en cada nueva compilacin, si no, el SDK nos dar un fallo al crear el archivo .bar al existir de antemano dicho compilacin.35 Dejamos desmarcada la casilla de firmar nuestra aplicacin (Sign Application), ya que para probarla en nuestro dispositivo o simulador no nos hace falta36.

34. - Si hacemos clic sobre el botn y aceptamos, nos seleccionar por defecto el mismo directorio donde se encuentra el archivo zip usado en el paso anterior. 35. - Podemos dejar desmarcada esta casilla e ir indicando las nuevas versiones en el archivo config.xml incrementando el cuarto nmero en <widget xmlns=http:// www.w3.org/ns/widgets xmlns:rim=http://www.blackberry.com/ns/widgets version=1.0.0.29 rim:header=Nuestra App> 36. - Posteriormente para distribuir nuestra aplicacin en el App World (http:// es.blackberry.com/services/appworld/) deberemos firmarla, pero ese proceso lo veremos ms adelante. Pgina 56

Y le damos al botn Build que nos crear nuestra aplicacin (archivo .bar) en el directorio de salida indicado, as de sencillo!!!

Empaquetado de aplicaciones con BlackBerryGraphicalAid

5. Probando la aplicacin
Si hemos seguido los pasos anteriores, ya tendremos nuestra aplicacin realizada en WebWorks, lista para ejecutarse en nuestro simulador o en nuestro dispositivo real, segn como la hayamos realizado, la probaremos en nuestra PlayBook o en nuestro hardware BlackBerry 1037. Pero, cmo pasamos nuestra aplicacin .bar a nuestro dispositivo?, bien, el proceso una vez ms es sencillo y al igual que en el caso del empaquetado, podemos utilizar cualquiera de los tres mtodos antes mencionados y nuevamente vamos a explicar el mtodo desde BlackBerryGraphicalAid.

37. - En el momento de escribir estas lneas, slo est disponible el BlackBerry 10 Dev Alpha. Pgina 57

En primer lugar deberemos tener nuestro dispositivo en modo desarrollo, para lo cual vamos a opciones38 y en el apartado Configuracin seleccionamos Seguridad y en esa pantalla activamos el Modo de desarrollo.

Una vez activado el Modo de Desarrollo veremos un nuevo icono en la barra de estado superior, y si pulsamos sobre el mismo se nos indicar la IP asignada a nuestro dispositivo (la apuntaremos). Vamos de nuevo al BlackBerryGraphicalAid y nos situamos en la pestaa Install. El primer paso es seleccionar nuestro archivo .bar generado en el paso anterior (Choose Bar File), a continuacin en el recuadro BlackBerry PlayBook IP Address: ponemos la IP que acabamos de copiar desde nuestro dispositivo39 y si hemos puesto una clave a nuestro dispositivo, la escribiremos en el siguiente recuadro (BlackBerry PlayBook Password).
38. - El ltimo icono (con forma de tuerca) en la parte superior derecha de la pantalla. 39. - Debemos estar en la misma red, es decir, con el mismo rango de IP entre nuestro PC y el dispositivo. Pgina 58

Slo nos queda darle al botn Install y esperar unos segundos a que nuestra aplicacin aparezca en el dispositivo (se abrir directamente si hemos seleccionado la casilla Launch Application After Install).

Aunque podemos desinstalar aplicaciones desde el BlackBerryGraphicalAid, es ms fcil directamente desde el dispositivo, ya que si la pulsamos continuamente unos segundos, nos aparecer un icono para eliminar la aplicacin (un proceso ms fcil y rpido). Cada vez que realicemos un cambio sobre nuestra aplicacin (aunque slo sea un cambio de color de una fuente), deberemos volver a empaquetar nuestra aplicacin creando un archivo .bar e instalarla en nuestro dispositivo, por lo que es recomendable que hagamos los diversos cambios visualizndolos en nuestro navegador Chrome, posteriormente en Ripple y como paso final en el dispositivo. Pero algunas funcionalidades slo las podremos probar sobre nuestro dispositivo fsico, por lo que un truco para realizar cambios sobre la aplicacin sin tener que repetir todo el proceso, es indicar en nuestro archivo de aplicacin config.xml en vez de una ruta local de un archivo html,
Pgina 59

una ruta de red, para que dicho archivo sea servido desde nuestro servidor web y as poder realizar cambios sobre estilos, funciones, imgenes, etc, sin tener que volver a recompilar40.
01. 02. 03. 04. 05. 06. 07. <?xml version=1.0 encoding=UTF-8?> <widget xmlns=http://www.w3.org/ns/widgets xmlns:rim=http://www.blackberry.com/ns/widgets version=1.0.0.0 rim:header=WebWorks Sample>

<name>Programando para PlayBook y BB10 con WebWorks</name> <description>Archivo de configuracin de nuestra App con ejecucin desde servidor local.</description> 08. <content src=http://192.168.10.1/applibro/index.html/> 09. </widget>

40. - Si necesitamos nuevos permisos en nuestra aplicacin (por ejemplo acceso al GPS), no nos quedar ms remedio que volver a empaquetar y compilar nuestra aplicacin. Pgina 60

6. Usando el API de WebWorks

1. Eventos y sistema
Mediante el uso del objeto Application podemos acceder a las propiedades de la aplicacin en ejecucin, es decir, podemos mostrar el nombre de la misma, su ID, la licencia, versin, autor, email del mismo, etc. los datos que mostramos son los que previamente hemos definido en el archivo config.xml de la aplicacin. Las propiedades (de slo lectura) a las que podemos acceder son las siguientes: author (cadena de texto). Nombre del autor especificado en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). authorEmail (cadena de texto). Email del autor de la aplicacin, especificado en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). authorURL (cadena de texto). Sitio web del autor de la aplicacin, especificado en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). copyright (cadena de texto). Informacin de copyright de la aplicacin, especificado en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). description (cadena de texto). Descripcin de la aplicacin, especificada en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple).

Pgina 61

id (cadena de texto). El ID (identificador) de la aplicacin, especificado en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). isForeground (boolenao, true o false). Propiedad que devolver true si la aplicacin est en segundo plano. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). license (cadena de texto). Licencia de la aplicacin, especificada en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). licenseURL (cadena de texto). URL de la licencia de la aplicacin, especificada en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). name (cadena de texto). Nombre de la aplicacin, especificado en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). version (cadena de texto). Versin de la aplicacin, especificada en el archivo config.xml. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple).

Para usar las caractersticas del objeto Application debemos declarar en nuestro archivo config.xml la siguiente caracterstica: <feature id=blackberry.app /> Podemos por ejemplo mostrar el nombre de la App41, versin y autor de la siguiente manera:
01. var salida= Aplicacin: + blackberry.app.name;

41. - Se mostrar en un div con id= info (<div id= info></div>) Pgina 62

02. salida+=<br />Versin: + blackberry.app.version; 03. salida+=<br />Creada por: + blackberry.app.author; 04. 05. document.getElementById(info).innerHTML = salida;

Mediante la funcin blackberry.app.exit podemos salir de nuestra aplicacin (y previamente podemos mostrarle un cuadro de confirmacin).
01. function Salir(){ 02. blackberry.app.exit(); 03. }

Pgina 63

En cuanto a los eventos que se ejecutan relativos a nuestra aplicacin, disponemos de tres que son los siguientes: blackberry.app.pause, blackberry.app.resume y blackberry.app.swipedown con los que detectaremos si nuestra aplicacin est pausada, ha vuelto a la actividad o se ha ejecutado el movimiento para mostrar el men u opciones de la aplicacin42.
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. function onPause() { alert(La App va a ser pausada.); } function onResume() { alert(La App vuelve a estar activa.); } function onSwipedown() { alert(Evento Swipe down.); } blackberry.event.addEventListener(pause, onPause); blackberry.event.addEventListener(resume, onResume); blackberry.event.addEventListener(swipedown, onSwipedown);

Evidentemente, un simple alert no nos aporta mucho a nuestra aplicacin, pero si recurrimos al gitHub de RIM43, podemos ver un ejemplo de men que aparece al realizar el gesto SwipeDown en la siguiente direccin: https://github.com/blackberry/WebWorks-Samples/tree/master/ swipemenu

42. - Gesto de desplazamiento hacia abajo desde el marco activo superior. 43. - https://github.com/blackberry Pgina 64

2. Guardando datos en el dispositivo

Para guardar datos permanentes en nuestra aplicacin, tales como el estado de la misma, idioma seleccionado por el usuario, datos de autentificacin, etc. en WebWorks disponemos de dos opciones que son HTML5 Local Storage y HTML5 Databse. Adems de las dos opciones mostradas, tambin podemos guardar datos (y leerlos) en el sistema de archivos de nuestro dispositivo con las funciones IO44 que veremos brevemente al final de este apartado (podemos crear archivos en formato xml, txt, json, etc., cualquier tipo de archivo que podamos gestionar desde la aplicacin). El objeto HTML5 Local Storage guarda los datos como pares clave/valor. Las claves son cadenas de texto y sus valores pueden ser cualquier tipo de datos soportados por el algoritmo de clonacin estructurado. Disponemos de los siguientes mtodos:

44. - IN/OUT Pgina 65

localStorage.clear con el que vaciaremos todos los pares clave/valor de la lista de objetos si existen (de no existir, esta funcin no realiza ninguna accin). localStorage.getItem para obtener el valor de una determinada clave. localStorage.key para devolver una clave (mediante un ndice) de una lista, devolver null si el ndice es igual o mayor que el nmero de pares clave/valor en el objeto (recordemos que el ndice comienza en 0). localStorage.removeItem para eliminar un par clave/valor indicando la clave a eliminar, si la clave indicada no existe, ste mtodo no realizar ninguna accin. localStorage.setItem para guardar un par clave/valor. Si la clave indicada no existe se crear un nuevo par, si existe dicha clave, su valor se actualizar al nuevo valor indicado.

Un ejemplo bsico para guardar el idioma del usuario segn el botn que pulsemos sera:
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. //Para fijar el idioma de usuario a Ingls localStorage.setItem(lang, en); //Para fijar el idioma de usuario a Espaol localStorage.setItem(lang, es); //Para recoger el idioma de usuario en una variable var idioma=localStorage.getItem(lang);

//Podemos comprobar si an no se ha definido un idioma por el usuario y poner uno por defecto 11. if (!idioma){ 12. localStorage.setItem(lang, en); 13. }

Pgina 66

La segunda opcin para guardar datos de nuestras aplicaciones, ms estructurados y con una estructura de Bases de Datos, es la opcin de HTML5 Databse, con la que podemos realizar operaciones del lado del cliente ms complejas. Los mtodos disponibles son los siguientes: window.openDatabase para crear un nuevo objeto de Base de datos, si la Base de Datos a crear ya existe se devolver la misma y la funcin callback no se ejecutar (el quinto parmetro). Los primeros cuatro parmetros a pasar a la funcin son el nombre de la Base de Datos, la versin, el nombre a mostrar y su tamao estimado en bytes. changeVersion mtodo utilizado para cambiar la versin de la Base de Datos, aceptando cinco parmetros, que son la versin actual de la Base de Datos, la nueva versin, la transaccin a ejecutar, callback en caso de error y callback en caso de xito. readTransaction mtodo para realizar una transaccin de lectura (consulta) sobre la Base de Datos, adems del parmetro de la transaccin, ste mtodo admite los parmetros de callback para los casos de error (segundo parmetro) y de xito (tercer parmetro), ambas llamadas de callback se ejecutan de manera asncrona. transaction igual al mtodo anterior y con los mismos parmetros, pero con la diferencia de que las operaciones adems de lectura, tambin pueden ser de escritura (aadir nuevos datos, modificarlos o eliminarlos). version mtodo de slo lectura para ver la versin actual de la Base de Datos.
Pgina 67

Un ejemplo de uso en la pgina del API de HTML5 WebWorks45.

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. //Creamos un namespace para nuestra variable de BD if (typeof mynamespace === undefined) { mynamespace = {}; } (function () { //Este mtodo slo se invoca una vez, la primera vez que la BD es creada function onDBCreate(database) { mynamespace.db = database; database.transaction( function (tx) {tx.executeSql(CREATE TABLE tbl_name (key int unique, name text),[], function (tx, res) { alert(Tabla Creada Correctamente); }, function (tx, err) { alert(ERROR - Fallo al crear la tabla - code: + err. code + , message: + err.message); }); } ); }

17. 18. 19. 20. 21. 22. if (window.openDatabase) { 23. //Devolver la BD o null y llamar al callback de creacin onDBCreate 24. mynamespace.db = window.openDatabase(prueba, 1.0, Una prueba de BD, 5 * 1024 * 1024, onDBCreate); 25. } else { 26. alert(Este dispositivo no soporta HTML5 Database); 27. } 28. }());

Con HTML5 Databse podemos guardar datos del usuario en nuestra Aplicacin, consultar a un servidor remoto diferentes parmetros y almacenarlos para cuando no dispongamos de conexin, guardar la inte45. - https://developer.blackberry.com/html5/apis/ Pgina 68

raccin del usuario en la aplicacin y cuando detectemos una conexin disponible volcar dichos datos al servidor, etc., las posibilidades como con la mayora de las opciones que veremos, estarn limitadas en su mayora por nuestra imaginacin. Las funciones IO que disponemos en el API de WebWorks son las siguientes: Directory, File, FileProperties, FileTransfer, HTML5 DirectoryEntry, HTML5 DirectoryReader, HTML5 File, HTML5 FileEntry, HTML5 FileError, HTML5 FileReader, HTML5 FileSystem, HTML5 FileWriter, HTML5 Flags, HTML5 LocalFileSystem, HTML5 Metadata, y IO. Con las diferentes funciones de entrada/salida podemos leer los archivos de nuestra aplicacin, archivos del sistema de ficheros compartido a los que tengamos acceso, descargar un archivo remoto y guardarlo, modificar archivos, crear archivos al vuelo y guardarlos en nuestro dispositivo, crear carpetas, etc... Podemos dividir el API en tres grupos fundamentales: Lectura y manipulacin de archivos (File, FileReader), Creacin y escritura (FileWriter), Acceso a sistemas de archivos y directorios (DirectoryReader, DirectoryEntry, LocalFileSystem).

Respecto a las funciones vistas anteriormente, FileSystem presenta la diferencia de que ofrece soluciones para casos prcticos de almacenamiento que no se podran resolver adecuadamente mediante HTML5 Local Storage y HTML5 Databse, como pueden ser aplicaciones que manejen grandes objetos Blob binarios o compartan datos con otras aplicaciones fuera del contexto de la nuestra.
Pgina 69

Para crear una aplicacin que nos muestre en pantalla una lista de directorios y archivos ejecutaramos el siguiente cdigo46:
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. function toArray(list) { return Array.prototype.slice.call(list || [], 0); } function listResults(entries) { var fragment = document.createDocumentFragment(); entries.forEach(function(entry, i) { var img = entry.isDirectory ? <img src=folder-icon.gif> : <img src=file-icon.gif>; var li = document.createElement(li); li.innerHTML = [img, <span>, entry.name, </span>].join(); fragment.appendChild(li); }); document.querySelector(#listaarchivos).appendChild(fragment); } function onInitFs(fs) { var dirReader = fs.root.createReader(); var entries = []; var readEntries = function() { dirReader.readEntries (function(results) { if (!results.length) { listResults(entries.sort()); } else { entries = entries.concat(toArray(results)); readEntries(); } }, errorHandler); }; } readEntries(); // Comenzamos la lectura de directorios

46. - Muestra el resultado en la capa con id=listaarchivos (<ul id=listaarchivos></ul>) Pgina 70

36. 37. window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Si estamos utilizando BlackBerry 10 podemos usar los mtodos de FileTransfer para subir archivos a un servidor remoto (blackberry. io.filetransfer.upload) o descargar archivos (blackberry.io.filetransfer. download), previamente deberemos declarar la caracterstica filetransfer en nuestro archivo config.xml: <feature id=blackberry. io.filetransfer /> cuyos mtodos disponen de las siguientes constantes (el propio nombre de la constante define su funcionalidad): FILE_ NOT_FOUND_ERR, INVALID_URL_ERR, CONNECTION_ERR, PERMI SSIONS_ERR. Podemos implementar el siguiente mtodo para la descarga de un archivo remoto:
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. function eventoOK(result) { alert(Descarga correcta); console.log(es archivo: + result.isFile); console.log(es directorio: + result.isDirectory); console.log(nombre: + result.name); console.log(Path completo: + result.fullPath); } function eventoError(result) { alert(Fallo en la descarga); console.log(Cdigo de Error: + result.code); console.log(Origen: + result.source); console.log(Destino: + result.target); console.log(Estado HTTP: + result.http_status); } function DescargaArch() { try { blackberry.io.filetransfer.download(http://es.blackberry. com/download, /accounts/1000/shared/camera/imagen_prueba.jpg, eventoOK, eventoError);

Pgina 71

20. 21. 22. 23.

} catch(e) { alert(Excepcin en DescargaArch: + e); } }

3. Movimientos del dispositivo y GPS

Desde WebWorks podemos controlar tanto los movimientos del dispositivo (mediante el giroscopio) como el posicionamiento del mismo para acceder a dichos datos y mostrar diferentes opciones segn donde nos encontremos (tambin podemos mostrar diferentes opciones segn la hora del dispositivo). Para acceder a los movimientos del dispositivo disponemos de HTML5 Acceleration47 y HTML5 Device Motion Event48 con los que podemos saber en todo momento la posicin y aceleracin. Con HTML5 Acceleration podemos leer los datos de los ejes x, y, z. Un dispositivo puesto con la pantalla hacia arriba en una superficie plana, tiene una aceleracin de 0 y los siguientes valores de accelerationInclu dingGravity={x= 0, y= 0, z= 9.81};

47. - https://developer.blackberry.com/html5/apis/acceleration.html 48. - https://developer.blackberry.com/html5/apis/devicemotionevent.html Pgina 72

Mediante el uso del evento HTML5 Device Motion Event podemos escuchar los cambios en los movimientos de los tres ejes y ejecutar acciones en nuestra aplicacin en base a dichos cambios.
01. 02. 03. 04. 05. 06. 07. 08. 09. <script type=text/javascript> window.addEventListener(devicemotion, function(event) { var ax = Valor de Aceleracin X- + event.accelerationIncludingGravity.x; var ay = Valor de Aceleracin Y- + event.accelerationIncludingGravity.y; var az = Valor de Aceleracin Z- + event.accelerationIncludingGravity.z; alert(ax+\n+ay+\n+az); }, true); </script>

Un excelente ejemplo lo podemos encontrar en el gitHub de BlackBerry con la aplicacin Aura, cuyo cdigo podemos descargar desde https:// github.com/blackberry/WebWorks-Samples/tree/master/Aura

Pgina 73

Vdeo demo de la aplicacin Aura http://www.youtube.com/

watch?v=uH7NKhNyygw&hd=1

Para conocer la orientacin de nuestro dispositivo, podemos utilizar la propiedad window.orientation y el evento orientationchange que se ejecuta cada vez que cambia la orientacin del mismo. Con el siguiente ejemplo mostraremos la orientacin del dispositivo cada vez que se modifique la misma49:
01. 02. 03. 04. 05. function muestraOrientacion() { var msg = ; if (window.orientation === undefined) { Contenido(Orientacin , <em><strong>window.orientation</strong> objeto no definido.</em>);

49. - En el ejemplo llamamos a la funcin Contenido que no est definida en el mismo, dicha funcin se encargar de mostrar el ttulo y texto en un determinado div. Pgina 74

06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.

return false;

switch(window.orientation) { case 0: msg = Parte superior hacia arriba; break; case 90: msg = Lado derecho hacia arriba; break; case -90: msg = Lado izquierdo hacia arriba; break; case 180: msg = Hacia abajo; break; } msg += ( + window.orientation + ); + ((screen.width >= screen.height) ? Horizontal : Vertical); 24. Contenido(Orientacin, msg); 25. } 26. 27. function Inicia(event) { 28. muestraOrientacion(); 29. window.addEventListener(orientationchange, muestraOrientacion, true); 30. } 31. 32. window.addEventListener(load, Inicia, true);

Una vez ms debemos agudizar nuestra creatividad con las posibilidades que dichas funciones nos ofrecen, pudiendo por ejemplo en una App de videoconferencia silenciar el micrfono si ponemos el tablet hacia abajo, etc. Para controlar las opciones del GPS del dispositivo tenemos las siguientes funciones: HTML5 Coordinates, HTML5 Geolocation, HTML5 Position, HTML5 PositionError, HTML5 PositionOptions.
Pgina 75

Como lo mejor es experimentar con ejemplos, desde las pginas de soporte de BlackBerry podemos ver el siguiente ejemplo de Geolocalizacin con la opcin de descargar el cdigo fuente de la misma: http:// supportforums.blackberry.com/t5/Web-and-WebWorks-Development/ Using-HTML5-Geolocation-in-your-Web-or-BlackBerry-WebWorks/tap/630406 No debemos olvidarnos que para utilizar HTML5 Geolocation en la PlayBook, deberemos declarar el permiso read_geolocation en nuestro archivo de aplicacin config.xml:
01. <rim:permissions> 02. <rim:permit>read_geolocation</rim:permit> 03. </rim:permissions>

Podemos ver el ejemplo de uso y la declaracin del permiso en el artculo de BlackBerry How To - Enable GPS capability in BlackBerry WebWorks for Tablet OS development50. Otro excelente ejemplo de uso de los APIS de Geolocalizacin adems de HTML5 Database del que hablamos en el apartado anterior, es Weather Sample Application que podemos descargar desde el recurrido gitHub de BlackBerry en https://github.com/blackberry/WebWorksSamples/tree/master/Weather

4. Invocando aplicaciones del dispositivo

Desde nuestra aplicacin desarrollada con WebWorks podemos llamar a diferentes aplicaciones de nuestro dispositivo para interactuar con las mismas, por ejemplo llamar a la aplicacin de mapas, abrir el navegador
50. - http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/ How-To-Enable-GPS-capability-in-BlackBerry-WebWorks-for-Tablet/ta-p/1035855 Pgina 76

nativo en una determinada pgina, abrir la aplicacin de la cmara, BBM, etc... Los diferentes argumentos que podemos utilizar son los siguientes: AddressBookArguments, BrowserArguments, CalendarArguments, CameraArguments, Invoke, Invoked, MapsArguments, MemoArguments, MessageArguments, PhoneArguments, Query Response, Query Response Target, SearchArguments y TaskArguments. El objeto invoke contiene diferentes mtodos para interactuar con las distintas aplicaciones y dispone de las siguientes constantes predefinidas: APP_ADDRESSBOOK = 0. Constante usada para llamar la libreta de direcciones. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_BLUETOOTH_CONFIG = 1. Constante usada para llamar a la configuracin del Bluetooth. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_CALCULATOR = 2. Constante usada para llamar a la Calculadora. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_CALENDAR = 3. Constante usada para llamar al Calendario. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_CAMERA = 4. Constante usada para llamar a la Cmara. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+ y Ripple). APP_MAPS = 5. Constante usada para llamar los Mapas. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+ y Ripple).
Pgina 77

APP_MEMOPAD = 6. Constante usada para llamar al Bloc de Notas. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_MESSAGES = 7. Constante usada para llamar la aplicacin de Mensajera. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_PHONE = 8. Constante usada para llamar a la aplicacin del Telfono. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_SEARCH = 9. Constante usada para llamar las Bsquedas. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_TASKS = 10. Constante usada para llamar a las Tareas. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_BROWSER = 11. Constante usada para llamar al Navegador. (Plataformas soportadas: BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+ y Ripple). APP_JAVA = 12. Constante usada para llamar una Aplicacin Java. (Plataformas soportadas: BlackBerry OS 5.0+ y Ripple). APP_MUSIC = 13. Constante usada para llamar la Aplicacin de Msica. (Plataformas soportadas: BlackBerry PlayBook 1.0+ y Ripple). APP_PHOTOS = 14. Constante usada para llamar a la aplicacin de Fotos. (Plataformas soportadas: BlackBerry PlayBook 1.0+ y Ripple). APP_VIDEOS = 15. Constante usada para llamar a la aplicacin de Vdeo. (Plataformas soportadas: BlackBerry PlayBook 1.0+ y Ripple). APP_APPWORLD = 16. Constante usada para llamar a la aplicacin del App World. (Plataformas soportadas: BlackBerry PlayBook 1.0+ y Ripple).

Pgina 78

Con estas funciones y constantes podemos llamar diferentes funciones y manejar su retorno, tanto aplicaciones conocidas de antemano, como preguntar al sistema si dispone de X aplicacin para abrir X tipo de archivo. Por ejemplo para abrir un archivo mp3 y dejar que el sistema elija la mejor aplicacin para gestionarlo usaremos:
01. 02. 03. 04. 05. 06. function abrirMP3() { blackberry.invoke.invoke({ type: audio/mpeg3, uri: <path archivo mp3> }, eventoOK, eventoError); }

Adems podemos gestionar si la accin se ha realizado correctamente o si se ha producido algn fallo mediante los dos ltimos parmetros, en los que llamamos a las funciones eventoOK y eventoError que definiremos en nuestro cdigo y que se ocuparn de realizar las acciones pertinentes con los eventos.
01. 02. 03. 04. 05. 06. 07. function eventoOK() { alert(Llamada correcta!); } function eventoError(error) { alert(Fallo en la llamada, error: + error); }

Si por ejemplo queremos abrir una determinada pgina en el navegador del sistema:
01. 02. 03. 04. 05. 06. function abreNavegador() { blackberry.invoke.invoke({ target: sys.browser, uri: http://es.blackberry.com/ }, eventoOK, eventoError); }

Pgina 79

O por ejemplo abrir un determinado documento pdf buscando en el sistema una aplicacin que pueda gestionar los archivos pdf:
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. function buscaVisorPDF() { var peticion = { action: bb.action.VIEW, type: application/pdf, uri: file://, target_type: [VIEWERS], action_type: ALL }; } blackberry.invoke.query(peticion, eventoOK, eventoError);

5. Audio y vdeo
Nuestra aplicacin puede beneficiarse de los contenidos multimedia actuales y adems de tener soporte completo de flash con el que es posible crear aplicaciones interactivas complejas, podemos usar las caractersticas multimedia de HTML5 en lo referente a audio y vdeo, para lo que usaremos las funciones de Audio, Audio Player, Camera, HTML5 Audio, HTML5 Video y Microphone. Audio y Audio Player los usaremos en nuestras aplicaciones WebWorks hasta BlackBerry 7, para PlayBook y BlackBerry 10 utilizaremos HTML5 Audio y HTML5 Video. Mostrar un reproductor de audio con HTML5 Audio es tan fcil como escribir la siguiente lnea de HTML
01. <audio controls=controls src=audio.wav />

y podemos cambiar dinmicamente el contenido del reproductor o incluso crearlo al vuelo:

Pgina 80

01. 02. 03. 04.

var audio = document.createElement(audio); audio.src = audio.wav; audio.controls = true; document.body.appendChild(audio);

Lo mismo podemos hacer con los archivos de vdeo:

01. <video width=320 height=240 controls=controls src=video.avi />

Y mediante JavaScript:
01. 02. 03. 04. 05. 06. var video = document.createElement(video); video.src = video.avi; video.controls = true; video.width = 320; video.height = 240; document.body.appendChild(video);

Si combinamos este ejemplo con el visto anteriormente en el que escanebamos los archivos y directorios de nuestro dispositivo, filtrando los archivos a los tipos multimedia soportados, podemos realizar un reproductor multimedia con unas pocas lneas de cdigo. Pero la funcionalidad y opciones abarcan mucho ms, podemos por ejemplo ver los vdeos del canal de Youtube usando su API en JavaScript51 o mediante un iframe52, con el API de Vimeo53, usando algn reproductor de los muchos existentes54 y cargando dinmicamente los vdeos obtenidos mediante un rss o una llamada al API de alguno de los servicios

51. - https://developers.google.com/youtube/js_api_reference 52. - https://developers.google.com/youtube/iframe_api_reference 53. - http://developer.vimeo.com/ 54. - http://praegnanz.de/html5video/ Pgina 81

que nos interese, etc... por ejemplo podemos obtener un rss de los vdeos de BlackBerry en Youtube desde http://gdata.youtube.com/feeds/ base/users/BlackBerry/uploads?alt=rss&amp;start-index=1&amp;maxresults=25&amp;client=ytapi-youtube-profile&amp;orderby=published &amp;v=2 y con el rss resultante parsearlo para obtener la informacin que nos interesa para mostrarla en nuestro reproductor. Adems de la informacin del canal, tendremos una serie de etiquetas <item> conteniendo cada una de las distintas entradas en el canal, dentro de las etiquetas podemos encontrar informacin como la fecha de publicacin del vdeo (<pubDate>), su ttulo (<title>), una descripcin con HTML (<description>)y el enlace al vdeo (<link>) que podemos pasarle al reproductor para visionar el vdeo. Con lo que tendramos:
01. 02. 03. 04. var documentoXML = null; var res_por_pagina= 25; var n_pagina=1; var archivoXML = http://gdata.youtube.com/feeds/base/users/BlackBerry/ uploads?alt=rss&start-index= + n_pagina + &max-results= + res_por_pagina + &client=ytapi-youtube-profile&orderby=published&v=2; // Creacin de ObjXMLHttpRequest try{ ObjXMLHttpRequest = new ActiveXObject(Msxml2.XMLHTTP); }catch(exception1){ try{ ObjXMLHttpRequest = new ActiveXObject(Microsoft.XMLHTTP); }catch(exception2){ ObjXMLHttpRequest = false; } } if(!ObjXMLHttpRequest && window.XMLHttpRequest){ ObjXMLHttpRequest = new XMLHttpRequest(); }

05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.

Pgina 82

21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38.

function cargaCanalYoutube(){ if(ObjXMLHttpRequest){ // Llamada del documento XML ObjXMLHttpRequest.open(GET, archivoXML, true); }

ObjXMLHttpRequest.onreadystatechange = function(){ if(ObjXMLHttpRequest.readyState == 4 && ObjXMLHttpRequest.status == 200){ documentoXML = ObjXMLHttpRequest.responseXML; items = documentoXML.getElementsByTagName(item); html = null;

for (i = 0; i < item.length; i++){ titulo = items[i].getElementsByTagName(title); enlace = items[i].getElementsByTagName(link); html+=<h3> + titulo + </h3><div onclick=funcion_ver(\ + enlace + \)>Ver vdeo</div>; 39. } 40. 41. document.getElementById(canal_YT).innerHTML = html; 42. } 43. } 44. ObjXMLHttpRequest.send(null); 45. return false; 46. 47. }

El anterior cdigo lo podramos simplificar con libreras como jQuery55 o Zepto56 o complicar todo lo que queramos con gestin de errores y mayor funcionalidad. Bsicamente lo que hace es realizar una peticin a Youtube mediante AJAX para recuperar el RSS (archivo xml) del canal de BlackBerry, una vez obtenido el archivo del canal, buscamos cada uno
55. - http://jquery.com/ 56. - http://zeptojs.com/ Pgina 83

de los nodos <item> y los recorremos mediante un bucle, asignando al valor de cada elemento <title> una entrada html de ttulo de tercer nivel (<h3>), y encerrando en un <div> cada elemento <link> del bucle, con un evento onclick para que cuando pulsemos sobre Ver vdeo llame a la funcin funcion_ver57 con el parmetro link recuperado en el bucle. En la definicin del mtodo Microphone58 en la documentacin del API de WebWorks, podemos ver un ejemplo del uso del micrfono para grabar audio con nuestro dispositivo. Para el siguiente ejemplo deberemos declarar en nuestro archivo config.xml la caracterstica microphone a utilizar, adems de los permisos necesarios para grabar audio (record_ audio) y para la utilizacin de carpetas compartidas (access_shared).
01. <feature id=blackberry.media.microphone /> 02. <rim:permit>record_audio</rim:permit> 03. <rim:permit>access_shared</rim:permit>

Adems en dicho ejemplo se hace uso de las libreras jQuery59 y jQuery UI60 para el interface, por lo que deberemos incluirlas en nuestra aplicacin junto con su referencia en el HTML:
01. 02. 03. 04. 05. 06. <script type=text/javascript> var mic = blackberry.media.microphone; var isPaused = false; function record() { try {

57. - Funcin que se encargar de mostrar el vdeo resultante del parmetro pasado a la misma. 58. - https://developer.blackberry.com/html5/apis/blackberry.media.microphone. html 59. - http://jquery.com/ 60. - http://jqueryui.com/ Pgina 84

07. mic.record(blackberry.io.dir.appDirs.shared.music.path + / + document.getElementById(filename).value, testSuccess, testError); 08. $(#record).button(option, disabled, true); 09. $(#pause).button(option, disabled, false); 10. $(#stop).button(option, disabled, false); 11. } catch (e) { 12. alert(Grabacin, e: + e.message); 13. } 14. } 15. 16. function pause() { 17. isPaused = !isPaused; 18. 19. if (isPaused) { 20. $(#pause).button(option, label, Reanudar); 21. } else { 22. $(#pause).button(option, label, Pausa); 23. } 24. 25. try { 26. mic.pause(); 27. } catch (e) { 28. alert(Pausa, e: + e.message); 29. } 30. } 31. 32. function stop() { 33. try { 34. mic.stop(); 35. $(#record).button(option, disabled, false); 36. $(#pause).button(option, disabled, true); 37. $(#stop).button(option, disabled, true); 38. } catch (e) { 39. alert(Stop, e: + e.message); 40. } 41. } 42. 43. function testSuccess(filePath) { 44. alert(Grabacin correcta! Archivo: + filePath); 45. } 46. 47. function testError(errorCode, errorMessage) {

Pgina 85

48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70.

if(errorMessage == Unsupported record encoding type) { alert(Intente grabar como .amr); return; } alert(cdigo de error: + errorCode + mensaje de error: + errorMessage); } $(document).ready(function() { $(#record).button(); $(#pause).button({ disabled: true }); $(#stop).button({ disabled: true }); $(#record).bind(click, record); $(#pause).bind(click, pause); $(#stop).bind(click, stop); }); </script> </head> <body> <p>Archivo: <input type=text id=filename></p> <button id=record>Grabar</button> <button id=pause>Pausa</button> <button id=stop>Parar</button>

6. Interactuar con la pantalla

La mayora de las acciones que se ejecutarn en nuestra aplicacin se realizarn a partir de una interaccin con la pantalla de nuestro dispositivo (tambin pueden ser por el teclado, movimiento del dispositivo y algunos otros eventos). La interaccin de nuestras manos con la pantalla puede ser de distintos tipos, tanto un toque leve en la misma, hasta uno prolongado, arrastrar en una determinada direccin, tocar con varios dedos, doble toque rpido, etc... Mediante HTML5 Element Touch Events podemos definir en los elementos de nuestra aplicacin los eventos touchstart, touchend, touch
Pgina 86

move, touchenter, touchleave y touchcancel, tambin podemos definir un listener que escuche la llamada de dicho evento. Por ejemplo podemos definir que al tocar un botn nos muestre un texto:
01. <button type=button ontouchstart=alert(por qu tocas?) >Tcame</button>

O poner un listener para escuchar cuando movemos el dedo por la pantalla y hacer un scroll de pantalla hasta el inicio de la misma:
01. 02. 03. 04. 05. 06. noMuevas = function(e) { e.preventDefault(); window.scroll(0, 0); return false; }; window.document.addEventListener(touchmove, noMuevas, false);

Por defecto nuestro dispositivo tiene configurados unos determinados comportamientos a diferentes eventos de toque en la pantalla, por ejemplo hacer zoom, mover la pantalla (scrolling), etc. por lo que para que el comportamiento de nuestra aplicacin sea el adecuado, deberemos anular dichos comportamientos predeterminados (como hemos hecho en la segundo lnea del cdigo anterior). Para anular el comportamiento de zoom predeterminado de nuestra aplicacin deberemos utilizar la siguiente lnea meta en nuestro archivo html61:
01. <meta name=viewport content=width=device-width, initial-scale=1.0, userscalable=no>

en el que mediante la propiedad user-scalable=no le indicamos a la aplicacin que no se puede hacer zoom sobre la misma. Con la senten61. - Ya sea directamente en nuestro html o posteriormente con javascript en nuestro cdigo. Pgina 87

cia evento.preventDefault() le indicamos a la aplicacin que no ejecute el evento por defecto de la misma sino el que nosotros le estamos definiendo. Para gestionar dichos eventos veremos en el siguiente captulo algunos frameworks que nos facilitarn el trabajo, o podremos utilizar algunos plug-ins javascript como Touchable62 para jQuery o Zepto.js con el que podremos gestionar algunos gestos como toque sencillo (clic en navegador de escritorio), doble toque, toque largo, tocar y arrastrar y final de toque en pantalla. Podemos encontrar diversos ejemplos de ejecucin de HTML5 Element Touch Events como el siguiente de Paul Irish basado en el dibujo sobre el canvas (http://paulirish.com/demo/multi) que podemos ejecutar directamente sobre Ripple para ver el resultado:

62. - https://github.com/dotmaster/Touchable-jQuery-Plugin Pgina 88

O el ejemplo de la aplicacin SketchPad en el gitHub de BlackBerry63 que tambin utiliza el canvas para realizar dibujos en la pantalla con el siguiente mtodo drawPen():
01. 02. 03. 04. 05. 06. 07. 08. 09. function drawPen(x, y) { var ctx = canvas.getContext(2d); ctx.lineWidth = brushSize; ctx.strokeStyle = activeColor; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.stroke(); }

y como indicamos anteriormente capturamos los eventos ontouch start y ontouchmove evitando el comportamiento por defecto de la aplicacin, leyendo las coordenadas X e Y y llamando al mtodo definido anteriormente para dibujar en pantalla:
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. document.ontouchstart = function(event) { event.preventDefault(); //evitamos comportamiento por defecto de la App //Obtenemos la posicin del evento touch actual var touchEvent = event.changedTouches[0]; if (touchEvent.pageX || touchEvent.pageY) { lastX = touchEvent.pageX; lastY = touchEvent.pageY; } } document.ontouchmove = function(event) { event.preventDefault(); //evitamos comportamiento por defecto de la App //Obtenemos la posicin del evento touch actual var touchEvent = event.changedTouches[0]; if (touchEvent.pageX || touchEvent.pageY) {

63. - https://github.com/blackberry/WebWorks-Samples/tree/master/sketchPad Pgina 89

18. 19. 20. 21.

} }

//dibujamos la lnea entre la ltima posicin y la actual drawPen(touchEvent.pageX, touchEvent.pageY);

Las propiedades soportadas por el evento Touch son las siguientes (son de slo lectura y de tipo numrico, podemos leer la propiedad y en funcin de su valor realizar las acciones pertinentes64): clientX: coordenada X del punto relativo al viewport65, excluyendo la compensacin del scroll. clientY: coordenada Y del punto relativo al viewport, excluyendo la compensacin del scroll. force: un valor relativo de la presin aplicada en un rango entre 0 y 1, donde 0 es ausencia de presin, y 1 es el mayor nivel de presin que el dispositivo es capaz de registrar. identifier: Un nmero de identificacin por cada punto de toque, nico para ese punto por sesin. El algoritmo para identificar dicho valor del identificador es el siguiente: Si no hay ningn otro evento activo de toque en la sesin, el valor del identificador ser 0. Si hay al menos un evento activo de toque en la sesin, el valor del identificador ser el entero ms bajo no usado actualmente por ningn evento de sesin activo.

64. - Todas soportadas por BlackBerry OS 6.0+, BlackBerry PlayBook 1.0+ y BlackBerry 10. 65. - Definido en el html mediante la etiqueta <meta name=viewport ...> o dinmicamente mediante cdigo JavaScript. Pgina 90

pageX: coordenada X del punto relativo al viewport, incluyendo la compensacin del scroll. pageY: coordenada Y del punto relativo al viewport, incluyendo la compensacin del scroll. radiusX: radio de la elipse que ms se circunscribe al rea de toque (e.j. dedo, lpiz tctil) a lo largo del eje X, en pixels de la misma escala que screenX; 1 si no hay un valor conocido. El valor debe ser positivo. radiusY: radio de la elipse que ms se circunscribe al rea de toque (e.j. dedo, lpiz tctil) a lo largo del eje Y, en pixels de la misma escala que screenY; 1 si no hay un valor conocido. El valor debe ser positivo. rotationAngle: el ngulo (en grados) que la elipse descrita por radiusX y radiusY es rotada (en el sentido de las agujas del reloj) sobre su centro; 0 si no hay un valor conocido. El valor debe ser mayor o igual a 0 y menor de 90. Si la elipse descrita por radiusX y radiusY es circular, entonces rotation Angle no tiene efecto. El agente de usuario en este caso puede usar 0 como valor, o puede usar otro valor en el rango permitido.

screenX: coordenada X del punto relativo a la pantalla. screenY: coordenada Y del punto relativo a la pantalla.

Evidentemente, podemos combinar esta manera de interactuar con la pantalla mediante los toques tctiles, con todo lo visto anteriormente y por ejemplo al hacer un toque sobre la misma, comprobar la orientacin del dispositivo y mostrar diferentes opciones en modo vertical y horizontal, o mostrar diferentes opciones si el dispositivo est posado sobre una superficie horizontal (tendr los valores de acceleration
Pgina 91

IncludingGravity={x= 0, y= 0, z= 9.81};) o lo tenemos en nuestras manos.

7. Interface de usuario
Hemos visto como crear nuestra primera aplicacin, interactuar con el dispositivo, utilizar las capacidades multimedia, etc., ahora nos toca crear nuestro interface de usuario que ser el que comunique nuestra aplicacin con el usuario. Disponemos de diferentes opciones en el API de WebWorks para la creacin del Interface de usuario que son las siguientes: Dialog, HTML5 2D Canvas Context, HTML5 Canvas y HTML5 WebGL Canvas Context. Mediante el objeto Dialog podemos mostrar al usuario diferentes dilogos para aceptar una opcin por defecto, cancelarla, informale de alguna accin que se est realizando, etc. para utilizar dichos mtodos deberemos declarar en nuestro archivo config.xml la caracterstica ui.dialog:
01. <feature id=blackberry.ui.dialog />

Los mtodos disponibles son blackberry.ui.dialog.colorPickerAsync, blackberry.ui.dialog.customAskAsync, blackberry.ui.dialog.date TimeAsync, blackberry.ui.dialog.selectAsync y blackberry.ui.dialog. standardAskAsync, para la creacin de dilogo de seleccin de color, cuadro de dilogo asncrono personalizado, seleccin de fecha/hora, cuadro de dilogo asncrono para seleccionar entre varios valores y por ltimo un cuadro de dilogo para ofrecer una pregunta al usuario. Para los mtodos que acabamos de ver disponemos de las siguientes constantes predefinidas:
Pgina 92

D_OK = 0 (nmero): dilogo OK estndar (disponible en BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). D_SAVE = 1 (nmero): dilogo guardar estndar (disponible en BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). D_DELETE = 2 (nmero): dilogo de confirmacin de borrado estndar (disponible en BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). D_YES_NO = 3 (nmero): dilogo SI/NO estndar (disponible en BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). D_OK_CANCEL = 4 (nmero): dilogo OK/CANCELAR estndar (disponible en BlackBerry OS 5.0+, BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). C_CANCEL = -1 (nmero): opcin CANCELAR para el uso en dilogos (disponible en BlackBerry OS 5.0+ y Ripple). C_OK = 0 (nmero): opcin OK para el uso en dilogos (disponible en BlackBerry OS 5.0+ y Ripple). C_SAVE = 1 (nmero): opcin GUARDAR para el uso en dilogos (disponible en BlackBerry OS 5.0+ y Ripple). C_DISCARD = 2 (nmero): opcin DESCARTAR para el uso en dilogos (disponible en BlackBerry OS 5.0+ y Ripple). C_DELETE = 3 (nmero): opcin BORRAR para el uso en dilogos (disponible en BlackBerry OS 5.0+ y Ripple). C_YES = 4 (nmero): opcin SI para el uso en dilogos (disponible en BlackBerry OS 5.0+ y Ripple).

Pgina 93

C_NO = -1 (nmero): opcin NO para el uso en dilogos (disponible en BlackBerry OS 5.0+ y Ripple). BOTTOM = bottomCenter (cadena de texto): posicin abajo del dilogo (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). CENTER = middleCenter (cadena de texto): posicin centrada del dilogo (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). TOP = topCenter (cadena de texto): posicin arriba del dilogo (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). SIZE_FULL = full (cadena de texto): dilogo de tamao completo (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). SIZE_LARGE = large (cadena de texto): dilogo de tamao grande (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). SIZE_MEDIUM = medium (cadena de texto): dilogo de tamao mediano (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). SIZE_SMALL = small (cadena de texto): dilogo de tamao pequeo (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple). SIZE_TALL = tall (cadena de texto): dilogo de tamao alto (disponible en BlackBerry PlayBook 1.0+, BlackBerry 10 y Ripple).

Con el siguiente cdigo podremos crear un dilogo personalizado en el que definimos cuatro botones de respuesta, en un cuadro de dilogo de tamao medio y centrado en pantalla, al que podemos llamar con

Pgina 94

miDialogo y la eleccin del usuario ser mostrada por la funcin gestionaRespuesta:

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. function gestionaRespuesta(index){ alert(Ha seleccionado el botn con ndice: + index); } function miDialogo() { try { var buttons = [Si, No, A veces, NS/NC]; var ops = {title : Elije la respuesta ms adecuada, size : blackberry.ui.dialog.SIZE_MEDIUM, position : blackberry.ui.dialog.CENTER}; blackberry.ui.dialog.customAskAsync(Programas en WebWorks?, buttons, gestionaRespuesta, ops); } catch(e) { alert(Excepcin en miDialogo: + e); } }

Y con el siguiente ejemplo gestionaremos un cuadro de dilogo de fecha/hora:

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. function FechaHoraSelec(fechahora){ alert(fechahora); } //Argumento de entrada, referencia de un control de entrada HTML del tipo: date, datetime, datetime-local, month, time function dateTimeAsync(htmlDateTimeInput) { try { var opts = { value : htmlDateTimeInput.value, min : htmlDateTimeInput.min || , max : htmlDateTimeInput.max || }; blackberry.ui.dialog.dateTimeAsync(date, opts, window. FechaHoraSelec); }catch (e) { alert(Excepcin en dateTimeAsync: + e); } }

Pgina 95

Los dems objetos del Interface de Usuario son relativos a la manipulacin del canvas y dara para la escritura de varios libros (podemos encontrar una extensa bibliografa en la web buscando por HTML5 canvas), lo que se sale del propsito de esta breve gua. Ya hemos utilizado el objeto canvas en los ejemplos en los que interactubamos con la pantalla y para hacernos una idea de las posibilidades y complejidad vamos a enumerar las funciones de HTML5 WebGL Canvas Context con la que administramos OpenGL: activeTexture, attachShader, bindAttribLocation, bindBuffer, bindFramebuffer, bindRenderbuffer, bindTexture, blendColor, blendEquation, blendEquationSeparate, blendFunc, blendFuncSeparate, bufferData, bufferData, bufferData, bufferSubData, bufferSubData, checkFramebufferStatus, clear, clearColor, clearDepth, clearStencil, colorMask, compileShader, copyTexImage2D, copyTexSubImage2D, createBuffer, createFramebuffer, createProgram, createRenderbuffer, createShader, createTexture, cullFace, deleteBuffer, deleteFramebuffer, deleteProgram, deleteRenderbuffer, deleteShader, deleteTexture, depthFunc, depthMask, depthRange, detachShader, disable, disableVertexAttribArray, drawArrays, drawElements, enable, enableVertexAttribArray, finish, flush, framebufferRenderbuffer, framebufferTexture2D, frontFace, generateMipmap, getActiveAttrib, getActiveUniform, getAttachedShaders, getAttribLocation, getBufferParameter, getContextAttributes, getError, getExtension, getFramebufferAttachmentParameter, getParameter, getProgramInfoLog, getProgramParameter, getRenderbufferParameter, getShaderInfoLog, getShaderParameter, getShaderSource, getSupportedExtensions, getTexParameter, getUniform, getUniformLocation, getVertexAttrib, getVertexAttribOffset, hint,isBuffer, isContextLost, isEnabled, isFramebuffer, isProgram, isRenderbuffer, isShader, isTexture, lineWidth, linkProgram, pixelStorei, polygonOffset, readPixels, renderbufferStorage, sampleCoverage,
Pgina 96

scissor, shaderSource, stencilFunc, stencilFuncSeparate, stencilMask, stencilMaskSeparate, stencilOp, stencilOpSeparate, texImage2D, texImage2D, texImage2D, texImage2D, texImage2D, texParameterf, texParameteri, texSubImage2D, texSubImage2D, texSubImage2D, texSubImage2D, texSubImage2D, uniform1f, uniform1fv, uniform1fv, uniform1i, uniform1iv, uniform1iv, uniform2f, uniform2fv, uniform2fv, uniform2i, uniform2iv, uniform2iv, uniform3f, uniform3fv, uniform3fv, uniform3i, uniform3iv, uniform3iv, uniform4f, uniform4fv, uniform4fv, uniform4i, uniform4iv, uniform4iv, uniformMatrix2fv, uniformMatrix2fv, uniformMatrix3fv, uniformMatrix3fv, uniformMatrix4fv, uniformMatrix4fv, useProgram, validateProgram, vertexAttrib1f, vertexAttrib1fv, vertexAttrib1fv, vertexAttrib2f, vertexAttrib2fv, vertexAttrib2fv, vertexAttrib3f, ertexAttrib3fv, vertexAttrib3fv, vertexAttrib4f, vertexAttrib4fv, vertexAttrib4fv, vertexAttribPointer, viewport. Con las siguientes constantes: STENCIL_BUFFER_BIT, COLOR_BUFFER_BIT, POINTS, LINES, LINE_LOOP, LINE_ STRIP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, ZERO, ONE, SRC_COLOR, ONE_MINUS_SRC_COLOR, SRC_ALPHA, ONE_MINUS_SRC_ALPHA, DST_ ALPHA, ONE_MINUS_DST_ALPHA, DST_COLOR, ONE_MINUS_DST_COLOR, SRC_ALPHA_SATURATE, FUNC_ADD, BLEND_EQUATION, BLEND_EQUATION_RGB, BLEND_EQUATION_ALPHA, FUNC_SUBTRACT, FUNC_REVERSE_SUBTRACT, BLEND_DST_RGB, BLEND_SRC_RGB, BLEND_DST_ALPHA, BLEND_SRC_ALPHA, CONSTANT_COLOR, ONE_MINUS_CONSTANT_COLOR, CONSTANT_ALPHA, ONE_MINUS_CONSTANT_ALPHA, BLEND_COLOR, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, ARRAY_BUFFER_BINDING, ELEMENT_ARRAY_BUFFER_BINDING, STREAM_DRAW, STATIC_DRAW, DYNAMIC_DRAW, BUFFER_SIZE, BUFFER_USAGE, CURRENT_VERTEX_ATTRIB, FRONT, BACK, FRONT_AND_BACK, TEXTURE_2D, CULL_FACE, BLEND, DITHER, STENCIL_TEST, DEPTH_TEST, SCISSOR_TEST, POLYGON_OFFSET_
Pgina 97

FILL, SAMPLE_ALPHA_TO_COVERAGE, SAMPLE_COVERAGE, NO_ERROR, INVALID_ENUM, INVALID_VALUE, INVALID_OPERATION, OUT_OF_MEMORY, CW, CCW, LINE_WIDTH, ALIASED_POINT_SIZE_RANGE, ALIASED_LINE_ WIDTH_RANGE, CULL_FACE_MODE, FRONT_FACE, DEPTH_RANGE, DEPTH_ WRITEMASK, DEPTH_CLEAR_VALUE, DEPTH_FUNC, STENCIL_CLEAR_VALUE, STENCIL_FUNC, STENCIL_FAIL, STENCIL_PASS_DEPTH_FAIL, STENCIL_PASS_ DEPTH_PASS, STENCIL_REF, STENCIL_VALUE_MASK, STENCIL_WRITEMASK, STENCIL_BACK_FUNC, STENCIL_BACK_FAIL, STENCIL_BACK_PASS_DEPTH_ FAIL, STENCIL_BACK_PASS_DEPTH_PASS, STENCIL_BACK_REF, STENCIL_ BACK_VALUE_MASK, STENCIL_BACK_WRITEMASK, VIEWPORT, SCISSOR_ BOX, COLOR_CLEAR_VALUE, COLOR_WRITEMASK, UNPACK_ALIGNMENT, PACK_ALIGNMENT, MAX_TEXTURE_SIZE, MAX_VIEWPORT_DIMS, SUBPIXEL_ BITS, RED_BITS, GREEN_BITS, BLUE_BITS, ALPHA_BITS, DEPTH_BITS, STENCIL_BITS, POLYGON_OFFSET_UNITS, POLYGON_OFFSET_FACTOR, TEXTURE_BINDING_2D, SAMPLE_BUFFERS, SAMPLES, SAMPLE_COVERAGE_VALUE, SAMPLE_COVERAGE_INVERT, NUM_COMPRESSED_TEXTURE_FORMATS, COMPRESSED_TEXTURE_FORMATS, DONT_CARE, FASTEST, NICEST, GENERATE_MIPMAP_HINT, BYTE, UNSIGNED_BYTE, SHORT, UNSIGNED_SHORT, INT, UNSIGNED_INT, FLOAT, DEPTH_COMPONENT, ALPHA, RGB, RGBA, LUMINANCE, LUMINANCE_ALPHA, UNSIGNED_SHORT_4_4_4_4, UNSIGNED_ SHORT_5_5_5_1, UNSIGNED_SHORT_5_6_5, FRAGMENT_SHADER, VERTEX_SHADER, MAX_VERTEX_ATTRIBS, MAX_VERTEX_UNIFORM_VECTORS, MAX_VARYING_VECTORS, MAX_COMBINED_TEXTURE_IMAGE_UNITS, MAX_VERTEX_TEXTURE_IMAGE_UNITS, MAX_TEXTURE_IMAGE_UNITS, MAX_FRAGMENT_UNIFORM_VECTORS, SHADER_TYPE, DELETE_STATUS, LINK_STATUS, VALIDATE_STATUS, ATTACHED_SHADERS, ACTIVE_UNIFORMS, ACTIVE_UNIFORM_MAX_LENGTH, ACTIVE_ATTRIBUTES, ACTIVE_ ATTRIBUTE_MAX_LENGTH, SHADING_LANGUAGE_VERSION, CURRENT_
Pgina 98

PROGRAM, NEVER, LESS, EQUAL, LEQUAL, GREATER, NOTEQUAL, GEQUAL, ALWAYS, KEEP, REPLACE, INCR, DECR, INVERT, INCR_WRAP, DECR_WRAP, VENDOR, RENDERER, VERSION, NEAREST, LINEAR, NEAREST_MIPMAP_NEAREST, LINEAR_MIPMAP_NEAREST, NEAREST_MIPMAP_LINEAR, LINEAR_ MIPMAP_LINEAR, TEXTURE_MAG_FILTER, TEXTURE_MIN_FILTER, TEXTURE_WRAP_S, TEXTURE_WRAP_T, TEXTURE, TEXTURE_CUBE_MAP, TEXTURE_BINDING_CUBE_MAP, TEXTURE_CUBE_MAP_POSITIVE_X, TEXTURE_CUBE_MAP_NEGATIVE_X, TEXTURE_CUBE_MAP_POSITIVE_Y, TEXTURE_CUBE_MAP_NEGATIVE_Y, TEXTURE_CUBE_MAP_POSITIVE_Z, TEXTURE_CUBE_MAP_NEGATIVE_Z, MAX_CUBE_MAP_TEXTURE_SIZE, TEXTURE0, TEXTURE1, TEXTURE2, TEXTURE3, TEXTURE4, TEXTURE5, TEXTURE6, TEXTURE7, TEXTURE8, TEXTURE9, TEXTURE10, TEXTURE11, TEXTURE12, TEXTURE13, TEXTURE14, TEXTURE15, TEXTURE16, TEXTURE17, TEXTURE18, TEXTURE19, TEXTURE20, TEXTURE21, TEXTURE22, TEXTURE23, TEXTURE24, TEXTURE25, TEXTURE26, TEXTURE27, TEXTURE28, TEXTURE29, TEXTURE30, TEXTURE31, ACTIVE_TEXTURE, REPEAT, CLAMP_TO_EDGE, MIRRORED_REPEAT, FLOAT_VEC2, FLOAT_VEC3, FLOAT_VEC4, INT_VEC2, INT_VEC3, INT_VEC4, BOOL, BOOL_VEC2, BOOL_VEC3, BOOL_VEC4, FLOAT_MAT2, FLOAT_MAT3, FLOAT_MAT4, SAMPLER_2D, SAMPLER_CUBE, VERTEX_ATTRIB_ARRAY_ ENABLED, VERTEX_ATTRIB_ARRAY_SIZE, VERTEX_ATTRIB_ARRAY_STRIDE, VERTEX_ATTRIB_ARRAY_TYPE, VERTEX_ATTRIB_ARRAY_NORMALIZED, VERTEX_ATTRIB_ARRAY_POINTER, VERTEX_ATTRIB_ARRAY_BUFFER_BINDING, COMPILE_STATUS, INFO_LOG_LENGTH, SHADER_SOURCE_LENGTH, LOW_ FLOAT, MEDIUM_FLOAT, HIGH_FLOAT, LOW_INT, MEDIUM_INT, HIGH_INT, FRAMEBUFFER, RENDERBUFFER, RGBA4, RGB5_A1, RGB565, DEPTH_COMPONENT16, STENCIL_INDEX, STENCIL_INDEX8, DEPTH_STENCIL, RENDERBUFFER_WIDTH, RENDERBUFFER_HEIGHT, RENDERBUFFER_INTERNAL_FORMAT, RENDERBUFFER_RED_SIZE, RENDERBUFFER_GREEN_SIZE,
Pgina 99

RENDERBUFFER_BLUE_SIZE, RENDERBUFFER_ALPHA_SIZE, RENDERBUFFER_DEPTH_SIZE, RENDERBUFFER_STENCIL_SIZE, FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE, FRAMEBUFFER_ATTACHMENT_OBJECT_NAME, FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL, FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE, COLOR_ATTACHMENT0, DEPTH_ATTACHMENT, STENCIL_ATTACHMENT, DEPTH_STENCIL_ATTACHMENT, NONE, FRAMEBUFFER_COMPLETE, FRAMEBUFFER_INCOMPLETE_ATTACHMENT, FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, FRAMEBUFFER_INCOMPLETE_DIMENSIONS, FRAMEBUFFER_UNSUPPORTED, FRAMEBUFFER_BINDING, RENDERBUFFER_BINDING, MAX_RENDERBUFFER_SIZE, INVALID_FRAMEBUFFER_OPERATION, UNPACK_FLIP_Y_WEBGL, UNPACK_ PREMULTIPLY_ALPHA_WEBGL, CONTEXT_LOST_WEBGL, UNPACK_COLORSPACE_CONVERSION_WEBGL, BROWSER_DEFAULT_WEBGL. Podemos encontrar gran cantidad de cdigo para la manipulacin del canvas, como los ejemplos de Kevin Roast66 o en el gitHub de BlackBerry las excelentes demos TunnelTilt y PeaksAndValleys67.

66. - http://www.kevs3d.co.uk/dev/ 67. - https://github.com/blackberry/WebGL-Samples Pgina 100

Juego TunelTilt en el gitHub de BlackBerry

Juego Arena5 de Kevin Roast

Con el uso de diferentes tcnicas para abordar la programacin del canvas, es posible la creacin de juegos complejos totalmente realizados con HTML5 y CSS3, as como programas con aspecto slo imaginable por algunos en un SDK nativo de bajo nivel... el uso del canvas y OpenGL pondr los lmites nicamente en nuestros conocimientos y como ya hemos repetido en varias ocasiones, hasta donde seamos capaces de llegar con nuestra imaginacin (un twitter que responda a los movimientos del dispositivo, nos muestre los usuarios ms cercanos segn nuestro geoposicionamiento, visualice las interacciones por medio de OpenGL...?). Siguiendo con el tema de este captulo que es el Interface de Usuario, tenemos la suerte de que BlackBerry ha creado un libro de estilo para
Pgina 101

sus aplicaciones, es decir, como se debera mostrar un cuadro de dilogo, donde deberan ir las opciones de aplicacin, que fuentes utilizar, su espaciado y muchos ms consejos y consideraciones a tener en cuenta en el momento de disear nuestro UI. Podemos ver todas las guas en http://docs.blackberry.com/en/developers/subcategories/?userType= 21&category=BlackBerry+UI+Guidelines dividido en cuatro secciones principales: Tabletas y Smartphones BlackBerry 10. Tableta BlackBerry PlayBook. Smartphones BlackBerry (hasta la versin 7.1). Aplicaciones Conectadas a BBM.

y dentro de cada una, sus respectivas versiones. Cada gua podremos verla on-line o descargarla en formato pdf para consultarla en cualquier momento aunque nos encontremos desconectados.

Pgina 102

Pgina 103

Para la construccin de nuestro Interface de Usuario y crear la funcionalidad del mismo (capa superior de apariencia e intermedia de funcionalidad), podemos hacerlo directamente creando todo nuestro HTML, CSS y JavaScript desde cero, o comenzar con diversas libreras y frameworks que nos darn toda la funcionalidad necesaria y abstrayndonos del cdigo final para centrarnos en la lgica de proceso que deber seguir nuestra aplicacin. Comenzando nuestro proyecto por ejemplo con una plantilla HTML5 BOILERPLATE e incluyendo zepto.js, creando una App multidispositivo BlackBerry con bbUI.js, mostrando nuestros pdfs directamente en la App con pdf.js o programando con WebGL mediante C3DL. Para todas estas funcionalidades (y muchas ms) podemos encontrar multitud de libreras en la web, de las que os voy a listar algunas muy interesantes: bbUI.js https://github.com/blackberry/bbUI.js framework de BlackBerry para crear completas aplicaciones BlackBerry en WebWorks con la apariencia especfica de BlackBerry 5.x, 6.x, 7.x, PlayBook y BlackBerry 10. jQuery http://jquery.com/ framework para la manipulacin DOM, peticiones AJAX, efectos... jQuery UI http://jqueryui.com/ Iterface de usuario (UI) desarrollado por jQuery. jQuery mobile http://jquerymobile.com/ framework jQuery optimizado para tablets y mviles plugins jQuery http://plugins.jquery.com/ todo tipo de plugins para el framework jQuery.
Pgina 104

zepto.js http://zeptojs.com/ completo framework similar a jQuery y compatible en gran medida, pero enfocado al desarrollo mvil. AliceJS http://blackberry.github.com/Alice/ framework de BlackBerry para la realizacin de efectos CSS. HTML5 BOILERPLATE http://html5boilerplate.com/ para simplificar el proceso de construccin de sitios web en HTML5 con diferentes optimizaciones de cdigo deck.js http://imakewebthings.com/deck.js/ Para la realizacin de presentaciones. mini ajax http://miniajax.com/ multitud de scripts y plug-ins para diferentes frameworks para todo tipo de efectos y funcionalidades. pdf.js https://github.com/mozilla/pdf.js librera HTML5 para la lectura de archivos pdf desde el navegador sin la necesidad de utilizar plug-ins. $fx() http://fx.inetcat.com/ liviana librera para la animacin de objetos HTML. C3DL http://www.c3dl.org/ librera para la creacin de grficos 3D con WebGL. Processing.js http://ejohn.org/blog/processingjs/ port del lenguaje Processing68 (lenguaje para la programacin de imgenes, animaciones e interacciones) a JavaScript. Raphal http://raphaeljs.com/ librera para el trabajo con vectores grficos.

68. - http://processing.org/ Pgina 105

Pixastic http://www.pixastic.com/ librera para la manipulacin de fotos y aplicacin de efectos. stroll.js https://github.com/hakimel/stroll.js efectos CSS3 de scroll. Flux Slider http://www.joelambert.co.uk/flux/ slider de imgenes con efectos 3D en CSS3 (aceleracin por hardware).

8. Pagos
Una vez realizada nuestra aplicacin podemos monetizarla bsicamente de tres formas distintas: Distribuyendo la aplicacin con un precio de venta. Mostrando publicidad en la misma. Vendiendo Digital Goods desde nuestra App.

La primera opcin no nos debe preocupar a priori, ya que no influir en el proceso de desarrollo de nuestra aplicacin. Una vez desarrollada y firmada la subiremos al Vendor Portal para App World69 (proceso que veremos en el siguiente captulo) y es ah donde elegiremos si ser gratuita o de pago (y el precio de la misma), por lo que este paso no influir en el desarrollo de la misma.

69. - https://appworld.blackberry.com/isvportal Pgina 106

Si optamos por la segunda opcin (podemos combinarla con la anterior y ofrecer una versin gratuita y una versin pro o de pago, libre de publicidad, pero que deberemos comprar), tendremos que implantar dicha funcionalidad mediante el objeto Banner, aunque de momento an no est disponible para PlayBook y BlackBerry 10. Para servir anuncios en la aplicacin, primero deberemos darnos de alta en el servicio de BlackBerry mediante el BlackBerry Advertising Service70. La tercera opcin es la que vamos a ver un poco ms en detalle en este captulo y consiste en la venta de determinados digital goods (productos digitales) como pueden ser nuevos niveles en un juego, desbloquear funcionalidades de la aplicacin, etc. De momento estas funcionalidades no estn disponibles para BlackBerry 10 y en nuestra aplicacin para la PlayBook deberemos definir la caracterstica payment en nuestro archivo de aplicacin config.xml:
70. - https://adservices.blackberry.com/ Pgina 107

01. <feature id=blackberry.payment />

Para la gestin de digital goods en nuestra aplicacin disponemos de los mtodos blackberry.payment.getExistingPurchases y blackberry. payment.purchase para comprobar los productos digitales adquiridos desde la aplicacin y para iniciar la compra de un nuevo producto digital. Para realizar las pruebas desde nuestra aplicacin disponemos de la propiedad developmentMode que si la fijamos a verdadero (true), la aplicacin no contacta con el servicio de pagos y se simula una pantalla de compra, para permitir al desarrollador elegir el resultado de dicha compra. La funcin blackberry.payment.getExistingPurchases recibe tres posibles parmetros que son refresh (verdadero o falso, true/false) para indicar si el dispositivo debe actualizar la lista de compras desde el servicio de pagos (true) o si debe devolver inmediatamente dicha lista desde la cach de productos previamente comprados (false). El segundo parmetro ser la funcin que se llamar en caso de xito de la compra (callback OnSuccess) y como ltimo parmetro, la funcin que se invocar en caso de fallo en la compra (callbackOnFailure), en la que dispondremos de un texto de error (errorText) y un identificador de dicho error (errorID) que contendr uno de los siguientes errores: 1 = Cancelado por el usuario. 2 = Servicio de pagos ocupado. 3 = Error general del servicio de pagos. 4 = Digital Good no encontrado. 5 = Error de Aplicacin Ilegal (slo en BlackBerry OS 5.0+).
Pgina 108

Mediante la funcin blackberry.payment.purchase iniciaremos la compra de productos digitales desde nuestra aplicacin. Esta funcin admite tres parmetros que son los argumentos (args), e igual que en el caso anterior la funcin invocada en caso de xito (callbackOnSuccess) y la funcin a ejecutar en caso de fallo (callbackOnFailure), que nos devolver el mismo texto de error e identificador del fallo que en blackberry. payment.getExistingPurchases. Los parmetros a pasar a dicha funcin (args) son los siguientes (todos de cadena de texto): date: La representacin de la fecha en Tiempo Unix o Tiempo POSIX71 en que la compra fue realizada. digitalGoodID: El ID (Identificador) del producto digital comprado. digitalGoodSKU: El SKU del producto digital (que habremos definido en el momento de subir nuestra aplicacin en el App World Vendor Portal o en una modificacin posterior). licenseKey: Representa la clave de licencia para esta compra, o null si el producto digital comprado no tiene una clave de licencia. metaData: Los metadatos de esta compra, o null si no se han incluido metadatos con esta compra. transactionID: El ID (Identificador) de transaccin para esta compra.

Cuando se inicia una compra, slo es necesario indicar el identificador del producto (digitalGoodID), o su SKU (digitalGoodSKU), todos los dems argumentos son opcionales. Si se indican los dos (ID y SKU), el

71. - http://es.wikipedia.org/wiki/Tiempo_Unix Pgina 109

identificador tendr preferencia sobre el SKU, que slo se utilizar si el producto digital no se puede localizar con el ID indicado. Como siempre, lo mejor es ver un ejemplo para probar la funcionalidad y de nuevo BlackBerry nos brinda un ejemplo de uso en su gitHub que podemos descargar desde https://github.com/blackberry/WebWorksSamples/tree/master/payment

El cdigo bsico para la realizacin de un pago:

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. function pagar() { try{ blackberry.payment.purchase({ digitalGoodID:123, digitalGoodSKU:algunSKU, digitalGoodName:algunNombre, metaData:metadata, purchaseAppName:WebWorks APP, purchaseAppIcon:null}, compraOK,compraFallo); }catch (e){

Pgina 110

12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26.

} }

alert (Error + e);

function compraOK(compra) { var ItemComprado = JSON.parse(compra); var transId = ItemComprado.transactionID; var sku = ItemComprado.digitalGoodSKU; var dgId = ItemComprado.digitalGoodID; alert(Item comprado: + transId + , + sku + , + dgId); } function compraFallo(errorText, errorId) { alert(Error en la compra: + errorText + , + errorId); }

Creamos el mtodo pagar que ser el encargado de iniciar la compra llamando a blackberry.payment.purchase y pasndole los parmetros digitalGoodID, digitalGoodSKU, digitalGoodName, metaData, purchase AppName y purchaseAppIcon (slo es imprescindible el primero o el segundo como se indic anteriormente). En funcin de si la operacin se realiza de manera correcta o se produce un fallo, se invocar respectivamente a compraOK compraFallo, mostrando en el primer caso el identificador de la transaccin junto con el SKU e identificador del producto digital, y en el segundo caso el texto e identificador del error.

9. tiles
Por ltimo para finalizar este captulo de opciones y mtodos del API de WebWorks vamos a ver los objetos URL y Utils del API, ambos disponibles para BlackBerry OS 5.0+ y PlayBook 1.0+ (de momento an no estn disponibles para BlackBerry 10). Para el uso de cualquiera de los dos, deberemos definir la caracterstica utils en el archivo config.xml de nuestra aplicacin:
Pgina 111

01. <feature id=blackberry.utils />

Con el objeto URL podemos obtener los parmetros pasados a una pgina ya sea indicando la clave o por el ndice, si por ejemplo tenemos la url pagina2.html?libro=webworks&so=blackberry con el mtodo getURLParameter pasndole la clave libro obtendremos su valor web works y con la clave so nos devolver el valor blackberry. Lo mismo suceder con el mtodo getURLParameterByIndex con la nica diferencia que el parmetro que le pasaremos a la funcin ser el ndice (el orden en el que aparecen los parmetros en la url) y si le pasamos el ndice 0 nos devolver webworks devolviendo blackberry al pasarle el ndice 1. En ambos casos si no existiese la clave pasada o el ndice, nos devolvera un objeto no definido (undefined). Vamos a ver un ejemplo en el que obtenemos la url de la pgina actual y un parmetro. Creamos la funcin datos_url que llamaremos desde nuestra pgina al pulsar sobre un icono:
01. 02. 03. 04. 05. 06. function datos_url(){ var cadena_url = window.location.toString(); var url = blackberry.utils.parseURL(cadena_url); var param_titulo = url.getURLParameter(titulo);

var html_url=<h1>La url de la pgina actual es: <span class=verde> + cadena_url + </span></h1>; 07. html_url+=<h2>El parmetro titulo de la url tiene el valor: <span class=verde> + unescape(param_titulo) + </span></h2>; 08. 09. document.getElementById(info).innerHTML = html_url; 10. }

Pgina 112

Nos situamos sobre nuestra pgina en el entorno Ripple pasndole en la url un parmetro titulo con el valor Libro WebWorks y al pulsar sobre el icono veremos la siguiente informacin en pantalla:

Nuestra funcin se encarga en primer lugar de recoger la url de la pgina actual (mediante window.location.toString()), a continuacin creamos el objeto URL de WebWorks llamando a blackberry.utils.parseURL pasndole la cadena de nuestra url. Una vez creado el objeto URL slo nos queda llamar a su funcin getURLParameter pasndole el parmetro titulo para que nos devuelva su valor. Tanto el valor de la url como el del parmetro los mostramos en un div con id=info, pero en el segundo caso, usamos la funcin de javascript unescape para eliminar la codificacin del espacio (%20). Como vemos una opcin fcil y rpida para obtener los parmetro pasados a nuestras pginas/pantallas de aplicacin.
Pgina 113

El objeto Utils implementa los mtodos generateUniqueId, blobTo String y stringToBlob. El mtodo generateUniqueId nos generar un nmero nico de la funcin de javascript Math.random() que podemos utilizar en nuestra aplicacin para diferentes propsitos como un identificador nico, y que podemos almacenar para posteriores usos con HTML5 Local Storage.
01. 02. 03. 04. var miID = blackberry.utils.generateUniqueId(); if (localStorage.getItem(miID)===null){ localStorage.setItem(miID, miID); }

Los dos siguientes mtodos (blobToString y stringToBlob) convierten un objeto binario72 a cadena de texto y el proceso inverso (de cadena de texto a objeto binario). En el primer caso, al mtodo blobToString le pasamos como primer parmetro el objeto binario y como segundo parmetro opcional la codificacin (la codificacin por defecto es ISO-8859-173). El segundo mtodo stringToBlob recibe como primer parmetro la cadena de texto y como segundo parmetro opcional la codificacin.
01. var miBlob = blackberry.utils.stringToBlob (Esta es una cadena de texto que nos gustara codificar, UTF-8); 02. var DirArch; 03. 04. // Comprobamos el dispositivo que estamos utilizando. En la Playbook, slo la versin de OS nos dir que tipo de dispositivo es, si queremos saber el tipo de SmartPhone, para saber el modelo deberemos utilizar blackberry.system.model 05. var OSversion = blackberry.system.softwareVersion; 06.

72. - BLOB (Binary Large Objects, objetos binarios grandes). 73. - Las codificaciones soportadas son ISO-8859-1, UTF-8, UTF-16BE y US-ASCII. Pgina 114

07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26.

// Establecemos donde guardar el archivo segn el tipo de dispositivo utilizado if (OSversion.indexOf(Playbook) == -1) { // es un SmartPhone BlackBerry //Necesitamos comprobar si hay SD disponible if (blackberry.io.dir.exists(file:///SDCard)) { DirArch = file:///SDCard/dir1; blackberry.io.dir.createNewDir(DirArch); } else { //No hay tarjeta SD disponible DirArch = file:///store/dir1; blackberry.io.dir.createNewDir(DirArch); } } else {// Es Playbook // Para simplificar el ejemplo no activaremos File Sharing y guardaremos en el rea de almacenamiento de la aplicacin DirArch = blackberry.io.dir.appDirs.app.storage.path + /dir1; blackberry.io.dir.createNewDir(DirArch); } try { blackberry.io.file.saveFile(DirArch + /blob.txt, miBlob); } catch (e) { alert(e.message = + e.message); }

Pgina 115

7. Nuestra aplicacin disponible para el mundo

a hemos pasado por ver si nos interesa programar para BlackBerry, como configurar nuestro entorno para abordar la creacin de nuestras aplicaciones, hemos creado algunos ejemplos y usado funciones nativas de los dispositivos por medio de las API de WebWorks, ahora slo nos queda poner disponible nuestra aplicacin para que los usuarios la utilicen y obtener nuestra recompensa final que puede ser dar a conocer un nuevo servicio, cubrir un nicho de mercado no explotado, obtener beneficios de nuestro largo trabajo, promocionar nuestro Blog, etc...

1. Firmando nuestra aplicacin

El primer paso para poder tener disponible nuestra aplicacin en el App World de BlackBerry es firmarla, ya hemos visto como empaquetar nuestra aplicacin, pues bien, antes de poder subirla al App World deberemos de repetir ese mismo proceso, con la nica diferencia de que ahora nuestra aplicacin debe estar firmada. Todas las aplicaciones deben estar firmadas (proceso que se realiza contra los servidores de RIM), lo que permitir que RIM valide las aplicaciones y les asigne un identificador nico para dicha aplicacin. El primer paso es solicitar nuestras claves para la firma, que deberemos solicitar en https://www.blackberry.com/SignedKeys/ para lo cual deberemos indicar nuestro datos (las claves sern enviadas por mail al indicado en dicho formulario), y deberemos elegir un PIN (clave) que posteriormente utilizaremos en el proceso de registro de nuestras claves. Segn el destino de nuestra aplicacin deberemos elegir las claves para firmar Apps para BlackBerry OS 7.x e inferior para BlackBerry PlayBook OS y
Pgina 117

BlackBerry 10 (y superior... en un futuro). Cuando solicit dichas claves (hace unos dos aos) el proceso de envo de las mismas era muy rpido tardando slo unas horas, aunque en el primer email recibido nos avisan de que pueden tardar hasta dos das. Recibiremos por mail los dos archivos .csj necesarios para preparar nuestro entorno para la firma de aplicaciones (cada archivo llegar en un mail independiente).

Los primero que necesitamos hacer es guardar los dos archivos .csj en una ubicacin a nuestra eleccin de nuestro ordenador (estos archivos slo los podremos utilizar una vez para instalar las claves de firmado), los dos archivos son: client-RDK-xxxxxx.csj: Este archivo es el necesario para firmar las aplicaciones y poder publicarlas en la tienda del BlackBerry App World.
Pgina 118

client-PBDT-xxxxx.csj: Este archivo es el utilizado para generan un token para debug para la prueba de aplicaciones en dispositivos fsicos.

Despus deberemos registrar nuestros archivos .csj con la autoridad de firma de RIM (RIM Signing Authority) con el programa blackberry-signer situado en la carpeta \dependencies\tools\bin74 de nuestro SDK de BlackBerry 10 WebWorks o en la carpeta \bbwp\blackberry-tablet-sdk\ bin75 en el caso del SDK de WebWorks para tablets. Procederemos a la creacin de nuestra claves definitivas de firmado (aunque este proceso tambin lo podemos realizar directamente desde el BlackBerry Graphical Aid, en este caso vamos a realizarlo directamente desde la lnea de comandos), para lo que abriremos una consola de comandos de nuestro sistema y ejecutaremos (la ruta indicada es para BlackBerry 10):
cd C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>

A continuacin:
blackberry-signer -register -csjpin <pin indicado en el registro>

-storepass <clave a crear para la firma> <archivo client-RDK-xxxxxx.csj>

<archivo client-PBDT-xxxxx.csj>

74. - C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK 1.0.2.9\ dependencies\tools\bin en el caso de una mquina con Windows 7 64bits 75. - C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.0.0.5\bbwp\blackberry-tablet-sdk\bin en el caso de una mquina con Windows 7 64bits Pgina 119

El comando a ejecutar es el mismo en BlackBerry 10 y para tablets, slo cambia la ruta donde se encuentra el programa blackberry-signer, el pin que deberemos indicar es el que pusimos en el momento de solicitar las claves, la clave que indicaremos para nuestro archivo de firma, deberemos recordarla, ya que sin la misma no podremos firmar nuestras aplicaciones y los nombres de los archivos .csj (junto con su ruta) debern ser los recibidos por mail. Si por ejemplo en el momento de solicitar nuestros archivos de claves indicamos como pin 123456, deseamos utilizar de clave para nuestra firma librowebworks y los archivos recibidos por mail son client-RDK-999999999.csj y client-PBDT-999999999.csj y los hemos guardado en una carpeta en el raz de C: llamada claves, deberemos ejecutar el siguiente comando:
blackberry-signer -register -csjpin 123456 -storepass librowebworks C:\claves\ client-RDK-999999999.csj C:\claves\client-PBDT-999999999.csj

Una vez finalizado el proceso ya estamos en disposicin de firmar nuestras aplicaciones, pero primero vamos a realizar una copia de seguridad de nuestras claves para poder utilizarlas en otros ordenadores o para restaurarlas en caso de formatear el ordenador, recordemos que una aplicacin firmada con una clave, slo puede ser actualizada en el BlackBerry App World a una nueva versin si la hemos firmado con la misma clave. Como dijimos anteriormente, los archivos CSJ una vez registrados quedan desactivados, por lo que no podemos utilizarlos de nuevo para registrarlos, en dicho proceso, los archivos generados son tres, author. p12, barsigner.csk y barsigner.db, que se encontrarn en la siguiente ruta:

Pgina 120

Windows XP: %HOMEPATH%\Local Settings\Application Data\ Research In Motion76 Windows Vista y Windows 7: %HOMEPATH%\AppData\Local\ Research In Motion77 Mac OS: ~/Library/Research In Motion UNIX o Linux: ~/.rim

estos tres archivos son los que deberemos copiar a un lugar seguro y restaurar de nuevo a su ruta original en caso de formateo o para utilizarlos en un nuevo sistema. Si hemos actualizado el SDK de WebWorks desde una versin anterior y ya tenamos registradas nuestras claves de firmas, deberemos renombrar el archivo sigtool.p12 generado en la anterior versin, a su nuevo nombre author.p12 y copiarlo en la ruta correspondiente indicada en el paso anterior. Llegados a este punto ya tenemos nuestro entorno preparado para firmar aplicaciones y en captulos anteriores vimos como empaquetar nuestra aplicacin con el BlackBerry Graphical Aid, nos queda un paso ms que es indicarle al BlackBerry Graphical Aid donde se encuentran nuestras claves de firmado, esto lo realizaremos desde la pestaa Configuration mediante el botn Run Configuration Wizard, donde si realizamos correctamente todos los pasos indicando las rutas correctas, tendremos el certificado de desarrollo y las claves de firma instaladas correctamente:

76. - En Windows XP %HOMEPATH% est en C:\Documents and Settings 77. - En Vista y Windows 7 %HOMEPATH% est en C:\Users Pgina 121

y ya podemos pasar a la pestaa Build WebWorks donde procederemos igual que cuando empaquetamos nuestra aplicacin, con la nica diferencia de que en este caso, si marcaremos la casilla de firmar la aplicacin (Sign Application), e indicaremos la clave que generamos en el momento de registrar nuestros archivos .csj:

y tendremos nuestra aplicacin (archivo .bar) empaquetada y firmada, ya totalmente preparada para subirla al BlackBerry App World.
Pgina 122

2. Alta en el BlackBerry App World y publicacin

El ltimo paso para que todo el mundo pueda descargarse e instalar nuestras aplicaciones directamente desde el BlackBerry App World, evidentemente es subirlas al mismo. Lo primero que deberemos hacer es darnos de alta en el Portal de Vendedores del BlackBerry App World para lo cual entraremos en https:// appworld.blackberry.com/isvportal/vendor/reg_terms.do y una vez revisados y aceptados los acuerdos legales:

procederemos a cumplimentar todos nuestros datos en los cuatro pasos que nos indicarn para la solicitud del alta en el BlackBerry App World Vendor Portal:

Pgina 123

Ahora nos queda esperar a que nuestra solicitud sea revisada por RIM y nos llegue un mail con la aprobacin (o en caso contrario el problema por el que no se ha realizado dicha alta), suele tardar en torno a dos das, aunque en perodos de muchos registros como en la promocin de creacin de un App para el PlayBook el perodo de alta se puede retrasar algunos das ms. Una vez recibamos el mail con la aprobacin de nuestra alta, ya podremos entrar en el portal con nuestro mail y clave indicadas (https:// appworld.blackberry.com/isvportal/login_input.do) desde donde tendremos las siguientes opciones: Vendor Portal con acceso a las secciones principales del portal y noticias y avisos. Manage Products desde donde administramos nuestras aplicaciones, podremos modificar las existentes, eliminarlas y subir nuevas aplicaciones.
Pgina 124

Download Reports para ver las descargas de nuestras aplicaciones por perodos, aplicaciones, pases, etc. y poder descargar a ficheros .csv los datos estadsticos de dichas aplicaciones. Manage Account Details para cambiar, aadir o modificar datos relativos a nuestra cuenta en el BlackBerry App World Vendor Portal. Manage User Accounts seccin en la que podremos crear/modificar/eliminar usuarios con permiso para subir/modificar/eliminar aplicaciones o que simplemente puedan acceder a los datos estadsticos. Sandbox desde donde podremos realizar pruebas en un entorno de desarrollo. Change Request Tickets para la modificacin de Tickets o ver los anteriores (por ejemplo solicitud de cambio de descripcin de una aplicacin). Logout salida del entorno. Help ayuda de BlackBerry App World.

Ya slo nos queda subir nuestra aplicacin para que est disponible a todo el mundo desde el BlackBerry App World, para lo que vamos a Manage Products y pulsamos sobre el botn Add Product. Deberemos comenzar a cumplimentar los cinco pasos necesarios para la subida de nuestra aplicacin, eligiendo cuidadosamente su categora, Rating (edades a las que va destinada nuestra aplicacin, si incluye imgenes de violencia, etc...), un nombre nico (SKU) para identificar nuestra aplicacin (no es el ttulo de la misma, que se indicar en Product Name), si la aplicacin ser gratuita, de pago (y fijacin de precio que
Pgina 125

podremos ver en diferentes pases), por suscripcin de 7 das o de 30 (despus podremos seleccionar otro rango de das)...

En el segundo paso definiremos un ttulo corto y una descripcin larga para nuestra aplicacin, as como palabras clave para encontrar ms fcilmente nuestra aplicacin, este paso lo repetiremos por cada idioma en el que deseemos poner el ttulo y descripcin de nuestra aplicacin mediante el botn Add Language, al menos deber estar en Ingls que es la opcin que nos aparece por defecto. Cuando un usuario vea nuestra aplicacin por ejemplo desde el App World en castellano, si disponemos del ttulo y descripcin en ese idioma se lo mostrar, si no se lo mostrar en Ingls. Como ejemplo prctico, tengo subida una aplicacin al App World con los idiomas Ingls y Espaol, cuando la veo desde uno de los PlayBooks, que est en Gallego, me muestra la aplicacin en Ingls ya que no le he definido dichos datos en Gallego. En el tercer paso tendremos que subir las imgenes de nuestra aplicacin para mostrar en el App World (recordad que se puede acceder al
Pgina 126

App World desde web, un SmartPhone con pantalla pequea, con pantalla grande como el Dev Alpha 10, el PlayBook), las imgenes sern un icono de aplicacin en formato png y de 480x480 pixels, una imagen en formato png de 1920x1186 pixels para poner en el caso de que nuestra aplicacin aparezca como producto destacado y hasta un mximo de 50 capturas de pantalla de la aplicacin en formato gif, jpg o png y con un tamao mximo de 640x640 pixels (no es necesario que guarden esa proporcin).

En el siguiente paso seleccionaremos si nuestra aplicacin estar disponible en todas las operadoras, slo en las seleccionadas o en todas menos las seleccionadas y lo mismo con los pases (en todas los pases, slo en los seleccionados o en todos menos los seleccionados).

Pgina 127

En el quinto y ltimo paso (de momento...) veremos todo lo seleccionado anteriormente y si todo es correcto guardaremos nuestra aplicacin (botn Save) para posterior revisin por parte de RIM. Despus de todos estos pasos an no hemos subido nuestra aplicacin empaquetada y firmada (archivo .bar firmado), por lo que es el momento de volver a Manage Products y en nuestro Producto, aadir una nueva versin (Release) pulsando bajo la columna Releases en el signo +. En este momento nos aparecer una pantalla en la que indicaremos si en esta versin hay cambios como Control de Exportacin, Derechos Digitales o Contenidos Generados por los Usuarios. Y ya nos encontramos en la pantalla desde la que subiremos realmente nuestra aplicacin, donde indicaremos la versin, notas de esta versin (posibles cambios sobre otras versiones si no es la primera, etc.) y en la parte inferior aadiremos los archivos de la aplicacin (disponemos de una casilla para poder distribuir una aplicacin diferente segn la operadora). Pulsamos sobre Add filebundle, le pondremos un nombre indicativo del programa y versin (por ejemplo libro_webworks_v1), elegiremos la plataforma que ser BBOS para SmartPhones hasta la versin 7.x y QNX para PlayBook y BB 10. Seleccionaremos la versin mnima soportada del OS, los dispositivos soportados (haciendo clic sobre el icono de lpiz), lenguaje soportado, operadoras soportadas y la ltima columna Files es donde realmente subiremos nuestro archivo .bar para lo que de nuevo haremos clic sobre el icono del lpiz y en la pantalla que nos aparecer haremos clic sobre Add, seleccionamos nuestro archivo de aplicacin firmado y esperamos a que se suba y aparezca correctamente.

Pgina 128

Aceptamos y ahora s, ya hemos finalizado todos los pasos necesarios, deberemos esperar a que la aplicacin sea aprobada por RIM, en algunos casos he tenido aplicaciones aprobadas en unas horas y en otros varios das, RIM nos avisar del resultado por mail y si est aprobada ya podremos descargarla desde el App World. Nuestra aplicacin disponible para el mundo!!!

3. Promocionando nuestra aplicacin

Una vez que ya tenemos nuestra aplicacin disponible para su distribucin en el App World deberemos promocionarla si queremos llegar a un pblico ms amplio. La primera promocin nos vendr dada sin realizar ninguna accin, ya que tan pronto publiquemos nuestra aplicacin aparecer en novedades dentro del App World al que est destinada nuestra App (si slo es para BlackBerry 7 no aparecer en el App World del PlayBook), por lo que los primeros das que est disponible notaremos ms descargas.
Pgina 129

Si nuestra aplicacin aparece como destacada en el App World el nmero de descargas aumentar considerablemente, pero para eso nuestra App debe ganrselo, ya sea bien porque obtiene muchas estrellas en las clasificaciones, por un alto nmero de descargas, etc... por lo que podemos incentivar a nuestros usuarios a que dejen comentarios sobre la misma y la valoren, ya que si obtenemos el status de aplicacin destacada, veremos un excelente resultado en nuestras estadsticas. Tambin podemos escribir al equipo del App World indicndoles el motivo por el que nuestra aplicacin debera figurar como destacada, que aporta de innovador, la experiencia de usuario, etc. y si realmente lo merece, voila, aumento de descargas (o ventas). Podemos crear una pgina especfica para nuestra App o para el conjunto de aplicaciones que vayamos publicando, ya sea un WordPress, una pgina en Facebook o cualquier tipo de pgina que deseemos para promocionar nuestra App, adems tenemos la pgina web que muestra nuestra aplicacin en el App World (podemos definir el idioma con el parmetro lang de la url, si definimos varios idiomas para nuestra aplicacin), por ejemplo la pgina en el App World de la aplicacin para PlayBook Dpx:

http://appworld.blackberry.com/webstore/ content/106144/?lang=en (en Ingls) http://appworld.blackberry.com/webstore/ content/106144/?lang=es (en Espaol)

En esta pgina podemos ver el icono de la aplicacin, las capturas de pantalla, los dispositivos para los que est disponible, ttulo y descripcin de la aplicacin, comentarios sobre la misma, cdigo QR para acceso directo a la misma, etc...
Pgina 130

Ya sea creando una pgina especfica o promocionando la del App World, debemos dar a conocer nuestra aplicacin en las redes sociales, bien por medio de FaceBook, Twitter, Google+, Pinterest, etc... recibir retroalimentacin de la misma para ver posibles fallos, mejoras, nuevas funcionalidades, etc. Adems si conseguimos que publiquen algo sobre nuestra aplicacin en portales especficos sobre BlackBerry, nos ser de gran ayuda, algunos a tener en cuenta podran ser:

http://crackberry.com/ http://www.blackberrycool.com/ http://www.berryreview.com/ http://www.miblackberry.com/

Pgina 131

http://lablackberry.com/ http://www.bigbangberry.com/ http://www.berrynation.es/

O en alguno de los Blogs oficiales de BlackBerry:

http://devblog.blackberry.com/ http://blogs.blackberry.com/ http://bizblog.blackberry.com/ http://helpblog.blackberry.com/

Adems podemos probar suerte con alguno de los grandes portales de tecnologa como Mashable (http://mashable.com/), TechCrunch (http://techcrunch.com/), Gizmodo (http://www.gizmodo.es/), ZDNet (http://www.zdnet.com/), GigaOm (http://gigaom.com/), Wired (http:// www.wired.com/) y tantos otros, aunque no van a hablar de nuestra aplicacin slo porque tenga una bonita interface o realice un efecto 3D muy bonito, as que ya podemos ir preparando el prximo Angry Birds o nuestro mejorado Flipboard. Sea cual sea el mtodo que elijamos, o la combinacin de varios, para que una aplicacin llegue a tener xito, en primer lugar tiene que ser buena, aportar algo novedoso y/o til y posteriormente tendremos que realizar una buena labor de Marketing, ya que los productos hay que venderlos, nos enfrentamos a un mercado global y extremadamente competitivo y eso de el buen producto se vende slo no siempre es cierto.

Pgina 132

8. Eplogo

ste libro llega a su final, sus comienzos fueron para uso privado, una recopilacin de enlaces que deba seguir para los desarrollos en Web Works, algunas lneas de cdigo que hacan esta o aquella funcionalidad que necesitaba y entonces me surgi la idea de por qu no organizarlo en captulos y ponerlo disponible para todo el mundo? cuando busque por la red no encontr ningn libro especfico sobre como programar para BlackBerry con WebWorks, si mucha documentacin y ejemplos... entonces por qu no escribirlo?. Desde que comenc han pasado meses sin escribir ni una sola lnea y otros con mucha actividad como estos ltimos, ha cambiado el ttulo y he tenido que reescribir y adaptar gran parte de los contenidos, ya que en el comienzo del libro no exista BlackBerry 10 (al menos su SDK y APIs). Se quedan muchsimas cosas en el tintero, pero ya se ver si se puede volver a recuperar ese tintero, ya digital, en un futuro prximo (o lejano, quien sabe). Por ejemplo no he tocado el tema de como poner nuestras aplicaciones en modo debug, como inspeccionar el cdigo, variables, rendimiento, etc. con el inspector Web de Chrome y Ripple (que se ejecuta como extensin de Chrome), optimizacin de nuestro cdigo (bucles descendentes en vez de ascendentes, mbitos de variables, etc.) y tantos temas relativos a nuestro cdigo que por ahora se quedan fuera del objetivo de este libro.

Pgina 133

No he hablado de herramientas externas para la monitorizacin de nuestros resultados en el App World como es el caso de Distimo monitor (http://monitor.distimo.com/)

Pgina 134

y quizs tantas y tantas referencias y ausencias... pero todo eso ya no pertenece a este libro. Ya sabis donde encontrarme: Carlos Longarela, Lugo 2012.

https://twitter.com/CarlosLongarela

Pgina 135