Introducción. 1. Crear el proyecto

Transcripción

1 Introducción En este primer tutorial diseñado para la materia de programación básica, veremos cómo iniciarse en la programación android de una manera sencilla, utilizaremos cono entorno de desarrollo que vamos a utilizar será Eclipse, se asume que el lector tiene conocimientos de java y del uso de eclipse, de no ser así sería bueno leerse unos tutoriales antes de iniciar, para una mejor compresión serpía bueno ir siguiendo lo que aquí se muestra e ir analizando la información aquí presentada. 1. Crear el proyecto La secuencia para crear el proyecto es la siguiente: File -> New -> Android Application Project. Nombre del proyecto y de la aplicación, normalmente coinciden, pero no es una regla ya que Application Name será el nombre que aparecerá a los usuarios en sus teléfonos al instalar la app y Project Name es el nombre del directorio donde se guardará el proyecto mientras lo desarrollamos. Package Name es el espacio de nombres donde se organizarán nuestros archivos y al mismo tiempo es una manera de ir firmando la app. Versiones de sistema operativo mínimo y máximo sobre los que correrá nuestra app. Aurelio López Ovando 1

2 Si marcamos esta opción, podremos en la siguiente pantalla seleccionar el ícono de arranque de nuestra aplicación, que normalmente es un androidcito o podremos subir nuestro propio ícono. Con esta opción podemos seleccionar en las siguientes pantallas, un activity o pantalla de inicio de nuestra aplicación. Especificamos que queremos crear nuestra aplicación en el workspace de eclipse, si quisiéramos crear nuestro proyecto en otra carpeta, debemos desmarcar esta casilla. Como en la pantalla anterior marcamos la casilla Create custom launcher icon ahora podemos configurar el ícono de nuestra app, aquí te recomiendo que navegues y veas tu mismo las diferentes modalidades o configuraciones del ícono. Aurelio López Ovando 2

3 Simliar al anterior, como previamente, dos pantallas antes, marcamos la casilla Create activity ahora podemos escoger unos templates de pantallas de inicio, te recomiendo que de momento escojas la opción Blank Activity ya mas adelante que tengas más conocimiento, explores en las otras opciones. Esta parte es crucial, ya que el desarrollo android está basado en la arquitectura Modelo-Vista-Controlador, en esta sección damos nombre a nuestro controlador, que no es otra cosa que un archivo con la extensión.java y a nuestra vista que es representado por archivo von la extensión.xml (El modelo queda pendiente aún). Donde dice Activity Name he puesto Principal (La primera letra mayúscula), me generará un archivo llamado Principal.java que contendrá el código en java del controlador de la app. Nota: He borrado el nombre predeterminado que era MainActivity. Donde dice Layout Name he puesto principal (todo en minúsculas), que me generará un archivo principal.xml, que representa la vista o parte gráfica de nuestra pantalla o activity de inicio. Nota: He cambiado el nombre predeterminado que era activity_main. Después de todos estos pasos pulsamos el botón Finish. Aurelio López Ovando 3

4 2. Pantalla de trabajo Una vez creado el proyecto veremos la pantalla principal de trabajo, similar a la siguiente: Package explorer: Muestra las carpetas de los proyectos existentes en nuestro wokspace, incluye el proyecto actual en el que estamos trabajando, hay que tener cuidado de no perderse, lo recomendable es replegar las carpetas todas las carpetas y dejar desplegada la de nuestro proyecto. Outline: Muestra los detalles de los controles que se han ido colocando sobre el activity. Palette: Tiene todas las herramientas o controles gráficos que podremos utilizar para diseñar nuestra app, organizadas en categorias Activity inicial, en este ejemplo es el archivo llamado principal.xml, el cual representa la vista de nuestro proyecto, podemos verlo también como un lienzo en blanco donde iremos colocando los controles de la sección Palette hasta dar forma a nuestra aplicación. No tiene que ser el único, a medida que necesitemos podremos ir creando más activitys. Todas estas secciones deben ser identificadas de manera adecuada, al fin de cuentas se trata de un ambiente de desarrollo integrado (IDE) donde una sección trabaja con otra. Aurelio López Ovando 4

5 3. Estructura de directorio del proyecto en el package explorer Al crear el proyecto se genera una serie de carpetas, cada una con sus respectivos usos, veamos las más importantes: Principal.java contiene el código(controlador) que mueve a toda la app, a medida que avancemos el proyecto seguramente iremos creando otros archivos de código, pero particularmente este es que contiene el código inicial de la aplicación. R.java es un archivo de definición, podemos verlo como una bitácora donde se van registrando todos los controles que vayamos colocando sobre los activitis, tiene una sección llamada id donde podremos ver las definiciones de dichos controles antes mencionados. principal.xml es el archivo que contiene la parte gráfica de nuestra aplicación(vista). strings.xml todos los textos que se utilicen en la vista deben estar definidos en esta sección. Estas son las secciones que por el momento es importante sean bien identificadas, para concluir: src es la abreviación de source y contiene todo el código que se utilice en la aplicación, es decir es la parte correspondiente al controlador, recordemos que el controlador es el código que hace funcionar a la vista. res es abreviación de resource y aquí siempre encontraremos diferentes recursos de nuestro proyecto como por ejemplo: íconos, imágenes, sonidos, textos, menús, etc. gen es la abreviación de Generated y en esta sección encontraremos archivos de configuración con código que se genera automáticamente por eclipse. Con esta ideología ya podemos avanzar y ver cada uno de manera detallada. Aurelio López Ovando 5

6 4. Activity y Palette Ahora que ya conocemos la estructura del directorio del proyecto (si no le entendiste a medida que avancemos podrás entenderlo de mejor manera), veamos cómo darle forma a nuestro activity. Vamos a la carpeta res > layout -> principal.xml y abrimos el archivo, nos aparecerá algo como esto: Debajo del activity podemos ver dos pestañas: Graphical Layout que es la que vemos en la imagen, nos muestra el activyti de manera gráfica. principal.xml nos muestra el código en XML del activity, podemos dar clic en ambos y ver que pasa. Este es el código XML cuando damos clic en principal.xml, para regresar a la parte gráfica damos click en Graphical Layout. Es importante conocer el código porque hay cosas que de manera gráfica no podremos configurar, sin embargo para este curso trataremos de meternos los menos posible en esta sección, todo lo que hagamos será de manera gráfica. Hagamos una aplicación básica, pediremos el nombre de una persona y más abajo aparecerá una leyenda saludando a esa persona (Algo así como el Hola mundo recargado ). Aurelio López Ovando 6

7 Antes de comenzar, es bueno tener identificados los controles básicos, en la sección Palette encontramos una serie de controles organizados en pestañas desplegables, en la sección Form Widgets encontramos los botones (Button) y las etiquetas (TextView), los botones no necesitan explicación de para que sirven, los TextView son etiquetas o textos que colocaremos en nuestros activitys. En la sección Text Fields encontramos los que en Windows conocemos como textbox para los que vienen de.net o editbox para los que vienen de Visual Basic, pero que en android llamaremos EditText que no son otra cosas que los cuadros de diálogos en donde los usuarios pueden introducir información. Como podemos ver se nos ofrece una serie de EditText preconfigurados dependiendo del tipo de dato que se va a introducir, por ejemplo si queremos un campo de contraseña, escogeríamos Password, donde sabemos que los caracteres no se mostrarán, solo aparecerán unos puntitos. (Si has iniciado sesión en algún teléfono sabrás de lo que te hablo), y así sucesivamente, es cuestión de meterse a la documentación y ver cómo funciona cada uno de ellos. Algo asi como se muestra en la figura: Colocar controles en el activity. Una vez aclarado el punto, prosigamos con el ejemplo, cuando creamos el activity en blanco, en realidad no bien en blanco, podemos ver que trae un encabezado y un TextView que dice Hello world! lo primero que haremos será eliminar el TextView, demos un click sobre el y pulsemos la tecla Supr y listo, se ha eliminado Una vez teniendo nuestro activity en blanco, vamos a darle forma a nuestra aplicación, necesitamos colocar sobre el activity Un nuevo TextView, un Editext, un botón y al final otro TextView. Nota: Para colocarlo solo debes ir a la paleta, escoger el control que necesitas y arrastrarlo al activity. Aurelio López Ovando 7

8 Como decía anteriormente, ahora debemos darle la siguiente forma al activity principal: Una vez colocado los controles, podemos ver el la ventana del outline y veremos que nos muestra los controles que hemos colocado sobre el activity. Nombrar los controles. Es importante colocar un nombre(id) a cada elemento colocado en el activity, sin embargo no a todos, es decir, se debe hacer un análisis de que elementos son lo que realmente necesitan ser nombrados, esto es fácil, si el elemento servirá para entrada de datos o para mostrar la salida de algún proceso, es importante que lo nombremos, por ejemplo en este ejemplo, solo es indispensable nombrar el EditText, al Button y al segundo TextView el primero porque ahí el usuario tecleará su nombre, el botón porque es debemos capturar cuando sea pulsado y el último porque mostrará el saludo el primer TextView no lo nombraremos, porque solo será un simple texto, aunque podría hacerse sin ningún problema. Para nombrar un control damos click derecho y escogemos la opción: Edit ID y en el cuadro de diálogo que aparece colocamos el nombre deseado, en este ejemplo cambiaremos edittext1 a txnombre. Hacemos lo mismo para cada elemento de manera que los nombre sque utilizaremos serán: txnombre, btnsaludar, txsaludo, de tal manera que si checamos el OutLine debemos tener algo similar a lo siguiente: Aurelio López Ovando 8

9 Cuando asignamos los nombres a cada control, estos se van bitacorizando o registrando en el archivo R.Java, podemos encontrarlo en la carpeta gen: En este archivo encontraremos una sección llamada id en la cual se van agregando las direcciones de memoria donde se han guardado estos elementos, es importante tener en cuenta esto, ya que más adelante invocaremos a dichos controles mediante la invocación a R.id.nombreControl donde nombrecontrol podría ser cualquiera de los nombres ahí registrado, más adelante veremos este código que aquí menciono. Cambiando los textos. Una vez que hemos colocado los nombres correspondientes a cada control, ahora debemos darle una mejor apariencia, para ello debemos colocarle el texto correspondiente a los controles que así lo requieran, de tal manera que en nuestro ejemplo el primer TextView diga: Teclea tu nombre, el botón diga: Saludar y el segundo TextView diga: Hola. Para ello debemos crear esas tres cadenas(strings) por separado y luego asignárselas a los controles correspondientes, vamos a res > values -> strings.xml y abrimos el archivo, nos aparece una ventana como la siguiente: Tenemos dos formas de agregar nuestras cadenas, una de ellas es de manera gráfica pulsando el botón Add y agregando las cadenas y los textos y la otra, que es la que usaremos en este caso, es haciéndolo por código. En la parte de abajo hay dos pestañas, una dice Resources y la otra dice strings.xml, justo ahí daremos click y se nos mostrará un código en xml de las cadenas, podemos dar click en esta pestaña y veremos un código como el de la imagen que se muestra más abajo. Aurelio López Ovando 9

10 Procedemos a agregar nuestras tres cadenas, de manera que nos quede como se muestra a continuación : Al agregar un string debemos considerar dos partes: La primera es el nombre(name) del string, por ejemplo en la primera cadena el nombre es: textoentradanombre. La segunda es el contenido del texto, en la primera cadena es Teclea tu nombre. La diferencia entre uno y otro es que el nombre del string es con el que la invocaremos para asignárselo a algún control y el contenido es el texto que será visible en los controles. Ahora si procedemos a utilizar estos textos en los controles correspondientes, para ellos regresamos al activity Principal.Xml y muy similiar a cuando cambiamos el ID, damos click derecho sobre el control deseado y escogemos la opción Edit Text : Se nos mostrará un cuadro que contiene una lista con todos los strings existentes, aquí es cuestión de ser congruentes y asignarle al control el string que le corresponda y pulsar el botón OK, lo cual se reflejará inmediatamente en el texto de dicho control. Podemos observar dos cosas, una de ellas es que el texto ha cambiado, y la otra es que el ícono del warning ha desaparecido, esto es porque cuando se agrega un control al activity, el compilador detecta que el texto que utiliza sigue siendo el que trae por default y lo correcto es crear un string para cada texto como ya había mencionado anteriormente. como esto: Asignamos los textos a cada control que asi lo requiera hasta tener algo Ahora nuestra pantalla va agarrando mas forma, con esto hemos terminado la parte del diseño(vista), podríamos correr nuestra app y ver cómo va quedando, pero antes de eso mejor trabajemos con la parte del controlador. Aurelio López Ovando 10

11 Vamos a la carpeta src y buscamos el archivo Principal.java, como mencionamos anteriormente, aquí se encuentra el código que hace funcionar a la vista. Despliega todas las librerías utilizadas en el código. Es la función principal del proyecto, es decir cuando la app es ejecutada, es este método el que se ejecuta primero, por lo tanto aquí debe comenzar nuestra programación. Menú prederminado que tiene nuestra pp al pulsar el botón menú del teléfono, podemos modificarlo o crear otros. Una vez habiendo conocido las partes principal del código comencemos a programar nuestra app, lo primero que vamos a hacer es conectar nuestro código con la vista, mediante código definiremos un EditText y dos TextView, el botón lo manejaremos de manera diferente, así que no es necesario definirlo. Seguramente al definir un control, en este caso EditText, marcará un error debido a que la librería del EditText no está definida. Error al definir el EditText El error es debido a que no se encuentra definida la librería para la clase EditText. Podemos solucionarlo mediante la combinación de teclas ctrl + shift + O(recomendada), otra manera de solucionarlo es dar clic sobre el ícono del error y escoger algo como se muestra en la figura: Cualquiera de las dos opciones agregará la librería correspondiente y dejará de marcar dicho error. Esto mismo haremos con los otros controles, los definimos y agregamos las librerías correspondientes. Aurelio López Ovando 11

