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).

Añadir al entorno visual Java Eclipse la clase "Visual Editor"

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...":

Selecconaremos la opción "Buscar características nuevas para instalar", pulsaremos "Siguiente":

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

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):

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

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

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:

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:

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:

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:

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

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:

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 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...":

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

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

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

En caso de no aparecer "Visual Class" pulsaremos sobre "Otros..." y seleccionaremos "Java" - "Visual Class":

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

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:

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:

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

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:

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

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

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

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

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

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:

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

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

"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í:

  public void actionPerformed(java.awt.event.ActionEvent e) {
    System.out.println(txtMensaje.getText());
  }

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

"Prueba aplicación Eclipse" en la Consola.

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

package pruebaAplicacionVisual;

import java.awt.BorderLayout;
import javax.swing.JPanel;
import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.Rectangle;
import javax.swing.JTextField;
import javax.swing.JLabel;
import java.awt.Dimension;



public class PruebaAplicacionVisual extends JFrame {

  private static final long serialVersionUID = 1L;
  private JPanel jContentPane = null;
  private JPanel jPanel = null;
  private JTextField txtMensaje = null;
  private JLabel jLabel = null;
  private JButton bMostrarMensaje = null;
  /**
   * This is the default constructor
   */
  public PruebaAplicacionVisual() {
    super();
      initialize();
    }

   /**
   * This method initializes this
   * 
   * @return void
   */
   private void initialize() {
     this.setSize(new Dimension(304, 121));
     this.setContentPane(getJContentPane());
     this.setSize(300, 200);
     this.setContentPane(getJContentPane());
     this.setTitle("JFrame");
   }

   /**
   * This method initializes jContentPane
   * 
   * @return javax.swing.JPanel
   */
   private JPanel getJContentPane() {
     if (jContentPane == null) {
       jContentPane = new JPanel();
       jContentPane.setLayout(new BorderLayout());
       jContentPane.add(getJPanel(), BorderLayout.CENTER);
   }
   return jContentPane;
  }

  /**
   * This method initializes jPanel	
   * 	
   * @return javax.swing.JPanel	
  */
  private JPanel getJPanel() {
    if (jPanel == null) {
      jLabel = new JLabel();
      jLabel.setBounds(new Rectangle(7, 18, 59, 16));
      jLabel.setText("Mensaje");
      jPanel = new JPanel();
      jPanel.setLayout(null);
      jPanel.add(getTxtMensaje(), null);
      jPanel.add(jLabel, null);
      jPanel.add(getBMostrarMensaje(), null);
    }
    return jPanel;
  }

  /**
   * This method initializes txtMensaje	
   * 	
   * @return javax.swing.JTextField	
  */
  private JTextField getTxtMensaje() {
    if (txtMensaje == null) {
      txtMensaje = new JTextField();
      txtMensaje.setBounds(new Rectangle(68, 15, 133, 20));
    }
    return txtMensaje;
  }

  /**
   * This method initializes bMostrarMensaje	
   * 	
   * @return javax.swing.JButton	
   */
  private JButton getBMostrarMensaje() {
    if (bMostrarMensaje == null) {
      bMostrarMensaje = new JButton();
      bMostrarMensaje.setBounds(new Rectangle(203, 15, 81, 21));
      bMostrarMensaje.setText("Mostrar");
      bMostrarMensaje.addActionListener(
          new java.awt.event.ActionListener() {
        public void actionPerformed(
            java.awt.event.ActionEvent e) {
          System.out.println(txtMensaje.getText());
        }
      });
    }
    return bMostrarMensaje;
    }

  }  //  @jve:decl-index=0:visual-constraint="10,10"

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

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.