Proyecto Cupi2Proyecto Cupi2Proyecto Cupi2Proyecto Cupi2

Universidad de los Andes

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

Hoja de Trabajo Visual Editor

Introducción a Visual Editor

Lea la siguiente información acerca de Visual Editor

Visual Editor (VE) para Java es un editor, empleado en Eclipse, que facilita la creación de interfaces gráficas. VE permite la generación de tales interfaces usando librerías gráficas como Swing, AWT (Abstract Window Toolkit) y SWT (Standard Widget Library). Por medio de VE es posible trabajar simultáneamente en la modificación del código fuente Java y en el diseño visual de la interfaz. Las partes de VE pueden observarse en la figura 1 (para más información sobre las distintas partes del editor referirse a [1])

Es importante tener en cuenta que VE no tiene una perspectiva propia.

Figura 1. Partes de Visual Editor

1. Design view 2. Source View 3. Palette 4. Properties view 5. Java Beans view

Instalación de Visual Editor

Siga los siguientes pasos para la instalación de Visual Editor en Eclipse 3.2

1. Verifique primero si ya esta instalado en la sala el plugin de VisualEditor. En tal caso puede obviar la guía de instalación y continuar con la sección: Realizar una interfaz con Visual Editor.

2. Para verificar si está instalado Visual Editor siga los siguientes pasos:

a. En el menú “Window/Show View” escoja la opción “Other…”

b. En el campo de texto donde dice “type filter text” escriba “plug-in registry”. A continuación, selecciónelo y haga click en OK

c. Una vez aparezca la vista “Plug-in registry”, verifique en el listado que se encuentren los elementos señalados en la siguiente imagen.

d. Si tales elementos se encuentran, significa que el plugin está instalado correctamente. En tal caso puede obviar la guía de instalación y continuar con la sección: Realizar una interfaz con Visual Editor.

3. Para instalar Visual Editor: En el menú “Help/Software Updates” escoja la opción “Find and Install…”

4. En el Wizard que aparece seleccione la opción”Search for new features to install” y haga clic en “Next”.

5. Seleccione el sitio “Callisto Discovery Site” y haga clic en “Finish”.

6. Oprima “OK” en el cuadro de diálogo que le aparece. Espere un momento mientras el Update Manager

realiza la búsqueda de las actualizaciones disponibles. 7. En la ventana que le aparece seleccione las opciones “Enabling features”, “Graphical Editors and

Frameworks” y “Models and Model Development”. Haga clic en “Next”.

8. A continuación elija la opción “I accept the terms in the license agreement” y haga click en “Next”.

9. En la ventana que le aparece haga click en “Finish”.

10. En la siguiente ventana haga clic en “Install All”. Espere unos momentos mientras se realiza la instalación.

11. Finalmente en el cuadro de diálogo haga clic en “Yes” para reiniciar Eclipse y finalizar así la instalación.

12. Una vez efectuada la instalación es posible encontrar documentación sobre Visual Editor en el menú

“Help/Help Contents” y dentro de este en los contenidos de “Visual Editor for Java User Guide”.

Realizar una interfaz con Visual Editor

Siga los siguientes pasos

En este ejemplo se va a desarrollar la interfaz del Traductor (ejemplo de APO2 nivel 7), la cual puede ser apreciada en la figura 2. El objetivo es familiarizarse con el uso de Visual Editor creando, por medio de este, JFrames, JPanels, JButtons, JLabels, JComboBoxes y JTextFields. También se busca apreciar la utilidad del mismo en el desarrollo de interfaces gráficas.

1. Descargue del sitio de cupi2 http://cupi2.uniandes.edu.co/cursos/apo2/nivel7.htm el ejercicio n7_traductor.zip y descomprímalo en su carpeta de trabajo.

2. Abra el proyecto en Eclipse. 3. Si aparecen errores en el proyecto, recuerde configurar eclipse para que reconozca la instrucción assert. http://cupi2.uniandes.edu.co/cursos/apo2/docs/n1_assert.pdf 4. Dentro de la carpeta source cree el paquete uniandes.cupi2.traductor.interfazVE. 5. En el paquete creado en el punto anterior, cree la Java Visual Class InterfazTraductorVE la cual

debe extender JFrame. Para ello sitúese sobre el paquete uniandes.cupi2.traductor.interfazVE, haga clic derecho y en el menú New seleccione la opción Other. En el wizard que le aparece, dentro de la carpeta Java, seleccione Visual Class y haga clic en “Next “.

Figura 2. Interfaz del ejemplo del Traductor

Elija en Style, dentro de la carpeta Swing, la opción Frame para que la superclase sea JFrame. Marque

las opciones “public static void main” e “Inherited abstract methods” y haga clic en “Finish”.

En la vista de diseño de Visual Editor le debe aparecer una ventana similar a la siguiente:

6. En la clase InterfazTraductorVE adicione el siguiente atributo:

private Traductor traductor;

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

7. Cambie el código del método main por el siguiente fragmento de código. Lo anterior para llamar a la

interfaz y desplegarla cuando se ejecute la aplicación

SwingUtilities.invokeLater(new Runnable() {

public void run() {

InterfazTraductorVE interfaz = new InterfazTraductorVE( );

interfaz.setVisible( true );

}

});

8. En la vista de diseño de VE seleccione el JFrame que se esta mostrando haciendo clic sobre la barra de

títulos de éste. Cambie el tamaño del JFrame a (720, 425) y su título a “Traductor”. Para ello sitúese

sobre la vista Properties, ubique las propiedades size y title y digite los valores respectivos. También cambie la propiedad defaultCloseOperation para que tenga el valor de Exit.

¿Cuál es la utilidad de la vista Properties?

9. Sitúese en la vista JavaBeans. En esta vista se despliegan por medio de un árbol los distintos elementos,

componentes, listeners y eventos que hacen parte de la clase sobre la cual se está trabajando. Note que en ésta aparece el JFrame que se ha creado (this.- Traductor) y dentro de éste un JPanel

(jContentPane) el cual es adicionado por VE en el momento de creación del JFrame.

Cambie el nombre de jContentPane por panelPrincipal. Para ello en la vista JavaBeans sitúese sobre este panel, haga clic derecho y en el menú que le aparece seleccione “Rename Field”. Luego verifique que la propiedad layout tenga el valor de FlowLayout.

¿Qué pasa en la vista Source al seleccionar el JFrame o el JPanel?

¿Cuáles son las dos formas distintas ofrecidas por Visual Editor para seleccionar los diferentes elementos gráficos que han sido creados?

10. Cree la clase PanelImagenVE en el package uniandes.cupi2.traductor.interfazVE de forma similar

como se hizo en el punto 5. En Style dentro de la carpeta Swing seleccione Panel. Marque la opción “Inherited abstract methods” y haga clic en “Finish

11. Adicione al PanelImagenVE un JLabel con nombre “etiquetaImagen”. Para ello sitúese en la paleta y

escoja en “Swing Components” el componente JLabel. Luego sitúese sobre el panel en la vista de

diseño y haga clic sobre éste. Le debe aparecer una ventana similar a la siguiente:

Introduzca el nombre del JLabel y haga clic en “OK”.

¿Cuál es la utilidad de la paleta?

12. Adicione un icono al JLabel desde la vista de propiedades:

Al hacer clic en el botón de la derecha en la columna valores, aparecerá un dialogo para seleccionar la imagen que se quiere colocar en el JLabel. Localice la carpeta data y seleccione la imagen titulo.jpg y de clic en OK.

Cambie el size del panelImagen del tamaño de la imagen y modifique la propiedad text del JLabel para que no tenga ningún valor.

Su vista de diseño debe verse así:

13. Adicione el PanelImagenVE al JFrame InterfazTraductorVE. Para ello seleccione en la paleta la

opción “Choose Bean”. Digite “panel”, elija la clase PanelImagenVE y oprima “OK”.

Ingrese el nombre “panelImagenVE” y haga clic en “OK”.

Seleccione en el Java Editor la clase InterfazTraductorVE. Sitúese en la vista JavaBeans y haga clic

sobre “panelPrincipal”.

Un objeto de tipo PanelImagenVE tuvo que ser adicionado a “panelPrincipal”. Si no se refresca la vista

de diseño puede ver los cambios en InterfazTraductorVE haciendo clic derecho sobre la clase y

seleccionando la opción Run As JavaBean. La ventana que debe ver es la siguiente:

14. Cree la clase PanelConsultaVE en el package uniandes.cupi2.traductor.interfazVE de forma similar

