Como crear una aplicación gráfica con Windows Builder de Eclipse

java_base_web

Hola a todos, hoy os explicare como podemos crear una aplicación gráfica con el plugin de Eclipse Windows Builer.
Windows Builder es un plugin de Eclipse que nos permite crear el diseño de una aplicación de forma gráfica lo que nos facilita muchas cosas a la hora de programar, también es bidireccional, es decir, que lo que modifiquemos de forma gráfica afectara al código y viceversa.

En este post, estamos usando Eclipse Juno, que ya lo trae incorporado desde la versión 4.2.

Lo primero que te recomiendo es que compruebes que tienes tu Eclipse actualizado, para ello, pincha Help -> Check for updates.

En caso de que uses otra versión que no lo incluya, elige tu versión, copia el enlace de la pagina a la que te lleve y en tu Eclipse en Help -> Install new software, después, añade un repositorio con la dirección que has copiado y aparecerá Windows Builder.

Cuando lo tengamos instalado, seleccionamos el proyecto donde queramos crearlo y con el botón secundario seleccionamos New -> Other -> Windows Builder -> SwingDesigner -> JFrame

windows builder captura 1

Ponemos el nombre de la aplicación y nos aparecerá la ventana de código que conocemos pero ahora veremos que tenemos dos pestañas para cambiar entre código y diseño.

windows builder captura 2

Si vemos el código, vemos que es un código que contiene lo básico para ejecutarse, según vayamos modificando la ventana de forma gráfica se ira modificando el código, os aconsejo que no lo dejéis de lado, intentar ordenarlo como vosotros mas lo entendáis. Por defecto, crea un contenedor con un panel ya incluido. Si seleccionamos la ventana, podemos modificar las propiedades de esta.

windows builder captura 3

También podemos redimensionar la ventana de forma gráfica como lo haríamos con una ventana normal.

windows builder captura 4

Para insertar un componente, pincharemos un componente en el panel de medio, arrastramos donde queremos colocarlo y soltamos.

windows builder captura 5

Si estas siguiendo este ejemplo, veras que al añadir un componente a la ventana aparece como 5 zonas, para cambiar esto, simplemente en la opción absolute layout dentro de la carpeta layout.

windows builder captura 6

Si no obtienes resultado de esta forma, borra la siguiente linea de código que viene al crear la aplicación contentPane.setBorder(new EmptyBorder(5, 5, 5, 5)); 

A veces, es necesario, que un componente que se crea como variable se convierta en un atributo de la clase, podemos hacerlo manualmente en el código, en Windows Builder, seleccionamos el componente y pinchamos en el botón que aparece en la imagen.

windows builder captura 7

El resto ya es probar a hacer nuestros propios diseños. Recordar combinar código y diseño.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *