Universidad de los Andes

Ingeniera de Sistemas y Computacin

Estructura de Datos
Tutorial WindowBuilder

Proyecto Cupi2

Introduccin a WindowBuilder
WindowBuilder es un editor integrado a Eclipse y a los diferentes ambientes de desarrollo basados en Eclipse,
que facilita la creacin de interfaces grfica en Java. WindowBuilder permite la creacin de interfaces usando
libreras grficas como SWT (Standard Widget Library), Swing y GWT (Google Web Toolkit). Cuenta con un
editor visual y un editor de cdigo Java lo que permite un trabajo simultneo, y permite arrastrar controles en la
ventana de interfaz, cambiar las propiedades de los controles utilizando un editor de propiedades, entre otras
funcionalidades.

Ilustracin 1. Editor de cdigo Java

Ilustracin 2. Editor grfico de la interfaz

Instalacin de WindowBuilder
1. Verifique primero si WindowBuilder ya ha sido instalado. Para esto en el men Windows Show View
selecciones la opcin Other.

2. Revise que aparezcan la carpeta WindowBuilder.

3. Si encuentra dicha carpeta, significa que el plug-in se ha instalado. En tal caso puede obviar la gua de
instalacin y continuar con la seccin Desarrollo de una interfaz con WindowBuilder.
4. Para instalar el editor: Seleccione en el men Help Install New Software.

5. En el dialogo de software disponible introduzca la URL del sitio de WindowBuilder y seleccione todos
tem para instalar. Haga clic en Next.
Eclipse 3.6 (Luna)
Eclipse 3.6 (Kepler)
Eclipse 3.6 (Juno)

http://download.eclipse.org/windowbuilder/WB/integration/4.4/
http://download.eclipse.org/windowbuilder/WB/integration/4.3/
http://download.eclipse.org/windowbuilder/WB/integration/4.2/

6. Haga clic en Finish para confirmar la instalacin. Espere unos minutos mientras se realiza la instalacin.
7. Finalmente en el cuadro de dilogo haga clic en Yes para reiniciar Eclipse y terminar la instalacin.

Desarrollo de una interfaz con WindowBuilder

En este ejemplo se va a desarrollar la interfaz grfica del Traductor (ejemplo de APO2 nivel 7).

Ilustracin 3. Interfaz de usuario del Traductor.

El objetivo del tutorial es familiarizarse con el editor WindowBuilder en la creacin de: JFrame, JPanel, JButton,
JLabel, JComboBox y JTextField.
1. Descargue del portal de Cupi2 http://cupi2.uniandes.edu.co/sitio/index.php/cursos/apo2/nivel-7 el
ejercicio n7_traductor.zip y descomprmalo en su carpeta de trabajo.
2. Abra el proyecto en Eclipse.
3. Dentro de la carpeta source cree el paquete uniandes.cupi2.traductor.interfazWB.
4. Cree la clase InterfazTraductorWB que extiende de JFrame. Para esto, sitese en el paquete creado,
haga clic derecho y en el men seleccione New Other. En el dialogo que aparece busque la carpeta
WindowBuilder Swing Designer y seleccione el tem JFrame. Haga clic en Next.

5. Introduzca el nombre de la clase y haga clic en Finish.

6. En la vista grfica del editor debe aparece una pequea ventana.

7. En el editor de cdigo de la clase InterfazTraductorWB adiciones el atributo:

private Traductor traductor;

E inicialcelo en el constructor de la clase.

traductor = new Traductor();

8. En el editor grfico seleccione la ventana JFrame haciendo clic en la parte superior de la ventana. En el
editor de propiedades extienda las opciones de edicin haciendo clic sobre el botn
. Cambie en
ttulo y el tamao de la ventana a El Traductor y (700,425) respectivamente. Asegrese que la
propiedad defaultCloseOperation sea EXIT_ON_CLOSE.

Cul es la utilidad del editor de propiedades?

9. Sitese en la vista Structure. En esta vista se despliegan en un rbol los distintos elementos,
componentes y eventos que hacen parte de la clase. Cambie el nombre de jContentPane por
panelPrincipal. Para esto, haga clic derecho sobre este panel y seleccione la opcin Rename. Luego
modifique la propiedad de layout para que tenga el valor de FlowLayout.