como se hizo en el punto 5. En Style dentro de la carpeta Swing seleccione Panel. Marque la opción “Inherited abstract methods” y haga clic en “Finish

15. Modifique el borde del JPanel. Para ello seleccione en la vista de diseño el JPanel, sitúese en la vista

Properties, localice la propiedad border y haga clic sobre el botón que aparece en la zona de valores de ésta. Le debe aparecer una ventana similar a la siguiente:

En “Border Type” seleccione la opción Titled. En Title digite “Consulta de traducciones”. Haga clic en “OK.”

El panel en la vista de diseño ahora debe tener una apariencia similar a la siguiente:

16. Cambie las dimensiones de PanelConsultaVE a 720 y 90. Para ello localice la propiedad size en la

vista Properties.

17. Cambie el layout de PanelConsultaVE a GridLayout. Para ello localice la propiedad layout en la vista

Properties y seleccione GridLayout en la zona de valores. Expanda la información del Layout y

configure el número de columnas en 6 y de filas en 2.

18. Adicione al PanelConsultaVE un JLabel con nombre “etiquetaPalabra”. Para ello sitúese en la

paleta y escoja en “Swing Components” el componente JLabel. Luego sitúese sobre el panel en la vista

de diseño y haga clic sobre éste. Le debe aparecer una ventana similar a la siguiente:

Introduzca el nombre del JLabel y haga clic en “OK”.

19. Cambie el texto del JLabel a “Palabra”. Para ello sitúese en la vista Properties, localice la propiedad text

y digite el nuevo texto. El panel debe tener ahora el siguiente aspecto:

20. Adicione los siguientes JLabels de forma similar como se hizo el punto 19:

“etiquetaIdiomaTraduccionOrigen”, “etiquetaIdiomaTraduccionDestino”, “etiquetaTraduccion”. 21. Cambie el texto de etiquetaIdiomaTraduccionOrigen a “Idioma Origen”, etiquetaIdiomaTraduccionDestino

a “Idioma Destino” y etiquetaTraduccion a “Traducción”. Hágalo de la misma forma en que se realizó en el punto 20. Después de las modificaciones el panel debe verse así:

22. Agregue 2 etiquetas más con nombres “etiqueta1” y “etiqueta2”. Elimine el texto de estas etiquetas.

Luego de esta modificación el panel debe verse así:

23. Adicione al PanelConsultaVE un JTextField con nombre “campoPalabra”. Para ello sitúese en la

paleta y escoja en “Swing Components” el componente JTextField. Luego sitúese sobre el panel en la

vista de diseño y haga clic sobre éste. Le debe aparecer una ventana similar a la siguiente:

24. Introduzca un JComboBox con nombre “comboIdiomaTraduccionOrigen” de forma similar a como

introdujo el JLabel.

25. Repita el paso anterior pero ahora para crear un JComboBox con nombre

“comboIdiomaTraduccionDestino”. 26. Introduzca un JTextField con nombre “campoTraduccion” de forma similar al punto 24. Ponga la

propiedad Editable de este en False.

El panel debe lucir de la siguiente forma:

27. Introduzca un JButton con nombre “botonTraducir”. Para ello elija en la paleta JButton, sitúese en la

vista JavaBeans y coloque el JButton debajo del último JTextField que se creó. Note que es difícil

posicionar el JButton en la vista de Diseño debido a los dos elementos adicionados con anterioridad.

En este caso la vista JavaBeans es de gran utilidad.

28. Cambie el texto de “botonTraducir” por “Traducir”. Para ello seleccione el JButton en la vista de diseño

o vista JavaBeans, en la vista de propiedades localice la propiedad text y cambie su valor.

29. Realice el procedimiento anterior para agregar el botón limpiar.

¿Existe otra forma de cambiar el text de los elementos gráficos usando la vista de Diseño?

30. Cree las constantes en la clase InterfazTraductorVE:

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";

31. Cree las siguientes constantes en la clase PanelConsultaVE

private final static String TRADUCIR = "traducir";

private final static String LIMPIAR = "limpiar";

32. Cree los siguientes métodos en la clase “PanelConsultaVE”:

/** * Asigna la traducción de una palabra

* @param traduccion de una palabra

*/

public void mostrarTraduccion( String traduccion )

{

campoTraduccion.setText( traduccion );

}

/**

* Limpia todos los campos y el combo del formulario

*/

public void limpiar( )

{

campoPalabra.setText( "" );

campoTraduccion.setText( "" );

comboIdiomaTraduccionOrigen.setSelectedIndex( -1 );

comboIdiomaTraduccionDestino.setSelectedIndex( -1 );

}

/**

* Inicializa el combo especificado con las traducciones posibles.<br>

* <b> pre: </b> comboIdiomaTraduccion!=null.

*/

private void inicializarComboIdiomaTraduccion( JComboBox combo )

{

combo.addItem( InterfazTraductorVE.IDIOMA_INGLES );

combo.addItem( InterfazTraductorVE.IDIOMA_FRANCES );

combo.addItem( InterfazTraductorVE.IDIOMA_ITALIANO );

combo.addItem( InterfazTraductorVE.IDIOMA_ESPANOL );

combo.setSelectedIndex( -1 );

}

33. Realice las modificaciones necesarias para que los combos comboIdiomaTraduccionOrigen y comboIdiomaTraduccionDestino se inicialicen con los valores de los idiomas. Utilice el método inicializarComboIdiomaTraduccion()

34. Adicione el PanelConsultaVE al JFrame InterfazTraductorVE..Para ello seleccione en la paleta la

opción “Choose Bean”. Digite “panel”, elija la clase PanelConsultaVE y oprima “OK”.

Ingrese el nombre “panelConsultaVE” y haga clic en “OK”.

Seleccione en el Java Editor la clase InterfazTraductorVE. Sitúese en la vista JavaBeans y haga clic

sobre “panelPrincipal”.

Un objeto de tipo PanelConsultaVE tuvo que ser adicionado a “panelPrincipal”.

InterfazTraductorVE debe tener la siguiente apariencia:

35. Adicione el siguiente atributo en la clase PanelConsultaVE:

private InterfazTraductorVE principal = null;

En la misma clase, cree también el método siguiente: public void setPrincipal(InterfazTraductorVE principal)

{

this.principal = principal;

}

36. En el método getPanelConsultaVE, de la clase InterfazTraductorVE, adicione después de la

creación del panel la siguiente línea de código:

panelConsultaVE.setPrincipal(this);

37. Cree el siguiente método en la clase InterfazTraductorVE:

/** * 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 panelConsultaVE.mostrarTraduccion( traduccion.darPalabra( ) ); } else { // Si el idioma destino no es español se muestra la palabra panelConsultaVE.mostrarTraduccion( traduccion.darTraduccion( ) );

} } else { panelConsultaVE.mostrarTraduccion( "" ); JOptionPane.showMessageDialog( this, "No existe la traducción de la palabra", "Traducción", JOptionPane.ERROR_MESSAGE ); } }

38. Adicione un action listener a “botonTraducir” (de la clase PanelConsultaVE). Para ello seleccione el

JButton en la vista de Diseño, haga clic derecho sobre este y en el menú Events seleccione la opción

actionPerformed (algo similar puede realizarse utilizando la vista de JavaBeans).

Observe que el siguiente fragmento de código debió haber sido adicionado: botonTraducir.addActionListener( new java.awt.event.ActionListener( )

{

public void actionPerformed( java.awt.event.ActionEvent e )

{

System.out.println( "actionPerformed()" ); // TODO Auto-generated Event stub

actionPerformed()

}

} );

Elimine el System.out. y agregue la siguiente línea de código dentro del método actionPerformed:

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

39. Adicione un action listener a “botonLimpiar” (de la clase panelConsultaVE) de forma similar como se

realizó con “botonTraducir” en el punto anterior. Elimine el System.out y agregue la siguiente línea de

código dentro del método actionPerformed:

limpiar( );

40. Compruebe que los actions fueron creados correctamente. Para ello ejecute InterfazTraductorVE

como Java Application y verifique el funcionamiento de los botones.

Construya ahora el resto de la interfaz: panel para agregar palabras, panel para la cantidad de traducciones y el panel con las opciones de extensión del ejercicio.

Referencias

1. Eclipse. VE Project site. Recuperado el 22 de enero de 2007 de http://www.eclipse.org/vep/WebContent/main.php

2. Eclipse. VE Project site. Recuperado el 22 de enero de 2007 de http://www.eclipse.org/vep/WebContent/faq.html#install_howto