Desarrollo Blackberry 10 – Cascades

Siguiendo con la diversidad de plataformas de desarrollo de aplicaciones móviles que actualmente existen en el mercado, hoy le damos el paso a un excelente IDE: Blackberry Native SDK, el cual permite crear aplicaciones para la última línea de teléfonos de la firma canadiense.

Si había algo que muchos usuarios finales, y desarrolladores, venían pidiendo a gritos al mundo de la ya extinta RIM (Research In Motion), era que desarrollen un nuevo equipo Blackberry con tecnología mucho más actualizada. Si bien la plataforma fue furor durante mucho tiempo, e incluso hoy lo sigue siendo en una gran cantidad de países latinoamericanos, el sistema operativo Blackberry tenía una contra importante cuando se la comparaba contra rivales más modernos, como ser Android o iOS.

Hasta el mismo Microsoft, quien desarrollara en una primera instancia el sistema operativo Windows Mobile, que luego se transformó a Windows Phone, optó por modernizar su UI mucho antes de perder la totalidad de su cuota de mercado.

Si bien Windows Mobile no llegó a lograr la popularidad de iOS o Android a nivel mundial regiones de Asia, como China y Hong Kong, entre otras, distribuyeron durante mucho tiempo teléfonos celulares con Windows Mobile que tenían una aplicación desktop para lanzar aplicaciones, que emulan la interfaz de iOS o Android.

RIM ahora es Blackberry

El colega Ariel Corgatelli, contó hace un tiempo atrás en su nota publicada aquí, todos los cambios por los cuales pasó la firma canadiense. Y en un intento por recuperar el mercado que le perteneció durante un tiempo largo, evocaron al código fuente de un viejo sistema operativo, QNX, para tomarlo como bases en el desarrollo de una nueva era en el mundo Blackberry.

Y desde un punto de vista muy particular, siento que Blackberry hizo lo correcto, llevando la interfaz de usuario de su sistema operativo móvil a la necesidad y costumbre que ya adoptaron la mayoría de los usuarios de teléfonos móviles.

Así es como nace Blackberry 10, quien llega con un hardware renovado, con versiones táctiles o con el clásico teclado QWERTY, y adaptado a las características básicas que un teléfono inteligente debe tener: potencia, RAM y buen espacio de almacenamiento, para alojar aplicaciones de diversas temáticas que utiliza el usuario promedio, al menos dos o tres veces al día.

Un nuevo IDE

De la mano del sistema operativo (BB10), y de los teléfonos renovados de la firma canadiense, llega también un IDE modernizado, que permite a los desarrolladores afrontar el desafío de crear Apps para esta nueva plataforma.

Blackberry presenta así su IDE Blackberry 10 SDK, que a esta altura permite crear Apps para la versión 10, 10.1 y 10.2 (aún en beta al momento de escribir este artículo).

La nueva plataforma de desarrollo Blackberry se adapta a los cambios actuales, y le da la bienvenida no sólo a las Apps nativas, utilizando Cascades (QML + C++), sino también a las Apps basadas en Web, que abordan un desarrollo creado con los estándares HTML5, CSS3 y JavaScript; Apps basadas en AIR, más un Runtime for Android, que permite correr aplicaciones creadas para el sistema operativo móvil de Google sobre la plataforma BB10.

Cascades

El IDE elegido para elaborar esta nota es el nativo, y se denomina Cascades. El mismo combina la opción de utilizar lenguaje C++ para codificar el acceso a los servicios de hardware de los teléfonos celulares Blackberry 10, y se combina sin problema alguno con QML y JavaScript.

QML es un lenguaje de diseño de interfaz, el cual nació hace más de diez años y es muy utilizado en Linux, como también en los antiguos sistemas operativos Symbian y WebOS, de Nokia. Y para estar a tono con las nuevas tecnologías impuestas por competidores como Microsoft, con XAML y Adobe con AIR y FLEX, QML permite que la interfaz gráfica que creamos con este lenguaje, interactúe directamente con JavaScript, quien hace un manejo fluido y fácil de los elementos en pantalla (léase Buttons, textBoxes, ComboBoxes, etc).

Instalación de Cascades

El punto de partida para todo desarrollador que quiera acoplarse a la creación de aplicaciones para Blackberry 10 es la web oficial para developers: http://developer.blackberry.com. En esta web encontrarán toda la documentación necesaria y aplicaciones para descargar, que nos adentrarán en el mundo binario de esta plataforma.

El SDK de Blackberry 10 fue bautizado como QNX Momentics IDE, y está basado en una adaptación de Eclipse IDE. Posee versiones para Windows, Mac y Linux, lo cual seguramente cubrirá cualquier necesidad o preferencia que tengamos por un sistema operativo.

Como requerimientos esenciales, debemos tener en cuenta los siguientes:
● Java SE 6 Platform instalado
● Procesador Pentium 4 o AMD Athlon de 2 GHz (o superior)
● Al menos 4 GB de espacio en disco
● 2 GB o más de memoria RAM (recomendable al menos 4 GB por el Simulador BB10)
● Placa gráfica que soporte OpenGL 2.0
● Resolución de pantalla de al menos 1024 x 768 píxeles

Adicional a este IDE, necesitaremos acoplar la descarga del Simulador BB10, el cual puede ser descargado por separado, desde este link: http://developer.blackberry.com/devzone/develop/simulator/simulator_installing.html, o realizar dicha instalación desde el SDK de Blackberry. Optaremos, por una cuestión de comodidad, de hacerlo una vez descargado e instalado el BB SDK. QNX Momentics IDE se descarga desde el siguiente link: http://developer.blackberry.com/native/downloads/.

Una vez finalizado el proceso de descarga, debemos ejecutar el instalador y seguir los pasos correspondientes, dictados por el asistente.

Ya descargado e instalado, el SDK nos creará el acceso a la aplicación, en el menú de programas de nuestro sistema operativo.

Para ejecutarlo, debemos hacer un clic en el icono Blackberry Native SDK 1.2xxx. Nos pedirá a continuación que indiquemos al IDE un directorio de trabajo, el cual almacenará los proyectos que creemos con éste.

El IDE

El entorno de desarrollo que presenta Blackberry para crear aplicaciones es muy fácil e intuitivo. El mismo, como bien dijimos antes, está basado en Eclipse, y todo aquel desarrollador con experiencia en esta herramienta o en otros lenguajes de programación podrá adaptarse al mismo rápidamente.

Su barra de herramientas principal presenta los componentes que más utilizaremos. Los tres primeros botones, más grandes que el resto y coloridos, nos ponen a disposición las acciones más comunes que ejecutaremos sobre esta plataforma: BUILD, RUN, STOP.

A continuación nos encontramos con una serie de ComboBoxes, a través de los cuales podemos especificar el tipo de acción a realizar.

El primero nos permite elegir si deseamos ejecutar o depurar nuestro proyecto en curso. El segundo nos permite elegir, en el caso que tengamos dentro de nuestro workspace varios proyectos, cuál de ellos ejecutaremos.

El tercero nos lista el menú de selección de destino del proyecto que ejecutaremos. Si ya instalamos y configuramos el simulador, nos mostrará el simulador activo; también nos permitirá especificar un teléfono que debemos tener previamente conectado al equipo, y por último nos dará una opción de administrar nuestros dispositivos, para el caso que tengamos más de uno.

Sobre el lateral izquierdo del IDE nos encontramos con la opción Project Explorer, donde se listan los diferentes proyectos que iremos creando. Más abajo encontramos el panel Components y Assets, donde veremos los componentes y controles que podemos utilizar en nuestros proyectos (textBoxes, Buttons, ListViews, etc.).

En el área central de la pantalla iremos visualizando los archivos .QML, .XML y otros que corresponden al proyecto que estamos llevando adelante. En estos escribiremos el código, y hasta podremos hacer un preview de cómo va quedando el diseño de pantalla. Este, si bien no es interactivo, nos asistirá para saber que la interfaz gráfica está quedando correctamente como la ideamos.

Sobre el lateral derecho se listan varios paneles, entre ellos QML Properties, donde podremos acceder a las propiedades más comunes de los componentes que agreguemos a nuestro proyecto. Los paneles Console, Debug y Breakpoints nos permitirán interactuar con el código fuente y con otras herramientas a la hora de analizar el código escrito y la funcionalidad que nuestra aplicación tiene.

El Simulador

Ya con el IDE funcionando, nos queda instalar el simulador, a través del cual podremos acceder a la vista en vivo de las aplicaciones que realicemos. Para ello, vamos al tercer ComboBox ubicado en la barra de herramientas principal y elegimos la opción Manage Devices. A continuación se abrirá una ventana, donde podemos administrar los dispositivos físicos que tengamos conectados a nuestra computadora, mediante el botón Devices, o instalar y administrar los simuladores que agregaremos a nuestro equipo.

Vamos a esta segunda opción si no tenemos ningún emulador instalado, y presionamos a continuación el botón Install a New Simulator.

Seguido a esto, se iniciará un proceso que busca en la web los simuladores Blackberry 10 disponibles para descarga. Una vez listados los mismos, seleccionamos de la lista uno, y presionamos el botón Install. Este proceso es largo, ya que cada simulador pesa un promedio de 700 MB. La descarga demora un tiempo.

Para seleccionar un simulador entre las tres versiones disponibles, podemos elegir la versión 10.2. El instalar la última versión del simulador no es un indicador de que las aplicaciones que desarrollemos funcionen sólo en esta plataforma. Esta limitación se da por código al momento de desarrollar, y no al momento de instalar un Simulador.

Finalizada la descarga, se abrirá la ventana de instalación del Simulador, en donde debemos seguir con las instrucciones que nos brinda el asistente.

Conociendo el Simulador

Para estar a tono con el sistema operativo, si es que no disponemos de un equipo Blackberry 10, podemos navegar y conocer algunos tips de este previo a comenzar el desarrollo de aplicaciones BB10. Ya instalado el simulador en QNX Momentics IDE, en la misma ventana donde ejecutamos la descarga del simulador, veremos el IDE ya instalado. A continuación se habilitan una serie de botones, desde donde podremos ejecutar el simulador. Presionando el botón Lunch se inicia el proceso de carga del mismo.

Ya dentro del simulador, nos encontramos con una interfaz similar a Android o iPhone. Entre las principales características de funcionamiento, encontramos:

● Los íconos más importantes se encuentran en la pantalla inicial.
● El dispositivo tiene tres pantallas donde almacena los iconos de las aplicaciones instaladas.
● A medida que agregamos aplicaciones, se crearán más pantallas virtuales.
● En el extremo inferior encontramos el indicador de cuántas pantallas posee el dispositivo.
● Para desplazarse entre pantallas, hacemos clic con el mouse sobre el borde negro lateral.
● De esta manera, manteniendo apretado el botón del mouse, podremos hacer el Swipe.
● El Swipe de izquierda a derecha nos mostrará una ventana con las aplicaciones abiertas.
● Con otro nuevo Swipe en el mismo sentido, podemos acceder al Hub de mensajes de BB.
● Si tenemos cuenta de Blackberry, podemos configurar la misma y descargar Apps, configurar nuestro correo electrónico y calendario, entre otras cosas.

Hands On!

Ya con el escenario montado, podemos iniciar el proceso de creación de aplicaciones para Blackberry 10. Para ello, en QNX Momentics IDE vamos al menú File > New > Blackberry Project. A continuación se inicia el asistente, en el cual debemos confirmar qué tipo de aplicaciones queremos desarrollar:

● Seleccionamos la opción Cascades y presionamos el botón Next.
● Luego seleccionamos Standard Empty Project y presionamos el botón Next.
● Ingresamos el nombre de la aplicación a crear. Ejemplo: PruebaDattamagazine.
● Y por último dejamos seleccionada la opción Use Global Blackberry SDK 10.x.
● Para terminar este proceso, presionamos el botón Finish.

Estructura de un proyecto

Cuando creamos un nuevo proyecto en QNX Momentics IDE se elabora una solución que consta de una serie de carpetas y archivos por defecto. En el mismo podemos encontrar nombres de carpetas como: JavaScript Resources, Binaries, Includes, src, arm, assets, translations, x86, y una serie de archivos sueltos en el raíz del directorio de proyecto.

Como bien distinguimos, cada una de estas carpetas almacena información de recursos JavaScript o C, una carpeta con archivos binarios, donde se almacenan el ejecutable de un proyecto compilado, y una carpeta x86, la que almacena una copia del ejecutable que puede desplegarse sobre la arquitectura de procesadores Intel o AMD. Dentro de la carpeta assets se almacenan los archivos .QML y .XML, que son los archivos principales donde codificaremos nuestro proyecto.

El archivo main.qml es el punto de inicio para la creación de la pantalla principal de una aplicación BB10. Este archivo incluye un código simple, a través del cual se muestra una etiqueta con la clásica leyenda “Hola Mundo”.
Veamos un poco la estructura del archivo main.qml. El mismo se inicia con la línea de código:

import bb.cascades.10.2

Esta línea indica que se utilizarán las librerías de compilación para la versión 10.2 del sistema operativo BB10. A continuación nos encontramos con el elemento Page {} dentro del cual se agregarán las líneas de código necesarias que permitirán construir la parte gráfica de nuestra aplicación, y el JavaScript necesario para interactuar entre los componentes de esta.

