Guia Rápida de VB 6 - Diseño
Guia Rápida de VB 6 - Diseño
Guia Rápida de VB 6 - Diseño
0 MODULO II
Imagen#8
Imagen#9
En la figura#10 se identifican cada unas de las áreas que contiene la interfaz de programación que
serán usadas en el desarrollo de nuestros programas.
Ventana de
propiedades
Cuadro de
herramientas
Para hacer el diseño de la interfaz de nuestro programa usaremos la ventana del formulario. Como
nos damos cuenta esta ventana se presenta muy pequeña y por lo tanto hay que colocarla más
grande para que sea mucho mejor trabajar en ella. Para hacer dicho procedimiento se coloca el
puntero del mouse en la esquina inferior izquierda del formulario y se hace click y arrastra y luego
suelta para así obtener un tamaño mayor de la ventana. Ver imagen#11.
Imagen#12
Ahora vamos a proceder a colocar nuestro primer botón en nuestro programa. Seleccionamos del
cuadro de herramienta que se encuentra del lado derecho el commandButton y luego situamos el
puntero del ratón sobre el formulario.
Cuando el puntero este sobre el formulario se convertirá en una cruz. Ubique el puntero en una
ubicación del formulario donde quiera insertar el botón a crear. Presione el botón izquierdo del
ratón y manténgalo pulsado mientras lo arrastra hacia la derecha y hacia abajo. Suelte el botón
izquierdo del ratón cuando vea el objeto botón de forma rectangular en la pantalla del tamaño
deseado. Ver las imágenes 13, 14 y 15 respectivamente.
Imagen#13
Imagen#14
Imagen#15
Repita el procedimiento anterior para crear un segundo botón. El formulario de nuestro programa
quedara algo parecido a lo mostrado en la imagen#16
Imagen#16
Ya hemos creado dos botones a nuestro diseño del programa. Ahora vamos a crear una etiqueta
donde se mostraran un número. Una etiqueta es un elemento especial de la interfaz de usuario
diseñada para mostrar texto, números o símbolos cuando se ejecuta un programa.
Para añadir una etiqueta a nuestro programa hacemos click en la opción “Label” que se encuentra
en el cuadro de herramienta y se identifica con la letra A y luego sitúe el puntero del ratón sobre
el formulario donde quiera usted que aparezca el número. Pulse y mantenga pulsado el botón
izquierdo del ratón y arrastre hacia la derecha y hacia abajo hasta obtener un cuadrado de tamaño
deseado para mostrar el mensaje (en nuestro programa será un número). Ver la imagen 17 y 18
Imagen#17
Imagen#18
Repetir el procedimiento anterior para crear 3 etiquetas más. La interfaz creada hasta el momento
debe ser aproximadamente como la de la imagen#19
Imagen#19
Ahora vamos añadir una imagen a nuestro programa que aparecera cuando ocurra cierto evento.
Pulse el control image contenido en el cuadro de herramienta que se encuentra simbolizado con
la imagen#20
Imagen#21
Ya definimos como estarán distribuidos los controles de nuestro programa sobre el formulario
ahora debemos definir sus propiedades. Para esto hacemos click sobre el elemento contenido en
el programa.
Comenzaremos a definir las propiedades del botón de orden Command1 (usted puede comenzar
por cualquiera yo iniciare por el primer botón que cree). Lo primero que hago es hacer click sobre
el botón Command1 y luego realizo un doble click sobre la barra de titulo de la ventana
propiedades (es opcional esté último paso), esto permitirá que la barra de propiedades se mueva
de su lugar. Ver la imagen#22
Imagen#22
En la barra de propiedades buscamos la opción Caption y hacemos doble click sobre ella para que
se seleccione la propiedad que está en la columna derecha que dice Command1 luego escribimos
la palabra JUGAR y pulsamos la tecla INTRO. Ver las imágenes 23, 24 y 25.
Imagen#23
Imagen#24
Imagen#25
Observe como en el procedimiento anterior se cambio la palabra que identificaba el botón. Del
mismo modo podemos hacer con el segundo botón y colocarle la palabra FIN. Podemos
seleccionar también los otros elementos de nuestro formulario haciendo click en el cuadro de lista
desplegable que se encuentra en la parte superior de la ventana de Propiedades.
Aparecerá una lista que enumera los objetos de la interfaz contenida en nuestro programa, como
se puede ver en la imagen#26
Imagen#26
Imagen#27
Imagen#28
Imagen#29
Imagen#30
Una segunda propiedad a cambiar en la etiqueta será la BorderStyle. Pulsemos sobre esta
propiedad y luego sobre la flecha del cuadro de lista desplegable que aparece a su derecha. Aquí
seleccione el valor 1-Fioxed Single. Esté valor agrega un borde fino alrededor de la etiqueta. Ver la
imagen#31
Imagen#31
La tercera propiedad que cambiaremos en la etiqueta será el tipo de fuente de letras que
queremos que tengan nuestro mensaje. Seleccionemos la propiedad Font y demos doble click en
ella para que nos aparezca la ventana de fuente. Ver imagen 32 y 33.
Imagen#32
Imagen#33
En la imagen 33 se observa que se selecciónó la fuente Time New Roman con un estilo de fuente
Negrita y tamaño 24. Usted pudo elegir cualquiera, pero esta se ven bien. Bueno estos cambios
sobre las propiedades de la primera etiqueta también los hice sobre las etiquetas Label2 y Label3.
El resultado de estos procedimientos se puede ver en la imagen#34
Imagen#34
Un último cambio en las etiquetas es quitar la palabra Label1, Label2 y Label3. Para esto
seleccionamos la propiedad Caption en cada una de las etiquetas y borramos las palabras
correspondientes. Ver imagen 35 y 36
Imagen#35
Imagen#36
Ahora nos toca cambiar las propiedades de la etiqueta Label4. Cambiaremos el valor de la
propiedad Caption por un mensaje que va hacer como el título de nuestro programa. Coloque la
frase “JUEGO DE LA SUERTE” ustedes pueden colocar cualquier otro. Ver la imagen#37.
Imagen#37
Cambiaremos la propiedad Font y elegiremos Arial en Negrita tamaño 16. Ver imagen 38 y 39.
Imagen#38
Imagen#39
También vamos cambiar el color de las letras. Para hacer esto seleccionamos la propiedad
ForeColor con un doble click. Aparecerá un cuadro de lista de contenido con dos pestañas Paleta y
Sistema.
La pestaña Sistema muestra los colores que se están usando en ese momento para representar los
elementos de la interfaz de su sistema. La pestaña Paleta mostrará todos los colores disponibles
en su sistema.
Haga click en la pestaña Paleta y seleccione un color, en mi caso escogí el amarillo oscuro. Ver
imagen 40, 41 y 42.
Imagen#40
Imagen#41
Imagen#42
Pulsar en la flecha de la lista desplegable para ocultar el cuadro de colores. Ver resultado en la
imagen#43
Imagen#43
Llego el momento por configurar las propiedades del elemento Image. Seleccionemos del cuadro
de lista desplegable de la ventana propiedades el objeto Image1. Busquemos la propiedad Stretch
y pulse sobre la flecha situada al lado derecho para elegir el valor de True. Esto permite que la
imagen se adapte al tamaño del cuadro de imagen creado en el formulario. Se recomienda ajustar
primero esta propiedad que la de Picture. Ver imagen#44
Imagen#44
La otra propiedad a modificar en el objeto del cuadro imagen es la de Picture. Haga doble click en
está propiedad y aparecerá una ventana llamada Cargar imagen. Está ventana le permitirá buscar
una imagen en su computadora la selecciona y le da al botón abrir. Ver las imágenes 45, 46 y 47 de
este procedimiento.
Imagen#45
Imagen#46
Imagen#47
La propiedad Visible la seleccionamos y le damos el valor de False, para que la imagen no aparezca
cuando inicie el programa. Ver imagen 48 y 49.
Imagen#48
Imagen#49
En hora buena ya terminamos con el diseño de nuestra interfaz si queremos ver como se verá
nuestro programa. Le damos click al botón de la barra de herramienta Iniciar que se representa
por una flecha o también simplemente presionamos la tecla F5 y veremos la interfaz de nuestro
programa. Ver la imagen#50 el resultado de lo hasta ahora elaborado.
Imagen#50