Microsoft punto net
Win Forms Designer

Diseñador de formularios para vb.NET


Actualizado: 16/Oct/2000



Con el SDK de la versión pre-beta de Visual Studio .NET, no se incluye ningún tipo de IDE (Entorno Integrado de Desarrollo), pero si existe el llamado Win Forms Designer.
Como su nombre indica, es un diseñador de formularios, es decir, podemos crear (diseñar) los formularios (ventanas de la aplicación), posicionando los controles que queramos usar, así como la apariencia de los mismos y los eventos que queremos detectar por medio del programa.
A diferencia del IDE del Visual Basic actual, los eventos tenemos que declararlos por nuestra cuenta, es decir no nos muestra los procedimientos que podemos usar, aunque sí los eventos soportados... o casi... ya que, por ejemplo, en el control ListBox no muestra que podamos detectar el Click, y sin embargo se puede crear... pero eso será otra historia.
Lo importante es que el diseño del formulario lo podemos hacer con este Diseñador, aunque no podamos probar su funcionamiento, ni tampoco crear el ejecutable o la librería o el control, etc.

Lo que en esta página veremos es cómo diseñar esos formularios, o sea, entender cómo funciona el Diseñador, también veremos cómo, una vez creado, compilarlo para crear el ejecutable.

 


Para muestra un botón (o dos)

Vamos a crear un ejecutable, en el cual se nos pedirá que introduzcamos un nombre, y pulsando en un botón, se muestre en una etiqueta un mensaje. También añadiremos un botón para salir del programa.
Por tanto, nuestro formulario tendrá:
Dos etiquetas, dos botones y una caja de texto.


Fig.1, formulario de prueba

Haremos que uno de los botones sea el predeterminado, (que intercepte la pulsación de la tecla INTRO) y el otro que se ejecute también al pulsar la tecla ESC.

Abre el Win Form Designer, (es el programa WinDes.exe que está en el directorio \bin del directorio en el que se ha instalado el SDK, por defecto en: C:\Program Files\NGWS), del menú File, selecciona la opción New Visual Basic, te mostrará un submenú con varias opciones, selecciona la primera: Win32Form, se creará por defecto un formulario con el nombre Win32Form1.



Fig.2, crear un nuevo Form


De la paleta de controles de la izquierda, (Toolbox), haz doble-click en Label se creará la etiqueta Label1
Para cambiar el texto mostrado, en la ventana de propiedades, selecciona Text, y escribe el texto que quieras mostrar, en nuestro caso, escribe:Nombre:, sitúa la etiqueta y haz doble-click en TextBox (de la paleta de controles), coloca donde gustes esa caja de textos;
añade el resto de los controles (mira la figura 1), a los que he puesto estos nombres:
Label2, cmdAceptar y cdmSalir.

 


Añadir eventos:

Para añadir un evento, o mejor dicho, para indicarle al diseñador que queremos codificar un evento de un control determinado, selecciona el control, por ejemplo el botón de Aceptar, y en la ventana de propiedades, pulsando en el botón con el "rayo", te mostrará los eventos disponibles para el control seleccionado.

Vamos a "crear" el evento Click del botón Aceptar:
Selecciona dicho botón, pulsa en el rayo de la ventana de propiedades, selecciona Click y en el cuadro de la derecha, escribe cmdAceptar_Click, o el nombre que quieres que tenga el procedimiento que se llamará al producirse dicho evento; esta es una de las nuevas características, al menos para los que hasta ahora hemos trabajado con Visual Basic, ya que en otros entornos de desarrollo no se impone el nombre de los eventos; y es más, podemos usar un mismo procedimiento para varios eventos de distintos controles o del mismo...
Si has pulsado INTRO después de escribir el nombre del evento, seguramente se habrá mostrado la ventana del código con el procedimiento recién creado. Para cambiar entre la ventana de código y el formulario, usa el menú Window. Por ahora no te preocupes de qué código escribir en el evento, ya que lo veremos después.

