ProgramacinAndroid

InstitutoTecnolgicodeIguala

Programacin Android

INTRODUCCIN

ITI

Pgina 1

Programacin Android

Qu es Android?
Android es un sistema operativo para dispositivos mviles, basado en una versin modificada de Linux. Google posee Android, pero no te cobran por usarlo. Programadores pueden escribir aplicaciones gratis.

Caractersticas

Almacenamiento Utiliza SQLite, una base de datos relacional muy ligera. Conectividad Soporta GSM/EDGE, IDEN, CDMA, EV-DO, UMTS, Bluetooth (A2DP y AVRCP), WiFi, LTE y WiMAX. Mensajes SMS y MMS. Navegador web Basado en el open source WebKit, con el motor de Chrome V8. Soporte multimedia - H.263, H.264 (3GP o MP4), MPEG-4 SP, AMR, AMRWB (3GP), AAC, HE-AAC (MP4 o 3GP), MP3, MIDI, Ogg Vorbis, WAV, JPEG, PNG, GIF, and BMP. Soporte de HardWare Acelerometro, cmara, brujula digital, sensor de proximidad y gps. Multitoque Soporta pantallas multitoque. Multitarea Soporta aplicaciones multitarea. Soporte para Flash Android 2.3 en adelante.

Versiones
Octubre 2008 Android 1.0 o API Level 1 Febrero 2009 Android 1.1 API o Level 2 Abril 2009 Android 1.5 Cupcake o API Level 3 Septiembre 2009 Android 1.6 Donut o API Level 4 Noviembre 2009 Android 2.0 clair o API Level 5 Diciembre 2009 Android 2.0.1 o API Level 6 Enero 2009 - Android 2.1 o API Level 7 Mayo 2010 Android 2.2 - Froyo o API Level 8
Pgina 2

ITI

Programacin Android

Diciembre 2010 Android 2.3 Gingerbread o API Level 9 y 10 Enero 2011 Android 3.0, 3.1 y 3.2 Honeycomb o API Level 11, 12 y 13 Noviembre 2011 Android 4.0 Ice Cream Sandwich o API Level 14 y 15 Semana pasada Android 4.1 Jelly Bean o API Level 16

Algunas estadsticas sobre el uso de Android

A continuacin algunos datos sobre el nmero relativo de productos activos que ejecutan una determinada versin de la plataforma Android. Esto nos puede ayudar a entender el panorama de la distribucin del dispositivo y decidir que versin de Android utilizar al programar. La siguiente grfica y tabla se basan en el nmero de dispositivos Android que han accedido a Google Play en un plazo de 14 das, del 18 de mayo al 1 de junio del 2012.

Fig. 1.1 Datos recogidos durante un perodo de 14 das que concluy el 01 de junio 2012.

Distribucin histrica. La siguiente grfica proporciona un historial de la cantidad relativa de los dispositivos Android activos ejecutando diferentes versiones de la plataforma Android. Proporciona tambin, una valiosa perspectiva de la cantidad de dispositivos, con los que su aplicacin es compatible, basado en la versin de la plataforma.
ITI Pgina 3

Programacin Android

Note que las versiones de la plataforma estn apiladas, con la versin ms antigua en la parte superior. Este formato indica el porcentaje total de los dispositivos activos que son compatibles con una determinada versin de Android. Por ejemplo, si usted desarrolla su aplicacin para la versin que se encuentra en la parte superior de la tabla, a continuacin, su aplicacin es compatible con el 100% de los dispositivos activos (y todas las futuras versiones). O, si usted desarrolla con una versin de la parte inferior en la tabla, entonces es actualmente compatible con el porcentaje de dispositivos indicados en el eje y, donde la lnea de esa versin cruza el eje de la derecha. Cada conjunto de datos en la lnea de tiempo se basa en el nmero de dispositivos Android que accede a Google Play en un plazo de 14 das, que finaliza en la fecha indicada en el eje x.

Fig. 1.2 Datos histricos recogidos durante un perodo de 14 das.

Competidores
Apple o iPhone OS RIM o Blackberry Microsoft o Windows Mobile 6.5 Phone 7 Series Symbian Foundation o Symbian OS Palm o WebOS

ITI

Pgina 4

Programacin Android

En las siguientes grficas podemos analizar visualmente los cambios en el protagonismo de los Sistemas Operativos para Smartphones de 2010 a 2011 (estimaciones, por Canalys). En 2010 se enviaron a clientes 299.7 millones de unidades de Smartphones, mientras que las estimaciones en 2011 es de 487.7 millones, un 62.77% de aumento. Android ya lidera en las tres regiones en 2011, meritorio teniendo en cuenta que en 2010 solo se vislumbraba como primera opcin en Amrica, con 3.8 puntos por encima de su inmediato perseguidor, Blackberry. El ao pasado ha sido clave para que Android se consolidara como sistema operativo lder, ya no solo desde el punto de vista de eleccin por parte del usuario final, sino tambin porque fabricantes de todo el mundo han decidido confiar en la marca de Google: compaas como Fujitsu, NEC o Sharp de Japn; Motorola de USA; Sony Ericsson (ahora Sony) de Europa; LG y Samsung de Corea; HTC de Taiwn; ZTE y Huawei Device de china.

Fig. 1.3 Distribucin de sistemas operativos, Europa, Medio Oriente y frica

ITI

Pgina 5

Programacin Android

Fig. 1.4 Distribucin de sistemas operativos, Amrica

Dispositivos que usan Android

HTC o Dream, Magic (myTouch3G), Hero, Tattoo, Nexus One(*), Desire, Legend Motorola o CLIQ, Droid (Milestone), DEXT Acer, Archos, Dell, Huawei, Lenovo, LG, Samsumg, Sony Ericsson,

ITI

Pgina 6

Programacin Android

Arquitectura de Android
Para entender cmo funciona Android, echemos un vistazo a la Figura 1.5, que muestra las diversas capas que componen el sistema operativo Android. El sistema operativo Android esta dividido en cuatro capas y cinco secciones.

Fig. 1.5 Capas de android

Linux Kernell - Android esta basado en un ncleo de Linux. Esta capa contiene los controladores de bajo nivel para los diferentes componentes de hardware de un dispositivo Android. Libraries - Contienen todo el cdigo que proporciona las caractersticas principales de un sistema operativo Android. Por ejemplo, la biblioteca de SQLite ofrece soporte de base de datos para que una aplicacin pueda utilizar el almacenamiento de datos usando este manejador. La biblioteca WebKit proporciona funcionalidades para la navegacin web, etc. Android Runtime - Se encuentra en la misma capa que las libreras, nos da otro conjunto de libreras esenciales que nos permiten escribir aplicaciones de Android usando el lenguaje de programacin Java. Incluye tambin la mquina virtual Dalvik, que permite a cada aplicacin Android ejecutar su propio proceso, con su propia instancia DVM (mquina virtual Dalvik). Dalvik es una mquina virtual especializada, diseada

ITI

Pgina 7

Programacin Android

especficamente para Android y optimizada para dispositivos mviles con memoria y CPU limitados. Application framework - Expone las diversas capacidades del sistema operativo Android a los desarrolladores para que puedan hacer uso de ellas en sus aplicaciones. Applications. En esta capa, se encuentran las aplicaciones que se incluyen con el dispositivo Android (tales como telfono, contactos, navegador, etc), as como las aplicaciones que se pueden descargar e instalar desde el Android Market. Todas las aplicaciones desarrollemos se encontraran en esta capa.

Hasta aqu la introduccin. Pasaremos ahora a conocer la herramienta de desarrollo.

ITI

Pgina 8

Programacin Android

HERRAMIENTA DE DESARROLLO

ITI

Pgina 9

Programacin Android

App Inventor
App Inventor es un nuevo sistema de Google que permite disear y desarrollar aplicaciones Android a travs de una pgina Web y una interfaz Java. Con conocimientos mnimos de programacin, podemos utilizar App Inventor para crear apps desde las ms sencillas hasta las ms complejas. Un poco mas a fondo, App Inventor es una herramienta visual de arrastrar y soltar para la creacin de aplicaciones mviles en Android. Podemos disear la interfaz de usuario (el aspecto visual) de una aplicacin utilizando un constructor de interfaces de usuario grficas (GUI) basado en web, a continuacin, especificar el comportamiento de la aplicacin juntando bloques como si estuviramos armando un rompecabezas. En la figura 2.1 se muestran los bloques de una aplicacin bsica.

Fig. 2.1 Los bloques del App Inventor especifican la funcionalidad de nuestra app.

Beneficios de App Inventor

No es necesario recordar ni escribir instrucciones. Una de las mayores frustraciones para los nuevos programadores es, escribir cdigo y que el computadora devuelva solo mensajes de error indescifrables. Esto lleva a muchos
ITI Pgina 10

Programacin Android

principiantes a renunciar antes de que lleguen a la parte ms divertida, la resolucin de problemas lgicos. Conjunto de opciones. Con App Inventor, los componentes y bloques estn organizados y disponibles todo el tiempo par el programador. Programaremos encontrando bloques que ayudarn a especificar la funcionalidad que queremos construir- y arrastrndolos a nuestro programa. Bloques conectados. Al igual que en un rompecabezas, en App Inventor solo algunas piezas encajan entre si. En lugar de castigar a los programadores con mensajes de error crpticos, el lenguaje de bloques en App Inventor impide que nos equivoquemos. Manejamos eventos de manera directa. Los lenguajes de programacin tradicionales fueron diseados cuando la programacin era como trabajar con recetas, o procedimientos. Sin embargo, con interfaces grficas, y sobre todo con aplicaciones mviles donde los eventos pueden ocurrir en cualquier momento (por ejemplo, recibir un mensaje de texto o una llamada telefnica), la mayora de los programas se resuelven con controladores de eventos. Un controlador de eventos es una forma de decir: "Cuando sucede esto, la aplicacin hace esto". En un lenguaje tradicional como Java, tendramos que aprender clases, objetos, y objetos especiales llamados escuchas (listeners) para formular un simple evento. Con App Inventor solo tenemos que arrastrar el bloque Cuando a nuestro programa.

Qu tipo de Apps podemos desarrollar con Inventor?

Podemos construir diferentes tipos de aplicaciones con App Inventor. Usemos nuestra imaginacin, desarrollemos todo tipo de aplicaciones divertidas y tiles. Juegos. Software educacional. Aplicaciones de geo localizacin. Aplicaciones que involucren SMS. Aplicaciones que controlen robots. Aplicaciones que se comuniquen con internet.

ITI

Pgina 11

Programacin Android

Para poder empezar a desarrollar en Inventor necesitamos hacer algunas cosas: Crear una cuenta gratuita en Google App Inventor (necesita una cuenta de correo de Google). Parte del Inventor se ejecuta en la web (el diseador) y la otra parte de manera local, en nuestra computadora (el editor de bloques). Ingresar al sitio web App Inventor. Obtener e instalar Java. Descargar e instalar la parte de App Inventor que se ejecuta localmente. Ejecutar un emulador de Android para probar nuestras aplicaciones. Descargar e instalar controladores para nuestro dispositivo Android. Configurar nuestro dispositivo para que trabaje con App Inventor.

Una vez que terminemos esto estaremos listos para comenzar a crear nuestras aplicaciones para Android.

Obtener una cuenta en Google App Inventor

Si ya contamos con una cuenta de Google, entonces ya tenemos una cuenta App Inventor. Solo tenemos que ingresar al sitio de Inventor y firmar con nuestra cuenta de Google. En caso contrario, tenemos que obtener una cuenta en Google. Actividad 1 Crear una cuenta en Google Es muy fcil obtener una cuenta de Google, y es gratis. 1. Ingrese en la pgina https://accounts.google.com/NewAccount . 2. Llene el formulario con sus datos y oprima el botn crear cuenta al finalizar.

Fig. 2.2 Cuentas de Google.

ITI

Pgina 12

Programacin Android

Ingresar al sitio App Inventor

Ya que tenemos una cuenta vlida en Google, tenemos a nuestra disposicin los tutoriales, el foro, los enlaces a informacin adicional, y por supuesto al diseador de aplicaciones, dentro del sitio App Inventor. Actividad 2 Ingresar al sitio App Inventor 1. Dirijmonos a al sitio http://explore.appinventor.mit.edu/. 2. Seleccionaremos el botn naranja con la leyenda Use MIT App Inventor.

Fig. 2.3 Sitio web del MIT App Inventor

3. Una vez dentro del sitio veremos algo como lo mostrado en la siguiente imagen.

Fig. 2.4 Pgina de inicio del App Inventor

ITI

Pgina 13

Programacin Android

Bueno pues ahora estamos ya, justo donde se disean las aplicaciones. Esta rea contiene al diseador, que nos permite seleccionar y arrastrar componentes (botones, etiquetas, reproductores de audio, etc.) a nuestro programa. Adems, almacena nuestros proyectos. Al hacer clic en el titulo del proyecto, este se abre para poder ser editado. Tambin podemos empezar a disear un nuevo proyecto, haciendo clic en el botn New. Si hacemos clic en el botn Design, abriremos el ltimo proyecto en el que estbamos trabajando. Al hacer clic en el botn Learn se nos muestra la parte informacional del sitio, como lo muestra la siguiente figura:

Fig. 2.5 Mini sitio para aprender sobre App Inventor.

Bien, puede explorar el sitio de Google App Inventor mas adelante, por que ahora seguiremos con la instalacin de nuestro entorno de trabajo.

ITI

Pgina 14

Programacin Android

Requerimientos para Windows, Mac y Linux

Al estar basado en web y usar Java, App Inventor garantiza su ejecucin en los tres sistemas operativos ms importantes Windows, Mac y Linux. A continuacin los requerimientos especficos para cada sistema operativo. Macintosh (con procesador Intel): MacOS 10.5 en adelante. Windows: Windows XP, Windows Vista o Windows 7. GNU/Linux: Ubuntu 8+ o Debian 5+.

Los navegadores de Internet tambin son importantes, ya que, App Inventor se controla desde Internet. Google recomienda alguno de los siguientes: Mozilla Firefox 3.6+ Apple Safari 5.0+ Google Chrome 4.0+ Microsoft Internet Explorer 7+

Obteniendo e instalando Java

Java tambin es necesario, ya que permite la ejecucin del Editor de bloques en todos los sistemas operativos mencionados anteriormente. Puede ser que ya tengamos Java en nuestra computadora, es comn su uso en estos das. Podemos indagar si tenemos Java en nuestra computadora, tenemos que ir al siguiente sitio http://www.java.com/en/download/testjava.jsp. Si aparece un cuadro como el de abajo, entonces tenemos Java y podemos pasar al siguiente punto en la instalacin de nuestro entorno de trabajo.

Fig. 2.6 Pgina que indica si tenemos Java.

ITI

Pgina 15

Programacin Android

Si no tenemos Java instalado, tendremos que seguir las instrucciones mostradas en la pantalla de la pgina de Java. Este proceso consume bastante tiempo, ya que se tiene que descargar el software que pesa 50 60 MB e instalarse despus en nuestra computadora. Ahora tenemos que probar si nuestra computadora es capaz de ejecutar aplicaciones con Java Web Start. Hacemos clic en el siguiente enlace
http://beta.appinventor.mit.edu/learn/setup/misc/JWSTest/AppInvJWSTest.html.

Si todo esta bien se nos debe mostrar lo siguiente.

Fig. 2.7 Probar si podemos ejecutar aplicaciones con Java Web Start

Tenemos que descargar la aplicacin notepad.jnlp, haciendo clic en el botn Launch, y tratar de ejecutarla en nuestra computadora. Si se muestra la aplicacin ejecutndose, nuestro equipo tiene configurado Java al 100%. Si la prueba falla, las razones pueden ser: Nuestro equipo est detrs de un firewall que no permite la descarga del programa. Nuestro navegador no est configurado para utilizar Java Web Start y lograr abrir los archivos JNLP, a pesar de que la primera parte de esta prueba se realiz correctamente. Podemos solucionar esto, asociando los archivos .jnlp a la aplicacin Java Web Start o reinstalando Java.

ITI

Pgina 16

Programacin Android

Nuestro equipo no tiene suficiente memoria para ejecutar App Inventor. Se requiere un tamao de pila Java de 950 MB de memoria contigua.

Fig. 2.8 Aplicacin notepad.jnlp ejecutndose.

App Inventor no va a funcionar si estas pruebas no tienen xito. No vaya a tratar de usar App Inventor hasta que se haya solucionado el problema.

Instalar App Inventor localmente

Para que App Inventor muestre las aplicaciones en las que estamos trabajando, en tiempo real, a medida que las creamos, es necesario instalar algn software en nuestros equipos locales. Para obtener este software, tenemos que ir a la siguiente direccin URL, en el sitio App Inventor http://beta.appinventor.mit.edu/learn/setup/index.html#setupComputer. Debimos haber ingresado a nuestra cuenta de Google antes de acceder a este sitio. En la parte inferior de esta pgina de configuracin, nos encontramos con tres enlaces, tal y como se muestra en la figura 2.9. Instrucciones para MacOS Instrucciones para GNU/Linux Instrucciones para Windows

En este curso veremos solo la instalacin para Windows.

ITI

Pgina 17

Programacin Android

Fig. 2.9 Instrucciones para la instalacin de App Inventor en nuestra computadora.

Actividad 3 Instalar App Inventor en Windows 1. Hacemos clic en el enlace para Windows en la pgina web de configuracin de Google App Inventor. 2. Descargamos el instalador appinventor_setup_installer_v_1_2.exe.

Fig. 2.10 Instalacin de App Inventor en Windows

3. Una vez descargado, ejecutamos appinventor_setup_installer_v_1_2.exe. Seguimos las instrucciones que se nos indiquen.

Fig. 2.11 Cuadro de dialogo al instalar App Inventor. ITI Pgina 18

Programacin Android

Bien, ya hemos instalado App Inventor en nuestra computadora con Windows como sistema operativo, pero, como sabemos si funciona? Para saber si funciona tenemos que probarlo, as que tenemos que agregar otro elemento del Inventor, un dispositivo de Android para probar nuestras aplicaciones.

Instalar y ejecutar el emulador

Hemos visto hasta ahora que App Inventor se compone de tres partes: En la web, el diseador. La parte que accedemos por medio de nuestra cuenta de Google. En nuestra computadora. El editor de bloques que descargamos del sitio App Inventor. Un dispositivo de prueba. Puede ser un emulador en nuestra computadora o un telfono Android conectado va cable USB. Lo siguiente ser instalar un emulador para poder ejecutar las aplicaciones que desarrollemos. Actividad 4 Abrir el emulador Tenemos que ir a la opcin My Projects en nuestra cuenta de App Inventor. Creamos un nuevo proyecto haciendo clic en el botn new. Se nos pedir que pongamos nombre a nuestro proyecto, sugiero le pongan Practica1.

Fig. 2.12 Cuadro de dialogo Nuevo proyecto en App Inventor

Una vez coloquemos el nombre y hagamos clic en el botn OK nos aparecer el diseador de aplicaciones, como se muestra en la figura 2.13. Esta es la forma en la que siempre vamos a entrar a la parte de App Inventor desde web. Para entrar a la parte que se ejecuta en nuestra computadora tenemos que hacer clic en el botn Opens Blocks Editor que se encuentra arriba a la derecha en la pgina.

ITI

Pgina 19

Programacin Android

Fig. 2.13 Diseador de aplicaciones.

Nos aparecer un cuadro de dialogo como el que se muestra en la figura 2.14.

Fig. 2.14 Iniciando el Editor de Bloques.

Esperamos un momento, hasta que desaparezca el cuadro de dialogo anterior. Finalmente aparecer frente a nosotros el editor de bloques de App Inventor, Figura 2.15.

Fig. 2.15 El mismsimo editor de bloques de App Inventor.

ITI

Pgina 20

Programacin Android

Si nos ha aparecido la ventana de la figura 2.15 significa que la instalacin de Java y del software de App Inventor se ha hecho correctamente. Lo que queremos ahora es mostrar el emulador y probar que funcione para nuestros propsitos. Para hacer aparecer el emulador, hacemos clic en el botn New Emulator en la interface del editor de bloques. Esperamos un momento antes de que el emulador aparezca. La figura 2.16 nos muestra la pantalla que aparecer, advirtindonos que tomar algn tiempo la carga del emulador.

Fig. 2.16 Iniciando el emulador.

Ya que toma demasiado tiempo iniciar el emulador, hay que mantenerlo abierto durante toda nuestra sesin de trabajo. Despus de esperar, finalmente el emulador se cargar y se debe mostrar una pantalla como la que muestra la figura 2.17.

Fig. 2.17 El emulador de Android

ITI

Pgina 21

Programacin Android

La ventaja de un emulador es que no necesitamos un telfono celular. La desventaja es la lentitud en su inicializacin y operacin.

Conectar nuestro dispositivo Android

Como logramos una conexin entre nuestro Android y la computadora? Nuestro dispositivo viene con un cable USB, as que, fsicamente es el puente entre el dispositivo y la computadora. Por otro lado, necesitamos los controladores USB para terminar el trabajo. Los controladores son piezas de software instaladas en nuestra computadora y permiten que cierto dispositivo Android se comunique con el Editor de Bloques del App Inventor. Un dispositivo mvil, como los telfonos inteligentes, tabletas, etc., trabajan mejor y mas rpido como dispositivos de prueba que un emulador. Para poder usar nuestro dispositivo en este curso, tenemos que configurarlo correctamente, adems de enlazarlo para que trabaje con el Editor de Bloques. Lo que tenemos que hacer es, conectar el dispositivo mediante el cable usb a la computadora donde hemos descargado el App Inventor. Despus hacer clic en el botn Connect to Device que se encuentra en la parte superior derecha en la pantalla del Editor de Bloques. Tendramos que ver el nmero de serie de nuestro dispositivo, como se muestra en la figura 2. 18. En caso de ser necesario instalaremos de forma manual nuestros controladores, algunas veces vienen en un cd con nuestros dispositivos, otras veces tenemos que descargarlos desde internet. Actividad 5 Configurar nuestro dispositivo Al instalar los controladores USB, como se hizo anteriormente, se hace posible que nuestro dispositivo y la computadora se vean mutuamente. Al configurar nuestro dispositivo le permitiremos hablar con el App Inventor. Este es el ltimo paso en la configuracin del entorno de trabajo de App Inventor. A continuacin configuraremos nuestro dispositivo Android. 1. 2. 3. 4. Clic en el botn home (comnmente es el botn central). Seleccionar el botn men. Seleccionar configuracin. Clic en aplicaciones. Se nos deber mostrar algo parecido a la figura 2.19.

ITI

Pgina 22

Programacin Android

Fig. 2.19 Men Configuracin de Aplicaciones en Android.

5. Hacemos clic en el checkbox a la derecha de orgenes desconocidos. 6. Nos movemos hacia abajo en la pantalla y seleccionamos desarrollo. En la pantalla de desarrollo seleccionamos Depuracin de USB y Permanecer activo. Todo esto con el cable USB desconectado.

Fig. 2.20 Men Desarrollo en Android.

7. Regresamos a la ventana principal de nuestro dispositivo, haciendo clic en el botn Home. Ahora conectamos el dispositivo a la computadora utilizando el cable USB. 8. Vamos a hacer aparecer una ventana, que se encuentra en la parte superior de la pantalla, donde esta el reloj, la fecha, entre otras cosas. Deslizamos el dedo de arriba (tope de la pantalla del dispositivo) hacia abajo, y se nos mostrar la siguiente pantalla. Se nos mostrarn los tems depuracin USB conectada y USB conectado, fig. 2.21. Con esto completamos la configuracin de nuestro dispositivo para probar las aplicaciones que desarrollemos. Estamos listos ahora para crear apps y aprender sobre el App Inventor.

ITI

Pgina 23

Programacin Android

Fig. 2.21 Conexin va USB.

ITI

Pgina 24

Programacin Android

CONOCIENDO LOS COMPONENTES DE APP INVENTOR

ITI

Pgina 25

Programacin Android

Utilizar la interface web de App Inventor

Esta interface esta compuesto por slo dos pginas: My Projects y Design. Como aprendimos anteriormente, para ingresar al App Inventor tenemos que ir a http://beta.appinventor.mit.edu/ y firmar con nuestra cuenta de Google. Debemos tomar en cuenta algo cuando trabajamos en App Inventor. Aunque estamos en internet, no estamos navegando en un sitio web, estamos ejecutando un programa. Google almacena una copia de nuestros datos en la nube.

Mis proyectos
La primera opcin es My Projects (mis proyectos). En esta opcin se nos muestran tres botones My projects, Design y Learn. Los tres los repasamos anteriormente. Un poco mas abajo de estos botones podemos elegir alguna de las siguientes opciones. New, que nos permite crear nuevos proyectos. Delete, es una forma de eliminar proyectos que ya no queremos tener almacenados More Actions, nos permite cargar y descargar proyectos desde mis proyectos.

Fig. 3.1 Botones en la opcin My Projects

Para entrar en la opcin de diseo del App Inventor, debemos tener ya un proyecto, de lo contrario, podemos crear uno nuevo. Actividad 6 Crear un proyecto nuevo Esta es una tarea sencilla. 1. Hacemos clic en el botn New. 2. En el cuadro de dialogo que aparece, escriba el nombre del proyecto a crear (sin espacios ni puntos en el nombre, podemos usar guion bajo) y despus hacemos clic en el botn OK.

ITI

Pgina 26

Programacin Android

Fig. 3.2 Cuadro de dialogo Nuevo proyecto

El diseador se abrir con nuestro nuevo proyecto totalmente en blanco, listo para ser desarrollado. Bien, ya sabemos ahora como crear un nuevo proyecto.

Disear un proyecto
El diseador esta compuesto por 4 columnas: Palette, Viewer, Components y Properties.

Fig. 3.3 La vista del diseador.

Palette es nuestra librera de componentes. Podemos seleccionar los componentes que queramos usar, arrastrarlos hasta el Viewer y dejarlos en la pantalla del telfono virtual. En Components se nos permite renombrar los componentes que estamos usando para evitar confusiones, o borra aquellos que no necesitemos. Finalmente tenemos la categora Properties. Esta nos ayuda a determinar color, tamao, tipo de texto, entre tantos tems dependiendo del propsito del componente.

ITI

Pgina 27

Programacin Android

Componentes Bsicos
La columna que esta ms a la izquierda, almacena componentes. Podemos ver que estn organizados por categoras. La primera categora es la bsica. Esta categora tiene los componentes ms bsicos pero los mas usados tambin.

Fig. 3.4 Categora bsica.

Al lado de cada componente se muestra un signo de interrogacin encerrado en un crculo. Si hacemos clic en ese signo, se nos mostrar ayuda sobre el componente.

Fig. 3.5 Ayuda sobre el componente en cuestin.

Podemos hacer clic en More Information si queremos informacin adicional sobre el componente.

ITI

Pgina 28

Programacin Android

Botn
El componente botn es muy simple. Podemos hacer clic en el y algo suceder. Un botn, como la mayora de los componentes en al App Inventor nos da un marco de trabajo, donde muchas cosas pueden ocurrir. Actividad 7 Manejo del botn 1. Cree una aplicacin nueva llamada appBoton_01. 2. De la columna Palette, seleccionamos Basic. Despus arrastramos el componente Button hasta la pantalla del telfono virtual, situado en la columna Viewer. El resultado debe verse como sigue.

Fig. 3.6 Columna Viewer, pantalla del telfono virtual con un botn.

3. Vamos a cambiar el nombre del componente Button. Para hacer esto en la columna Components seleccionamos el botn que recin incorporamos. En la parte de abajo de la columna Components hacemos clic en el botn Rename. Aparecer un cuadro de dialogo, donde se nos permitir cambiar el nombre del componente. Escribiremos Prueba en la entrada New name. Hacemos clic en el botn OK par aceptar los cambios.

ITI

Pgina 29

Programacin Android

Fig. 3.7 Cambiando el nombre al componente.

4. Ahora modificaremos las propiedades del componente Screen1. Especficamente, cambiamos el color de fondo a negro y el texto que muestra a Hola Android.

Fig. 3.8 Cambiando las propiedades del componente Screen1.

5. Modifiquemos tambin algunas propiedades del botn. Haremos el color de fondo naranja, y remarcaremos el texto (Bold) y finalmente, cambiaremos el texto del botn por Pruebame!.

ITI

Pgina 30

Programacin Android

Fig. 3.9 Cambiando las propiedades del botn.

6. Ahora vamos a Editar los Bloques. Hacemos clic en el botn Open the Blocks Editor. Justo arriba de la columna Properties, en el App Inventor.

Fig. 3.10 Botn Editor de Bloques

ITI

Pgina 31

Programacin Android

7. En la interface del Editor de Bloques conectamos nuestro dispositivo.

Fig. 3.11 Conectamos el dispositivo al Editor de Bloques.

8. Ahora empezaremos a conectar bloques. Debajo de la pestaa My Blocks vamos a Prueba y seleccionamos when Prueba.Click do

Fig. 3.12 Edicin de los bloques en la Aplicacin de ejemplo.

9. En la misma pestaa My Blocks y en los bloques de Prueba vamos a seleccionar set Prueba.Text to y lo colocamos dentro del bloque anterior.

Fig. 3.13 Modificacin de las propiedades mediante bloques.

ITI

Pgina 32

Programacin Android

10. Bajo Built-In/Text arrastramos una variable de tipo texto (es la primera opcin), cambiamos el valor de la variable haciendo clic en el texto lo editamos y ponemos Hola!.

Fig. 3.14 Ingresar una variable de texto y modificar su valor.

11. Ya esta, terminamos nuestra aplicacin. Nuestros bloques quedaron as.

Fig. 3.15 Bloque terminado.

La ejecucin de la app en el emulador se muestra a continuacin.

Fig. 3.16 App mvil ejecutndose en el emulador.

ITI

Pgina 33

Programacin Android

CheckBox
Son ampliamente utilizados para establecer o eliminar opciones. Este componente nos permite aadir casillas de verificacin a nuestras aplicaciones. Al marcar o desmarcar uno de ellos nos devuelve un resultado Booleano (verdadero o falso).

Fig. 3.17 Ejemplo de checkbox.

Clock
El componente clock tiene que ver con el tiempo. Podemos utilizarlo como temporizador creando eventos que ocurran a cada cierto periodo. Es un componente invisible. Cuando lo llevamos a la pantalla virtual en la columna viewer no se quedar ah, se colocar sin embargo debajo de la pantalla.

Fig. 3.18 Componente no visible Clock.

ITI

Pgina 34

Programacin Android

Image
Es una foto u otro elemento grfico que puede ser insertado en nuestra aplicacin. Una vez cargada la imagen, puede ser usada en cualquier otra aplicacin, cuantas veces queramos. Entre los formatos aceptados estn JPEG, BMP, GIF y PNG.

Label
Es el segundo componente mas usado en App Inventor. Label muestra texto, el cual se especifica en la propiedad Text, en la columna Design.

Fig. 3.19 Componente Label.

ListPicker
Al llevar este componente a la pantalla virtual en nuestro diseador, habilitamos las herramientas para manipular listas en el editor de bloques. Las listas de elementos se establecen definiendo una variable con el nombre de la lista y utilizando el bloque make a list que se encuentra en la ficha Built -In/List, llenaremos la lista con variables de texto, que se obtienen de Built-In/Text).

Fig. 3.20 Componente ListPicker.

ITI

Pgina 35

Programacin Android

PasswordTextBox
Este componente permite al usuario ingresar una contrasea con el texto oculto. El texto que escribamos se remplazar con puntos o asteriscos.

Fig. 3.21 Componente PasswordTextBox.

TextBox
Permite ingresar texto desde el teclado.

Fig 3.22 Componente TextBox

TinyDB
Este otro componente, invisible por cierto, almacena valores que queramos que persistan (que sean recordados por la aplicacin y estn disponibles cada vez que se ejecute).

Fig 3.23 Componente TinyDB.

ITI

Pgina 36