Universidad de los Andes

Ingeniería de Sistemas y Computación Estructura de Datos

Tutorial WindowBuilder

Proyecto Cupi2

Introducción a WindowBuilder WindowBuilder es un editor integrado a Eclipse y a los diferentes ambientes de desarrollo basados en Eclipse, que facilita la creación de interfaces gráfica en Java. WindowBuilder permite la creación de interfaces usando librerías gráficas como SWT (Standard Widget Library), Swing y GWT (Google Web Toolkit). Cuenta con un editor visual y un editor de código Java lo que permite un trabajo simultáneo, y permite arrastrar controles en la ventana de interfaz, cambiar las propiedades de los controles utilizando un editor de propiedades, entre otras funcionalidades.

Ilustración 1. Editor de código Java

Ilustración 2. Editor gráfico de la interfaz

Instalación de WindowBuilder

1. Verifique primero si WindowBuilder ya ha sido instalado. Para esto en el menú Windows → Show View selecciones la opción 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 guía de instalación y continuar con la sección 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) http://download.eclipse.org/windowbuilder/WB/integration/4.4/

Eclipse 3.6 (Kepler) http://download.eclipse.org/windowbuilder/WB/integration/4.3/

Eclipse 3.6 (Juno) http://download.eclipse.org/windowbuilder/WB/integration/4.2/

6. Haga clic en Finish para confirmar la instalación. Espere unos minutos mientras se realiza la instalación. 7. Finalmente en el cuadro de diálogo haga clic en Yes para reiniciar Eclipse y terminar la instalación.

Desarrollo de una interfaz con WindowBuilder

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

Ilustración 3. Interfaz de usuario del Traductor.

El objetivo del tutorial es familiarizarse con el editor WindowBuilder en la creación 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 descomprímalo 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, sitúese 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 gráfica del editor debe aparece una pequeña ventana.

7. En el editor de código de la clase InterfazTraductorWB adiciones el atributo:

private Traductor traductor;

E inicialícelo en el constructor de la clase. traductor = new Traductor();

8. En el editor gráfico seleccione la ventana JFrame haciendo clic en la parte superior de la ventana. En el

editor de propiedades extienda las opciones de edición haciendo clic sobre el botón . Cambie en título y el tamaño de la ventana a El Traductor y (700,425) respectivamente. Asegúrese que la propiedad defaultCloseOperation sea EXIT_ON_CLOSE.

¿Cuál es la utilidad del editor de propiedades?

9. Sitúese 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 opción 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, sitúese en la paleta y escoja en el grupo de Components la opción JLabel. Luego haga clic en el panel en la vista de diseño y la etiqueta será adicionada al panel. Para cambiar el nombre utilice la vista de Structure.

¿Cuál es la utilidad de la paleta?

12. Adicione un icono a la etiqueta desde la vista de propiedades. Presione el botón frente a la propiedad icon, seleccione la opción 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 tamaño del panel a (700,115) en el editor de propiedades y modifique la propiedad text de la etiqueta para que no tenga ningún valor. El panel debe verse así:

14. Adicione el panel creado a la venta principal InterfazTraductorWB. Para esto, seleccione en la paleta la opción 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 botón frente a la propiedad

border. En el dialogo que aparece elija TitleBorder y ponga como título Consulta de traducciones.

El panel debe quedar así:

17. Cambie la dimensión del panel a (700,90). Cambie también el layout a GridLayout. Para ellos localice la propiedad layout y seleccione GridLayout en la zona de valores. Expanda la información y configure el número de columnas en 6 y filas en 2.

18. Adicione al panel JLabel con los siguientes atributos (hágalo en el mismo orden como están enlistados):

Nombre Texto

etiquetaPalabra Palabra

etiquetaIdiomaTraduccionOrigen Idioma Origen

etiquetaIdiomaTraduccionDestino Idioma Destino

etiquetaTraduccion Traducción

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

19. Agregue dos etiquetas más con los nombre etiqueta1 y etiqueta2. Elimine el texto de estas etiquetas. Luego de esta modificación el panel debe verse así:

20. Adicione al panel un JTextField con nombre campoPalabra. Para ello sitúese en la paleta y escoja en Components la opción 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 selecciónelo y haga clic sobre el botón 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 sitúese en la paleta y escoja en Components la opción JButton. Luego haga clic sobre el panel. Cambie el nombre del botón desde la vista de Structure.

25. Cambie el texto del botón por Traducir desde el editor de propiedades. 26. Realice el procedimiento anterior para agregar el botón de limpiar. El panel debe quedar así:

27. En la clase InterfazTraductorWB agregue las constantes: public static final String IDIOMA_ESPANOL = "Español";

public static final String IDIOMA_INGLES = "Inglés";

public static final String IDIOMA_FRANCES = "Francés";

public static final String 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 métodos en la clase PanelConsultaWB:

/**

* Asigna la traducción 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 método inicializarComboIdiomaTraduccion().

31. Adicione el PanelConsultaWB a la ventana principal InterfazTraductorWB. Para esto, seleccione en la paleta la opción 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 selecciónelo y

haga clic sobre el botón 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 método:

public void setPrincipal(InterfazTraductorWB ventana)

{

principal = ventana;

}

34. En el método constructor de la clase InterfazTraductorWB adiciones después de la creación del PanelConsultaWB la siguiente línea de código: panelConsultaWB.setPrincipal(this);

35. Adicione el siguiente método 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 traducción

if( destino == Traductor.ESPANOL )

{

// Si es español el idioma destino se muestra la traducción

panelConsultaWB.mostrarTraduccion( traduccion.darPalabra( ) );

}

else

{

// Si el idioma destino no es español se muestra la palabra

panelConsultaWB.mostrarTraduccion( traduccion.darTraduccion( ) );

}

}

else

{

panelConsultaWB.mostrarTraduccion( "" );

JOptionPane.showMessageDialog( this, "No existe la traducción de la palabra",

"Traducción", JOptionPane.ERROR_MESSAGE );

}

}

36. Adicione un action listener a los botones de la clase PanelConsultaWB. Para esto haga clic derecho sobre el botón de Traducir y en el menú Add event handler → action seleccione la opción actionPerformed.

El siguiente fragmento de código debió haber sido adicionado: botonTraducir.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent arg0) {

}

});

Agregue la siguiente línea de código dentro del método actionPerformed:

principal.traducirPalabra(campoPalabra.getText(),

comboIdiomaTraduccionOrigen.getSelectedIndex(),

comboIdiomaTraduccionDestino.getSelectedIndex());

37. Repita este procedimiento para el botón de Limpiar. Agregue dentro del actionPerformed la siguiente línea: limpiar();

38. Compruebe que los actions fueron creado correctamente. Para ellos ejecute la aplicación y verifique el funcionamiento de los botones.

Ahora construya los demás paneles de la interfaz: panel para agregar palabras, panel para la cantidad de traducciones y el panel con las opciones de extensión del ejercicio.