El Cuadrado Mágico

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

Conceptos básicos de programación.

En términos muy generalizados, una aplicación es algo que recibe unos
datos, los procesa y devuelve unos resultados. A mí me gustan
mucho los símiles y en este caso usaré el del Túnel de Lavado. Los
datos son los coches sucios que entran en el túnel, la aplicación es el
túnel mismo y los resultados son los coches limpios que salen del
túnel. Luego, para desarrollar una aplicación, inicialmente debemos
hacernos las siguientes preguntas:

 ¿Para qué?
 ¿Cuándo?
 ¿Con qué?, y
 ¿Cómo?

El ¿Para qué? consiste en definir qué resultados queremos que nos

devuelve nuestra aplicación. (Coches limpios)

El ¿Con qué? define los elementos sobre los que nuestra aplicación
realizará su cometido.(Coches sucios)

El ¿Cuándo? no es más que determinar el momento en que se

ejecutará nuestra aplicación. (Cuándo se quiere lavar el coche.)

Por último, el ¿Cómo?, que es donde realmente trabajaremos. Esta

parte consiste en definir cómo va a realizar su trabajo nuestra
aplicación. (Enjabonar, enjuagar, secar, etc.). Esta es la parte más
importante del desarrollo de aplicaciones. Al definir el cómo te
encontrarás que puedes (y debes), dividir las tareas en tareas más
simples y tratar cada una de éstas como si de una aplicación
independiente se tratara, es decir, definir el ¿Para que?, el ¿Cuando?, el
¿Con que? y el ¿Como?, de igual manera que hiciste con la aplicación
principal. Esto se llama modularizar y consiste en tratar un problema
como subproblemas más simples (módulos). Todo esto puede parecer a
veces tedioso, pero es muy importante realizar un análisis exhaustivo de
cómo queremos resolver el problema para no encontrarnos con
sorpresas a la hora de ejecutar nuestra aplicación. Un error muy
extendido entre los programadores noveles consiste en empezar a
escribir líneas de código sin haber analizado a fondo el problema a
resolver obteniendo de este modo, resultados inesperados en el 90% de
los casos.

La primera lección, la primera aplicación.

Como te dije en la bienvenida, desde la primera lección vamos a
empezar creando una aplicación.

Empecemos con el ¿Para qué?:

Lo que queremos que haga nuestra aplicación es crear cuadrados

mágicos, que son aquellos cuadrados en los que colocamos de
determinada forma los números correlativos, empezando por el 1, hasta
llenar el cuadrado de tal forma que tanto las filas, como las columnas,
como las diagonales principales suman lo mismo. He aquí el ejemplo
más sencillo, un cuadrado mágico de 3x3:

492
357
816
Figura 1.1. Cuadrado Mágico de 3x3

Si no te lo crees, comprueba tu mismo que todas las filas, todas las

columnas y las diagonales principales suman 15.

Bien, ya sabemos el ¿PARA QUE?, es decir, lo que queremos que haga

nuestra aplicación. Ahora tenemos que decidir el ¿CUANDO?, y en este
caso es muy sencillo ya que la aplicación hará su tarea cuando el
usuario se lo pida y nada más.

Ahora tenemos que definir el ¿CON QUE?. Esta primera aplicación es de

aquellas que no necesitan datos de entrada. Volvamos a los símiles.
Supón que tu aplicación es "Encender el televisor", no necesita datos de
entrada, sólo la acción de pulsar el botón de encendido, (ejecutar la
aplicación), y el televisor se enciende, (mostrar los resultados).

Por último tenemos que definir el ¿COMO?, que es, si no me equivoco,

la parte que más te gustará. En este primer caso, el ¿Cómo? es muy
sencillo. Simplemente abrirá una ventana típica de Windows, mostrará
el mensaje "¿Quieres ver un Cuadrado Mágico?" y dos botones, uno para
"SI" y otro para "NO". Si el usuario pulsa "SI", nuestra aplicación
mostrará un Cuadrado Mágico como el de la figura 1.1, y si pulsa "NO"
mostrará un mensaje de despedida y se cerrará la aplicación.

Luego nuestra primera aplicación constará de los siguientes pasos:

1. Abrir la ventana inicial.

2. Si el usuario pulsa el botón SI entonces mostrar el Cuadrado Mágico
3. Si pulsa el botón NO, mostrar el mensaje de despedida.
4. Cerrar la ventana.

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.

Por defecto, cuando VB abre un nuevo proyecto (así llamaremos a partir

de ahora a nuestra aplicación mientras se encuentre en el proceso de
desarrollo), le asigna el nombre Proyecto1 que podemos ver como
título en la ventana principal del IDE. En el área de trabajo hay una
ventana con el título "Proyecto1 - Form1 (Form)" y dentro de esta
ventana un formulario en blanco (o más bien en gris) con el título
Form1. Este es el formulario que vamos a convertir en la ventana inicial
de nuestra aplicación, es decir, en el interfaz.

Para ello debemos configurar algunas de las múltiples propiedades del

formulario. Las propiedades son características que modifican de alguna
manera el objeto al que pertenecen.
Figura 1.3 La Ventana de propiedades
En el lado derecho del IDE puedes ver la Ventana de propiedades con el
título "Propiedades - Form1". Esto quiere decir que el objeto activo en
este momento es el formulario Form1. Debajo del título puedes ver un
cuadro de lista desplegable que de momento sólo contiene "Form1
Form". Esta lista contiene todos los objetos que existen en nuestro
proyecto. En el caso que nos ocupa, sólo tenemos un formulario, de ahí
la palabra Form cuyo nombre actual es Form1 que es lo que aparece en
primer lugar en el elemento de la lista, Debajo de este cuadro de lista
tenemos una tabla de dos columnas con todas las propiedades
pertenecientes al objeto activo, en este caso el formulario. Esta tabla es
diferente para cada tipo de objeto. En la columna de la izquierda puedes
leer el nombre de la propiedad, y en la columna de la derecha su valor.
En el caso de un formulario, la tabla consta de 51 propiedades, aunque
para nuestro primer proyecto sólo usaremos unas cuantas.

Caption

La primera que modificaremos será, si todo lo has hecho como te

