UD09 Programacion android con app inventor.pdf

IES Miguel de Cervantes

TICO 1º Bachillerato

Programación de aplicaciones para ANDROID con APP INVENTOR 1. ¿Qué es App Inventor? App Inventor permite desarrollar aplicaciones para teléfonos basados en el sistema operativo Android mediante un navegador web, bien con un teléfono conectado al ordenador o con un emulador. Fue desarrollado por Google, a través 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 través 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, almacenarán tu trabajo y te ayudarán a realizar un seguimiento de tus proyectos.

Para construir aplicaciones se trabaja con: 

El Diseñador de App Inventor (App Inventor Designer), donde podrás seleccionar los componentes para tu aplicación.



El Editor de Bloques de App Inventor (App Inventor Blocks Editor), donde se ensamblan los bloques del programa para especificar cómo deben comportarse sus componentes. Los programas se desarrollan visualmente, ensamblando piezas que se juntan encajando como las de un rompecabezas.

La aplicación que se desarrolla aparece en el teléfono paso a paso, a medida que añaden 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 aplicación independiente para instalar. Aunque no se disponga de un teléfono 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 teléfono respecto a la misma.

Página

1

El entorno de desarrollo de App Inventor es compatible con Mac OS X, GNU/Linux, con Windows y con la mayoría de teléfonos Android. Las aplicaciones creadas con App Inventor se pueden instalar en cualquier teléfono Android.

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

2. Configura tu equipo Pon a prueba tu configuración de Java Tu ordenador debe ejecutar Java 6 (también conocido como Java 1.6) o superior. Pon a prueba tu configuración de Java mediante la realización de las dos pruebas siguientes:

1. Visite la página de prueba de Java . Usted debe ver un mensaje que Java está funcionando y que es la versión 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 instalación de App Inventor (en Windows)

Te recomendamos efectuar la instalación desde una cuenta de tu ordenador que tenga privilegios de administrador. Esto instalará el software para todos los usuarios de la máquina. Si no tienes esos privilegios, la instalación debería funcionar, pero App Inventor sólo podrán utilizarse en la cuenta que utilizaste durante la instalación. 1. Descarga el instalador. Es un archivo llamado AppInventor_Setup_Installer_v_1_2.exe, de unos 92 MB. 2. La ubicación de la descarga en tu equipo depende de cómo esté configurado tu navegador. Puede hallarse, tal vez, en la carpeta de descargas (download), o en el escritorio. En todo caso, localízalo. 3. Ejecuta el archivo. Sigue los pasos indicados por el instalador, haciendo clic en ellos. No cambies la ubicación de la instalación, pero recuerda la carpeta donde se instaló, ya que la necesitarás más adelante. Esta carpeta varía según la versión de Windows y si utilizamos o no una cuenta de administrador.

3. Tutoriales Tu primera aplicación Vamos a crear la primera aplicación con nuestro teléfono Android: HolaRonronea

El Diseñador (designer), el lugar donde se diseña la aplicación. Se ejecuta en el navegador web.



El Editor de bloques (blocks editor), aplicación Java donde configuramos el comportamiento de nuestro desarrollo. Es una aplicación independiente, que corre en una ventana diferente a la instancia del navegador.



El teléfono, conectado al ordenador mediante un cable USB. Puede ser sustituido por el Emulador.

UNIDAD 9: Programación de aplicaciones para ANDROID

Página



2

A medida que desarrollemos Hola Ronronea, aprenderás cómo utilizar las tres herramientas fundamentales de trabajo de App Inventor:

IES Miguel de Cervantes

TICO 1º Bachillerato

Para construir Hola Ronronea tendrás 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 página web de App Inventor en http://beta.appinventor.mit.edu/ . Si esta es la primera vez que has usado App Inventor, verás la página de Proyectos vacía, sin proyectos en ella todavía. Debería tener este aspecto:

Crear un nuevo proyecto 1. Haga clic en New en el lado izquierdo, cerca de la parte superior de la página. 2. Introduzca el nombre del proyecto HolaRonronea (una sola palabra, sin espacios) en el cuadro de diálogo que aparece, haga clic en Aceptar.

Página

3

El navegador abrirá el Diseñador, el lugar donde se seleccionan los componentes para su aplicación, y debe tener este aspecto:

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

Seleccione los componentes para el diseño de su aplicación Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño, bajo el título Palette. Los componentes son los elementos básicos que se utilizan para hacer las aplicaciones en el teléfono Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente Label, que sólo muestra un texto en la pantalla, o el componente Button que mostrará un botón en la pantalla del teléfono que al ser pulsado iniciará una acción. Otros componentes son más elaborados: el componente Canvas es un lienzo de dibujo que puede almacenar imágenes fijas o animaciones, el AccelerometerSensor es un sensor de movimiento que funciona como un mando de Wii y detecta cuando movemos o agitamos el teléfono, los componentes que crean o envían mensajes de texto, los componentes que reproducen música y video, componentes capaces de obtener información de sitios Web, y así sucesivamente. Para utilizar un componente en su aplicación, tendrá que hacer clic y se arrastra sobre el visor (Viewer), en el centro de la pantalla de diseño. Cuando añadas un componente en el visor, también 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 aplicación. 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 configuración Queremos que HolaRonronea tenga un botón 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 sección Basic de la paleta (palette). 2. En la lista de propiedades de Button1, el botón 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.

Página

4

Tu diseño debería tener este aspecto:

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

Abre el Editor de bloques (Blocks Editor) El diseñador (Designer) es una de las tres herramientas clave que utilizarás en la creación de aplicaciones. El segundo es el Editor de bloques. El tercero es el teléfono. Vamos a usar el Editor de bloques para asignar los comportamientos de los componentes, como qué debe suceder cuando el usuario de la aplicación presiona un botón. 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 diseño, el archivo de programa del editor de bloques se debe descargar y ejecutar. Este proceso puede tardar 30 segundos o más. 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 vacío para la colocación de los bloques que uniremos para montar el programa, que se va a hacer a continuación.

Antes de continuar con la construcción de la aplicación, tendrás que conectar el teléfono. Asegúrete de que se ha configurado el teléfono de modo correcto . Ahora conecta tu teléfono 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. Verás una lista desplegable con el teléfono 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 teléfono, indicando que App Inventor se está conectando al teléfono. El establecimiento de esta conexión puede tardar un minuto o dos. Una vez la conexión se completa, la flecha deja de moverse y se pone verde, y si nos fijamos en la pantalla del teléfono, verás el gatito. ¡La aplicación empieza a ejecutarse! Si, por el contrario, no dispones de teléfono y quieres desarrollar la aplicación con el emulador, sustituye lo indicado en el párrafo anterior por lo siguiente:

UNIDAD 9: Programación de aplicaciones para ANDROID

Página

5

Haz clic en el botón Nuevo emulador (New Emulator) en la parte superior de la ventana. Recibirás 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 continuación. Incluso después de que el fondo aparezca, debes esperar hasta que el teléfono emulado ha terminado la preparación de su tarjeta SD: verás un aviso en la parte superior de la pantalla del teléfono mientras la tarjeta está siendo preparada. Puede ser necesario usar el puntero del ratón sobre la pantalla del teléfono emulado para desbloquear el dispositivo, arrastrando el botón de bloqueo verde a la derecha.

IES Miguel de Cervantes

TICO 1º Bachillerato

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 móvil, indicando que App Inventor está conectándose al teléfono emulado. La creación de esta conexión puede tardar un minuto o dos. Cuando termine, la flecha dejará de moverse y se pone verde, y en la pantalla del teléfono emulado, verás el gatito. ¡La aplicación se ha iniciado! En este punto, debes tener el diseñador abierto en el navegador, el editor de bloques abierto en otra ventana, y el dispositivo elegido (teléfono o emulador) conectado con el Editor de bloques. A continuación haremos lo siguiente para completar la aplicación: En el Diseñador: 

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 botón.

Adición de la etiqueta En la paleta y el visor: 1. Arrastra y suelta el componente Label hasta el visor (Viewer) , situándolo 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 verás aparecer este texto en el botón en tu ordenador y en el dispositivo Android.

4. Cambiar el tamaño de su fuente (FontSize) de Label1 poniéndola a 30. UNIDAD 9: Programación de aplicaciones para ANDROID

Página

3. Cambiar el color del texto (TextColor) de Label1, por ejemplo pasándolo a amarillo.

6

2. Cambiar el Color de fondo (BackgroundColor) de Label1. Puedes cambiar a azul.

IES Miguel de Cervantes

TICO 1º Bachillerato

El diseñador debe parecerse a esto:

Agregando el maullido En la paleta (Palette): 1. Haz clic en la sección Media para ampliarla y ver sus componentes. 2. Arrastra un componente Sound y colócalo 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)

Página

7

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

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

El diseñador debe parecerse a esto:

Hacer el juego de sonido Con el Editor de bloques vamos a definir la forma en que la aplicación se va a comportar. Le diremos a los componentes lo que deben hacer y cuándo hacerlo. Vas a decirle al botón, que en realidad es la fotografía 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 elaboración del plato. El editor de bloques tiene dos pestañas en la esquina superior izquierda: Integrados (Built-in) y mis bloques (My blocks). Los botones situados debajo de cada pestaña muestran los bloques cuando se hace clic. Los Integrados son un conjunto de bloques genérico, que encontraremos disponibles independientemente de la aplicación que vayamos a crear. Son siempre los mismos. Los bloques debajo de la pestaña de mis bloques contienen bloques específicos, vinculados con el conjunto de componentes que hemos elegido para la aplicación. Varían según los componentes seleccionados previamente y cambian si cambiamos componentes sobre la marcha. Para hacer que se reproduzca el sonido al tocar (pulsar) el botón con la foto del gatito, tendrás que pulsar la pestaña My Blocks, desplegar los bloques de la sección 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 botón y, tras desplegar los bloques de la sección Sound1, arrastrar el bloque callSound1.Play al lienzo central, aproximándolo al bloque When Button1.Click do, de modo que ambos encajen como en un rompecabezas, lo que la aplicación nos indica con un sonoro clic, perfectamente audible.

Página

8

Una vez hecho esto, pulsando sobre la foto (esto es tocando la pantalla en la foto y retirando el dedo rápidamente, lo que android considera un Click), oiremos como el teléfono emite el maullido.

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

El Editor de bloques debe asemejarse a esto:

Embalaje de su aplicación ¡Felicidades, tienes tu primera aplicación en ejecución! Si está usando un teléfono, entonces la aplicación se ejecuta en el teléfono, pero sólo funciona cuando el teléfono está conectado a App Inventor. Si se desenchufa el cable USB, la aplicación va a desaparecer. Puedes volver a conectar el teléfono para hacer que regrese. Para obtener una aplicación que se ejecuta sin estar conectado a App Inventor, debes "empaquetar" la aplicación para producir un paquete de la aplicación (archivo APK). Al pulsar paquete para el teléfono (Package for phone) en la parte superior derecha de la página del diseñador se presentarán tres opciones: 1. Si el teléfono está conectado, puedes descargar e instalar directamente la aplicación en el teléfono. 2. Puede descargar la aplicación al ordenador, como un archivo APK, que se puede distribuir y compartir, e instalar manualmente en los teléfonos que utilizan el programa Android.

Página

9

3. Se puede generar un código de barras, que se puede utilizar para instalar la aplicación en tu teléfono con la ayuda de un escáner de código de barras, como el escáner de código de barras ZXing (disponible gratuitamente en el Android Market). Este código de barras funciona sólo para tu propio teléfono.Si deseas compartir la aplicación con los demás, tendrás que descargar el archivo APK al ordenador y compartir el archivo.

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

Resumen Las ideas clave son las siguientes: 

Puedes construir aplicaciones mediante la selección de los componentes (ingredientes) y luego decirles qué hacer y cuándo.



Puedes utilizar el Diseñador para seleccionar los componentes. Algunos componentes serán visibles y otros no.



Puedes agregar elementos multimedia (imágenes, vídeos y sonidos) para las aplicaciones, cargándolos desde tu ordenador.



Puede utilizar el Editor de bloques para ensamblar los bloques que definen el comportamiento adecuado de los componentes, según las acciones efectuadas por el usuario o la interacción con otros componentes.

Bote De Pintura

En este tutorial se presenta el componente Canvas (Lienzo), útil para la creación de sencillos gráficos de dos dimensiones. Vas a construir una aplicación que te permite dibujar en la pantalla del teléfono en diferentes colores. Lo que estás construyendo Con la aplicación 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 línea.



Tocar la pantalla para hacer puntos.



Usar el botón en la parte inferior para limpiar la pantalla.



Incluir una imagen como fondo del dibujo.

Antes de comenzar Asegúrate que tu ordenador y teléfono 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 asígnale el nombre de BoteDePintura . Abre el Blocks Editor y haz clic en connect to phone (Conectar con teléfono). Asegúrate de que en el teléfono (o el emulador) se ha iniciado la aplicación App Inventor. Título de la pantalla

Página

10

Para empezar, acude a properties (Propiedades), en el panel de la derecha del designer (diseñador) y cambia el título de la pantalla a BoteDePintura. Verás este cambio en el teléfono, con el nuevo título que se muestra en la barra de título.

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

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á también el nombre de la aplicación del paquete para el teléfono. 2. El nombre de "Screen1", que verá en el panel que muestra los componentes de la aplicación. No se puede cambiar este nombre en la versión actual de App Inventor. 3. El título de la pantalla, que es lo que verás en la barra de título del teléfono. Esto empieza siendo "Screen1", que es lo que has utilizado en HolaRonronea. Pero se puede cambiar, pues ya lo has hecho en BoteDePintura.

Configuración de los componentes Vamos a usar estos componentes para hacer BoteDePintura: 

Tres botones para la selección de pintura roja, azul o verde, y otro botón 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. También puedes dibujar en un canvas en blanco. Eso es sólo un canvas sin una imagen de fondo.



También hay un componente que no se ve: se utiliza un HorizontalArrangement (alineamiento horizontal) para las tres líneas de botones de arriba.

Eso hace cinco componentes en total. Vamos a desarrollar y compilar la aplicación.

Botones de colores 

Arrastra un componente Button al visor (Viewer) y cambia el atributo texto (text) del botón, que verás 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 botón Rename, situado en la parte inferior de la sección components para cambiar su nombre de Button1 a BotonRojo .



Del mismo modo, hacer dos botones más para el azul y el verde, con el nombre BotonAzul y BotonVerde , que quedarán colocándolos verticalmente respecto al botón rojo.

Página

11

Así se verá en el diseñador, 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 más legibles para a ti mismo y para los demás.

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

Si lanzas el editor de bloques y conectas el teléfono o el emulador, también verás los botones en la pantalla de los mismos.

Diseño 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 colócalo 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: Verás una línea azul vertical cuando estes colocando en un elemento de alineamiento, que nos indica donde caerá el botón.

Página

12

Si nos fijamos en la lista de los componentes del proyecto, podrá ver los tres botones debajo de TresBotones con sangría, lo que nos indica que son ahora sus subcomponentes. Tenga en cuenta que todos los componentes se insertan debajo de BoteDePintura.

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

También puedes ver la línea de tres botones en una fila en la pantalla del teléfono, aunque las cosas podrían no ser exactamente igual que en el Designer. Por ejemplo, la línea periférica del horizontalArrangement se muestra en el Designer, pero no en el teléfono. En general, se utiliza alineamiento de pantalla para crear sencillos diseños verticales u horizontales. Puedes crear diseños más complejos por la anidación de estos componentes.

Lienzo y botón de borrar Los dos últimos componentes son el Canvas y el botón 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 píxeles. 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 aplicación, si todavía lo tienes almacenado. O puedes utilizar otra imagen. Puede utilizar cualquier imagen que quieras, pero obtendrá los mejores resultados si el tamaño de la imagen (en píxeles) está cerca del tamaño en el que se le dé muestra en el teléfono. Además, las imágenes grandes se tardan mucho en cargar, y podría superar la capacidad de memoria que los teléfonos asignan para las aplicaciones.

A continuación, vamos a definir el comportamiento de los componentes. UNIDAD 9: Programación de aplicaciones para ANDROID

Página

Has completado los pasos para configurar el aspecto de la aplicación. He aquí cómo verás el Designer.

13

3. Desde Palette, arrastra otro Button a la pantalla, colocándolo bajo el Lienzo. Cambia su nombre a BotonBorra pulsando el botón Rename situado bajo Components. Cambia su atributo text situado en Properties a Borrar.

IES Miguel de Cervantes

TICO 1º Bachillerato

Añadir 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 botón En el Blocks editor: 1. Cambia a la columna My Blocks. 2. Abrir el cajón de BotonRojo y arrastra el bloque BotonRojo.Click al área de trabajo. 3. Abre el cajón Lienzo. Arrastra el bloque set Lienzo.PaintColor to (puede que tengas que desplazarte por la lista de bloques en el cajón para encontrarlo) y colócalo encajado a BotonRojo.Click . Cambia a la columna Built-in. Abre el cajón 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 más rápido de seleccionar el bloque Red, una vez has colocado set Lienzo.PaintColor to, todavía en My Blocks pulsas en una zona vacía del área de trabajo, y verás que te apareces los mismos cajones que te aparecerían al pulsar Built-in. Seleccionas Colors y en la lista que aparece seleccionas Red.

También 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 ratón sobre el mismo verás que aparece un indicador de lista desplegable que, si lo pulsas, te permite cambiar el color del bloque a azul y a verde, según tus necesidades. UNIDAD 9: Programación de aplicaciones para ANDROID

Página

14

4. Repita los pasos 1-3 para los botones de color azul y verde. Fíjate 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 ratón 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

IES Miguel de Cervantes

TICO 1º Bachillerato

5. El botón para crear al final es el de Borrar. Vuelve a My Blocks. Haz un controlador de eventos BotonBorra,Click arrastrándolo. Desde el cajón de Lienzo arrastra call Lienzo.Clear y encájalo en BotonBorrar,Click . Los bloques para los botones deberían tener este aspecto:

Agregar evento táctil 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 línea. 

En el Editor de bloques, abrir el cajón 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 automáticamente con los bloques llamados x , y , y touchedSprite . Ya hemos visto eventos de botón 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 información sobre el evento. En App Inventor, esta información 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 más adelante. Para este evento haremos que el lienzo dibuje un pequeño círculo en el punto situado en las coordenadas x , y .

UNIDAD 9: Programación de aplicaciones para ANDROID

15

Arrastra una llamada al comando Lienzo.DrawCircle desde el cajón del lienzo y colócala en la sección 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 círculo se dibujará, y r , que es el radio del círculo.

Página



IES Miguel de Cervantes

TICO 1º Bachillerato

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 cajón 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 automáticamente cuando arrastaste el controlador Lienzo.Touched. 2. Arrastra los bloques value x , y value y y conéctalos a los conectores correspondientes en el bloque Lienzo.DrawCircle. Asegúrate de arrastrar los bloques Value x e y, no los correspondientes bloques Name x e y, que se ven muy similares. También tendrás que especificar el radio del círculo a dibujar. Cinco (píxeles) es un buen valor para esta aplicación: 

Haga clic en un área vacía 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 cámbialo a 5. Finalmente encájalo en el conector r, del radio.

También puedes simplemente escribir 5 seguido de retorno, para crear un bloque de números 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 número se crea un bloque de números. Así es como el controlador de eventos Lienzo.Touched debe quedar:

Prueba lo que tenemos hasta ahora en el teléfono. Toca un botón de color. Ahora toca el lienzo, y el dedo debe dejar una mancha en cada lugar que toque. Al tocar el botón borrar debe desaparecer el dibujo. Añadir 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.

Un evento de arrastre viene con 6 argumentos. Se trata de tres pares de coordenadas x e y que son: UNIDAD 9: Programación de aplicaciones para ANDROID

Página

16

Al arrastrar el dedo por la pantalla, parece trazar una línea larga, que se curva donde se movió el dedo. En realidad estamos pintando cientos de pequeñas líneas rectas: cada vez que mueves el dedo, aunque sea un poco, se extiende la línea desde la posición inmediata anterior del dedo a su nueva posición.

IES Miguel de Cervantes 

La posición del dedo donde comenzó el arrastre.



La posición actual del dedo.



La posición inmediatamente anterior del dedo.

TICO 1º Bachillerato

También hay un objeto Sprite, que de momento vamos a idejar para este tutorial. Ahora posibilitaremos trazar una línea entre la posición anterior y la posición actual del dedo mediante la creación de un manejador de arrastre: 1. Desde el cajón Lienzo, arrastra el bloque Lienzo.Dragged al área de trabajo. 2. También desde el cajón Lienzo, arrastra el bloque de llamada Lienzo.DrawLine y encájalo en el sector do del bloque Lienzo.Dragged 3. Haz clic en el cajón My Definitions. Verás 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:

Página

17

Pon a prueba tu trabajo, verificándolo en el teléfono: arrastra el dedo por la pantalla para dibujar líneas y curvas. Toca la pantalla para hacer puntos. Utiliza Borrar para limpiar la pantalla.

UNIDAD 9: Programación de aplicaciones para ANDROID

IES Miguel de Cervantes

TICO 1º Bachillerato

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 ubicación de los componentes uno debajo del otro.



El componente Canvas te permite dibujar sobre ella. También puede detectar toques y arrastres.



Algunos controladores de eventos devuelven información sobre el evento, tales como las coordenadas de la pantalla donde se ha tocado con el dedo. Esta información viene contenida en los argumentos. Cuando se selecciona un controlador de eventos que tiene argumentos, App Inventor crea bloques Value para operar ese información y los coloca en el cajón My Definitions.

Página

18



UNIDAD 9: Programación de aplicaciones para ANDROID