Diseño de interfaces en Java con WindowBuilder

Hola y bienvenidos a un nuevo artículo del blog de Espai. Hoy vamos a Hablar de WindowBuilder, que es un plugin de Eclipse para diseñar interfaces gráficas de una forma… Gráfica.

Después de este perogrullo más gordo que el cuello de Fernando Alonso, vamos a ello!

 

Diseño de interfaces en Java con WindowBuilder: Introducción

WindowBuilder salió como un producto comercial de la mano de la empresa Instantiations. Ésta fue comprada por Google, que lo acabó donando a Eclipse Foundation y convirtiéndolo en código abierto.

 

 

Vamos a hacer una sencilla aplicación usando este plugin. Si descargáis una versión reciente de Eclipse ya vendrá de serie, no es necesario que lo instaléis aparte.

 

Creación de la  aplicación

 

Creamos un nuevo proyecto

 

De tipo «Java»

 

 

Le damos como nombre «EjemploWindowBuilder»

 

 

Una vez creado el proyecto (que estará vacío) añadimos una clase nueva.

 

 

 

 

De tipo «Application Window» para poder usar las características de WindowBuilder

 

le damos un nombre de clase, y también nombre de paquete

 

Este código nos lo genera automáticamente, no es necesario escribirlo. Si vais a la pestaña «design» (abajo a la izquierda) veréis que ya aparece.

 

Esta es la ventana principal de WindowBuilder. Como veis, nos permite añadir elementos gráficos como imágenes, botones o listas a nuestro programa, a parte de otros muchos.

 

Marcamos el elemento BorderLayout y hacemos click en nuestra ventana. Esto lo que hace es asignar una forma específica de distribuir los elementos en la pantalla, en concreto en 5 secciones: Norte, sur, este, oeste y centro.

 

Añadimos un JList (lista) a la izquierda. Como en el caso anterior, click en JList y luego click en la zona de la pantalla donde lo queréis (marcado en amarillo, aparecerá cuando pongáis el cursor encima)

 

Añadimos un JTable en el centro. Un JList tiene una sola dimensión (una columna y varias filas) mientras un JTable tiene varias filas y columnas, similar a una hoja de cálculo.

 

Añadimos un JPanel a la derecha. Mismo proceso que con el JList.

 

Cambiamos las propiedades de ese panel. hacemos que tenga un layout (distribución) tipo GridLayout

 

Vamos a las propiedades del layout, y lo hacemos de 1 columna y 3 filas.

 

Añadimos un botón al JPanel. Si veis que no se ilumina el panel cuando os coloquéis sobre la ventana, dejad el botón sobre el elemento «panel» que encontrareis a la izquierda, debajo de «table». haced click sobre JButton, y luego sobre panel, y se añadirá el botón al panel.

 

Cambiamos las características de ese botón. Le damos como nombre «btnCargar», y como texto «Cargar». El nombre será la variable que encontraremos luego en el código, y el texto es la descripción que aparecerá sobre el botón. Lo alineamos con «Center».

 

Repetimos el mismo proceso con los botones «Guardar» y «Salir»

 

En las propiedades del JTable, pulsamos en los «…» a la derecha de «model». Sale una ventana que nos permite añadir filas y columnas. Añadimos 8 filas y 4 columnas, o las que queráis.

 

hacemos lo mismo con el JList.

 

Hacemos click sobre JLabel, es decir añadimos una etiqueta en el «norte» de nuestra aplicacion, la parte superior. El texto será «Aplicacion de prueba de WindowBuilder»

 

hacemos lo mismo con el inferior. Además, le añadimos un icono haciendo click en «icon».

 

 

haced click en la pestaña «design» para ver el código.

 

 

Esta parte hay que añadirla a mano. Si ejecutais la aplicación ahora (haced la prueba) veréis que no salen los titulos de las columnas, y la tabla aparece cortada. Por ello le añadimos el fragmento de código que aparece en la captura. Lo que hacemos es «envolver» el JTable con un JScrollPane, que es un elemento gráfico que añade precisamente eso: barras de desplazamiento y encabezados a las tablas.

Para hacer esto, debeis ir a la pestaña «Source» donde podréis realizar este cambio.

 

Como veis, al ejecutar la aplicación ya aparece la tabla correctamente.

 

 

¡Buf! Que ejemplo más largo. Como veis WindowBuilder es una herramienta muy potente, no es que sea «mágica» porque requiere a su vez bastante trabajo, pero es mucho más fácil y menos propenso a errores que hacer todo este código a mano. Si echáis un vistazo a la pestaña «Design» veréis la gran cantidad de líneas que el plugin ha añadido por nosotros.

 

Hasta aquí el artículo de hoy, como veis tan laborioso que ni a hacer chistes malos me dio tiempo. Os dejo como extra una serie de frases que os ayudarán cuando os dediquéis a la programación profesionalmente :

 

¡Esta parte del programa no funciona!

 

1. “Pues es raro…”
2. “Nunca había pasado antes.”
3. “Pues ayer funcionaba…”
4. En mi ordenador sí funciona
5. Lo habrá cambiado alguien después de mí

Y la mejor de todas:

¡Pues algo estarás haciendo mal! (Dígase con cara de cabreo)

 

Ahora a levantarse un rato, que si llegasteis hasta aquí os habéis ganado un descanso! Si podéis…

 

 

 

Feliz semana, y saludos!