Editor Visual Java

Hoy un compañero me ha dado el empujoncito que me hacía falta para ponerme a escribir un pequeño tutorial acerca de cómo crear un interfaz gráfico de usuario en Java. Vamos a crear en unos minutos un interfaz gráfico que nos permita acceder a las propiedades de un objeto Java. Usaremos un editor al azar, por ejemplo... NetBeans!

Cierto, he hecho trampa. En realidad he escogido NetBeans porque trae "de serie" el sistema más avanzado para creación visual de interfaces de usuario multiplataforma: Swing powered Matisse :)

Abrimos NetBeans y vamos al menú Archivo, seleccionamos Proyecto Nuevo... En el diálogo seleccionamos la categoría Java y el tipo de proyecto Aplicación Java.

A continuación damos un nombre a la aplicación y pulsamos Terminar.

Aparece en pantalla el proyecto recién creado, con el paquete miinterface y una clase generada automáticamente Main.java.

Ahora crearemos un objeto que encapsule los datos a los cuales accederemos desde nuestro interfaz gráfico. Lo haremos siguiendo el patrón JavaBean. Es un buen momento para explicar qué es un JavaBean :) Un JavaBean es un objeto Java con las siguientes propiedades:

- Tiene un constructor vacío, para que pueda ser instanciado siempre.
- Todas las variables se declaran private (o protected).
- Hay un método accesor de la forma getNombrePropiedad para cada variable que se quiera exponer para lectura.
- Hay un método accesor de la forma setNombrePropiedad(Tipo nuevoValor) para cada variable que se quiera exponer para escritura.

Además, nosotros usaremos el mecanismo de notificación de cambios de propiedades en la implementación de los métodos accesores de escritura para mejorar la integración con Swing.

Hagamos botón derecho en el paquete miinterface y seleccionemos Nuevo -> Clase Java... en el menú emergente. Le damos un nombre a la clase,

y al terminar nos aparece una plantilla con la declaración del paquete y una clase vacía.

Vamos a crear las propiedades del objeto, con sus métodos accesores de lectura/escritura y mecanismo de notificación de cambio de propiedad: Ponemos el cursor dentro del cuerpo de la clase y pulsamos alt-ins para añadir una nueva propiedad al objeto. Seleccionamos Agregar Propiedad...

Especificamos nombre de la propiedad, su tipo (por ejemplo "descripcion" de clase String) y activamos la opción delimitado para poder conectar este objeto a otros JavaBeans, como son por ejemplo los componentes visuales de Swing.

Al aceptar el formulario vemos que NetBeans ha generado el código para la variable, métodos accesores de lectura y escritura para la propiedad, y código boilerplate para la notificación de evento de cambio de propiedad.

Añadimos otra propiedad, por ejemplo "peso" de tipo Number, activando también la opción delimitado en el formulario. Esta vez la opción Generar soporte para cambio de propiedad estará deshabilitada porque ya se ha generado el código para esta compatibilidad.

Y para que nuestro nuevo objeto cumpla con las especificaciones del patrón JavaBean, añadimos un constructor vacío: hacemos alt-ins y seleccionamos Constructor... en el menú emergente.

Ya tenemos nuestro JavaBean acabado. Ahora vamos a conectar este objeto a nuestro formulario para poder interactuar con sus propiedades a través de nuestro interfaz gráfico.. Es la parte más divertida :)

Volvamos a hacer botón derecho en el paquete miinterface y seleccionemos esta vez Nuevo -> Formulario JFrame...

Damos un nombre a la clase, por ejemplo MiFrame y al terminar nos aparece el editor visual.

Para poder usar nuestro JavaBean en el formulario, lo primero que tenemos que hacer es compilarlo (F11). Y luego, simplemente arrastrarlo a nuestro formulario. Podemos ver la nueva instancia que ha creado el IDE en la categoría Otros Componentes del Inspector en el editor.

Arrastramos ahora un Campo de texto de la paleta al formulario y le hacemos click con el botón derecho. Seleccionamos enlazar -> text y escogemos miCosa1 como origen y descripcion como expresión.

Repetimos la operación para vincular un segundo componente a la propiedad peso, pero en este caso usaremos un Cuadro formateado (Formatted Field) en lugar de un Campo de texto, ya que se trata de un valor numérico. Estiramos los componentes para que su tamaño no esté limitado al valor inicial del texto. Si los estiramos hasta el ancla que aparece en el borde derecho del formulario, su tamaño se ajustará al del formulario.

Ahora vamos a especificar que el valor del Cuadro formateado es numérico. Seleccionamos el componente en el editor y ajustamos la propiedad formatterFactory.

Por último, arrastramos el componente Botón de la paleta hasta el formulario y le hacemos botón derecho -> Eventos -> Action -> actionPerformed para implementar la acción... por ejemplo mostrar las propiedades de mi cosa en un diálogo:

Será necesario importar la clase JOptionPane, lo hará automáticamente NetBeans si escribimos ayudándonos de ctrl-espacio o bien si hacemos fix imports (mays-alt-f).

Ya está! Botón derecho en MiFrame.java y Ejecutar archivo.

Podemos probar la conexión de nuestro JavaBean con los componentes visuales, y el mecanismo de notificación de cambio de propiedad, conectando otro componente visual a la misma propiedad. Por ejemplo usemos esta vez una Etiqueta.

Al modificar la descripción, la etiqueta se actualiza automáticamente. ¿Y si usamos un Desplazador (JSlider) para establecer el peso?

Está claro que este formulario no ganaría un premio de diseño...