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…”:

v13.jpg

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

v14.jpg

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

v15.jpg

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

v16.jpg

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

v17.jpg

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

v18.jpg

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:

v19.jpg

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:

v20.jpg

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

v21.jpg

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:

v22.jpg

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

v23.jpg

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

v24.jpg

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

v25.jpg

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

v26.jpg

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

v27.jpg

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:

v28.jpg

Si compilamos la aplicación en este momento, seleccionando el triángulo invertido que aparece a la derecha de v31.jpg, “Ejecutar como” – “Java Bean”:

v29.jpg

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

v30.jpg

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

v32.jpg

About these ads

14 comentarios

  1. [Al ejemplo lo pude hacer todo pero lo que no puedo es que se ejecute esa interface desde el main

  2. Al ejemplo lo pude hacer todo pero lo que no puedo es que se ejecute esa interface desde el main.
    Alguien me podria ayudar
    Muchas gracias

  3. buenas e tratado de pasar a español e eclipse y de grabar el visual editor sin resultado posible si pueden ayudarme se lo agradesco si pueden

  4. Hola… me podras ayudar con la instalacion en mac os x… en donde lo descargo

  5. SALUDOS JAIRO TORRES, a mi forma de ver las cosas me sucedio lo mismo puesto que tenia una version de java/eclipse muy antigua, luego me baje la version GANYMEDE, te dejo la URL: http://www.eclipse.org/downloads/download.php?file=/eclipse/downloads/drops/R-3.4.1-200809111700/eclipse-SDK-3.4.1-win32.zip

    aqui podra bajar esta nueva version que integra muchos complementos geniales, luego de esto
    cheka esta URL: http://jorgelig.la100rra.com.mx/2007/05/30/como-instalar-visual-editor-en-eclipse/
    Donde te diran las soluciones de posibles problemas, al parece el visual editor funciona con eclipse 3.2.2 pero como usar 3.4, GANYMEDE, debes incluir otro plug in, en definitiva amigo mio, espero solventar un poco tus preguntas,

    saludos programadores,

    marcos aguilera
    est. ing. sistemas

  6. existirá algun plugin para manejar todo con coordenadas como lo hace netbeans?…

  7. Hola Rodolfo
    No necesitas un plug-.in para usar coordenadas, debes indicar que no nocesitas un layout, asi de simple, usando swing por ejemplo:

    por ejemplo
    JPanel pnlContendor = new JPanel();
    JToolbar tbBotones = new JToolBar();

    pnlContenedor..setLayout( null );

    // dimensiones del panel
    pnlContenedor.setBounds(1,1,800,600);

    //dimensiones de la barra, aqui, el par 2,2,
    //se usa como posicion dentro del panel al que se
    //agregará la barra, en el siguiente paso
    tbBotones.setBounds(2,2,500,40);

    pnlContenedor.add(tbBotones);

    y como vez, ya estas usando posiciones,y no tienes que luchar con el BorderLayout, gridLayout, gridBagLayout, etc etc…. ojala te sirva

  8. Muy bueno. Pondria otros ejemplos como pasar de una ventana a otra?

  9. interesante. yo tengo una version 3.4, pero no entiendo porque no se dejan intalar todos los componentes del Visual Editor, he probado en varias maquinas e igual no baja todo, y sinceramente necesito el VE para la universidad, espero que con el link que postearon para instalar el visual editor lo pueda hacer, yo segui los pasos de la pag de Eclipse y no pude…

  10. Muy buena la guia. Gracias

  11. buena noche donde puedo bajar esta edicion de eclipse no la he podido conseguir

  12. Gracias por el gesto de publicar un ejemplo simple.

  13. Muchisimas gracias por el aporte ya me estaba desilucionando con lo poco que me dejaba hacer en la interfaz….

  14. Hey muchas gracias, ya me estaba fastidiando eso de solo trabajar con layouts… me sirvio full sigue asi!

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: