En un post anterior vimos como instalar todo lo necesario para desarrollar apps con HTML 5 para la nueva plataforma Blackberry 10, en esta ocasión veremos como usar esas herramientas con un primer ejemplo.
Un punto que nos falto mencionar es que necesitaremos un servidor web local, podemos optar porque XAMPP o cualquier otro que deseen, ahora que si estén usando Windows e instalaron el programa Ripple (no el complemento de chrome), este trae un sencillo servidor web, al cual se accede a través de la dirección localhost:9910, para el ejemplo que mostramos en este post hemos usado el servidor XAMPP.
Para todo proyecto Webwork para Blackberry 10, necesitaremos un mínimo de 2 archivos:
- config.xml
- index.html
El archivo config.xml, contiene la descripción de nuestra app y la lista de permisos que necesitara nuestra app, para poder acceder a servicios web, al hardware y la API de Blackberry.
El archivo índex.html es el archivo principal de nuestra aplicación, el cual contendrá la interfaz principal de nuestra aplicación, nuestro proyecto puede contener muchas mas paginas web, pero esta es obligatoria.
Ahora debemos analizar un archivo config.xml básico, en una publicación posterior profundizaremos mas en las etiquetas de este archivo XML, en la imagen siguiente vemos el que archivo config.xml que estamos usando.
La linea 1, declara que el archivo que estamos usando usara la codificación UTF-8, y la versión de XML que estamos empleando.
Recordemos con un XML describe una estructura jerárquica de etiquetas que pueden contener atributos, la etiqueta de nivel superior de nuestro archivo es la etiqueta WIDGET, la cual contiene los atributos:
- xmlns, Este atributo describe el espacio de nombre de nuestro widget, su valor queda tal y como lo vemos
- xmlns:rim, Este atributo describe el espacio de nombre de RIM, el anterior es del W3, por lo que su valor queda tal y como lo vemos en la imagen
- version, Este atributo re refiere a la versión de nuestra app, el valor de este atributo debe contener, por lo menos tres dígitos de la forma X.X.X para Blackberry 10 y playbook
- id, Este atributo es la identificación de nuestra app y es un valor referente al nombre de nuestra app
Dentro de la etiqueta widget…../widget podemos encontrar las siguientes etiquetas:
– author : Esta etiqueta contiene el nombre del autor de la app, puede contener los atributos
- href que tiene la dirección de la pagina web del autor.
- rim:copyrigth: el texto de los derechos de autor de la app
– name: Esta etiqueta contiene el nombre de la app.
-description: En esta etiqueta colocaremos una breve descripción de la app.
– content: Esta etiqueta es muy importante porque indica cual es el archivo principal de nuestra app, lo que especificamos en el atributo src; el atributo rim:allowInvokeParams indica si nuestra app admitirá parámetros, pero es opcional.
Existen otras etiquetas mas pero esas las veremos mas adelante, ahora veamos el código del archivo índex.html que hemos usado.
Ya con los dos archivos, los colocamos en una carpeta dentro de nuestro servidor y accederemos a ella desde chrome tal y como lo vemos a continuación
Si no aparece de esta forma solo debemos hacer clic en el botón de Ripple que esta al lado de la barra de direcciones y seleccionar el botón ENABLE y seleccionar que usaremos la plataforma de Webwork para Blackberry 10
La interfaz que nos muestra Ripple es muy intuitiva, construida con ventanas flotantes desplegables, en las cuales podemos cambiar la orientación del dispositivo, modificar el acelerometro y disparar eventos.
La ventana de config nos ayudara a diagnosticar nuestro archivo config.XML, marcando en rojo las etiquetas que contienen errores, en la siguiente imagen podemos ver el resumen que nos da Ripple de nuestro config.xml en su ventana de config.
Lo que esta en blanco es porque no lo incluimos en nuestro archivo y lo que esta en verde es porque lo incluimos en nuestro config.xml y esta correcto.
Por el momento dejaremos hasta este punto la app de ejemplo, en un próximo post veremos como complementarla y darle interfaz.
Sistemasumma.com 