A continuación agregaremos un componente más a nuestra Aplicación, que le permitirá interactuar con el Label ya creado. Los componentes que podemos agregar, generalmente están nombrados de la misma manera en que figuran en el panel Components. Seguido al nombre, debemos abrir y cerrar las llaves, y dentro de estas agregaremos las propiedades y funciones necesarias para que este componente tenga vida o interactúe con otros componentes.

Inmediatamente debajo de la llave de cierre del componente Label, agregamos las siguientes líneas de código:

Button {
id: buttonCambiar
text: “Cambiar Label”
}

Cada componente que agregamos, por defecto no incluye un nombre distintivo del resto de los componentes. Blackberry 10 resuelve por defecto esto en las aplicaciones sencillas. Pero si queremos invocar un cambio desde un componente Button sobre un componente Label, mínimamente debemos identificar a Label con un nombre.

La propiedad para especificar un nombre a un componente es la propiedad id:, como vemos en el código donde agregamos el componente Button figura la propiedad id: con un valor específico.

Agreguemos entonces esta propiedad al componente Label, escribiendo la siguiente línea de código:

Label {
id: labelSaludo
...

Ahora debemos identificar la función que permitirá que, al presionar el botón, la etiqueta labelSaludo, cambie su texto por otro. Para ello debemos agregar el siguiente código en el componente buttonCambiar:

onClicked: {
labelSaludo.text = “Hola Dattamagazine”
}

Cada componente tiene una serie de métodos y funciones determinadas. Para el caso de un componente Button, podemos determinar como una de sus funciones al método Click(), presente en la mayoría de los botones de cualquier lenguaje de programación. A través de este evento podemos agregarle una acción determinada a realizar. En este caso, dispusimos que al hacer clic sobre el botón cambie el texto predeterminado en la etiqueta labelSaludo por el indicado entre comillas.

Si queremos visualizar cómo quedan ambos componentes agregados a la interfaz principal de nuestra pantalla, podemos ver un preview presionando la combinación de teclas Ctrl + Shift + 4. A continuación, aparecerá un panel sobre la derecha de la ventana de código donde se visualizamos el diseño de la pantalla.

Este panel no es interactivo, con lo cual sólo obtenemos una vista estática. Para probar nuestro código debemos ejecutarlo directamente sobre el Simulador. Para ello, en los tres botones principales de la barra de herramientas, presionamos el primero, que refiere a la acción BUILD.

Una vez finalizado el proceso de construcción de nuestro proyecto, seleccionamos del primer comboBox la opción Run, del segundo comboBox el nombre de nuestro proyecto, y del tercer comboBox seleccionamos el simulador que instalamos. Presionamos luego el botón RUN y esperamos que nuestra aplicación se cargue en el simulador.

En el extremo inferior derecho de QNX Momentics IDE podremos ver el progreso de armado y envío de nuestro proyecto al simulador. Este proceso es pesado y generalmente demora un tiempo importante. Debemos tener paciencia y en lo posible evitar hacer otros procesos en la máquina, mientras se ejecuta nuestro proyecto.

Al cargar el proyecto en el simulador, el mismo generará un icono vacío en el escritorio de Blackberry 10, que tendrá como nombre el mismo que usamos al crear el proyecto. Luego de esto podemos seguir modificando el proyecto directamente en QNX Momentics IDE, y volver a realizar el paso de carga en el Simulador tantas veces sea necesario.

Al correr el proceso RUN, este actualizará de forma automática los binarios de nuestra aplicación, sin necesidad de crear otro icono en el simulador.

Conclusión

Si bien esta es la primera versión de las herramientas para desarrolladores de Blackberry 10, hay que reconocer que la empresa ha hecho un cambio importante en ellas, y desarrollar aplicaciones para esta plataforma móvil ya se puede considerar que está al alcance de cualquier otro IDE de la competencia.

Los dejo explorar un poco más el IDE, y en la próxima entrega de desarrollo para Blackberry 10, publicaremos un nuevo proyecto que nos permita explorar más los diferentes componentes de Blackberry, y de esta manera poder desarrollar aplicaciones más vistosas.

A continuación encontrarán el código completo de este proyecto, para poder comparar el mismo si es que no les funcionó.

Archivo main.qml
import bb.cascades 1.2
Page {
Container {
//Todo: fill me with QML
Label {
id: labelSaludo
text: qsTr("Hello World") + Retranslate.onLocaleOrLanguageChanged
textStyle.base: SystemDefaults.TextStyles.BigText
}
Button {
id: buttonCambiar
text: "Cambiar Label"
onClicked: {
labelSaludo.text = "Hola DattaMagazine"
}
}
}
}

Cualquier otra consulta que tengan sobre la instalación o codificación en el IDE, no duden en dejar un comentario al final de la nota.