PDF de programación - Aplicación de ejemplo en VB.NET

Aplicación de ejemplo



en VB.NET



Luís Rodríguez Baena
Universidad Pontifica de Salamanca en Madrid
Facultad de Informática
2010



Aplicación de ejemplo en VB.NET

Aplicación de ejemplo en VB.NET

1. Propósito de la aplicación

Esta guía es un tutorial que explica el desarrollo completo de una aplicación en Visual Basic .NET.
La aplicación formaría parte de otra mayor para la compra-venta de coches usados. En concreto
permitiría la visualización de los vehículos a partir de su matrícula. La interfaz de la aplicación
presentaría un aspecto similar al siguiente:

Al introducir la matrícula y pulsar sobre el botón ACEPTAR, se visualizará una foto con la imagen
del vehículo, apareciendo su matrícula en la barra de título del formulario. El botón SALIR
finalizaría la aplicación.



2. Crear un nuevo proyecto1

Una vez abierto el entorno de desarrollo, es necesario crear un nuevo proyecto, ya sea desde la
página de inicio del entorno o mediante la opción PROYECTO del menú ARCHIVO/NUEVO
(CTRL+MAYS+N).

En este cuadro de diálogo se debe elegir la plantilla APLICACIÓN PARA WINDOWS de la parte
derecha. Además es conveniente dar un nombre a la aplicación para que la solución generada no
tome el nombre por omisión (WindowsApplicationXXX).



1 Para todas las pantallas y referencias al entorno de desarrollo, se supondrá que se está utilizando la “Configuración de desarrollo de
Visual Basic”. Dicha configuración se puede cambiar mediante la opción IMPORTAR Y EXPORTAR CONFIGURACIONES del menú
HERRAMIENTAS.



Luís Rodríguez Baena (UPSAM), 2010



2

Aplicación de ejemplo en VB.NET

También es posible dar un nombre a la solución y al proyecto, así como indicar la carpeta donde
se guardará cuando por primera vez se da la opción GUARDAR TODO (CTRL+MAYÚS+S) del menú
ARCHIVO.

Es recomendable dar al proyecto y a la solución un nombre distinto del nombre por omisión, para
que, de esta forma, se pueda distinguir claramente la finalidad de cada proyecto.



3. Añadir componentes y establecer propiedades

Los componentes de la aplicación serán:

Un contenedor heredado de System.Windows.Forms.Form para el formulario

principal.

Un campo de texto estático (control de la clase Label) para la etiqueta del cuadro de

texto.

Un campo de texto editable (control de la clase TextBox) para introducir la matrícula.

Dos botones (controles de la clase Button) etiquetados como ACEPTAR y SALIR.

Un control de la clase PictureBox que actuará como contenedor de archivo de

imagen de los vehículos.

Además serán necesarias imágenes en formato JPG cuyo nombre será la matrícula del vehículo
con extensión .jpg y con un tamaño de 140x100 píxel (algunas de estas imágenes están
disponibles en el Campus Virtual o en la página www.colimbo.net).

3.1. El formulario principal

Al iniciar una aplicación para Windows, el entorno de desarrollo crea automáticamente un
componente de la clase Form que actuará como formulario principal de la aplicación. El nombre
por omisión del archivo que contiene el formulario es Form1.vb y el nombre del objeto Form1.
Sin embargo, es interesante cambiar dichos nombres por otros más significativos. Para cambiar el
nombre del archivo se puede recurrir a las propiedades del archivo, seleccionándolo desde el
explorador de proyectos. La versión actual del entorno de desarrollo Visual Studio 2008, cambiará
también automáticamente la propiedad Name del objeto de la clase Form.

En el formulario, también es importante cambiar el valor de la barra de títulos del formulario
mediante la propiedad Text, y puede ser interesante cambiar el icono predeterminado de la
aplicación mediante la propiedad Icon.

En el directorio de Visual Studio, en la subcarpeta VS2008ImageLibrary de la carpeta
Common7, existen una serie de directorios con iconos y bitmaps que se pueden utilizar en las
aplicaciones. Entre el material proporcionado en este tutorial, también aparece el archivo
car_icon.ico, con el icono del formulario.



Luís Rodríguez Baena (UPSAM), 2010



3

Aplicación de ejemplo en VB.NET

3.2. El control Label

Se utiliza para etiquetar otros campos, en este caso el cuadro de texto que contendrá la matrícula.
Aparte de las propiedades que podemos usar para cambiar su aspecto (colores, tamaño, posición
o tipo de letra), debemos cambiar la propiedad Text que contendrá el texto estático de la
etiqueta. En estos controles (ocurrirá lo mismo en los botones de la aplicación), el carácter
ampersand (&) antes de una letra definirá la tecla de acceso al control.

3.3. El control TextBox

Se utiliza para introducir texto editable por el usuario. En este control es muy conveniente cambiar
la propiedad Name del control (por ejemplo, por el identificador txtMatrícula, utilizando el
prefijo txt para indicar que se trata de un cuadro de texto.), ya que nos referiremos a él en el
código del formulario. La propiedad Text permitirá referirnos al texto para obtener su valor o
cambiarlo mediante la expresión txtMatrícula.Text.

3.4. Controles Button

En este caso, también será conveniente cambiar las propiedades Name y Text utilizando en esta
última el carácter ampersand (&) para especificar la tecla de acceso. En el caso de la propiedad
Name, para indicar que se trata de referencias a objetos de la clase Button, se puede utilizar el
prefijo btn (los botones podrían tener los nombres btnAceptar y btnSalir).

3.5. Control PictureBox

La clase PictureBox sirve como contenedor de objetos gráficos. Además de la propiedad Name
(se puede utilizar pic cómo prefijo de las referencias a esta clase, por lo que en nuestra
aplicación el control se podría llamar picFoto) podemos modificar otras propiedades para
cambiar su aspecto. El control, por omisión, aparece sin ningún borde que permita distinguirlo en
el formulario cuando no contiene ninguna imagen. Es posible crear un borde modificando en
tiempo de diseño la propiedad BorderStyle, a la que se asigna algún valor de la enumeración
BorderStyle. La siguiente tabla muestra los miembros de esa enumeración.

Nombre de miembro
Fixed3D
FixedSingle
None

Descripción
Borde tridimensional.
Borde de una sola línea.
Sin borde.

De forma predeterminada, se muestra sólo la parte de la imagen que cabe en el control, pero
mediante la propiedad SizeMode, podemos obligar a cambiar, bien el tamaño del control para
que se adapta al tamaño de la imagen, o bien el tamaño de la imagen para que se adapte al
tamaño del control. El valor de SizeMode es algún miembro de
la enumeración
PictureBoxSizeMode, cuyos miembros se puede ver en la tabla siguiente.

Nombre de miembro
AutoSize

CenterImage

Normal

StretchImage

Zoom

Descripción
El tamaño de PictureBox debe ajustarse igual que el tamaño de la imagen que
contiene.
La imagen se muestra en el centro si PictureBox es más grande que la imagen. Si la
imagen es más grande que PictureBox, la imagen se coloca en el centro de PictureBox
y se recortan los bordes exteriores.
La imagen se coloca en la esquina superior izquierda de PictureBox. La imagen se
recorta si es más grande que el objeto PictureBox que la contiene.
La imagen situada dentro de PictureBox se estira o encoge para ajustarse al tamaño
del mismo.
Se aumenta el tamaño de la imagen o se disminuye, manteniendo la proporción de
tamaño.



Luís Rodríguez Baena (UPSAM), 2010



4

Aplicación de ejemplo en VB.NET

3.6. Control del orden de tabulación

Es importante verificar el orden de tabulación de los controles. En los controles que pueden tomar
el foco, el orden de tabulación lo determina la propiedad TabIndex (también podemos evitar que
esos controles entren en el orden de tabulación estableciendo la propiedad TabStop a False).

El control Label no puede tomar el foco, aunque si tiene propiedad TabIndex. En este caso, la
propiedad se utiliza para establecer que control tomará el foco al utilizar su tecla de acceso, que
será el siguiente en el orden de tabulación.

Podemos establecer manualmente la propiedad TabIndex, o bien utilizar la opción ORDEN DE
TABULACIÓN del menú VER que permite establecerla de forma visual.



4. Codificación de los eventos

Para dotar de funcionalidad a la aplicación es necesario codificar los eventos seleccionados
mediante el editor de código. Existen distintas formas de abrir el editor de código:

Pulsando dos veces sobre un componente se abre el editor de código y aparece una
plantilla con el evento predefinido para ese componente (por ejemplo, Click para los
controles Button, TextChanged para los TextBox, etc.).

Pulsando F7 o mediante la opción CÓDIGO del menú VER se abre el editor y el cursor

se pone sobre la primera línea del código del módulo.

Pulsando sobre el botón VER CÓDIGO de la parte superior del Explorador de soluciones.

En cualquiera de los casos aparecerá la ventana de código de la que podremos seleccionar un
evento predefinido (seleccionando el componente en la lista de la izquierda) y el evento de la lista
de la derecha o escribir nuestros propios procedimientos, declaraciones, etc.



Luís Rodríguez Baena (UPSAM), 2010



5

Aplicación de ejemplo en VB.NET



Cada clase tiene una lista de eventos definidos para ella (que aparece en la lista de la derecha de
la pantalla de código). Cada procedimiento de evento no es más que un procedimient