Visual Basic .net desde cero: creando una aplicación

He escrito (y grabado videos) sobre muchas cosas respecto a Visual Basic .net (versión 2005, 2008 y 2010, que es casi lo mismo).  Alguna vez hice un pequeño video mostrando como crear una aplicación desde cero (llamado “Un programa sencillo… para ir calentando” que adivina un número al azar entre 1 y 10), sin embargo creo que con el puro video no queda claro para muchos, así que en esta ocasión voy a mostrar, paso a paso, como crear un programa sencillo en Visual Basic 2010.

Paso 1. Instalar Visual Studio 2010 en tu computadora

Para este paso, lo único que necesitas es el DVD y mucha paciencia.  Ponlo a instalar, sal por un café, platica con los cuates, juega Xbox, etc.  Como en 5 horas termina.

Paso 2. Arrancar Visual Studio por primera vez

La primera vez que arrancas Visual Studio 2010, te va a preguntar el lenguaje en el que generalmente vas a trabajar.  En nuestro caso, vamos a decirle que generalmente programaremos en Visual Basic.  Si eliges otro lenguaje, no te preocupes: de todos modos puedes escribir programas en Visual Basic.

Paso 3. Crear un nuevo proyecto

Al arrancar Visual Studio, debería aparecerte una ventana como ésta:

0. Ventana principal de Visual Studio

Ahora haz clic sobre el botón de nuevo proyecto.  Recuerda que un proyecto para Visual Studio es toda la bola de archivos necesarios para crear un programa (o sea que es una carpeta con muchas archivos y subcarpetas).  Este es el botón:

1. Botón "Nuevo proyecto"

Y al presionarlo aparece esta ventana (o una muy parecida):

 2. Ventana "Nuevo proyecto"

Hay que elegir el lenguaje de la barra izquierda (Visual Basic), vamos a elegir Windows Forms Application (que hace un programa como los que estamos acostumbrados a ver en Windows) y le ponemos un nombre a la aplicación.  En el ejemplo que voy a hacer, solo cambio el nombre (lo demás está seleccionado como lo necesito: si el tuyo aparece un poco diferente, solo selecciona lo que aquí indiqué).  Mi aplicación se va a llamar 00-Ejemplo.  Nota: en algunas versiones te pregunta la carpeta donde lo vas a guardar.

Paso 5. Dibujar la interfaz gráfica para el usuario (GUI)

Aquí viene la parte divertida.  Después de escribir el nombre de mi proyecto (y en algunos casos la carpeta donde lo voy a guardar) aparece el ambiente de desarrollo como se ve en esta imagen (obviamente los cuadros y flechas no aparecen):

3. Ambiente de programación. Nota: la flecha que no tiene texto apunta hacia la ventana como la verá el usuario.

Antes de hablar de los pasos siguientes, quiero que te familiarices con el entorno de trabajo.  Aunque las cosas pueden cambiar (Visual Studio te da la oportunidad de configurar tu entorno de trabajo como quieras), generalmente a la izquierda está un panel con los diferentes controles que puedes dibujar en la ventana: botones, cajas de texto, etc.  Arriba está la barra de menú y algunos botones de funciones (como el de Nuevo Proyecto que presionamos antes).  De lado derecho, tenemos el explorador de soluciones (que muestra todos los archivos que componen el proyecto) y abajo una ventana que tiene las propiedades del objeto seleccionado (colores, etc.).  En la parte inferior hay una ventana donde me pueden aparecer mensajes (sobre todo a la hora de compilar y correr un programa) y en la parte central es el área de trabajo.

Para este ejemplo, solo voy a dibujar 3 controles: una etiqueta (conocidos como Label), una caja de texto (Textbox) y un botón (Button).  Pero antes que nada, voy a modificar la ventana principal al cambiar sus propiedades.  Para empezar, arriba de la ventana le va a aparecer el texto que dice “Form1” (como se ve en la figura).  Yo quiero cambiarlo para que diga “Saludos”.

 4. Parte superior de la ventana que dice "Form1".

Para hacer esto hago clic sobre la ventana en la vista diseño y cambia la ventana de propiedades para mostrar las que se relacionan a la ventana (o Form).  Ahora busco la propiedad que se llama Text y le modifico el valor para que diga “Saludos”.

5. Panel de propiedades con la propiedad Text seleccionado.

Una vez que escribo “Saludos” en lugar de “Form1”, mi ventana se ve así (en la vista diseño):

6. La ventana Form1 con el nuevo texto.

Ahora voy a cambiar propiedades de la ventana (Form1) para que ya no tenga botón de minimizar ni de maximizar.  Esto lo hago modificando las propiedades MinimizeBox y MaximizeBox respectivamente.  Al cambiar True (verdadero, o sea que sí tiene esa “caja”) por false (falso, que lo oculte) resuelvo la situación.  Aquí está la ventana con estas dos propiedades señaladas y abajo está la ventana ya sin cajas de minimizar ni maximizar.

7. Panel de propiedades con MinimizeBox y MaximizeBox señaladas.

8. Ventana (Form1) sin los botones de minimizar ni maximizar.

Ahora voy a dejar la ventana por la paz y voy a dibujar la etiqueta.  Voy al panel de los controles (lado izquierdo) y selecciono la que dice Label como se muestra en la imagen:

9. Herramienta Label.

Luego hago clic sobre la ventana en el lugar donde quiero que quede…

10. Form1 con una etiqueta (Label1).

Y en este momento ya tengo un control en mi ventana, llamado Label1, que contiene un texto.  Ahora, aprovechando que está seleccionado (y si no, solo haz clic sobre la etiqueta), voy a modificar su propiedad Text para que diga “Nombre” en lugar de “Label1”…

 
11. Form1 con una etiqueta (Label1) que dice "Nombre:".

De la misma manera voy a dibujar una caja de texto.  Selecciono la caja de texto del panel de controles (o herramientas) y lo dibujo sobre la ventana.  Generalmente a los controles que voy a programar me gusta cambiarles el nombre para no hacerme bolas, así que a este le cambio la propiedad (Name) para que diga txtNombre.  La parte txt me dice que es una caja de texto… si quieres profundizar en esto, busca la notación húngara.  Aquí hay imágenes con todo el proceso:

 
12. Form1 con una etiqueta (Label1) que dice "Nombre:".

 
13. Herramienta TextBox.

 
14. Form1 con Textbox.

 
15. Propiedad (Name) de la Textbox.

De la misma manera dibujo un botón abajo de la caja de texto.  Aquí están las imágenes que describen paso por paso:

16. Herramienta Button.

17. Form1 con el botón dibujado.

18. Cambié la propiedad (Name) por btnSalir (antes decía Button1).

19. Propiedad Text del botón.

20. Form1 “terminada”.

Paso 6. Escribir el código (pa’ que haga algo)

Una vez que está todo “bonito”, es hora de que haga algo.  Vamos a programar los eventos de la ventana.  Un evento es algo que pasa: el mouse que hace clic sobre el botón, algo que se teclea en la caja de texto, etc.

Este programa va a dejar que el usuario escriba su nombre (o cualquier otro texto) en la caja de texto y al presionar el botón Salir, se despedirá.  Por lo tanto, el único evento que tengo que programar es el que se ejecuta cuando el usuario da clic sobre el botón Salir.  Así que le doy doble clic sobre el botón y el área de trabajo cambia para escribir código.  En este caso, al dar doble clic sobre el botón aparece una nueva pestaña en el área de trabajo:

21. Pestaña para escribir código del evento del botón.

Por lo pronto no le hagas caso al código que aparece, ya luego lo iremos hablando (o lo puedes ver en varios de mis posts sobre Visual Basic .net).  Por lo pronto, aparece el código listo para escribir lo que queremos que haga cuando el usuario haga clic sobre el botón.  Este es el código que escribí:

 
22. Pestaña para escribir código del evento del botón.

No te preocupes si no entendiste todas las instrucciones (esto es un primer acercamiento y poco a poco podrás ir profundizando en lo que hace cada cosa).  La instrucción MsgBox se encarga de abrir una ventana y mostrar un texto (bueno, puede hacer un poco más que eso, pero para empezar hace esto).  En medio escribo lo que quiero que diga, en este caso el texto “Adiós, “ seguido por el nombre que teclearon en la caja de texto (¿recuerdas que le cambiamos el nombre por txtNombre?).  El ampersand (&) sirve para unir dos textos: en este caso, el texto “Adiós, “ y el nombre tecleado.  Después de hacer esto, se encuentra la instrucción End que termina la ejecución del programa.

Paso 7. Guardar todo

Esto es sumamente importante.  Y no debí dejarlo hasta ahora: es algo que hay que hacer cada vez que se hace algún cambio.  Presiona el botón de guardar todo (Save All, también está disponible en el menú File):

23. Botón Guardar todo.

Y aparece esta ventana:

24. Ventana para guardar el proyecto.

Selecciona una carpeta (botón Browse) y, si es necesario, cambia el nombre.  Luego haz clic sobre el botón Save.  En las próximas ocasiones que presiones Save All ya no aparece esta ventana.

Paso 8. La ejecución

No, esta ejecución no tiene que ver con violencia, sino con ver si el programa hace lo que queremos que haga.  Para esto, presiona el botón para comenzar la depuración (Start debugging):

25. Botón Start debugging....

Y aparece nuestra aplicación:

26. Ejecución de la aplicación.

Escribo mi nombre y al presionar el botón Salir, aparece esta ventana:

27. Ventana de saludo.

Al presionar el botón Aceptar (o presionar la tecla Enter), se termina la ejecución y regreso a Visual Studio.

Sé que esto ha sido muy introductorio, pero espero que haya sido útil.  Si tienen dudas, dejen un comentario.  ¡Saludos!