Diseño de Interfaz de Usuario: Trabajando con Diálogos

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Las aplicaciones Android son, por lo general, descompuestas en áreas funcionales donde cada una es unida a una clase Activity que dicta la visualización y el funcionamiento de una pantalla específica. Algunas veces usted querrá, condicionalmente, informar al usuario sobre algo o indicarles sobre insertar algo en específico, sin embargo, usted no quiere mostrar esa información en la misma pantalla. Aquí, usted cuenta con dos opciones básicas: puede ejecutar una clase Activity child para un resultado específico, y luego regresar a su Acitivity original o puede usar una característica práctica que está disponible en las clases Activity, estamos hablando de: dialogs.

Hoy, vamos a hablar acerca de los dialogs, para que pueden ser utilizados, y cómo son creados y usados. Luego, iremos a través de los pasos para implementar un dialog básico dentro de una clase Activity desde el inicio hasta el final. Seguiremos este tutorial con algunas recetas QuickTut para diferentes tipos de dialogs que usted podría usar en su típicas aplicaciones Android. Pero, primero necesita entender el ciclo de vida de un Activiy dialog.

¿Qué es un Dialog?

La clase Android Dialog (android.app.Dialog) es la clase base para todos los tipos de controles dialogs que puede usar dentro de las clases Activity. Los dialogs residen dentro del ciclo de vida de su Activity (android.app.Activity). Surgen en el fondo, bloqueando la pantalla de su Activity, para captar la atención de los usuarios por una variedad de razones.

Nota sobre las preparaciones futuras de sus aplicaciones y la instalación de aplicaciones Fragment-aware: Este tutorial usará el método tradicional para administrar Dialogs básicos dentro de una Activity sencilla. Algunos de estos métodos recientemente fueron desaprobados. La documentación Android SDK ahora está recomendando que si usted quiere usar Dialogs, usted debería instalar la biblioteca compatible y usar la clase DialogFragment. Una vez que haya dominado los conceptos básicos del ciclo de vida Dialog, usted, también, querrá revisar la clase DialogFragment (android.app.DialogFragment). Sin embargo, ese enfoque está más allá del alcance de ésta discusión sobre dialog básico, porque requiere instalar y usar la biblioteca de compatibilidad para tener soporte para los Dialogs de versiones anteriores de Android SDK (aunque abordaremos este tema en tutoriales posteriores). Aunque los métodos que discutimos aquí están enumerados como obsoletos, sin embargo, la nueva forma de hacer los dialogs no fue presentada hasta la versión Honeycomb, así que esta solución continuará funcionando bien para todos los dispositivos.

¿Para qué son usados los Dialogs?

Los Dialogs son útiles cuando usted quiere:

Informar al usuario sobre algún evento o progreso (por ejemplo; "¡Tiene un correo!" o "Descargar mensaje 1 de 200,000").
Obligar al usuario a confirmar una acción (por ejemplo; "¿Está seguro que quiere borrar todos los contactos? ¿Completamente seguro?).
Pedir al usuario más información y recopilarla (por ejemplo; "Por favor, ingrese su nombre de usuario y contraseña.").

Un nota sobre los mensajes Toast: Algunos programadores también usan mensajes Toast (android.widget.Toast) para enviar notificaciones o mensajes simples al usuario. Un mensaje Toast, se muestra sobre la pantalla del Activity por algunos segundos y, después, desaparece automáticamente. El usuario no tiene oportunidad de interactuar con el mensaje Toast. Nos gustaría pensar que la linea que divide entre cuando usar un mensaje Toast y cuando un Dialog es la siguiente: si el usuario está siendo informado de información no esencial, entonces use un Toast, sin embargo, cuando la información que está siendo presentada es vital, entonces use un Dialog. Usamos Toasts como notificaciones de información. Cualquier información que quiere garantizar que el usuario reconozca debería ser visualizada usando un Dialog que requiere de su participación activa para despedirse.

Un ejemplo de un mensaje Toast se muestra a continuación:

¿Cómo están Estructurados los Dialogs?

Los Dialogs, tienen un número de diferentes componentes, la mayoría de los cuales son opcionales. Un Dialog básico tiene:

Un título
Un mensaje
Botones para recopilar respuestas de los usuarios (ejemplo, Si, No, Cancelar, etc.).

Una configuración normal de un Dialog se muestra a continuación:

Además, puede crear controles Dialog personalizados, donde usted controla el layout dentro del área del Dialog. Puede crear Dialogs sofisticados de esta manera, incluyendo estos que toman registros de parte de los usuarios usando otros controles Android como EditText, Spinner y más.

Una configuración de un Dialog personalizado:

¿Qué es el ciclo de vida de un Dialog?

Ahora vamos a hablar sobre cómo son administrados los Dialogs por su clase Activity. Empezaremos por los datos simples:

Un Dialog pertenece a un Activity y es controlado por ese Activity.
Un Activity, puede tener uno o más Dialogs. Cada Dialog tiene su propio identificador único.
Un Activity conserva un conjunto de Dialogs.
Por defecto, un Dialog será reutilizado si se le pide que se muestra nuevamente.
Un Activity puede mostrar un Dialog específico por medio de su identificador usando el método showDialog().
Un Activity puede dejar de mostrar un Dialog específico por medio de su identificador usando el método dismissDialog(). El Dialog, quedará en el conjunto del Activity para ser utilizado de nuevo, si es necesario.
Un Activity puede eliminar un Dialog específico desde su conjunto por medio de su identificador de Dialog, usando el método removeDialog(). Si este Dialog es mostrado otra vez, entonces debe ser creado desde cero.

Así que, ¿cómo crea un Dialog básico para su clase Activity? Bueno, sencillamente, define, crea y lo inicializa como parte de su Activity. Veamos un ejemplo sencillo.

Paso 0: Empezando con Basic Dialogs

Comience creando una simple aplicación Android con un control Button. Estaremos modificando ésta muestra de aplicación para producir un clic para activar un Dialog muy sencillo para mostrar en la pantalla. Usted puede crear esta aplicación desde cero o seguir con la muestra del código que proporcionamos para evaluar.

Paso 1: Definiendo Nuevos Dialogs dentro de su Clase Activity

Ahora vamos añadir tres nuevos Dialogs a su clase basic Activity.

Edite su clase Activity de Java y agregue las siguientes variables:

1
2	private static final int MY_SUPER_SIMPLE_DIALOG_ID = 0;
3	private static final int MY_SIMPLE_DIALOG_ID = 1;
4	private static final int MY_DIALOG_ID = 2;

Esto define tres Dialogs con identificadores únicos para nuestra clase Activity. Los valores son arbitrarios, pero necesitan ser únicos dentro del Activity.

Paso 2: Creando Dialogs

Para crear instancias Dialog, usted debe implementar el método onCreateDialog() de su clase Activity. Cuando es llamado el método showDialog(), éste activa una llamada a este médoto, el cual debe devolver la instancia de Dialog apropiada. Ya que vamos a tener tres diferentes Dialogs en nuestra clase, necesitaremos revisar el próximo identificador Dialog, y usar una instrucción switch para devolver el Dialog del tipo adecuado.

Uno de los controles Dialog más sencillo (MY_SUPER_SIMPLE_DIALOG_ID), como se muestra en la Figura 4, simplemente muestra un título de texto. No tiene botones. La única manera de despedirlo es pulsando el botón Back. Usted no ve este tipo de Dialog muy a menudo, ya que la mayoría tiene al menos un botón OK para despedirlo. El Dialog puede ser creado al instanciar la clase Dialog, y configurando el título del Dialog usando el método setTitle().

Un modelo más común de los controles Dialog (MY_SIMPLE_DIALOG_ID), que se muestra abajo, muestra un título de texto con un icono y un mensaje. Tiene un solo botón: OK. Este es un AlertDialog, el cual se puede crear fácilmente usando la clase AlertDialog.Builder. En este caso, usted usa los métodos setTitle(), setMessage0), setIcon() y setPositiveButton() para configurar los botones como usted desea.

Otro control Dialog muy común (MY_DIALOG_ID), que mostramos en la siguiente figura, muestra un título con un icono y un mensajes configurable. Este tiene dos botones: OK y Cancel. Este es otro AlertDialog, el cual puede ser creado usando la clase AlertDialog.Builder. En este caso, usted usa los métodos setTitle(), setMessage(), setIcon(), setPositiveButton() y setNegativeButton para configurar el botón como desee.

A Configurable AlertDialog with OK and Cancel buttons

La implementación completa del método onCreateDialog(), el cual muestra la creación de los tres tipos de Dialogs que discutimos anteriormente, se muestra aquí:


@Override
protected Dialog onCreateDialog(int id) {
  switch (id) {
	case MY_SUPER_SIMPLE_DIALOG_ID:
		Dialog superSimpleDlg = new Dialog(this);
		superSimpleDlg.setTitle(R.string.dialog_title);
		return superSimpleDlg;

	case MY_SIMPLE_DIALOG_ID:
		AlertDialog.Builder builder = new AlertDialog.Builder(this);
		builder.setTitle(R.string.dialog_title);
		builder.setMessage(R.string.dialog_message);
		builder.setIcon(android.R.drawable.btn_star);
builder.setPositiveButton(android.R.string.ok, new 
DialogInterface.OnClickListener() {   
			      public void onClick(DialogInterface dialog, int which) {   
			    		Toast.makeText(getApplicationContext(), 
"Clicked OK!", Toast.LENGTH_SHORT).show();
			    	  return;   
			    } });  
		return builder.create();

	case MY_DIALOG_ID:
		AlertDialog.Builder builder2 = new AlertDialog.Builder(this);
		builder2.setTitle(R.string.dialog_title);
		builder2.setIcon(android.R.drawable.btn_star);
		builder2.setMessage("");
		builder2.setPositiveButton(android.R.string.ok, new 
DialogInterface.OnClickListener() {   
			      public void onClick(DialogInterface dialog, int which) {   
			    		Toast.makeText(getApplicationContext(), 
"Clicked OK!", Toast.LENGTH_SHORT).show();
			    	  return;   
			    } });    

		builder2.setNegativeButton(android.R.string.cancel, new 
DialogInterface.OnClickListener() {   
			      public void onClick(DialogInterface dialog, int which) {   
			    		Toast.makeText(getApplicationContext(), 
"Clicked Cancel!", Toast.LENGTH_SHORT).show();
			    	  return;   
			    } });    
			
		return builder2.create();
	}
	return null;
}

Paso 3: Inicializando Dialogs

Recuerde que un Activity conserva los Dialogs y los reutiliza siempre que son mostrados. Algunos dialogs, como nuestros primeros dos ejemplos (MY_SUPER_SIMPLE_DIALOG_ID y MY_SIMPLE_DIALOG_ID), tiene contenidos static, así que mostrarlos una y otra vez no será un problema. Puede hacer todas las configuraciones de sus Dialog en el método onCreateDialog().

Sin embargo, nuestro tercer ejemplo de Dialog (MY_DIALOG_ID) tiene un mensaje configurable que debe ser actualizado cada vez que el Dialog es mostrado para visualizar la fecha y la hora actual el Dialog requirió.

Cada vez que un Dialog es solicitado, usted consigue un oportunidad para actualizar sus contenidos usando el método onPrepareDialog(). Podemos usar esta oportunidad para actualizar el mensaje de nuestro Dialog con nuevos contenidos.


@Override
protected void onPrepareDialog(int id, Dialog dialog) {
	super.onPrepareDialog(id, dialog);
	switch (id) {
	case MY_SUPER_SIMPLE_DIALOG_ID:
		// Static dialog contents. No initialization needed
		break;
	case MY_SIMPLE_DIALOG_ID:
		// Static dialog contents. No initialization needed
		break;
	case MY_DIALOG_ID:
		// Some initialization needed. 
       	  	AlertDialog myDialog = (AlertDialog) dialog;
        		SimpleDateFormat dFormat = new SimpleDateFormat(
"yyyy-MM-dd HH:mm:ss", 
			Locale.getDefault());
        		myDialog.setMessage("This dialog was launched at " + 
			dFormat.format(mCurrentTime));
		break;
	}
	return;
}

Observe que el mCurrentTime es una variable miembro que ajustamos cada vez que el Dialog es accionado. Vea el recurso completo del código para el ejemplo completo de cómo esto funciona.

Paso 4: Accionando los Dialogs a Mostrar

Finalmente, usted está listo para accionar sus controles Dialog para mostrar cuando se solicitan. Para nuestra simple aplicación de muestra, usamos un sólo botón para accionar la ejecución de una de los tres Dialogs que hemos creado, dependiendo de la hora actual. El controlador de clic para nuestro control Button, como se definió en la clase Activity, luce así:


public void onDialogButtonClick(View v) {

	Date dt = new Date(); // Gets the current date/time
	if (dt.getSeconds() % 3 == 0) {
		showDialog(MY_SUPER_SIMPLE_DIALOG_ID);
	} else if (dt.getSeconds() % 3 == 1) {
		showDialog(MY_SIMPLE_DIALOG_ID);
	} else {
		mCurrentTime = dt;
		showDialog(MY_DIALOG_ID);
	}
}

Eso es todo lo que necesita para activar los dialogs en su clase Activity. Hacer clic sobre el Button un par de veces para ver los diferentes tipos de controles Dialog que usted ha definido.

En conclusión

Los Dialogs son una potente herramienta en la interfaz de usuario que puede ayudarle a conservar su aplicación de interfaz de usuario de forma flexible y ordenada. Puede personalizar los controles Dialogs en varias formas para informar a los usuarios, para inducir a los usuarios, para recopilar más ingresos. Entender el ciclo de vida de un Dialog es importante, como son agrupados y reutilizados pro sus principales Activity.

Acerca de los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas, segunda edición. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.