Os explicamos paso a paso, con capturas de pantalla, cómo instalar y utilizar la clase visual (Visual Class) en Eclipse (entorno de desarrollo visual para Java). Esta clase es muy útil para realizar apliaciones Java con entorno visual (formularios, botones, cuadros de texto, cuadros de opción, listas desplegables, grid, frames, menús, etc).

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Hay varias formas de instalar esta clase visual (visual class) en Eclipse, una de ellas sería descargándola manualmente y descomprimiendo el fichero .zip en la carpeta de instalación de Eclipse. Nosotros os explicaremos una forma más sencilla y rápida (automática).

Una vez instalado Eclipse (pulsa aquí para ver un manual de cómo hacerlo), accederemos Eclipse, pulsaremos en el menú «Ayuda» – «Actualizaciones de software» – «Buscar e instalar…»:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Seleccionaremos la opción «Buscar características nuevas para instalar», pulsaremos «Siguiente»:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

En este paso podremos indicar los sitios de actualizaciones para buscar nuevas características, también podremos añadir nuevos sitios remotos. Para instalar la clase Visual Editor marcaremos Callisto Discovery Site y The Eclipse Project Updates, pulsaremos «Finalizar»:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Indicaremos el duplicado de sitio (servidor) del que se realizará la descarga de Callisto Discovery Site (en nuestro caso [United Kingdom] UK Mirror service (http):

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Seleccionaremos el duplicado de sitio de actualizaciones para The Eclipse Project Updates:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Eclipse iniciará la búsqueda de actualizaciones en los sitios de actualizaciones marcados anteriormente. Para instalar Visual Editor de Eclipse marcaremos las opciones:

  • Graphical Editors and frameworks
    • Visual Editor 1.2.1
    • Graphical Editing Framework 3.2.2
Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

En la imagen anterior podremos observar que el asistente nos indica un aviso y desactiva la posibilidad de continuar con la instalación hasta que no se solucione. El aviso es La operación solicitada no se puede realizar porque invalidaría la configuración actual. Vea los detalles para obtener más información.
Visual Editor (1.2.1.v20060817_M-zXJUB0fxM-0vSdc) necesita característica «org.eclipse.emf (2.2.0)» o compatible.
Java EMF Model (1.2.1.v20060815_M—-6zXJJzKIRGVU) necesita característica «org.eclipse.emf (2.2.0)» o compatible.
. Para solucionar esta dependencia marcaremos también para instalar:

  • Models and Model Development
    • Eclipse Modeling Framework (EMF) Runtime + End-User Tools 2.2.2

Pulsaremos «Siguiente» para continuar:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Puesto que algunas de las descargas que hemos seleccionado tienen licencia de característica, deberemos aceptarla para continuar con la instalación, para ello marcaremos «Acepto los términos de los acuerdos de licencia». Pulsaremos «Siguiente» para continuar con la instalación de Visual Editor de Eclipse:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Puesto que algunas de las características de las opciones marcadas para la instalación (Visual Editor) no están firmadas nos mostrará este aviso. Pulsaremos «Instalar todo» para continuar:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Antes de iniciar la descarga de las actualizaciones, el asistente de Eclipse nos pedirá la ubicación donde queramos instalar cada uno de los paquetes seleccionados, por defecto los instalará en C:/eclipse. Pulsaremos «Finalizar» para continuar:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

El asistente de actualización de Eclipse inicará la descarga de las actualizaciones seleccionadas:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Una vez finalizada la descarga e instalada, el asistente de instalación y actualización de Eclipse nos mostrará una aviso indicando que es recomendable reiniciar el entorno de trabajo Eclipse para que se apliquen los cambios. Pulsaremos «Sí» para reiniciar Eclipse:

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)

Con el texto: Es recomendable reiniciar el entorno de trabajo para que los cambios surtan efecto, pero es posible aplicar los cambios en la configuración actual sin reiniciar. ¿Desea reiniciar ahora?

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Una vez instalada la clase Visual Editor de Eclipse, realizaremos una aplicación de ejemplo para explicar cómo usarla. Desde Eclipse, pulsaremos en el menú «Archivo» – «Nuevo» – «Proyecto…»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Seleccionaremos el tipo de proyecto nuevo (en nuestro caso Proyecto Java), pulsaremos «Siguiente» para continuar:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Indicaremos el nombre del proyecto (en nuestro caso pruebaAplicacionVisual), también podremos indicar la versión de JRE (Java Runtime Environmet), en nuestro caso jre1.6.0_01, indicaremos la ruta de la aplicación y pulsaremos «Finalizar»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Seleccionaremos el nuevo proyecto creado y pulsaremos con el botón derecho del ratón sobre él, pulsaremos en «Nuevo» – «Visual class«:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

En caso de no aparecer «Visual Class» pulsaremos sobre «Otros…» y seleccionaremos «Java» – «Visual Class»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Introduciremos el nombre del Paquete, el nombre del Tipo, seleccionaremos la superclase javax.swing.JFrame y pulsaremos «Finalizar»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Eclipse creará automáticamente un JFrame que será el contenedor principal de nuestra aplicación. También mostrará la Paleta de componentes visuales (Palette) con:

  • Componentes (Swing Components) como: JButton, JCheckBox, JRadioButton, JLabel, JTextField, JPasswordField, JTextArea, JSlider, JScrollBar, JList, JComboBox, JTree, JTable, JProgressBar, JOptionPane, JTextPane, JEditorPane.
  • Contenedores (Swing Container) como: JFrame, JPanel, JScrollPane, JSplitPane, JTabbedPane, JDesktopPane, JInternalFrame, JDialog, JWindow, JToolBar, JApplet.
  • Menús (Swing Menus) como: JMenuBar, JToolBar, JMenu, JPopupMenu, JMenuItem, JCheckBoxMenuItem, JRadioButtonMenuItem.

Mostrará la ventana de Propiedades, donde se mostrarán las características configurables propias de cada control seleccionado. En la parte inferior mostrará la ventana de código de la aplicación:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Como ejemplo insertaremos un componente de tipo JButton y otro de tipo JTextField, para mostrar en un mensaje el contenido del JTextField. Para añadiremos un contenedor llamado JPanel que será el contenedor de nuestro JButton y JTextField. Seleccionaremos la solapa Swing Containers de la ventana de Palette y pulsaremos sobre JPanel, a continación nos posicionaremos con el cursor del ratón sobre el área «Center» del JFrame y haremos clic:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Nos mostrará una ventana donde podremos indicar el nombre del componente JPanel que hemos insertado, en nuestro caso jPanel, pulsaremos «Aceptar» para continuar :

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Antes de insertar el JButton y el JTextField, si queremos tener libertad absoluta a la hora de posicionar un control en el contenedor JPanel deberemos cambiar la propiedad layout a null. Esto se hace pulsando sobre el JPanel insertado anteriormente y seleccionando esta propiedad en la ventana de Propiedades, tal y como se muestra en la imagen:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Ahora añadiremos el componente JTextField de la ventana Palette, solapa Swing Components y lo soltaremos en la parte del JPanel que deseemos:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Indicaremos el nombre, en nuestro caso txtMensaje y pulsaremos «Aceptar»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Ajustaremos el tamaño y la posición y le añadiremos un JLabel informativo en la parte izquierda, en la propiedad text del JLabel pondremos «Mensaje»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Añadiremos también el JButton de la misma forma, con el nombre bMostrarMensaje y la propiedad text a Mostrar:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

A continuación añadiremos el siguiente código fuente Java al JButton añadido, para ello pulsaremos con el botón derecho del ratón sobre el JButton bMostrarMensaje, seleccionaremos «Events» – «actionPerformed»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

El entorno Eclipse nos creará el evento actionPerformed de la clase java.awt.event.ActionEvent, que se ejecutará cuando se haga clic sobre el JButton. En este procedimiento crea, por defecto, la siguiente línea de código:

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

que no hace otra cosa que mostrar un mensaje en la consola de depuración con el texto actionPerformed() y también ha añadido un comentario de tipo TODO que nos indica que el evento ha sido autogenerado:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

Si compilamos la aplicación en este momento, seleccionando el triángulo invertido que aparece a la derecha de , «Ejecutar como» – «Java Bean»:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

y probamos a pulsar el botón «Mostrar» obtendremos este resultado:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

«actionPerformed()» en la Consola.

En nuestro caso eliminaremos la línea de código creada por Eclipse para el evento actionPerformed del JButton y añadiremos lo siguiente:

System.out.println(txtMensaje.getText());

con el método «getText» obtendremos el valor de la propiedad «text» del componente JTextField.

Quedará algo así:

Si compilamos la aplicación, cuando pulsemos el botón «Mostrar» visualizará en la Consola el texto introducido en el JTextField:

Aplicación visual Java de ejemplo con Visual Editor y Eclipse

«Prueba aplicación Eclipse» en la Consola.

El código fuente Java completo de la aplicación (casi todo generado automáticamente por Eclipse):

Los ficheros generados por Eclipse para nuestra aplicación visual de ejemplo con Visual Editor son:

  • F:/Programas/Java/pruebaAplicacionVisual
    (carpeta)
    • pruebaAplicacionVisual (carpeta)
      • PruebaAplicacionVisual$1.class
      • PruebaAplicacionVisual.class
      • PruebaAplicacionVisual.java
    • .classpath
    • .project

Tecnologías empleadas para realizar el artículo

Para realizar este manual/artículo hemos utilizado:

  • SDK Eclipse 3.2.0.
  • Microsoft Windows XP Profesional.
  • Visual Editor 1.2.1.
  • Graphical Editing Framework 3.2.2.
  • Eclipse Modeling Framework (EMF) Runtime + End-User Tools 2.2.2.