indiqué, la que contiene el cursor de selección, es decir, la que se
encuentra seleccionada (resaltada en color amarillo). Esta debe ser
Caption. Si no es así, selecciónala tu mismo. Existen tres métodos para
seleccionar una propiedad:

1. Pulsa ++ donde letra es la inicial de la propiedad que deseas

modificar, El cursor de selección se coloca sobre la primera
propiedad que empieza con dicha letra. Si repites la letra, el
cursor de selección pasa sucesivamente a la siguiente propiedad
que empiece por dicha letra hasta que se encuentra con la última
 que cumple esta condición saltando entonces a la primera que la
cumplía para empezar de nuevo el ciclo.
2. Pulsar sucesivamente hasta colocar el cursor de selección en la
propiedad deseada.
3. Hacer clic con el ratón sobre el nombre o el cuadro de valor de la
propiedad que queremos modificar.

Una vez seleccionada teclea lo siguiente: Cuadrado Mágico. El texto

irá aparecerá en el cuadro de la derecha de la propiedad Caption
conforme vas escribiendo y al mismo tiempo, en el Título de nuestro
formulario, y es que Caption es la forma en que VB denomina a la
propiedad que contiene el título del formulario.

(Nombre)

Otra propiedad que vamos a modificar es (Nombre) que es el nombre

con el que identificaremos el formulario internamente, es decir, en el
código. VB por defecto le ha asignado el nombre Form1 que en este
caso nos valdría, ya que tendremos sólo un formulario en la aplicación,
pero cuando el número de formularios es considerable, es más cómodo
saber de qué formulario se trata mediante su nombre. Así pues
llamémosle frmPrincipal. ¿Por que este nombre? Te lo explicaré.
Cuando empieces a trabajar con códigos verdaderamente grandes, para
poder identificar a que clase de objeto te refieres cuando tratas una
variable, yo recomiendo este tipo de notación. Las tres primeras letras
en minúsculas, identifican el tipo de objeto, en este caso frm=formulario
y seguidamente el nombre que quieras darle, en este caso Principal ya
que es la ventana principal de nuestra aplicación.

StartUpPosition

Esta propiedad determina la posición de un objeto la primera vez que

aparece. Es decir, en el caso de nuestro formulario, la posición en que
aparecerá en la pantalla del usuario. Como podrás ver en la columna de
valor de esta propiedad aparece inicialmente "3 - Windows Default" y
una flecha hacia abajo que nos indica que es un cuadro de lista
desplegable. Si pulsas en esta flecha verás que tenemos las siguientes
opciones:

0 - Manual No se ha especificado ningún valor inicial.

1 - CenterOwner Centrado en el elemento al que pertenece.
2 - CenterScreen Centrado en toda la pantalla.
3 - WindowsDefault Esquina superior izquierda de la pantalla.
En este caso vamos a seleccionar la opción 2 -CenterScreen para que nuestro
formulario aparezca centrado en la pantalla del usuario. Puedes cambiar esta
propiedad con los siguientes métodos:

1. Desplegando el cuadro de lista mediante la flecha abajo y seleccionando la

opción deseada ya sea con un clic del ratón o mediante las teclas de cursor
hasta colocar la selección sobre el elemento deseado y pulsar .
2. Haciendo doble clic sobre el cuadro valor de la propiedad. Esto va cambiando
cíclicamente los valores posibles.
3. Pulsando las teclas del 0 al 3, pero en el teclado normal.

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.

Una vez comprobada la apariencia inicial de nuestra ventana, ciérrala

pulsando sobre la en la esquina superior derecha de nuestra ventana, o
bien pulsa Terminar , menú Ejecutar->Terminar. Cualquiera de
estos pasos nos lleva de nuevo al IDE de VB para poder seguir
trabajando en nuestro proyecto.

Label. Una etiqueta de texto.

Ahora vamos a empezar a "adornar" nuestro formulario. Dijimos que
debe mostrar un mensaje. Para ello selecciona Label (etiqueta) del
cuadro de herramientas. Una vez seleccionada al pasar el cursor sobre
el formulario verás que cambia a una cruz. Sitúa la cruz
aproximadamente a dos puntos de distancia de la esquina suoerior
izquierda y arrastra hasta dos puntos antes del borde derecho y unos
cuatro puntos abajo. Suelta el botón del ratón. aparece un rectángulo
delimitado por 6 cuadritos amarillos y el texto Label1 dentro de él. Este
es un objeto Label o etiqueta de texto con el cual, podemos definir un
texto que aparecerá en nuestro formulario y que no es editable por el
usuario. Si observas la ventana de Propiedades, ahora ha cambiado, su
título es Propiedades Label1 y muestra las propiedades de la etiqueta
que acabamos de crear. De nuevo, de las 37 propiedades de la etiqueta,
sólo modificaremos unas cuantas.

Caption

La primera, igual que en el formulario, es Caption, que en este caso no

corresponde al título sino al texto que aparece en la etiqueta. Modifícalo
tecleando Generador de un Cuadrado Magico. Verás que el texto va
apareciendo en el formulario, pero su aspecto no es muy vistoso. Vamos
a corregir esto.

Font

Primero vamos a modificar la propiedad Font que contiene las

características del fuente a utilizar en nuestra etiqueta. Si te fijas en la
columna de valor de esta propiedad, aparece un botón con tres puntitos
(elipsis) a la derecha, esto significa que si lo pulsas se abre un cuadro
de diálogo, en este caso Fuente, en el que puedes definir las
características del texto. Selecciona Negrita como Estilo de fuente: y
12 como Tamaño:. También podemos cambiar el Fuente: pero esto lo
dejamos para más adelante.

Figura 1.5

Si todo lo has hecho de acuerdo a las instrucciones anteriores, debes

tener un formulario semejante al que aparece en la figura 1.5. No te
extrañe que el texto que acabamos de escribir no se vea completo, esto
es porque es más largo que el tamaño que hemos asignado inicialmente
a nuestra etiqueta, sin embargo esto lo podemos modificar sin
problemas. Nuestra intención es que el texto aparezca todo en una sola
línea. Podemos alargar la etiqueta, pulsando y arrastrando los dos
cuadritos amarillos de los lados derecho e izquierdo hasta llevarlos a sus
respectivos extremos, es decir, que ocupe todo el ancho del formulario.
Alignment.

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

Seleccionamos la tercera opción para que centre el texto dentro de la

etiqueta.

AutoSize.

Por último, y para eliminar zonas sobrantes de la etiqueta,

seleccionamos la propiedad AutoSize que nos permite los valores True y
False. Seleccionamos True y la etiqueta actualiza su tamaño al justo y
necesario para el texto contenido. Por último, y para que nuestra
etiqueta quede centrada con respecto al formulario, con la etiqueta
seleccionada, pulsa menú Formato->Centrar en el formulario-
>Horizontalmente.

Figura 1.6

Si todo va bien, tu formulario debe tener una apariencia semejante a la

figura 1.6. Ahora, y como parte del ejercicio de control que haremos en
cada lección, debes colocar otra etiqueta de texto, debajo de la anterior,
que contenga el siguiente texto: ¿Quieres ver un Cuadrado Mágico?
con el fuente Arial, estilo Negrita y tamaño 10, y centrado
horizontalmente con respecto al formulario por supuesto. Si alguna vez
al trabajar con los controles se te abre una ventana de texto que tiene
como título Proyecto1 - frmPrincipal (Código), no te preocupes,
simplemente ciérrala y sigue trabajando. Esta ventana la veremos más
adelante y es en la que escribiremos el código de nuestro programa
cuando sea necesario. De momento seguimos en la fase de diseño y
ahora vamos a añadir los botones.

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

Igual que en la etiqueta, esta propiedad contiene el texto que aparece

dentro del control. Ahora debe tener el texto Command1 y lo has de
cambiar a SI, de igual forma que hicimos con el formulario o la etiqueta.

(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

Busca esta propiedad, y en la columna valor, escribe lo siguiente: Pulsa

aquí si quieres ver un Cuadrado Mágico. Este es el texto que
aparecerá cuando el usuario coloque el ratón sobre el botón. Es como
una pequeña ayuda que le sirve al usuario para saber que hace un
determinado objeto.

Height

Busca esta propiedad y asígnale el valor 255. Así definimos la altura del
botón

Left

Para esta propiedad, que establece la distancia entre el borde izquierdo

del botón y el borde izquierdo del formulario, teclea el valor 1080.

Top
Esta propiedad contiene la distancia del borde superior del formulario al
borde superior del botón. Establécela a 2760.

Width

Por último, establece el ancho del botón a 855.

Estas 4 últimas propiedades, las puedes establecer dinámicamente, es

decir, trabajando sobre el objeto en el diseño de formulario. Por
ejemplo, para definir la altura del botón, selecciona primero la propiedad
Height en la ventana de propiedades, después pulsa y arrastra uno de
los cuadritos amarillos que hay en el botón en el lado superior o inferior,
suelta el ratón y comprueba en la ventana de propiedades si el valor que
muestra para la altura es el deseado. Igualmente puedes hacer para
determinar la posición. Primero selecciona la propiedad para ver su valor
y después, haciendo clic en el centro del objeto y arrastrando, lo puedes
colocar donde desees. También, si arrastrando dejas un momento el
ratón quieto, aparecen los valores en un cuadro con el fondo amarillo, lo
cual resulta muy útil cuando quieres establecer un valor determinado.

Como parte del control de la lección, de nuevo te dejo para que tu

mismo establezcas las propiedades del segundo botón como sigue:

 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

Si todo va bien, tu formulario debe parecerse al de la figura 1.7. Ya casi

llegamos al final de la fase de diseño. Nos queda por último el famoso
Cuadrado Mágico, pero ¿Como vamos a mostrarlo?. Para ello vamos a
hacer uso de una propiedad muy interesante que tienen todos los
objetos, Visible. Esta propiedad nos permite colocar un objeto en el
formulario, pero que no sea visible al usuario. Aprovechando esta
característica vamos a colocar el cuadrado mágico en nuestro formulario
y una vez terminado lo ocultaremos para hacerlo visible mediante el
código, es decir en tiempo de ejecución, cuando el usuario pulse el
botón Si.

Crea una etiqueta con los siguientes valores:

 (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:

 Pulsa dos veces sobre el objeto en cuestión.

 En el menú contextual del objeto, (pulsando el botón derecho sobre él),
seleccionar Ver código
  Menú Ver->Código

Usa cualquiera de los métodos anteriores. y se abrirá una ventana con

el título Proyecto1 - frmPrincipal (Código). Este es el Editor de código.
Es como un procesador de textos muy especializado con cierto número
de características que facilita en gran medida la escritura de código en
Visual Basic. La ventana del Editor de código se muestra en la figura
5.4.

Figura 1.9 - 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:

Private Sub btnSi_Click()

End sub

Esta es la porción de código que encierra las acciones que se deben

ejecutar cuando un usuario hace click sobre el botón btnSi de nuestro
formulario. Bien, ¿Que es lo que queremos que haga nuestro programa
cuando el usuario pulse ?. La respuesta es "Mostrar el Cuadrado
Mágico". Vayamos por partes: Por un lado tenemos que hacer visible la
matriz de etiquetas que creamos con los números del cuadrado mágico,
por otro lado, hacer invisible la segunda etiqueta, la que dice "¿Quieres
ver un Cuadrado Mágico?", también debemos hacer invisibles los
botones y , ya que ninguno de estos objetos tendrán utilidad una vez
que se muestra el Cuadrado Mágico. Para hacer invisibles estos tres
objetos sólo tenemos que modificar una propiedad, ¿Podrías decir cuál
antes de seguir leyendo?..... Si pensaste en la propiedad Visible
¡acertaste!. Cuando desde el código queremos modificar una propiedad
de un objeto, la sintaxis es como sigue:

Objeto.Propiedad = Valor

Como ves, primero debemos indicar el objeto al cual queremos

modificar una propiedad, después, y separada por un punto, la
propiedad en cuestión, por último y separado por un signo "=" el nuevo
valor. Pues bien, para el caso de nuestra etiqueta el código será:

Private Sub btnSi_Click()

Label2.Visible = False

End sub

Puedes teclearlo tal cual en el Editor de código, pero te enseñaré una

forma más fácil y que te evitará muchos errores de sintaxis.

IntelliSense

El Editor de código de Visual Basic posee una característica muy

interesante que Microsoft® llama IntelliSense. Consiste en que,
conforme vas escribiendo el código, VB te ayuda a hacerlo. Veamos
como.

Colócate en el Editor de código, justo debajo de la línea Private Sub

btnSi_Click(), y teclea Label2 que es el nombre de la segunda etiqueta,
en el momento que pulses el punto "." verás que aparece un cuadro de
lista que contiene todas las propiedades del objeto Label2. Como en
cualquier cuadro de lista de Windows, te puedes desplazar con las
flechas de cursor, con las iniciales, etc. Busca la propiedad Visible, verás
que se selecciona con sólo pulsar la letra "V", si hubiera más de una
propiedad con la misma letra, no tienes más que seguir tecleando las
letras siguientes de la propiedad hasta que ésta esté seleccionada, o
bien, usar las flechas arriba o abajo o el ratón, para seleccionar la
propiedad que buscas. Una vez seleccionada, puedes:

 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á.

Aprovechando esta característica, si no estás seguro de que objeto es el

que quieres modificar, puedes escribir primero el contenedor, en nuestro
caso, el formulario que contiene los objetos, así, teclea frmPrincipal y
en cuanto teclees el punto ".", aparece la el cuadro de lista que muestra
todos los objetos contenidos en el formulario. La línea resultante sería:

Private Sub btnSi_Click()

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:

Private Sub btnSi_Click()

Label2.Visible = False
btnSi.Visible = False
btnNo.Visible = Flase

End sub
o bien:

Private Sub btnSi_Click()

frmPrincipal.Label2.Visible = False
frmPrincipal.btnSi.Visible = False
frmPrincipal.btnNo.Visible = Flase

End sub

según uses la primera o la segunda sintaxis.

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 contador = inicio To fin [Step intervalo]

[sentencias]
Next

 El contador debe ser una variable numérica, en nuestro caso usaremos n.

 inicio es el valor inicial del contador, en nuestro caso 0.
 fin es el valor final, es decir, hasta donde queremos que se repita el bucle, en
nuestro caso 8.
 intervalo, que es opcional, define el incremento que sufrirá n después de cada
iteración (repetición del bucle). Si no se especifica intervalo se asume un
incremento de 1 que es nuestro caso.
 sentencias son las líneas de código que se repetirán en cada iteración, en
nuestro caso lblElementoCM(n).Visible = True.

Luego en nuestro caso el código queda como sigue:

Private Sub btnSi_Click()

Label2.Visible = False
btnSi.Visible = False
btnNo.Visible = Flase

For n = 0 to 8
lblElementoCM(n).Visible = True
Next

End sub

Que traducido a lenguaje coloquial sería:

Para cada caso de n que va desde 0 hasta 8 en intervalos de 1 en 1,

hacer visible el elemento n de la matriz lblElementoCM lo cual es lo que
estábamos buscando. Como puedes ver, hemos reducido a 3 líneas lo
que de otra forma hubiera ocupado 9, esto supone un ahorro del
66.66%, pero lo más sorprendente es que el código ocuparía las mismas
3 líneas si la matriz fuese de 100, 1000, un millón, etc., cualquier
tamaño que tuviera la matriz con lo cual el ahorro es exponencial.

Un detalle importante que quizá ya te hayas preguntado: ¿Por que la

línea dentro del bucle está indentada? (desplazada hacia la derecha con
respecto al resto del texto). ¿Tiene que ser así? La respuesta es NO,
pero es conveniente para la mayor claridad, legibilidad y mejor
entendimiento del código. En este caso son muy pocas las líneas de
código, pero conforme avancemos en el curso, los programas se
complicarán y entenderás la utilidad de esta costumbre.

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.

Si consideras que ya estás preparado, puedes acceder al examen de la

Lección 1

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:

 Los cuadros de introducción de datos. Inputbox.

 Los cuadros de texto. Textbox.
 Los cuadros de texto con formato. RichTextBox.

Los cuadros de introducción de datos. Inputbox.

Aunque no es la forma más comúnmente utilizada para la entrada de

datos, la función InputBox es, en ocasiones, bastante útil.
Si te has fijado, no he hablado de control sino de función y es que
InputBox es una función y no un control. Veamos que significa esto.

Las Funciones.

Visual Basic como todos los lenguajes de programación tiene funciones y

procedimientos incorporados aunque también puedes definir los tuyos
propios.
Una función es una porción de código que realiza una tarea específica,
que puede recibir datos de entrada, conocidos en el argot informático
como parámetros o argumentos y que, a diferencia de los
procedimientos de evento siempre devuelven un valor.
Esta última característica es la que te servirá para decidir si defines una
función o un procedimiento. Si necesitas que devuelva algún valor será
una función lo que definas, si no necesitas que devuelva ningún valor,
definirás entonces un procedimiento.

La sintaxis genérica de las funciones es:

 variable = función([argumentos])

donde variable es la variable que almacenará el resultado de la función,

función es el nombre de la función y argumentos son los datos que
opcionalmente necesita la función.

La función InputBox.

Esta función muestra un cuadro de diálogo modal (éste es un término

técnico para definir un formulario que ha de cerrarse antes de poder
continuar con el desarrollo normal del programa), que contiene un
Título y un Mensaje (definibles), un cuadro de texto y dos botones y
.

Figura 2.1

La sintaxis general de la función InputBox es:

variable=InputBox(Prompt[, Title] [, Default] [, XPos] [, YPos] [, HelpFile, Context])

donde:

 Prompt es un mensaje o variable de cadena que Vb presenta

dentro del Inputbox.
 Title (opcional) es el texto que aparece en la barra de título del
Inputbox. Si se omite Vb coloca el nombre de la aplicación.
 Default (opcional) es el texto que aparecerá por omisión en el
cuadro de texto. Si se omite el cuadro aparece en blanco.
 XPos e YPos (opcionales) son valores numéricos que contienen
en twips la distancia de los bordes izquierdo y superior del
InputBox a los bordes izquierdo y superior de la pantalla
respectivamente. Si se omite el primero, el InputBox se centra
horizontalmente; si se omite el segundo, el InputBox aparece en
el primer tercio de la pantalla aproximadamente.
  HelpFile y Context se utilizan conjuntamente cuando la
aplicación tiene un fichero de ayuda asociado. Si se omiten no
tiene ningún efecto pulsar para recibir ayuda.

El funcionamiento dc InputBox es el siguiente:

Cuando Vb se encuentra con una línea como esta:

cMiVariable=InputBox("¿De que tamaño quieres el Cuadrado Mágico?", "Generador de

Cuadrados Mágicos",3)

presenta en pantalla un InputBox como el de la figura 2.2 y espera que

el usuario introduzca algún texto en el cuadro de texto y pulse los
botones o , o las teclas o o pulse el botón para cerrar la ventana.

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.

Analicemos todas las posibilidades:

Acción Efecto
Pulsar cMiVariable=""
Pulsar cMiVariable=""
Pulsar cMiVariable=valor

Evidentemente las dos primeras devuelven el mismo valor

independientemente de lo que haya en el cuadro de texto, es decir, una
cadena nula; y la última devuelve lo que haya en el cuadro de texto, se
haya modificado o no.
El inconveniente que tiene la sencillez de uso de InputBox es su poca
flexibilidad. Sólo en contadas ocasiones será uno solo el dato
necesario, además de no poder controlar de ningún modo el Textbox ni
sus eventos. No obstante habrá ocasiones en que te será de gran
utilidad.

Los cuadros de texto. Textbox.

A diferencia de los InputBox, dentro de nuestro formulario, sí podemos

tener más de un TextBox, de hecho, éste será el caso más común
dentro de una aplicación Vb. Otra gran diferencia es que en los
TextBox sí podemos controlar mucho de su comportamiento.

Los cuadros de texto con formato. RichTextBox.

Estos cuadros de texto son muy similares a los TextBox, es decir,

podemos tener varios dentro del mismo formulario y podemos controlar
su comportamiento; pero la gran diferencia con los TextBox es que
pueden mostrar texto con varios tipos de fuentes y tamaño, además de
no estar limitados a 32.000 caracteres.

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.

Con este InputBox permitiremos que el usuario decida el tamaño del

CM. Pero existen unas reglas que ha de cumplir, y esto nos servirá para
introducir otro concepto importante en la programación, las estructuras
de control de flujo del programa.

Las Estructuras de Control de Flujo del

Programa.
El control de flujo de un programa es la herramienta principal que
permite que un programa tome decisiones y efectúe así una acción u
otra, es decir, sin estas estructuras, el fluir del programa sería
secuencial, de izquierda a derecha y de arriba a abajo, mientras que,
gracias a ellas, el flujo puede cambiar el orden de las instrucciones.

Podemos decir que existen dos tipos de estructuras de control de flujo:

 Las estructuras de decisión que son las utilizadas para bifurcar

y
  Las estructuras de bucle que son para repetir procesos.

En nuestro caso, la aplicación debe tomar una decisión dependiendo del

tamaño del CM que el usuario elija, por lo que necesitará una
estructura de decisión, pero primero vamos a explicar algunas de las
reglas que deben cumplirse para poder crear un CM.

La primera limitación que debemos tener en cuenta a la hora de generar

un CM es que su razón sólo puede ser impar, es decir, sólo puede ser
3x3, 5x5, 11x11, etc. Luego, nuestra aplicación debe controlar que el
usuario no introduzca un número par como razón del CM.

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.

Luego para nuestro InputBox definiremos los siguientes parámetros:

 El Mensaje debe ser "¿De qué tamaño quieres el Cuadrado

Mágico?. (Debe ser un número impar y menor o igual a 15)"
 El Título será "Generador de Cuadrados Mágicos".
 La Variable para almacenar el resultado se llamará cRazonCM

(El resto de los parámetros los dejaremos con sus valores por omisión.)

La línea de código entonces será:

cRazonCM=InputBox("¿De que tamaño quieres el Cuadrado Mágico?. (Debe ser un

número impar entre 3 y 15 inclusive)", "Generador de Cuadrados Mágicos")

Esto nos genera un InputBox como el de la figura 2.3:

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:

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")

Compruébalo tu mismo

Volviendo a nuestra aplicación, hemos dicho que necesitará una

estructura de decisión, veamos por qué. Supongamos que el usuario
ha decidido generar un CM, luego aparece el InputBox el cual puede
devolvernos distintos valores en la variable cRazonCM que pueden ser:

I. Una cadena vacía ""

II. Una cadena no vacía que puede ser:
A. Una cadena no numérica
B. Una cadena numérica que puede ser:
1. Una cadena numérica par
2. Una cadena numérica impar que puede ser:
i. Una cadena numérica impar mayor que 15
ii. Una cadena numérica impar menor o igual a 15 que puede ser:
a. Una cadena numérica impar menor o igual a 15 y menor que 3
b. Una cadena numérica impar menor o igual a 15 y mayor o igual
a3

Aunque te parezca un poco exagerado este estudio, cuanto más

profundices en las posibles respuestas de los usuarios a tus programas,
controlarás mejor los posibles errores de programación que, por otro
lado, he de decirte que siempre surgirán; es utópico pensar que un
programa funcionará perfectamente a la primera, siempre se nos escapa
algo.
De todas las opciones posibles, vemos que la primera de cada subgrupo
no es válida ya que no cumple con los criterios establecidos para
nuestro CM y la segunda nos lleva a un nuevo subgrupo de
discriminación hasta llegar a la última subopción que es la única que
cumple con dicho criterio. Para que nuestra aplicación decida si el valor
obtenido es válido vamos a utilizar una estructura de decisión.

Las estructuras de decisión.

Las estructuras de decisión permiten comprobar una condición y,

dependiendo del resultado, ejecutar una serie de instrucciones. Vb
contiene las siguientes estructuras de decisión:

 If..Then
 If..Then..Else
 Select Case

La estructura de decisión If...Then.

En lenguaje natural equivale a "Si..entonces". Esta estructura tiene dos

posibles sintaxis:

 En una sola línea

If condición Then instrucción(es)

 En un bloque de varias líneas

If condición Then
instrucción(es)
End If

donde:

 condición = expresión que devuelve un valor booleano: True

(verdadero) o Flase (Falso); o un valor numérico siendo 0 =
False o cualquier otro número = True.
 instruccion(es) = Acción(es) que se ejecuta(n) si la condición
devuelve un valor True.

La estructura de decisión If...Then...Else.

En lenguaje natural equivale a "Si...entonces...si no". Su sintaxis es:

If condición1 Then
[bloque de instrucciones 1]
[ElseIf condición2 Then
[bloque de instrucciones 2]]..
[Else
[bloque de instrucciones n]].
End If

donde primero se comprueba la condición 1; si devuelve True se

ejecuta el bloque de instrucciones 1, en caso contrario, se comprueba la
condición 2 y así sucesivamente hasta que una condición devuelve True
o bien, si ninguna de las condiciones lo hace, se ejecuta el bloque de
instrucciones n,

La estructura de decisión Select Case.

En lenguaje natural equivale a "En el caso que...o que". Esta estructura

es muy similar a If...Then...Else. De hecho todo lo que hace Select
Case se puede hacer con If...Then...Else, sólo que Select Case
consigue un código más legible cuando son varias las opciones. Su
sintaxis es:

Select Case expresiónPrueba

[Case listaExpresiones1
[bloque de instrucciones 1]]..
[Case listaExpresiones2
[bloque de instrucciones 1]]..
.
.
.
[Case Else
[bloque de instrucciones n]].
End Select

donde:

 expresiónPrueba = expresión que es evaluada sólo una vez y que

puede devolver cualquier valor de cualquier tipo.
 listaExpresiones 1 = es una lista de valores con los que se
compara expresiónPrueba, si existe una coincidencia entonces se
ejecuta el bloque de instrucciones 1, si no, se pasa a la siguiente
sentencia Case y así sucesivamente. Si existe más de una
sentencia Case que contiene un valor coincidente sólo se ejecuta
el bloque de instrucciones asociado a la primera coincidencia.
  bloque de instrucciones n = es el bloque de instrucciones que se
ejecuta en caso de que no se encuentre ninguna coincidencia.

En concreto para nuestra aplicación utilizaremos el primer tipo

If...Then.

En lenguaje natural diríamos:

Si el tamaño del CM es impar y está entre 3 y 15 entonces

genera el CM del tamaño definido.

Para traducirlo a Vb debemos aprender a usar alguna de sus funciones.

Como ves, la condición debe ser: que cRazonCM sea impar y entre 3 y
15. Otra forma de expresarlo sería: que cRazonCM sea impar y que
cRazonCM sea mayor o igual a 3 y que cRazonCM sea menor o igual a
15. Los operadores lógicos mayor o igual que y menor o igual que son
>= y <= respectivamente, y la unión lógica Y es And. Luego la
segunda parte de la condición quedará ...(cRazonCM >= 3) And
(cRazonCM <= 15)... En este caso, los paréntesis están sólo para mayor
claridad, pero no son indispensables. La primera parte de la condición es
un poco más complicada.

¿Como podemos controlar que un número sea o no impar? En la vida

real, simplemente lo sabemos si el número en cuestión es o no divisible
por 2, pero en el cibermundo no existe una función así; en su lugar
tenemos la función Módulo m Mod n que nos devuelve el resto de
dividir m entre n; de manera que para saber si un número es impar sólo
debemos comprobar que el módulo de dicho número con respecto a 2 es
distinto de 0 que traducido a Vb será: ...cRazonCM Mod 2 <> 0 (el
operador lógico distinto de en Vb es <>); de manera que la estructura
de control queda:

If (cRazonCM Mod 2 <> 0) And (cRazonCM >= 3 And cRazonCM <= 15) Then
generar CM
End If

Este fragmento de código debe insertarse justo después de la línea

InputBox.

Bien, ya tenemos claro dónde colocar la estructura de control y el

InputBox y es dentro del evento Click del botón ; pero este evento lo
tenemos que modificar un poco. Para ello sigamos el diagrama de flujo
de la figura 2.4:
 Figura 2.4- Diagrama de Flujo

Como podemos ver, nuestra aplicación sólo actuará si el dato

introducido es válido. Pero ¿que líneas debe haber dentro de la
estructura de control If...Then? Evidentemente ya no nos sirven las que
teníamos, pues esas sólo generaban un CM de 3x3, y ahora el usuario
puede pedirlo de 7x7, 11x11, etc. Luego ¿vamos a crear un grupo de
líneas para cada tamaño? En nuestro caso sería posible, ya que hemos
definido un número finito de opciones al usuario, en concreto sólo puede
pedirnos 8 CM's distintos (3x3, 5x5, 6x6, 7x7, 9x9, 11x11, 13x13 y
15x15) lo cual representaría ocho grupos de líneas diferentes, un poco
de tedioso trabajo nada más. Pero ¿que pasa si queremos aumentar las
posibilidades de nuestra aplicación?, ¿que pasa si queremos que nuestro
programa pueda crear CM's de 100x100 o de1000x1000?, la cosa
cambia. Evidentemente ésta no es la solución. ¡Hagamos que las
computadoras trabajen por nosotros! pero ¿Como?
Para que esto sea posible, debe existir un método genérico para rellenar
los CM's y así es.

El Método.

Para rellenar un CM debemos seguir las siguientes reglas

independientemente del tamaño:

1. El número 1 se coloca SIEMPRE en la columna central de la última fila.

2. Los siguientes números se colocan de forma secuencial, es decir, en el orden
natural, a partir del 2 y hasta el último que será siempre, el resultado de
multiplicar la razón por sí misma.
 3. Colocamos cada número siempre en la fila siguiente y en la siguiente
columna, excepto el caso de la regla 5.
4. Al aplicar la regla 3, si nos encontramos en la última fila, entonces la fila 1 es
considerada como la siguiente fila. Del mismo modo, si nos encontramos en la
última columna, la columna 1 se considera la siguiente columna.
5. Como excepción a la regla 3, cuando el último número introducido es igual a
la razón o múltiplo de ella, entonces el siguiente número se coloca en la
fila anterior y en la misma columna.
6. Para la regla 5, si nos encontramos en la primera fila, la última fila
corresponde a la fila anterior.

Y eso es todo. Parece increíble ¿verdad?, pero funciona, te lo aseguro. Y

si no lo crees, compruébalo por ti mismo. Y resumiendo, el código del
evento Click del botón debe quedar así:

Private Sub btnSi_Click()

Dim cRazonCM As Integer

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.

Los Procedimientos Sub.

Más arriba en esta lección ya hablamos de las funciones y los

procedimientos. Una de las principales razones para crear
procedimientos es el hecho de que un determinado grupo de líneas de
código se repita varias veces en un programa. Cuantas más veces se
repita, más importante es el ahorro en líneas de código. Además, hacen
los programas más fáciles de mantener, ya que si tenemos que efectuar
alguna modificación a dicho código, sólo lo haremos una vez. Otra razón
es la de simplificar los programas en unidades lógicas más pequeñas.
También es importante su capacidad de reutilización para otros
programas.
Aunque en nuestra aplicación el código para generar el CM sólo se va a
ejecutar una vez, vamos a crear un procedimiento más bien, por
razones de aprendizaje y claridad que por necesidad. A nuestro
procedimiento lo llamaremos GeneraCM y para crearlo, lo único que
tenemos que hacer es, en el editor de código, situarnos al final de
cualquier función o procedimiento existente y teclear:

Sub GeneraCM +

y automáticamente aparecen las líneas de división (si tienes activada

esta opción) así como el código de fin de procedimiento:

End Sub

y es entre estas dos líneas en las que desarrollaremos el algoritmo.

Si hemos dicho que este procedimiento debe servir para generar

cualquier tamaño de CM, entonces, tiene que haber alguna forma de
que el procedimiento se entere del tamaño deseado. Para esto sirven los
parámetros.

Los Parámetros.

A diferencia de las funciones, los procedimientos o procedimientos

Sub no se pueden llamar incluyendo su nombre en una expresión. Para
llamar a un procedimiento Sub desde nuestro código existen dos
métodos diferentes:

 Call Nombre_del_procedimiento [(Parámetro1[,

Parámetro2,...Parámetron])]
 Nombre_del_procedimiento [Parámetro1[,
Parámetro2,...Parámetron]]

Observa que cuando utilizas el primer formato, los parámetros deben ir

entre paréntesis. Pero ¿que son los parámetros? Es la forma en que
nosotros, desde nuestro código, le pasamos datos a las funciones o
procedimientos para que los utilicen. También se les conoce como
argumentos y se pueden pasar de dos formas:

 por valor
 por referencia

Cuando se pasa un argumento o parámetro por valor lo que se le pasa

al procedimiento en realidad es una copia de la variable y no la variable
en sí, de manera que, si el procedimiento modifica la variable, los
cambios sólo afectan a la copia de la variable y no a la variable original.
Para pasar un parámetro por valor se utiliza la palabra clave ByVal en la
definición del procedimiento, por ejemplo:

Sub Nombre_del_procedimiento (ByVal Parámetro as Tipo_de_dato)

Cuando se pasa una parámetro por referencia, que es la forma

predeterminada para Vb, se le pasa al procedimiento el contenido real
de la variable en su ubicación original. Si el procedimiento modifica el
parámetro, modifica la variable en sí. El formato es:

Sub Nombre_del_procedimiento (Parámetro [as Tipo_de_dato])

Luego nuestro procedimiento quedará como sigue:

Sub GeneraCM (pcRazonCM As Integer)

End Sub

Como puedes ver, he añadido una p al nombre del parámetro para

diferenciarlo de la variable en sí y lo definimos del tipo Integer
(entero).

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.

El tipo de dato Array.

Para declarar una matriz en Vb usamos la palabra clave Dim, a
continuación el nombre de la matriz seguido, entre paréntesis, del límite
superior. Las matrices en Vb pueden ser unidimensionales y
multidimensionales. El límite superior de cada dimensión no puede
exceder de un tipo de dato Long (-2.147.483.648 a 2.147.483.647). A
menos que se indique lo contrario el subíndice del primer elemento es 0.
Así por ejemplo:

 Dim Alumnos(45) As String - define una matriz unidimensional

de 46 elementos del tipo String
 Dim dias(11) As Integer - define una matriz unidimensional de
12 elementos del tipo Integer
 Dim meses(1 To 12) As Integer - define una matriz
unidimensional de 12 elementos del tipo Integer especificando el
límite inferior igual a 1
 Dim CuadradoMágico() As Integer - define una matriz dinámica
del tipo Integer.

Una matriz dinámica es aquella que durante la ejecución de la

aplicación, puede cambiar de tamaño. Como la declaración anterior sólo
permite constantes como límites, no podemos definir los límites de
nuestra matriz en la declaración, así que usaremos la sentencia Redim
la cual funciona igual que Dim pero que nos permite el uso de variables
para las dimensiones. Luego en nuestro código debe declararse la matriz
como sigue:

Sub GeneraCM (pcRazonCM As Integer)

CuadradoMagico() As Integer
Redim CuadradoMagico(pcRazonCM, pcRazonCM)

End Sub

de esta forma, nuestro procedimiento creará una matriz diferente según

el tamaño elegido por el usuario.

¿Por que usar una Matriz? La respuesta es bien sencilla. En primer

lugar, es mucho más cómodo trabajar en memoria al rellenar el CM que
sobre los labels del formulario y, además, al tratarse de una matriz
cuadrada con filas y columnas, resulta muy fácil a la hora de referirnos a
cada elemento de la matriz como si de una celda de la matriz se tratara,
utilizando las dos dimensiones como equivalentes de la fila y la columna.

Una vez entendido esto, sigamos con el desarrollo del algoritmo.

En primer lugar definamos su principal tarea. En lenguaje coloquial
diremos "Rellenar el CM" y esto consiste ni más ni menos que en
recorrer todos los números, desde el 1 hasta el resultado de multiplicar
la razón por si misma. (Por ejemplo: si la razón es 7 los números serán
desde el 1 hasta el 49).

Como esto es una tarea repetitiva, existe un tipo de estructura de

control de flujo que ya hemos visto en la primera lección, conocida como
"Estructura de bucle" Este tipo de estructura es, en gran medida, lo que
hace realmente útiles los programas ya que pueden repetir una tarea
determinada, cientos, miles, incluso millones de veces.

Estas repeticiones (también conocidas como iteraciones), pueden

realizarse un número finito de veces y entonces los llamamos "bucles
determinados"; también pueden repetirse hasta que se cumpla una
determinada condición, a estos los llamamos "bucles
indeterminados".

En nuestro caso vamos a necesitar.......

Si pensaste en un bucle determinado acertaste. El número de

iteraciones de nuestro programa será finito, (desde 1 hasta 49 en el
ejemplo). La estructura de control del tipo bucle determinado de Vb
es el conocido como bucle For...Next, que ya utilizamos en la primera
lección. Su diagrama de flujo es el de la figura 2.n y su sintaxis es como
sigue:

For contador = valor_inicial To valor_final [Step incremento|decremento]

grupo de instrucciones que componen la iteración
Next [contador]

y su explicación es como sigue:

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)

Luego, para nuestro código tomaremos los siguientes valores:

 valor_inicial = 1
 valor_final = pcRazonCM x pcRazonCM
 incremento = 1 (predeterminado)

esto es, el contador empezará con el valor 1, ejecutará las sentencias

del cuerpo del bucle e incrementará el contador en 1 repitiendo el
cuerpo del bucle hasta que el contador sea mayor que el valor_final
pasando en dicho caso a ejecutar las líneas de código a cuntinuación del
Next.
De manera que en nuestro código quedará:

For n = 1 To pcRazonCM * pcRazonCM

Cuerpo del bucle
Next

Como puedes ver, utilizo n como contador, aunque puedes darle

cualquier nombre. También notarás que Vb utiliza el asterisco * como
operador de la multiplicación. Al ser el incremento igual a 1, que es el
valor predeterminado, no necesita especificarse.

Ahora recordemos la primera regla para rellenar un CM:

1. El número 1 se coloca SIEMPRE en la columna central de la última fila.

Calcular la última fila es fácil ya que coincide con el valor de la razón y

calcular la columna central también, ya que es igual a la mitad de la
razón más uno. Pero como esta regla sólo debe cumplirse para un
elemento, es decir, sólo para el primer elemento, la asignación de la fila
y columna correspondiente la haremos fuera del bucle, así:

Sub GeneraCM(pcRazonCM As Integer)

Dim CuadradoMagico() As Integer

Dim nFila As Integer, nColumna As Integer, n As Integer
Redim CuadradoMagico(pcRazonCM, pcRazonCM)

nFila = pcRazonCM
nColumna = pcRazonCM / 2 + 1

For n = 1 To pcRazonCM * pcRazonCM

Cuerpo del bucle
Next

Como puedes ver, usamos la operación pcRazonCM / 2 +1 para calcular

la columna central, pero quizá estés pensando que el resultado real
sería un número de columna fraccionario, (por ejemplo, para un rango
de 15, sería igual a 8.5), pero como hemos definido el tipo de dato de
nColumna a Integer (entero) Vb se encarga automáticamente de
truncar el número para convertirlo en entero.

Ahora debemos asignar el número n al elemento de la matriz de fila

nFila y columna nColumna. En Vb la sintaxis para asignar valores a
elementos de una matriz es la siguiente:
CuadradoMagico( nFila, nColumna ) = n

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.

En primer lugar nos encontramos con que debemos comprobar si n es

múltiplo de pcRazonCM; en caso afirmativo ejecutar una acción y, en
caso contrario, ejecutar otra distinta. Para esto utilizamos la estructura
de decisión If...Then...Else. Para saber si n es múltiplo de pcRazonCM
usamos de nuevo la función Mod (mòdulo).

If n Mod pcRazonCM = 0 Then

'Acciones a ejecutar si n es múltiplo de pcRazonCM
Else
'Acciones a ejecutar si n NO es múltiplo de pcRazonCM
End If

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.

Ahora, dentro de las acciones a ejecutar si n es múltiplo de pcRazonCM,

el método de relleno de CM's nos dice que el siguiente elemento debe
colocarse en la fila anterior y en la misma columna, pero si la fila es
igual a 1 entonces la fila debe ser igual a la razón. Luego nos
encontramos con otra toma de decisión que se traduce en una
estructura de control If...Then...Else dentro de la primera, lo que se
conoce con estructuras anidadas. Y el código es el siguiente:

If n Mod pcRazonCM = 0 Then

'Acciones a ejecutar si n es múltiplo de pcRazonCM
If nFila = 1 Then
nFila = pcRazonCM
Else
nFila = nFila - 1
End if
Else
'Acciones a ejecutar si n NO es múltiplo de pcRazonCM
End If

Observa como indentamos (colocamos un poco más a la derecha) las

líneas que pertenecen a una estructura; esto no es obligatorio, pero nos
ayuda a ver con mucho más claridad el código.

Por último, para las acciones a ejecutar si n NO es múltiplo de

pcRazonCM, tenemos que el método nos dice que tanto la fila como la
columna del siguiente elemento debe ser la siguiente pero que tanto si
la fila como la columna son la última, entonces deben ser la primera.

Y con esto concluye la Lección II.

Ejercicio de control.
Como ejercicio de comprobación de esta lección deberás hacer lo
siguiente:

1. Escribe el código para las acciones a ejecutar si n NO es múltiplo de

pcRazonCM, de manera que cumpla con el método de relleno de CM's.
2. Comprueba las líneas de código escritas hasta ahora, aunque el programa
funciona, existe un error que probablemente ya has detectado. Si no es así,
trata de encontrarlo y una vez que lo encuentres, documéntalo y propón la
solución.
3. Una vez terminado y comprobado el código, guarda los cambios y
posteriormente envíame por e-mail tu proyecto y la respuesta al número 2. Si
no sabes como hacerlo pulsa aquí para las instrucciones detalladas.

Si consideras que ya estás preparado, puedes acceder al examen de la

Lección II