Professional Documents
Culture Documents
Temas
o Conceptos básicos de programación.
o La primera lección, la primera aplicación.
o Crear el interfaz.
o Label. Una etiqueta de texto.
o Los botones.
o Los eventos.
o La gran prueba
¿Para qué?
¿Cuándo?
¿Con qué?, y
¿Cómo?
El ¿Con qué? define los elementos sobre los que nuestra aplicación
realizará su cometido.(Coches sucios)
492
357
816
Figura 1.1. Cuadrado Mágico de 3x3
Crear el Interfaz.
Para ello, primero tendremos que familiarizarnos con unos conceptos
básicos. ¿Que es una ventana?.Una ventana es simplemente una región
rectangular con sus propios límites. Dentro de VB se les conoce como
formularios de manera que empecemos ya. Inicia VB y en el cuadro de
diálogo Nuevo proyecto, en la pestaña Nuevo, selecciona el icono "EXE
estándar" y pulsa Abrir. Seguramente tu IDE se mostrará más o
menos así:
Figura 1.2 Entorno Integrado de Desarrollo.
Caption
(Nombre)
StartUpPosition
Figura 1.4
Bueno, ¿Quieres probar lo que hemos hecho hasta ahora? Pues simplemente pulsa
sobre la herramienta Iniciar o pulsa F5, o elige menú Ejecutar-
>Iniciar. Debes obtener una ventana como la de la figura 1.4.
Si no es así, algo has hecho mal, así que repasa los pasos que hemos
seguido hasta ahora e inténtalo de nuevo.
Caption
Font
Figura 1.5
Ahora ya tenemos el texto en una sola línea, pero sigue sin ser perfecto.
Nos gustaría que estuviera centrado en el formulario. Para esto tenemos
la propiedad Alignment que nos permite 3 opciones:
1. 0 - Left Justify
2. 1 - Right Justify
3. 2 - Center
AutoSize.
Figura 1.6
Los botones.
Como definimos al principio, nuestro formulario debe tener dos botones,
uno con el texto SI y otro con el texto NO. Para añadirlos selecciona la
herramienta CommandButton del cuadro de herramientas. Igual que
hicimos para la etiqueta, simplemente coloca el cursor donde quieres
que aparezca el botón y arrastra hasta tener un tamaño aceptable. No
te preocupes de momento por su aspecto, después los arreglaremos.
Repite la operación para tener así dos botones en el formulario, uno al
lado del otro. Ahora selecciona el primero, haciendo clic sobre él, y
observa como cambia la ventana de propiedades. Vamos a modificar
alguna de la 33 que tiene este control.
Caption
(Nombre)
Ahora modifica el nombre para que sea más fácil identificarlo, escribe
btnSi en la columna valor de la propiedad (Nombre), como ves,
seguimos con las convenciones, utilizo las letras btn para identificar el
tipo de objeto, en este caso un botón, y el resto, es el nombre Si que
creo que es bastante explícito.
ToolTipText
Height
Busca esta propiedad y asígnale el valor 255. Así definimos la altura del
botón
Left
Top
Esta propiedad contiene la distancia del borde superior del formulario al
borde superior del botón. Establécela a 2760.
Width
Nombre: btnNo
Figura 1.7
Caption: No
Height: 255
Left: 2760
ToolTipText: Pulsa aquí si no quieres ver un Cuadrado Mágico.
Top: 2760
Width: 855
(Nombre): lblElementoCM
Alignment: 2 - Center
Appearance: 0 -Flat
BorderStyle: 1 - Fixed Single
Caption: 0
Font tamaño: 12
Height: 330
Left: 1800
Top: 1200
Visible: False
Width: 315
El resto de las propiedades déjalas con sus valores por defecto. Este
objeto representa una de las celdas del cuadrado mágico, pero
necesitamos 8 más prácticamente idénticas pues vamos a mostrar un
Cuadrado Mágico de 3x3, o sea de 9 celdas. Para ello vamos a utilizar
otra apreciable característica del diseñador de formularios de VB.
Pulsa sobre la etiqueta que acabas de crear con el botón derecho del
ratón. Aparece un menú contextual y selecciona Copiar. También
puedes usar el menú Edición->Copiar. Después pulsa con el botón
derecho del ratón, pero esta vez sobre cualquier zona del formulario que
no tenga ningún objeto, y en el menú contextual selecciona Pegar, o
bien, menú Edición->Pegar. Aparecerá un cuadro de aviso con el
siguiente mensaje: "Ya existe un control llamado 'lblElementoCM'.
¿Desea crear una matriz de controles?" y tres botones: "Si, No y
Ayuda". De momento pulsa , en la siguiente lección entenderás lo útil
que resulta crear una matriz de controle, que no es otra cosa que los
controles que pertenecen a la matriz tienen el mismo nombre y se
identifican por un índice. En este caso tendremos dos etiquetas con los
nombres lblElementoCM(0) y lblElementoCM(1) respectivamente. Coloca
esta nueva etiqueta al lado derecho de la primera. Repite la operiación
de pegar y ve colicando las etiquetas hasta formar una matriz de 3x3. Si
Figura 1.8
todo va bién, tu formulario debe parecerse al de la figura 1.8. Es muy
importante que hayas seguido el orden que te especifico a la hora de
acomodar las 9 celdas del cuadrado, es decir, llenar primero la primera
fila, después, y empezando por la izquierda, llenar la segunda fila y, por
último, la tercera fila de la misma forma. Esto es importante porque
ahora te voy a listar los valores que debe tener cada etiqueta en su
propiedad Caption y para ello te doy el nombre con su índice y el valor,
y si los has colocado de forma diferente, tu cuadrado no sería mágico,
ya que no se cumpliría la condición de que la suma de las filas, las
columnas y las diagonales principales sea la misma. Así que asigna los
siguientes valores como se supone que ya sabes hacerlo:
lblElementoCM(0).Caption = 4
lblElementoCM(1).Caption = 9
lblElementoCM(2).Caption = 2
lblElementoCM(3).Caption = 3
lblElementoCM(4).Caption = 5
lblElementoCM(5).Caption = 7
lblElementoCM(6).Caption = 8
lblElementoCM(7).Caption = 1
lblElementoCM(8).Caption = 6
Ahora prueba la aplicación como hicimos antes. Verás que, si lo has
hecho todo correctamente, aparece el formulario, con los mensajes, los
botones y nada más. El Cuadrado Mágico no se ve. Pero además
observarás que si pulsas cualquiera de los botones , o , no pasa nada.
No te preocupes, esto es completamente normal, ya que no hemos
definido qué tiene que hacer nuestra aplicación cuando el usuario pulse
uno de los botones, y esto es lo que vamos a aprender seguidamente.
Los eventos.
Un evento es una acción reconocida por un objeto, como hacer clic con
el ratón o presionar una tecla, para la que se puede escribir código de
respuesta. Los eventos pueden producirse como resultado de una acción
del usuario o del código, o pueden estar desencadenados por el sistema.
En nuestro caso, los objetos son los botones y la acción que deben
reconocer es ser pulsados. Es decir, se debe generar un evento cuando
el usuario pulse y otro evento cuando el usuario pulse .
Poco a poco iremos viendo que cada objeto puede controlar distintos
eventos, y que definir qué es lo que debe de hacer nuestra aplicación
cuando se lance dicho evento es lo que nosotros definiremos en el
código. Para ello tenemos que entrar en la ventana del Editor de código.
Hay varias formas de entrar en el Editor de código:
Debajo del título hay dos cuadros de lista, el primero lista los objetos
presentes en nuestro formulario, de momento debemos seleccionar
btnSi de la lista (que es el botón del Si). Una vez seleccionado este
objeto, en el cuadro de lista de la derecha aparecen listados los eventos
o Procedimientos que puede lanzar dicho objeto. El que nos interesa de
momento es Click (que corresponde a hacer clic con el botón izquierdo
del ratón sibre el objeto. Si tienes todo seleccionado tal y como te he
indicado, en la zona de edición del editor, el cursor estará justo debajo
de una línea que reza lo siguiente:
Objeto.Propiedad = Valor
Label2.Visible = False
End sub
IntelliSense
Pulsar la tecla Tab o hacer doble clic, lo cual copia la propiedad y deja el cursor
justo después de ella.
Pulsar la tecla Espacio lo cual copia la propiedad y deja el cursor un espacio
después de ella.
Pulsar ENTER lo cual copia la propiedad y deja el cursor en la siguiente línea.
Del mismo modo, una vez pulses el sigo "=" aparece un cuadro de lista
con los valores posibles para dicha propiedad, en este caso False o True.
Con cualquiera de los métodos antes descritos selecciona False y ya
está.
frmPrincipal.Label2.Visible = False
End sub
Teclea las líneas de código para los botones "Si" y "No". Para la matriz
de números es un poco diferente así que lo haremos más adelante. El
código debe ser como el siguiente:
Label2.Visible = False
btnSi.Visible = False
btnNo.Visible = Flase
End sub
o bien:
frmPrincipal.Label2.Visible = False
frmPrincipal.btnSi.Visible = False
frmPrincipal.btnNo.Visible = Flase
End sub
Para el caso de la matriz, y ahora verás que útil nos va a resultas haber
creado una matriz con estos objetos en lugar de objetos independientes.
Como puedes ver en la ventana de propiedades, si seleccionas
cualquiera de los cuadros de texto, se llama lblElementoCM(n), donde n
representa un índice dentro de la matriz. En nuestro caso n va desde 0,
que es el primer elemento, hasta 8, que es el último, es decir, tenemos
9 elementos en nuestra matriz. Un método para hacerlos todos visibles
sería escribir una línea de código por cada elemento para establecer la
propiedad Visible a True. En este caso, con sólo 9 elementos, no resulta
muy engorroso, pero imagina que tuvieras 100 elementos o más en la
matriz, entonces si sería una tarea un poco larga, tener que escribir una
línea de código para cada elemento de la matriz. Pero gracias a las
maravillas de la programación, tenemos una estructura en VB que se
llama bucle For Next que nos va a simplificar mucho el trabajo. La
sintaxis de esta estructura es como sigue:
For n = 0 to 8
lblElementoCM(n).Visible = True
Next
End sub
La gran prueba.
Por fin llegamos al final de la primera lección. Nuestro primer programa
está casi terminado. ¡Vamos a probarlo! (si es que no lo has hecho ya
impaciente). Para probarlo sólo tienes que pulsar F5, el botón Iniciar
o menú Ejecutar->Iniciar. Si todo va bien, verás tu formulario en el
centro de la pantalla con dos textos y dos botones. Si pulsas el botón ,
no debe pasar nada, pero si pulsas el botón , deben borrarse la segunda
etiqueta y los dos botones y además aparecer el famoso cuadrado
mágico. Termina pulsando la para cerrar el formulario y volver al IDE.
(Si algo no va bien, anota el mensaje que te da y envíamelo por correo)
Ejercicio de control.
Pues bien, y como ejercicio de comprobación de esta lección deberás
hacer lo siguiente:
1. Escribir el código para el evento Click del botón , de manera que modifique el
texto de la segunda etiqueta (Label2) para que se lea "Pues tú te lo pierdes"
2. Añadir las líneas de código necesarias para que, después de mostrar el
Cuadrado Mágico, el texto de la segunda etiqueta cambie a "Las filas,
columnas y diagonales suman 15. Compruébalo".
3. Una vez terminado y comprobado, guarda los cambios y posteriormente
envíame por e-mail tu proyecto. Si no sabes como hacerlo pulsa aquí para las
instrucciones detalladas.
Temas
o Introducción.
o La entrada de datos.
Los cuadros de introducción de datos. Inputbox.
Las Funciones.
La función InputBox.
Los cuadros de texto. Textbox
Los cuadros de texto con formato. Rich Textbox
o Las estructuras de control de flujo del programa.
Las estructuras de decisión.
If...Then.
If...Then...Else.
Select Case.
o El Algoritmo
Los Procedimientos.
Los Parámetros.
El Desarrollo.
El tipo de dato Array.
o Ejercicio de control.
Introducción.
Si has aprobado el examen y la práctica, en estos momentos debes
tener una pequeña aplicación que, a petición del usuario, dibuja un CM
(Cuadrado Mágico) de 3x3. Pero los Cuadrados Mágicos pueden ser
mayores, de hecho, es infinito el número de CM's que podemos crear,
siguiendo determinadas reglas.
En esta lección vamos a ampliar nuestra aplicación con una nueva
característica. El usuario podrá elegir el tamaño del CM y para ello
vamos a aprender a utilizar un objeto sumamente útil para la
interacción aplicación-usuario, la entrada de datos.
La entrada de datos.
En la mayoría de las aplicaciones, se requiere la intervención del
usuario, para algo más que abrir o cerrar ventanas, pulsar botones o
seleccionar elementos de listas o menús. En todos estos casos, la
aplicación conoce todas las posibles respuestas, ya que pertenecen a un
conjunto finito de opciones posibles.
Pero ¿que pasa cuando los datos que necesita la aplicación son
imprevisibles?; por ejemplo: si necesitamos una fecha, la cantidad de
capital para calcular un rendimiento, un nombre de usuario, el tamaño
de un CM, etc.
Para estos casos Vb nos ofrece varias opciones. Cada una la veremos de
forma general y alguna de forma más específica. Estas opciones son:
Las Funciones.
La función InputBox.
Figura 2.1
donde:
Figura 2.2
NOTA: Estas son todas las posibilidades que tiene el usuario en este
punto. A menudo verás lo conveniente que es, durante el desarrollo
de una aplicación, analizar todas las posibles acciones que puede
efectuar el usuario en un momento dado, ya que de esta forma
controlas los errores generados por acciones indebidas y evitas las
sorpresas de acciones inesperadas.
Acción Efecto
Pulsar cMiVariable=""
Pulsar cMiVariable=""
Pulsar cMiVariable=valor
Tanto los TextBox como los RichTextBox los veremos más en detalle
cuando sea necesario. De momento para nuestra práctica usaremos un
InputBox como el de a figura 2.2.
Otra limitación es más bien física que real, ya que debemos limitar el
tamaño del CM para poder mostrarlo en nuestro formulario. En realidad,
los CMs no tienen límite de tamaño, pero, aunque existen métodos para
mostrar en una ventana un formulario mayor que el tamaño de la
ventana, existe también la limitación del tamaño de memoria del
ordenador del usuario. De manera que limitaremos el tamaño de
nuestro CM a 15x15.
(El resto de los parámetros los dejaremos con sus valores por omisión.)
Figura 2.3
A nivel puramente estético, podemos preferir que el texto del mensaje
que se encuentra entre paréntesis empiece en la siguiente línea. Esto es
posible cambiando la cadena del mensaje de manera que contenga un
código de salto de línea. Para ello dividimos la cadena en dos trozos,
que corresponden a las dos líneas del mensaje resultante e intercalamos
entre las dos cadenas el código correspondiente al salto de línea
Chr(13) mediante el operador de concatenación &. De manera que la
línea de código queda como sigue:
Compruébalo tu mismo
If..Then
If..Then..Else
Select Case
If condición Then
instrucción(es)
End If
donde:
donde:
If (cRazonCM Mod 2 <> 0) And (cRazonCM >= 3 And cRazonCM <= 15) Then
generar CM
End If
El Método.
cRazonCM = InputBox("¿De que tamaño quieres el Cuadrado Mágico?." & Chr(13) &
"(Debe ser un número_ impar entre 3 y 15 inclusive)", "Generador de Cuadrados
Mágicos")
If (cRazonCM Mod 2 <> 0) And (cRazonCM >= 3 And cRazonCM <= 15) Then
GeneraCM
End If
End Sub
El Algoritmo.
Nuestro siguiente paso es convertir todo lo que hemos visto
anteriormente en un Algoritmo, que es como en lenguaje de
programación se conoce al conjunto de instrucciones que ejecutan
una tarea determinada.
A simple vista sabemos que se van a necesitar varias líneas de código,
las cuales, sin problema, podemos colocar dentro de la estructura de
control If...Then, pero vamos a utilizar una de las características de Vb,
los procedimientos Sub.
Sub GeneraCM +
End Sub
Los Parámetros.
por valor
por referencia
End Sub
El Desarrollo.
Pasemos por fin al meollo del asunto, el desarrollo del algoritmo para
rellenar el CM. Primero vamos a definir qué tipo de dato necesitamos
para almacenar en memoria el CM antes de colocarlo en nuestro
formulario. Evidentemente no es un tipo de dato sencillo, es decir, no es
ni un Número ni una Cadena de caracteres, si no, un conjunto de
números organizados en filas y columnas. A este tipo de datos se le
conoce como Matriz y en Vb se identifica con la palabra clave Array.
CuadradoMagico() As Integer
Redim CuadradoMagico(pcRazonCM, pcRazonCM)
End Sub
Figura 2.5
Cuando Vb se encuentra con un bucle For... Next, inicializa la
variable de control, mejor conocida como contador y le asigna el
valor_inicial
Si el valor del contador es menor que el valor_final, entonces
ejecuta el grupo de instrucciones dentro del bucle e incrementa
el contador el valor incremento si existe o en 1 si no existe un
incremento. y vuelve al principio del bucle.
Si el valor del contador es mayor que el valor_final, entonces se
sale del bucle y el programa continúa con las líneas de código que
siguientes al final del bucle (línea Next)
valor_inicial = 1
valor_final = pcRazonCM x pcRazonCM
incremento = 1 (predeterminado)
nFila = pcRazonCM
nColumna = pcRazonCM / 2 + 1
así que añadimos esta línea a nuestro código, como primera línea del
cuerpo del bucle. En realidad, esta será la línea principal ya que es la
que asignará cada elemento a la matriz hasta llenarla.
Seguidamente tenemos que aplicar las demás reglas del método para
rellenar CM's. Iremos rellenando los elementos de la matriz uno a uno,
pasando a la siguiente fila y siguiente columna, excepto que el último
elemento asignado a la matriz sea igual o múltiplo de la razón en cuyo
caso sería en la fila anterior y misma columna. Pero ¿como traducimos
ésto a còdigo Vb? Vayamos por partes.
Como ves, las líneas en color verde van precedidas de un apóstrofe '
que es uno de los métodos que usa Vb para añadir comentarios al
código. Es muy importante comentar el código, ya que te será de gran
ayuda si tienes que depurarlo o, sobre todo, cuando tengas que
mantenerlo o bien, que el mantenimiento lo vaya a realizar otra
persona, por ejemplo, de tu grupo de programación.
Ejercicio de control.
Como ejercicio de comprobación de esta lección deberás hacer lo
siguiente: