Usando AppInventor para desarrollar aplicaciones Android

App Inventor era un servicio de Google para crear aplicaciones que podan ejecutarse en telfonos con Android en emuladores (esas aplicaciones se podan "empaquetar", convirtindolas en archivos apk, que son los usados en celulares con Android). Este proyecto fue iniciado en conjunto con el MIT (en donde crearon el lenguaje Scratch, usado por AppInventor). A mediados de septiembre del ao 2011 Google anunci que liberara el cdigo y traspasara la administracin del proyecto al MIT, de modo que en la actualidad est bajo control de ese Instituto.

Comprueba y actualiza tu configuracin Java:

Para empezar debes configurar Java en tu PC. Debes tener la ltima actualizacin de Java, que puedes descargar desde http://www.java.com. Para comprobar la configuracin de Java realiza las dos siguientes pruebas: Visita http://www.java.com/en/download/help/testvm.xml Este sitio har una comprobacin de la versin de Java que tienes instalada. Si no es la ms actual ofrecer actualizarla y adems sugerir desinstalar la anterior. Visita http://beta.appinventor.mit.edu/learn/setup/misc/JWSTest/AppInvJWSTest.html Este sitio comprobar si tienes habilitado Java Web Start y tambin mostrar un botn para que inicies una aplicacin con Java Web Start.

Slo si ambas pruebas funcionan podrs instalar y usar AppInventor en tu PC Descarga e instala AppInventor:
http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe

Ingresa al sitio web de AppInventor:

Para usar AppInventor debes poseer una cuenta en Google. Entonces... Si no tienes una cuenta Google obtn una ahora. Conctate a http://beta.appinventor.mit.edu Ingresa con las credenciales de tu cuenta Google.

Un primer ejemplo - Como ejercicio introductorio desarrollars una aplicacin ultra simple.
Se tratar de un programa que muestre un botn al ejecutarlo. Entonces, cada vez que se pulse ese botn aparecer el saludo Hola en alguno de entre 5 idiomas seleccionados al azar.

Panel de trabajo:
Al conectarte al sitio de AppInventor e ingresar con tus credenciales vers una pgina en que se listan los proyectos que ya tienes. Si no tienes ninguno puedes hacer Clic en MyProjects (arriba) y luego Clic en el botn New , y darle un nombre a tu nuevo proyecto, por ejemplo SALUDO, finalizando con Clic en botn OK .

En la primera, de nombre Palette, se muestran todos los componentes que pueden ser arrastrados hacia la segunda zona, de nombre Viewer, a fin de disear el aspecto visual de la aplicacin. En la tercera zona, de nombre Components, se listan todos los componentes que han sido colocados en el Viewer. En la cuarta zona, de nombre Properties, se pueden cambiar algunas propiedades del componente que haya sido seleccionado mediante un Clic en la zona Componentes. Ahora aparece una pgina con varias zonas de izquierda a derecha. En la primera, de nombre Palette, se muestran todos los componentes que pueden ser arrastrados hacia la segunda zona, de nombre Viewer, a fin de disear el aspecto visual de la aplicacin. En la tercera zona, de nombre Components, se listan todos los componentes que han sido colocados en el Viewer. En la cuarta zona, de nombre Properties, se pueden cambiar algunas propiedades del componente que haya sido seleccionado mediante un Clic en la zona Componentes.

Disea la parte visual:

Arrastra el objeto Button hasta el Viewer A la derecha se ven las propiedades de l. Realiza los siguiente cambios: o Clic en Default, bajo la frase BackgroundColor y selecciona Cyan o Clic en FontBold o Clic en la ranura FontTypeFace, escribe 16.0 y pulsa Intro o Clic en la ranura Text, borra el texto, escribe Saludo Aleatorio y pulsa Intro Ahora arrastra el objeto Label y colcalo debajo del botn En sus propiedades realiza los siguiente cambios: o Activa FontBold y FontItalic o Coloca TexColor en Blue o Clic en TextAlignment y selecciona center o Clic en la ranura width, Clic en la opcin pixeles, escribe 135, Clic en OK o Clic en la ranura Text, borra el texto, escribe Hola y pulsa Intro Clic en el botn Save

La parte visual de este primer programa est lista. Ahora debes escribir la parte lgica, la que gobernar el funcionamiento del programa. Clic en botn Open the Blocks Editor, se descargar y ejecutar una aplicacin Java Web. (Acepta todas las peticiones de confirmacin autorizacin que haga dicha aplicacin)

Al lado derecho se muestran los tipos de objetos disponibles (los Built-in). Pero si haces Clic en la pestaa My Blocks vers aparecer tus objetos Button1 y Label1. Clic en Button1, aparecen varias figuras de color verde. Arrastra la primera, de nombre Button1.Click, hacia el rea de trabajo

