Curso de Visual Basic.NET

1.2 Insertar controles

Los controles son los elementos que insertamos dentro de un formulario y que nos va a permitir interactuar entre el usuario y el código. Controles son: botones, cuadros de texto, etiquetas, cuadros desplegables, cuadrículas de datos, ... en definitiva todos y cada uno de los elementos que vemos en los formularios de todas las aplicaciones. La lista de controles básicos disponibles la tenemos a la izquierda:

Para añadir controles al formulario utilizaremos esta barra, por ejemplo para añadir una etiqueta (Label) y una caja de texto (TextBox), simplemente haremos doble-clic sobre esos elementos de la barra de herramientas y se añadirán al formulario.

Tenemos varias formas de añadir estos controles:

  • Haciendo doble clic sobre el icono del control. Se colocará un control en la parte izquierda superior del formulario.

  • Haciendo clic sobre el icono del control y después clic sobre el formulario. El control se insertará en el punto que hemos indicado y se extenderá hacia la derecha y abajo según su tamaño predeterminada

  • La tercera forma es la más utilizada. Hacemos clic sobre el control y luego en el formulario. Pero esta vez sin soltar el botón izquierdo, vamos dibujando con el ratón la posición y tamaño del control.

Para nuestro ejemplo añadiremos un botón (Button) y lo situaremos debajo del cuadro de texto (Textbox). Luego añadimos una etiqueta (Label) para que quede de esta forma:

Como vemos por defecto el IDE poner unos nombres genéricos a los controles: label1, textbox1, button1, es decir utiliza el tipo de control y lo va numerando: label1, label2, label3, ... es por ponerle un nombre inicial ya que siempre los controles deben tener un nombre único. En nuestros proyectos cambiaremos esos nombres de controles por otros nombres mas descriptivos, por ejemplo: txt_nombre, txt_apellidos, txt_telefono en lugar de los puestos por el IDE: textbox1, textbox2, textbox3, ...

Ahora vamos a cambiar el texto que contiene el botón "Button1". Para cambiarle este texto hay que utilizar la ventana de propiedades, en esta ocasión el elemento que nos interesa de esa ventana de propiedades es Text, escribimos en esta propiedad la palabra "Mostrar" y cuando pulses Intro o el tabulador veremos que el texto del botón se ha actualizado:

Nota para los usuarios de versiones anteriores de VB: La propiedad Caption no existe en ningún control, ahora se llama Text. Por lo tanto hemos modificado la propiedad Text y no Caption en el botón

Hacemos lo mismo con la etiqueta, recuerda que hay que seleccionarla primero haciendo clic para que se muestren las propiedades de la etiqueta, escribimos "Nombre:" y pulsamos intro o el tabulador:

Al principio y para asegurarnos de que vamos escribiendo bien estas propiedades comprobaremos que tenemos seleccionado el control adecuado. En la pantalla anterior podemos ver en el título superior el nombre del control: "Label1" así sabemos que estamos escribiendo la propiedad en el control adecuado. Es normal al principio que escribamos o modifiquemos alguna propiedad y no veamos el resultado. Esto es porque nos hemos equivocado y no estaba correctamente seleccionado el control.

Ahora vamos a escribir código para que se ejecute cada vez que se haga clic en el botón que hemos añadido. Para ello, selecciona el botón Mostrar y hacemos doble clic en él, se mostrará una nueva ventana, en este caso la ventana de código asociada con el formulario que tenemos en nuestro proyecto. Nos mostrará:

Aquí empieza un la programación. Que nosotros pulsemos doble clic en el botón y que aparezca un fragmento de código significa lo siguiente. VB .NET interpreta que quieres poner código para realizar alguna acción cuando se haga clic sobre el botón, por lo tanto te muestra ya el "procedimiento" o parte de código que se va a ejecutar cuando suceda esto. A esta forma de trabajar se le llama programación orientada a eventos. Es decir, cuando se produzcan el evento de pulsar el botón (clic) ejecutas este código. Por lo tanto vemos que los controles además de tener propiedades (que modifican su aspecto) también atienden a una serie de eventos (clic, doble clic). Tranquilos, estamos en el comienzo...

Esta pantalla nos muestra mucha mas información de lo que parece en principio. Nos está indicando en la parte superior que estamos trabajando con "Form1.vb". Debajo nos indica a la izquierda que estamos con el control llamado "Button1" y a la derecha trabajando con el evento clic. Pero ¿no le hemos dado doble clic para que aparezca esto? no sería mas coherente que nos presentase el evento "doble clic" en lugar del "clic". Pues siendo estrictos es verdad pero como la propiedad mas importante de los botones es el clic eso es lo que nos mostrará de forma predeterminada, (además no existe la acción del doble clic en los botones).

Sigamos con la pantalla... y este fragmento de código:

Private Sub Button1_Click(ByVal sender As System.Object, 

		ByVal e As System.EventArgs) Handles Button2.Click



End Sub

Recordamos que lo que Lo queremos hacer ahora, es escribir el código que se ejecutará cuando se haga clic en el botón, lo cual producirá el evento clic asociado con dicho botón, ese evento se producirá si se hace un clic propiamente dicho, es decir con el ratón, o bien porque se pulse intro o la barra espaciadora cuando el botón tenga el foco.

Nota: El foco o enfoque es cuando un determinado control está seleccionado. Cuando pulsamos la tecla tabulador para pasar a otro control lo que están haciendo es activar el enfoque. El anterior control lógicamente deja de estar seleccionado, luego pierde el enfoque.

La nomenclatura, (forma de llamar a los elementos), para los eventos de Visual Basic siguen el siguiente esquema:

[nombre del control] [guión bajo] [nombre del evento]
button1_click ' ejecuta el código cuando se hace clic en el elemento button1

Pero esto sólo es una sugerencia que Visual Basic nos hace, en las versiones anteriores no era una sugerencia, era una imposición. Podemos dejar el nombre que Visual Basic nos sugiere o podemos poner el nombre que nosotros queramos; lo importante aquí es la parte final de la línea de declaración del procedimiento: Handles Button1.Click, con esto es con lo que el compilador/intérprete de Visual Basic sabe que este procedimiento (fragmento de programa) es un evento y que dicho evento es el evento clic del objeto Button1. (Alivio para los programadores de Visual Basic 6 que se habrán escandalizado al ver esta declaración)

Un detalle: el nombre Button1 es porque hemos dejado el nombre que por defecto el IDE de Visual Studio asigna a los controles que se añaden a los formularios. Si queremos que se llame de otra forma, simplemente mostramos el formulario, seleccionamos el control al que quieres cambiarle el nombre, seleccionamos la propiedad Name en la ventana de propiedades y cambiamos el nombre que indica por defecto por el que nosotros queramos... o casi, ya que para los nombres de los controles, así como para otras cosas que utilicemos en Visual Basic hay que seguir ciertas normas:

  • El nombre debe empezar por una letra o un guión bajo.
  • El nombre sólo puede contener letras, números y el guión bajo.
  • Es buena técnica poner las iniciales del tipo de control que es: lb_nombre (label de un nombre), btn_aceptar (botón de aceptar), chk_estado (casilla de verificación de estado), txt_nombre (cuadro de texto)

Así que, si queremos cambiar el nombre al evento que se produce cuando se hace clic en el botón, escribiremos ese nombre después de Private Sub, aunque no es necesario cambiar el nombre del evento, ya que, al menos por ahora, nos sirve tal y como está.

Lo que si importa es lo que escribamos cuando ese evento se produzca, en este caso vamos a hacer que se muestre un cuadro de diálogo mostrándonos el nombre que previamente hemos escrito en el cuadro de texto.

Escribimos el siguiente código en el hueco dejado por Visual Basic entre las líneas que hay entre Private Sub... y End Sub

Antes de explicar que estamos haciendo, pulsamos F5 para que se ejecute el código que hemos escrito o pulsa en el botón "play" que está en la barra de botones.

Cuando se presente el formulario escribe algo en el cuadro de texto, que por defecto tendrá "TextBox1", (que es el valor que por defecto Visual Basic le asigna a la propiedad Text de dicho control), pulsa en el botón Mostrar y veremos que se muestra un cuadro de diálogo diciéndote Hola y a continuación lo que hayas escrito en el cuadro de texto (TextBox):

¡Por fin! Ya tenemos una aplicación Windows funcionando creada con Visual Basic .NET. Prueba a escribir un texto en el cuadro de texto y pulsa en Mostrar: aparecerá otro cuadro de diálogo con el contenido de lo que escribamos. Pulsamos ahora en la x del formulario para terminar la aplicación o en el botón de terminar de la barra de tareas .

Ahora vamos a añadir otro botón que llamaremos cmdCerrar con el texto "Cerrar". (el nombre es por "cmd" de comando y Cerrar de la acción: cmdCerrar). Para esto primero vamos el IDE para añadir otro botón. Ahora cambiaremos dos propiedades: Name para ponerle cmdCerrar y Text para ponerle Cerrar:

