UD09 Programacion android con app inventor.pdf

IES Miguel de Cervantes TICO 1 Bachillerato

UNIDAD 9: Programacin de aplicaciones para ANDROID

Pg

ina1

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.



Pg

ina2

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.



Pg

ina3

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:



Pg

ina4

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:



Pg

ina5

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.



Pg

ina6

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.



Pg

ina7

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.



Pg

ina8

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.



Pg

ina9

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.



Pg

ina1

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.



Pg

ina1

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.



Pg

ina1

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.



Pg

ina1

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.



Pg

ina1

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.



Pg

ina1

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.



Pg

ina1

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:



Pg

ina1

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.



Pg

ina1

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.

Documents

UD09 Programacion android con app inventor.pdf