Esta es la primera instruccin de la lgica del programa y si lees los textos que posee vers que expresa lo siguiente: Cuando ocurra un Clic en Button1 haga..... Ese haga" debe corresponder a la idea definida para este ejercicio, es decir generar un nmero al azar de 1 a 5, con el cual identificar un elemento dentro de una lista de 5 saludos y entonces asignarlo com texto al Label1 Entonces primero debes definir esa lista de 5 saludos. Para hacer esto Apunta con el ratn a un rea libre del panel de trabajo y ejecuta un Clic. Aparece una corrida de botones.

Clic en botn Lists, Clic en la primera opcin, make a list. Aparece la figura make a list, que en su centro posee una muesca circular. Lleva el ratn a otro lugar libre. Clic all para ver la barra de botones Clic en el botn Text, Clic en la opcin text (la primera). Aparece la figura text, que en su centro posee una prolongacin de extremo circular. Cambia su palabra text por HOLA Arrastra la figura text hasta que su prolongacin calce con la muesca de la figura make a list. Repite estos pasos para agregar los saludos HELLO, SALUT, HALLO, CIAO

Lleva el ratn a un lugar libre. Clic all para ver la barra de botones Clic en el botn List, Clic en la segunda opcin, select list tem, aparece Arrastra el objeto make a list hasta que su extremo redondeado calce con la concavidad list que posee el objeto select list tem.

Lleva el ratn a un lugar libre. Clic all para ver la barra de botones. Clic en botn Math, Clic en random integer y aparece el siguiente objeto Lleva el ratn a un lugar libre. Clic all para ver la barra de botones Clic en botn Math, Clic en 123 y aparece. Cambia el valor 123 por 1 Repite estas acciones para tener otra de estas piezas, pero con el valor 5

Arrastra cada una de estas piezas a las concavidades de la pieza random integer, para formar Finalmente calza ese conjunto con la concavidad index del grupo select list item

Ahora debes asignar este texto aleatorio a la propiedad text de tu objeto Label1 Clic en el objeto Label1, en el panel MyBlocks yaparecern varias figuras celestes que representan acciones. Arrastra set Label1.text hasta que su concavidad de nombre to calce con la prolongacin del objeto select list tem que ya tienes en el panel de programacin

Por ltimo, debes establecer que esta asignacin aleatoria de contenido a la propiedad text de tu Label1 ocurra cada vez que se haga Clic en el botn. Para eso Lleva el ratn hasta el objeto Label1.text y arrstralo hacia el interior del objeto Button1.Click hasta que su concavidad calce con la muesca de Button1.Click

Listo!, ahora debes probar el programa en el emulador Clic en el botn New Emulator, Clic en OK, espera (puedes revisar el estado del emulador haciendo Clic en su cono, que se muestra en la barra de tareas de Windows). Cuando su pantalla est plenamente operativa podrs pasar al paso siguiente. Clic en el botn Connect to Device Clic en emulator-5554 (o el nombre que tenga tu emulador). Espera hasta que el cono con forma de celular que existe al lado de ese botn cambie a color verde. Trae al frente la ventana del emulador. Clic en su botn Menu y aparecer tu programa en ejecucinPrubalo!

Algunas observaciones tiles

Una vez que hayas probado el programa regresa al editor de bloques, agrega un nuevo saludo a la lista y cambia el lmite del entero aleatorio (pues ahora existir un elemento mas en la lista). Si ahora haces Clic en el botn save se actualizar la aplicacin en el emulador automticamente, si necesidad de ejecutar otra vez la maniobra Connect to Device.(lo que podrs comprobar si pasas al emulador y ejecutas la aplicacin) Si regresas a la pgina de AppInventor y haces Clic en el botn Package for phone vers las opciones Download to this Computer y Download to Connected Phone, que te permitirn descargar el archivo apk a tu computador transferirlo directamente a tu celular si lo tienes conectado al PC (tambin vers la opcin Show Barcode que permite generar un cdigo de barras para que el programa pueda ser transferido a un celular leyendo ese cdigo mediante su cmara) Si en esa misma pantalla haces Clic en el botn My Projects regresars a la lista de tus proyectos. Si all haces cualquier cambio se actualizar automticamente en el editor de bloques. Si en esa misma pantalla haces Clic en el botn More Actions podrs descargar el cdigo de la aplicacin que tengas seleccionada en tu lista. Tambin podrs cargar algn ejemplo que hayas bajado desde internet (el cual debe estar en formato .ZIP o .RAR, no lo desempaquetes cuando lo bajes a tu PC, pues AppInventor obtiene el cdigo fuente directamente desde el ZIP o RAR) En esa misma pantalla, en la seccin Palette, tienes disponibles varios otros recursos que puedes usar para darle vida a tus creaciones. Puedes: o o o o o o o Usar la cmara del celular Mostrar imgenes Reproducir videos Insertar animaciones Efectuar llamadas Revisar correos Interactuar con Twiter o o o o o o Detectar movimientos y orientacin del telfono Emplear Bluetooth Reconocer voz Convertir texto a voz Almacenar datos Navegar