Nota: si estamos con el editor de código y queremos pasar al diseñador del formulario podemos hacer de varias formas, una es haciendo doble clic en el formulario en la parte derecha en el "Explorador de soluciones". Otra y mas cómoda es pulsar en el botón que aparece en el explorador de soluciones:

Que como vemos permite cambiar entre las pantallas de formulario, código y otras que veremos mas adelante.

Seguimos con el ejemplo, pintamos un nuevo botón y cambiamos las dos propiedades comentadas anteriormente:

Obviamente al ponerle esta vez un nombre al control, en lugar de llamarse Button2 se llamará como le hemos indicado cmdCerrar y así lo veremos en el código. Pulsamos doble clic en él para escribir el código que queremos que ejecute:

 y escribimos la instrucción

Me.Close()

Nota: Para buscar mas fácilmente las propiedades en la ventana de propiedades, puedes hacer que se muestren por orden alfabético, simplemente pulsando en el botón AZ:

Pulsamos F5 para ejecutar el programa y la diferencia respecto al programa anterior es que ahora al pulsar este botón el programa termina, cierra el formulario y nos devuelve el entorno de desarrollo. De esta forma el programa está un poco mas completo.

Ahora veamos con detalle el código que hemos usado en los dos eventos (clic del botón Mostrar y clic del botón Cerrar):

MsgBox("Hola " & TextBox1.Text)

MsgBox que es una función o método, (realmente es una clase, como casi todo en .NET), cuya tarea es mostrar en un cuadro de diálogo lo que le indiquemos en el primer parámetro, también tiene otros parámetros opciones, pero por ahora usemos sólo el primero que es obligatorio. Tenemos pues por un lado una instrucción MsgBox que escribe un texto en pantalla y que admite parámetros. Estos parámetros le proporcionan los datos de que debe hacer, en este caso le proporcionamos un texto para que lo escriba: Msgbox ("Hola"). Los parámetros opcionales sirven para añadirle más funcionalidad o simplemente para que modifique su aspecto... en nuestro ejemplo podría tener un título el cuadro de texto o el mensaje podría ir acompañado de un icono.

En Visual Basic.NET todos los procedimientos que reciban parámetros deben usarse con los paréntesis, esto no era así en las versiones anteriores de VB, por tanto, para indicarle que es lo que queremos que muestre, tendremos que hacerlo dentro de los paréntesis, en este caso, queremos que se muestre la palabra "Hola " y lo que haya en la caja de texto.

La palabra Hola (seguida de un espacio) es una constante, es decir siempre será la palabra Hola seguida de un espacio, una vez que el programa esté compilado (listo para ejecutarse por otros usuarios), siempre será lo mismo, por eso se llama constante porque no cambia. En este caso una constante alfanumérica o de cadena, por eso va entre comillas, ya que todos los literales o cadenas que queramos usar en nuestros proyectos deben ir dentro de comillas dobles.

Por otro lado TextBox1.Text representa el texto que hay en el cuadro de texto y por tanto devolverá lo que en él hayamos escrito. Estamos haciendo referencia a la propiedad Text de un control llamado TextBox1. En nuestro ejemplo pintamos un cuadro de texto y VB .NET le puso el nombre genérico de TextBox1, si modificamos su propiedad Text (recordemos el botón Cerrar o la etiqueta por ejemplo) cambiará el contenido de texto que contiene.

Por último, para que esas dos cadenas de caracteres, la constante Hola y el contenido de la propiedad Text del control TextBox1, se puedan unir para usarla como una sola cadena, usaremos el signo & (ampersand) que sirve para concatenar cadenas de caracteres y hacer que Visual Basic entienda que es una sola.

Por tanto, si la propiedad Text del control TextBox1 contenía la cadena TextBox1, al unir las dos cadenas resultará una nueva con el siguiente contenido: "Hola TextBox1" que no es ni más ni menos que la "suma" de las dos cadenas que teníamos.

En el método del evento Clic del botón cerrar hemos escrito: Me.Close(). Me representa al objeto o clase Form1 (el formulario) y el método Close lo que hace es cerrar el formulario, igual que cuando pulsamos en el botón cerrar del formulario. Otra vez hemos utilizado una propiedad (mejor dicho método) de un elemento, por lo tanto la sintaxis es ya sencilla: elemento.acción


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Visual Basic.NET y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Si desea obtener un acceso sin restricciones a los contenidos del curso de Visual Basic.NET y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.