4 Calcular amb AppInventor

Vamos a ver como podemos hacer con AppInventor una sencilla aplicación para Android que nos calcule la velocidad de un objeto indicando el espacio y el tiempo transcurrido.

1. Añadiremos una TablaArrengament para poder tener en la misma fila el texto y la caja para escribir el valor:

Seleccionamos el objeto "TableArrangement" (1) y lo arrastramos hasta la columna de pantalla (2), en la columna de objetos ya visualizamos este objeto (3) y en la columna (4) podemos personalizar sus 5 propiedades como numero de filas y columnas

2. - Dentro de la tabla añadiremos una etiqueta (Label) para visualizar información:

Seleccionamos el objeto Label (Etiqueta) (1) y la arrastran hacia la primera línea de la tabla (2), ahora visualizaremos el nuevo objeto en la columna (3), como propiedades personalizadas escribiremos un texto dentro de la etiqueta (4) y cambiaremos el color de la letra (5)

3. - A continuación añadiremos una caja de texto (textbox) que nos permitirá escribir un valor en nuestro terminal para poder procesar:

Seleccionamos el objeto TextBox y lo arrastramos hasta el lado de la etiqueta que hemos escrito antes (2), veremos un nuevo objeto a la lista (3) y en este caso no modificamos ninguna propiedad de este objeto

4. - Repetir el mismo de los pasos 2 y 3 para añadir una nueva etiqueta y una nueva caja de texto:

Seleccionamos los dos objetos (1) y (2), a continuación los arrastramos a sus posiciones dentro de la tabla (3) y (4). Los nuevos objetos los tendremos en la lista (5) y debemos tener presente la personalización de las propiedades como el color y el texto (6).

5. - Añadiremos el botón que activaremos para el cálculo de la velocidad

Seleccionamos el objeto Button (1) y la arrastramos a la pantalla (2), veremos que ahora lo tenemos situado fuera de la tabla como un nuevo objeto (3) y finalmente personalizaremos el texto que saldrá en el botón (4)

6. - Añadiremos una etiqueta para visualizar el resultado.

Seleccionamos el objeto etiqueta (1) y la arrastramos a la pantalla (2), como este objeto lo haremos invisible, activamos que el visor nos muestre los objetos invisibles (3), veremos el objeto ya añadido a la lista (4) y finalmente personalizaremos las propiedades: borraremos el texto de la etiqueta (5), haremos la etiqueta invisible mientras no tengamos resultado para escribir (6) y haremos que tenga la anchura del objeto (7)

7. - Finalmente personalizaremos la pantalla de la aplicación

Seleccionamos el objeto Screen (pantalla) (1), iremos a la sección de Media (2) y añadiremos una imagen en formato ICO ,JPG o GIF que posteriormente usaremos de icono de la aplicación dentro del móvil (3). Dentro de las propiedades de la pantalla, veremos que tenemos la opción Icon para escoger un icono para visualizar en el móvil.

8. - Una vez configurada la pantalla, necesitaremos programar el código de las acciones a realizar por parte de los objetos diseñados en la aplicación, por eso nos dirigimos al botón " Blocks ".

9. - Desarrollaremos el código de nuestra aplicación, programando la acción de pulsar el botón de "Calcular la velocidad" (Buton1 ")

Seleccionamos dentro de "Blocks" (1) pulsamos sobre "Button1" y se abrirá al lado el listado de elementos programables del botón (2), escogeremos aquella opción referente a pulsar el botón (" Button1.Click ") y la arrastraremos al espacio de trabajo (3)

10. - Asignaremos el valor del cálculo en la etiqueta Label3 que visualizará el resultado:

Como el resultado debemos visualizarlo en la etiqueta3 ("Label3"), escogeremos el evento que consiste en asignar valores a la etiqueta " Label3.Text "(1). A Continuación debemos hacer la operación de dividir el valor entrado como espacio en la caja de textbox1 con el valor de la caja de textbox2. Para ello vamos a " Built in "y localizaremos los elementos de cálculo (" Math "), entre estos escogeremos el de hacer divisiones (2) y la arrastraremos al lado del elemento Label3.text (3). Ahora llenamos los valores del cálculo (5) y (6) que estarán dentro de la propiedad texto de las dos cajas de texto (4).

11. - Finalmente tendremos que hacer visible la etiqueta3 para visualizar el resultado:

Seleccionamos el objeto Label3 y escogemos la propiedad "Set Label3.Visible"y la situamos dentro del block , ahora tendremos que asignar el valor" true "para hacer visible el texto. Clicaremos en la paleta de " Logic "donde encontraremos el valor" true "

12. Estamos ya en condiciones de visualizar cómo funciona la aplicación. para ello ejecuta el emulador y comprueba el funcionamiento.