10. Cree la clase PanelImagenWB de forma similar como se hizo en el punto 4. Seleccione dentro de la
carpeta Swing Designer el tem JPanel.

11. Adicione al panel creado un JLabel con el nombre etiquetaImagen. Para esto, sitese en la paleta y
escoja en el grupo de Components la opcin JLabel. Luego haga clic en el panel en la vista de diseo y
la etiqueta ser adicionada al panel. Para cambiar el nombre utilice la vista de Structure.

Cul es la utilidad de la paleta?

12. Adicione un icono a la etiqueta desde la vista de propiedades. Presione el botn frente a la propiedad
icon, seleccione la opcin Absolute path in file system y navegue hasta la carpeta data del proyecto
para encontrar la imagen encabezado. Seleccione la imagen y haga clic en OK.

13. Cambie el tamao del panel a (700,115) en el editor de propiedades y modifique la propiedad text de la
etiqueta para que no tenga ningn valor. El panel debe verse as:

14. Adicione el panel creado a la venta principal InterfazTraductorWB. Para esto, seleccione en la paleta la
opcin Choose Component y digite panel. Seleccione la clase PanelImagenWB y oprima OK. Luego
haga clic sobre el panel en la ventana del traductor. Para ver el panel adicionado haga clic derecho
sobre la ventana y presione Refresh.

15. Cree la clase PanelConsultaWB como se hizo en el punto 10.

16. Modifique el borde del panel en el editor de propiedades. Haga clic en el botn frente a la propiedad
border. En el dialogo que aparece elija TitleBorder y ponga como ttulo Consulta de traducciones.

El panel debe quedar as:

17. Cambie la dimensin del panel a (700,90). Cambie tambin el layout a GridLayout. Para ellos localice la
propiedad layout y seleccione GridLayout en la zona de valores. Expanda la informacin y configure el
nmero de columnas en 6 y filas en 2.

18. Adicione al panel JLabel con los siguientes atributos (hgalo en el mismo orden como estn enlistados):
Nombre
etiquetaPalabra

Texto
Palabra

etiquetaIdiomaTraduccionOrigen

Idioma Origen

etiquetaIdiomaTraduccionDestino

Idioma Destino

etiquetaTraduccion

Traduccin

Cambie el texto de las etiquetas en el editor de propiedades. El panel debe quedar as:

19. Agregue dos etiquetas ms con los nombre etiqueta1 y etiqueta2. Elimine el texto de estas etiquetas.
Luego de esta modificacin el panel debe verse as:

20. Adicione al panel un JTextField con nombre campoPalabra. Para ello sitese en la paleta y escoja en
Components la opcin JTextField. Luego haga clic sobre el panel. Cambie el nombre del campo de
texto desde la vista de Structure.
21. Cree un JComboBox con el nombre comboIdiomaTraduccionOrigen de forma similar a como
introdujo el JLabel. Luego de crear el JComboBox seleccinelo y haga clic sobre el botn
en el
editor de propiedades para indicar que es un atributo de la clase.
22. Repita el paso anterior pero ahora cree un JComboBox con el nombre
comboIdiomaTraduccionDestino.
23. Adicione un JTextField con el nombre campoTraduccion de forma similar al punto 20. Ponga la
propiedad editable de este en false. Luego de esto, el panel debe lucir de la siguiente manera:

24. Cree un JButton con nombre botonTraducir. Para ello sitese en la paleta y escoja en Components la
opcin JButton. Luego haga clic sobre el panel. Cambie el nombre del botn desde la vista de
Structure.
25. Cambie el texto del botn por Traducir desde el editor de propiedades.
26. Realice el procedimiento anterior para agregar el botn de limpiar. El panel debe quedar as:

27. En la clase InterfazTraductorWB agregue las constantes:

public
public
public
public

static
static
static
static

final
final
final
final

String
String
String
String

IDIOMA_ESPANOL = "Espaol";
IDIOMA_INGLES = "Ingls";
IDIOMA_FRANCES = "Francs";
IDIOMA_ITALIANO = "Italiano";

28. En la clase PanelConsultaWB agregue las constantes:

private final static String TRADUCIR = "traducir";
private final static String LIMPIAR = "limpiar";

29. Agregue los siguientes mtodos en la clase PanelConsultaWB:

