El Cuadrado Mágico


Temas

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:

 4  9  2 
 3  5  7
 8  1  6

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í:

Entorno de Desarrollo Integrado de Visual Basic 6.0

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. 

Ventana de propiedades

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


Hit Counter