TEMA 11: INTRODUCCIÓN A MICROSOFT VISUAL STUDIO

Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
TEMA 11: INTRODUCCIÓN A MICROSOFT VISUAL STUDIO
Para comenzar a estudiar cualquier programa, lo mejor es empezar por el análisis de la
interfaz; que es la pantalla con la cual nos encontramos y con la que nos tendremos que familiarizar
para poder trabajar cómoda y rápidamente. Con más razón si se trata de VB (Visual Basic), ya que
no es una aplicación, sino un Lenguaje de Programación generador de Aplicaciones.
Al comenzar VB le presenta una ventana como ésta donde se distinguen tres pestañas y
varias opciones:
Las solapas dicen:
1) Nuevo, que es la opción que
utilizaremos y por lo tanto debemos
pulsar el botón abrir. –
2) Existente, sirve para abrir un
proyecto que ya tenemos guardado
con anterioridad. –
3) Reciente, esta opción es parecida
a la anterior pero nos muestra los
últimos
proyectos con los que
hemos estado trabajando. –
Por lo tanto hacemos clic en el botón
Nuevo, las otras opciones las
explicaremos más adelante.
- Fig. 1 Ahora sí nos encontramos con la Interfaz:
Esta pantalla presenta como todas las
aplicaciones de Windows la Barra de
título, la Barra de menús, que se
describirá con posterioridad, pero
damos por supuesto que Ud. ya se
encuentra
familiarizado
con
las
aplicaciones Windows como ser Word
(Procesador de textos), el Excel
(Planilla de cálculos), etc.
1
3
6
4
Por lo tanto, describiremos en principio
las otras partes que hemos procedido a
numerar en color rojo para identificarlas
mejor.
2
5
- Fig. 2 El nro. 1 es la Barra de Herramientas Estándar, el nro. 2 es la Caja de Herramientas, el
nro. 3 es el Explorador de Proyectos, el nro. 4 es la Ventana de Propiedades, el nro. 5 la
Ventana de posición del Formulario y el nro. 6 es la Ventana de diseño de Formularios, en
donde diseñaremos las Aplicaciones. –
Por lo tanto daremos una breve descripción de cada uno de ellos, comenzando por
diferenciar la Barra de Herramientas de la Caja de Herramientas.
1
La Barra de Herramientas Estándar:
Agregar Proyecto Estándar EXE
Lista despegable del Asistente de Proyectos
Pág. 1
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
Agregar Form
Lista desplegable agregar módulo
Editor de menús
Abrir Proyecto
Guardar Proyecto
Cortar
Copiar
Pegar
Buscar
- Fig. 3 Deshacer
Comenzar
Interrumpir
Finalizar
Rehacer
Ventana del Explorador de Proyectos
Ventana de Propiedades
Ventana de Diseño de Formularios
Examinador de Objetos
Caja de Herramientas
2
La Caja de Herramientas:
Con estas herramientas uno crea controles para agregar funcionalidad a sus programas, son
muy fáciles de usar. Simplemente se hace un doble clic sobre la herramienta seleccionada y luego,
sobre el formulario, al cambiar el puntero de Mouse (), hacemos clic, y lo arrastramos, dibujándolo
automáticamente sobre el formulario. Después podrá cambiarlos al tamaño que desee. Se lo
iremos explicando a medida que vaya realizando las distintas aplicaciones que le proponemos a lo
largo del presente trabajo.
Los nombres de cada herramienta los puede leer dejando el puntero del Mouse sobre la
herramienta, y en ese momento aparecerá un mensaje.
Le indicamos los nombres de cada una de las herramientas que aparecen por defecto:
Cerrar la Caja
(1) Puntero
(2) PictureBox
(3) Label
(4) TextBox
(5) Frame
(6) CommandButton
(7) CheckBox
(8) OptionButton
(9) ComboBox
(10) ListBox
(11) HScrollBar
(12) VScrollBar
(13) Timer
(14) DriveListBox
(15) DirListBox
(16) FileListBox
(17) Shape
(18) Line
(19) Image
(20)Data
(21) OLE
- Fig. 4 3
El Explorador de Proyectos:
(a) (b)
Pág. 2
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
El explorador de proyectos permite observar cada uno
de los formularios que hayamos creado, lo mismo que los
módulos que podemos agregarle al mismo.
En el presente ejemplo se puede observar
que nos encontramos en el Proyecto número 1 y que cuenta
con un solo Formulario. En su parte superior presenta dos
botones de suma importancia, el primero, al pulsarlo nos
muestra la Ventana de Código (a) y el segundo nos muestra
la Ventana de Diseño del Formulario (b). –
- Fig. 5 4
La Ventana de Propiedades:
Esta ventana es una de las más importantes, se
compone de la Ventana de Controles:
A través de la cual uno puede elegir el control sobre el
que se trabajará u observar si en realidad estamos operando
sobre el control deseado.
Luego se pueden observar dos solapas; Alfabética y
Por Categorías: Esto en realidad es una cuestión de
preferencias, en la forma de manejarnos para seleccionar las
distintas modificaciones a realizar sobre las Propiedades
También se pueden modificar sobre la parte derecha de
la ventana los distintos Valores
Por último, en la parte inferior de la Ventana se puede
observar una ayuda en castellano (para los que tienen VB 6.0 en
español) sobre la propiedad seleccionada, en este caso nos
muestra el Caption (Título). –
- Fig. 6 –
5
Ventana de Posición del Formulario:
Esta ventana nos muestra la posición exacta donde
aparecerá nuestro formulario, dentro de la pantalla. Si nos
dirigimos hacia él con el Mouse, automáticamente este se
modifica a “cuatro flechas”
y podemos arrastrar el formulario
al sector exacto de la pantalla en donde nos interesa que
aparezca. Como se muestra en el siguiente ejemplo:
- Fig. 7 -
Pág. 3
Microsoft Visual Studio 6.0
6
Prof. José Moscoso/ Prof. Alexis Barreto
Ventana de Diseño del Formulario:
Sobre esta ventana es donde trabajaremos
permanentemente para crear la interfaz de nuestro
programa. El Formulario es un objeto contenedor de otros
objetos. Sobre él y a través de la caja de Herramientas,
colocaremos los distintos controles, que se llaman
Objetos.
Al hacer doble clic sobre el formulario se pasa a
otra Ventana, que se denomina Ventana de Código, en la
cual se escriben las sentencias necesarias (Código), para
que funcione nuestra aplicación. –
- Fig. 8 -
La Ventana de Código:
(a)
Al hacer doble clic sobre el Formulario, o sobre
cualquier Objeto que esté contenido dentro del
Formulario, entramos automáticamente en esta Ventana.
La misma presenta en la parte superior dos Cajas
Desplegables:
(a) Nos muestra todos los objetos que tenemos creados
dentro de nuestro proyecto.
(b) Muestra todos los eventos posibles para cada uno de
los objetos.
Por último podemos observar donde escribiremos nuestras
sentencias de código (c). –
(b)
(c)
- Fig. 9 -
Comencemos a realizar nuestro primer diseño:
Iniciamos la aplicación de VB, al hacerlo aparecerá la Ventana con las tres solapas (Fig.1),
hacemos clic en el botón Nuevo, aparece la Interfaz explicada en la primera página (Fig.2) y
comenzamos a trabajar:
1) Nos dirigimos con el puntero de mouse a la Caja de Herramientas (Fig.4), nos ubicamos
sobre la herramienta (3) Label
“hundida”
, hacemos un clic sobre ella para elegirla y quedará como
con un gris más claro.
2) En este momento podemos elegir entre dos métodos para crear el objeto:
a) Hacemos doble clic sobre la misma, y automáticamente aparecerá la misma en
el centro del Formulario.
b) Dirigimos el puntero del mouse hacia el Formulario (sin arrastrarlo es decir, sin
mantener el botón izquierdo presionado), veremos que el puntero al estar sobre
el Formulario cambiara a una cruz, nos dirigimos con la misma, al sector donde
deseamos ubicar la label y en ese momento hacemos clic sobre el formulario y
ahora sí arrastraremos el puntero manteniendo el botón izquierdo oprimido e
iremos viendo una estela de tipo rectangular que se va agrandando a medida
que arrastramos el puntero. Hasta soltar el botón izquierdo, y en ese momento
queda definida la label, como se ve en siguiente ejemplo:
Pág. 4
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
Con la Caja de Herramientas, hemos creado nuestro
primer objeto, que se llama Label1.
Podemos observar que en la misma aparecen unos
cuadrados azules, que se denominan nodos, estos sirven
para redimensionar el objeto, al acercar el puntero del
mouse sobre un nodo, el puntero se modifica a una doble
flecha y en ese momento “arrastramos”, (manteniendo el
botón izquierdo presionado).
Pruebe estirar la label, para alargarla hacia la derecha e
izquierda del formulario, para que quede de la siguiente
forma:
- Fig. 10 -
Puede observar que además de estirar la label, la hemos
ubicado prácticamente debajo de la barra de título del
formulario, esto se realiza, ubicando el puntero del mouse
en el centro del objeto y arrastrando hacia la posición
deseada.
- Fig. 11 -
HERRAMIENTAS, OBJETOS, PROPIEDADES Y VALORES:
Con la herramienta seleccionada dentro de la Caja de Herramientas, hemos creado un Objeto,
en este caso el objeto se llama Label1, y posee una serie de propiedades y esas propiedades
tienen valores, esto quedará más claro con un ejemplo:
“Con las herramientas adecuadas hemos creado un automóvil, este auto es un objeto, este
objeto tiene una serie de propiedades como ser la marca del mismo, la cantidad de puertas,
su tamaño, su carburador, su color, etc. pero además también tiene una serie de valores,
esto significa, que el carburador tiene un código para determinar el calibre del paso de la
nafta o en forma mucho más sencilla que el color del mismo está determinado por otro código
especial que determina exactamente su tipo”.
Por lo tanto y para continuar con nuestra aplicación nos dirigimos a la Ventana de
Propiedades (Fig. 2 punto 4).
Podemos ver que la misma se encuentra dividida como explicamos
(a)
anteriormente; observe que al crear la label1, automáticamente,
aparece su nombre en la Ventana de Controles (a), si analiza la
figura 2, lo que aparecía en forma automática era el nombre de
Form1, que era el único objeto que existía.
Dentro del sector izquierdo se encuentran las propiedades,
una de ellas dice Caption (b), que significa Título y está resaltado en
azul todo ese sector del renglón. Hacemos Doble Clic sobre el color
(b)
azul de Caption y automáticamente nos habilita el sector derecho (c),
(c)
al ponerse de ese mismo color; escribimos directamente: Bienvenidos
alumnos de Visual Basic.
Si observa el Formulario, vera que en lugar de Label1
apareció lo que Ud. escribió.
SEGUIMOS TRABAJANDO CON PROPIEDADES Y VALORES:
Pág. 5
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
Utilizando la barra de desplazamiento y haciendo doble clic sobre las propiedades que
mencionamos a continuación, modifique los valores de acuerdo a la siguiente lista:
PROPIEDAD
VALOR
1) Alignment
2) BackColor
3) BorderStyle
2 – Center
Blanco
1 – Fixed Single
Fuente: Arial
Estilo: Negrita
Tamaño: 14
Rojo
False
4) Font
5) ForeColor
6) Visible
1) Alignment: Nos dirigimos con el puntero del mouse, hacia la propiedad Alignment, que significa
alineación, hacemos clic sobre ella, el fondo del renglón se transforma en azul y aparece la
flecha de opciones, como muestra el
siguiente ejemplo:
La opción por defecto como puede observar es 0 – Left Justify (Justificado a la izquierda), pero
como deseamos alinearlo al centro debemos hacer clic sobre la flecha que mostrará un menú
desplegable:
Hacemos clic en Center y quedará seleccionado. De esta
manera hay que proceder con la mayoría de las otras
opciones, para modificar los valores de las distintas
propiedades. –
2) BackColor: Significa color de fondo, y de la misma manera, como lo explicamos en el punto 1),
nos dirigimos con el puntero del mouse a la propiedad BackColor; en este caso, al hacer click
sobre la flecha nos mostrará un cuadro de opciones que muestra dos solapas.
a) La solapa Sistema, sirve para modificar los colores
predeterminados por el Sistema Windows que
posee el usuario. Por una cuestión de respeto de
gustos es aconsejable no intentar ningún cambio en
la misma.
b) La solapa Paleta, es la que deberemos modificar,
por lo tanto, se hace clic sobre la misma y
aparecerá la paleta de colores; elegimos en este
caso, el color blanco haciendo clic sobre el mismo, y
nuestra label1 se verá como en el ejemplo:
Título de la label1
centrado
y color de fondo blanco
Pág. 6
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
3) BorderStyle: Significa estilo de borde, como se puede ver el label1 ha quedado con el borde
totalmente plano, si queremos darle profundidad, como ya sabe hacemos clic sobre borderstyle,
luego sobre la flecha de opción y pulsamos sobre el valor 1 – Fixed Single:
4) Font: Significa Fuente, la buscamos a través de la barra de desplazamiento, en las propiedades,
pulsamos sobre ella y veremos que en vez de la flecha de opciones nos aparecen tres puntos, lo
que siempre indica: distintas opciones, pulsamos sobre ella y veremos:
Con las barras de desplazamiento elegimos en
Fuente: Arial (Hacemos clic sobre la misma).
En Estilo: Negrita y en Tamaño: 14. Luego hacemos clic sobre el botón aceptar.
5) ForeColor: Sirve para cambiar el color de la letra, en nuestro caso la pondremos en color rojo.
Para ello buscamos con la barra de desplazamiento esta propiedad y aparecerá como en el caso de
BackColor las mismas pantallas, elegimos el color haciendo clic.
6) Visible: Elegimos esta propiedad y el valor lo modificamos por False.-
Posibles errores:
1) Es muy probable que la label1 haya quedado gris y el formulario de color blanco.2) Que la Bienvenida haya quedado colocada en la barra de título del formulario. 3) Que una parte del mensaje no se vea.El primero y segundo caso se produjeron porque en algún momento, sin querer se hizo un clic sobre
el Formulario, y luego modificó los valores de las propiedades del mismo, pero no del label. –
Pág. 7
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
Para evitar que esto se produzca, tome por costumbre antes de modificar el valor de una propiedad,
tiene que observar en la Ventana de Propiedades cual es el nombre del control seleccionado; otra
forma es mirar sobre el formulario para ver, donde están colocados los nodos. Mal
Bien
El tercer caso es el más fácil de corregir, lo único que debe hacer es colocar el puntero del mouse
sobre el nodo inferior de la label y estirarlo, arrastrando hacia abajo, hasta ver todo el título.
Si cometió el error 1) ó 2) le sugerimos que reinicie, el ejercicio, para ello diríjase con el puntero del
mouse hacia la Barra de Menús haga clic sobre Archivo, luego haga clic sobre Nuevo Proyecto, le
aparecerá una ventana como la siguiente, la cual le dice si quiere guardar los Cambios, le indica
que no y abre un nuevo proyecto.-
Si no tuvo problemas, realmente lo felicitamos y puede continuar con la segunda parte de su
proyecto, que consistirá en agregar dos botones de opción.
Pág. 8
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
1) Para ello seleccione con un clic sobre el botón (nro. 6) CommandButton, de la Caja de
Herramientas, luego haciendo un doble clic sobre el mismo botón seleccionado, automáticamente le
aparecerá en el centro de su formulario y entonces lo arrastra hasta la posición inferior derecha,
como muestra el ejemplo:
2) En la ventana de propiedades, hace clic sobre Caption (título) y en el sector de Valores
escribe Salir, observando la ventana de Propiedades, en la cual debe aparecer el nombre del objeto
sobre el que estamos trabajando, en este caso Command1.
Nos dirigimos nuevamente con el cursor hacia el botón que hemos creado en el formulario
y hacemos doble clic sobre el mismo para pasar a la ventana de código y escribimos la sentencia
End, esta instrucción sirve para cerrar nuestro proyecto.
Ventana de
propiedades
Valor: Salir
En la figura de la página anterior sobre la ventana del explorador de proyectos dibujamos un círculo
rojo sobre dos iconos de suma importancia:
1) Ventana de
Código
2) Ventana del
Formulario
Al hacer clic sobre el icono (1) que parece un papel escrito, nos muestra la ventana de
código, en cambio al hacer clic sobre el otro icono (2) nos muestra el formulario, sobre el cual
estamos trabajando.
Por lo tanto hacemos clic sobre el icono del formulario para verlo nuevamente y procedemos
a ejecutar nuestro proyecto, para ello hacemos clic sobre el icono de comenzar de la barra de
herramientas, tal cual se muestra en el ejemplo:
Pág. 9
Microsoft Visual Studio 6.0
Prof. José Moscoso/ Prof. Alexis Barreto
Por favor no se aterrorice, ya que lo único que vera es el Formulario con el botón de Salir, la
Label1 con el mensaje de Bienvenida, no se la puede ver, debido a que en la propiedad Visible de la
Label1, el valor que se le dimos fue: False.
Para volver a nuestro proyecto, hagamos un clic sobre el botón Salir, en caso de que no
funcione haga clic en botón de la barra de herramientas de finalizar y verifique el código si está bien:
Viendo nuevamente la ventana del Formulario, agregaremos un nuevo CommandButton,
como lo describimos anteriormente y lo ubicamos en el sector inferior izquierdo.
Sobre la propiedad Caption hacemos clic y escribimos: Comenzar.
Hacemos doble clic sobre el botón de Comenzar y pasamos a la ventana de Código, en ella
escribimos:
Label1.Visible = True
Inicie el Programa, haga clic sobre el botón de Comenzar y mágicamente aparecerá el
mensaje de Bienvenida; haga clic sobre el botón Salir.
Si está todo bien, en la barra de herramientas haga clic en el icono de Guardar y grabe su
programa, con el nombre de Bienvenida.
Atención: Al salvar su proyecto VB, primero graba el nombre del Proyecto y luego le pide el
nombre para el Formulario (ambos nombres pueden ser iguales). –
Pág. 10