No te olvides de leer las dos primeras partes del tutorial:

• Parte 1: Preparando el entorno
• Parte 2: Conceptos iniciales

Ha pasado mucho tiempo, pero volvemos a la carga

Tras preparar el entorno y ver todos los conceptos de una aplicación Android, vamos a crear y gestionar interfaces de usuario y sus eventos. Éstas interfaces serán nuestro medio de comunicación con el usuario. Comencemos.

Creando una interfaz

El plugin ADT que hemos instalado en nuestro Eclipse nos porporciona un editor gráfico para hacer las interfaces. A mi no me gusta demasiado, aún le queda mucho trabajo por delante para ser usable, por lo que generaremos nuestras interfaces directamente en XML.

Los directorios importantes de nuestra aplicación eran:

• src: Aquí irá el código fuente que gestiona cada una de las actividades (y demás)
• res/drawable: Aquí irán recursos gráficos, como imágenes, etc.
• res/layout: Aquí se definirán todas las interfaces de la aplicación
• res/values: Aquí se especifican las cadenas de la aplicación

La interfaz por defecto está en res/layout/main.xml. Editaremos éste archivo y colocaremos un par de controles para probar la gestión de eventos. Éste es el XML de la interfaz que usaremos en éste ejemplo. Para más información sobre los diferentes widgets de la interfaz, leer ésta página.

<?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”
android:padding=”10px”>

<TextView
android:text=”@string/introduccion”
android:id=”@+id/TextViewIntroduccion”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”></TextView>

<EditText
android:text=”@string/prueba”
android:id=”@+id/editTextPrueba”
android:layout_height=”wrap_content”
android:layout_width=”fill_parent”
android:layout_marginTop=”5px”></EditText>

<Button
android:text=”@string/boton”
android:id=”@+id/buttonPrueba”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:clickable=”true”
android:layout_gravity=”right”
android:layout_marginTop=”5px”></Button>

</LinearLayout>

Meteremos las cadenas necesarias en res/values/strings.xml:

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<string name=”app_name”>Tutorial de Diario de un Androide</string>
<string name=”introduccion”>Introduce lo que desees y pulsa el botón para que se desate la magia </string>
<string name=”boton”>¡Dámelo!</string>
<string name=”prueba”>Quiero, quiero…</string>
</resources>

Y con éste paso terminado, ya tendremos un control del que coger información (la caja de texto) y un control del que capturar un evento (el botón), lo que nos dirá cómo gestionar los eventos de nuestra aplicación Android, ya que todos los controls se comportan básicamente de la misma forma.

La interfaz quedaría de ésta forma:

Vayamos ahora con la gestión a nivel de código.

Gestionando los eventos de la interfaz

Los eventos se gestionan a través de Listeners. Nuestra clase deberá implementar los listeners necesarios (uno por cada uno de los eventos posibles), e implementar los métodos que capturarán los eventos. Los pasos para, por ejemplo, capturar un botón, serían los siguientes:

1. Hacer que la clase implemente los listeners necesarios y añadir los métodos que se requieran (Eclipse puede hacerlo automáticamente).
2. Capturar los controles de la interfaz en el método onCreate, y asociar sus listeners a la clase.
3. Implementar los gestores de eventos para cada control en cada uno de los métodos de los listeners.

El código completo del ejemplo, con todo lo explicado hasta ahora, es el siguiente. Está bastante comentado, para explicar cada una de las partes. éste código estaría en el archivo de la clase principal, en éste caso src/tutorialWeb.java.

package serone.tutorialWeb;

/**
* Tutorial para la web androide.hijodeblog.com
* @author Dr. SeROne (doctor@serone.org)
*/

// Inclusiones necesarias
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

/**
* Clase de la actividad principal del tutorial
* @author Dr. SeROne (doctor@serone.org)
*/
public class tutorialWeb extends Activity implements OnClickListener
{
// Propiedades de la clase
Button botonPrueba=null;
EditText editTextPrueba=null;

/**
* Ciclo de vida de la actividad
*/
@Override public void onCreate(Bundle savedInstanceState)
{
// Pasamos la información dela instancia a la clase padre
super.onCreate(savedInstanceState);

// Especificamos el contenido de la interfaz de ésta actividad
// (que será nuestro main.xml, en éste caso)
setContentView(R.layout.main);

// Capturaremos los controles de la interfaz, asociándolos a los
// gestores de eventos (ésta clase, en éste caso) si es necesario.
// Haremos ésto con cada uno de los controles que requieran que sus
// eventos se procesen en ésta actividad.

// Botón
this.botonPrueba=(Button)findViewById(R.id.buttonPrueba);
if(this.botonPrueba!=null) this.botonPrueba.setOnClickListener(this);

// Área de texto
this.editTextPrueba=(EditText)findViewById(R.id.editTextPrueba);
}

/**
* Gestor de los eventos Click
*/
@Override public void onClick(View vista)
{
// Filtramos los controles
if(vista.getId()==R.id.buttonPrueba)
{
// Informaremos al usuario con una notificación de tipo Toast, un
// popup que se muestra brevemente al usuario
Toast notificacionToast=Toast.makeText(
getApplicationContext(),
“¿Quieres un “+this.editTextPrueba.getText()+”? ¿Sólo eso? ¡Te lo concedo!”,
Toast.LENGTH_SHORT);
notificacionToast.show();
}
}
}

Disculpad la indentación lamentable, cuando pueda corregiré éstos aspectos con el plugin correspondiente, pero hoy no tengo tiempo…

El resultado de la ejecución sería:

Conclusión

Con éste sencillo evento, hemos aprendido a extraer información y gestionar casi todos los controles disponibles en una aplicación Android, pues todos se comportan de la misma forma. En las siguientes lecciones veremos más controles vitales (como menús, solapas, etc) y la forma de tener más de una actividad por aplicación, para poder crear aplicaciones mucho más ricas.

¡Hasta la próxima lección, androides!

Related posts:

1. Creación de aplicaciones Android, parte 1: Preparando el entorno
2. Creación de aplicaciones Android, parte 2: Conceptos iniciales
3. Creación de aplicaciones Android, parte 4: Servicios
4. Creación de aplicaciones Android, parte 5: Jugando con mapas (parte 1/3)