Crea tu primera app Android con App Inventor: HolaRonronea

IES Miguel de Cervantes TICO 1 Bachillerato
UNIDAD 9: Programacin de aplicaciones para ANDROID

P
g
i
n
a
1

Programacin de aplicaciones para ANDROID con APP INVENTOR
1. Qu es App Inventor?

App Inventor permite desarrollar aplicaciones para telfonos basados en el sistema operativo Android mediante un
navegador web, bien con un telfono conectado al ordenador o con un emulador.
Fue desarrollado por Google, a travs de su desaparecido Google Labs, pero dej de soportarlo en diciembre de
2011. De todos modos, el Massachusetts Institute of Technology decidi proseguir con su desarrollo y
mantenimiento, a travs de su Center for mobile learning, motivo por el cual sigue disponible para quien desee
utilizarlo.
Los servidores de App Inventor, ahora ubicados en el MIT, almacenarn tu trabajo y te ayudarn a realizar un
seguimiento de tus proyectos.

Para construir aplicaciones se trabaja con:
El Diseador de App Inventor (App Inventor
Designer), donde podrs seleccionar los
componentes para tu aplicacin.
El Editor de Bloques de App Inventor (App
Inventor Blocks Editor), donde se ensamblan
los bloques del programa para especificar
cmo deben comportarse sus
componentes. Los programas se desarrollan
visualmente, ensamblando piezas que se
juntan encajando como las de un
rompecabezas.
La aplicacin que se desarrolla aparece en el telfono
paso a paso, a medida que aaden piezas a la misma,
de modo que se puede probar el trabajo mientras se
elabora la misma. Una vez terminado, puede
empaquetar su programa y producir una aplicacin
independiente para instalar.
Aunque no se disponga de un telfono con Android, siempre se pueden construir aplicaciones utilizando el emulador
de Android, el software que se ejecuta en el ordenador y se comporta igual que el telfono respecto a la misma.
El entorno de desarrollo de App Inventor es compatible con Mac OS X, GNU/Linux, con Windows y con la mayora de
telfonos Android. Las aplicaciones creadas con App Inventor se pueden instalar en cualquier telfono Android.

P
g
i
n
a
2

2. Configura tu equipo
Pon a prueba tu configuracin de Java
Tu ordenador debe ejecutar Java 6 (tambin conocido como Java 1.6) o superior. Pon a prueba tu configuracin de
Java mediante la realizacin de las dos pruebas siguientes:
1. Visite la pgina de prueba de Java . Usted debe ver un mensaje que Java est funcionando y que es la versin
Java 1.6 o posterior.
2. Ejecute la prueba de AppInventor de Java haciendo clic en este enlace. Esto comprueba que tu navegador
est configurado correctamente para ejecutar Java, y que tu equipo puede ejecutar aplicaciones con Java
Web Start.
App Inventor no va a funcionar en tu ordenador si estas pruebas no tienen xito. No intentes usar App Inventor
hasta que no hayas resuelto este problema..

Ejecuta el software de instalacin de App Inventor (en Windows)

Te recomendamos efectuar la instalacin desde una cuenta de tu ordenador que tenga privilegios de
administrador. Esto instalar el software para todos los usuarios de la mquina. Si no tienes esos privilegios, la
instalacin debera funcionar, pero App Inventor slo podrn utilizarse en la cuenta que utilizaste durante la
instalacin.
1. Descarga el instalador. Es un archivo llamado AppInventor_Setup_Installer_v_1_2.exe, de unos 92 MB.
2. La ubicacin de la descarga en tu equipo depende de cmo est configurado tu navegador. Puede hallarse,
tal vez, en la carpeta de descargas (download), o en el escritorio. En todo caso, localzalo.
3. Ejecuta el archivo.
Sigue los pasos indicados por el instalador, haciendo clic en ellos. No cambies la ubicacin de la instalacin, pero
recuerda la carpeta donde se instal, ya que la necesitars ms adelante. Esta carpeta vara segn la versin de
Windows y si utilizamos o no una cuenta de administrador.
3. Tutoriales
Tu primera aplicacin
Vamos a crear la primera aplicacin con nuestro telfono Android: HolaRonronea
A medida que desarrollemos Hola Ronronea, aprenders cmo utilizar las tres herramientas
fundamentales de trabajo de App Inventor:
El Diseador (designer), el lugar donde se disea la aplicacin. Se ejecuta en el
navegador web.
El Editor de bloques (blocks editor), aplicacin Java donde configuramos el
comportamiento de nuestro desarrollo. Es una aplicacin independiente, que corre en
una ventana diferente a la instancia del navegador.
El telfono, conectado al ordenador mediante un cable USB. Puede ser sustituido por el Emulador.
P
g
i
n
a
3

Para construir Hola Ronronea tendrs una imagen de una gatita y el sonido de un maullido. Descargar estos archivos
al ordenador:
foto del gatito
miau sonido

En el navegador Web, apunta a la pgina web de App Inventor en http://beta.appinventor.mit.edu/ . Si esta es la
primera vez que has usado App Inventor, vers la pgina de Proyectos vaca, sin proyectos en ella todava. Debera
tener este aspecto:

Crear un nuevo proyecto
1. Haga clic en New en el lado izquierdo, cerca de la parte superior de la pgina.
2. Introduzca el nombre del proyecto HolaRonronea (una sola palabra, sin espacios) en el cuadro de dilogo
que aparece, haga clic en Aceptar.
El navegador abrir el Diseador, el lugar donde se seleccionan los componentes para su aplicacin, y debe tener
este aspecto:

P
g
i
n
a
4

Seleccione los componentes para el diseo de su aplicacin
Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseo, bajo el ttulo
Palette. Los componentes son los elementos bsicos que se utilizan para hacer las aplicaciones en el telfono
Android. Son como los ingredientes de una receta.
Algunos componentes son muy simples, como el componente Label, que slo muestra un texto en la pantalla, o el
componente Button que mostrar un botn en la pantalla del telfono que al ser pulsado iniciar una accin. Otros
componentes son ms elaborados: el componente Canvas es un lienzo de dibujo que puede almacenar imgenes
fijas o animaciones, el AccelerometerSensor es un sensor de movimiento que funciona como un mando de Wii y
detecta cuando movemos o agitamos el telfono, los componentes que crean o envan mensajes de texto, los
componentes que reproducen msica y video, componentes capaces de obtener informacin de sitios Web, y as
sucesivamente.
Para utilizar un componente en su aplicacin, tendr que hacer clic y se arrastra sobre el visor (Viewer), en el centro
de la pantalla de diseo. Cuando aadas un componente en el visor, tambin aparece en la lista de componentes
(Components), a la derecha del visor.
Los componentes tienen propiedades, que se presentan en la parte derecha de la pantalla (Properties) y que se
pueden ajustar para cambiar la forma en que el componente interactuar con la aplicacin. Para ver y cambiar las
propiedades de un componente, primero debe seleccionar el componente deseado en la lista de componentes.
Pasos a seguir para seleccionar los componentes y propiedades de configuracin
Queremos que HolaRonronea tenga un botn con la propiedad de imagen ajustada al archivo que has descargado
antes, con la imagen del gatito, kitty.png. Estableceremos esto del modo siguiente:
1. Arrastra y suelta un Button hasta Screen1, en el rea del visor (viewer). El componente Button se encuentra
en la seccin Basic de la paleta (palette).
2. En la lista de propiedades de Button1, el botn que acabamos de disponer, en imagen, haz clic sobre
ninguno (none) ...
3. Haga clic en agregar (Add) ... .
4. Selecciona el archivo kitty.png, que has descargado antes.
5. Eliminar Text for Button1, que aparece bajo la propiedad text mediante la tecla de retroceso.
Tu diseo debera tener este aspecto:

P
g
i
n
a
5

Abre el Editor de bloques (Blocks Editor)
El diseador (Designer) es una de las tres herramientas clave que utilizars en la creacin de aplicaciones. El segundo
es el Editor de bloques. El tercero es el telfono. Vamos a usar el Editor de bloques para asignar los comportamientos
de los componentes, como qu debe suceder cuando el usuario de la aplicacin presiona un botn.
El editor de bloques se ejecuta en una ventana separada. Al hacer clic en Abrir el editor de bloques (Open the Blocks
Editor) de la ventana de diseo, el archivo de programa del editor de bloques se debe descargar y ejecutar. Este
proceso puede tardar 30 segundos o ms. Entonces, la ventana del editor de bloques debe verse como se muestra
abajo, con "cajones" para los bloques de programa a la izquierda, y un gran espacio vaco para la colocacin de los
bloques que uniremos para montar el programa, que se va a hacer a continuacin.

Antes de continuar con la construccin de la aplicacin, tendrs que conectar el telfono. Asegrete de que se
ha configurado el telfono de modo correcto . Ahora conecta tu telfono al ordenador mediante un cable USB, y haz
clic en Conectar dispositivo (Connect to device) en la parte superior de la ventana del editor de bloques. Vers una
lista desplegable con el telfono en dicha lista, identificado por su tipo de modelo (por ejemplo, HT99TP800054). Haz
clic sobre l. Vas a ver una flecha amarilla animada sobre un telfono, indicando que App Inventor se est
conectando al telfono. El establecimiento de esta conexin puede tardar un minuto o dos. Una vez la conexin se
completa, la flecha deja de moverse y se pone verde, y si nos fijamos en la pantalla del telfono, vers el gatito. La
aplicacin empieza a ejecutarse!
Si, por el contrario, no dispones de telfono y quieres desarrollar la aplicacin con el emulador, sustituye lo indicado
en el prrafo anterior por lo siguiente:
Haz clic en el botn Nuevo emulador (New Emulator) en la parte superior de la ventana. Recibirs un aviso diciendo
que el emulador se est iniciando, y te pide que tengas paciencia, ya que puede tardar un rato (cosas del Java). El
emulador aparecer inicialmente con una pantalla en negro. Espera hasta que el emulador est listo, con un fondo
de pantalla de color, como se muestra a continuacin. Incluso despus de que el fondo aparezca, debes esperar
hasta que el telfono emulado ha terminado la preparacin de su tarjeta SD: vers un aviso en la parte superior de la
pantalla del telfono mientras la tarjeta est siendo preparada. Puede ser necesario usar el puntero del ratn sobre
la pantalla del telfono emulado para desbloquear el dispositivo, arrastrando el botn de bloqueo verde a la
derecha.
P
g
i
n
a
6

Cuando el emulador est finalmente listo, haz clic en Conectar a dispositivo (Connect to device), selecciona el
emulador de la lista desplegable y haz clic en l. Vas a ver una flecha amarilla animada sobre un mvil, indicando que
App Inventor est conectndose al telfono emulado. La creacin de esta conexin puede tardar un minuto o dos.
Cuando termine, la flecha dejar de moverse y se pone verde, y en la pantalla del telfono emulado, vers el gatito.
La aplicacin se ha iniciado!
En este punto, debes tener el diseador abierto en el navegador, el editor de bloques abierto en otra ventana, y el
dispositivo elegido (telfono o emulador) conectado con el Editor de bloques.
A continuacin haremos lo siguiente para completar la aplicacin:
En el Diseador:
Agregar un componente de etiqueta (label) que ponga "Acaricia al gatito".
Subir el archivo meow.mp3
Agregar un componente de sonido (sound) que reproduzca el archivo meow.mp3.
En el Editor de bloques:
Crear un controlador de eventos que dispare el componente de sonido cuando el usuario pulsa el botn.
Adicin de la etiqueta
En la paleta y el visor:
1. Arrastra y suelta el componente Label hasta el visor (Viewer) , situndolo por debajo del gatito. Aparecer en
la lista de componentes como Label1
Bajo propiedades (properties)
1. Cambia la propiedad Text de Label1 de forma que ponga "Acaricia al gatito". Cuando el cursos cambie a otra
rea vers aparecer este texto en el botn en tu ordenador y en el dispositivo Android.
2. Cambiar el Color de fondo (BackgroundColor) de Label1. Puedes cambiar a azul.
3. Cambiar el color del texto (TextColor) de Label1, por ejemplo pasndolo a amarillo.
4. Cambiar el tamao de su fuente (FontSize) de Label1 ponindola a 30.
P
g
i
n
a
7

El diseador debe parecerse a esto:

Agregando el maullido
En la paleta (Palette):
1. Haz clic en la seccin Media para ampliarla y ver sus componentes.
2. Arrastra un componente Sound y colcalo en el visor (Viewer) . Independientemente de donde lo dejes caer,
aparecer en la parte inferior del visor, como componente no visible (non-visible-components) y como Sound1.

En el rea de medios (Media)
1. Haz clic en Agregar (Add) ...
2. Sube el archivo meow.mp3 a este proyecto.

Bajo Propiedades (Properties)
1. Establece la propiedad fuente (source) del componente Sound1 haciendo clic sobre la misma. Cuando aparezca
el cuadro de seleccin, pulsa sobre meow.mp3 y sobre OK. Esto asocia el maullido contenido en este archivo a
Sound1.

P
g
i
n
a
8

El diseador debe parecerse a esto:

Hacer el juego de sonido
Con el Editor de bloques vamos a definir la forma en que la aplicacin se va a comportar. Le diremos a los
componentes lo que deben hacer y cundo hacerlo. Vas a decirle al botn, que en realidad es la fotografa del gatito,
que reproduzca el sonido del maullido cuando el usuario lo toque. Si los componentes son los ingredientes de una
receta, puedes pensar en bloques como las instrucciones de elaboracin del plato.
El editor de bloques tiene dos pestaas en la esquina superior izquierda: Integrados (Built-in) y mis bloques (My
blocks). Los botones situados debajo de cada pestaa muestran los bloques cuando se hace clic. Los Integrados son
un conjunto de bloques genrico, que encontraremos disponibles independientemente de la aplicacin que vayamos
a crear. Son siempre los mismos. Los bloques debajo de la pestaa de mis bloques contienen bloques especficos,
vinculados con el conjunto de componentes que hemos elegido para la aplicacin. Varan segn los componentes
seleccionados previamente y cambian si cambiamos componentes sobre la marcha.
Para hacer que se reproduzca el sonido al tocar (pulsar) el botn con la foto del gatito, tendrs que pulsar la pestaa
My Blocks, desplegar los bloques de la seccin Button1 y arrastrar y soltar al lienzo central el bloque When
Button1.Click do, que se refiere a la circunstancia que el usuario pulse el botn y, tras desplegar los bloques de la
seccin Sound1, arrastrar el bloque callSound1.Play al lienzo central, aproximndolo al bloque When Button1.Click
do, de modo que ambos encajen como en un rompecabezas, lo que la aplicacin nos indica con un sonoro clic,
perfectamente audible.
Una vez hecho esto, pulsando sobre la foto (esto es tocando la pantalla en la foto y retirando el dedo rpidamente, lo
que android considera un Click), oiremos como el telfono emite el maullido.

P
g
i
n
a
9

El Editor de bloques debe asemejarse a esto:

Embalaje de su aplicacin
Felicidades, tienes tu primera aplicacin en ejecucin! Si est usando un telfono, entonces la aplicacin se ejecuta
en el telfono, pero slo funciona cuando el telfono est conectado a App Inventor. Si se desenchufa el cable USB,
la aplicacin va a desaparecer. Puedes volver a conectar el telfono para hacer que regrese. Para obtener una
aplicacin que se ejecuta sin estar conectado a App Inventor, debes "empaquetar" la aplicacin para producir
un paquete de la aplicacin (archivo APK). Al pulsar paquete para el telfono (Package for phone) en la parte
superior derecha de la pgina del diseador se presentarn tres opciones:
1. Si el telfono est conectado, puedes descargar e instalar directamente la aplicacin en el telfono.
2. Puede descargar la aplicacin al ordenador, como un archivo APK, que se puede distribuir y compartir, e
instalar manualmente en los telfonos que utilizan el programa Android.
3. Se puede generar un cdigo de barras, que se puede utilizar para instalar la aplicacin en tu telfono con la
ayuda de un escner de cdigo de barras, como el escner de cdigo de barras ZXing (disponible
gratuitamente en el Android Market). Este cdigo de barras funciona slo para tu propio telfono.Si deseas
compartir la aplicacin con los dems, tendrs que descargar el archivo APK al ordenador y compartir el
archivo.

