Diseño de interfaces en Java con WindowBuilder

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.

 

Diseño de interfaces en Java con WindowBuilder

 

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

 

Diseño de interfaces en Java con WindowBuilder

Creamos un nuevo proyecto

 

Diseño de interfaces en Java con WindowBuilder

De tipo “Java”

 

Diseño de interfaces en Java con WindowBuilder

 

Le damos como nombre “EjemploWindowBuilder”

 

escuela_espai_4

 

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

 

 

 

Diseño de interfaces en Java con WindowBuilder

 

De tipo “Application Window” para poder usar las características de WindowBuilder

Diseño de interfaces en Java con WindowBuilder

 

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

Diseño de interfaces en Java con WindowBuilder

 

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.

Diseño de interfaces en Java con WindowBuilder

 

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.

Diseño de interfaces en Java con WindowBuilder

 

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.

Diseño de interfaces en Java con WindowBuilder

 

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)

Diseño de interfaces en Java con WindowBuilder

 

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.

Diseño de interfaces en Java con WindowBuilder

 

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

Diseño de interfaces en Java con WindowBuilder

 

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

Diseño de interfaces en Java con WindowBuilder

 

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

escuela_espai_15

 

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.

escuela_espai_16

 

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”.

escuela_espai_17

 

Repetimos el mismo proceso con los botones “Guardar” y “Salir”

escuela_espai_18

 

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.

escuela_espai_19

 

hacemos lo mismo con el JList.

escuela_espai_20

 

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”

escuela_espai_21

 

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

 

escuela_espai_22

 

haced click en la pestaña “design” para ver el código.

 

escuela_espai_23

 

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.

escuela_espai_24

 

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…

 

escuela_espai_55

 

 

Feliz semana, y saludos!

3Comentarios

  • David
    23/08/2018

    Amigo sabes como se podría poner mensajes a los botones, por ejemplo al tener que llenar campos si no están rellenados o si están bien de operación completada

  • Nacho
    05/10/2014

    Tenéis que importar el paquete del JScroll para que no os tire error.

Escribe un comentario