Un segundo ejemplo:
Nuevamente la idea ser ultra simple. Se mostrar un botn para iniciar el juego, que consistir en ingresar un nmero en una ranura y hacer Clic en un botn para recibir un mensaje tu nmero es mayor, tu nmero es menor o Adivinaste! al compararlo con un nmero generado al azar.

El diseo visual:
Regresa a la pgina de AppInventor Clic en My Projects Clic en New Escribe el nombre Ejemplo2 para este proyecto, Clic en OK Desde la seccin Palette arrastra un botn y colcale como texto Adivina mi nmero Clic en opcin Screen Arrangement que existe en la seccion Palette y arrastra VerticalArrengement hasta colocarlo debajo del botn Coloca en hidden su atributo visible Coloca en 250 su atributo width Activa la marca en Display Invisible Components in Viewer del Viewer Debera verse como se muestra aqu Ahora arrastra dos HorizontalArrangement y colcalos dentro del VerticalArrengement, uno bajo el otro En ambos fija el atributo width a Fill Parent Clic en seccin Basic de la Palette Arrastra hacia el primer HorizontalArrangement un Label y un TextBox Al Label asgnale texto Ingresa tu nmero Al TextBox brrale la ranura Hint Arrastra hacia el segundo HorizontalArrengement un Button y un Label Al Button asgnale el texto Comprobar Al Label brrale la ranura Text

Ya est listo el diseo visual, ahora debes hacer Clic en el botn Open the Blocks Editor

Cuando el editor est listo Clic en la pestaa My Blocks Clic en Button1 Arrastra Button1.Click al rea de programacin Clic en VerticalArrengement1 Arrastra VerticalArregement1.Visible hacia el interior del objeto Button1.Click Clic en un espacio libre para que se muestre la corrida de botones Clic en el botn Logic, Clic en True Arrastra ese objeto True hasta que calce con la muesca to del VerticalArregement1.Visible

Con esto ya tienes lista la primera accin del juego, cuando se haga Clic en el botn aparecer el texto solicitando ingresar un nmero, la ranura para ingresarlo y el botn para comprobar. Pero tambin debera generarse el nmero al azar que el usuario intentar adivinar. Aqu aparece un problema, ese nmero se produce cuando se hace Clic en Button1, pero la comparacin con el nmero ingresado por el usuario se realiza cuando ste hace Clic en Button2. Como esos dos botones son independiente entonces la variable usada para contener el nmero al azar y la usada para contener el nmero ingresado por el usuarion seran vlidas slo dentro del espacio lgico de Button1 o de Button2 Para solucionar eso debes definir ambas variables como globales Clic en un lugar vaco para mostrar la corrida de botones Clic en botn Defin, clic en variable Cambia la palabra variable por computador Clic en un lugar vaco para mostrar la corrida de botones Clic en el botn Math, clic en 123 Cambia 123 por 0 Arrastra este valor hasta que calce con la muesca as de la variable computador Repite estas acciones para definir la variable usuario, tambin con valor 0 Sita ambas variables mas arriba que Button1.Click

Ahora tienes dos variables globales, slo falta que dentro del Button1.Click generes un valor al azar entre 1 y 100 para la variable computador Clic en My Definitions Arrastra el objeto set global computador hacia el interior del Button1.Click Clic en la pestaa Built-in Clic en Math Arrastra el objeto random integer hacia el interior del Button1.Click, hasta que calce con la muesca to del objeto set global computer

Ahora debes agregar la lgica del juego, la cual se puede resumir como: Recibir un nmero ingresado por el usuario Compararlo con el generado al azar (el del computador) Mostrar uno de tres mensajes posibles: tu nmero es mayor, tu nmero es menor, adivinaste! Para construir esa lgica: Clic en My Blocks, Clic en Button2 Arrastra Button2.Click y clocalo bajo Button1.Click en el rea de trabajo Clic en My Definitions, arrastra el objeto set global usuario haci el interior de Button2.CLick Clic en TextBox1, arrastra el objeto TextBox1.Text hasta la concavidad to queposee usuario Clic en un lugar libre de la zona de trabajo para mostrar la corrida de botones Clic en botn Control, Clic en opcin ifelse, aparecer el objeto correspondiente Arrastra el objeto ifelse al interior de Button2.Click para que calce con usuario Clic en Built-in, Clic en Math, arrastra el objeto y hazlo calzar con la cavidad test del if Clic en My Blocks, Clic en My Definitions, arrastra global usuario hasta la primera zona de ese objeto, Clic en My Definitions, arrastra global computador hasta la segunda zona

Deberas haber logrado un montaje como el mostrado a la derecha, el cual puede interpretarse como al hacer Clic en el botn 2 el nmero del usuario ser el escrito en la ranura de texto y si es mayor que el del computador

Para completar el programa slo faltan unos pocos pasos mas: Clic en Label2, arrastra el objeto set Label2.Text al interior de la zona then-do del ifelse Clic en una zona libre para mostrar los botones, Clic en botn Text Cambia la propiedad text de ese objeto a la frase tu nmero es mayor y entonces arrastra el objeto hacia la cavidad to que posee el objeto Label2.Text Clic en un lugar libre para mostrar lo botones, Clic en botn Control, Clic en opcin ifelse Arrastra ese ifelse hasta la zona else-do del ifelse que hay dentro de Button2.Click En la cavidad test de este nuevo ifelse coloca un comparador En la primera cavidad coloca un objeto global usuario y en la segunda global computador Coloca objetos set Label2.Text en zonas then-do y else-do de este nuevo ifelse y agrgales objetos text en sus cavidades to con las frases tu nmero es menor y adivinaste!

Listo!, el programa est terminado En la siguiente pgina podrs ver el diagrama de bloque completo

Un tercer ejemplo
La idea de este ejemplo tambin es s muy simple. En el dispositivo se mostrar lo siguiente: La pantalla se inicia con fondo de color blanco (esto es automtico). El botn superior sirve para cambiar el color de la pantalla a uno aleatorio. Los botones de colores Rojo, Verde y Azul sirven para cambiar el color de un componente Canvas (lienzo) que hay bajo el botn superior (in (inicialmente no se ve porque est tambin con fondo do de color blanco) El juego consiste en usar esos botones para lograr que el Canvas tenga el mismo co color que la pantalla. Si se logra se oir una ovacin y aparecer una imagen. La imagen de la derecha muestra la situacin justo despus de haber hecho Clic en el botn superior (el fondo de la pantalla cambi a color naranja y el Canvas cambi a color negro)

Las dos imgenes siguientes muestran la situacin despus de haber usado los botones Rojo, Verde y Azul para ajustar el color del Canvas, y desp despus de haber logrado que el canvas tenga el mismo color que la pantalla Cuando se logra ajustar el color del Canvas para que coincida con el de la pantalla aparece la imagen de ovacin y se escucha un sonido de ovacin. Un color se define por la cantidad de rojo, verde y azul que lo componen, cada uno de los cuales puede ir de 0 a 255. En este ejemplo esos valores se restringirn a 0, 40, 80, 120, 160, 200 y 240 (es decir slo siete valores, a fin de que el juego realmente se pueda jugar)

Disea la parte visual

Definir la organizacin: En la seccin Palette haz Clic en la opcin ScreenArrangement Arrastra VerticalArrengement hacia el Viewer (Este no es un componente visible, es slo una forma de especificar zonas en la pantalla en las cuales se colocarn componentes visibles. El VerticalArrengmente har que todos los componente que arrastremos dentro de l queden uno bajo otro, verticalmente) En la seccin Properties haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK. Con esto se est especificando que este componente ocupar todo el ancho del lugar en que l fue colocado (en esta caso todo el ancho de la pantalla) Colocar componentes visibles: En la seccin Palette haz Clic en Basic para regresar a la lista de componentes bsicos Arrastra el objeto Button hasta el interior del VerticalArrengement que colocaste en el Viewer En la seccin Components haz Clic en el botn Rename y escribe FondoAleatorio (este ser el nombre con que se identificar a este botn) En la seccin Properties haz Clic en la ranura Text, borra el texto, escribe Generar Color de Fondo Aleatorio y pulsa Intro En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK Desde la seccin Palette arrastra Canvas hacia el interior de VerticalArrangement que hay en el Viewer.Colcalo debajo del botn (cuando lleva el Canvas hacia su destino se ve un raya azul que indica donde va a ser colocado. Observa bien, debe quedar dentro del VerticalArrangment) En la seccin Components haz Clic en el botn Rename y escribe Lienzo (este ser el nombre con que se identificar a este Canvas) En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En la seccin Palette haz Clic en opcin ScreenArrangement y entonces arrastra un HorizintalArrangement hacia el interior del VerticalArrangement que tiene en el Viewer. Preocupate de que quede dentro de ese VerticalArrangemente, debajo del Canvas En la seccin Properties haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Height, haz Clic en la ranura pixels, escribe 40 y haz Clic en OK En la seccin Palette haz Clic en Basic para regresar a la lista de componentes bsicos Arrastra un objeto Button hasta el interior del HorizontaArrengement En la seccin Components haz Clic en el botn Rename y escribe Rmas (este ser el nombre con que se identificar a este botn) En la seccin Properties haz en el interior de la ranura Text y escribe R+ (reemplazando lo que haba) En esa misma seccin haz Clic en la casilla negra bajo Background Color y seleccionar color rojo

En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK (no te preocupes si ves que el botn ocupa todo el ancho del viewer, eso cambiar al agegar los botones restantes) En esa misma seccin haz Clic en la ranura Height, selecciona Fill Parent y haz Clic en OK Arrastra otro objeto Button hasta el interior del HorizontaArrengement, pero asegrate de colocarlo a la derecha del botn anterior En la seccin Components haz Clic en el botn Rename y escribe Gmas (este ser el nombre con que se identificar a este botn) En la seccin Properties haz en el interior de la ranura Text y escribe G+ (reemplazando lo que haba) En esa misma seccin haz Clic en la casilla negra bajo Background Color y seleccionar color verde En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Height, selecciona Fill Parent y haz Clic en OK Arrastra otro objeto Button hasta el interior del HorizontaArrengement, pero asegrate de colocarlo a la derecha del botn anterior En la seccin Components haz Clic en el botn Rename y escribe Bmas (este ser el nombre con que se identificar a este botn) En esa misma seccin haz Clic en la casilla negra bajo Background Color y seleccionar color azul En la seccin Properties haz en el interior de la ranura Text y escribe B+ (reemplazando lo que haba) En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Height, selecciona Fill Parent y haz Clic en OK En la seccin Palette haz Clic en la opcin ScreenArrangement Arrastra un HorizontalArrengement hacia el interior del HorizontalArrengement que tienes en el Viewer, colocndolo justo a la dercha del timo botn. En la seccin Properties haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Height, , haz Clic en la ranura pixels, escribe 46 y haz Clic en OK (existirn dos grupos de 3 botones y una separacin de igual ancho entre ellos. Como ancho de pantalla es 320 eso da un ancho del botn de 46, y usamos eso como alto) En la seccin Palette haz Clic en Basic para regresar a la lista de componentes bsicos Arrastra un objeto Button hasta el interior del HorizontaArrengement y colcalo justo a la derecha del HorizontalArrangement anterior En la seccin Components haz Clic en el botn Rename y escribe Rmenos (este ser el nombre con que se identificar a este botn) En la seccin Properties haz en el interior de la ranura Text y escribe R- (reemplazando lo que haba) En esa misma seccin haz Clic en la casilla negra bajo Background Color y seleccionar color rojo

En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Height, selecciona Fill Parent y haz Clic en OK Arrastra otro objeto Button hasta el interior del HorizontaArrengement, pero asegrate de colocarlo a la derecha del botn anterior En la seccin Components haz Clic en el botn Rename y escribe Gmenos (este ser el nombre con que se identificar a este botn) En la seccin Properties haz en el interior de la ranura Text y escribe G+ (reemplazando lo que haba) En esa misma seccin haz Clic en la casilla negra bajo Background Color y seleccionar color verde En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Height, selecciona Fill Parent y haz Clic en OK Arrastra otro objeto Button hasta el interior del HorizontaArrengement, pero asegrate de colocarlo a la derecha del botn anterior En la seccin Components haz Clic en el botn Rename y escribe Bmenos (este ser el nombre con que se identificar a este botn) En esa misma seccin haz Clic en la casilla negra bajo Background Color y seleccionar color azul En la seccin Properties haz en el interior de la ranura Text y escribe B+ (reemplazando lo que haba) En esa misma seccin haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Height, selecciona Fill Parent y haz Clic en OK Arrastra un objeto Image hacia el interior del VerticalArrangement, colocndolo debajo de los botones En la seccin Components haz Clic en el botn Rename y escribe exito (este ser el nombre con que se identificar a esta imagen) Bajo la seccin Componets est la seccin Media. All haz Clic en el botn upload new, luego Clic en el botn Examinar y navega por tu disco hasta donde tiene la imagen a usar, finalmente haz Clic en OK En la seccin Properties haz Clic en la ranura Width, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en la ranura Heigth, selecciona Fill Parent y haz Clic en OK En esa misma seccin haz Clic en el triangulito de la ranura Visible y Clic en la opcin Hidden (la imagen comenzar oculta) En la seccin Palette haz Clic en Media para ver la lista de componentes relacionados con multimedia Arrastra un componente sound al viewer (a cualquier lugar,no importam pues no es un componente a mostrar) En la seccin Components haz Clic en el botn Rename y escribe ovacion (este ser el nombre con que se identificar a este sonido) Bajo la seccin Componets est la seccin Media. All haz Clic en el botn upload new, luego Clic en el botn Examinar y navega por tu disco hasta donde tienes el sonido a usar, finalmente haz Clic en OK

Esta lista de pasos se ve larga y cansadora, pero en la prctica no toma ms de que un par de minutos. Si omites un paso siempre podrs realizarlo posteriormente pues en cualquier instante puede seleccionar un componente en la seccin Components, que muestra todos los componente ya agregados, de modo que podrs cambiarlo algunas de sus propiedades, su nombre e incluso eliminarlo. Si hiciste todo bien la situacin debera ser la mostrada en la figura siguiente: Observa la colocacin que tienen los componentes en la lista mostrada, el adentramiento que unos tienen respecto de otros indica en donde estn colocados (por ejemplo, todos los botones de color estn dentro del HorizontalArrangemente1, como debe ser) Verifica que tienes eso correcto y sino, corrgelo!

Disea la lgica
La lgica de esta aplicacin es simple: Al hacer Clic en el botn superior se genera un color aleatorio para la pantalla y color negro para el Lienzo (el Canvas) Al hacer Clic en alguno de los botones Rmas, Gmas, Bmas, Rmenos, Gmenos Bmenos cambia el color del Lienzo Cuando el color del Lienzo se hace igual al color de la pantalla se muestra la imagen de xito y se escucha una ovacin

Para escribir esat lgica debes abrir el editor de bloques haciendo Clic en botn Open the Blocks Editor, con lo cual aparecer un cuadro de dilogo ofreciendo descargar ejecutar una aplicacin JavaWeb. Selecciona ejecutar y espera (Acepta todas las peticiones de confirmacin autorizacin que haga dicha aplicacin), apareciendo una ventana como la siguiente: Al lado derecho se muestran los tipos de objetos disponibles (los Built-in). Pero si haces Clic en la pestaa My Blocks vers aparecer tus objetos. Haz Clic en My Blocks, entonces Define algunas variables: Haz Clic en el area de trabajo y aparecer una barra de botones como esta Clic en el primer botn (Defini) y luego Clic en la opcin variable, aparecer este objeto, mediante el cual se puede definir una variable. Haz doble Clic en la palabra variable y cmbiala a R, luego mueve el puntero del ratn para apuntar a la concavidad identificada con la palabra as y haz Clic nuevamente para que aparezca la barra de botones, ahora haz Clic en el botn Math y luego Clic en la opcin 123. Ahora el objeto se ver como Finalmente haz doble Clic en el valor 123 y cmbialo a 0 (con esto definiste R con valor incial 0) Repite esta misma maniobra para definir las variables G, B, RF, GF, BF y F. En el rea de trabajos deberas tener algo similar a:

Las variables RF, GF y BF se usarn para definir el color de la pantalla, las variables R, G y B se usarn para definir el color del Lienzo (el Canvas) y la variable F se usar para lograr que los valores aleatorios generados sean slo valores 0, 40, 80, 120, 160, 200 240 (la idea es simple, lo que realmente se debe hacer es generar para F un valor aleatorio de 0 a 6 y luego multtiplicarlo por 40) Clic en un lugar libre del rea de trabajo para que aparezca la barra de botones, Clic en el primer botn (Defini), Clic en opcin procedure y aparecer un objeto similar al usado para definir variables,pero este es de color lila y te permitir definir un procedimiento. Haz doble Clic en la palabra procedure de ese objeto y escribe CambiaColorLienzo. El objeto se ver como en la siguiente imagen (un procedimiento permite agrupar varias acciones para ejecutarla en cualquier lugar del programa simplemente nombrando a ese procedimiento) Repite esta accin para definir otros dos procedimientos, de nombres CambiaColorScreen y RevisaResultado El procedimiento CambiaColorLienzo ser el encargado de usar los valores de las variables R, G y B para cambiar color del Lienzo, y ser ejecutado cada vez que ocurra un cambio en alguna de esas variables producto de haber hecho Clic en alguno de los botones Rmas, Gmas, Bmas (que aumentan en 40 el valor de R, G B), en alguno de los botones Rmenos, Gmenos, Bmenos (que disminuyen en 40 el valor de R, G B) FondoAleatorio (en este caso R, G y B son puestos en valor 0) El procedimiento CambiaColorScreen ser el encargado de usar los valores de las variables RF, GF y BF para cambiar el color de la pantalla. Esas variables adoptan un valor aleaotorio 0, 40, 80, 120, 160, 200 240 al hacer Clic en el botn FondoAleatorio. El procedimiento RevisaResultado ser el encargado de verificar si el valor de las variables R, G y B estn dentro del rango permitido (de 0 a 240), corrigindolas si es necesario, cambiar el color del lienzo segn esos valores R, G, B y determinar si son iguales a RF, GF, BF. Cuando ocurra esa igualdad debe mostrar la imagen de xito y reproducir el sonido de ovacin. El procedimiento CambiaColorLienzo es muy fcil, slo tiene que crear un color usando los valores R, G, B y aplicrselo al objeto Lienzo como color de fondo. Para programa esto realiza las siguientes acciones Clic en la pestaa MyBlocks que hay a la dercha del rea de trabajo Clic en Lienzo, al lado aparecern objetos representando sus propiedades y mtodos. Baja por esa lista hasta ver un pieza de color celeste con el nombre set Lienzo.Background to y arrstrala hacia el interior del objeto correspondiente al procedimiento CambiaColorLienzo que tienes en el rea de trabajo

Lleva el ratn a la concavidad to que tiene esta pieza y haz Clic para que se muestre la barra de botones. All haz Clic en el ltimo botn (Colors). El resultado ser Ahora lleva el ratn a la concavidad componentes, haz Clic para ver la barra de botones, Clic en el botn List, Clic en la opcin make a list. En esa lista los itemes sern los valore de las variables R, G y B Clic en la opcin MyDefinitions, y aparecern las variables que tienes definidas. Busca un objeto celeste con el texto global R y arrstralo hasta la concavidad tem. Realiza la misma accin con los objetos global G y global B. El resultado ser el mostrado al lado.

Ya tienes codificado el procedimiento CambiaColorLienzo difcil?

Con exactamente las mismas acciones puedes codificar el procedimiento CambiaColorScreen, lo nico que cambia es que usa las variables RF, GF, BF en vez de R, G, B
El procedimiento RevisaResultado tampoco es difcil. Lo que este procedimiento debe hacer es comparar R con RF, G con GF y B con BF, si son iguales debe hacer visible la imagen de xito e iniciar la reproduccin del sonido de ovacin Haz Clic en un lugar libre del rea de trabajo para ver la barra de botones, all haz Clic en el botn Control y Clic en la primera opcin (if), arrastra el objeto al interior del procedimiento RevisaResultado Lleva el ratn hasta la concavidad test, haz Clic para ver la barra de botones , haz Clic en el botn Logic y Clic en la opcin and

Lleva el ratn hasta la concavidad test de este objeto and, haz Clic para ver la barra de botones, Clic en el botn Math, Clic en la opcin = Haz Clic en MyDefinitions y arrastra global R a la primera cavidad de este objeto Haz Clic en MyDefinitions y arrastra globa RF a la segunda cavidad

Agrega otro objeto de comparacin (=) en la otra concavidad test y compara G con GF. Repite para comparar B con BF, se ver as

Ahora agrega las acciones que deben ejecutarse cuando se cumplan todas esas igualdades Clic en Imagen (al lado), arrastra el objeto celeste set Imagen.Visible to al interior de la cavidad then-do Lleva el ratn a la concavidad to de este objeto, haz Clic para ver la barra de botones, Clic en el botn Logic, Clic en la opcin true Clic en Ovacion (al lado), arrastra el objeto lila Ovacion.Play y colcalo debajo del objeto anterior

Si hiciste todo bien debera verse como se muestra en la imagen

Ya tienes todos los procedimiento, ahora falta programar las acciones que deben ejecutarse cuando se haga Clic en cada uno de los botones

Por ejemplo un Clic en el botn Rmas debe provocar que el valor de la variable R aumente en 40, pero si se pasa de 240 debe volver a 240. Una vez cambiada correctamente su valor se debe ejecutar el procedimiento CambiaColorLienzo y a continuacin el procedimiento RevisaResultado

Todos los objetos mostrados aqu ya deberas saber como obtenerlos y colocarlos, slo conviene explicar que para encontrar los dos ltimos debes hacer Clic en la opcin MyDefintions (al lado). La programacin de Gmas y Bmas es indntica En cuanto a los botones Rmenos, Gmenos y Bmenos basta mostrar como ejemplo el Rmenos

El ltimo botn que queda por programar es del nombre FondoAleatorio. Aqu: Deben regresarse a valor 0 las variables R, G, B Ejecutar procedimiento CambiaColorLienzo Generar un valor aleatorio de 0 a 6 para la variable F y multiplicarlo por 40 para obtener un valor aleatorio para RF (repetir para GF y BF) Ejecutar procedimiento CambiaColorScreen Entonces el cdigo para este botn es el mostrado en la figura y con esto queda terminado el programa. Para probarlo Haz Clic en el botn New Emulator, Clic en OK Espera que el emulador se haya iniciado completamente Quita el bloqueo en el emulador (arrastrando el candado hacia la derecha con el ratn) Regresa al Editor de Bloques y haz Clic en el botn Connect to Device, Clic en el numero del emulador activo (que debera aparecer all) Espera que el la coneccin se concrete (pasa a color verde el cono de celular mostrado al lado de ese botn) Regresa al emulador y prueba el programa

Algunas Ideas y consejos rpidos

En el diseador visual Para mejorar el diseo visual aprende a usar VerticalArrangement y HorizontalArrangement. Con el VerticalArrangement todas las cosas que arrastres a su interior quedarn una bajo la otra, con el HorizontalArrangement quedarn una al lado de la otra. Puedes colocar un Arrangement de un tipo al interior de uno del otro tipo para lograr ubicaciones especiales de los componentes (Tambin existe un TableArrangement que te da ms opciones an) A la mayora de los componentes se les puede especificar ancho y alto de tres maneras, Automtic (se ajusta a su propio contenido), Fill Parent (se ajusta al ancho total del componente dentro del cual est (dentro de Screen un Arrangement), Pixels (se le indica un valor especfico de ancho alto en pixeles) Si quieres tener botones horizontales que mantengan una separacin entres ellos puedes usar un HorizontalArrangement para colocarlos y luego un HorizontalArrangement entre cada uno de ellos, ajustando sus tamaos a un alto y tamao fijo. En la parte inferior de seccin Components, en el diseador visual, hay un botn Add con el cual puedes agregar imgenes y sonidos que despus podrs asignar a objetos de de tu diseo visual (durante la fase de diseo durante la ejecucin de la aplicacin) Mediante el botn Package for Phone que hay en la esquina superior izquierda del diseador visual puedes crear un cdigo QR de tu aplicacin (cuando ya est terminada y probada en el emulador). Entonces puedes capturar la imagen de ese cdigo QR con la cmara de tu celular y dicha aplicacin quedar disponible en tu dispositivo (debes tener un lector QR) En el Editor de Bloques Cuando desees agregar una pieza para conectarla con otra apunta con el ratn la protuberancia concavidad en donde deseas conectarla y all haz Clic. Aparecer la botonera de elementos (Defin, Text, List, Math, etc.) y entonces, al seleccionar un elemento, quedar automticamente conectado, sin que tengas que arrastrarlo hasta all) Si haces Clic sobre una pieza sobre un conjunto de piezas conectadas aparecer un borde anaranjado alrededor de ellas. Entonces si ejecutas Control +C podrs copiar y pegar en otro lugar mediante Control+V

Un ejemplo simple Inicia un nuevo proyecto, de nombre Kinder. La idea es mostrar botones con nombres de animales y, al hacer Clic enuno de ellos, ver la imagen de ese animal y or su sonido caracterstico. En el diseador de su aspecto visual Agrega un objeto VerticalArrangement Dentro de l coloca un objeto Image,un objeto Label y un HorizontalArrangement Dentro del HorizontalArrangement coloca tres objetos Button Agrega tres HorizintalArrangement entres los botones y ajusta el alto y ancho de cada uno Busca en Internet tres imgenes de tipo PNG JPG, correspondientes a animales Busca tres sonidos de tipo WAV, correspondiente al sonido caracterstico de cada animal Desde la paleta Media arrastra objeto Player hacia Screen (es un objeto no visible en la aplicacin pero que permite reproducir cualquier sonido) Modifica las propiedades de algunos de estos objetos para lograr el siguiente diseo:

Ahora, en el Editor de Bloques, arma la siguiente lgica:

Listo!, tienes una aplicacin para nios de Kinder

Otro ejemplo simple Crea un nuevo proyecto, de nombre zoom. La idea de este programa es controlar el tamao de una imagen mediante un movimiento horizontal de nuestro dedo sobre ella (a la derecha aumenta tamao, a la izquierda disminuye) En el diseador visual Agrega un objeto Canvas En la propiedad BackgroundImage del Canvas agrega una imagen cualquiera En el Editor de Bloques arma la siguiente lgica:

La cual indica que al arrastrar el dedo sobre el Canvas (que muestra la imagen) aumentar su ancho y alto en 20 pixeles si el dedo est ms a la derecha (posicin prevX) que aquella en que ocurri el primer touch (posicin startX)