martes, 17 de enero de 2012

6.1.-PeA - El esqueleto de nuestra aplicacion


6.1.- Programación en Android:  El esqueleto de nuestra aplicación.

En el anterior capítulo habíamos enumerado las actividades que utilizará nuestra aplicación y describimos que haría o podría hacer cada una de ellas.  En este capítulo nos pondremos al mando de nuestro IDE y crearemos el esqueleto de nuestro entorno.  Crearemos las distintas clases, los distintos layouts, etc..., pero no creais que cuando digo crearemos será completamente, no, sólo el esqueleto, posteriormente iremos añadiendole las funcionalidades a cada "hueso".

Comenzaremos por abrir el Eclipse, el Motodev Studio, o el entorno que hallamos elegido para programar.  En mi caso he optado por el Motodev Studio 3.10, que tiene unas funcionalidades con las que nos facilita muchas tareas y aumenta nuestra productividad, además de estar basado en el Eclipse Indigo, con lo que migrar a él es tremendamente fácil.

Creando un nuevo proyecto Android.

Para crear nuestro proyecto utilizaremos el asistente de Eclipse, o el de Motodev, para ello seleccionaremos en el menú Archivo->Nuevo->Proyecto Android, o MOTODEV->Nuevo->Proyecto Android.  No nos vamos a parar mucho en describir los pasos ya que esto lo hicimos en anteriores capítulos.
Una vez seleccionado eso nos aparecerá la ventana de diálogo de nuevo proyecto, en la que debemos configurarlo como sigue:



Nombre del Proyecto: CorrectoIncorrecto
SDK de destino: 1.6+Google APIs
Nombre de la Aplicación: Correcto o Incorrecto
Nombre del Paquete: com.blogspot.pafh99.cursoandroid.CorrectoIncorrecto
Nombre de Activity: ActividadSplash
Hecho esto pulsamos en finalizar, y el explorador de paquetes nos mostrará algo semejante a:



En él podemos observar que se ha creado una clase (ActividadSplash), y que tenemos un sólo layout.  Las zonas que están resaltadas con el marco en rojo es dónde actuaremos a continuación.

Los Layouts

Como habíamos dicho en el capítulo anterior, nuestra aplicación constaría de una serie de layouts distintos, para representar cada clase y cada pantalla de nuestra aplicación.  Vamos a proceder a crearlos, para ello vamos a renombrar el layout que nos ha creado por defecto el asistente (main.xml), y lo renombraremos como splash.xml.   La forma correcta para renombrar algún recurso o variable, es utilizar la función "Redenominar", ya que así, en caso de que el recurso fuera accesible desde otros lugares del proyecto entonces sería también renombrado.  A esta opción llegamos pulsando sobre el fichero main.xml con el botón derecho del ratón y eligiendo Refactorizar->Redenominar.  Tras lo cual nos aparecerá una ventana viendo los cambios que ocurrirán y si esta referencia está utilizada en otros lugares del programa.


Aún así, puede ser que nos deje algo sin cambiar y lo tengamos que cambiar a mano.  Por ejemplo:  en mi caso al refactorizar/redenominar, no me cambió el nombre del recurso, con lo que me señalaba un error en el fichero ActividadSplash.  El error estaba en que no había cambiado la linea que pone:

setContentView(R.layout.main);

por:

setContentView(R.layout.splash);

  Hecho esto hacemos uso del "copia y pega"... y copiamos el fichero splash.xml y lo  pegamos tantas veces como layouts nos hacen falta para nuestra aplicación, estos serán:   ayuda.xml, configuracion.xml, puntuaciones.xml, juego.xml, menu.xml y  salida.xml.  En este momento, hay que recordar que los nombres de los recursos no pueden ser puestos de forma arbitraria o tendremos errores posteriormente.  En Android, los nombres de los recursos deben estar en minúsculas, y pueden contener letras, números y subrallados.  No pongais acentos, espacios, o alguna letra en mayúscula, ya que os dará error al querer acceder a dicho recurso, avisados estais.
  Si ahora abrimos cualquiera de estos layouts veremos en la ventana gráfica que nos aparece una cadena de texto que pone "Hola Mundo".  Y esto  lo hace con todos los layouts debido a que es la cadena que estaba referenciada por defecto.  Vamos a proceder a cambiar la cadena que muestra cada layout y para ello procederemos a añadir los diversos recursos de cadena necesarios.  Estos recursos los vamos a crear en español, y utilizando la carpeta "values", posteriormente cuando tengamos finalizado el proyecto, o en algún lugar del camino, copiaremos esta carpeta como "values-es", con lo que la tendremos "localizada" y traduciremos los recursos que hay en "values" al inglés, que es el idioma por defecto.


Ahora vamos a proceder a añadir una serie de recursos string con los que "nombraremos" cada una de estas pantallas o layouts.  Abrimos la carpeta values y hacemos doble click sobre el fichero strings.xml, con lo que se nos abrirá el editor de recursos, y en él borraremos la que trae con la clave "hello", y añadiremos una serie de cadenas propias:


O como veremos en la vista en xml:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<resources>
    <string name="app_name">Correcto o Incorrecto</string>
    <string name="configuracion">Configuración</string>
    <string name="splash">Splash</string>
    <string name="juego">Juego</string>
    <string name="puntuaciones">Puntuaciones</string>
    <string name="menu">Menú</string>
    <string name="salida">Salida</string>
    <string name="ayuda">Ayuda</string>
</resources>
Una vez que tengamos las cadenas añadidas, procedemos a cambiar cada uno de los layouts para que hagan referencia a su texto correspondiente.  Lo cuál lo podemos hacer con el editor de xml, o con el editor de propiedades en la vista gráfica:

Con el editor xml:  Abrimos el layout correspondiente, y vamos a la vista en xml, ahí editamos el recurso string y hacemos que apunte al nuestro, por ejemplo, para el layout de ayuda quedaría de la siguiente manera (de momento):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/ayuda"
    />
</LinearLayout>
Con el editor de propiedades gráfico:  Para ello abrimos el layout correspondiente y nos vamos al visor/editor gráfico, una vez ahí seleccionamos la cadena que aparece en la pantalla con el botón derecho del ratón, y nos salé un menú, en el que elegimos "Edit Text".  Nos aparecerá una ventana similar a la siguiente en la que podremos elegir un recurso de los que tenemos añadidos.



Una tercera opción sería en este mismo editor, en la pestaña de propiedades, como se hizo en un capítulo anterior.

Una vez que tengamos todos los layouts actualizados, entonces procedemos a actualizar las clases de Java, creando las activities.

Creando las actividades (activities)

Ahora que tenemos el esqueleto de los layouts, necesitamos crear las clases que luego implementaran sus funcionalidades.  Como describimos en el capítulo anterior, crearemos una clase base, que será la que tenga los datos y funciones globales que podrán ser compartidos por toda la aplicación, y después crearemos una clase para cada actividad.
Para crear nuestra clase base, simplemente copiamos el fichero de la clase que ya tenemos creada y renombramos la actividad y cambiamos el nombre de la clase.  Otra opción sería hacer click con el botón derecho en el nombre del paquete y elegimos Nueva->Clase y en la ventana que aparece configurar la superclase como:  android.app.Activity.

El código de esta nueva clase quedaría así:

package com.blogspot.pafh99.cursoandroid.CorrectoIncorrecto;

import android.app.Activity;

public class ActividadGlobal extends Activity {

}
Ahora procedemos a editar el código de nuestra ActividadSplash, para que herede de esta clase.  Realizaríamos el siguiente cambio en el código:

public class ActividadSplash extends Activity
Por:
public class ActividadSplash extends ActividadGlobal


Ahora creamos las demás actividades.  Que también podremos hacerlas copiando y pegando la que acabamos de editar (ActividadSplash), o pulsando en Archivo->Nuevo->Actividad Android o en MOTODEV->Nuevo->Nueva Activity Android.  El problema de hacerlo creando una actividad nueva, es que heredará de Activity en vez de ActividadGlobal.
Copiamos y pegamos una actividad para cada layout, los nombres los habíamos indicado en el anterior capítulo, pero vamos a recordar las actividades que necesitamos:  ActividadGlobal, ActividadSplash, ActividadMenu, ActividadJuego, ActividadPuntuaciones, ActividadConfiguracion, ActividadAyuda y ActividadSalida.  Cuando terminemos de crearlas, editamos el método onCreate de cada una de ellas, y cambiamos la llamada a setContentView(R.layout.splash) para mostrar el layout correcto a cada actividad.

setContentView(R.layout.splash);
por
setContentView(R.layout.Poner_aqui_el_nombre_del_layout_correspondiente );

Actualizar el archivo manifest

Ahora que hemos creado las actividades debemos actualizar el archivo androidmanifest.xml para reflejarlo, en caso contrario la aplicación no funcionaría correctamente.
Abrimos el fichero AndroidManifest.xml y vamos a la pestaña "Application", ahí podemos observar que no tenemos todas las actividades añadidas en "Application Nodes"



Procederemos ahora a añadir las actividades pulsando en el botón "Add".  Nos saldrá una ventana como la siguiente, en la que tenemos que marcar "Create a new element at the top level, in Application"


Al pulsar en "Aceptar" nos creará un nodo que solo pone "Activity", debemos editarlo para que apunte a la actividad correspondiente, esto lo hacemos cambiando el nombre en "Attributes for Activity",  si pulsamos en "Browse" nos saldrá una lista con los disponibles.


Y cuando terminemos de añadirlas nos quedarán los nodos así:


También debemos cambiar el atributo de "Debuggable" a "true", para que se nos permita depurar nuestra aplicación.


En el manifiesto podemos observar como la actividad a ser lanzada por defecto es la ActividadSplash.

Ahora podemos crear una configuración de depuración y probar nuestro esqueleto.  La verdad es que no va a hacer nada más que mostrar la actividad splash, pero así comprobamos que no tenemos ningún error en nuestro esqueleto base.  Ya continuaremos creando las funcionalidades.

El archivo con el proyecto hasta este punto lo podeis descargar de aqui.


Ver. 1.0 – Revisión 17.1.2012

No hay comentarios:

Publicar un comentario