Toma de decisiones y el Si-ElseUna aplicación es un conjunto de controladores de eventos. Cuando ocurre un evento, realice algunas instrucciones (bloques). Sin embargo, dentro de esos eventos manipuladores, la aplicación y pregunta si las preguntas y realizar diferentes instrucciones basadas en las respuestas. Dichos bloques condicionales forman la base de la inteligencia de una aplicación.

Muestra: Alternar entre los candidatos presidenciales

Presidente Obama aparece cuando comienza la aplicaciones, pero cada vez que haga clic en la imagen que va y viene entre Obama y Mitt Romney

La imagen aparece en un componente Button. La propiedad Button.Image especifica el archivo de imagen que aparece en el botón.

El evento es el botón de clic. Cuando se hace clic en el botón, pida que aparece

la imagen. Si se trata de Obama, mostrar Romney, de lo contrario si se trataba de Romney, muestran Obama.

Un bloque de referencia (la luz 'Button1.Image' azul) se utiliza para ver lo que la imagen existente es, mientras que un bloque conjunto (el bloque azul más oscuro 'set Button1.Image') se usa para cambiar la imagen que aparezca. En general, si las pruebas utilizarán bloques de referencia para comprobar el estado actual de la aplicación.

Muestra: elegir al azar una imagen

Como segundo caso-ejemplo, vamos a cambiar la aplicación para que escoge al azar una de las dos imágenes (cada vez que el usuario hace clic, puede mostrar Obama, podría mostrar Romney). Tal comportamiento aleatorio es parte de muchos juegos.

En la carpeta Math, hay un número entero aleatorio bloque. Se puede establecer un rango para el valor que genera.

Nos agarramos un número aleatorio con un rango de 1 a 2. Si se genera 1 (50% de probabilidad), mostraremos Obama, de lo contrario vamos a mostrar Romney.

1. Creando el proyecto.Entramos en appinventor.mit.edu (página web del proyecto) y pulsamos sobre invent. Una vez ingresemos con nuestra cuenta de Google, pulsamos el botón New e insertamos un nombre para nuestro proyecto.

Y así luce la pantalla de edición de proyectos. En el centro tendremos la pantalla principal de nuestra aplicación Android. A la izquierda tenemos todos los componentes que podemos utilizar. Por último, a la derecha tenemos dos columnas: Una lista con todos los componentes que hemos añadido y las propiedades editables del componente seleccionado.

Para añadir un componente basta con seleccionarlo en la lista de la izquierda y arrastrarlo con el ratón hasta el lugar que nos interese. Para este ejemplo vamos a empezar añadiendo dos componentes: Una etiqueta (label) y una tabla (TableArrangement).

La etiqueta la usaremos como la pantalla digital de nuestra calculadora. Es decir, siempre que pulsemos una cifra, este "label" se irá actualizando. Además nos mostrará el resultado de la operación cada vez que pulsemos la tecla "=" o que concatenemos con otras operaciones.

Por ello, seleccionaremos el componente y editaremos la propiedad "text" para que su valor inicial sea "0". Además seleccionaremos el valor "Fill parent" dentro del campo "width". De esta forma este "label" ocupara toda la anchura de la pantalla.

Por su parte, el TableArrangement lo emplearemos para contener todos los

botones de la calculadora. Para poder realizar tal acción, definiremos 4 columnas (propiedad "columns") y 4 filas (propiedad "rows").

A continuación llenaremos cada celda de la tabla con un botón nuevo.

El tamaño del texto de los botones no nos permite rellenar correctamente la tabla. Será necesario cambiar su texto (propiedad "text") para poder rellenar la última columna.

Por último, añadidmos un botón más debajo de la tabla, cambiándole la propiedad "text" por "=" y asignándole "fill parent" en el campo "width". Con ello ya tendremos la interfaz gráfica básica de una calculadora.

Antes de pasar a la parte lógica de la aplicación, seleccionaremos todos los campos y haremos uso del botón "rename" para asignarles un nombre más acorde con su funcionalidad. Esto nos permitirá programar de forma más cómoda.

Para editar la parte lógica debemos hacer clic en el botón "Open the Blocks Editor".

Este botón básicamente nos hace descargar una aplicación Java, por lo que es muy probable que tu navegador web te avise de ello:

Si tienes instalado Java 6 (o superior), no deberías de tener ningún problema para poder ejecutar la aplicación. Seguramente podrás arrancarla con hacer doble clic sobre ella. La aplicación te dará un error, debido a que nos hemos saltado el paso de configuración de drivers o la instalación del emulador de terminales Android. De todas formas no te preocupes, ese paso no es realmente necesario para poder montar tu aplicación.

Y esta es la interfaz gráfica del editor de bloques. Arriba tienes una barra con las opciones de la aplicación. A la izquierda una barra con las listas de acciones y de componentes y por último en la esquina abajo-derecha tienes una papelera para borrar piezas.

Si haces clic en "My Blocks" verás que salen listados todos los componentes que hemos añadido en la web del proyecto. Esta lista se genera de forma dinámica, si añades nuevos componentes o los borras en la web, aquí se irán actualizando:

Para demostrar su funcionamiento básico, en Button0 arrastraremos al panel principal la pieza "When Butto0.Click". Acto seguido seleccionaremos el componente LabelResultado (o como hayas llamado al "label") y le pegaremos la pieza "Set LabelResultado.Text to".

Nos interesa que cada vez que pulsemos un cero, este se añada a la pantalla digital de nuestra calculadora. Así que iremos a la pestaña "Built-in" y haciendo uso del componente Text iremos añadiendo las piezas "Join" y "Text".

Básicamente, acabamos de crear una función que significa lo siguiente: "Cuando pulsemos el botón 0, se añadirá 0 al final del texto". Si hiciéramos lo mismo para todos los botones numéricos (no lo hagáis), nos quedaría algo así:

No obstante siguiendo este funcionamiento habría que pensar que siempre que haya un 0 en pantalla, siempre que pulsemos un dígito acabaremos teniendo ese dichoso 0 a la izquierda, algo que no pasa con las calculadoras. Si nos fijamos, cuando en la pantalla digital aparece cero y pulsas otro dígito, la pantalla pasa a tener únicamente ese nuevo dígito.

Si tuviéramos que tener en cuenta eso una vez hubiéramos creado todas las acciones de botones, gastaríamos un tiempo tonto en actualizarlos uno a uno:

Así que lo más simple es hacer un proceso (bautizado como "addNumber"), que reciba como parámetro el número del botón. Este proceso analizará si ya existe un cero, para saber si machaca el valor de la pantalla digital o lo concatena a la derecha:

Esto ya parece más "actualizable" y mantenible:

Ahora pensemos detenidamente en el funcionamiento de una calculadora. Cada vez que pulsas un botón "+" o cualquier otra operación, se reinicia la pantalla para poder escribir un nuevo parámetro. Por lo tanto, nos hace falta saber dos cosas que habrá que recordar una vez hagamos la tecla "igual":

1. Cuál es el número anterior al que hay en la pantalla para poder operar.

2. Qué operación hay que realizar.

De esta forma, haciendo uso de la pestaña "Built-in", crearemos dos nuevas variables:

Ahora, haciendo uso de estas variables y de cómo realizar un proceso (visto antes sobre los botones numéricos), pensemos en el funcionamiento de una operación: Necesitamos saber el número que hay en la pantalla. Necesitamos saber la operación a realizar. Por ejemplo, si es una suma, sumaremos el texto de la pantalla con la variable "LastResult" (el número que había antes de pulsar +). Una vez sumado, actualizamos la pantalla con el resultado:

Y así quedaría una vez añadamos la resta, el producto y la división:

Y así quedarían los botones de operaciones:

Ahora tengamos en cuenta otra cosa. Cuando obtenemos un resultado, este se imprime en pantalla. No obstante, ese valor no se conversa cuando volvamos a pulsar un botón numérico. Es decir, si en pantalla me aparece como resultado el número 128 y quiero hacer ahora otra operación... pues si por ejemplo pulso la tecla "2" quiero ver en pantalla sólo un "2" y no un "1282". Así que nos hace falta almacenar una nueva variable, una que nos permita saber cuando se debe reinicia la pantalla cuando pulsemos un dígito:

Básicamente, cada botón numérico haría uso de este comportamiento:

Y habría que ponerlo del proceso "addNumber":

Por su parte, habría que hacer un "ClearScreen = true" al final  de la función de cálculo de operaciones:

Ahora vayamos con las teclas especiales: el botón "coma" para añadir decimales y el botón "C" para resetear la pantalla. En este caso, para hacer uso de decimales tendremos que añadir un punto "." al "label" de resultados. No obstante hay que tener en cuenta una cosa: Cuando añadas un "." para decimales, debes verificar que no exista ya más de uno en dicho label:

Por su parte, el botón "C" deber realizar un reinicio de todas las variables y actualizar el label de resultados con valor "0":

Con ello ya disponemos de una aplicación plénamente funcional. Guardaremos los cambios haciendo uso de "Save" (necesario para sincronizar los datos con el servidor). Una vez sincronizado, el botón pasará a llamarse "Saved" y será deshabilitado por la aplicación:

Una vez realizado el guardado, en la web del proyecto seleccionaremos el desplegable "Package for Phone" y seleccionaremos "Download to this Computer":

Esto hará que el servidor pase a compilar nuestra aplicación y como

resultado, tras casi un minuto de cálculos, nos suministrará un archivo "apk" a ejecutar en nuestro dispositivo móvil. Para poder habilitar la instalación de software casero en tu dispositivo Android, deberás de ir a "Ajustes> Aplicaciones" y activar la opción de "Orígnenes desconocidos".

Puedes suministrar el fichero "apk" vía conexión USB o a través de alguna memoria externa. Sea como fuere, necesitarás disponer de algún navegador de archivos para poder localizar el instalable.

Seleccionándolo se te abrirá un sencillo menú de instalación:

Ahora mismo disponemos de una calculadora plénamente funcional:

Aún así hay que reconocer que nos ha quedado bastante fea, pero esto se puede corregir con dos sencillos puntos:

1. Cambiar los colores de los componentes.

2. Cambiar el tamaño de estos dependiendo del de la pantalla del dispositivo.

El primer paso no es muy complicado de hacer:

Para la parte del redimensionado, necesitaremos almacenar varias variables: La anchura de los botones, la altura de estos y el número de píxeles a dejar entre cada botón:

También nos resultaría útil conocer el número de columnas y de filas que va a tener nuestra pantalla. Sí, he dicho pantalla, no tabla. Si tenemos en cuenta el label de operaciones y el botón de resultado, estamos hablando de que tenemos 6 filas:

Este proceso podría sernos útil para cambiar la anchura de un botón:

No obstante podemos renombrar la función y hacer que no sólo cambie la anchura de un botón, si no también su altura:

Ahora pensemos en una serie de puntos:

1. La anchura de todos los botones debe de ser "anchura total de la pantalla" dividido por el número de columnas que hemos definido.

2. La altura de todos los botones debe de ser "altura total de la pantalla" dividido por el número de filas que hemos definido.

3. Esta redimensión de componentes sólo debe de aplicarse cuando la aplicación arranque, así que realizaremos todos los cálculos sobre el componente "Screen1", haciendo uso de su función "When Screen1.Initialize".

4. El único botón que no se verá afectado es el botón "igual".

El resultado sería el siguiente:

También sería interesante que el label de resultados tuviera la misma altura que los botones:

También nos interesa que el texto del label no se quede pequeño. Crearemos una variable global llamada "FontSize" y le aplicaremos un valor por defecto. Dentro de la función "When Screen1.Initialize" recalcularemos su valor, siendo 2/3 la altura de un botón. Al final de la función actualizaremos el tamaño de la fuente del label con el valor de dicha variable.

El resultado final de nuestro esquema sería el siguiente:

Para finalizar quedaría bien que elaboráramos un icono para nuestra aplicación. En este caso he dibujado una calculadora:

Acuérdate de redimensionarlo a un tamaño lógico de icono. Por ejemplo, a este le he puesto una anchura de 128 píxeles:

Para subir una imagen a nuestra aplicación debemos dirigirnos a la sección "Media" y seleccionar el botón "Upload new...".

Se nos abrirá un diálogo desplegable donde seleccionaremos el archivo de nuestra computadora a subir En este caso mi imagen "icon.png".

Para asignar nuestra imagen como el icono de la aplicación, seleccionaremos el componente Screen1 y marcaremos el "icon.png" de la lista que nos sale en la propiedad "Icon".

Este icono saldrá reflejado en el menú de instalación y en la lista de aplicaciones de nuestro launcher:

Y así queda mi calculadora con su nueva interfaz:

Y por último, aquí tenemos un vídeo con el resultado final: