Toma de decisiones y el Si-Else

Una aplicacin es un conjunto de controladores de eventos. Cuando

ocurre un evento, realice algunas instrucciones (bloques). Sin
embargo, dentro de esos eventos manipuladores, la aplicacin y
pregunta si las preguntas y realizar diferentes instrucciones basadas
en las respuestas. Dichos bloques condicionales forman la base de la
inteligencia de una aplicacin.

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 botn.
El evento es el botn de clic.
Cuando se hace clic en el botn, 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 ms oscuro 'set Button1.Image') se usa para cambiar la
imagen que aparezca. En general, si las pruebas utilizarn bloques de
referencia para comprobar el estado actual de la aplicacin.

Muestra: elegir al azar una imagen

Como segundo caso-ejemplo, vamos a cambiar la aplicacin para que
escoge al azar una de las dos imgenes (cada vez que el usuario hace
clic, puede mostrar Obama, podra mostrar Romney). Tal
comportamiento aleatorio es parte de muchos juegos.

En la carpeta Math, hay un nmero entero

aleatorio bloque. Se puede establecer un rango
para el valor que genera.
Nos agarramos un nmero 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 (pgina web del proyecto) y pulsamos sobre
invent. Una vez ingresemos con nuestra cuenta de Google, pulsamos el botn New e
insertamos un nombre para nuestro proyecto.

Y as luce la pantalla de edicin de proyectos. En el centro tendremos la pantalla

principal de nuestra aplicacin 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 aadido y las propiedades editables
del componente seleccionado.

Para aadir un componente basta con seleccionarlo en la lista de la izquierda y

arrastrarlo con el ratn hasta el lugar que nos interese. Para este ejemplo vamos a
empezar aadiendo 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. Adems nos
mostrar el resultado de la operacin 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". Adems 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 accin, definiremos 4 columnas (propiedad
"columns") y 4 filas (propiedad "rows").

A continuacin llenaremos cada celda de la tabla con un botn nuevo.

El tamao 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, aadidmos un botn ms debajo de la tabla, cambindole la propiedad

"text" por "=" y asignndole "fill parent" en el campo "width". Con ello ya tendremos
la interfaz grfica bsica de una calculadora.

Antes de pasar a la parte lgica de la aplicacin, seleccionaremos todos los campos y

haremos uso del botn "rename" para asignarles un nombre ms acorde con su
funcionalidad. Esto nos permitir programar de forma ms cmoda.

Para editar la parte lgica debemos hacer clic en el botn "Open the Blocks Editor".

Este botn bsicamente nos hace descargar una aplicacin Java, por lo que es muy
probable que tu navegador web te avise de ello:

Si tienes instalado Java 6 (o superior), no deberas de tener ningn problema para

poder ejecutar la aplicacin. Seguramente podrs arrancarla con hacer doble clic
sobre ella. La aplicacin te dar un error, debido a que nos hemos saltado el paso de
configuracin de drivers o la instalacin del emulador de terminales Android. De
todas formas no te preocupes, ese paso no es realmente necesario para poder
montar
tu
aplicacin.
Y esta es la interfaz grfica del editor de bloques. Arriba tienes una barra con las
opciones de la aplicacin. 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" vers que salen listados todos los componentes que
hemos aadido en la web del proyecto. Esta lista se genera de forma dinmica, si
aades nuevos componentes o los borras en la web, aqu se irn actualizando:

Para demostrar su funcionamiento bsico, 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 aada a la pantalla digital
de nuestra calculadora. As que iremos a la pestaa "Built-in" y haciendo uso del
componente Text iremos aadiendo las piezas "Join" y "Text".

Bsicamente, acabamos de crear una funcin que significa lo siguiente: "Cuando

pulsemos el botn 0, se aadir 0 al final del texto". Si hiciramos lo mismo para
todos los botones numricos (no lo hagis), nos quedara algo as:

No obstante siguiendo este funcionamiento habra que pensar que siempre que haya
un 0 en pantalla, siempre que pulsemos un dgito 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 dgito, la pantalla pasa a tener
nicamente ese nuevo dgito.

Si tuviramos que tener en cuenta eso una vez hubiramos creado todas las acciones
de botones, gastaramos un tiempo tonto en actualizarlos uno a uno:

As que lo ms simple es hacer un proceso (bautizado como "addNumber"), que

reciba como parmetro el nmero del botn. 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 ms "actualizable" y mantenible:

Ahora pensemos detenidamente en el funcionamiento de una calculadora. Cada vez

que pulsas un botn "+" o cualquier otra operacin, se reinicia la pantalla para poder
escribir un nuevo parmetro. Por lo tanto, nos hace falta saber dos cosas que habr
que recordar una vez hagamos la tecla "igual":
1.

Cul es el nmero anterior al que hay en la pantalla para poder operar.

2.

Qu operacin hay que realizar.

De esta forma, haciendo uso de la pestaa "Built-in", crearemos dos nuevas

variables:

Ahora, haciendo uso de estas variables y de cmo realizar un proceso (visto antes
sobre los botones numricos), pensemos en el funcionamiento de una operacin:
Necesitamos saber el nmero que hay en la pantalla.
Necesitamos saber la operacin a realizar.
Por ejemplo, si es una suma, sumaremos el texto de la pantalla con la
variable "LastResult" (el nmero que haba antes de pulsar +).
Una vez sumado, actualizamos la pantalla con el resultado:

Y as quedara una vez aadamos la resta, el producto y la divisin:

Y as quedaran 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 botn numrico. Es decir, si en pantalla me aparece como resultado el
nmero 128 y quiero hacer ahora otra operacin... pues si por ejemplo pulso la tecla
"2" quiero ver en pantalla slo 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 dgito:

Bsicamente, cada botn numrico hara uso de este comportamiento:

Y habra que ponerlo del proceso "addNumber":

Por su parte, habra que hacer un "ClearScreen = true" al final de la funcin de

clculo de operaciones:

Ahora vayamos con las teclas especiales: el botn "coma" para aadir decimales y el
botn "C" para resetear la pantalla. En este caso, para hacer uso de decimales
tendremos que aadir un punto "." al "label" de resultados. No obstante hay que
tener en cuenta una cosa: Cuando aadas un "." para decimales, debes verificar que
no exista ya ms de uno en dicho label:

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

Con ello ya disponemos de una aplicacin plnamente funcional. Guardaremos los

cambios haciendo uso de "Save" (necesario para sincronizar los datos con el
servidor). Una vez sincronizado, el botn pasar a llamarse "Saved" y ser
deshabilitado por la aplicacin:

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 aplicacin y como resultado, tras
casi un minuto de clculos, nos suministrar un archivo "apk" a ejecutar en nuestro
dispositivo mvil. Para poder habilitar la instalacin de software casero en tu
dispositivo Android, debers de ir a "Ajustes> Aplicaciones" y activar la opcin de
"Orgnenes desconocidos".

Puedes suministrar el fichero "apk" va conexin USB o a travs de alguna memoria

externa. Sea como fuere, necesitars disponer de algn navegador de archivos para
poder localizar el instalable.

Seleccionndolo se te abrir un sencillo men de instalacin:

Ahora mismo disponemos de una calculadora plnamente funcional:

An 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 tamao 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 nmero de pxeles a dejar entre cada
botn:

Tambin nos resultara til conocer el nmero 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 botn de resultado, estamos hablando de que tenemos 6 filas:

Este proceso podra sernos til para cambiar la anchura de un botn:

No obstante podemos renombrar la funcin y hacer que no slo cambie la anchura de

un botn, si no tambin 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 nmero de columnas que hemos definido.
2.
La altura de todos los botones debe de ser "altura total de la pantalla"
dividido por el nmero de filas que hemos definido.
3.
Esta redimensin de componentes slo debe de aplicarse cuando la aplicacin
arranque, as que realizaremos todos los clculos sobre el componente "Screen1",
haciendo uso de su funcin "When Screen1.Initialize".
4.

El nico botn que no se ver afectado es el botn "igual".

El resultado sera el siguiente:

Tambin sera interesante que el label de resultados tuviera la misma altura que los
botones:

Tambin nos interesa que el texto del label no se quede pequeo. Crearemos una
variable global llamada "FontSize" y le aplicaremos un valor por defecto. Dentro de
la funcin "When Screen1.Initialize" recalcularemos su valor, siendo 2/3 la altura de
un botn. Al final de la funcin actualizaremos el tamao de la fuente del label con
el
valor
de
dicha
variable.

El resultado final de nuestro esquema sera el siguiente:

Para finalizar quedara bien que elaborramos un icono para nuestra aplicacin. En
este caso he dibujado una calculadora:

Acurdate de redimensionarlo a un tamao lgico de icono. Por ejemplo, a este le

he puesto una anchura de 128 pxeles:

Para subir una imagen a nuestra aplicacin debemos dirigirnos a la seccin "Media" y
seleccionar el botn "Upload new...".

Se nos abrir un dilogo 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 aplicacin, 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 instalacin y en la lista de aplicaciones de

nuestro launcher:

Y as queda mi calculadora con su nueva interfaz:

Y por ltimo, aqu tenemos un vdeo con el resultado final: