2 .

M I

P R I M E R

P R O G R A M A

2 Mi primer programa Después de completar este tema, serás capaz de: • • • •

Crear el interfaz de usuario básico de una aplicación nueva. Establecer las propiedades de cada objeto de tu interfaz de usuario. Escribir código de programación. Guardar y ejecutar el programa.

Tal y como hemos visto en el tema anterior, el IDE de Visual Studio 2005 contiene herramientas potentes para ayudarnos a ejecutar y manejar programas. Visual Studio también contiene todo aquello que necesitas para crear tus propias aplicaciones para Windows o para el Web. En este tema, aprenderemos a crear un simple, pero a la vez atractivo, interfaz de usuario con los controles de la caja de herramientas de Visual Studio. Después, aprenderemos a personalizar las operaciones de estos controles mediante sus propiedades. Además, escribiremos código para programar nuestra aplicación y, finalmente, aprenderemos a guardar y ejecutar nuestro nuevo programa y a compilarlo como un ejecutable.

1. Lucky Seven: mi primer programa en Visual Basic La aplicación que vamos a construir se llama Lucky Seven, es un juego que simula una máquina de números de la suerte, donde se gana cuando aparece algún siete entre los números que se muestran en cada jugada. Lucky Seven tiene un interfaz de usuario simple y puede ser creado y compilado fácilmente usando Visual Basic. Aquí puedes observar el interfaz de la aplicación finalizada.

Visual Basic: Introducción

1

2 .

M I

P R I M E R

P R O G R A M A

2. Fases de la aplicación El interfaz de usuario de esta aplicación contiene dos botones, tres cajas de número, una foto digital indicando que se ha ganado y una etiqueta “Lucky Seven”. Estos elementos se han creado mediantes siete objetos dentro del formulario principal y cambiando bastantes propiedades de cada uno de los objetos. Después de diseñar el interfaz, es necesario añadir código para procesar los clics de los usuarios en los botones y producir número aleatorios. Para crear esta aplicación seguiremos estos pasos en Visual Basic: 1. Crear el interfaz de usuario. 2. Establecer las propiedades. 3. Escribir el código. La siguiente tabla resume el proceso: Fase Crear el interfaz de usuario. Establecer las propiedades Escribir el código.

Elementos 7 objetos 13 propiedades 2 objetos

3. Crear el interfaz de usuario En este ejercicio, empezaremos construyendo Lucky Seven creando un proyecto nuevo y luego usaremos la caja de herramientas para construir el interfaz de usuario. Crear un proyecto nuevo 1. Inicia Visual Studio 2005.

Visual Basic: Introducción

2

2 .

M I

P R I M E R

P R O G R A M A

2. En el menú Archivo, haz clic sobre Nuevo Proyecto. Aparece el cuadro de diálogo Nuevo Proyecto. 3. En el área donde aparecen los tipos de proyecto, expande los de Visual Basic para ver las opciones disponibles. Tu pantalla será como esta:

4. Haz clic sobre el icono Aplicación Windows en el área de Plantillas del cuadro de diálogo. Visual Studio prepara el entorno de desarrollo para crear una aplicación de Visual Basic. 5. En el cuadro de texto Nombre, escribe MyLucky7. Visual Studio asigna el nombre al proyecto. 6. Haz clic en Aceptar. Visual Studio crea un nuevo proyecto y visualiza un formulario en blanco que usaremos para construir el interfaz de usuario. Ahora, agrandaremos el formulario y crearemos dos botones en el interfaz. Crear el interfaz de usuario 1. Mueve el puntero del ratón sobre la esquina inferior derecha del formulario hasta que su forma cambie a un puntero de cambio de tamaño, luego arrástralo para incrementar el tamaño del formulario para hacer sitio a los objetos de nuestra aplicación. Si quieres usar las dimensiones que se usaran para crear este ejercicio, puedes usar un ancho de 485 píxeles y un alto de 278 píxeles.

Visual Basic: Introducción

3

2 .

M I

P R I M E R

P R O G R A M A

2. Ahora, añadiremos un objeto botón al formulario. Haz clic sobre la caja de herramientas. Ésta contiene todos los controles que usaremos para crear programas en Visual Basic. Los controles adecuados para crear aplicaciones de ventanas están visibles ahora porque previamente seleccionamos como tipo de proyecto Aplicación Windows. Los controles están organizados por tipo, y por defecto la categoría Controles Comunes, está visible. 3. Haz doble clic sobre el control Botón. Visual Studio crea un objeto botón en el formulario:

El nombre del botón es Button1 porque es el primer botón del programa. El nuevo objeto botón se queda seleccionado y englobado por los controles de tamaño. Mover y cambiar el tamaño de un botón

Visual Basic: Introducción

4

2 .

M I

P R I M E R

P R O G R A M A

1. Ubica el puntero del ratón sobre el botón de manera que cambie al puntero de cuatro flechas y luego arrastra el botón abajo y a la derecha. Teniendo en cuenta el aspecto final mostrado previamente. 2. Posiciona el ratón sobre la esquina inferior derecha del botón y redimensiónalo. Ahora, añadiremos un segundo botón al formulario, debajo del primero. 1. Haz clic sobre el control Button y crea un botón del mismo tamaño que el primero y que quede debajo de éste. Ahora, añadiremos unas etiquetas para mostrar los números en la aplicación. Una etiqueta es un elemento especial del interfaz de usuario diseñado para mostrar texto, números o símbolos en un programa. Cuando un usuario haga clic sobre el botón Jugar de la aplicación Lucky Seven, aparecerán tres números aleatorios en las etiquetas. Si uno de los números es el 7, el usuario gana. Añadir las etiquetas 1. Haz doble clic sobre el control Etiqueta de la caja de herramientas. 2. Arrastra el objeto Label1 hacia la derecha de los dos objetos botón. 3. Crea tres etiquetas más y organízalas en el formulario tal y como aparecen en la siguiente figura

Ahora añadiremos un control de imagen al formulario para mostrar un gráfico cuando saga un siete en nuestro juego. Un control de imagen puede mostrar bitmaps iconos, imagen digital, etc. Uno de los mejores usos de este control es para visualizar imágenes JPEG.

Añadir una imagen Visual Basic: Introducción

5

2 .

M I

P R I M E R

P R O G R A M A

1. Haz clic sobre el control PictureBox. 2. Usando el puntero de dibujado del control, crea un rectángulo entre la segunda y tercera etiqueta.

Este objeto se llama PictureBox1 en nuestra aplicación, usaremos este nombre más tarde para referenciar este control. Ahora, estamos preparados para personalizar el interfaz cambiando ciertas propiedades.

4. Cambiar las propiedades Podemos cambiar las propiedades de un objeto seleccionándolo en el formulario y especificando la propiedad a cambiar en la ventana Propiedades. 1. Cambia la propiedad Text del objeto Button1 para que en lugar de mostrar el texto Button1 muestre el texto Jugar. 2. Cambia la propiedad Text del objeto Button2 para que en lugar de mostrar el texto Button2 muestre el texto Salir. Ahora especificaremos las propiedades de las etiquetas. Las tres primeras contendrán los números aleatorios generados por el programa y tendrán propiedades idénticas. Cambiar las propiedades de las etiquetas de los números 1. Selecciona las tres etiquetas simultáneamente pulsando sobre una y posteriormente, y manteniendo la tecla MAYS presionada, selecciona el resto. 2. Cambia la propiedad Autosize a False para permitir redimensionar las etiquetas manualmente. 3. Cambia la propiedad TextAlign a MiddleCenter para centrar el contenido de éstas. 4. Cambia la propiedad BorderStyle a FixedSingle para añadir un borde. 5. Cambia la propiedad Font a Times New Roman, Negrita y tamaño 24.

Visual Basic: Introducción

6

2 .

M I

P R I M E R

P R O G R A M A

Ahora pondremos un cero en cada una de las etiquetas para establecer los número iniciales a mostrar. 6. Selecciona la propiedad Text de cada etiqueta y escribe un 0. 7. Mueve y cambia el tamaño de las etiquetas para que queden de esta forma:

Ahora cambiaremos la etiqueta cuatro: Label4 Cambiar las propiedades de la etiqueta de descripción 1. De la etiqueta Label4, cambia la propiedad Text a Lucky Seven. 2. Cambia la propiedad Font a Arial, Negrita y tamaño 18. 3. Cambia la propiedad ForeColor a Personalizado y color Purple (violeta).

Cambiar las propiedades del control PictureBox 1. Cambia la propiedad SizeMode a StrectImage. Ello provoca que la imagen que se muestre se ajuste automáticamente al tamaño del control. 2. Cambia la propiedad Image y selecciona Recurso Local. Luego, importa la imagen PayCoins.jpg de los archivos de trabajo del tema. 3. Ajusta el tamaño del control para solucionar los problemas de distorsión que puedan surgir. Un tamaño de 148 x 148 muestra una imagen aceptable. Ya que la imagen no se mostrará al iniciar la aplicación, vamos a ocultar el control. 4. Cambia la propiedad Visible a False. Finalmente, el interfaz de usuario es similar a este:

Visual Basic: Introducción

7

2 .

M I

P R I M E R

P R O G R A M A

5. Escribir el código En esta sección, vamos a escribir el código para la aplicación Lucky Seven. Inicialmente, crearemos el código para salir del programa: 1. Haz doble clic sobre el botón Salir. 2. Escribe End. 3. Comprueba que funciona correctamente el botón ejecutando el programa. Escribir el código del botón Jugar 1. Haz doble clic sobre el botón Jugar.. 2. Añade el siguiente código:

Visual Basic: Introducción

8

2 .

M I

P R I M E R

P R O G R A M A

Visual Basic: Introducción

9

2 .

M I

P R I M E R

P R O G R A M A

6. Ejercicios Ejercicio 6.1 Crea una aplicación que permita jugar a la lotería primitiva, donde introduciremos siete números mediante controles de tipo TextBox y luego generaremos una combinación que comparemos con la nuestra, mostrando si se ha acertado en alguna de las distintas categorías (6, 5+C, 5, 4 y 3). Crea un botón Generar para crear la combinación ganadora y otro Premios para comprobar los aciertos. Ejercicio 6.2 Crea una aplicación que mediante controles RadioButton me permita seleccionar mi preferencia en vacaciones Mar o Montaña. Según mi preferencia aparecerá un ListBox con las opciones Benidorm, Ibiza y Burriana para el Mar y Everest, Pirineos o Penyagolosa para Montaña. Incluye un botón Confirmar que muestre un MsgBox con las preferencias seleccionadas. Ejercicio 6.3 Traduce al castellano la aplicación Input Controls cambiando las propiedades correspondientes de los controles. Ejercicio 6.4 Amplia el Ejercicio 6.1 de forma que permita introducir dos apuestas y compruebe los premios de ambas.

Visual Basic: Introducción

10