Crea otro evento para el botón Salir y dale el nombre cmdSalir_Click

Con esto ya tenemos creado el formulario y los dos eventos que vamos a utilizar.
Guarda el formulario. Si no le dices lo contrario, es decir, no has usado la opción "Guardar como...", el formulario en cuestión se habrá guardado en la carpeta \BIN del directorio del SDK. Lo conveniente sería tenerlo en un directorio diferente.
Si te fijas, al decirle que lo guarde, nos muestra el diálogo de guardar del Windows 2000, y la extensión por defecto es .CS, así que tendrás que seleccionar la extensión adecuada: .VB; en esta nueva versión de Visual Basic, sólo existe esa extensión: se acabaron lo de trabajar con extensiones diferentes para los formulario, clases, módulos, etc., ahora TODO está en la extensión VB

Nota: Si no vas a trabajar más con este formulario, tendrás que cerrar el diseñador, ya que, será porque aún es una versión "alfa", si simplemente cierras el formulario y no cierras el entorno, se producirá un error si intentas "re-abrir" el mismo fichero.


El listado del formulario recién creado.

Ahora vamos a ver el listado del fichero recién creado.
Para editar los ficheros creados con vb.net, yo estoy usando el TextPad 4.x (de hecho, he estado usando este editor durante mucho tiempo), entre otras cosas, porque se puede configurar para que "colorice" las palabras claves, comentarios, etc. del código, al estilo de nuestro querido IDE de Visual Basic. El textPad utiliza unos ficheros de configuración de sintaxis, en los que se le pueden indicar las palabras claves, etc. (si te das una vuelta por el sitio de TextPad: http://www.textpad.com/ verás que hay un fichero de sistaxis para vbdotnet que ha sido actualizado por un servidor de ustedes... osea: yo, (este fichero lo incluyo junto con los listados).

 

'------------------------------------------------------------------------------
' Prueba de Formulario diseñado en el Win Forms Designer            (16/Oct/00)
' del Tech Preview NGWS SDK (New Generation Windows Services)
'
' ©Guillermo 'guille' Som, 2000
'------------------------------------------------------------------------------
Imports System
Imports System.ComponentModel
Imports System.Drawing
Imports System.WinForms

Namespace Win32Form1Namespace

    Public Class Win32Form1

        Inherits System.WinForms.Form

        'Required by the Win Forms Designer
        Private components As System.ComponentModel.Container
        Private cmdSalir As System.WinForms.Button
        Private Label2 As System.WinForms.Label
        Private cmdAceptar As System.WinForms.Button
        Private TextBox1 As System.WinForms.TextBox
        Private Label1 As System.WinForms.Label

        Public Sub New()
           MyBase.New

           'This call is required by the Win Forms Designer.
           InitializeComponent

           ' TODO: Add any constructor code after InitializeComponent call

        End Sub

        'Clean up any resources being used
        Overrides Public Sub Dispose()
            MyBase.Dispose
            components.Dispose
        End Sub

        'The main entry point for the application
        Shared Sub Main()
            System.WinForms.Application.Run(New Win32Form1())
        End Sub

        'NOTE: The following procedure is required by the Win Forms Designer
        'Do not modify it.
        Private Sub InitializeComponent()
            Me.components = New System.ComponentModel.Container
            Me.TextBox1 = New System.WinForms.TextBox
            Me.cmdSalir = New System.WinForms.Button
            Me.cmdAceptar = New System.WinForms.Button
            Me.Label2 = New System.WinForms.Label
            Me.Label1 = New System.WinForms.Label

            TextBox1.Location = New System.Drawing.Point(60, 16)
            TextBox1.Text = "TextBox1"
            TextBox1.TabIndex = 1
            TextBox1.Size = New System.Drawing.Size(224, 20)

            cmdSalir.Location = New System.Drawing.Point(208, 156)
            cmdSalir.Size = New System.Drawing.Size(75, 23)
            cmdSalir.TabIndex = 4
            cmdSalir.Text = "Salir"
            cmdSalir.AddOnClick(New System.EventHandler(AddressOf Me.cmdSalir_Click))

            cmdAceptar.Location = New System.Drawing.Point(208, 44)
            cmdAceptar.Size = New System.Drawing.Size(75, 23)
            cmdAceptar.TabIndex = 2
            cmdAceptar.Text = "Aceptar"
            cmdAceptar.AddOnClick(New System.EventHandler(AddressOf Me.cmdAceptar_Click))

            Label2.Location = New System.Drawing.Point(8, 92)
            Label2.Text = "Label2"
            Label2.Size = New System.Drawing.Size(276, 16)
            Label2.TabIndex = 3

            Me.AutoScaleBaseSize = New System.Drawing.Size(5, 13)
            Me.Text = "Prueba de WinForm"
            Me.MaximizeBox = False
            Me.CancelButton = cmdSalir
            '@design Me.TrayLargeIcon = True
            Me.BorderStyle = System.WinForms.FormBorderStyle.FixedSingle
            Me.AcceptButton = cmdAceptar
            '@design Me.TrayHeight = 0
            Me.ClientSize = New System.Drawing.Size(294, 191)
            '@design Me.GridSize = New System.Drawing.Size(4, 4)

            Label1.Location = New System.Drawing.Point(8, 20)
            Label1.Text = "Nombre:"
            Label1.Size = New System.Drawing.Size(48, 12)
            Label1.TabIndex = 0

            Me.Controls.Add(cmdSalir)
            Me.Controls.Add(Label2)
            Me.Controls.Add(cmdAceptar)
            Me.Controls.Add(TextBox1)
            Me.Controls.Add(Label1)

        End Sub

        Protected Sub cmdSalir_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
            ' Terminar el programa
            Me.Close
        End Sub

        Protected Sub cmdAceptar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
            ' Asignar al Label2 el texto introducido
            Label2.Text ="Hola " &  TextBox1.Text
        End Sub


    End Class

End Namespace



Algo de explicación:


Los Imports del principio del listado le indican al compilador las librerías de clases a utilizar, para no tener que referenciar cada uno de los objetos incluidos en esas librerías de forma explícta, (aunque el diseñador lo haga).
Por ejemplo, para declarar el objeto cmdSalir como un botón, se puede hacer de estas dos formas:
Private cmdSalir As System.WinForms.Button
Private cmdSalir As Button


Namespace Win32Form1Namespace
Con esta línea estamos creando una especie de área de trabajo. Los Namespace sirven para agrupar clases relacionadas entre sí. Es "casi" como los módulos de clase que hasta ahora hemos estado usando, aunque más bien sería como si crearamos un componente de código y el Namespace fuese la librería en el que está incluido.
Por ejemplo, si declaras un procedimiento como Friend, sólo será visible en el mismo Namespace en el que fue declarado. Los Namespace pueden usarse en diferentes ficheros de código (.vb), aún así, al compilarse, se agruparán como si fuesen uno solo. (o casi)
La línea del final: End Namespace indica el final de este "espacio".
Si no quisieramos que este fichero formase parte de un Namespace, se podría usar esto otro:
Public Module MWin32Form1
...
End Module


Public Class Win32Form1 y su correspondiente End Class, indican el principio y el fin del código contenido en la clase.

Con Inherits System.WinForms.Form estamos indicándole que queremos heredar toda la funcionalidad de la clase Form contenida en el "Namesapce" Inherits System.WinForms
¡Sí! ¡Esto es herencia!

Lo que sigue a Inherits, son las declaraciones de los objetos (controles) a usar en el formulario.

Ahora veremos otras de las novedades que nos trae el vb.NET y su, ¡por fin!, programación orientada a objetos: Los constructores y destructores.
Hasta ahora, cuando se creaba una clase en Visual Basic, se creaba el objeto sin ningún tipo de inicialización, salvo lo codificado en el evento: Class_Initialize del módulo de clase. Si nos interesara inicializar el valor de algunas de las propiedades, teníamos que asignar esos valores posteriormente a su creación.
En otros lenguajes orientados a objetos, por ejemplo el C++, al crear el objeto, se podía pasar una serie de parámetros para asignar ciertos valores de propiedades. Con vb.NET esta ya es posible, mediante el procedimiento NEW:
Public Sub New() En este caso, no se añaden parámetros de inicialización. Pero se podrían haber puesto algunos... aunque esto lo veremos en otra ocasión.

MyBase.New incluida dentro del procedimiento New, siempre tiene que estar, ya que es el constructor de la clase base, es decir la clase de la que se derivan todas las clases.

InitializeComponent simplemente se encarga de llamar al procedimiento que inicializa los controles usados en el formulario.

Overrides Public Sub Dispose() Es el destructor de la clase, desde este procedimiento se llaman a los destructores de las clases usadas.
El Overrides sirve para reemplazar un procedimiento con el mismo nombre, (y parámetros), incluido en la clase heredada.

Shared Sub Main() este es el punto de entrada del programa, a diferencia del actual Visual Basic, la nueva versión sólo tiene una entrada, (al menos por lo que hasta ahora se), ya no hay entradas por distintos formularios, etc. Aunque, dependiendo de dónde esté situado este procedimiento, indicará qué formulario es el que se iniciará primero.

Application.Run(New Win32Form1()) Crea y ejecuta la clase indicada.

El código incluido en el procedimiento InitializeComponent crea y asigna los valores de los controles, posición, tamaño, apariencia, etc., normalmente con los valores asignados a las propiedades en el diseñador.
Fíjate lo fácil que es ahora crear nuevos controles:
Me.Controls.Add(cmdSalir)

Por último tenemos los procedimientos de los eventos creados:
Protected Sub cmdSalir_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
El parámetro sender es el objeto en el cual se ha generado el evento.

Me.Close termina la ejecución del objeto. Es como si hicieramos un Unload Me en un formulario. Por supuesto se puede usar la instrucción END, pero no se si tendrá los mismo problemas "colaterales" que hasta ahora tiene: finaliza la ejecución del programa, pero no termina de forma adecuada. En la documentación que he revisado dice lo mismo que tenemos ahora mismo en el VB6, pero...

Lo último que nos queda por ver, no creo que necesite explicación:
Label2.Text ="Hola " & TextBox1.Text salvo por la "peculiaridad" de que las etiquetas ya no tienen Caption, sino Text.
Esta y otras diferencias, las veremos en próximos artículos.

Para ir acabando, vamos a ver cómo se declaran los eventos, es decir, cómo se le indica al compilador que un procedimiento es un evento:
cmdSalir.AddOnClick(New System.EventHandler(AddressOf Me.cmdSalir_Click))

Por último,la línea de comandos para compilar esta clase, (se supone que estamos en el path en el que se encuentra el fichero)
vbc Win32Form1.vb /r:System.dll /r:system.winforms.dll /r:System.Drawing.dll
Los parámetros /r: indican las librerías que necesita nuestra clase.
Hacía tiempo que no compilaba desde la línea de comandos... ¿10 años? más o menos...


Espero que todo esto te sirva para "clarificarte" las cosas y que ahora lo tengas un poco más claro...
En breve publicaré más ejemplos, con algunos de los controles habituales y también veremos algunas de las nuevas características del Visual Basic .NET

Nos vemos.
Guillermo
P.S.
Más abajo encontrarás el link a los listados y al ejecutable de sólo 3.5KB, además de otras imágenes del diseñador de formularios.


Bajate los ficheros del listado de ejemplo y el fichero de sintaxis para el TextPad 4. (wfd_16oct.zip 6.28KB)



Otras imagenes del diseñador del .NET SDK

 


Win Forms Designer
Win Forms Designer (el diseñador de formularios)


Barra de herramientas
Barra de herramientas

Propiedades y eventos
Ventana de propiedades

 


Ir al índice de vb.net

la Luna del Guille o... el Guille que está en la Luna... tanto monta...