Diseñadores de interfaces

WindowBuilder para Eclipse

WindowBuilder es un plugin de código abierto para Eclipse destinado a crear interfaces
gráficas de usuario (GUI) de forma rápida y sencilla. Como otros muchos sistemas de este
tipo, contiene una paleta de elementos que podemos añadir mediante “drag and drop”,
arrastrar y soltar. En lugar de tener que escribir el código a medida que vamos incluyendo
elementos gráficos en nuestra ventana, WindowBuilder nos genera el código en nuestras
clases.

Aunque WindowBuilder sea una herramienta de gran ayuda, necesitamos comprender la

estructura con la que WindowBuilder crea clases para poder modificarla y darle un formato
a las clases que nos ayude a separar y entender el programa.

Instalación de WindowBuilder

Para poder descargar WindowBuilder iremos en Eclipse a la pestaña Help y ahí a Eclipse
MarketPlace…. Buscamos el Plugin por su nombre (WindowBuilder) en el campo buscar, y
una vez que lo haya encontrado, pulsamos sobre instalar.

Al terminar la instalación, reiniciamos Eclipse y ya podremos trabajar con él.

Crear un proyecto con ventanas

WindowBuilder está compuesto de varias herramientas para crear interfaces gráficas de

usuario. Nosotros vamos a trabajar únicamente con los componentes Swing. Para ello
usaremos la herramienta Swing Designer de WindowBuilder.
Por convenio, en Java una aplicación de escritorio empleará un contenedor principal
de tipo JFrame. Si además contiene otras ventanas secundarias dentro del programa
emplearemos contenedores de tipo JDialog para estas ventanas secundarias.
Creamos un proyecto de la misma forma que lo hacemos siempre:

Creamos una clase JFrame para una ventana. Dentro de nuestro proyecto, en algún
package haremos lo siguiente. Debemos usar los componentes de Swing o de la sección
Swing Designer de WindowBuilder:
También podemos acceder de forma rápida al menú de WindowBuilder mediante su nuevo
botón, siempre seleccionando Swing como componentes gráficos:

Una vez creada la clase nos aparecerá una nueva vista, desde la cual podemos acceder al
código o al diseño a través de las pestañas inferiores.

Ventana sin Layout Manager

Para poder emplazar elementos en una ventana de cualquier tipo debemos indicar una
organización (Layout). Si al principio no queremos complicarnos demasiado con un layout
podemos trabajar de forma sencilla con AbsoluteLayout. Con este Layout podemos
emplazar los elementos en el lugar que queramos, aunque no quedará tan bién a la hora de
redimensionar la ventana. Usando AbsoluteLayout los elementos se emplazan
atendiendo a coordenadas. Esto se desaconseja en el futuro, ya que no mantiene un
orden al redimensionar la ventana.
Por defecto toda aplicación JFrame emplea un JPanel principal de contenido contentPane.
En el iremos arrastrando todos los elementos que queramos emplear. Para aplicar un layout
a nuestra ventana tan solo tenemos que pinchar sobre el layout que queremos usar y pinchar
después sobre la ventana.

Añadir manejadores de eventos

Para añadir un manejador de eventos a nuestra aplicación, bastará con pulsar clic derecho
sobre el elemento (p.e. botón) sobre el cual queremos controlar un evento. Se nos
desplegará un menú en el que podemos seleccionar el evento que queremos controlar.

En algunos componentes deberemos crear un manejador de eventos para otro tipo de

eventos (KeyEvent, StateChanged, p.e.), aunque como se ha comentado, en la mayoría de
los casos bastará con el método actionPerformed().

Cuando creemos un manejador de eventos, este se asociará al elemento sobre el cual se

realiza el evento (p.e. botón). Este código se creará justo debajo de la definición del
componente, por lo que deberemos moverlo al lugar en el que lo queremos organizar (por
ejemplo, un método para inicializar los manejadores de eventos).
UIDesigner para IntelliJ
Cuando trabajamos con el IDE IntelliJ, también haremos uso de su diseñador de interfaces
UIDesigner. La principal diferencia con WindowBuilder, es que UIDesigner no crea
elementos de tipo JFrame o JDialog, sino que crea contenedores de segundo nivel (JPanel).

Este elemento posteriormente debemos añadirlo a un contenedor de alto nivel, usando el

método setContentPane().

Para crear una GUI utilizando IntelliJ, haremos lo siguiente:

1. Ir a File → New
2. Seleccionar GUI Form (o Dialog)
3. Dar nombre al formulario y seleccionar el Layout Manager
4. Marcar el checkbox Create bound class, e indicar el nombre