Inicio » Informática profesional. » Novedades 2008 » Curso de Visual Basic .NET »  Nº 2 - El entorno de desarrollo

Curso de Visual Basic .NET

Cursos Relacionados:

 Nº 2 - El entorno de desarrollo


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


1. El IDE o Entorno Integrado de Desarrollo

Lo primero que tenemos que aprender antes de meternos de lleno con la programación es aprender a manejarnos con el entorno de desarrollo (IDE) de Visual Studio .NET. Como ves hemos dicho de Visual Studio y no de Visual Basic, ya que como comentamos en el primer capítulo Visual Studio es ya un único entorno para todo lo referente al desarrollo con Microsoft y su .NET. Por tanto, si además de usar el VB.NET queremos pasar a otros lenguajes como el C# o ASP.NET, no tendremos que utilizar otro programa para. Incluso podremos trabajar con varios proyectos a un mismo tiempo, aunque sean de lenguajes diferentes. Además, si así lo quieres y "sabes" cómo hacerlo, puedes crear tus propios complementos para que se integren con el IDE de Visual Studio .NET. (Aunque eso, no lo veremos en este curso).

Lo primero que vamos a hacer es cargar el entorno de desarrollo del Visual Studio .NET, así que vamos otra vez a Inicio Programas y lo ejecutamos... en la pantalla de inicio volvemos a seleccionar "Aplicación para Windows":

En el proyecto, se habrá creado un formulario que te lo mostrará de forma automática. Si no se mostrara nada y siguiera estando la pantalla de inicio... dale un respiro ya que seguramente lo estará cargando... ya comentamos que es un entorno que consume muchos recursos y puede ser lento en la carga de determinadas partes... en caso de que después de un rato  no lo mostrara tampoco... fíjate en el lado derecho de la pantalla, verás que hay un "panel" o ventana en la que se indica el proyecto actual y se muestran los ficheros que lo componen. Ese panel es el Explorador de Soluciones:

La pantalla  con todo el IDE activo es como esta:

Donde distinguimos en la parte izquierda el cuadro de herramientas, en el centro el formulario principal y en la parte derecha las ventanas de propiedades y el explorador de soluciones.


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


1.1 Cambiar propiedades

Nos aparece el formulario en blanco, vamos activar una cuadrícula para que nos muestre unos "puntos" que nos ayudarán a colocar los controles. Para mostrarla vamos a la pantalla de opciones en el menú herramientas:

En esta pantalla configuraremos el funcionamiento general de nuestro entorno y del lenguaje Visual Basic.NET:

En este caso le estamos indicando que nos muestre la cuadrícula "ShowGrid" que hemos puesto a "true" es decir "cierto". Pulsamos en aceptar y volvemos al IDE. Para que esta opción se haga efectiva debemos cerrar este proyecto y crear uno nuevo, el formulario tendrá ahora unos puntos para colocar los controles. Luego en la ejecución son invisibles, es una ayuda para poder colocar bien alineados los controles:

Vamos a modificar ahora una propiedad de esta cuadrícula. Seleccionamos el formulario haciendo clic en él y vamos a ver sus propiedades. En el panel de la derecha, junto al explorador de soluciones, está la ventana de propiedades del elemento que actualmente esté seleccionado, en nuestro caso son las propiedades del Form1. Vamos a buscar el elemento GridSize para poder cambiar el tamaño de separación. Verás que se muestran dos valores separados por punto y coma, pero también hay una cruz a la izquierda de la palabra GridSize, si pulsas en esa cruz, se mostrarán los tamaños a lo que se refiere esos valores separados por punto y coma:

Posiciónate en cualquiera de ellos y asígnale el valor 4, de esta forma, tendremos un formulario con una cuadrícula más pequeña, en la que será más fácil posicionar los controles que queramos añadir al formulario en cuestión. Además hemos visto debajo de las propiedades que cuando seleccionamos una nos aparece una descripción de ella: Gridsize, Determina el tamaño de la cuadrícula de posición. Esto será de gran ayuda para más adelante además nos encontramos con algo importante: las propiedades.  En esta caso los formularios tienen todas las propiedades que aparecen en esta ventana y que hacen referencia a su aspecto y comportamiento, en nuestro caso hemos modificado la propiedad Gridsize para cambiar la distancia entre puntos del formulario.

Fíjate que después de haber cambiado esos valores, los mismos se muestran en "negrita", indicándonos de esta forma que son valores que nosotros hemos asignado, los que tiene por defecto. También te habrás fijado que ahora el "grid" tiene los puntos más juntos. Si no es el adecuado para tu gusto puedes cambiarlo y dejarlo como estaba, lo importante es que ya hemos cambiado una propiedad del formulario.

Esta cuadrícula la habréis echado de menos los programadores de Visual Basic, pero vamos a desactivarla otra vez dejando la opción de "SnapLines":

Prueba ahora a colocar varios controles, verás como nos muestra unas líneas que hacen de guía para dejar los controles alineados o a la misma distancia:

Te recomiendo que te acostumbres a utilizar esta opción, yo utilizaré ambos indistintamente para que se vea mejor en la edición pero te recomiendo que te hagas con esta forma de "dibujar" los controles porque es mas cómoda y visualmente incluso mas fácil que con la cuadrícula de puntos.


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


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:

jate que en la parte superior de la ventana pone el control que estamos editando y de que tipo es:

En este caso es una etiqueta (label) que la ha creado a partir de la clase "System.Windows.Forms.Label"

Al principio y para asegurarnos de que vamos escribiendo bien estas propiedades nos fijaremos bien 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 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...  Los eventos a los que atienden los controles los podemos ver en la ventana de propiedades, seleccionando:

De momento te sonará un poco raro pero verás que sencillo es mas adelante. Hay otra forma de acceder a los eventos de los controles y es esta. Vete a la vista del código del formulario pulsando en:

Llegaremos otra vez a la ventana del código de antes, haz clic en el desplegable de arriba a la izquierda y verás:

Que son los objetos que hemos añadido en nuestro formulario. Selecciona en botón "Button1" y fíjate ahora en el desplegable de la derecha:

Que es la lista de eventos a los que puede atender nuestro objeto, en este caso el botón. Por tanto cuando te diga de acceder al "evento tal" del objeto iremos a la vista de código, seleccionaremos el objeto en la lista de la izquierda y el evento en la derecha.

Volvemos a la pantalla del código para el evento clic del botón:

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

Ya tenemos otra 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 "Jose", al unir las dos cadenas resultará una nueva con el siguiente contenido: "Hola Jose" 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.