1

2
Introduccin a Visual Basic 2008
2009 Pearson Education, Inc. All rights reserved.

Seeing is believing.
Proverb

Form ever follows function.

Louis Henri Sullivan

Intelligence is the faculty of making artificial objects, especially tools to make tools.
Henri-Louis Bergson

2009 Pearson Education, Inc. All rights reserved.

OBJETIVOS
En este captulo trabajaremos con: Los fundamentos de Visual Studio Integrated Development Environment (IDE), que le permitir escribir, ejecutar (running) y depurar (debugging) sus programas de Visual Basic. Funciones de ayuda de Visual Studios. Comandos claves contenidoS en el IDEs de mens y barras de herramientas.

2009 Pearson Education, Inc. All rights reserved.

OBJETIVOS
El propsito de los diversos tipos de ventanas en Visual Studio 2008 IDE. Qu es programacin visual y cmo se simplifica y acelera el desarrollo de programas? Crear, compilar y ejecutar un programa simple de Visual Basic que muestra el texto y una imagen utilizando el IDE de Visual Studio y la tcnica de programacin visual.

2009 Pearson Education, Inc. All rights reserved.

2.1 Introduccin Visual Studio 2008 is Microsofts Integrated Development Environment (IDE) que le permitir escribir, ejecutar (running) y depurar (debugging) programas.

Un programa simple de Visual Basic puede crearse arrastrando y colocando bloques predefinidos en su lugar a travs de programacin visual.

2009 Pearson Education, Inc. All rights reserved.

2.2 Visualizacin de la ventana de inicio de Visual Studio 2008 IDE

Comience Microsoft Visual Basic 2008 Edition.
Botn de nuevo proyexto

Pestaa pgina de comienzo

Colapso de la ventana del cuadro de herramientas

Enlaces pgina de comienzo

Panel de Explorador de soluciones (no projects open)

Fig. 2.1 | Pgina de inicio en Visual Basic 2008 Edition.

2009 Pearson Education, Inc. All rights reserved.

2.2 Continuacin: Visualizacin de la ventana de inicio de Visual Studio 2008 IDE

El ambiente de desarrollo integrado IDE- Integrated Development Environment posee adems, un navegador web interno. Para solicitar una pgina web, introduzca su URL en la barra de direcciones.
Pgina de web solicitada (barra de direcciones y men desplegable) Seleccionada ficha de la pgina web solicitada

Fig. 2.2 | Mostrar una pgina web en Visual Studio.

2009 Pearson Education, Inc. All rights reserved.

2.2 Continuacin: Visualizacin de la ventana de inicio de Visual Studio 2008 IDE Selecone File > New Project... Para crear un nuevo proyecto. Plantilla del projecto project templates son los tipos de proyectos que los usuarios pueden crear en Visual Basic.
Una forma de aplicacin de Windows posee una interfaz grfica para el usuario graphical user interface (GUI).

2009 Pearson Education, Inc. All rights reserved.

2.2 Continuacin: Visualizacin de la ventana de inicio de Visual Studio 2008 IDE

Forma de aplicacin de Windows (seleccionada)

Nombre del proyecto por defecto. (proviisto por Visual Studio)

Descripcin del proyecto seleccionado. (proviisto por Visual Studio)

Fig. 2.3 | Cuadro de dilogo de un nuevo proyecto.

2009 Pearson Education, Inc. All rights reserved.

10

2.2 Continuacin: Visualizacin de la ventana de inicio de Visual Studio 2008 IDE

Pulse OK para desplegar IDE en la vista de diseo. (design view).
pestaa activa pestaa men barra de men Panel de soluciones del explorador.

Forma (Windows Forms application)

Propiedades de la ventana.

Fig. 2.4 | Vista

de diseo de IDE.
2009 Pearson Education, Inc. All rights reserved.

11

2.2 Continuacin: Visualizacin de la ventana de inicio de Visual Studio 2008 IDE

Al colocar controles en el formulario, usted ser capaz de modificar sus propiedades. La figura que observa a continuacin muestra donde el texto de los ttulos de la forma pueden ser modificados.

Text box (displaying the text Form1) which can be modified

Fig. 2.5 | Control de cuadro de texto para modificar una propiedad en the Visual Studio IDE.
2009 Pearson Education, Inc. All rights reserved.

12

2.2 Continuacin: Visualizacin de la ventana de inicio de Visual Studio 2008 IDE

La figura a continuacin muestra un cuadro de dilogo en el que se pueden modificar las propiedades de los caracteres (letras).

Botn de OK. Botn de cancelar.

Fig. 2.6 | cuadro de dilogo en el que se pueden modificar las propiedades de los caracteres en the Visual Studio IDE.
2009 Pearson Education, Inc. All rights reserved.

13

2.3 Barra de men y de herramientas Muchos comandos se encuentran en los mens El conjunto de mens que muestra depende de lo que se est haciendo actualmente en IDE.

Fig. 2.7 | Barra de men de Visual Studio menu.

2009 Pearson Education, Inc. All rights reserved.

14

2.3 Continuacin: Barra de men y de herramientas

Menu
File Edit View Project Build Debug Data Format Tools Window Help

Description
Commands for opening, closing, adding and saving projects, as well as printing project data and exiting Visual Studio. Commands for editing programs, such as cut, copy, paste, undo, redo, delete, find and select. Commands for displaying IDE windows and for adding toolbars. Commands for managing projects and their files. Commands for compiling Visual Basic programs. Commands for debugging and running programs. Commands for interacting with databases. Commands for arranging and modifying a Forms controls. Commands for accessing additional IDE tools and options. Commands for hiding, opening, closing and displaying IDE windows. Commands for accessing the IDEs help features.

Fig. 2.8 | Resumen de de los mens de Visual Studio 2008 IDE.

2009 Pearson Education, Inc. All rights reserved.

15

2.3 Continuacin: Barra de men y de herramientas

Puede acceder a los comandos ms comunes desde los iconos de la barra de herramientas rpida o atajos. Comment out the
New Project

Add New Item Save

Cut Paste

selected lines
Undo Navigate Backward

Open File

Save All

Copy

Find

Uncomment the selected lines

Redo

Navigate Forward

Solution

Object
Browser

Start

Stop

Step Over

Explorer

Error List

Break All

Step Into

Step Out

Properties Window

Toolbox

Immediate

Fig. 2.9 | Barra standard Visual Studio.

2009 Pearson Education, Inc. All rights reserved.

16

2.3 Continuacin: Barra de men y de herramientas

Seleccione View > Toolbars. Cada barra de herramientas que seleccione se muestra en la parte superior de la ventana de Visual Studio.
Otras herramientas aparecen en esta rea.

Fig. 2.10 | Agregar la barra de herramientas de construir al IDE.

2009 Pearson Education, Inc. All rights reserved.

17

2.3 Continuacin: Barra de men y de herramientas Algunos iconos contienen una flecha hacia abajo que se puede pulsar para visualizar comando o comandos relacionados.
Herramientas

Flecha hacia abajo indica comandos adicionales

Fig. 2.11 | IDE herramienta de iconos mostrando comandos adicionales

2009 Pearson Education, Inc. All rights reserved.

18

2.3 Continuacin: Barra de men y de herramientas Colocando el puntero del ratn sobre un icono resalta y tras una breve pausa, muestra una descripcin de la herramienta.

La herramienta de recomendacin se despliega cuando el apuntador se sita sobre un icono durante unos segundos.

Fig. 2.12 | Demostracin de la herramienta de recomendacin.

2009 Pearson Education, Inc. All rights reserved.

19

2.4 Navigando en la interfase de Visual Studio IDE

El IDE proporciona ventanas para acceder a los archivos del proyecto y la personalizacin de los controles.
Propiedades de la ventana Properties Window Bsqueda de objetos Object Browser

Solution Explorer

Herramientas Toolbox

Fig. 2.13 | Iconos de herramientas para cuatro ventanas de Visual Studio.

2009 Pearson Education, Inc. All rights reserved.

20

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE Visual Studio proporciona una caracterstica de ahorro de espacio llamada: auto-hide.
Cuando el ocultar automticamente est habilitado, aparece una pestaa por el borde de la ventana de IDE.

Icon for hidden window (auto-hide enabled)

Fig. 2.14 | Demostracin de la funcin de Auto-hide.

2009 Pearson Education, Inc. All rights reserved.

21

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

Si coloca el puntero del ratn sobre uno de estos iconos muestra esa ventana.
Orientacin horizontal para el icono de pin cuando est habilitado el ocultar automticamente (Horizontal orientation for pin icon when auto-hide is enabled)

Ttulo de la caja de herramientas.

Fig. 2.15 | Mostrar una ventana oculta cuando est habilitado el ocultar automticamente .
2009 Pearson Education, Inc. All rights reserved.

22

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

Para pin down una ventana, pulse el pin icon. Cuando est habilitado el ocultar automticamente, el icono de pin es horizontal . Cuando una ventana es "inmovilizada," el pin es vertical .
Cuando est habilitado el ocultar automticamente, el icono del pin es horizontal .

Fig. 2.16 | Deshabilitar auto-esconder (pinning down a window).

2009 Pearson Education, Inc. All rights reserved.

23

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

2.4.1 Solution Explorer El Solution Explorer proporciona acceso a todos los archivos de la solucin. La solucin del proyecto de inicio startup project es la que se ejecuta cuando se selecciona y corre Debug > Start Debugging.

Toolbar Startup project Show All Files icon

Fig. 2.17 | Solution Explorer with an open project.

2009 Pearson Education, Inc. All rights reserved.

24

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

Pulsando Solution Explorers Show All Files icon se despliegan todos los archivos en the.
Plus box Minus box

Fig. 2.18 | Solution Explorer muestra los cuadros de ms y menos que permite expandir y contraer el rbol para mostrar u ocultar los archivos del proyecto .
2009 Pearson Education, Inc. All rights reserved.

25

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

Los cuadros con los signos de ms y menos se pueden pulsar para expandir y contraer el rbol del proyecto.
Pulse el cuadro de ms a la izquierda de My Project.
Los cuadros con signos de menos indican que los archivos o carpetas estn expandidos. (changed from plus box)

Fig. 2.19 | Solution Explorer expande el archivo de My Project tras pulsar en la casilla de ms .
2009 Pearson Education, Inc. All rights reserved.

26

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

Haga clic en el cuadro de signo de menos para contraer el rbol desde su estado expandido.

Los cuadros con signos de ms indican que los archivos o carpetas estn contraiidos. (changed from minus box)

Fig. 2.20 | En la figura se observa el Solution Explorer.

2009 Pearson Education, Inc. All rights reserved.

27

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

2.4.2 Caja de herramientas Toolbox

Controles

Groupo de nambes

Fig. 2.21 | El men desplegable de la caja de herramientas Toolbox displiega los controles para los grupos de controles comnes Common Controls.
2009 Pearson Education, Inc. All rights reserved.

28

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

2.4.3 Ventana de Propiedades Properties Window

Seleccione View > Properties Window
La ventana de propiedades le permite modificar las propiedades de un control visualmente, sin necesidad de escribir el cdigo. En la parte superior de la ventana de propiedades se encuentra la lista de men desplegable de seleccin de los componentes.

2009 Pearson Education, Inc. All rights reserved.

29

2.4 Continuacin: Navigando en la interfase de Visual Studio IDE

Component selection

Icono de categorias Categorized icon

Toolbar

Icono alfabtico Alphabetic icon

Barra de desplazamiento Scrollbox Propiedades Properties

Desplazamiento Scrollbox

Valor de la propiedad Property values

Descripcin Description

Fig. 2.22 | Ventana de propiedades.

2009 Pearson Education, Inc. All rights reserved.

30

2.5 Uso de la ayuda Help

Algunos comandos de men de ayuda se resumen en la figura que vez a continuacin:
Command
How Do I?

Description
Contains links to relevant topics, including how to upgrade programs and learn more about Web services, architecture and design, files and I/O, data, debugging and more. Finds help articles based on search keywords. Displays an alphabetized list of topics you can browse. Displays a categorized table of contents in which help articles are organized by topic.

Search Index Contents

Fig. 2.23 | Comandos del men de Help.

2009 Pearson Education, Inc. All rights reserved.

31

2.5 Continuacin: Uso de la ayuda Help Para utilizar la ayuda sensible al contexto, pulse en un elemento y, a continuacin, presione la tecla F1 .

Fig. 2.24 | Utilizando el context-sensitive help.

2009 Pearson Education, Inc. All rights reserved.

32

2.5 Continuacin: Uso de la ayuda Help

Las opciones de ayuda pueden establecerse mediante la seleccin de Tools > Options. Asegrese de que el Show all settings est activado o seleccionado.

Seleccione Help, entonces establezca el Show Help using: en la lista desplegable a la ayuda externa.
Show Help using drop-down list Help options selected

Show all settings CheckBox

Fig. 2.25 | Options dialog despliega la configuracin de Help.

2009 Pearson Education, Inc. All rights reserved.

33

2.6 Uso de la programacin visual para crear un programa simple. La siguiente que ve a continuacin muestra los resultados del programa cuando se ejecuta..
Marbete de control Label control

Control de cuadro de foto PictureBox control

Fig. 2.26 | Ejecucin de un programa simple.

2009 Pearson Education, Inc. All rights reserved.

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Seleccione File > New Project. De las opciones de la plantilla, seleccione Windows Forms Application. Nombre el proyecto ASimpleProgram y pulse OK.

34

Ejemplo nombre de proyecto. Type the project name

Tipos de plantillas Template types.

Fig. 2.27 | Cudro de dilogo de New Project.

2009 Pearson Education, Inc. All rights reserved.

35

2.6 Continuacin: Uso de la programacin visual para crear un programa simple. Seleccione File > Save All para desplegar el

Save Project dialog.

Fig. 2.28 | Cuadro de dilogo de Save Project.

2009 Pearson Education, Inc. All rights reserved.

36

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Para establecer la ubicacin del proyecto, pulse el botn de Browse.

Seleccione localizacin del proyecto. (Selected project location)

Presione establecer la localizacin del proyecto. (Click to set project Location)

Fig. 2.29 | Configuracin de la ubicacin del proyecto en el cuadro de dilogo de la ubicacin del proyecto .
2009 Pearson Education, Inc. All rights reserved.

37

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Cuando usted comienza primero a trabajar en el IDE, es en el modo de diseo Design Mode. El texto en la barra de ttulo de la forma Forms title bar se determina por la propiedad del texto Forms Text property.
Nombre y tipo de objeto (Name and type of object)

Propiedad seleccionada (selected property)

Valor de la propiedad (Property value)

Descripcin de la propiedad (Property description)

Fig. 2.30 | Estableciendo las propiedades del texto en la ventana propiedades.

2009 Pearson Education, Inc. All rights reserved.

38

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Presione la tecla de Enter para finalizar.

Haga clic y arrastre los controladores de tamao para cambiar el tamao de la Forma.
Barra de Ttulo (Title bar)

Controladores de tamao (Enabled sizing handles)

Fig. 2.31 | Formulario con controladores de tamao .

2009 Pearson Education, Inc. All rights reserved.

39

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Haga clic y arrastre uno de los Forms enabled sizing handles para agrandar la forma.

Fig. 2.32 | Cambiar el tamao de la forma.

2009 Pearson Education, Inc. All rights reserved.

40

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Pulsando el BackColor en la ventana de propiedades Properties hace que aparezca un men desplegable. El recuadro muestra las fichas para Custom, Web y System. Pulse el Custom tab para desplegar la paleta palette.
Color corriente Current color

Botn de desplazamiento hacia abajo Down-arrow button Paleta personalizada Custom palette Azul claro Light blue

Fig. 2.33 | Cambiando la propiedad de color del fondo de la forma.

2009 Pearson Education, Inc. All rights reserved.

41

2.6 Continuacin: Uso de la programacin visual para crear un programa simple. Una vez que selecciona un color, la paleta se cierra y cambia el color de fondo del formulario.

Nuevo color de fondo New background color

Fig. 2.34 | Forma con la propiedad de nuevo color de fondo BackColor aplicado .
2009 Pearson Education, Inc. All rights reserved.

42

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Seleccione View > Toolbox para mostrar el conjunto de controles. Double click the Label control in the Toolbox.
Label control

Fig. 2.35 | Agregar una etiqueta al formulario .

2009 Pearson Education, Inc. All rights reserved.

43

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Establezca la propiedad del texto de la etiqueta Set the Labels Text a Welcome to Visual Basic!.

Establezca la propiedad AutoSize a false, por lo que puede cambiar el tamao de la etiqueta.

Propiedad de autotamao. (AutoSize property)

Fig. 2.36 | Cambiar la propiedad AutoSize del Label a false .

2009 Pearson Education, Inc. All rights reserved.

44

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Cambiar el tamao de la etiqueta de modo que se ajuste el texto . Centrar el control Label horizontalmente mediante la seleccin de Format > Center In Form > Horizontally

Controladores de tamao (Sizing Handles)

Etiqueta centrado con la propiedad de texto actualizada (Label centered with updated Text property)

Fig. 2.37 | GUI despus que el formulario y etiqueta han sido personalizados .
2009 Pearson Education, Inc. All rights reserved.

45

2.6 Continuacin: Uso de la programacin visual para crear un programa simple. Seleccione la propiedad de letra Font property, lo que provoca una ellipsis button aparecer junto al valor.

Botn de puntos de suspensivos ( Ellipsis button)

Fig. 2.38 | Ventana de propiedades, muestra las propiedades de la etiqueta .

2009 Pearson Education, Inc. All rights reserved.

46

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Cuando se hace clic en el botn de puntos suspensivos, el cuadro de dilogo de letra se despliega, Font dialog.
Bajo Font, seleccione Segoe UI.
Bajo Size, seleccione 24 puntos y pulse OK.

Ejemplo de letra. (Font sample)

Fig. 2.39 | Cuadro de dilogo de letra para la seleccin de letra, estilos y tamaos.
2009 Pearson Education, Inc. All rights reserved.

47

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Seleccione la propiedad de alineacin de texto TextAlign . Establezca la propiedad de TextAlign a MiddleCenter para que el texto aparezca centrado en la etiqueta Label.

Opcin de alineacin de texto. (Text alignment options)

Opcin de alineacin centrado (Middle-center alignment option)

Fig. 2.40 | Centralizando el texto de la etiqueta.

2009 Pearson Education, Inc. All rights reserved.

48

2.6 Continuacin: Uso de la programacin visual para crear un programa simple. El control PictureBox muestra imgenes. Busque el PictureBox en el cuadro de herramientas y haga doble clic en este para agregarlo al formulario.
Etiqueta actualizada. ( Updated Label)

Caja de imagen (PictureBox)

Fig. 2.41 | Insertar y alinear un PictureBox.

2009 Pearson Education, Inc. All rights reserved.

49

2.6 Continuacin: Uso de la programacin visual para crear un programa simple. Busque la propiedad Image Image property.

No se ha asignado ninguna imagen, por lo que muestra el valor de la propiedad Image (none).

Propiedad del valor de la imagen (Image property value ) (no image selected)

Fig. 2.42 | Propiedad de la imagen de la PictureBox.

2009 Pearson Education, Inc. All rights reserved.

50

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Haga clic en el botn de puntos suspensivos para mostrar el cuadro de dilogo de Select Resource.

Fig. 2.43 | Cuadro de dilogo de Select Resource para seleccionar una imagen para el PictureBox.
2009 Pearson Education, Inc. All rights reserved.

51

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Haga clic en el botn de Import.

Busque bug.png, seleccinelo y haga clic en OK. El recurso denominado bug representa bug.png.

Nombre del archivo de la imagen (Image file name)

Fig. 2.44 | El cuadro de dilogo de Select Resource muestra una vista previa de la imagen seleccionada
2009 Pearson Education, Inc. All rights reserved.

52

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Haga clic en OK para colocar la imagen en su programa. Formatos de imagen admitidos son PNG, GIF, JPEG y BMP. Para cambiar el tamao de la imagen del PictureBox, cambie la propiedad del SizeMode a StretchImage

Propiedad de ta~ma. (SizeMode property)

Conjunto de propiedad SizeMode a StretchImage (SizeMode property set to StretchImage)

Fig. 2.45 | Escala de una imagen con el tamao del PictureBox.

2009 Pearson Education, Inc. All rights reserved.

53

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Cambiar el tamao de la PictureBox, hacindola ms grande. Seleccione File > Save All para guardar todos los datos.

Fig. 2.46 | PictureBox, mostrando una imagen.

2009 Pearson Education, Inc. All rights reserved.

54

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

Seleccione Debug > Start Debugging para ejecutar el programa.
Men de Debug.

Fig. 2.47 | Depurar una accin, Debugging.

2009 Pearson Education, Inc. All rights reserved.

55

2.6 Continuacin: Uso de la programacin visual para crear un programa simple.

En run mode, el programa se est ejecutando, y puede interactuar con slo unas pocas de las caractersticas IDE.
IDE muestra texto que significa que se est ejecutando el programa en ejecucin . (IDE displays text Running which signifies that the program is executing)

Forma (Form)

Ejecucin del programa. (Running program)

Fig. 2.48 | IDE en modo de ejecucin, con el programa en ejecucin en primer plano .
2009 Pearson Education, Inc. All rights reserved.

56

Referencias
http://es.wikipedia.org/wiki/Visual_Basic http://msdn.microsoft.com/eses/library/bb384476(VS.90).aspx

2009 Pearson Education, Inc. All rights reserved.