WebOSMania!

Hola a todos de nuevo. Bien, tal como os prometimos vamos a acabar la aplicación que empezamos en el primer tutorial y como siempre, vamos a intentar que sea práctico, rápido y fácil de entender.

Primero debéis volver a entrar en el entorno Ares tal como ya explicamos en el primer capítulo. Normalmente se visualiza automáticamente el último fichero que estábamos editando, así que en principio debería estar viendo nuestra escena “main” de la aplicación “Cálculo de Depósitos” en pantalla, pero por si acaso os explico como encontrarla y de paso aprendemos un poco más sobre Ares.

Pulsamos sobre la pestaña “Files” y se nos abrirá la estructura de carpetas donde Ares guarda nuestros ficheros. Cada carpeta es una aplicación, y cada aplicación tiene a su vez una serie de carpetas y ficheros. Algunas son imprescindibles y están creadas por el propio Ares, otros están creadas por el propio usuario y son propias de una aplicación en concreto.

En nuestro caso la escena de nuestro trabajo se encuentra en “Applications/ejemplo1/app/views/main” y el nombre del fichero que utiliza Ares para dicha escena es”main-chrome.js”.
Por tanto, abrimos el árbol de carpetas y hacemos doble-click sobre el fichero “main-chrome.js” para abrir nuestra escena.

Introducción de más  elementos

Vamos a introducir en la escena los elementos que nos faltan para acabar nuestra aplicación.

Primero creamos un campo de texto que servirá para visualizar el resultado de nuestro cálculo, o sea el volumen del depósito.

Arrastramos el campo de texto justo debajo del grupo de celdas que creamos en el primer tutorial.

Cambiamos la propiedad”nombre” de éste elemento y le ponemos “resultado”.

En esta misma pestaña de “settings” le borramos el “hintext” que teneís en la parte inferior.

Un apunte importante, esta vez NO activaremos la casilla “enterSubmits” ya que en éste campo no vamos a introducir valores manualmente si no que simplemente vamos a visualizar el valor de una operación. Además vamos a activar la casilla “disabled” que tambien se encuentra en la sección”General”, ya que de esta manera aunque pulsemos sobre el campo de texto no permitirá editarlo, cosa que no tendría sentido trantándose del resultado.

Para realzar este campo vamos a darle un tamaño de letra más grande. Pulsamos en la pestaña Styles y cambiamos el tamaño de letra a 40 pixeles.

Por último vamos a crear el botón que pondrá en marcha el cálculo.

Seleccionamos el “widget Button” que tenemos en la paleta de widgets de la izquierda.

Y como siempre lo arrastramos dentro de nuestra escena. Cambiaremos algunos valores de la pestaña “settings”: le cambiamos el nombre por “Calcular”, y también podemos cambiar la etiqueta por “Calcular”, el ancho al 50% y la alineación horizontal en el centro.

No confundir la etiqueta con el nombre del elemento. La etiqueta es lo que vamos a ver escrito en el botón, el nombre, como ya dije en el primer tutorial es lo que identifica al elemento en la programación.

Bien, llevamos ya un tutorial y medio y de momento no hemos escrito ni una sola línea de código en nuestra aplicación. Es lo bueno de Ares, que permite introducir los elementos de una manera visual. De otra manera para generar lo que hemos hecho hasta el momento necesitaríamos hacerlo todo en HTML.

Una cosa importante y que debemos tener siempre presente es que  una escena de WebOS se compone de dos partes: la vista de la escena y el asistente de la escena.

Hasta ahora hemos trabajado en la vista, la cual contiene los elementos que  veremos en la pantalla. Ahora, casi sin darnos cuenta, vamos a trabajar en el asistente.

Aquí es donde vamos a decirle a WebOS qué queremos hacer con los elementos que hemos puesto y lo vamos a hacer en Javascript. No os asustéis porque lo voy a explicar de una manera fácil, directa y centrada en nuestro ejemplo, como hasta ahora.

Con el botón “calcular” seleccionado nos vamos a la pestaña “Events”. Aquí tenemos una lista de eventos sobre los que podemos actuar. Es decir, aquí es donde decimos qué vamos a hacer si el usuario pulsa este botón ,o deja de pulsarlo. (Otros elementos pueden tener eventos diferentes. Pensad en la cantidad de cosa que hemos puesto, cabecera, grupo, celdas, campos de texto…pues para cada uno de esto elementos podemos definir  que pasará si el usuario actúa sobre ellos).

Volviendo a nuestro botón, pulsamos sobre el icono de edición a la derecha del evento “ontap”.

Inmediatamente nos aparece una pantalla que contiene el código del asistente de nuestra escena.

Ya estamos trabajando en el asistente, que en este caso, tal como veréis en la parte superior  es el fichero “ejemplo1/app/assistants/main-assistant.js”.

Este es el editor de textos de Ares y  en él podemos escribir, copiar y pegar, con las teclas CTRL+C y CTRL+V respectivamente.

Ares nos a creado automáticamente una parte del código necesario para el funcionamiento de la aplicación, y tambien a creado una entrada para la función”CalcularTap”. Situados en la línea justo debajo de la línea “CalcularTap: function(event, inSender) {” debeis copiar el siguiente código:

CalcularTap: function(inSender, event) {

var vancho = this.$.ancho.getValue(); // el valor de vancho son solo letras

var A = Number(vancho) || 0; // convierte vancho en un valor numérico (o en 0 si no puede)

var vlargo = this.$.largo.getValue(); //hacemos lo mismo para el largo

var B = Number(vlargo) || 0;

var valto = this.$.alto.getValue(); //hacemos lo mismo para el largo

var C = Number(valto) || 0;

var vresultado = A*B*C*1000.toFixed(2); // Aquí entramos nuestra fórmula

this.$.resultado.setValue(vresultado); // Mostramos el rsultado en el campo resultado

}

Os he puesto en rojo lo que debeis escribir y en verde lo que ya tenemos escrito por Ares.

Os explicaré brevemente el código:

Lo que hacemos es crear 3 variables (vancho,vlargo y valto) que se encargan de recoger el valor de los campos de texto de nuestras escena. Aquellos que en el primer capítulo creamos con los nombres ancho, largo y alto. Esto se consigue con “getvalue”.

Luego creamos otras 3 variables (A,B y C) que simplemente sirben para convertir el valor de vancho, vlargo y valto en un valor numérico.

También creamos una variable a la que llamamos “vresultado” en la que vamos a escribir la operación que queremos realizar. En este caso multiplicamos A*B*C para obtener los m3 del depósito y multiplicamos por 1000 para pasar el volumen a litros.

Por último hacemos el proceso inverso del que hemos hecho con “getvalue”. Ahora  cogeremos un valor de una variable del asistente y lo visualizaremos en la escena. Es lo que hacemos en la última línea donde asignamos el valor  de “vresultado” al campo de texto “resultado” utilizando la instrucción “setvalue”.

Insertando imágenes

Antes de acabar que os parece si ponemos algún gráfico para dar algo más de color al asunto. Os dejo aquí esta imagen que nos puede ir bien para el ejemplo. La podeís descargar a vuestro escritorio para vuestro uso.

Para utilizar una imagen en Ares antes debemos subirla al entorno de Ares en la carpeta “images” de la aplicación en la que estamos trabajando.

Para ello vamos a la pestaña Files y seleccionamos la carpeta “images”. Ahora, desde el el escritorio de Windows arrastramos la imagen que queremos subir dentro del recuadro que tenemos abajo a la izquierda. Donde pone “Drop local files below to upload”.

Una vez acabe el proceso de subir la imagen vamos a insertarla en nuestra escena. Pulsamos sobre la pestaña “Palette” y seleccionamos el widget Picture. Arrastramos el widget justo entre la cabecera y el grupo que creamos de introducción de datos.

Con este “Picture” o  cuadro de imagen seleccionado vamos a las propiedades que tenemos en la derecha, y en la pestaña Settings cambiamos el “horizontalAlign” a “Center”. Luego pulsamos sobre el icono de la lupa que tenemos en el campo “src” y veremos las imágenes de las que disponemos, entre las cuales debería haber la que acabamos de subir. La seleccionamos y pulsamos OK.

Ya tenemos la imagen en la escena. Solo nos queda redimensionarla a nuestro gusto y el resultado debería ser más o menos éste.

Finalización de la aplicación

Como siempre quedan algunos detalles por pulir. Uno que os recomiendo seria cambiar el color de las celdas donde entramos los valores. Es un detalle estético pero ayuda mucho a distinguirlos. Para ello seleccionar uno de los  campos de texto que tenemos creados, por ejemplo el de nombre “ancho”. En la pestaña “style” vamos al apartado “background” y en “bgcolor” ponemos “#FFFFFF”. Éste es el valor sexagesimal para el color blanco. Tambien os recomiendo que en la pestaña Settings pongáis  la altura del campo  o “height” en “80%” y la alineación vertical o “verticalAlign” en “center”.

Hacemos los mismos pasos para los campos de texto “largo” y “alto”.

Bien nuestra aplicación está acabada. Acordaos de grabar todos los cambios y ya sabéis como ejecutarla en el emulador y en el Pre.

Con esta aplicación como modelo podéis calcular cualquier cosa. En Javascript tenemos disponibles un montón de operadores y funciones matemáticas que podéis utilizar. Sólo debéis sustituir la fórmula de la variable resultado.  Os dejo un par de links donde hay un buen resumen de estas funciones:

http://w3schools.com/js/js_operators.asp

http://www.w3schools.com/php/php_ref_math.asp

Como ya os debéis imaginar  aprendiendo algo de Javascript podéis hacer  cosas mucho más avanzadas. Para aprender Javascript hay mucha y muy buena información en la red.

Un buen (y sencillo) manual para aprender JavaScript podéis encontrarlo aquí:

http://www.librosweb.es/javascript/pdf/

Bien, pues hasta aquí hemos llegado con este tutorial. Gracias por el interés y sobre espero que haya sido útil para muchos de los lectores de WebosMania!

Sólo me queda informaros de que queda abierto este hilo en los foros para  cualquier comentario relacionado con el tema. Os animo a que practiquéis por vuestra cuenta y nos expliquéis vuestros proyectos en él.

Saludos y hasta pronto.