P
g
i
n
a
1
0

Resumen
Las ideas clave son las siguientes:
Puedes construir aplicaciones mediante la seleccin de los componentes (ingredientes) y luego decirles qu
hacer y cundo.
Puedes utilizar el Diseador para seleccionar los componentes. Algunos componentes sern visibles y otros no.
Puedes agregar elementos multimedia (imgenes, vdeos y sonidos) para las aplicaciones, cargndolos desde tu
ordenador.
Puede utilizar el Editor de bloques para ensamblar los bloques que definen el comportamiento adecuado de los
componentes, segn las acciones efectuadas por el usuario o la interaccin con otros componentes.

Bote De Pintura

En este tutorial se presenta el componente Canvas (Lienzo), til para la creacin de sencillos grficos de dos
dimensiones. Vas a construir una aplicacin que te permite dibujar en la pantalla del telfono en diferentes colores.
Lo que ests construyendo
Con la aplicacin BoteDePintura, puedes:
Sumergir el dedo en un bote de pintura virtual para dibujar en ese
color.
Arrastrar el dedo por la pantalla para dibujar una lnea.
Tocar la pantalla para hacer puntos.
Usar el botn en la parte inferior para limpiar la pantalla.
Incluir una imagen como fondo del dibujo.

Antes de comenzar
Asegrate que tu ordenador y telfono se han configurado correctamente para utilizar App Inventor, y de navegar
por el sitio web de App Inventor en http://beta.appinventor.mit.edu/ . Inicia un nuevo proyecto en el Designer , y
asgnale el nombre de BoteDePintura . Abre el Blocks Editor y haz clic en connect to phone (Conectar con telfono).
Asegrate de que en el telfono (o el emulador) se ha iniciado la aplicacin App Inventor.
Ttulo de la pantalla
Para empezar, acude a properties (Propiedades), en el panel de la derecha del designer (diseador) y cambia el
ttulo de la pantalla a BoteDePintura. Vers este cambio en el telfono, con el nuevo ttulo que se muestra en la
barra de ttulo.

P
g
i
n
a
1
1

Hay tres nombres en App Inventor que se pueden confundir:
1. El nombre que elijas para el proyecto, a medida que se trabaja en l. Este ser tambin el nombre de la
aplicacin del paquete para el telfono.
2. El nombre de "Screen1", que ver en el panel que muestra los componentes de la aplicacin. No se puede
cambiar este nombre en la versin actual de App Inventor.
3. El ttulo de la pantalla, que es lo que vers en la barra de ttulo del telfono. Esto empieza siendo "Screen1",
que es lo que has utilizado en HolaRonronea. Pero se puede cambiar, pues ya lo has hecho en
BoteDePintura.

Configuracin de los componentes
Vamos a usar estos componentes para hacer BoteDePintura:
Tres botones para la seleccin de pintura roja, azul o verde, y otro botn para limpiar el dibujo.
Un canvas (lienzo), la superficie de dibujo. Esta tela tiene un una imagen de fondo (BackgroundImage) , que
es el gatito del tutorial HolaRonronea. Tambin puedes dibujar en un canvas en blanco. Eso es slo
un canvas sin una imagen de fondo.
Tambin hay un componente que no se ve: se utiliza un HorizontalArrangement (alineamiento
horizontal) para las tres lneas de botones de arriba.
Eso hace cinco componentes en total. Vamos a desarrollar y compilar la aplicacin.

Botones de colores
Arrastra un componente Button al visor (Viewer) y cambia el atributo texto (text) del botn, que vers como
Button1, a "Rojo" y modifica su color de fondo (BackgroundColor) a rojo.
Haz clic en Button1 en components o en el viewer para resaltarlo (puede que ya se halle resaltado) y pulsa
sobre el botn Rename, situado en la parte inferior de la seccin components para cambiar su nombre
de Button1 a BotonRojo .
Del mismo modo, hacer dos botones ms para el azul y el verde, con el nombre BotonAzul y BotonVerde ,
que quedarn colocndolos verticalmente respecto al botn rojo.
As se ver en el diseador, con los nombres de los botones que aparecen en la lista de los componentes del
proyecto. En este proyecto estamos cambiando los nombres de los componentes, en lugar de dejarlos con los
nombres por defecto, como lo hicimos en HolaRonronea. El uso de nombres significativos hace tus proyectos ms
legibles para a ti mismo y para los dems.

P
g
i
n
a
1
2

Si lanzas el editor de bloques y conectas el telfono o el emulador, tambin vers los botones en la pantalla de los
mismos.

Diseo con alineamiento de pantalla
Ahora debes tener tres botones, uno encima del otro. El siguiente paso es hacer que se alineen
horizontalmente. Para ello, utiliza un componente HorizontalArrangement.
1. Desde el panel Palette arrastra un HorizontalArrangement y colcalo debajo de los botones. Cambia el
nombre de este componente de HorizontalArrangement1 a TresBotones.
2. En el panel Properties cambia el ancho (Width) de TresBotones de forma que ocupe todo el ancho de la
pantalla (a Fill Parent).
3. Mueve los tres botones al interior del HorizontalArrangement TresBotones . Sugerencia: Vers una lnea
azul vertical cuando estes colocando en un elemento de alineamiento, que nos indica donde caer el botn.
Si nos fijamos en la lista de los componentes del proyecto, podr ver los tres botones debajo de TresBotones con
sangra, lo que nos indica que son ahora sus subcomponentes. Tenga en cuenta que todos los componentes se
insertan debajo de BoteDePintura.

P
g
i
n
a
1
3

Tambin puedes ver la lnea de tres botones en una fila en la pantalla del telfono, aunque las cosas podran no ser
exactamente igual que en el Designer. Por ejemplo, la lnea perifrica del horizontalArrangement se muestra en
el Designer, pero no en el telfono.
En general, se utiliza alineamiento de pantalla para crear sencillos diseos verticales u horizontales. Puedes crear
diseos ms complejos por la anidacin de estos componentes.

Lienzo y botn de borrar
Los dos ltimos componentes son el Canvas y el botn de borrar.
1. Desde Palette arrastra un Canvas al Viewer. Cambia su nombre por el Lienzo . Establece su ancho
(Width) a fill parent. Establece su altura (Height) a 300 pxeles.
2. Agregar una imagen de fondo al Lienzo. Haz clic en el campo que contiene None ... junto
a BackgroundImage en las Properties de Lienzo. Puedes utilizar el archivo kitty.png que usaste en el tutorial
de Nuestra primera aplicacin, si todava lo tienes almacenado. O puedes utilizar otra imagen.
Puede utilizar cualquier imagen que quieras, pero obtendr los mejores resultados si el tamao de la imagen (en
pxeles) est cerca del tamao en el que se le d muestra en el telfono. Adems, las imgenes grandes se tardan
mucho en cargar, y podra superar la capacidad de memoria que los telfonos asignan para las aplicaciones.
3. Desde Palette, arrastra otro Button a la pantalla, colocndolo bajo el Lienzo. Cambia su nombre a
BotonBorra pulsando el botn Rename situado bajo Components. Cambia su atributo text situado en
Properties a Borrar.
Has completado los pasos para configurar el aspecto de la aplicacin. He aqu cmo vers el Designer.
A continuacin, vamos a definir el comportamiento de los componentes.
P
g
i
n
a
1
4

Aadir comportamientos a los componentes
Si no has abierto ya el editor de bloques, hazlo ahora pulsando sobre el boton Open the Blocks Editor. En primer
lugar vamos a configurar los botones que cambian el color de la pintura.
Agregar controladores de eventos de botn
En el Blocks editor:
1. Cambia a la columna My Blocks.
2. Abrir el cajn de BotonRojo y arrastra el bloque BotonRojo.Click al rea de trabajo.
3. Abre el cajn Lienzo. Arrastra el bloque set Lienzo.PaintColor to (puede que tengas que desplazarte por la
lista de bloques en el cajn para encontrarlo) y colcalo encajado a BotonRojo.Click . Cambia a la
columna Built-in. Abre el cajn Colors y arrastra el bloque del color Red y ponlo en el set Lienzo.PaintColor
to que llevaste antes al rea de trabajo.
Un modo ms rpido de seleccionar el bloque Red, una vez has colocado set Lienzo.PaintColor to, todava en My
Blocks pulsas en una zona vaca del rea de trabajo, y vers que te apareces los mismos cajones que te apareceran al
pulsar Built-in. Seleccionas Colors y en la lista que aparece seleccionas Red.
4. Repita los pasos 1-3 para los botones de color azul y verde. Fjate que, para tu comodidad, puedes tomar el
bloque set Lienzo.PaintColor to, tal como se indica en el paso 3, o bien puedes copiarlo desde el rea de
trabajo, seleccionando con el ratn el que pusiste antes y pulsando (en Windows) las teclas Ctrl+c (Ctrl y c a
la vez, que es copiar) y, posteriormente Ctrl+v (que es pegar). Lo copias 2 veces y encajas en los
bloques BotonAzul.Click y BotonVerde.Click
Tambin puedes copiar y pegar los bloques Lienzo.PaintColor to Red ya unidos y encajarlos, ya que posteriormente
puedes modificar el color del bloque Red. Si situas el ratn sobre el mismo vers que aparece un indicador de lista
desplegable que, si lo pulsas, te permite cambiar el color del bloque a azul y a verde, segn tus necesidades.
P
g
i
n
a
1
5

5. El botn para crear al final es el de Borrar. Vuelve a My Blocks. Haz un controlador de
eventos BotonBorra,Click arrastrndolo. Desde el cajn de Lienzo arrastra call Lienzo.Clear y encjalo en
BotonBorrar,Click .
Los bloques para los botones deberan tener este aspecto:

Agregar evento tctil controladores
Ahora para el siguiente paso: dibujar en el Lienzo. Vas a arreglar las cosas de manera que al tocar el Lienzo, se
obtenga un punto en el lugar donde se toca. Si se arrastra el dedo lentamente por el Lienzo, dibuja una lnea.
En el Editor de bloques, abrir el cajn para el Lienzo y arrastra el bloque Lienzo.Touched al rea de trabajo.
Tan pronto como se arrastra el bloque al rea de trabajo, los tres conectores de su lado derecho se rellenar
automticamente con los bloques llamados x , y , y touchedSprite .
Ya hemos visto eventos de botn clic. Clicks son simples, porque no hay nada que saber sobre el clic que no sea que
haya sucedido. Otros controladores de eventos, tales como when ...Touched necesita informacin sobre el
evento. En App Inventor, esta informacin se expresa como el valor de los argumentos relacionados con el
controlador de eventos. Para el caso de when ...Touched, los dos primeros argumentos X e Y representan las
coordenadas del lugar donde ocurri el contacto. Vamos a dejar el argumento touchedSprite para un tutorial ms
adelante.
Para este evento haremos que el lienzo dibuje un pequeo crculo en el punto situado en las coordenadas x , y .
Arrastra una llamada al comando Lienzo.DrawCircle desde el cajn del lienzo y colcala en la seccin do del
bloque Lienzo.Touched. En el lado derecho del bloque Lienzo.DrawCircle hay 3 conectores donde
especificar los valores para x e y, las coordenadas donde el crculo se dibujar, y r , que es el radio del
crculo.
P
g
i
n
a
1
6

Para x e y vamos a usar los valores de los argumentos que fueron suministrados al tocar la pantalla y que fueron
recogidos por el controlador Lienzo.Touched:
1. Abrir el cajn My Definitions en la parte superior de la columna My Blocks y localiza los bloques de value x ,
y value y. Los bloques se crearon automticamente cuando arrastaste el controlador Lienzo.Touched.
2. Arrastra los bloques value x , y value y y conctalos a los conectores correspondientes en el
bloque Lienzo.DrawCircle. Asegrate de arrastrar los bloques Value x e y, no los correspondientes bloques
Name x e y, que se ven muy similares.
Tambin tendrs que especificar el radio del crculo a dibujar. Cinco (pxeles) es un buen valor para esta aplicacin:
Haga clic en un rea vaca de la pantalla para abrir el men activable y seleccionar Math (verde). Selecciona
123 de la lista desplegable que aparece, para crear un bloque de Number. Pulsa sobre el 123 contenido
dentro del bloque Number, y cmbialo a 5. Finalmente encjalo en el conector r, del radio.
Tambin puedes simplemente escribir 5 seguido de retorno, para crear un bloque de nmeros con un valor de 5. Este
es un ejemplo de typeblocking : si usted comienza a escribir, el editor de bloques muestra una lista de bloques cuyos
nombres coincidan con lo que est escribiendo, y si se escribe un nmero se crea un bloque de nmeros.
As es como el controlador de eventos Lienzo.Touched debe quedar:

Prueba lo que tenemos hasta ahora en el telfono. Toca un botn de color. Ahora toca el lienzo, y el dedo debe dejar
una mancha en cada lugar que toque. Al tocar el botn borrar debe desaparecer el dibujo.
Aadir eventos de arrastre
Por ltimo, agregar el controlador de evento de arrastre. Aqu est la diferencia entre un toque y arrastre:
Tocar es cuando se coloca el dedo sobre el lienzo y la levanta sin moverlo.
Arrastrar es cuando se coloca el dedo sobre el lienzo y de mueve el dedo mientras se mantiene en contacto.
Al arrastrar el dedo por la pantalla, parece trazar una lnea larga, que se curva donde se movi el dedo. En realidad
estamos pintando cientos de pequeas lneas rectas: cada vez que mueves el dedo, aunque sea un poco, se extiende
la lnea desde la posicin inmediata anterior del dedo a su nueva posicin.
Un evento de arrastre viene con 6 argumentos. Se trata de tres pares de coordenadas x e y que son:
P
g
i
n
a
1
7

La posicin del dedo donde comenz el arrastre.
La posicin actual del dedo.
La posicin inmediatamente anterior del dedo.
Tambin hay un objeto Sprite, que de momento vamos a idejar para este tutorial.
Ahora posibilitaremos trazar una lnea entre la posicin anterior y la posicin actual del dedo mediante la creacin de
un manejador de arrastre:
1. Desde el cajn Lienzo, arrastra el bloque Lienzo.Dragged al rea de trabajo.
2. Tambin desde el cajn Lienzo, arrastra el bloque de llamada Lienzo.DrawLine y encjalo en el sector
do del bloque Lienzo.Dragged
3. Haz clic en el cajn My Definitions. Vers los bloques de los argumentos que necesitas. Arrastra los
valores de los bloques a los conectores correspondientes Lienzo.Dragged: x1 e y1 debe
ser prevx y prevY , x2 e y2 debe ser CurrentX y CurrentY
Aqu est el resultado:

Pon a prueba tu trabajo, verificndolo en el telfono: arrastra el dedo por la pantalla para dibujar lneas y
curvas. Toca la pantalla para hacer puntos. Utiliza Borrar para limpiar la pantalla.

P
g
i
n
a
1
8

Resumen
Estas son algunas de las ideas que se tratan en este tutorial:
Puede utilizar los componentes de alineamiento de la pantalla para especificar formatos de pantalla
diferentes a la simple ubicacin de los componentes uno debajo del otro.
El componente Canvas te permite dibujar sobre ella. Tambin puede detectar toques y arrastres.
Algunos controladores de eventos devuelven informacin sobre el evento, tales como las coordenadas de la
pantalla donde se ha tocado con el dedo. Esta informacin viene contenida en los argumentos. Cuando se
selecciona un controlador de eventos que tiene argumentos, App Inventor crea bloques Value para operar
ese informacin y los coloca en el cajn My Definitions.

Crea tu primera app Android con App Inventor: HolaRonronea

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Crea tu primera app Android con App Inventor: HolaRonronea

Uploaded by

Copyright:

Available Formats

IES Miguel de Cervantes TICO 1 Bachillerato

UNIDAD 9: Programacin de aplicaciones para ANDROID

You might also like