/**
* Asigna la traduccin de una palabra
* @param traduccion de una palabra
*/
public void mostrarTraduccion( String traduccion )
{
campoTraduccion.setText( traduccion );
}
/**
* Inicializa el combo especificado con las traducciones posibles.<br>
* <b> pre: </b> comboIdiomaTraduccion!=null.
*/
private void inicializarComboIdiomaTraduccion( JComboBox combo )
{
combo.addItem( InterfazTraductorWB.IDIOMA_INGLES );
combo.addItem( InterfazTraductorWB.IDIOMA_FRANCES );
combo.addItem( InterfazTraductorWB.IDIOMA_ITALIANO );
combo.addItem( InterfazTraductorWB.IDIOMA_ESPANOL );
combo.setSelectedIndex( -1 );
}
/**
* Limpia todos los campos y el combo del formulario
*/
public void limpiar( )
{
campoPalabra.setText( "" );
campoTraduccion.setText( "" );
comboIdiomaTraduccionOrigen.setSelectedIndex( -1 );
comboIdiomaTraduccionDestino.setSelectedIndex( -1 );
}

30. Realiza las modificaciones necesarias para que los JComboBox se inicialicen con los valores de los
idiomas. Utilice el mtodo inicializarComboIdiomaTraduccion().
31. Adicione el PanelConsultaWB a la ventana principal InterfazTraductorWB. Para esto, seleccione en la
paleta la opcin Choose Component y digite panel. Seleccione la clase PanelConsultaWB y oprima
OK. Luego haga clic sobre el panel en la ventana del traductor. Luego de agregar el panel seleccinelo y
haga clic sobre el botn
en el editor de propiedades para indicar que es un atributo de la clase. La
ventana debe tener la siguiente apariencia:

32. Adicione el siguiente atributo en la clase PanelConsultaWB:

private InterfazTraductorWB principal;

33. En la misma clase cree el siguiente mtodo:

public void setPrincipal(InterfazTraductorWB ventana)
{
principal = ventana;
}

34. En el mtodo constructor de la clase InterfazTraductorWB adiciones despus de la creacin del

PanelConsultaWB la siguiente lnea de cdigo:
panelConsultaWB.setPrincipal(this);

35. Adicione el siguiente mtodo en la clase InterfazTraductorWB:

/**
* Traduce una palabra y muestra el resultado en el panel de consulta
* @param pal es la palabra - pal != null
* @param origen es el idioma de origen - origen pertenece a {FRANCES, INGLES,
ITALIANO, ESPANOL}
* @param destino es el idioma destino - destino pertenece a {FRANCES, INGLES,
ITALIANO, ESPANOL}
*/
public void traducirPalabra( String pal, int origen, int destino )
{
Traduccion traduccion = traductor.traducir( pal, origen, destino );
if( traduccion != null )
{
// Dependiendo del idioma destino se muestra la palabra o la traduccin
if( destino == Traductor.ESPANOL )
{
// Si es espaol el idioma destino se muestra la traduccin
panelConsultaWB.mostrarTraduccion( traduccion.darPalabra( ) );
}
else
{
// Si el idioma destino no es espaol se muestra la palabra
panelConsultaWB.mostrarTraduccion( traduccion.darTraduccion( ) );
}
}
else
{
panelConsultaWB.mostrarTraduccion( "" );
JOptionPane.showMessageDialog( this, "No existe la traduccin de la palabra",
"Traduccin", JOptionPane.ERROR_MESSAGE );
}
}

36. Adicione un action listener a los botones de la clase PanelConsultaWB. Para esto haga clic derecho
sobre el botn de Traducir y en el men Add event handler action seleccione la opcin
actionPerformed.

El siguiente fragmento de cdigo debi haber sido adicionado:

botonTraducir.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
}
});

Agregue la siguiente lnea de cdigo dentro del mtodo actionPerformed:

principal.traducirPalabra(campoPalabra.getText(),
comboIdiomaTraduccionOrigen.getSelectedIndex(),
comboIdiomaTraduccionDestino.getSelectedIndex());

37. Repita este procedimiento para el botn de Limpiar. Agregue dentro del actionPerformed la siguiente
lnea:
limpiar();

38. Compruebe que los actions fueron creado correctamente. Para ellos ejecute la aplicacin y verifique el
funcionamiento de los botones.
Ahora construya los dems paneles de la interfaz: panel para agregar palabras, panel para la cantidad de
traducciones y el panel con las opciones de extensin del ejercicio.