jueves, 17 de enero de 2013

WindowBuilder: Interfaces gráficas en Java arrastrando y soltando componentes

Si te has tenido que escribir interfaces gráficas en JAVA con swing (por ejemplo), habrás visto que es un auténtico #@ñ&%@@... engorro. Si vienes de .NET echarás mucho de menos el diseñador de formularios de Visual Studio (que es un lujazo).

Pues bien, Google ha desarrollado un plugin para eclipse llamado Windowbuilder que nos permite diseñar nuestras interfaces gráficas simplemente arrastrando y soltando componentes (botones, etiquetas, cajas de texto, paneles,...) en nuestra ventana de diseño, y él automáticamente se encarga de generar el código Java necesario para ese diseño de ventana.

En la siguiente imagen te muestro la ventana de diseño de formularios con Windowbuilder:


Sigue leyendo si quieres ver cómo instalar Windowbuilder en tu equipo.


Como ves, en la parte inferior se muestran dos pestañas: Fuente y Diseño
Trabajamos en modo diseño, arrastrando y soltando componentes de la paleta de compentes y, en la pestaña Fuente, se va generando automáticamente el código asociado a nuestro diseño, exactamente igual a como lo hace Visual Studio.

1. Instalación de Windowbuilder

La verdad es que ha sido realmente un follón de instalar, así que te voy a dar algunos pasos básicos que debes realizar:

  • Instalar Google Development Toolkit
  • Instalar Google Web Toolkit

3. Directorio de instalación de GWT

En eclipse/ventana/preferencias/Windowbuilder/GWT, establece la ruta al directorio de instalación de GWT. En mi caso, cuelga del directorio plugins de mi instalación de eclipse:


/home/.../eclipseJUNO/plugins/com.google.gwt.eclipse.sdkbundle_2.5.0.v201212122042-rel-r42/gwt-2.5.0

3. Creamos un nuevo proyecto

Ahora que ya tenemos todo instalado y bien configurado, creamos un nuevo proyecto Java, normal y corriente, como lo hemos hecho siempre.

4. Añadimos un JFrame "vitaminado", autogenerado con Windobuilder


Ahora vamos a añadir un nuevo JFrame pero creado por Windowbuilder. Para ello, nos colocamos en el explorador de proyectos sobre nuestro proyecto, botón derecho, nuevo, y elegimos otro tipo de componente:




Bajo Windowbuilder/Swing Designer, seleccionamos JFrame:


Le ponemos un nombre a nuestro JFrame, y como vemos, se muestra en el área de desarrollo el código (con un mogollón de líneas ya preescritas) y con una novedad, y es que en la parte baja vemos que tenemos una pestaña para código y otra para diseño:



5. Pestaña de diseño

Elegimos la visualización de diseño, y se nos muestra nuestro formulario y la toda paleta de componentes de componentes (botones, etiquetas, paneles, cajas de texto,...) que le podemos incluir:



6. Layout absolute al JFrame

Para poder diseñar cómodamente nuestro formulario, establecemos que el layout del formulario sea absolute (ni FloatLayout, ni BoxLayout,...), sino Absolute Layout:



7. Agregamos un simple botón

Ahora sí que es fácil añadir un simple botón al formulario.
En la paleta de componentes, seleccionamos un JButton, y pinchamos donde queramos colocarlo en nuestro formulario:


8. Ejecutamos nuestra aplicación

Y ya tenemos nuestra aplicación ejecutándose: