Esta vez no os traigo noticias frescas, si no un nuevo tutorial que nace con el ánimo de ayudar a todas aquellas personas que desean iniciarse en la programación con WebOS.
Aclarar que no aspiramos a realizar un curso de programación. Este tutorial pretende ser una guía paso a paso para crear tu propio programa de una manera directa y práctica. Así que nos perdonen los programadores profesionales.
Cualquier persona puede programar “algo” en WebOS. En mi caso, como profesional en el ramo de la ingeniería, puedo decir que la aplicación que más utilizo en mi Palm Pre es mi propia aplicación, y sé que todos vosotros podéis conseguir lo mismo.
Así que si sois de los que desean sacar el máximo partido de vuestro dispositivo, podéis empezar desde ya.
Introducción
Muchas veces utilizamos las hojas de cálculo simplemente para introducir uno o varios valores en las celdas correspondientes y obtener un resultado de alguna operación. Puede ser sumar las celdas, dividir un numero por otro o hacer la operación que nos plazca.
Pues bien, un tipo de programa muy útil para mí es simplemente eso, poder introducir una serie de parámetros de una fórmula y darme un resultado. Esto con WebOS es bastante fácil; y muchísimo más rápido, personalizable y bonito que una hoja de cálculo de Excel. Por supuesto que a partir de aquí podremos ir más allá. Todo depende de vosotros, de la respuesta que tenga la iniciativa y de la ayuda que reciba de otros usuarios.
Instalación
Ares es el entorno de programación que vamos a utilizar. Ares no es un programa que se instale en nuestro ordenador, se ejecuta en el navegador de Internet que debe ser Firefox 3.5, Chrome 3.4 o Safari 4.0.
Si ya tienes el navegador de Internet, para que Ares funcione, sólo deberás instalar Java. Aquí tienes el link ( Instalar Java.)
Otro componente que vamos a necesitar para poder probar nuestras aplicaciones es el SDK de Palm que incluye un emulador de Palm WebOS.
Para instalarlo debes seguir estos dos pasos:
Descargar y instalar VirtualBox de Sun.
Descargar y instalar el propio SDK de Palm. Os dejo el link del Palm WebOs 1.4 para Windows 32 bits y para la versión de Windows 64 bits. Cuando instaléis el emulador aseguraos de que no tenéis VirtualBox en ejecución.
Una vez instalado todo ejecutáis el Palm Emulator y después de elegir la pantalla en la que queremos trabajar (320×480 en el caso del Pre) tendréis tras el arranque del sistema una ventana como esta. Ya teneis un Pre en vuestro ordenador.
Entorno Ares
Para trabajar con Ares primero debéis registraros como miembro de la comunidad de Palm. Es tan sencillo como rellenar este pequeño formulario.
Con vuestro nombre de usuario y contraseña ya podéis entrar en Ares desde el navegador en esta dirección http://ares.palm.com/Ares/login.html
Tras la carga tendréis el entorno Ares para empezar a trabajar:
Crear una nueva aplicación
Supongamos que somos vendedores de depósitos de agua a medida, por decir algo. Pues vamos a hacer una aplicación que en función de las medidas del depósito nos calculará los litros de capacidad.
En el menu que veis arriba a la izquierda pulsáis en New -> Application , y le dais un nombre a vuestra aplicación como por ejemplo “Ejemplo1″.
Inmediatamente Ares cambia de aspecto y tendreis esta pantalla:
Aquí habría mucho por explicar pero la orientación del turorial es centrarnos en un ejemplo, el resto lo descubriremos sobre la marcha.
La zona central en blanco representa la pantalla del dispositivo . En esta zona es donde vamos a poner los elementos que compondrán nuestra primera pantalla o “escena” . Un programa puede tener una sola escena o muchas, como nosotros queramos.
Todos los elementos que veis a la izquierda (debajo de “UI Widgets”) son los elementos que podemos utilizar para nuestra escena. Estos elementos se llaman Widgets y pueden ser un texto, una imagen, una lista de cosas, una cabecera de título, etc…cada uno tiene una función específica y seguro que muchas las habeis visto en las aplicaciones que ya tenies en vuestro dispositivo.
Al colocar cada elemento en nuestra escena Ares le asignará un nombre automáticamente. Este nombre tambien podemos definirlo nosotros mismos y es una característica muy importante de cada elemento ya que nos servirá para referirnos a él dentro de una instrucción. Esto lo vamos a ver en detalle más adelante.
Ahora estamos trabajando con una escena que Ares nos ha creado por defecto y que se llama “main”. Encima de la pantalla tenemos el nombre completo del fichero que contiene los datos de las escena “ejemplo1/app/views/main-chrome.js”.
Introduciendo elementos en la escena
1.Vamos a empezar por poner una cabecera a la escena.
Simplemente situar el raton sobre el icono “header” y arrastrar hasta dentro del area en blanco. Una vez puesta la cabecera, la seleccionamos y nos fijamos en la parte derecha de la pantalla. Allí se encuentran siempre todas las características que podemos manipular de un elemento o Widget. En nuestro caso iremos al campo “label” y escribiremos “Cálculo de depósitos”.
Ya tenemos puesto el título en nuestra cabecera. ¿Fácil no?
2. Vamos a crear un grupo de 3 campos de texto que nos servirán para introducir los valores del ancho, largo y alto del depósito. Lo de agruparlos es un “grupo” es puramente estético pero ayuda a la hora de identificar elementos en la pantalla.
Situar el raton sobre el elemento “Group” que tenéis abajo a la izquierda (en la zona titulada Layout) y arrastrar el elemento dentro de nuestra escena.
Ya tenemos un grupo. Ahora lo estiraremos por debajo para tener suficiente espacio para introducir los datos. Igual que en la cabecera podemos cambiar el valor de la etiqueta o “label” por alguna frase como “Introducir datos”. El resultado será este:
3. Ahora vamos a crear tres celdas para más tarde introducir los campos de texto en cada una de ellas. El widget “celda” lo teneis al lado del widget “grupo”.
Lo de siempre..arrastrar y colocar, pero ojo, colocar la celda dentro del grupo.Una celda debajo de la otra, com veis aquí:
Aunque de momento las celdas son invisibles, cuando las seleccionas están ahí, no os preocupéis.
Antes de seguir deberíamos indicar a Ares un detalle para mejorar el aspecto de nuestra escena. Seleccionamos la primera celda y en “settings!” cambiamos “rowType” por “first”. Y activamos la opción “isTextField”. Lo teneis todo en la columna de la derecha.
Para la segunda celda hacemos lo mismo, pero en “rowType” ponemos “middle”. Y para la tercera y última celda ponemos “last”. Esto crea lineas divisiorias entre celdas.
4. Ahora vamos a colocar una etiqueta de texto en cada celda. Para ello antes debemos decirle a Ares que dentro de las celdas queremos los elementos distribuidos horizontalmente. Seleccionar un panel horizontal o “HBox Panel” y arrastrarlo dentro de la primera celda.
Ahora seleccionamos una widget del tipo “label” y lo arrastramos dentro de la primera celda.
Seguidamente le cambiaremos la etiqueta “label” por “Ancho”.
Luego para que el texto nos quede centrado seleccionamos la pestalla de arriba a la derecha donde pone “styles” y activaremos la opcion “OneLine” para la etiqueta.
Debería quedar así:
Por ultimo volvemos a la pestaña “settings” y ajustamos el ancho “width” de la etiqueta al 50%.
5. Ahora vamos a crear el campo de texto que servirá para que el usuario introduzca el ancho del depósito que quiera calcular.
Seleccionamos el widget “text field”:
Lo arrastramos dentro de la primera celda, a lado de la etiqueta “ancho”. Le cambiamos la anchura a 50%. Y importantísimo, le cambiamos la propiedad “name” o nombre y le ponemos “ancho”.
Como ya he dicho antes, lo que ponemos en la propiedad “name” es lo que va a identificar este campo de ahora en adelante. Así que es importante poner un nombre que claramente identifique lo que queremos.
Otras propiedades que deberemos cambiar en nuestro caso las encontramos en la pestaña “settings” pero mucho más abajo.
Cambiaremos el “modifierState” a “num-lock” para que automáticamente se active la introducción de números en vez de letras cuando pulsemos sobre el campo.
Borramos el hintText y activamos “enterSubmits” para indicar que es un campo de texto que permite la introducción de valores para su uso posterior.
Bien, ahora deberíamos repetir los pasos 4 i 5 para cada uno de los parámetros del depósito, es decir, en la segunda celda ponemos “largo”, y en la tercera ponemos “alto”.
A llegado la hora de grabar nuestro trabajo (no sea que perdamos lo que tenemos hasta ahora). Pulsar sobre los disquetes, no os olvidéis de hacer esto antes de cerrar una sesión con Ares.
Nuestra aplicación de momento debería tener este aspecto en el entorno Ares:
Para ver en forma de árbol todo lo que hemos construido podemos pulsar en la pestaña “View” que tenemos arriba a la izquierda. Deberíamos ver una estructura como la siguiente:
Previsualización de la aplicación
Antes de acabar este capítulo. ¿Qué os parece si vemos en nuestro Pre o en el simulador como está quedando nuestra aplicación?. Para ello simplemente ejecutar el emulador, esperar a que aparezca el precioso escritorio de Webos en la ventana de Windows y en Ares pulsar la flecha azul parecida al símbolo “play” de un reproductor.
Si no podéis aguantar a verlo en el Pre lo que debéis hacer es algo un poco más complicado, pero nada del otro mundo.
Primero poner el Pre en modo desarrollador, conectarlo al ordenador via USB y en modo “solo carga”, y seguidamente pulsar sobre “play” en Ares. Unos segunditos y vuestro programa estará en vuestro Pre con un icono de una luna que el entorno Ares nos pone por defecto. Y muy importante, no olvidéis seguidamente desactivar el modo desarrollador para evitar que cualquiera pueda acceder a vuestro Pre.
Bueno hasta aquí el tutorial de hoy pero no os preocupéis que habrá segunda parte, donde explicaremos como hacer un botón que recoja los valores introducidos os visualice el resultado del volumen del depósito. Y de paso le pondremos alguna imagen y todo.
Espero que os haya gustado y por supuesto también espero vuestros comentarios, críticas y sugerencias.
Perdonad los posibles errores y hasta el siguiente tutorial!