12 Los nombres utilizados para los controles podrían ser los mismos nombre que usamos en la vista sin ningún problema, pero para efectos de explicar el código le cambiamos tantito poniendo una C al final. Ahora lo que debemos hacer es conectar estos a los definidos en la vista, si recordamos, anteriormente dijimos que los nombre utilizados en la vista se graban en un archivo llamado R.Java en una sección llamada id, pues bien, aquí haremos uso de ello, mediante la instrucción findviewbyid(). Podemos fijarnos que hemos conectado a cada control de la vista con su respectivo control del controlador, el botón lo hemos dejado fuera, porque la conexión la haremos de manera diferente. Ahora lo que procede es hacer un método que se ejecute al pulsar sobre el botón, de manera que tome el texto tecleado en txnombrec y se lo mande a tvsaludo para que aparezca como saludo. Sería de mucha ayuda que el estudiante conozca el funcionamiento de eclipse, ya que cuenta con algunas herramientas para agilizar la captura de código, como por ejemplo crtl + space que autocompleta algunas palabras, pero bueno ya regresando al punto, el código que vamos a emplear es el siguiente: Creamos un método, que en este caso lo llamaremos saludar en donde crearemos la rutina que se ejecutará el pulsar el botón. gettext() obtiene el texto contenido en un control, en este caso el control EditText llamado txnombre. settext() estable o asigna el texto a un control, en este caso al control tvsaludo. Aún no hemos terminado, debemos hacer funcionar el botón, existen tres maneras de detectar el pulsado del botón, dos de ellas es por código, la que usaremos en este ejemplo desde mi punto de vista es la manera más sencilla, ya que definimos un método (que en este caso ya lo hicimos y se llama saludar), y de manera gráfica nos vamos a las propiedades del botón y ahí escribimos el nombre de dicho método, asi como se muestra a continuación. Abrimos el activity principal.xml. Damos click derecho sobre el botón y escogemos: Other Properties -> Inherited from View -> Onclick Aurelio López Ovando 12

13 En la ventana que aparece escribimos el nombre del método que queremos que se ejecute. Listo, hemos terminado nuestro programa, guardamos todo lo que hemos hecho y ahora ya podemos correrlo y ver que funcione. 5. Corriendo nuestra app Para ver cómo funciona nuestra app, podemos hacerlo mediante un emulador o directamente en el teléfono, para hacerlo mediante el emulador debemos crear uno, para ellos damos clic en el la pestaña Windows -> Android Virtual Device Manager. De la ventana que aparece damos clic en el botón New. Aurelio López Ovando 13

14 Y configuramos nuestro emulador. Nombre con el que identificaremos al emulador, podemos tener varios emuladores si queremos. Modelo del teléfono que queremos emular, existe una serie de marcas y modelos, algunos requieren mas memoria que otros. Versión de android que queremos emular Ya que configuramos nuestro emulador damos clic en el botón OK y ahora nos aparece en el listado de emuladores el que hemos creado, podemos cerrar la ventana, el emulador queda guardado para ser utilizado cuando necesitemos. Ahora vamos a hacer uso de el, vamos al menú Run -> Run Configurations 1.- Seleccionamos la opción Android Application 2.- Damos click en el botón New launch configuration 3.- Pulsamos el botón Browse y de la ventana que aparece elegimos nuestro proyecto. Aurelio López Ovando 14

15 En la pertaña Target marcamos el emulador que tenemos disponible, damos click en el botón Apply y luego en el botón Run Tenemos cono resultado lo siguiente: Para correrlo en el teléfono, primero debemos considerar que el teléfono tenga Android como sistema operativo y que no sea una versión tan antigua. Debemos conectar el teléfono a la PC y asegurarnos que el controlador del teléfono se instale correctamente, normalmente la instalación es automática, de no ser así habría que buscar los controladores manualmente en internet. Entre las cosas que cambian son las siguientes al momento de correr la aplicación es la siguiente: 1.- Seleccionamos menú Run -> Configuration manager. 2.- Debemos seleccionar la opción Always prompt to pick divice, pulsar el botón Apply y luego el botón Run. Aurelio López Ovando 15

16 Se nos muestra en una nueva ventana un listado con el teléfono que se encuentra conectado a la PC, en este caso lo estoy corriendo desde un HTC. Lo seleccionamos y damos clic en el botón OK, esto hará que la app se ejecute en nuestro teléfono directamente, a continuación se muestra una captura de la app corriendo en el teléfono. Está por demás decir que en cualquiera de los dos casos anteriores, si existieran errores, la aplicación no correría, es más recomendable correrla directamente en el teléfono ya que el emulador no cuenta con todos los servicios que se necesitan en muchas aplicaciones. Espero este primer material haya sido de mucha ayuda, los siguientes no serán tan detallados, partiremos de la idea que el lector ya sabe como crear un proyecto y veremos nuevas cosas, saludos. Aurelio López Ovando 16