Utilizando diálogos en Processing para solicitar/mostrar información al usuario

Introducción

Processing es un lenguaje de programación basado en Java para el desarrollo de sketches (aplicaciones) en las cuales los gráficos y la interactividad con el usuario son su componente esencial.  Por este motivo la interacción mediante el teclado (entrada estándar) no es su fuerte y solicitar confirmaciones o cadenas de texto no se encuentra directamente soportado por su API.

Esto tiene sentido en términos de su objetivo principal, sin embargo se convierte en un inconveniente para quienes utilizamos este lenguaje como una herramienta académica para la enseñanza del desarrollo de software ya que solicitar  información al usuario es un requerimiento frecuente en la gran mayoría de talleres y proyectos.

La solución

Gracias a que Processing se encuentra basado en Java es posible reutilizar fácilmente clases y componentes basados en este último lenguaje.

Para esto escribí un wrapper simple al rededor de la clase javax.swing.JOptionPane que provee estos diálogos.

Como crear la librería

Este paso sólo es necesario si se descarga el archivo fuente (.java) de la librería y se desea compilar para generar la librería (.jar).  Es posible evitar este paso obteniendo directamente el archivo de la librería ya compilado.

Obtener el archivo con el código fuente de la librería.

Compilar el código fuente de la librería.

$ javac -d . -source 1.5 -target 1.5 Dialogo.java

Crear el archivo .jar de la librería.

$ jar cvf Dialogo.jar co/

Como instalar la librería

Ubicar el archivo compilado de la librería (Dialogo.jar) bajo el directorio code/ dentro del directorio del sketch.  Para acceder al directorio del sketch fácilmente utilice el menú Sketch > Show Sketch Folder o la combinación de teclas CTRL+K.

Como utilizar la librería

La librería expone tres diferentes tipos de diálogos a través de la clase Dialogo.

1. Dialogo.mostrar(String titulo, String mensaje): mostrar mensajes informativos
2. Dialogo.confirmar(String titulo, String mensaje): solicitar confirmación (si/no/cancelar)
3. Dialogo.preguntar(String titulo, String mensaje): preguntar información (texto)

A continuación se muestra su utilización en un sketch básico de ejemplo.

import co.jimezam.util.Dialogo;
void setup() {
  Dialogo.mostrar("Demostración #1", "Este es un Mensaje");
  ///////////////////////////////////////////////////////////////////////
  int ctrl = Dialogo.confirmar("Demostración #2", "Por favor confirmar");
  Dialogo.mostrar("Respuesta #2", "Se seleccionó la opción: " + ctrl);
  ///////////////////////////////////////////////////////////////////////
  String str = Dialogo.preguntar("Demostración #3", "Como te llamas ?");
  Dialogo.mostrar("Respuesta #3", "Su nombre es: " + str);
}

Opciones avanzadas

Para cada uno de los tres diferentes tipos de diálogos expuestos en la sección anterior, la librería expone versiones avanzadas que permiten establecer el tipo de ícono que se desea mostrar y en el caso de la confirmación, permite además establecer el tipo de opciones que se desean presentar al usuario.

1. Dialogo.mostrar(String titulo, String mensaje, int tipo)
2. Dialogo.confirmar(String titulo, String mensaje, int tipo, int opciones)
3. Dialogo.preguntar(String titulo, String mensaje, int tipo)

Los tipos de los diálogos (parámetro tipo) pueden ser especificados utilizando las siguientes constantes.

1. Dialogo.TIPO_ERROR
2. Dialogo.TIPO_INFORMACION
3. Dialogo.TIPO_ADVERTENCIA
4. Dialogo.TIPO_PREGUNTA
5. Dialogo.TIPO_ESTANDAR (sin ícono, por defecto)

Las opciones mostradas en los diálogos de confirmar pueden ser especificadas utilizando las siguientes constantes.

1. Dialogo.OPCION_SI_NO (por defecto)
2. Dialogo.OPCION_SI_NO_CANCELAR
3. Dialogo.OPCION_OK_CANCELAR

A continuación se muestra su utilización en un sketch básico de ejemplo.

import co.jimezam.util.Dialogo;
void setup() {
  Dialogo.mostrar("Demostración #1a", "Este es un Mensaje", Dialogo.TIPO_INFORMACION);
  ///////////////////////////////////////////////////////////////////////
  int ctrl = Dialogo.confirmar("Demostración #2a", "Por favor confirmar", Dialogo.TIPO_ERROR, Dialogo.OPCION_OK_CANCELAR);
  Dialogo.mostrar("Respuesta #2a", "Se seleccionó la opción: " + ctrl, Dialogo.TIPO_ADVERTENCIA);
  ///////////////////////////////////////////////////////////////////////
  String str = Dialogo.preguntar("Demostración #3a", "Como te llamas ?", Dialogo.TIPO_PREGUNTA);
  Dialogo.mostrar("Respuesta #3a", "Su nombre es: " + str, Dialogo.TIPO_ADVERTENCIA);
}

Adendo

Existen otros métodos para ingresar textos directamente a un sketch utilizando la entrada estándar sin utilizar diálogos.  Un buen ejemplo de esto se realiza en el libro Learning Processing.

CHAPTER 18: EXAMPLE 18-1: USER INPUT

Enlaces

• Código fuente de la librería (descomprimir el .zip).
  http://blog.jorgeivanmeza.com/wp-content/uploads/2012/02/Dialogo.java_.zip
• Librería compilada (descomprimir el .zip).
  http://blog.jorgeivanmeza.com/wp-content/uploads/2012/02/Dialogo.jar_.zip
• Sketch de demostración (incluye librería compilada).
  http://blog.jorgeivanmeza.com/wp-content/uploads/2012/02/DemoDialogo_0.1.zip

  ///////////////////////////////////////////////////////////////////////