sábado, 24 de mayo de 2014

Expresiones Regulares .NET

Potencia de las expresiones Regulares en .NET

Por cuestiones de trabajo últimamente he tenido que utilizar muchas expresiones regulares en .NET, ya las había utilizado en alguna que otra ocasión en otras tecnologías, pero he profundizado mucho más en su potencia.

Las expresiones regulares nos ayudan en gran medida a la hora de parsear un texto a nuestro gusto. Prácticamente todos los lenguajes de alto nivel tienen funciones de cadena como IndexOf (.NET, Java) o stros (PHP) que permiten sacar la posición de una subcadena dentro de una cadena, por ejemplo:

Dim str As String = "La revolución informática"
System.Console.Writeline(str.IndexOf("revolución"))

Mostrará por la consola un 2, que indica la posición de la subcadena "revolución".

Estas sencillas funciones nos permiten realizar un análisis de una cadena simple, pero cuando la cadena se complica un poco, el código se ensucia demasiado. Por ejemplo, tenemos la siguiente cadena generada a partir de un objeto:

Mi nombre es [Iñigo Montoya] mido [1.80] tengo los ojos [azules] [Tu mataste a mi padre, prepárate a morir]

En negrita y azul están marcados los campos variables de la cadena.

Utilizando funciones como indexOf y substring, podríamos obtener los datos y parsearlos. Para obtener el nombre sacaríamos la posición de la subcadena "Nombre", después la posición de la cadena "altura", restaríamos las posiciones, compensaríamos el tamaño de la cadena "Nombre" y haríamos la resta.

Sencillo sí, pero terriblemente tedioso. Para una cadena relativamente sencilla, necesitaríamos un código muy engorroso. Aquí entran en juego las expresiones regulares.

Vamos a resolver la cadena anterior utilizando la clase Regex de .NET


  1. Dim str As String = "Mi nombre es Iñigo Montoya mido 1.80 tengo los ojos azules. Tu mataste a mi padre, prepárate a morir"  
  2. Dim regex As New Regex("Mi nombre es (?<nombre>[\w\s]+) mido (?<altura>[\d].[\d]+) tengo los ojos (?<color>[\w\s]+). (?<cita>[\w\s]+)")  
  3.   
  4. If (regex.IsMatch(str)) Then  
  5.     Dim grupos As GroupCollection = regex.Match(str).Groups  
  6.   
  7.     Dim nombre As String = grupos.Item("nombre").Value  
  8.     Dim altura As String = grupos.Item("altura").Value  
  9.     Dim ojos As String = grupos.Item("color").Value  
  10.     Dim cita As String = grupos.Item("cita").Value  
  11.   
  12.     System.Console.WriteLine("Nombre: " + nombre)  
  13.     System.Console.WriteLine("Altura: " + altura)  
  14.     System.Console.WriteLine("Color de ojos: " + ojos)  
  15.     System.Console.WriteLine("Cita favorita: " + cita)  
  16. End If  
  1. <nombre><altura><color><cita>  
  2. </cita></color></altura></nombre>  
Como resultado obtendríamos:
   
Nombre: Iñigo Montoya
Altura: 1.80
Color de ojos: azules
Cita favorita: Tu mataste a mi padre

Como vemos, el código es muy sencillo. Lo hacemos todo con una única linea: regex.Match(str).Groups. En este ejemplo he utilizado las agrupaciones de las expresiones regulares. Estás se definene como (?[Expresion regular]) al tener nombre nos permiten acceder directamente a valor de la expresión regular que deseamos, en el ejemplo anterior: nombre, altura, color de ojos y cita favorita.

Esto es solo una breve introducción de todo lo que se puede hacer con expresiones regulares pero creo que deja de manifiesto la potencia de estas. Creo que ampliaré la información de las expresiones regulares en futuros artículos, mientras tanto quizás te interesen estas páginas:

http://www.regular-expressions.info/
http://msdn.microsoft.com/es-es/library/system.text.regularexpressions.regex(v=vs.80).aspx

miércoles, 21 de mayo de 2014

¿Como Documentar tu códido en Vb NET?

<Extraído originalmente de MSDN>

Introducción

La documentación del código suele ser el último paso que se realiza en el ciclo habitual de un proyecto. Mientras que la importancia de escribir documentación se ha señalado miles de veces, los desarrolladores suelen dedicar la mejor parte del ciclo de proyecto a la creación de nuevas características y, al final, realizan un trabajo mediocre a la hora de escribir la temida documentación. Siguiendo la popular frase limpia mientras cocinas que podemos ver en muchas cocinas, la mejor manera de producir una documentación de alta calidad para el proyecto sería crea la documentación mientras programas.
En Visual Studio .NET 2003, se admite la documentación del código XML en C#, pero no en Visual Basic .NET. Sin embargo, puede descargar un complemento gratuito llamado VBCommenter PowerToy que permite la documentación XML en las líneas en Visual Studio .NET 2003. Puede descargar VBCommenter en http://www.gotdotnet.com/workspaces/workspace.aspx?id=112b5449-f702-46e2-87fa-86bdf39a17dd.

Documentación en línea mediante VBCommenter

Para ver cómo funciona VBCommenter, crearemos un nuevo proyecto de biblioteca de clases en Visual Studio .NET 2003, como se muestra en la figura 1. Tras crear una definición de clase, le agregaremos documentación XML.

Figura 1. Creación de un nuevo proyecto de biblioteca de clases
Para este ejemplo, he definido un sencillo Point. Una vez que se ha instalado VBCommenter, puede insertar un comentario XML. Para ello, escriba tres apóstrofos (') antes de una definición, propiedad, variables miembro o método de una clase (consulte la figura 2).

Figura 2. Adición de comentarios XML al código
Al presionar Entrar, se generará automáticamente la plantilla de documento XML que se muestra en la figura 3.

Figura 3. Plantilla de comentarios XML generada
Para configurar las opciones de VBCommenter, seleccione Tools -> VBCommenter Options (consulte la figura 4).

Figura 4. Configuración de VBCommenter
La lista 1 que aparece al final de este artículo muestra la documentación XML completa de la clase Point. A continuación, veremos algunas de las características más importantes.
Puede obtener una lista de etiquetas de documentación XML de MSDN en la dirección http://msdn.microsoft.com/library/default.asp?url=/library/en-us/csref/html/vclrfTagsForDocumentationComments.asp. A continuación, podemos ver la lista:
  • < c >
  • < para >
  • < see >
  • < code >
  • < param >
  • < seealso >
  • < example >
  • < paramref >
  • < summary >
  • < exception >
  • < permission >
  • < value >
  • < include >
  • < remarks >
  • < list >
  • < returns >
Como ejemplo, veamos la documentación que he creado para uno de los métodos sobrecargados:
 ''' <overloads> 
''' Calculates the distance between two points 
''' </overloads> 
''' 
''' <summary> 
''' Calculates the distance of a point from the origin 
''' </summary> 
''' 
''' <returns>The distance between the current point and the origin 
''' </returns> 
''' <example> This sample shows how to call the <c>length()</c> 
''' method 
''' <code> 
'''     Dim ptA As New Point(3, 4) 
'''     Dim distance As Single = ptA.length() 
''' </code> 
''' </example> 
''' 
''' <remarks> 
''' </remarks> 
''' <history> 
'''     [Wei-Meng Lee] 9/27/2004 Created 
''' </history> 
Observará que hay un nuevo elemento, <overloads>, que no aparece en la lista especificada en la documentación de MSDN. El elemento <overloads> se utiliza para ofrecer una descripción general de los métodos que están sobrecargados. Veremos más adelante el efecto de este elemento cuando generemos la documentación mediante la herramienta NDOC. Observe que sólo es necesario especificar el elemento <overloads> en cualquiera de los métodos sobrecargados.
También se puede incluir ejemplos de código en la documentación mediante la etiqueta <example>. Para indicar que una palabra (o frase) es código, utilice la etiqueta <c>. Para varias líneas de código, utilice la etiqueta <code>.
Como los comentarios XML agregados al código dificultan su lectura, es posible ocultarlos si se hace clic en el signo menos "-" que aparece a la izquierda de la ventana de código. Para mostrar la documentación, haga clic en el signo más "+" como se muestra en la figura 5.

Figura 5. Cómo ocultar los comentarios
Una vez que ha comentado el código, al volver a generar las clases podrá encontrar un documento XML con el mismo nombre que el proyecto en la carpeta bin del proyecto. La figura 6 muestra la estructura del documento XML.

Figura 6. Documento XML generado por VBCommenter

Generación de la documentación

Con la documentación XML generada por VBCommenter, dispone de dos opciones relativas a la documentación:
  • Escribir las hojas de estilo de transformación XSLT que transformen el documento XML en un formato legible como HTML, PDF, etc.
  • Utilizar una herramienta de terceros para analizar automáticamente la documentación XML en los diferentes formatos de documentación que admite
En mi caso, he optado por la segunda opción y he utilizado NDoc ( http://ndoc.sourceforge.net/), un generador de documentación de código para .NET. NDoc es una herramienta gratuita de código abierto que genera documentación con varios formatos diferentes, incluido el formato de ayuda HTML tipo MSDN (.chm), el formato de ayuda de Visual Studio .NET (HTML Help 2) y las páginas Web tipo MSDN en línea.
La versión actual de NDoc es la 1.3 (en beta). Puede instalar NDoc para varias versiones de .NET: Mono, .NET 1.0 o .NET 1.1. Elegí .NET 1.1 como destino, puesto que utilizo Microsoft Visual Studio .NET 2003.
Tras instalar NDoc, deberá ver la ventana que aparece en la figura 7 al iniciar la aplicación. Puede elegir el tipo de documentación que desea generar mediante la selección del tipo de documentación en el cuadro de lista desplegable.

Figura 7. Inicio de NDoc
Haga clic en Add para agregar el nombre de archivo del ensamblado (consulte la figura 8). Una vez seleccionado el ensamblado (MyPoint.dll en la carpeta bin, en mi caso), aparecerá automáticamente el nombre de archivo del documento XML (el mismo nombre que el ensamblado, pero con la extensión .XML).

Figura 8. Adición de un ensamblado a NDoc
Puede agregar varios proyectos a la misma documentación si agrega cada ensamblado al proyecto NDoc.
Cuando esté preparado para generar la documentación, haga clic en el botón Build Documentation de la barra de herramientas como se muestra en la figura 9.

Figura 9. Generación de la documentación
Para ver la documentación, haga clic en el botón View Documentation de la barra de herramientas (figura 10).

Figura 10. Visualización de la documentación
Deberá ver la documentación generada como se muestra en la figura 11 (he expandido el árbol en el panel izquierdo para que muestre toda la documentación).

Figura 11. Documentación generada tipo MSDN
Centrémonos ahora en la documentación generada por las etiquetas de documentación que hemos comentado antes. Concretamente, veamos la documentación creada para el método sobrecargado length() como se muestra en la figura 12.

Figura 12. Comparación de las etiquetas XML y la documentación real generada
Como puede ver, el texto del elemento <overloads> se utiliza para proporcionar una descripción general del método sobrecargado, mientras que el elemento <summary> contiene la descripción real de cada método sobrecargado. Si no utiliza la etiqueta<overloads> para ninguno de los métodos sobrecargados, NDoc utilizará el texto que encuentre en el primer elemento <summary> como descripción general de los métodos sobrecargados.>
Haga clic en el primer método sobrecargado del método length() y vea la relación entre la etiqueta de documentación y la documentación real como se muestra en la figura 13.

Figura 13. Comparación de las etiquetas XML y la documentación real generada
Observe que el elemento <remarks> está vacío y, por tanto, la sección Remarks de la documentación también estará vacía. Si no incluye el elemento <remarks>, no se generará la sección Remarks.
Distribución de la documentación
Si observa la sección de propiedades de NDoc, la ubicación de la documentación generada se especifica si cambia el atributo OutputDirectory. En la figura 14, la documentación se guardaría en la carpeta c:\documentation.

Figura 14. Configuración del directorio de resultados de la documentación
Una vez generada la documentación, puede ver la lista de archivos generados en la figura 15.

Figura 15. Visualización de la documentación generada
Si desea distribuir la documentación de la clase, sólo tiene que distribuir el archivo que tiene la extensión .chm. Al ser una ayuda HTML compilada, no es necesario que los otros archivos HTML generados estén en la misma carpeta.

Conclusión

En este artículo, hemos visto cómo es posible agregar comentarios XML a las aplicaciones de Visual Basic .NET y utilizar una herramienta de terceros para generar la documentación de una aplicación. Todas las herramientas tratadas en este artículo son gratuitas, por lo que constituyen excelentes puntos de partida para empezar a documentar sus aplicaciones. Si conoce otras herramientas favoritas para generar documentación sobre el código, no olvide compartirlas conmigo en wei_meng_lee@hotmail.com
Wei-Meng Lee (Microsoft .NET MVP, Singapore) es especialista en tecnología y fundador de Developer Learning Solutions, una compañía de tecnología especializada en la educación práctica sobre las últimas tecnologías de Microsoft. Wei-Meng participa con frecuencia como orador en conferencias internacionales y ha escrito y colaborado en la redacción de numerosos libros sobre .NET, XML y las tecnologías inalámbricas, entre los que se incluyen Windows XP Unwired y .NET Compact Framework Pocket Guide (ambos de O'Reilly Media, Inc.). También escribe con frecuencia para O'Reilly Network sobre temas que oscilan de .NET a Mac OS X.
Lista 1
''' -----------------------------------------------------------------------------
''' Project    : MyPoint
''' Class    : Point
''' 
''' -----------------------------------------------------------------------------
''' <summary>
''' The Point class contains 2 properties, 1 overloaded constructor, and 
''' 1 overloaded method
''' </summary>
''' <remarks>
''' If you need to use the Point class in the System.Drawing namespace, be 
''' sure to reference it using the fullname, i.e. System.Drawing.Point
''' </remarks>
''' <history>
'''    [Wei-Meng Lee]   9/26/2004   Created
''' </history>
''' 
''' -----------------------------------------------------------------------------
Public Class Point
    Private ptX, ptY As Integer
    Private Shared count As Integer

    ''' -----------------------------------------------------------------------------
    ''' <summary>
    ''' Empty constructor
    ''' </summary>
    ''' <remarks>
    ''' Creates a new instance of the Point class
    ''' </remarks>
    ''' <history>
    '''    [Wei-Meng Lee]   9/26/2004   Created
    ''' </history>
    ''' -----------------------------------------------------------------------------
    Public Sub New()
        count += 1
    End Sub

    ''' -----------------------------------------------------------------------------
    ''' <overloads>
    ''' Constructor
    ''' </overloads>
    ''' <summary>
    ''' Constructor with two parameters
    ''' </summary>
    ''' <param name="x"></param>
    ''' <param name="y"></param>
    ''' <remarks>
    ''' Creates a new instance of the Point class
    ''' <para>
    ''' Parameter x is assigned to the x-coordinate and 
    ''' Parameter y is assigned to the y-coordinate 
    ''' </para>
    ''' </remarks>
    ''' <history>
    '''    [Wei-Meng Lee]   9/26/2004   Created
    ''' </history>
    ''' -----------------------------------------------------------------------------
    Public Sub New(ByVal x As Integer, ByVal y As Integer)
        ptX = x
        ptY = y
        count += 1
    End Sub

    ''' -----------------------------------------------------------------------------
    ''' <summary>
    ''' Property for x-coordinate
    ''' </summary>
    ''' <returns>The x-coordinate</returns>
    ''' <history>
    '''    [Wei-Meng Lee]   9/26/2004   Created
    ''' </history>
    ''' -----------------------------------------------------------------------------
    Property x() As Integer '   sets the X coordinate
        Get
            Return ptX
        End Get
        Set(ByVal Value As Integer)
            If Value < 500 And Value > -500 Then
                ptX = Value
            End If
        End Set
    End Property

    ''' -----------------------------------------------------------------------------
    ''' <summary>
    ''' Property for y-coordinate
    ''' </summary>
    ''' <returns>The y-coordinate</returns>
    ''' <history>
    '''    [Wei-Meng Lee]   9/26/2004   Created
    ''' </history>
    ''' -----------------------------------------------------------------------------
    Property y() As Integer '   sets the Y coordinate
        Get
            Return ptY
        End Get
        Set(ByVal Value As Integer)
            ptY = Value
        End Set
    End Property
    ''' -----------------------------------------------------------------------------
    ''' <overloads>
    ''' Calculates the distance between two points
    ''' </overloads>
    ''' 
    ''' <summary>
    ''' Calculates the distance of a point from the origin
    ''' </summary>
    ''' 
    ''' <returns>The distance between the current point and the origin
    ''' </returns>
    ''' <example> This sample shows how to call the <c>length()</c> 
    ''' method
    ''' <code>
    '''    Dim ptA As New Point(3, 4)
    '''    Dim distance As Single = ptA.length()
    ''' </code>
    ''' </example>
    ''' 
    ''' <remarks>
    ''' </remarks>
    ''' <history>
    '''    [Wei-Meng Lee]   9/27/2004   Created
    ''' </history>
    ''' -----------------------------------------------------------------------------
    Public Function length() As Single
        Return Math.Sqrt(Math.Pow(ptX, 2) + _
               Math.Pow(ptY, 2))
    End Function
    ''' -----------------------------------------------------------------------------
    ''' <summary>
    ''' Calculates the distance of a point from another point
    ''' </summary>
    ''' 
    ''' <param name="pointOne">A Point object</param>
    ''' <returns>The distance between the current point and the 
    ''' specified point
    ''' </returns>
    ''' 
    ''' <example> This sample shows how to call the <c>length()</c> method 
    ''' with a point specified
    ''' <code>
    '''    Dim ptA As New Point(3, 4)
    '''    Dim ptB As New Point(7, 8)
    '''    Dim distance As Single = ptA.length(ptB)
    ''' </code>
    ''' </example>
    ''' <remarks>
    ''' 
    ''' </remarks>
    ''' 
    ''' <history>
    '''    [Wei-Meng Lee]   9/27/2004   Created
    ''' </history>
    ''' -----------------------------------------------------------------------------
    Public Function length(ByVal pointOne As Point) As Single
        Return Math.Sqrt(Math.Pow(ptX - pointOne.x, 2) + _
               Math.Pow(ptY - pointOne.y, 2))
    End Function

End Class

lunes, 19 de mayo de 2014

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

(Extraído de: http://www.ajpdsoft.com/modules.php?name=News&file=article&sid=271 )

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