Lab1 - Conexin de la interfaz con cdigo Java

En este primer ejercicio, queremos que los alumnos se sientan cmodos escribiendo cdigo en Android, tanto XML como clases y mtodos. Para ello, haremos una aplicacin muy simple, y le aplicaremos una serie de mejoras. La aplicacin consistir de una nica actividad encargada de recoger dos nmeros, A y B, para poder calcular su mdulo y devolverle el resultado al usuario. A. Descripcin En este ejercicio, no habr cdigo inicial, sino que los alumnos debern crear un nuevo proyecto con SDK mnimo de nivel 3 (Android 1.5), y comenzar a construir la aplicacin. Como primer punto a tener en cuenta, y como buena prctica de programacin, nos gustara separar todas las clases de nuestros proyectos en sub-paquetes, de esta forma, las actividades estarn en un paquete Activities, los algoritmos en un paquete logic, etctera. El paquete base com.sistemas.android se deja a eleccin del alumno. Una vez creado el proyecto, deberamos abrir el archivo main.xml situado en la carpeta res/layouts, y veremos que tenemos un layout lineal (LinearLayout), donde los elementos se van colocando uno debajo del otro. El primer elemento que vemos es un TextView que tiene como texto un elemento string, ste lo podremos encontrar en la carpeta res/values/strings.xml, y Eclipse nos abrir el editor. Como vemos, el string hello tiene un determinado valor. Lo que haremos es cambiarlo, y crearemos dos strings, tituloA y tituloB, los cuales utilizaremos para decirle al usuario dnde debe introducir los nmeros A y B respectivamente. Podemos ponerles de valor A: y B:.

B. Implementacin. B.1.- Entrando en cdigo XML

Ahora volvamos al archivo main.xml. ste es el archivo que define lo que se ve en nuestra actividad, que aunque no hemos visto, sabemos que carga este elemento. Gracias a los XML, podemos hacer grandes cambios en la interfaz sin tener que cambiar una sola lnea de cdigo. Vemoslo. Bajo el TextView que vemos, vamos a aadir una pareja de TextView y EditText por cada argumento que necesitamos para calcular el mdulo, es decir, una pareja para el argumento A y otra para el argumento B. No tenemos que preocuparnos de mucho, slo de escribir el siguiente cdigo bajo el primer TextView:

Como vemos, cada elemento tiene tres atributos, el id, su ancho y su alto. Todos los elementos (o Views) deben tener definido su ancho y su alto, y los dos valores ms conocidos son "fill_parent" (ocupa todo el espacio posible) y wrap_content" (ocupa slo el espacio necesario para mostrar tu contenido). De esta forma, lo que les estamos diciendo es que ambos deben coger todo el ancho que puedan, pero slo aquella altura que necesiten. Qu pasa si cambiamos la altura de wrap_content" a fill_parent"? Prubenlo, lo entendern enseguida. Ahora, el id. Para qu sirve? El id identifica unvocamente a cada vista dentro del archivo (podemos tener otros esquemas XML y utilizar los mismos ids), y es lo que nos permite tener acceso a estas vistas desde el cdigo Java, pero eso lo veremos ms adelante. Bajo estas dos vistas, necesitamos realizar exactamente lo mismo pero para el argumento B, luego lo nico que hay que hacer es copiar el cdigo y ponerlo justo debajo, cambiando los ids de tvA a tvB y de etA a etB respectivamente. Si no lo hacemos, no podremos modificar estas vistas desde Java, y adems Eclipse nos dir que el XML est mal porque hay ids repetidos. Ntese que no estamos definiendo el atributo text para los TextView. Esto es porque ya hemos visto cmo se hace con el TextView que el ADT crea para nosotros, y queremos que los alumnos vean cmo se asigna el texto a los TextView programticamente. Sin embargo, los alumnos pueden probarlo si desean. Bajo el EditText del argumento B, necesitamos otro TextView, al que pondremos id tvResult para mostrar los resultados, y tampoco le asignaremos atributo text. Bajo este ltimo TextView, aadimos este cdigo para crear el Botn:

Ya tenemos lista la interfaz, y no tendremos que modificar ms este archivo para que nuestra aplicacin funcione. Se recomienda arrancar la aplicacin para ver cmo ha quedado nuestra interfaz. B.2. Cdigo Java Ya tenemos que entrar en nuestra nica actividad. Vemos que en el constructor hay una llamada a un mtodo, el setContentView(), que es quien le dice a la Actividad que debe coger el archivo main.xml y transformar el cdigo XML en vistas (en ingls, inflate the views). Lo que nosotros haremos es separar este cdigo del constructor, y nos crearemos un mtodo privado:

Con este cdigo, la aplicacin funcionar exactamente igual que antes. Ahora necesitamos que nuestra aplicacin haga algo ms que slo mostrar vistas. stas son las variables que vamos a declarar, y lo haremos justo encima del onCreate():

Lo primero, qu es ese String?. Resulta que Android lleva un registro o log llamado LogCat, donde se registran las operaciones que va realizando el Sistema Operativo. Nosotros, los programadores de aplicaciones, podemos contribuir al LogCat escribiendo en l, y para ello queremos identificar unvocamente cada clase que escribe en el LogCat, y para eso es la etiqueta LOG_TAG. Podemos escribir por distintas razones, para informacin, para advertencia, para errores, etc. Lo importante es no abusar de l. Luego tenemos referencias a los distintos EditText y TextView, pero estas referencias estn vacas. Debemos unirlas o enlazarlas a las vistas del esquema. Cmo hacemos esto? Lo hacemos dentro del initConfig():

Como vemos, estamos llamando al mtodo findViewById de la actividad para que nos devuelva las referencias oportunas; tenemos que hacer un typecast al tipo de vista

especfico. Como ejercicio, se deja la inicializacin de textViewB, editTextB y result, que se hacen justo debajo de la inicializacin de action. Despus de esto, queremos poner texto a los TextView; para los dos primeros ya escribimos los strings, luego slo tenemos que llamar a los mtodos oportunos.

Vase que para el textViewB hemos llamado al mtodo getString() para transformar la entrada XML en un String Java y que para el texto de result hemos escrito directamente la cadena String. Dejamos a los alumnos inicializar textViewA utilizando el otro String declarado en el XML y escribir directamente el texto del botn action. Ya tenemos los textos, ahora necesitamos hacer algo. Primero, nos declararemos un mtodo privado que devuelve un entero con dos parmetros enteros, a y b, que tiene una sola lnea:

Lo que nosotros queremos es que se realice la operacin de mdulo cuando se pulse el botn. Para que esto suceda, deberemos crear un objeto de tipo OnClickListener que ser llamado cuando el botn sea pulsado, y es en el mtodo OnClick() de este objeto donde pondremos el cdigo de la operacin. Esto lo haremos en initConfig(), justo antes de la lnea en la que escribimos en el LogCat:

El cdigo en s es bastante sencillo. Inicializamos un String para guardar el resultado, cogemos los dos parmetros como cadenas de caracteres (es necesario el toString() porque el mtodo getText() devuelve un objeto de otra clase), los transformamos en enteros, realizamos la operacin mdulo, y actualizamos el TextView de resultado. Ya podemos ejecutar la aplicacin, y veremos cmo realiza la operacin mdulo.

B.3. Problemas A pesar de que funciona, la aplicacin no est terminada. Qu ocurre si intentamos realizar el mdulo de un nmero entre cero? Y si introducimos nmeros decimales? Todos estos casos de uso son reales, y si no protegemos nuestra aplicacin de ellos, nuestros usuarios sufrirn de software de poca calidad. Antes de proseguir con la resolucin de estos problemas, sugerimos a los alumnos que coloquen un breakpoint dentro del mtodo onClick(), que ejecuten la aplicacin en modo depuracin, y vean paso a paso cmo falla. Tras el fallo, sugerimos que sea vea el resultado obtenido por el LogCat, donde se ver la excepcin producida. Para protegernos de estos fallos, deberemos escribir cdigo que acte en caso de fallos, como el mdulo con cero o que insertemos nmeros decimales. Esto se hace insertando un bloque try/catch:

Nosotros no diremos qu parte del cdigo del mtodo onClick() va dentro del bloque try, se lo dejamos a los alumnos, pero s daremos el cdigo del bloque catch:

Tras capturar la excepcin, escribimos un mensaje de error en el Log para informar de qu operacin ha provocado el error, escribimos un mensaje en el TextView de resultado y provocamos que aparezca una notificacin de tipo Toast. Qu es una notificacin de tipo Toast? Es una notificacin que aparece durante un breve momento en pantalla, y que slo debemos utilizar cuando estemos seguros de que el usuario est concentrado en nuestra aplicacin, o no ser perceptible. Con este cdigo, podremos escribir lo que

queramos en los EditTexts, la operacin fallar pero nuestra Actividad vivir para contar otra operacin.

Ejercicio Bsico A: Vistas y Layouts

En el primer ejercicio, construimos una aplicacin sencilla entre todos paso a paso. En este segundo ejercicio el objetivo es que empecemos a coger un poco de soltura escribiendo cdigo para aplicaciones Android, tanto XML como Java. A. Descripcin En este ejercicio nos concentraremos en modificar solamente tres archivos de un proyecto Android: la Actividad (Java), la interfaz (XML) y los textos (XML). Esto lo conseguiremos aadiendo vistas (Views) a una aplicacin por medio de XML, y luego nos conectaremos a ellas a travs de cdigo Java para poder actuar cuando se produzcan eventos, como la pulsacin de un botn En el camino, iremos descubriendo nuevas vistas, adems de nuevas propiedades y listeners. B. Implementacin Comenzaremos este ejercicio creando un nuevo proyecto Android desde Eclipse. Le asignamos un nombre, le damos una versin (recomendamos 1.6 o mayor), un nombre a la aplicacin, a nuestro paquete (por ejemplo: com.[mi_nombre].android.apps.BasicoA) y a la Actividad que queremos que se nos cree por defecto; finalmente ponemos un 3 en el campo de versin mnima de SDK. Una vez le demos a Finalizar estaremos listos. B.1. Primer layout Vamos a comenzar editando el archivo de layout, el main.xml. En l tendremos ya la estructura creada por defecto, en la que destaca un TextView con un texto. Comenzaremos a trabajar aadiendo Views y ViewGroups bajo ste. Lo que queremos hacer es un clsico checkbox para habilitar o no un ViewGroup, donde guardaremos una vista. Debido a que tambin queremos practicar los eventos de las Views, necesitamos tambin un TextView que acompae al ya mencionado checkbox. El cdigo XML para poder aadir un CheckBox seguido de un TextView (main.xml) es el siguiente:

Como vemos, hemos aadido dos Views, un CheckBox y un TextView. A ambas les hemos dado un id, para poder referenciarlas desde el cdigo Java, y les hemos puesto las mismas caractersticas de anchura y altura. El CheckBox viene acompaado de un TextView internamente, ahorrndonos la tarea de tener que aadirlo nosotros para que sea intuitivo de usar. Para poder asignarle un texto solamente tenemos que utilizar la propiedad text. Por ltimo, hemos puesto por defecto que el CheckBox no est marcado (checked=false) En el caso de que queramos tenerlo marcado por defecto solamente tenemos que ponerlo a true. El TextView es muy sencillo. Las dos nicas propiedades que asignamos son nmero mnimo de lneas y nmero mximo de lneas, de forma que tenga altura suficiente para mostrar dos lneas de texto. Es una forma para forzar al TextView a que tenga la altura que queremos, pero no la mejor. Con esto ya tenemos un interruptor y un lugar donde escribir. Ahora nos hace falta un LinearLayout que nos guarde las vistas con las que vamos a practicar un poco. Realmente, este Layout que vamos a aadir no es necesario, pero lo usamos para aprender. El cdigo que sigue al ltimo TextView (el eventsTextView) y que termina antes del cierre del LinearLayout principal (o raz), es el siguiente:

A este LinarLayout le hemos dado un id, y le hemos asignado unas caractersticas de anchura y altura similares a las Views que hemos visto antes. Le hemos dicho que queremos que nos coloque las Views una debajo de otra (orientation=vertical), y le hemos dado un padding. El padding es una distancia que separa una View/ViewGroup cualquiera del marco en el que est situada. En este caso, hemos puesto un padding de 7dp (dp se explicar en un ejercicio posterior, por ahora interpretar que son pxeles), es decir, un margen de 7 pxeles respecto a las 4 esquinas. El padding o margen no tiene por qu ser general; tambin puede ser respecto a una esquina o lado en concreto. Para terminar con el LinearLayout, tenemos la propiedad visibility puesta a gone. Como si nombre indica, la propiedad visibility determina si el LinearLayout es visible o no, y lo interesante es que si el LinearLayout no es visible, sus hijos no lo sern, aunque stos sean visibles. Una View tiene tres posibles estados de visibilidad: visible (por defecto), invisible y gone. Visible es auto-explicatorio, y la diferencia entre invisible y gone la veremos en el ltimo apartado. Para terminar aqu, tenemos el RadioButton, que es hijo de nuestro nuevo LinearLayout. Un RadioButton es un botn especial; deriva de la clase Button, y se parece mucho a un CheckBox, salvo por una cosa: el CheckBox puede funcionar como interruptor (apagado / encendido o viceversa), pero el RadioButton no. El RadioButton, una vez marcado, no puede desmarcarse. Por lo dems, su declaracin no contiene nada nuevo. Ahora lo ideal sera marcharnos a modificar cdigo Java, pero no podemos. Como Eclipse ya os habr avisado, existen errores que debemos solucionar. Si todo ha marchado bien, los errores provienen de las propiedades text, que referencian a una cadena (string) del archivo strings.xml que an no hemos aadido. Por tanto, vaymonos al archivo

strings.xml y dejmoslo como est aqu:

Con este cdigo XML, los errores del main.xml deberan desaparecer. Ahora, por fin, podemos empezar con Java. B.2. Java y eventos Abrimos nuestra Actividad, y lo primero que haremos es preparar las cosas como a nosotros nos gustan: nuestro mtodo initConfig(). Comenzaremos dejando el cdigo de nuestra Actividad (lo que va dentro de la definicin de la clase) como vemos aqu:

Como se observa, el grueso de nuestro cdigo se coloca dentro del mtodo initConfig(). Sin embargo, antes de empezar, necesitamos declarar las variables que vamos a utilizar. Para ello, aadimos el siguiente cdigo justo antes del mtodo onCreate():

stas son las cuatro referencias que vamos a necesitar. Lo siguiente es inicializar las variables en el mtodo initConfig():

Sin duda, ste es un buen momento para arrancar la aplicacin. Al hacerlo, vemos nuestro CheckBox, y al tocarlo vemos que se marca y que se desmarca, pero no ocurre nada ms. Qu es lo que queremos que ocurra? Pues que el LinearLayout se vuelva visible si el CheckBox est marcado. Cmo lo hacemos? Con un listener:

Este listener nos da como parmetros el botn en cuestin, que no nos hace falta, y un boolean con la situacin actual sobre si est marcado o no. Es importante tener presente que esta llamada se produce despus de que el CheckBox cambie de estado, no antes. Lo nico que debemos hacer es cambiar el estado de visibilidad segn el booleano, a visible o a gone. Con esto, ya deberamos conseguir nuestro objetivo: que sea vea y que no sea vea el RadioButton. Qu nos queda? El propio RadioButton:

Probemos ahora. Vemos que funciona perfectamente, pero se nos formula otra pregunta, y es, cuntas veces se ejecuta este listener? Averiguarlo es muy fcil. Lo primero es declarar una variable de tipo int, por ejemplo clickTimes; la declaramos como privada debajo de las dems variables, justo encima del mtodo onCreate(). Luego, alteramos el cdigo del listener, aadiendo una lnea antes para inicializar clickTimes a cero:

Es importante sealar que la lnea clickTimes = 0 se ejecuta una sola vez, pero el cdigo que est dentro del setOnCheckedChangeListener se ejecuta cada vez que el RadioButton cambie de estado, que es lo que nos promete este listener. Solamente tenemos que ejecutar este cdigo para probarlo. Si de verdad quisiramos contar cuntas veces hacemos click en el RadioButton, lo nico que tendramos que hacer es cambiar de listener, y utilizar el onClickListener, que se ejecuta una vez por cada click, independientemente de si se cambia de estado o no:

B.3 Visibilidad El ltimo apartado de este ejercicio es tambin el ms corto. Aqu, finalmente, descubrimos la diferencia entre que una View tenga visibilidad invisible o gone. Para ello, debemos volver al main.xml, y aadir una nueva View, justo donde lo dejamos antes, es decir, tras el cierre (</LinearLayout>) del Layout que guarda al RadioButton. ste es el cdigo a aadir:

El ToggleButton es una mezcla (a nivel de concepto) entre el CheckBox y el Button convencional. Bsicamente, es un botn clsico con estado, donde una luz nos indica si est marcado o no. Visualmente, se parece mucho ms a un interruptor que un CheckBox, pero a nivel prctico (de programacin, no as para el usuario) son lo mismo. La primera novedad es que no hemos declarado que ocupe todo el ancho de la pantalla, lo cual nos da pie para la nueva propiedad que vemos all, layout_gravity. Lo que nos permite layout_gravity es decirle al contenedor (padre) de una View dnde quiere que nos coloque en el caso de que no ocupemos todo el espacio que podemos ocupar. Por ejemplo en este caso, ninguna otra View se colocar a la misma altura de este ToggleButton, por lo que nosotros hemos decidido que queremos que est en el centro. Despus tenemos que la propiedad text est dividida en dos casos aqu, una para cuando el botn est presionado o marcado (textOn), y otra para cuando no lo est (textOff).

Como siempre, si todo ha ido bien, los errores que tendremos sern porque nos falta declarar las dos cadenas en el archivo strings.xml:

Ahora volvemos al cdigo Java, que es donde se producen los cambios. Qu queremos con el botn? Muy sencillo: siempre y cuando el CheckBox no est activo, si el ToggleButton est apagado la visibilidad de myLinearLayout ser gone, y si est activado ser invisible. Los dos siguientes pasos os los dejamos a vosotros: declarar la variable ToggleButton toggleVisibility y unirla con la View de la interfaz XML. Por ltimo, y ya para terminar, aadimos este cdigo al initConfig(), y habremos terminado: