Tutorial Visual 2010
Tutorial Visual 2010
Actualizacin: noviembre 2007 Visual Basic Express es una manera rpida y sencilla de crear programas para Microsoft Windows. Aunque no tenga experiencia de programacin en Windows, con Visual Basic dispone de un completo conjunto de herramientas para simplificar las tareas de desarrollo. Y qu es Visual Basic? "Visual" hace referencia al mtodo utilizado para crear lo que ve el usuario, la interfaz grfica de usuario o GUI. "Basic" hace referencia al lenguaje de programacin BASIC, de Beginners All-Purpose Symbolic Instruction Code (Cdigo de Instruccin Simblico Todo Propsito para Principiantes), un lenguaje utilizado por ms programadores que cualquier otro lenguaje en la historia de la informtica. Puede crear programas tiles slo con aprender algunas de sus caractersticas. Los vnculos siguientes le servirn para empezar a programar en Visual Basic; cada vnculo incluye ejemplos, as como acceso a informacin adicional.
Comparaciones: Utilizar expresiones para comparar valores Cmo escribir cdigo que compara valores numricos.
Su primer programa
Preparado para un poco de programacin real? Los vnculos siguientes le guiarn por el proceso de creacin de un programa simple y le mostrarn cmo buscar los errores del programa. Hacer que el equipo haga algo: escribir el primer procedimiento Cmo escribir cdigo que indica a su programa que realice una accin determinada. Hacer que un programa repita acciones: establecer bucles For...Next Cmo escribir cdigo que repite acciones en su programa y cuenta las veces que stas se han realizado. Hacer que un programa elija entre dos posibilidades: la instruccin If...Then Cmo escribir cdigo que hace cosas diferentes en respuesta a condiciones diferentes. Qu hacer cuando algo sale mal: control de errores Cmo escribir cdigo que controla los errores de sus programas. Tambin obtendr informacin sobre los diferentes tipos de errores.
Cmo ejecutar cdigo basndose en varias condiciones donde hay muchas elecciones. Paseo con gua por Visual Basic Ms tareas que puede realizar con el lenguaje de programacin Visual Basic.
Actualizacin: noviembre 2007 Antes de comenzar el aprendizaje del lenguaje de programacinVisual Basic, puede resultarle til entender qu es un lenguaje de programacin y cmo funciona. Tambin puede resultarle til familiarizarse con algunos trminos que se utilizan en programacin. El mejor punto de partida es comenzar con los conceptos bsicos.
Qu es un lenguaje de programacin?
Las personas se expresan utilizando un lenguaje compuesto de muchas palabras. Los equipos utilizan un lenguaje simple, que slo consta de ceros y unos; el 1 significa "activado" y el 0 significa "desactivado". Tratar de hablar con un equipo en su propio lenguaje sera como tratar de hablar con sus amigos utilizando el cdigo Morse; se puede hacer, pero no es necesario. Un lenguaje de programacin acta como un traductor entre el usuario y el equipo. En lugar de aprender el lenguaje nativo del equipo (conocido como lenguaje mquina), se puede utilizar un
lenguaje de programacin para dar instrucciones al equipo de un modo que sea ms fcil de aprender y entender. Un programa especializado conocido como compilador toma las instrucciones escritas en el lenguaje de programacin y las convierte en lenguaje mquina. Esto significa que, como programador de Visual Basic, no necesita entender lo que el equipo hace o cmo lo hace. Basta con que entienda cmo funciona el lenguaje de programacin de Visual Basic.
Las variables son un concepto importante en programacin. Una variable es una letra o un nombre que puede almacenar un valor. Al crear programas, se pueden utilizar variables para almacenar nmeros, por ejemplo, el alto de un edificio, o palabras, por ejemplo, el nombre de una persona. Resumiendo, se pueden utilizar variables para representar cualquier tipo de informacin que el programa necesite. Puede surgir la pregunta, "Por qu utilizar una variable cuando en su lugar se puede utilizar simplemente la informacin?" Como su nombre indica, las variables pueden cambiar el valor que representan cuando el programa se est ejecutando. Por ejemplo, puede escribir un programa para realizar el seguimiento del nmero de caramelos que tiene en un frasco en su escritorio. Dado que los dulces se comen, es probable que la cantidad de caramelos del frasco cambie con el tiempo. En lugar de volver a escribir el programa cada vez que quiere comerse un caramelo, puede representar el nmero de caramelos con una variable que cambia con el tiempo.
Hay tres pasos para utilizar una variable: 1. 2. 3. Declarar la variable. Indicar al programa el nombre y el tipo de variable que se desea utilizar. Asignar la variable. Proporcionar un valor a la variable. Utilizar la variable. Recuperar el valor contenido en la variable y utilizarlo en el programa.
Declarar variables
Cuando declara una variable, tiene que decidir qu nombre y qu tipo de datos asignarle. Puede asignar a la variable cualquier nombre que desee, siempre y cuando el nombre empiece con una letra o un carcter de subrayado. Cuando se usa un nombre que describe el contenido de la variable, el cdigo es ms fcil de leer. Por ejemplo, una variable que controla el nmero de caramelos del frasco puede llamarse totalCandy. Una variable se declara mediante las palabras claveDim y As, como se muestra a continuacin. VB Copiar
Esta lnea de cdigo indica al programa que se desea utilizar una variable denominada aNumber, que almacene nmeros enteros (el tipo de datos Integer). Puesto que aNumber es un Integer, slo puede almacenar nmeros enteros. Por ejemplo, si desea almacenar 42,5 utilizar el tipo de datos Double. Y si desea almacenar una palabra, utilizar un tipo
de datos String. Otro tipo de datos que vale la pena mencionar en este punto es Boolean, que puede almacenar un valor True o False. Aqu hay ms ejemplos de cmo declarar las variables. VB Copiar
Nota:
Puede crear una variable local sin declarar el tipo de la variable utilizando la inferencia de tipos de variable local. Al utilizar la inferencia de tipos de variable local, el valor que le asigna determina el tipo de la variable. Para obtener ms informacin, vea Inferencia de tipo de variable local.
Para obtener ms informacin sobre otros tipos de variable, vea Informacin detallada: tipos de datos.
Asignar variables
Se asigna un valor a la variable con el signo =, que a veces se denomina operador de asignacin, como se muestra en el ejemplo siguiente. VB Copiar
aNumber = 42
Esta lnea de cdigo toma el valor 42 y lo almacena en la variable declarada previamente denominada aNumber.
Como se mostr anteriormente, puede declarar una variable en una lnea de cdigo y asignar ms adelante el valor en otra lnea. Esto puede producir un error si intenta utilizar la variable antes de asignarle un valor. Por esa razn, es mejor declarar y asignar las variables en una lnea nica. Aunque no sepa an el valor que contendr la variable, puede asignar un valor predeterminado. El cdigo para declarar y asignar las mismas variables mostradas anteriormente ser similar al siguiente. VB Copiar
Dim aDouble As Double = 0 Dim aName As String = "default string" Dim YesOrNo As Boolean = True
Si declara las variables y asigna los valores predeterminados en una sola lnea, puede evitar posibles errores. Todava puede utilizar la asignacin para dar despus un valor diferente a la variable.
Intntelo
En este ejercicio, escribir un breve programa que crea cuatro variables, les asigna valores y a continuacin muestra cada valor en una ventana llamada cuadro de mensaje. Comencemos creando el proyecto donde se almacenar el cdigo.
2.
Dim aInteger As Integer = 42 Dim aSingle As Single = 39.345677653 Dim aString As String = "I like candy" Dim aBoolean As Boolean = True
Este cdigo declara cuatro variables y asigna sus valores predeterminados. Las cuatro variables son Integer, Single, String y Boolean.
Sugerencia:
Al escribir el cdigo, quiz haya observado que despus de escribir As, aparece una lista de palabras bajo el cursor. Esta caracterstica se llama IntelliSense. Permite escribir las primeras letras de una palabra hasta que se seleccione la palabra en la lista. Una vez seleccionada, presione la tecla TAB para finalizar la palabra.
Nota:
Siempre que representa texto real en un programa, ste debe aparecer entre comillas (""). Esto le dice al programa que interprete el texto como texto real en lugar de interpretarlo como un nombre de variable. Cuando asigna un valor True o False a una variable Boolean, la palabra no se encierra entre comillas, porque True y False son palabras clave de Visual Basic, con significados especiales propios.
3.
Debajo del cdigo que escribi en el paso anterior, escriba lo siguiente. VB Copiar
MsgBox(aBoolean)
Este cdigo indica al programa que muestre cada valor que asign en el paso anterior en una nueva ventana, utilizando la funcinMsgBox. 4. Presione F5 para ejecutar el programa. Haga clic en Aceptar para cada cuadro de mensaje que aparezca. Observe que se muestra cada vez el valor de cada variable. Puede cerrar el formulario haciendo clic en la x situada en la esquina superior derecha del formulario. Cuando haya finalizado el programa, puede volver y cambiar los valores que se asignaron en el cdigo; compruebe que los nuevos valores aparecen la siguiente vez que ejecute el programa.
Actualizacin: noviembre 2007 En esta leccin, aprender a utilizar el tipo de datos String para representar palabras y texto. En la leccin anterior, se mostraba cmo usar las variables para almacenar datos en un programa y que cada variable debe ser del tipo adecuado para los datos que almacenar. En esta leccin, aprender sobre el tipo de datos String utilizado para almacenar el texto.
Qu es una cadena?
Una cadena es cualquier serie de caracteres de texto, como letras, nmeros, caracteres especiales y espacios. Las cadenas pueden ser frases y oraciones legibles, como "El rpido zorro de color caf salta sobre el perro perezoso" o una combinacin aparentemente ininteligible como "@#fTWRE^3 35Gert". Las variables String se crean del mismo modo que otras variables, es decir, declarando primero la variable y asignndole despus un valor, tal y como se muestra a continuacin. VB
Copiar
Al asignar un texto real (tambin denominado literales de cadena) a una variable String, el texto debe estar entre comillas (""). Tambin puede utilizar el carcter = para asignar una variable String a otra variable String, como se muestra en este ejemplo. VB Copiar
El cdigo anterior establece el valor de bString en el mismo valor que aString (This is a string). Puede usar el carcter & para combinar dos o ms cadenas secuencialmente en una nueva cadena, tal y como se muestra a continuacin. Esta operacin tambin recibe el nombre de concatenacin. VB Copiar
Dim aString As String = "using string" Dim bString As String = "variables" Dim cString As String = "" cString = aString & bString
El ejemplo anterior declara tres variables de String y asigna respectivamente "using string" y "variables" a las dos primeras, y luego asigna los valores combinados de las dos primeras a la tercera variable. Cul cree que es el valor de cString? Le sorprender saber que el valor es using stringvariables ya que no hay ningn espacio al final de aString ni al inicio de bString. Las dos cadenas simplemente estn unidas. Si desea agregar espacios o cualquier otro smbolo entre dos cadenas, deber hacerlo mediante un literal de cadena, como " ", tal y como se muestra a continuacin.
VB Copiar
Dim aString As String = "using string" Dim bString As String = "variables" Dim cString As String = "" cString = aString & " " & bString
Intntelo
Dim aString As String = "Concatenating" Dim bString As String = "Without" Dim cString As String = "With" Dim dString As String = "Spaces"
5.
Agregue el siguiente cdigo para concatenar las cadenas y mostrar los resultados: VB
Copiar
' Displays "Concatenating With Spaces". MsgBox(aString & " " & cString & " " & dString)
6.
Presione F5 para ejecutar el programa. El texto mostrado en el cuadro de mensaje es el resultado de la unin de las variables de cadena asignadas en un paso anterior. En el primer cuadro, las cadenas estn unidas sin espacios. En el segundo, los espacios se insertan explcitamente entre cada cadena.
Actualizacin: noviembre 2007 En esta leccin, aprender a utilizar matrices para almacenar grupos de valores. Tal y como se ha explicado en las lecciones anteriores, las variables se usan para almacenar diferentes tipos de datos que el programa utiliza. Hay otro tipo de variable denominado matriz que proporciona una manera conveniente de almacenar diversos valores del mismo tipo. Por ejemplo, supongamos que est escribiendo un programa para un equipo de bisbol y desea almacenar los nombres de todos los jugadores que se encuentran en el campo de juego. Puede crear nueve variables de cadenas distintas, una para cada jugador, o puede declarar una variable de matriz que se parezca al cdigo que se muestra a continuacin. VB Copiar
Una variable de matriz se declara colocando parntesis despus del nombre de la variable. Si se sabe por anticipado cuntos valores deben almacenarse, tambin se puede especificar el tamao de la matriz en la declaracin de la siguiente manera. VB Copiar
El tamao de la matriz es 9 porque un equipo del bisbol tiene 9 jugadores. Una matriz est formada por una serie de valores, o elementos, que comienzan con el elemento 0 y terminan con un nmero inferior al especificado en la declaracin. En este caso, la matriz contiene los elementos 0 a 8, de un total de nueve. Si desea hacer referencia a uno de los jugadores del equipo, basta con que reste 1. Por ejemplo, para hacer referencia al primer jugador, debe hacer referencia al elemento 0, para hacer referencia al noveno jugador, debe hacer referencia al elemento 8.
Al igual que ocurre con otros tipos de valores, es necesario asignar valores a las matrices. Para ello, debe hacer referencia al nmero del elemento como parte de la asignacin, tal y como se muestra a continuacin. VB Copiar
En el cdigo anterior, el valor John se asigna al primer elemento de la matriz (elemento 0) y el valor Bart se asigna al cuarto elemento (elemento 3). Los elementos de la matriz no se tienen que asignar en orden y cualquier elemento sin asignar tendr un valor predeterminado; en este caso, una cadena vaca. Al igual que con otros tipos de valores, puede declarar y asignar los valores a una matriz en una lnea nica de la siguiente manera. VB Copiar
En este caso, las llaves indican una lista de valores. Los valores se asignan a los elementos en el orden mostrado. Observe que no se especifica el tamao de la matriz, lo determina el nmero de elementos que se muestran.
Al igual que se usan nmeros para especificar la posicin de un elemento en una matriz, para especificar el valor que se desea recuperar se utiliza el nmero de elemento. VB Copiar
El cdigo anterior recupera el cuarto elemento de la matriz y lo asigna a la variable de cadena AtBat.
Intntelo
Dim players() As String = {"Dan", "Fred", "Bart", "Carlos", _ "Ty", "Juan", "Jay", "Sam", "Pedro"} Dim i As Integer = CInt(Textbox1.Text) MsgBox(players(i) & " is on first base.")
Observe que el cdigo anterior usa la funcin CInt para convertir el valor String (TextBox1.Text) en un valor Integer (i). Puede obtener ms informacin sobre las conversiones en Informacin detallada: convertir un tipo de variable en otro. 8. 9. Presione F5 para ejecutar el programa. Escriba un nmero comprendido entre 0 y 8 en el cuadro de texto y haga clic en el botn. Se muestra el nombre que corresponde a ese elemento en un cuadro de mensaje.
Sugerencia:
Debera escribir cdigo adicional para comprobar que los datos escritos son vlidos. Por ejemplo, puede comprobar que el valor escrito es un valor numrico comprendido entre 0 y 8. Para obtener ms informacin, consulte Qu hacer cuando algo sale mal: control de errores.
Actualizacin: noviembre 2007 En esta leccin, aprender a crear expresiones para realizar operaciones aritmticas y devolver valores. Una expresin es un segmento de cdigo que realiza operaciones aritmticas y, a continuacin, devuelve un valor. En el siguiente ejemplo se muestra una expresin de suma simple: 5+4
La expresin 5 + 4, cuando se evala, devuelve el valor 9, y est formada por dos partes: los operandos (5 y 4), que son los valores con los que se realiza la operacin, y el operador (+), que especifica la operacin que se va a realizar.
Para que una expresin sea til, se debe realizar una accin con el valor que se devuelve. Lo ms comn es asignar el valor a una variable, tal y como se muestra a continuacin. VB Copiar
Este ejemplo declara una nueva variable Integer, llamada anInteger y le asigna el valor devuelto por 5 +4.
Operadores aritmticos
Las expresiones habitualmente se utilizan para realizar operaciones aritmticas con variables: suma, resta, multiplicacin o divisin. En la tabla siguiente se describen los operadores que se usan con ms frecuencia en las operaciones aritmticas.
Operador
+ (suma)
Descripcin
Devuelve la suma de dos operandos
Ejemplo
5+4
- (resta)
5-4
* (multiplicacin)
5*4
/ (divisin)
5/4
El tipo de variable utilizado para realizar la operacin aritmtica puede afectar al resultado. La divisin de dos nmeros a menudo da como resultado un valor que no es un nmero entero. Por ejemplo, cuando se divide 3 por 2, el resultado es 1,5. Si se asigna el valor devuelto de esa expresin a una variable Integer, se redondear al nmero entero ms cercano. Al realizar la divisin, se debe utilizar una variable Double para almacenar el valor devuelto.
Nota:
Tambin se puede convertir una variable de un tipo de datos en otra mediante las funciones de conversin de Visual Basic. Para obtener ms informacin, vea Informacin detallada: convertir un tipo de variable en otro.
Intntelo
Las dos primeras lneas declaran las variables A y B. A y B contendrn los valores numricos utilizados en este programa y asignarn los valores de los dos controles TextBox (su texto) a las variables A y B.
Las cuatro lneas finales crean expresiones con las dos variables y cada uno de los operadores aritmticos bsicos y muestran los resultados de esas expresiones en un cuadro de mensaje. 8. 9. Presione F5 para ejecutar la aplicacin. Escriba un nmero en cada cuadro de texto y haga clic en Button1.
Nota:
Si escribe algn otro carcter en los cuadros de texto, se producir un error.
10. Las expresiones se crean usando los dos nmeros que se escriben y uno de los cuatro operadores aritmticos bsicos (suma, resta, multiplicacin y divisin). El resultado de cada expresin se muestra en un cuadro de mensaje.
Actualizacin: noviembre 2007 En esta leccin, obtendr informacin sobre cmo utilizar los operadores de comparacin para crear expresiones que comparan valores. En la ltima leccin, vimos cmo utilizar operadores aritmticos para crear expresiones numricas y devolver valores numricos. Se puede utilizar otro tipo de operador, los operadores de comparacin, para comparar valores numricos y devolver valores Boolean (True o False). Los operadores de comparacin se utilizan frecuentemente para comparar valores y tomar decisiones basadas en esa comparacin. La toma de decisiones en el programa se tratar exhaustivamente en Hacer que un programa elija entre dos posibilidades: la instruccin If...Then. La siguiente tabla resume los operadores de comparacin:
Operador
= (igual)
Descripcin
Devuelve True si el nmero del lado izquierdo es igual al nmero del lado derecho.
Ejemplos
5 = 4 (falso) 4 = 5 (falso)
4=4 (verdadero)
Intntelo
6. 7.
Haga doble clic en Button para abrir el Editor de cdigo. En el controlador de eventos Button1_Click, escriba el siguiente cdigo: VB Copiar
Dim A As Double = CDbl(Textbox1.Text) Dim B As Double = CDbl(Textbox2.Text) MsgBox(A > B) MsgBox(A < B) MsgBox(A = B)
Las dos primeras lneas declaran las variables A y B, que contendrn los valores numricos usados en este programa; utilizan la instruccin CDbl para convertir el texto de Textbox1 y Textbox2 en valores numricos. Finalmente, las ltimas tres lneas crean expresiones que permiten comparar las dos variables mediante tres operadores de comparacin bsicos y muestran los resultados de esas expresiones en tres cuadros de mensaje. 8. 9. Presione F5 para ejecutar la aplicacin. Escriba un nmero en cada uno de los cuadros de texto y haga clic en Button1. El primer cuadro de mensaje mostrar True si A (el nmero que escribi en el primer cuadro de texto) es mayor que B (el nmero que escribi en el segundo cuadro de texto); de lo contrario, mostrar False. El segundo cuadro de mensaje mostrar True si A es menor que B, y el tercer cuadro de mensaje mostrar True si ambos nmeros son iguales. Pruebe a escribir diferentes nmeros en los cuadros de texto para ver cmo cambian los resultados.
Como se explic en lecciones anteriores, hay distintos tipos de variables. El tipo determina la clase de datos que puede contener una variable. Una variable de tipo Integer slo puede contener datos numricos sin separadores decimales. Una variable de tipo String slo puede contener texto. Qu pasa cundo desea mostrar un valor Integer en un control TextBox que requiere una variable de tipo String? La respuesta es que los datos se deben convertir de un tipo a otro. En este tema, estudiar cmo convertir los datos de un tipo en otro y aprender algunas tcnicas utilizadas para la conversin de datos, as como algunos de sus problemas habituales.
Cada variable de Visual Basic se puede convertir en texto usando una funcin especial llamada CStr (que es la abreviatura del ingls Convert to String: convertir en cadena). Esta funcin, como el nombre implica, devuelve los datos representados por la variable como de tipo String. El procedimiento siguiente muestra un ejemplo sencillo de convertir un valor Integer en texto.
Intntelo!
Este cdigo declara una variable de tipo entero llamada anInteger, le asigna un valor de 54 y, a continuacin, convierte ese valor en texto y lo muestra en un cuadro de mensaje llamando a la funcin CStr. 6. Presione F5 para compilar y ejecutar la aplicacin. Aparece un cuadro de mensaje que indica 54.
Probemos algo slo por diversin. En el Editor de cdigo, cambie la lnea que indica MsgBox(CStr(anInteger)) para que indique MsgBox(anInteger) y presione F5 para ejecutarla. Qu pasa? El programa se comporta exactamente igual que antes. Visual Basic es lo suficientemente inteligente para saber que realmente desea convertir la variable de tipo Integer en texto para que aparezca en el cuadro de mensaje. Sin embargo, no puede confiar en este comportamiento para todas las clases: existen muchos tipos de variables que no se pueden convertir automticamente. Por consiguiente, es una buena prctica usar siempre la funcin CStr, aun cuando una variable se convertira automticamente en texto. Adems de la conversin de variables Integer en texto, se puede utilizar la funcin CStr en cualquier tipo de dato numrico, como Double o Long. Tambin se puede utilizar para convertir la informacin de Date y tipos de datos Boolean en texto. Para obtener ms informacin sobre los tipos de datos, vea Informacin detallada: tipos de datos.
Como aprendi en la leccin aritmtica, a veces el resultado de una operacin aritmtica no se puede expresar como un valor de tipo Integer. Al igual que Visual Basic tiene una funcin para convertir nmeros en texto, tambin tiene funciones para convertir variables de un tipo de datos numricos en otro. Por ejemplo, puede utilizar la funcin CDbl (de Convert to Double) en una operacin aritmtica para devolver un nmero fraccionario al trabajar con variables de tipo Integer. El procedimiento siguiente muestra cmo utilizar la funcin CDbl al dividir dos enteros.
Intntelo!
Este cdigo declara dos variables de tipo Integer (A y B), les asigna los valores 1 y 2 y, a continuacin, convierte el resultado de la operacin de divisin (A / B) utilizando la funcin CDbl y lo muestra en un cuadro de mensaje.
2.
Presione F5 para compilar y ejecutar la aplicacin. Aparece un cuadro de mensaje que indica 0.5.
Visual Basic tambin tiene funciones para otros tipos de variables numricas. Por ejemplo, si agrega dos variables de tipo Double y desea redondear el resultado al nmero entero ms cercano, utilice la funcin CInt. Otras funciones de conversin numricas son CByte, CDec, CLng y CShort. Para obtener una lista de todas las funciones de conversin de Visual Basic, vea Funciones de conversin de tipos.
Actualizacin: noviembre 2007 En esta leccin, aprender a crear un procedimiento, es decir, un bloque de cdigo independiente que puede ejecutarse desde otros bloques de cdigo. A continuacin, aprender a crear parmetros para los procedimientos. Un procedimiento es simplemente un bloque de cdigo que indica al programa que realice una accin. Aunque es posible que no lo haya notado, ya se han utilizado procedimientos en las lecciones anteriores. Por ejemplo, la funcin MsgBox tiene un procedimiento integrado que realiza la accin de mostrar un cuadro de dilogo. Mientras Visual Basic tiene muchos procedimientos integrados para realizar las acciones comunes, siempre habr casos en que se desea que el programa realice una accin que un procedimiento integrado no puede controlar. Por ejemplo, la funcin MsgBox no puede mostrar un cuadro de dilogo que contenga una imagen. Es necesario escribir un procedimiento para realizar esta tarea.
Qu es un procedimiento?
Un procedimiento es un bloque de cdigo independiente que se puede ejecutar desde otros bloques de cdigo. En general, cada procedimiento contiene el cdigo necesario para realizar una tarea. Pongamos, por ejemplo, que dispone de un procedimiento denominado PlaySound que contiene el cdigo necesario para reproducir un archivo de onda. Aunque puede escribir el mismo cdigo para reproducir un sonido cada vez que el programa tenga que realizar un ruido, tiene ms sentido crear un procedimiento nico al que se pueda llamar en cualquier parte del programa. Un procedimiento se ejecutallamndolo en el cdigo. Por ejemplo, para ejecutar el procedimiento PlaySound, basta con que agregue una lnea de cdigo con el nombre del procedimiento, tal y como se muestra a continuacin.
PlaySound() Es todo lo que tiene que hacer. Cuando el programa llegue a esa lnea, ir al procedimiento PlaySound y ejecutar el cdigo all contenido. A continuacin, el programa regresa a la siguiente lnea que viene despus de la llamada a PlaySound. Puede llamar a tantos procedimientos como desee. Los procedimientos se ejecutan en el orden de llamada. Por ejemplo, podra tener tambin un procedimiento denominado DisplayResults; para ejecutarlo despus de ejecutar el procedimiento PlaySounds, llame a los procedimientos tal y como se muestra a continuacin. PlaySounds() DisplayResults()
Funciones y Subs
Existen dos tipos de procedimientos: las funciones y las subrutinas (tambin denominadas sub). Una funcin devuelve un valor al procedimiento que la llam, mientras que una subrutina simplemente ejecuta cdigo. Se llama a una subrutina cuando una lnea de cdigo, que contiene el nombre de sta, se agrega al programa como en el siguiente ejemplo. DisplayResults Las funciones son diferentes, porque las funciones no slo ejecutan cdigos, tambin devuelven un valor. Por ejemplo, imagine una funcin llamada GetDayOfWeek que devuelve un Integer que indica el da de la semana. Se llama a esta funcin declarando primero una variable para almacenar el valor devuelto y asignando despus el valor devuelto a la variable para un uso posterior, tal y como se muestra a continuacin. Dim Today As Integer Today = GetDayOfWeek En este ejemplo, el valor devuelto por la funcin se copia a la variable denominada Today y se almacena para un uso posterior.
Escribir procedimientos
Los procedimientos se escriben colocando primero una declaracin de procedimiento. Una declaracin de procedimiento realiza varias acciones. Indica si el procedimiento es una funcin o una subrutina, asigna un nombre al procedimiento y detalla todos los parmetros que puede tener. (Los parmetros se analizarn en profundidad ms adelante en esta leccin.) A continuacin, se ofrece un ejemplo de una declaracin de procedimiento sencilla. VB Copiar
La palabra clave Sub indica al programa que este procedimiento es una subrutina y no devolver un valor. El nombre de la subrutina (MyFirstSub) viene a continuacin y el parntesis vaco indica que no hay parmetros para este procedimiento. Finalmente, la palabra clave End Sub indica el fin de la subrutina. Todos los cdigos que tiene que ejecutar esta subrutina van entre estas dos lneas. Declarar funciones es similar, pero, adems, se debe especificar el tipo de valor devuelto (como por ejemplo,Integer, String, etc.). Por ejemplo, una funcin que devolvi un valor Integer puede ser similar a la siguiente. VB Copiar
Las palabras clave As Integer indican que la funcin devolver un valor Integer . Para devolver un valor desde una funcin, utilice la palabra clave Return, como se muestra en el ejemplo siguiente. VB Copiar
Intntelo
2. 3.
En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para Windows. En el cuadro Nombre, escriba MyFirstProcedure y, a continuacin, haga clic en Aceptar. Se abre un nuevo proyecto de formularios Windows Forms.
4. 5.
Haga doble clic en el formulario para abrir el Editor de cdigo. En el Editor de cdigo, busque la lnea que contiene End Class. Esta lnea indica el final de la seccin de cdigo que compone el formulario. Inmediatamente antes de esta lnea, agregue el siguiente procedimiento: VB Copiar
Esta funcin usa el procedimiento integrado Now para recibir la hora actual y, a continuacin, utiliza la funcin CStr para convertir el valor devuelto por Now en un valor de tipo String legible. Finalmente, ese valor String se devuelve como el resultado de la funcin. 6. Sobre la funcin que agreg en el paso anterior, agregue el siguiente Sub. VB Copiar
Esta subrutina llama a la funcin GetTime y muestra el resultado que devolvi en un cuadro de mensaje. 7. Finalmente, agregue una lnea al controlador del evento Form1_Load que llama a la subrutina DisplayTime, tal y como se muestra en el siguiente ejemplo. VB Copiar
DisplayTime()
8.
Presione F5 para ejecutar el programa. Cuando el programa se inicia, se ejecuta el procedimiento de evento Form1_Load. Este procedimiento llama a la subrutina DisplayTime, de manera que la ejecucin del programa va al procedimiento de subrutina DisplayTime. Esa subrutina a su vez llama a la funcin GetTime, por lo que la ejecucin del programa va a la funcin GetTime. Esta funcin devuelve una String que representa el tiempo para el procedimiento de subrutina DisplayTime, el que muestra esa cadena en un cuadro de mensaje. Despus de que la subrutina termina de ejecutarse, el programa contina normalmente y muestra el formulario.
A veces, ser necesario suministrar informacin adicional a los procedimientos. Por ejemplo, en el procedimiento PlaySound, se desea reproducir uno de varios sonidos diferentes. La informacin acerca de qu sonido debe reproducirse puede suministrarse utilizando parmetros. Los parmetros se parecen mucho a las variables. Tienen un tipo y un nombre y almacenan informacin al igual que las variables. Se pueden utilizar como variables en un procedimiento. Existen dos diferencias principales entre los parmetros y las variables:
Los parmetros se declaran en la declaracin de procedimiento, no en lneas individuales de cdigo. Slo se pueden utilizar los parmetros en el procedimiento en el que se declaran.
Los parmetros se declaran en la declaracin de procedimiento, en los parntesis que siguen al nombre del procedimiento. La palabra clave As se utiliza para declarar el tipo y la palabra clave ByVal precede generalmente a cada parmetro. Visual Basic agregar automticamente esta palabra clave si no se agrega, sta tiene una funcin bastante avanzada que va ms all de los temas tratados en esta leccin. A continuacin, se muestra un ejemplo de una subrutina con parmetros. VB Copiar
Sub PlaySound(ByVal SoundFile As String, ByVal Volume As Integer) My.Computer.Audio.Play(SoundFile, Volume) End Sub
Despus, se llamar a la subrutina con los valores para los parmetros, tal y como se muestra a continuacin. VB Copiar
PlaySound("Startup.wav", 1)
Los parmetros para las funciones tambin pueden declararse del mismo modo que hara con las subrutinas.
Intntelo
8.
Copiar
Dim aNumber As Integer = CInt(Textbox1.Text) Dim bNumber As Integer = CInt(Textbox2.Text) MsgBox(AddTwoNumbers(aNumber, bNumber))
Este cdigo declara dos enteros y convierte el texto de los dos cuadros de texto en valores enteros. Luego pasa dichos valores a la funcin AddTwoNumbers y muestra el valor devuelto en un cuadro de mensaje. 9. Presione F5 para ejecutar el programa. 10. Escriba un valor numrico en cada cuadro de texto y haga clic en el botn. Se sumarn los dos nmeros y el resultado se mostrar en un cuadro de mensaje.
Actualizacin: noviembre 2007 En esta leccin, aprender a utilizar la instruccin For...Next para repetir las acciones en el programa y para contar cuntas veces se han realizado estas acciones. Cuando escribe un programa, debe repetir las acciones con frecuencia. Por ejemplo, suponga que est escribiendo un mtodo que muestra una serie de nmeros en pantalla. Desear repetir la lnea de cdigo que muestra el nmero las veces que sea necesario. El bucle For...Next le permite especificar un nmero y repetir un cdigo contenido dentro de ese bucle para el nmero especfico de veces. El siguiente ejemplo muestra cmo aparece un bucle For...Next en un cdigo. VB Copiar
El bucle For...Next comienza con una variable de contador, i. sta es una variable que utiliza el bucle para contar la cantidad de veces que se ha ejecutado. La siguiente lnea (For i = 1 to 10) le dice al programa cuntas veces se debe repetir el bucle y los valores i que va a tener. Cuando el cdigo entra en el bucle For...Next, se inicia con i que contiene el primer valor, en este caso 1. El programa ejecuta las lneas de cdigo entre la lnea For y la lnea Next, en este caso llamando al mtodo DisplayNumber con un parmetro de i (en este caso tambin 1). Cuando se alcanza la lnea Next, se agrega 1 a i y la ejecucin de programa regresa nuevamente a la lnea For. Esto se repite hasta que el valor de i es mayor que el segundo nmero en la lnea For, en este caso 10. Cuando esto sucede, el programa contina con cualquier cdigo despus de la lnea Next.
Intntelo
Dim i As Integer = 0 Dim NumberOfRepetitions As Integer = CInt(Textbox1.Text) For i = 1 To NumberOfRepetitions MsgBox("This line has been repeated " & i & " times")
Next
7. 8.
Presione F5 para ejecutar el programa. En el cuadro de texto, escriba un nmero y haga clic en el botn. Aparece un Cuadro de mensaje las veces indicadas en el cuadro de texto.
Actualizacin: noviembre 2007 En esta leccin, aprender a utilizar la instruccin If...Then para ejecutar el cdigo basado en condiciones. Los programas deben realizar diferentes acciones en respuesta a distintas condiciones. Por ejemplo, quiz desee que el programa compruebe qu da de la semana es y haga algo diferente dependiendo del da. La instruccin If...Then permite evaluar una condicin y ejecutar las diferentes secciones de cdigo basndose en los resultados de esa condicin. El siguiente ejemplo muestra cmo funciona la instruccin If...Then. VB Copiar
Cuando se ejecuta este cdigo, se evala la condicin (la parte entre If y Then). Si la condicin es true, se ejecuta la siguiente lnea de cdigo y se muestra un cuadro de mensaje; si es false, el cdigo pasa a la lnea End If. En otras palabras, el cdigo estipula "Si hoy es lunes, muestre el mensaje".
Intntelo
6.
Presione F5 para ejecutar el programa. Si hoy es sbado o domingo, aparecer un cuadro de mensaje indicndole Happy Weekend!. De lo contrario, no aparecer ningn cuadro de mensaje.
7.
En el men Depurar, seleccione Detener depuracin para finalizar el programa. Mantenga abierto este proyecto. Se utilizar en el siguiente procedimiento, "Para utilizar la clusula Else".
Es posible que haya observado en el ejemplo anterior que la instruccin If...Then utiliz el operador Or para evaluar varias condiciones ("Si es sbado Or si es domingo"). Puede utilizar los operadores Or y And para evaluar tantas condiciones como desee en una instruccin If...Then nica.
La clusula Else
Ha visto cmo utilizar la instruccin If...Then para ejecutar el cdigo si una condicin es true, pero qu pasa si desea ejecutar un cdigo si una condicin es true, pero otro si es false? En este caso, puede utilizar la clusula Else. La clusula Else le permite especificar un bloque de cdigos que se ejecutar si la condicin es false. El siguiente ejemplo muestra cmo funciona la clusula Else.
VB Copiar
If My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Friday Then MsgBox("Today is Friday!") Else MsgBox("It isn't Friday yet!") End If
En este ejemplo, se evala la expresin; si es true, se ejecuta la siguiente lnea de cdigo y se muestra el primer cuadro de mensaje. Si es false, el cdigo se desplaza a la clusula Else y se ejecuta la lnea Else siguiente, que muestra el segundo cuadro de mensaje.
Intntelo
Este procedimiento comienza donde finaliz "Para utilizar la instruccin If... Then". Si no complet "Para utilizar la instruccin If... Then", debe hacerlo antes de continuar.
If My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Saturday Or _ My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Sunday Then MsgBox("Happy Weekend!") Else MsgBox("Happy Weekday! Don't work too hard!") End If
2.
Presione F5 para ejecutar el programa. El programa mostrar ahora un cuadro de mensaje que indica si es un fin de semana o un da de la semana, con contenido adecuado.
Nota:
Para cambiar el da de la semana haga doble clic en la hora en la barra de tareas de Windows, si desea probar la ejecucin de los dos bloques de cdigo. (La barra de tareas es la que contiene el botn Inicio de Windows; de manera predeterminada, se encuentra en la parte inferior del escritorio y la hora se muestra en la esquina derecha).
Informacin detallada: utilizar Do...While y Do...Until para repetir hasta cumplir una condicin
Visual Studio 2008 Otras versiones
Actualizacin: noviembre 2007 En esta leccin, aprender a utilizar las instrucciones Do...While y Do...Until para repetir el cdigo basndose en algunas condiciones. En la leccin anterior, aprendi a usar la instruccin For...Next para recorrer un bloque de cdigo un nmero especfico de veces, pero qu ocurre si el nmero de veces que el cdigo se debe repetir es diferente para algunas condiciones? Las instrucciones Do...While y Do...Until permiten repetir un bloque de cdigo mientras cierta condicin sea True o hasta que cierta condicin sea True. Por ejemplo, si se dispona de un programa para agregar una serie de nmeros, pero nunca dese que la suma de los nmeros fuera mayor que 100. Se podra utilizar la instruccin Do...While para llevar a cabo la suma de la siguiente forma: VB Copiar
Dim sum As Integer = 0 Do While sum < 100 sum = sum + 10 Loop
En el cdigo anterior, la lnea Do While evala la variable sum para ver si es menor que 100: si lo es, se ejecuta la siguiente lnea de cdigo; si no lo es, pasa a la lnea de cdigo que se encuentra a continuacin de Loop. La palabra clave Loop le dice al cdigo que regrese a la lnea DoWhile y evale el nuevo valor de sum.
Intntelo
Dim sum As Integer = 0 Dim counter As Integer = 0 Do While sum < 100 sum = sum + CInt(Textbox1.Text) counter = counter + 1 Loop MsgBox("The loop has run " & CStr(counter) & " times!")
7. 8.
Presione F5 para ejecutar el programa. En el cuadro de texto, escriba un nmero y haga clic en el botn. Aparece un cuadro de mensaje que muestra cuntas veces se sum el nmero a s mismo antes de llegar a 100.
9.
Para cerrar el programa, en el men Depuracin, haga clic en Detener depuracin. Mantenga abierto este proyecto. Ms adelante se agregarn elementos.
Instruccin Do...Until
La instruccin Do...While repite un bucle mientras una condicin permanece True, pero a veces es posible que desee que el cdigo se repita a s mismo hasta que una condicin se convierta True. Puede utilizar la instruccin Do...Until del siguiente modo. VB Copiar
Dim sum As Integer = 0 Do Until sum >= 100 sum = sum + 10 Loop
Este cdigo es similar al cdigo de la instruccin Do...While, slo que esta vez, el cdigo evala la variable sum para ver si es igual o mayor que 100.
Intntelo
Este procedimiento empieza donde termin "Para utilizar una instruccin Do... While". Si no complet "Para utilizar una instruccin Do... While", debe hacerlo antes de continuar.
Dim sum2 As Integer = 0 Dim counter2 As Integer = 0 Do Until sum2 >= 100 sum2 = sum2 + CInt(Textbox1.Text) counter2 = counter2 + 1 Loop
MsgBox("The loop has run " & CStr(counter2) & " times!")
2. 3.
Presione F5 para ejecutar el programa. En el cuadro de texto, escriba un nmero y haga clic en el botn. Aparece un segundo cuadro de mensaje que muestra cuntas veces se sum el nmero a s mismo antes de ser igual o mayor que 100.
Informacin detallada: utilizar Select Case para decidir entre varias opciones
Visual Studio 2008 Otras versiones
Actualizacin: noviembre 2007 En esta leccin, aprender a utilizar la instruccin Select Case para ejecutar cdigo basado en mltiples condiciones. En la leccin anterior, se mostr cmo usar las instrucciones If...Then para ejecutar diferentes bloques de cdigo segn las condiciones. Aunque es posible evaluar ms de dos condiciones en una instruccin If...Then mediante la palabra clave ElseIf, la instruccin Select Case proporciona una manera mucho mejor de evaluar varias condiciones. La instruccin Select Case permite utilizar tantas condiciones (o casos) como sea necesario, y conviene escribir el cdigo para situaciones en las que hay muchas opciones. Por ejemplo, suponga que el programa utiliz una variable String para almacenar una opcin de color y se necesitaba obtener el valor de color. El cdigo para la instruccin Select Case podra ser similar al siguiente: VB Copiar
Select Case Color Case "red" MsgBox("You selected red") Case "blue" MsgBox("You selected blue")
Cuando se ejecuta este cdigo, la lnea Select Case determina el valor (Color) de la expresin. Suponga que Color es una variable String y que esta variable es un parmetro para un mtodo que contiene la instruccin Select Case. El valor de Color se compara con el valor para la primera instruccin Case. Si el valor coincide, se ejecuta la siguiente lnea de cdigo y el cdigo pasa a la lnea End Select; si el valor no coincide, se evala la siguiente lnea Case. La instruccin Case adopta muchas formas distintas; en el ejemplo anterior es String. Pero puede ser cualquier tipo de datos o expresin. Puede evaluar un intervalo de nmeros utilizando la palabra clave To, como sigue: VB Copiar
Case 1 To 10
En este ejemplo, cualquier nmero entre 1 y 10 ser una coincidencia. Tambin puede evaluar varios valores en una sola instruccin Case separndolos con comas de la siguiente forma: VB Copiar
En este ejemplo, cualquiera de los tres valores producir una coincidencia. Tambin puede utilizar operadores de comparacin y la palabra clave Is para evaluar los valores de la siguiente manera. VB Copiar
Case Is > 9
Case Else
El ejemplo anterior funciona cuando conoce todas las condiciones posibles, pero qu sucede si hay una condicin con la que no contaba? Por ejemplo, si el valor de Color es yellow, el cdigo simplemente evaluar los tres casos sin encontrar una coincidencia y no se mostrar ningn cuadro de mensaje. La instruccin Case Else se puede utilizar para ejecutar el cdigo cuando no se encuentra ninguna coincidencia, como en el siguiente ejemplo. VB Copiar
Select Case Color Case "red" MsgBox("You selected red") Case "blue" MsgBox("You selected blue") Case "green" MsgBox("You selected green") Case Else MsgBox("Please choose red, blue, or green") End Select
En el cdigo anterior, si el valor de Color es yellow el cdigo lo comparar con las primeras tres lneas Case sin encontrar una coincidencia. Cuando se llega a la lnea Case Else, se ejecuta la siguiente lnea de cdigo antes de pasar a End Select.
2. 3.
En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para Windows. En el cuadro Nombre, escriba SelectCase y haga clic en Aceptar. Se abre un nuevo proyecto de formularios Windows Forms.
4. 5. 6.
En el Cuadro de herramientas, arrastre un control TextBox y un control Button al formulario. Haga doble clic en el botn para abrir el Editor de cdigo. En el controlador de eventos Button1_Click, escriba el siguiente cdigo. VB Copiar
Dim Number As Integer = CInt(Textbox1.Text) Select Case Number Case 1 MsgBox("Less than 2") Case 2 To 5 MsgBox("Between 2 and 5") Case 6, 7, 8 MsgBox("Between 6 and 8") Case 9 To 10 MsgBox("Greater than 8") Case Else MsgBox("Not between 1 and 10") End Select
7. 8.
Presione F5 para ejecutar el programa. En el cuadro de texto, escriba un nmero y haga clic en el botn. Aparecer un cuadro de mensaje que muestra el mensaje de la instruccin Case que coincide con el nmero que ha especificado.
Otras versiones
Actualizacin: noviembre 2007 En esta leccin, aprender a crear cdigo de control de errores bsico para los programas. Incluso los programas mejor diseados a veces encuentran errores. Algunos errores son defectos en el cdigo que se pueden encontrar y corregir. Otros errores son una consecuencia natural del programa; por ejemplo, el programa puede intentar abrir un archivo que ya est en uso. En casos as, los errores se pueden predecir, pero no evitar. Como desarrollador, es su trabajo predecir estos errores y ayudar a que el programa los solucione.
Un error que se produce mientras un programa se est ejecutando se llama error en tiempo de ejecucin. Los errores en tiempo de ejecucin se producen cuando un programa trata de hacer algo para lo cual no fue diseado. Por ejemplo, si el programa intenta realizar una operacin no vlida, como convertir una cadena no numrica en un valor numrico, se producir un error en tiempo de ejecucin. Cuando se produce un error en tiempo de ejecucin, el programa produce una excepcin, que soluciona los errores buscando cdigo dentro del programa para tratar el error. Si no se encuentra tal cdigo, se detiene el programa y se tiene que reiniciar. Dado que esto puede conducir a la prdida de datos, es prudente crear el cdigo de control de errores dondequiera que se tenga previsto que se produzcan errores.
El bloque Try...Catch...Finally
Se puede utilizar el bloque Try...Catch...Finally para controlar errores en tiempo de ejecucin en el cdigo. Puede utilizar Try para un segmento de cdigo; si ese cdigo produce una excepcin, salta al bloque Catch y se ejecuta el cdigo del bloque Catch. Despus de que ese cdigo ha finalizado, se ejecuta cualquier cdigo en el bloque Finally. La instruccin End Try cierra el bloque Try...Catch...Finally completo. En el ejemplo siguiente se ilustra cmo se utiliza cada bloque. VB Copiar
Catch ' If an error occurs, code here will run. Finally ' Code in this block will always run. End Try
Primero, se ejecuta el cdigo del bloque Try. Si se ejecuta sin error, el programa omite el bloque Catch y ejecuta el cdigo del bloque Finally. Si se produce un error en el bloque Try, la ejecucin salta inmediatamente al bloque Catch y se ejecuta el cdigo que se encuentra all; luego se ejecuta el cdigo del bloque Finally.
Intntelo
Try Dim aNumber As Double = CDbl(Textbox1.Text) MsgBox("You entered the number " & aNumber) Catch MsgBox("Please enter a number.") Finally MsgBox("Why not try it again?") End Try
7. 8.
9.
Presione F5 para ejecutar el programa. En el cuadro de texto, escriba un valor numrico y haga clic en el botn. Aparece un cuadro de mensaje que muestra el nmero que ha escrito, seguido por una invitacin para volver a intentarlo. A continuacin, escriba un valor no numrico en el cuadro de texto, como una palabra y haga clic en el botn. Esta vez, cuando el programa intente convertir el texto del cuadro de texto en un nmero, no podr hacerlo y se producir un error. En lugar de finalizar el cdigo en el bloque Try, se ejecuta el bloque Catch y aparece un cuadro de mensaje solicitando que se escriba un nmero. Se ejecuta el bloque Finally y se le invita a intentarlo de nuevo.
Actualizacin: noviembre 2007 La interfaz de usuario es la parte del programa que ven los usuarios cuando ejecutan el programa. Una interfaz de usuario suele estar compuesta de una ventana principal o formulario y varios controles, como botones, campos para escribir texto, etc. Estos tipos de programas de Visual Basic se conocen como aplicaciones de formularios Windows Forms y la interfaz de usuario se crea utilizando los controles de formularios Windows Forms.
Nota:
Tambin puede crear aplicaciones para Windows mediante la reciente tecnologa Windows Presentation Foundation. Esta actividad se tratar en el siguiente conjunto de lecciones, Crear la apariencia visual de un programa: introduccin a Windows Presentation Foundation.
Las lecciones de esta seccin le mostrarn cmo crear una interfaz de usuario utilizando algunos de los controles de formularios Windows Forms ms comunes.
En esta seccin
Comunicarse con el usuario del programa: interfaz de usuario Describe cmo crear un formulario y agregarle controles.
Interactuar con el usuario: utilizar botones Describe cmo agregar un botn a un formulario y cmo agregar cdigo que se ejecutar cuando el usuario haga clic en el botn. Mostrar y recibir texto: utilizar etiquetas y cuadros de texto Describe cmo se puede usar una etiqueta y un cuadro de texto para mostrar texto y recibir la entrada de texto del usuario. Hacer que el programa reaccione ante el usuario: crear un controlador de eventos Describe cmo crear un controlador de eventos para un botn. Obtener opciones seleccionadas por el usuario: utilizar casillas y botones de opcin Describe cmo utilizar casillas y botones de opcin para presentar y recuperar las opciones de usuario. Mostrar imgenes: Utilizar el control PictureBoxl Describe cmo mostrar imgenes en un formulario. Proporcionar opciones al usuario: crear mens en tiempo de diseo Describe cmo agregar mens estndar y elementos de men a una aplicacin de formularios Windows Forms. Usar controles Timer para realizar acciones regulares Describe cmo usar el componente Timer para ejecutar cdigo a intervalos establecidos. Controles de varios elementos: trabajar con controles ListBox y ComboBox Describe cmo agregar y quitar elementos de una lista. Mostrar fechas: Usar los controles MonthCalendar y DateTimePicker Describe cmo recuperar una fecha seleccionada en un control MonthCalendar y un control DateTimePicker y mostrarla en un formulario Windows Forms. Controles invisibles: utilizar componentes Presenta los componentes y describe cmo agregar un componente que permita validar los datos escritos en un programa. Reutilizar controles: trabajar con cuadros de dilogo integrados Describe cmo utilizar los cuadros de dilogo integrados para mostrar un cuadro de dilogo Abrir archivo, aplicar una fuente al texto y aplicar color a un formulario. Presionar botones: agregar barras de herramientas y botones
Describe cmo agregar un control ToolStrip a una aplicacin y cmo agregar un botn a ToolStrip. Proporcionar un explorador propio: trabajar con controles TreeView Describe cmo crear una aplicacin con la apariencia del Explorador de Windows con un control TreeView.
Secciones relacionadas
Informacin detallada: compartir un controlador de eventos Describe cmo crear un controlador de eventos compartido que controla eventos para ms de un control. Informacin detallada: utilizar varios grupos de botones de opcin Explica cmo crear varios grupos de botones de opcin mutuamente excluyentes en un nico formulario. Informacin detallada: ms informacin acerca de los mens Explica cmo habilitar o deshabilitar mens en tiempo de ejecucin, as como crear mens emergentes. Paseo con gua por Visual Basic Proporciona una serie de lecciones secuenciales que presentan los conceptos bsicos de programacin de Visual Basic 2008. Qu sali mal? Encontrar y corregir errores mediante depuracin Describe cmo utilizar las herramientas de depuracin en Visual Basic 2008. Introduccin al lenguaje de programacin Visual Basic Describe los fundamentos del lenguaje Visual Basic.
Las aplicaciones de WPF son aplicaciones en las que se utilizan controles de WPF para crear la interfaz de usuario. En estas aplicaciones, la interfaz de usuario consta normalmente de una ventana principal o formulario y varios controles, como botones, cuadros de texto para escribir el texto, etc. WPF utiliza un lenguaje de marcado llamado Lenguaje de marcado de aplicaciones extensible (XAML) para proporcionar nuevas tcnicas con el fin de desarrollar interfaces de usuario visualmente mejoradas. Las lecciones de esta seccin le muestran cmo crear interfaces de usuario que utilizan algunos de los controles de WPF ms comunes.
En esta seccin
Disear una interfaz de usuario para una aplicacin de WPF (Visual Basic) Describe cmo crear una aplicacin WPF y agregarle controles. Usar controles comunes de WPF Proporciona informacin general de los controles de WPF ms comunes. Crear controladores de eventos para los controles de WPF Describe cmo asociar un controlador de eventos a un control de WPF y cmo escribir cdigo que se ejecuta cuando se provoca el controlador de eventos. Crear una aplicacin de dibujo con WPF Muestra cmo crear una aplicacin de WPF para trazar dibujos.
Disear una interfaz de usuario para una aplicacin de WPF (Visual Basic)
Visual Studio 2008 Actualizacin: noviembre 2007 En esta leccin, obtendr informacin sobre cmo crear una aplicacin de WPF y cmo agregar controles a la interfaz de usuario. Disear una aplicacin de Windows Presentation Foundation (WPF) es como disear una aplicacin de formularios Windows Forms: los controles se agregan a una superficie de diseo. Sin embargo, hay varias diferencias. Adems de tener un diseador, la ventana Propiedades y el Cuadro de herramientas, hay una ventana que contiene XAML. XAML significa Extensible Application Markup Language (Lenguaje de marcado de aplicaciones extensible). ste es un lenguaje de marcado que se utiliza para crear una interfaz de usuario. La ilustracin siguiente muestra la ubicacin predeterminada del editor XAML. Para obtener ms informacin, vea Tutorial: Editar XAML en WPF Designer.
Editor XAML
Al crear una aplicacin de formularios Windows Forms convencional, puede arrastrar un control del Cuadro de herramientas a un formulario Windows Forms o, si lo desea, puede escribir el cdigo para crear el control. Al arrastrar el control al formulario, el cdigo se genera automticamente. De igual forma, al crear una aplicacin WPF, puede crear un control escribiendo el marcado XAML o puede arrastrar el control a una ventana de WPF. El marcado XAML se organiza en elementos que aparecen en un formato jerrquico. Los elementos se encierran entre corchetes angulares, y hay normalmente un elemento de apertura y cierre. Por ejemplo, puede tener un elemento Button simple que aparece del modo siguiente: <Button></Button>. Se describe normalmente cmo aparece un elemento mediante la definicin de atributos, como su ubicacin, alto y ancho. Los atributos de un elemento parecen propiedades de un objeto porque son descripciones del aspecto fsico o estado. Los atributos aparecen dentro de corchetes de apertura y cierre del elemento de apertura. Estn compuestos del nombre del atributo, el smbolo de asignacin (=) y el valor del atributo entre comillas. Puede especificar el alto, por ejemplo de un elemento Button del modo siguiente: <Button Height="23"></Button>. Al arrastrar los controles de WPF del Cuadro de herramientas al diseador, Visual Basic Express genera automticamente el marcado XAML para el control. Por ejemplo, al hacer doble clic en un control System.Windows.Controls.Button para agregarlo a una ventana de WPF, se genera un marcado XAML similar al siguiente. other Copiar
Intntelo.
<Window x:Class="Window1"
</Grid> </Window>
4. 5. Haga clic en Ventana1 para seleccionarlo. En el editor XAML, cambie el atributo Title del elemento Window de Window1 a WPF Application. El marcado XAML aparecer ahora del modo siguiente: other Copiar
</Grid> </Window>
El texto en la barra de ttulo de Ventana1 cambia a Aplicacin WPF. Pruebe a cambiar otros atributos de la ventana, como Width y Height. Cuando est listo, contine con el siguiente procedimiento.
En este procedimiento, agregar controles a su aplicacin. Para ello, debe hacer clic en el control del Cuadro de herramientas, que suele estar situado en el lado izquierdo del IDE de Visual Basic, y arrastrar a continuacin el control a la ventana de WPF. Debe establecer algunas propiedades para el control y, a continuacin, ajustar el marcado XAML para cambiar el texto y tamao del control.
As, TextBox se mueve del lado derecho de la ventana de WPF al lado izquierdo. 4. Establezca las siguientes propiedades para TextBox.
Propiedad
VerticalAlignment
Valor
Superior
Width
75
Height
26
5.
En el editor XAML, cambie el atributo Width del elemento TextBox a 140 y cambie el elemento Margin a 30, 56, 0, 0, como se muestra en el ejemplo siguiente. other Copiar
apariencia agregndole estilos y atributos en el editor de XAML. Escribir XAML sin ayuda puede ser difcil, por lo que tal vez puede ser conveniente usar una aplicacin que lo genere automticamente, como Expression Blend. Para obtener ms informacin, vea Colaboracin con Expression Blend.
Intntelo!
Propiedad
VerticalAlignment
Valor
Superior
Width
75
Height
26
8. 9.
Agregue un control Button a la ventana de WPF, al lado del cuadro de texto. Cambie el texto entre las etiquetas de apertura y cierre de Button en el editor XAML de Button a Add, como se muestra en el ejemplo siguiente. other Copiar
Copiar
Controles de WPF
En la tabla siguiente se muestran los controles de WPF ms comunes que se encuentran en la ficha Controles comunes del Cuadro de herramientas.
Descripcin
Muestra un borde alrededor del contenido.
System.Windows.Controls.Button
Permite a un usuario realizar una accin haciendo clic en un botn. El evento Buttonbase.Click se produce cuando se hace clic en un control Button.
System.Windows.Controls.CheckBox
Permite a un usuario seleccionar y desactivar una casilla para indicar un valor S/No o Verdadero/Falso.
System.Windows.Controls.ComboBox
Permite a un usuario seleccionar un elemento de una lista desplegable. La lista aparece cuando el usuario hace clic en una flecha desplegable.
System.Windows.Controls.Grid
System.Windows.Controls.Image
System.Windows.Controls.Label
System.Windows.Controls.ListBox
System.Windows.Controls.RadioButton Permite a un usuario elegir entre elementos mutuamente excluyentes. La seleccin de un botn de opcin es mutuamente excluyente con cualquier otro botn de opcin en el mismo contenedor.
System.Windows.Controls.StackPanel
System.Windows.Control.TabControl
System.Windows.Controls.TextBox
Controles contenedor, como Canvas, DockPanel y Frame. Mens y barras de herramientas, como Menu, ToolBar y StatusBar. Controles de documento, como DocumentViewer y FlowDocumentPageViewer. Y ms
administrar el evento en un atributo del control en el editor XAML. A continuacin, se puede agregar el cdigo para el controlador de eventos en el editor de cdigo.
Intntelo.
Nota:
Al crear un controlador de eventos haciendo doble clic en el control, el atributo no se agrega al marcado XAML. En su lugar, la clusula Handles se utiliza para enlazar el evento con el controlador de eventos.
7. 8.
Haga clic con el botn secundario en la superficie de diseo y seleccione Ver cdigo. Agregue el siguiente controlador de eventos a la clase Window1. other Copiar
End Sub
9. Agregue el cdigo siguiente al mtodo ButtonOKClicked. Este cdigo muestra un mensaje al hacer clic en el botn. other Copiar
Intntelo.
manera predeterminada, el editor XAML aparece bajo el diseador, pero la vista XAML puede mostrarse a pantalla completa si hace clic con el botn secundario en la superficie de diseo y selecciona Ver XAML.
2. 3. 4.
Nota:
Opcionalmente, puede modificar directamente el marcado XAML si agrega un atributo Background y establece su valor en Brown: Background="Brown"
5. 6.
Para abrir el Cuadro de herramientas, en el men Vista, haga clic en el Cuadro de herramientas. Haga clic con el botn secundario en el Cuadro de herramientas y, despus, haga clic en Elegir elementos. Se abrir el cuadro de dilogo Elegir elementos del cuadro de herramientas.
7.
En la ficha Componentes WPF del cuadro de dilogo Elegir elementos del cuadro de herramientas, desplcese hacia abajo hasta InkCanvas y seleccinelo para activar la casilla. 8. Haga clic en Aceptar para agregar el control InkCanvas al Cuadro de herramientas. 9. Arrastre un control InkCanvas del Cuadro de herramientas a la superficie de diseo. 10. Establezca las siguientes propiedades del control InkCanvas en la ventana Propiedades:
Propiedad
Width
Valor
Auto
Height
Auto
HorizontalAlignment
Expandir
VerticalAlignment
Expandir
Mrgenes
9, 9, 9, 68
11. Cambie el color del control InkCanvas a amarillo estableciendo su propiedad Background en LightYellow. El color de fondo del control InkCanvas aparecer como amarillo claro en tiempo de ejecucin. 12. Arrastre dos controles Button a la ventana de WPF y colquelos bajo el control InkCanvas. Coloque button1 a la izquierda y button2 a la derecha. 13. Seleccione button1 y cambie el marcado XAML en la vista XAML como se muestra en el marcado siguiente. Este marcado establece la propiedad Text en Clear. other Copiar
Me.InkCanvas1.Strokes.Clear()
2. 3. Vuelva a la vista Diseo; para ello, haga clic con el botn secundario en el editor de cdigo y seleccione Diseador. Haga doble clic en Cerrar y, a continuacin, agregue el cdigo siguiente al controlador de eventos Click generado: other Copiar
Me.Close()
4. 5. 6. Presione F5 para ejecutar el proyecto. Cuando la aplicacin se inicie, dibuje una imagen en el control InkCanvas. Si comete algn error, puede hacer clic en Borrar para volver a empezar. Haga clic en Cerrar para salir de la aplicacin.
Actualizacin: noviembre 2007 Al escribir un programa informtico, es normal que se produzcan errores. Es posible que se cometa un error tipogrfico, el programa se puede comportar no como lo esperaba o no se puede ejecutar en lo absoluto. Cuando hay un error en un programa, hay que buscarlo y corregirlo. La bsqueda y correccin de errores se denomina depuracin. En las siguientes lecciones, aprender varias tcnicas para depurar un programa Visual Basic.
En esta seccin
Encontrar errores: introduccin a la depuracin en Visual Basic Describe cmo depurar un programa y corregir los errores. Conozca sus errores: tres tipos de errores de programacin Describe tres tipos de errores que pueden producirse en un programa: errores de compilacin, en tiempo de ejecucin y lgicos. Encontrar y eliminar errores del compilador Describe cmo buscar y corregir los errores del compilador en un programa utilizando la ventana Lista de errores e IntelliSense. No funciona! Encontrar y eliminar errores en tiempo de ejecucin Describe cmo depurar un programa y corregir los errores en tiempo de ejecucin utilizando el cuadro de dilogo Ayudante de excepciones e IntelliSense. Qu? Esto no debiera haber ocurrido. Encontrar errores lgicos Describe cmo establecer puntos de interrupcin y recorrer el cdigo para buscar errores lgicos. Agregar notas a programas: utilizar comentarios Describe cmo crear comentarios en el cdigo de un programa y cmo usar los comentarios para la depuracin.
Actualizacin: noviembre 2007 En esta leccin, obtendr informacin sobre cmo corregir errores del programa mediante la depuracin. Por mucho cuidado que tenga al disear un programa o escribir cdigo, siempre pueden aparecer errores. En ocasiones los errores impedirn que se inicie el programa, unas veces harn que el programa deje de ejecutarse o se bloquee y otras se ejecutar pero no ofrecer los resultados esperados. Y, por supuesto, cuando los errores aparecen, querr encontrarlos y corregirlos. Los errores de un programa se conocen normalmente como errores y el proceso de encontrarlos y corregirlos se denomina depuracin. El proceso de depuracin es iterativo; es decir, se debe repetir una y otra vez. Por lo general, escribe cdigo, ejecuta el programa hasta que aparece un error, encuentra el error, lo corrige y, a continuacin, ejecuta el programa de nuevo. En la mayora de los casos, no necesita detener el programa para corregirlo. Puede corregir el cdigo donde apareci el error y seguir ejecutando el programa desde all; este proceso se conoce como Editar y continuar. La depuracin se realiza en el IDE (entorno de desarrollo integrado) de Visual Basic, que contiene varios comandos y ventanas especiales que ayudan a encontrar errores. Obtendr ms informacin en las lecciones siguientes.
Intntelo!
Nota:
En este ejemplo hay una excepcin. Las excepciones son objetos que se crean (y producen) cuando el programa detecta un error. Se crean distintos tipos de excepciones, dependiendo del tipo de error generado. Con los valores predeterminados del usuario, si se produce una excepcin durante la ejecucin del programa de Visual Basic, aparece un cuadro de dilogo que describe el error y ayuda
a corregirlo.
6.
Presione F5 para ejecutar el programa. Se detiene el programa y aparece un cuadro de dilogo de excepciones con el mensaje "No se control InvalidCastException". La excepcin ha ocurrido porque hay un error tipogrfico en el cdigo. Se utiliz la variable equivocada: debera ser number, Integer, no numbers, que es una variable String. Observe que el programa todava est en ejecucin; est en el modo de interrupcin de depuracin. Con Editar y continuar, puede corregir el error sin necesidad de detener el programa (ni volver a ejecutarlo para comprobarlo).
7. 8.
En el Editor de cdigo, cambie numbers + 1 por number + 1. Presione F5 para continuar. Debe aparecer un cuadro de mensaje con el nmero 2.
Actualizacin: noviembre 2007 En esta leccin, conocer los diferentes tipos de errores que pueden aparecer al escribir un programa. Incluso los programadores ms experimentados cometen errores; y conocer cmo depurar una aplicacin y encontrar esos errores es una parte importante de la programacin. No obstante, antes de obtener informacin sobre el proceso de depuracin, conviene conocer los tipos de errores que deber buscar y corregir. Los errores de programacin pertenecen a tres categoras: errores de compilacin, errores en tiempo de ejecucin y errores lgicos. Las tcnicas para depurar cada uno de ellos se tratarn en las tres lecciones siguientes.
Errores de compilacin
Los errores de compilacin, tambin conocidos como errores del compilador, son errores que impiden que su programa se ejecute. Cuando presiona F5 para ejecutar un programa, Visual Basic compila el cdigo en un lenguaje binario que el equipo entiende. Si el compilador de Visual Basic se encuentra con cdigo que no entiende, emite un error de compilador. La mayora de los errores del compilador se deben a errores cometidos al escribir el cdigo. Por ejemplo, puede escribir mal una palabra clave, omitir alguna puntuacin necesaria o intentar utilizar una instruccin End If sin antes utilizar una instruccin If. Afortunadamente, el editor de cdigo de Visual Basic se dise para identificar estos errores antes de que se intente ejecutar el programa. Aprender a encontrar y corregir los errores de compilacin en la leccin siguiente, Encontrar y eliminar errores del compilador.
Cuando aparece un error en tiempo de ejecucin, puede usar las herramientas de depuracin de Visual Basic para determinar la causa. Aprender a encontrar y corregir los errores en tiempo de ejecucin en la leccin No funciona! Encontrar y eliminar errores en tiempo de ejecucin.
Errores lgicos
Los errores lgicos son errores que impiden que su programa haga lo que estaba previsto. Su cdigo puede compilarse y ejecutarse sin errores, pero el resultado de una operacin puede generar un resultado no esperado. Por ejemplo, puede tener una variable llamada FirstName y establecida inicialmente en una cadena vaca. Despus en el programa, puede concatenar FirstName con otra variable denominada LastName para mostrar un nombre completo. Si olvida asignar un valor a FirstName, slo se mostrar el apellido, no el nombre completo como pretenda. Los errores lgicos son los ms difciles de detectar y corregir, pero Visual Basic tambin dispone de herramientas de depuracin que facilitan el trabajo. Aprender a encontrar y corregir los errores lgicos en Qu? Esto no debiera haber ocurrido. Encontrar errores lgicos.
Actualizacin: noviembre 2007 En esta leccin, aprender a encontrar y corregir los errores del compilador. Como vimos en la leccin anterior, los errores del compilador aparecen cuando el compilador de Visual Basic se encuentra con cdigo irreconocible, generalmente porque se cometi algn error al escribir. Dado que los errores del compilador impiden que se ejecute un programa, deber encontrarlos y corregirlos, o depurarlos, antes de ejecutar el programa.
Encontrar los errores del compilador es bastante fcil, ya que el programa no se ejecuta hasta que se han corregido. Cuando presiona F5, si hay algn error del compilador, aparecer un cuadro de dilogo que indica "Errores al compilar. Desea continuar?". Si selecciona S, se ejecutar la ltima
versin sin errores del programa; si selecciona No, el programa se detendr y aparecer la ventana Lista de errores. La ventana Lista de errores muestra toda la informacin sobre el error, incluida su descripcin y ubicacin en el cdigo. Si hace doble clic en el error en la Lista de errores, se resaltar la lnea incorrecta del cdigo en el Editor de cdigo. Tambin puede presionar F1 para mostrar Ayuda y obtener ms informacin sobre el error y cmo corregirlo. El editor de cdigo de Visual Basic tambin puede ayudarle a encontrar y corregir los errores del compilador, incluso antes de que se intente ejecutar el programa. Mediante una caracterstica denominada IntelliSense, Visual Basic inspecciona el cdigo a medida que se escribe y si encuentra cdigo que producir un error del compilador, lo subraya con una lnea ondulada de color azul. Si mantiene presionado el mouse sobre esa lnea, se muestra un mensaje que describe el error. Si la ventana Lista de errores est visible, tambin mostrar los mensajes de error.
Intntelo
End If
6.
Presione ENTRAR. Ver una lnea ondulada de color azul debajo de End If. Si mantiene presionado el mouse sobre la lnea, ver el mensaje "'End If' debe ir precedida por la instruccin 'If' " correspondiente.
7.
If 1 < 2 Then
End If
Observe que ha desaparecido la lnea ondulada de color azul. 8. Agregue la nueva lnea de cdigo siguiente despus de la instruccin If... Then. VB Copiar
MgBox("Hello")
9.
Presione F5 para ejecutar el programa. Aparecer un cuadro de dilogo con el mensaje "Errores al compilar. Desea continuar y ejecutar la ltima versin generada correctamente?" 10. Haga clic en No. Se mostrar la ventana Lista de errores con el mensaje de error "No se ha declarado el 'nombre MgBox'". 11. Haga doble clic en el mensaje de error de la Lista de errores y cambie el cdigo por MsgBox("Hello"). 12. Presione F5 de nuevo. Ahora el programa debera ejecutarse y causar la aparicin de un cuadro de mensaje.
Actualizacin: noviembre 2007 En esta leccin, aprender a depurar un programa y a corregir errores en tiempo de ejecucin. Como aprendi en su momento, los errores en tiempo de ejecucin se producen cuando el programa intenta realizar una operacin que es imposible finalizar. Cuando se produce un error en tiempo de ejecucin, el programa se detiene y aparece un mensaje de error; debe depurar el error y corregirlo para que el programa pueda continuar.
La mayora de los errores en tiempo de ejecucin se producen porque se cometi un error en el cdigo; por ejemplo, olvid asignar un valor a una variable antes de utilizarla. Cuando se ejecute el programa y se descubra el error, el programa se detendr y el cuadro de dilogo Ayudante de excepciones se mostrar en la ventana Editor de cdigo. Cuando esto sucede, el programa est en modo de interrupcin, que es el modo en que se realiza la depuracin. El cuadro de dilogo Ayudante de excepciones contiene una descripcin del error, as como sugerencias para la solucin de problemas que indican la causa. Puede hacer clic en las sugerencias sobre solucin de problemas para mostrar los temas de Ayuda y obtener ms detalles. Es necesario corregir el error para que pueda continuar con el programa; para ello, debe inspeccionar el cdigo para encontrar la causa del error. Por ejemplo, si sospecha que se produjo un error porque una variable contiene el valor equivocado, estando todava en el modo de interrupcin, puede utilizar IntelliSense para ver el valor de la variable. Cuando se coloca el mouse sobre la variable en el Editor de cdigo, la informacin sobre herramientas muestra el valor de la variable. Si el valor no es lo que esperaba, compruebe en el cdigo anterior dnde se estableci el valor y despus arregle el cdigo y contine.
Intntelo
VB
Copiar
miles = 55 speed = miles / hours MsgBox(CStr(speed) & " miles per hour")
6.
Presione F5 para ejecutar el programa. Aparece un cuadro de dilogo Ayudante de excepciones con el mensaje "No se control OverflowException". Una lnea de puntos que va del cuadro de dilogo a su archivo de cdigo seala la lnea de cdigo que produjo el error. Observe que la primera sugerencia sobre solucin de problemas del Ayudante de excepciones indica que debe asegurarse de no estar dividiendo por cero.
7. 8.
Mueva el mouse sobre la variable miles y mantngalo ah durante unos segundos. La informacin sobre herramientas que ver dice "miles 55". Ahora mueva el mouse sobre la variable hours; la informacin sobre herramientas debe decir "hours 0". Debido a que no se puede dividir por cero y el valor de hours es cero, ya ha encontrado la causa del error: no haber actualizado el valor de hours.
9.
hours = 2
10. Haga clic en la flecha amarilla situada en el margen izquierdo del cdigo y arrstrela hasta la lnea hours = 2. Esto permite que el programa contine desde esa lnea en lugar de continuar desde la lnea que contiene el error. Para que se reconozca la solucin del error es necesario ejecutar la nueva lnea de cdigo recin agregada. 11. Presione F5 para que el programa contine. Aparece un cuadro de dilogo que muestra "28 miles per hour".
Actualizacin: noviembre 2007 En esta leccin, aprender a evaluar y ejecutar un cdigo utilizando la ventana Inmediato. En la leccin anterior, aprendi cmo corregir errores en tiempo de ejecucin utilizando el Ayudante de excepciones. Sin embargo, a veces es posible que no est claro cmo corregir un error y se desee probar una posible correccin sin cambiar el cdigo. Una ventana de depuracin especial, la ventana Inmediato, permite hacer eso y ms.
La ventana Inmediato
Cuando el programa est en modo de interrupcin, se puede utilizar la ventana Inmediato para ejecutar fragmentos de cdigo o evaluar variables y expresiones. Por ejemplo, si aparece un error en tiempo de ejecucin debido a una variable vaca, puede comprobar el valor de la variable. Puede utilizar tambin la ventana Inmediato para asignar un valor a esa variable y comprobar cmo se ejecuta el resto del programa.
Sugerencia:
Cuando ejecuta el programa en modo de depuracin, puede poner el programa en modo de interrupcin en cualquier momento, seleccionando Interrumpir del men Depurar.
Para ejecutar el cdigo en la Ventana Inmediato escrbalo como lo hara en el Editor de cdigo y presione ENTRAR. Para evaluar una variable o expresin, escriba un signo de interrogacin seguido por la variable o expresin que desea evaluar y presione ENTRAR, el resultado se mostrar en la siguiente lnea.
Intntelo!
VB Copiar
miles = CInt(Textbox1.Text) hours = CInt(Textbox2.Text) speed = miles / hours MsgBox(CStr(speed) & " miles per hour")
7. 8. 9.
Presione F5 para ejecutar el programa. Escriba 100 en el primer cuadro de texto y, a continuacin, escriba 0 en el segundo cuadro de texto. Haga clic en Button1. El programa se detendr y aparecer el cuadro de dilogo Ayudante de excepciones con el mensaje "No se control OverflowException". En la ventana Inmediato en la parte inferior del IDE, escriba ?miles y presione ENTRAR. El valor 100 debe aparecer en la lnea siguiente.
Sugerencia:
Puede abrir en cualquier momento la ventana Inmediato eligiendo Ventanas, Inmediato en el men Depurar.
10. Escriba ?hours y presione ENTRAR. El valor 0 debe aparecer en la lnea siguiente. 11. Escriba hours = 4 y presione ENTRAR. Escriba ?hours y presione ENTRAR. Observe que el valor de hours es ahora 4, el valor que especific en la lnea anterior. Puede cambiar el valor de hours en la ventana Inmediato sin cambiar el cdigo del programa. 12. Presione F5 para continuar. Se mostrar un cuadro de mensaje con el resultado.
Sugerencia:
Para evitar que se produzca este error en tiempo de ejecucin, agregue un controlador de errores que compruebe que hay un nmero vlido en el bloque Try y muestre un mensaje al usuario en el bloque Catch. Para obtener ms informacin sobre controladores de errores, vea Qu hacer cuando algo sale mal: control de errores.
Actualizacin: noviembre 2007 En esta leccin, aprender a encontrar errores lgicos en el programa. En lecciones anteriores, aprendi a encontrar y corregir errores del compilador y errores en tiempo de ejecucin. El tercer tipo de error de programacin, los errores lgicos, puede ser el ms difcil de detectar. Con los errores lgicos no se obtiene ninguna advertencia, se ejecutar el programa pero
proporcionar resultados incorrectos. Es necesario repasar el cdigo y determinar la razn del problema. Afortunadamente, las herramientas de depuracin de Visual Basic pueden ayudar. Dos tcnicas de depuracin, que establecen puntos de interrupcin e instrucciones paso a paso a travs del cdigo, permiten inspeccionar el cdigo lnea por lnea mientras se ejecuta para encontrar el error. Se puede establecer un punto de interrupcin en el Editor de cdigo para cualquier lnea ejecutable de cdigo. Cuando se ejecuta el programa, los puntos de interrupcin fuerzan que se detenga y el programa entra en el modo de interrupcin cuando llega a esa lnea de cdigo. Puede obtener la informacin que desee sobre el estado del programa en ese momento. Puede comprobar el valor de cualquier variable, comprobar expresiones en la ventana Inmediato o realizar cambios en el cdigo con Editar y continuar. Cuando est en modo de interrupcin, puede recorrer el cdigo, ejecutando lnea por lnea para ver cmo funciona. Al presionar la tecla F8, se ejecutar la lnea de cdigo actual y se detendr en la lnea siguiente. Puede inspeccionar los valores de variables para ver cmo cambian de una lnea a la siguiente. Si la lnea de cdigo actual llama a una funcin o procedimiento Sub en otra parte del cdigo, cuando presiona F8, la ejecucin se desplazar a ese procedimiento. Una vez que se haya ejecutado ese procedimiento, el programa volver a la lnea siguiente a la que llam al procedimiento. Si no desea recorrer un procedimiento, puede presionar MAYS+F8 para saltarlo.
Intntelo
Dim minutes As Integer = CInt(Textbox1.Text) Dim miles As Double = CDbl(Textbox2.Text) Dim hours As Double = 0 hours = minutes / 60
7.
Function GetMPH(ByVal miles As Double, ByVal hours As Double) _ As String GetMPH = CStr(miles / hours) End Function
8.
Presione F5 para ejecutar el programa. En el primer cuadro de texto, escriba 10 (para representar 10 minutos) y en el segundo cuadro de texto, escriba 5 (para representar las millas) y, a continuacin, haga clic en Button1. Aparecer un cuadro con el mensaje "Average speed 0.03333334" (velocidad media 0,03333334) ; no obstante, si recorre 5 millas en diez minutos, la respuesta correcta seran 30 mph. Mantenga abierto el proyecto: en el siguiente procedimiento aprender cmo encontrar el error lgico.
En el ltimo ejemplo, algo est obviamente mal con la lgica del programa. Segn el resultado, viaja menos de una milla por hora, no treinta millas por hora como espera, pero dnde est el error? En el siguiente procedimiento se establecer un punto de interrupcin y se examinar el cdigo para encontrar el error.
Intntelo
Aparecer un punto rojo en el margen y el cdigo resaltado en rojo, lo que representa un punto de interrupcin. 2. Presione F5 para ejecutar el programa nuevamente. En el primer cuadro de texto, escriba 10 y en el segundo cuadro de texto, escriba 5. Haga clic en Button1. El programa se detendr cuando llegue al punto de interrupcin. La lnea hours = minutes / 60 aparecer resaltada en amarillo. Inspeccione los valores de las variables manteniendo el mouse sobre ellos; el valor de hours debe ser 0 y el valor de minutes debe ser 10. 3. Presione F8 para ejecutar la lnea hours = minutes / 60 y pasar a la siguiente lnea. Inspeccione los valores de las variables de la lnea MsgBox("Average speed " & GetMPH(hours, miles)), el valor de hours debe ser ahora 0.166666672 y el valor de miles debe ser 5.0. 4. Presione F8 de nuevo para ejecutar la lnea actual. Observe que la ejecucin baja a la lnea Function GetMPH. Inspeccione los valores de las variables en esta lnea; observar que el valor de miles es ahora 0.166666672 y el de hours es 5.0, lo contrario de lo que eran en la lnea anterior. Ha encontrado el error. Mantenga abierto el proyecto: en el siguiente procedimiento aprender a corregir el error lgico.
En el procedimiento anterior, los valores para las variables miles y hours cambiaron de lugar. Puede identificar la causa? Si examina la lnea MsgBox("Average speed " & GetMPH(hours, miles)), ver que a la funcin GetMPH se pasan dos argumentos, hours y miles, en ese orden. Si examina la declaracin de funcin Function GetMPH(ByVal miles As Double, ByVal hours As Double)..., observar que los argumentos se muestran como miles primero y como hours despus. Se produjo un error en la lgica porque los argumentos se pasaron en el orden equivocado, produciendo un clculo incorrecto. Si los argumentos hubieran sido de tipos diferentes, habra visto un error en tiempo de ejecucin, pero como los argumentos eran del mismo tipo, no se produjo el error. Fue un error simple, pero el error resultante fue difcil de encontrar. En el siguiente procedimiento se establecer un punto de interrupcin y se recorrer el cdigo para encontrar el error.
Intntelo
2. 3.
Haga clic en el punto rojo en el margen izquierdo para borrar el punto de interrupcin. Presione F5 para ejecutar el programa. En el primer cuadro de texto, escriba 10 y en el segundo cuadro de texto, escriba 5. Haga clic en Button1. Esta vez el cuadro de mensaje debe mostrar el resultado correcto, "Average speed 30" (velocidad media 30). Puede parecer que se corrigi el programa, pero hay otro error lgico aun ms difcil de encontrar. Si desea probar y encontrarlo, mantenga el proyecto abierto; lo usar de nuevo en la leccin Otro error: todava hay algo que no va bien.
Actualizacin: noviembre 2007 En esta leccin, aprender a encontrar un error lgico que slo se produce en situaciones determinadas. En la leccin anterior, Qu? Esto no debiera haber ocurrido. Encontrar errores lgicos, aprendi a encontrar y corregir un error de lgica. En el cdigo de ejemplo de esa leccin, an existe un error oculto: uno que es ms difcil de encontrar porque slo se produce en situaciones determinadas.
Probar un programa
Como desarrollador, se encuentra en desventaja cuando debe probar el programa para ver si se comporta segn lo deseado. Sabe cmo debe funcionar, de modo que es improbable que se cometa un error que pueda revelar un error lgico. Sin embargo, un usuario que no est familiarizado con el programa puede y har cosas en las que no ha pensado. Por ejemplo, en un programa que calcula millas por hora dividiendo el nmero de millas recorridas por el nmero de horas que demor el viaje, qu pasa si el usuario escribe cero para las horas o las millas? Probmoslo y vea.
Intntelo
Nota:
Si no finaliz o no guard el proyecto anterior, deber regresar y finalizarlo antes de poder continuar.
2.
Presione F5 para ejecutar el programa. En el primer cuadro de texto, escriba 0 (para representar minutos) y en el segundo escriba 5 (para representar millas) y, a continuacin, haga clic en Button1. Se muestra un cuadro de mensaje con el mensaje "Velocidad media infinito." Mantenga abierto el proyecto: en el siguiente procedimiento aprender a encontrar el error lgico.
En el procedimiento anterior, es posible que "Infinito" no sea lo que se esperaba, pero es matemticamente correcto: 0 cabe en 5 un nmero infinito de veces. Sin embargo, ste no es el resultado que se desea que los usuarios del programa vean. Puede pensar en una forma de evitar esto? Podra pensar en agregar un controlador de errores, un procedimiento descrito en la leccin Qu hacer cuando algo sale mal: control de errores. Sin embargo, en este caso no funcionara porque el resultado "Infinito" no es un error, nicamente no es lo que desea. Puesto que no es til mostrar una velocidad de cero, una manera de corregir el problema es probar un valor de cero y advertir al usuario que debe escribir un nmero mayor. Mientras se realiza esto, tambin se puede evitar que el usuario escriba nmeros negativos, puesto que los nmeros negativos tambin pueden generar un resultado falso.
En el siguiente procedimiento, se modificar el cdigo en el controlador de eventos Button1_Click para llamar slo a la funcin GetMPH si los valores son mayores que cero.
Intntelo
Dim minutes As Integer = CInt(Textbox1.Text) Dim miles As Double = CDbl(Textbox2.Text) Dim hours As Double = 0 If minutes <= 0 Or miles <= 0 Then MsgBox("Please enter a number greater than zero") Else hours = minutes / 60 MsgBox("Average speed " & GetMPH(miles, hours)) End If
2.
Presione F5 para ejecutar el programa nuevamente. En el primer cuadro de texto, escriba 0, y en el segundo, escriba 5. A continuacin, haga clic en Button1. Aparecer el cuadro de mensaje indicndole que especifique un nmero mayor que 0. Intntelo probando el programa con otras combinaciones de nmeros hasta que est seguro de que se ha corregido el error.
Actualizacin: noviembre 2007 En esta leccin, obtendr informacin sobre cmo crear comentarios en el cdigo de sus programas. El cdigo que forma un programa puede ser difcil de leer y entender, sobre todo si el usuario no es la persona que lo escribi originalmente. Al utilizar comentarios, puede crear notas para s mismo o para otros usuarios del cdigo. Los comentarios son entradas de texto del editor de cdigo que el compilador de Visual Basic omite cuando se ejecuta el programa. Por tanto, puede escribir una nota que explique lo que hace una seccin determinada del programa, o bien un aviso para finalizar las tareas de programacin incompletas. El comentario se crea iniciando una lnea con el carcter '. El ejemplo siguiente muestra cmo crear un comentario. VB Copiar
Tambin puede agregar comentarios al final de las lneas, as como usar el carcter '. Este procedimiento suele realizar para proporcionar comentarios sobre lneas individuales de cdigo, como se ve en el ejemplo siguiente. VB Copiar
Al igual que con los comentarios de una nica lnea, el programa omite todo lo que vaya despus del carcter ' de esa lnea.
Otro uso comn de los comentarios es evitar temporalmente que una lnea de cdigo se ejecute mientras depura su programa. Por ejemplo, suponga que tena una lnea que mostraba un cuadro de mensaje. VB Copiar
MsgBox("Hello World!")
Si quiere ejecutar el programa sin mostrar esa lnea, pero no desea eliminarla permanentemente, utilice el carcter del comentario (') para ocultarla temporalmente de su programa, tal y como se muestra a continuacin. VB Copiar
Como todo lo que va despus del carcter ' se omite, el programa se ejecutar sin ejecutar esa lnea. Puede quitar el carcter ' despus y se mostrar el cuadro de mensaje.
Intntelo!
' This code will cause two message boxes to appear MsgBox("This is Message Box 1") ' Display Message Box 1
6.
Presione F5 para ejecutar el programa. El programa se inicia y se muestran los dos cuadros de mensaje de uno en uno.
7. 8.
En el men Depurar, elija Detener depuracin para finalizar el programa. En el Editor de cdigo, agregue un carcter de comentario (') a la primera lnea del cuadro de mensaje, para que se lea lo siguiente. VB Copiar
9.
Presione F5 para ejecutar el programa. Observe que esta vez el programa omite la primera lnea del cuadro de mensaje y slo se muestra el segundo cuadro de mensaje.
Actualizacin: noviembre 2007 En esta leccin, obtendr informacin sobre cmo crear comentarios en el cdigo de sus programas. El cdigo que forma un programa puede ser difcil de leer y entender, sobre todo si el usuario no es la persona que lo escribi originalmente. Al utilizar comentarios, puede crear notas para s mismo o para otros usuarios del cdigo. Los comentarios son entradas de texto del editor de cdigo que el compilador de Visual Basic omite cuando se ejecuta el programa. Por tanto, puede escribir una nota que explique lo que hace una seccin determinada del programa, o bien un aviso para finalizar las tareas de programacin incompletas.
El comentario se crea iniciando una lnea con el carcter '. El ejemplo siguiente muestra cmo crear un comentario. VB Copiar
Tambin puede agregar comentarios al final de las lneas, as como usar el carcter '. Este procedimiento suele realizar para proporcionar comentarios sobre lneas individuales de cdigo, como se ve en el ejemplo siguiente. VB Copiar
Al igual que con los comentarios de una nica lnea, el programa omite todo lo que vaya despus del carcter ' de esa lnea.
Otro uso comn de los comentarios es evitar temporalmente que una lnea de cdigo se ejecute mientras depura su programa. Por ejemplo, suponga que tena una lnea que mostraba un cuadro de mensaje. VB Copiar
MsgBox("Hello World!")
Si quiere ejecutar el programa sin mostrar esa lnea, pero no desea eliminarla permanentemente, utilice el carcter del comentario (') para ocultarla temporalmente de su programa, tal y como se muestra a continuacin. VB Copiar
Como todo lo que va despus del carcter ' se omite, el programa se ejecutar sin ejecutar esa lnea. Puede quitar el carcter ' despus y se mostrar el cuadro de mensaje.
Intntelo!
' This code will cause two message boxes to appear MsgBox("This is Message Box 1") ' Display Message Box 1 MsgBox("This is Message Box 2") ' Display Message Box 2
6.
Presione F5 para ejecutar el programa. El programa se inicia y se muestran los dos cuadros de mensaje de uno en uno.
7. 8.
En el men Depurar, elija Detener depuracin para finalizar el programa. En el Editor de cdigo, agregue un carcter de comentario (') a la primera lnea del cuadro de mensaje, para que se lea lo siguiente. VB Copiar
9.
Presione F5 para ejecutar el programa. Observe que esta vez el programa omite la primera lnea del cuadro de mensaje y slo se muestra el segundo cuadro de mensaje.
Actualizacin: noviembre 2007 La mayora de los programas utiliza los datos de una forma u otra. Por ejemplo, en una leccin anterior, especific datos en forma de nmeros; esos datos se utilizaron en un clculo con el resultado devuelto en un cuadro de mensajes. En programas muy simples, los datos se representan como campos dentro del mismo programa. Sin embargo, en los programas ms complejos, los datos se almacenan en una estructura independiente del programa, denominada base de datos. En este conjunto de lecciones, aprender a crear una base de datos y a utilizarla para mostrar y actualizar datos de los programas.
En esta seccin
Almacenar y obtener acceso a datos Explica cmo utilizar una base de datos para almacenar datos y tener acceso a ellos. Crear la primera base de datos Describe cmo crear una base de datos con Visual Database Tools en Visual Basic. Obtener la informacin necesaria: conectarse a una base de datos existente Describe cmo conectar un programa a una base de datos existente. Mostrar informacin al usuario: mostrar datos en la interfaz de usuario
Explica cmo crear una interfaz de usuario bsica para ver los datos de una base de datos local. Agregar o modificar registros: actualizar datos Muestra cmo crear un formulario de entrada de datos para actualizar los datos de una base de datos local. Mostrar datos relacionados Explica cmo agregar datos de una tabla y datos de una tabla relacionada a una aplicacin de formularios Windows Forms. Crear clases de LINQ to SQL usando el Diseador relacional de objetos Muestra cmo usar el Diseador relacional de objetos para crear clases LINQ to SQL y, a continuacin, enlazar los datos a controles en un formulario Windows Forms. Usar LINQ para enlazar datos a controles Explica cmo escribir una consulta LINQ y enlazar los resultados a un control en un formulario Windows Forms. Incluir XML directamente en el cdigo: usar literales XML Muestra cmo usar literales XML.
Cree un nuevo proyecto. Probar (depurar) una aplicacin. Agregar controles bsicos, como casillas y botones, a un formulario. Colocar controles en un formulario mediante los diseos. Agregar los cuadros de dilogo Abrir archivo y Color a un formulario. Escribir cdigo mediante IntelliSense y fragmentos de cdigo. Escribir mtodos de control de eventos.
Cuando termine, el programa se parecer al de la ilustracin siguiente. Imagen que crear en este tutorial
Nota
En este tutorial, se trata tanto Visual C# como Visual Basic, por lo que deber centrarse en la informacin especfica del lenguaje de programacin que use.
Temas relacionados
Ttulo Descripcin
Empezar a crear un proyecto de aplicacin de Windows Forms. Ejecutar el programa de aplicacin de Windows Forms que se cre en el paso anterior.
Cambiar el aspecto del formulario mediante la ventana Propiedades. Agregar un control TableLayoutPanel al formulario.
Paso 4: Disear un formulario con un control TableLayoutPanel Paso 5: Agregar controles al formulario
Cambiar el nombre de los botones por otros ms significativos. Agregar un componente OpenFileDialog y un componente ColorDialog al formulario. Escribir cdigo mediante la herramienta IntelliSense.
Paso 8: Escribir cdigo para el controlador de eventos del botn Mostrar una imagen Paso 9: Revisar, comentar y probar el cdigo
Revisar y probar el cdigo. Agregar comentarios segn sea necesario. Escribir cdigo para hacer que funcionen otros botones y una casilla mediante IntelliSense. Ejecutar el programa y establecer el color de fondo. Probar con otras caractersticas, como cambiar colores, fuentes y bordes.
Nota
Visual Studio guarda el proyecto en la carpeta de proyectos. El entorno de desarrollo integrado (IDE) rellena automticamente el nombre de la carpeta y del proyecto. Si utiliza Visual Studio Express, deber completar los pasos 5-7. Para las versiones de Visual Studio que no son Express, el proyecto se guarda al crearlo por primera vez, de modo que los pasos 5-7 no son necesarios.
5. 6. 7.
Asegrese de que el proyecto se guarda en una carpeta que pertenezca a la carpeta Mis documentos. Compruebe que est activada la casilla Crear directorio para la solucin. Haga clic en Guardar.
Nota
Al crear el proyecto, el IDE de Visual Studio crea automticamente varios archivos y los coloca en una carpeta. Puede explorar esos archivos en la ventana del Explorador de soluciones. Al crear el proyecto por primera vez, los archivos se guardan en una carpeta temporal. Cuando se hace clic en el botn Guardar todo se ordena al IDE que los copie en una carpeta permanente (que suele estar contenida en la capeta Mis documentos).
8.
Seguramente habr notado que las palabras solucin y proyecto tienen significados diferentes, que se explicarn ms adelante en este tutorial. 9. La siguiente imagen muestra el aspecto que debe tener la ventana del IDE. 10. Ventana del IDE
11.
12. Si la pantalla no se parece la imagen anterior, haga clic en Restablecer diseo de la ventana en el men Ventana. Si falta cualquiera de las ventanas, haga clic en Ventana Propiedades o Explorador de soluciones en el men Vista. Si hay abierta alguna ventana de ms, haga clic en el botn Cerrar (x) de la parte superior derecha. 13. Fjese en la imagen. Desde la esquina superior izquierda y en sentido contrario a las agujas del reloj, la imagen muestra: Ventana principal: es donde se realiza la mayora del trabajo. Esta ventana se utiliza para trabajar con formularios y editar el cdigo. En este momento, muestra un formulario en el Editor de formularios. En la parte superior de la ventana, hay dos pestaas: Pgina principal y Form1.cs [Design]. (En Visual Basic, es .vb en lugar de .cs.) Ventana del Explorador de soluciones: es donde aparecen todos los archivos de la solucin. Al hacer clic en un archivo, la informacin mostrada en la ventana Propiedades cambia. Si hace doble clic en un archivo de cdigo (que finaliza en .cs para Visual C# y en .vb para Visual Basic), se abre el archivo de cdigo o un diseador para l. Ventana Propiedades: es donde se cambian las propiedades de los elementos seleccionados en las otras ventanas.
Nota
Observe que la lnea superior de la ventana del Explorador de soluciones muestra Solucin 'PictureViewer' (1 proyecto). El IDE ha creado una solucin automticamente. Una solucin puede contener ms de un proyecto. De momento, vamos a trabajar con soluciones que contienen un solo proyecto.
2.
El IDE ejecuta el programa y aparece una ventana. En la siguiente imagen se muestra el programa que ha compilado. El programa se est ejecutando y pronto lo ampliaremos. Programa de aplicacin de Windows Forms en ejecucin
3.
4.
Haga clic en el botn Detener depuracin cuadrado, o bien haga clic en Detener depuracin en el men Depuracin. El programa dejar de ejecutarse y se cerrar la ventana. Tambin puede cerrar simplemente la ventana abierta para detener la depuracin.
Nota
Cuando se ejecuta un programa desde el IDE, se denomina depuracin porque se suele hacer para encontrar y corregir errores. Se trata de un programa autntico y se puede ejecutar exactamente igual que cualquier otro.
Nota
Si la ventana Propiedades no aparece, detenga el programa haciendo clic en el botn Detener depuracin cuadrado (o simplemente cierre la ventana).
3.
Una vez seleccionado el formulario, desplcese hasta la parte inferior de la ventana Propiedades y busque la propiedad Text. Haga clic en Text, escriba Visor de imgenes y presione ENTRAR. Ahora, el formulario debera tener el texto Visor de imgenes en la barra de ttulo y la ventana Propiedades se debera parecer a la siguiente. Ventana Propiedades
Nota
Las propiedades se pueden ordenar en vistas por categoras o alfabtica. Puede alternar entre estas dos vistas utilizando los botones de la ventana Propiedades. En este tutorial, resulta ms fcil encontrar las propiedades en la vista alfabtica.
4.
Vuelva al Diseador de Windows Forms. Haga clic en el controlador de arrastre inferior derecho del formulario, que es el cuadradito blanco que aparece en el vrtice inferior derecho del formulario y tiene el siguiente aspecto. Controlador de arrastre
Arrstrelo para cambiar el tamao del formulario de modo que resulte ms ancho y un poco ms alto. 5. Fjese en la ventana Propiedades y observe que la propiedad Size ha cambiado. La propiedad Size cambia cada vez que se cambia el tamao del formulario. Pruebe a arrastrar el formulario para cambiar su tamao a unas medidas aproximadas de 550, 350, que deberan funcionar bien para este proyecto.
6.
Ejecute el programa de nuevo. Presione la tecla F5 o haga clic el botn de la barra de herramientas Iniciar depuracin, que aparece como sigue. Botn de la barra de herramientas Iniciar depuracin
Exactamente igual que antes, el IDE compila y ejecuta el programa, y aparece una ventana. 7. Antes de ir al paso siguiente, detenga el programa, porque el IDE no le permitir cambiarlo mientras est en ejecucin.
2.
3.
Puede agregar controles como botones, casillas y etiquetas al formulario. Haga doble clic en el control TableLayoutPanel del Cuadro de herramientas. Al hacerlo, el IDE agrega un control TableLayoutPanel al formulario, como se muestra en la siguiente imagen. Control TableLayoutPanel
Nota
Si, despus de agregar el control TableLayoutPanel, aparece una ventana dentro del formulario con el ttulo Tareas de TableLayoutPanel, haga clic en cualquier parte del formulario para cerrarla. Aprenderemos ms cosas sobre esta ventana ms adelante en el tutorial.
Nota
Observe que el Cuadro de herramientas se expande para abarcar el formulario cuando se hace clic en su pestaa, y se cierra cuando se hace clic fuera de l. Se trata de la caracterstica Ocultar automticamente del IDE. Puede activarla o desactivarla para cualquiera de las ventanas, haciendo clic en el icono del pin de la esquina superior derecha de la ventana, para alternar entre ocultarla automticamente y bloquearla en su lugar. El icono del pin tiene este aspecto.
4.
Asegrese de que TableLayoutPanel est seleccionado, haciendo clic en l. Puede comprobar qu control est seleccionado examinando la lista desplegable de la parte superior de la ventana Propiedades, como se muestra en la siguiente imagen. Ventana Propiedades que muestra el control TableLayoutPanel
5.
El selector de controles es una lista desplegable que figura en la parte superior de la ventana Propiedades. En este ejemplo, muestra que un control denominado tableLayoutPanel1 est seleccionado. Puede seleccionar los controles haciendo clic en ellos en el Diseador de Windows Forms o eligindolos en el selector de control. Ahora que TableLayoutPanel est seleccionado, busque la propiedad Dock y haga clic en Dock, que debera estar establecida en None. Observe que aparece una flecha de lista desplegable al lado del valor. Haga clic en la flecha y, a continuacin, seleccione el botn Fill (el botn grande del centro), como se muestra en la siguiente imagen. Ventana Propiedades con Fill seleccionado
6.
Despus de establecer la propiedad Dock de TableLayoutPanel en Fill, el panel rellena el formulario completo. Si vuelve a cambiar el tamao del formulario, TableLayoutPanel permanecer acoplado y cambiar de tamao para ajustarse al formulario.
Nota
TableLayoutPanel funciona exactamente igual que una tabla de Microsoft Office Word: tiene filas y columnas, y una celda individual puede abarcar varias filas y columnas. Cada celda puede contener un control (como un botn, una casilla o una etiqueta). Este control TableLayoutPanel va a contener un control PictureBox que abarcar completamente su fila superior, un control CheckBox en la celda inferior izquierda, y cuatro controles Button en la celda inferior derecha.
Nota
Aunque hemos dicho que cada celda puede contener un solo control, la celda inferior derecha tiene cuatro controles Button. Esto es porque se puede colocar un control en una celda que contiene otros controles. Este tipo de control se denomina contenedor, y TableLayoutPanel es un contenedor. Aprenderemos ms cosas sobre ello ms adelante en este tutorial.
7.
Actualmente, TableLayoutPanel tiene dos filas del mismo tamao y dos columnas del mismo tamao. Tenemos que cambiar su tamao de modo que la fila superior y la columna derecha sean mucho mayores. En el Diseador de Windows Forms, seleccione TableLayoutPanel. En la esquina superior derecha, hay un botoncito triangular de color negro, con el siguiente aspecto. Botn triangular
Este botn indica que el control tiene tareas que le ayudan a establecer sus propiedades automticamente. 8. Haga clic en el tringulo para mostrar la lista de tareas del control, como se muestra en la siguiente imagen. Tareas de TableLayoutPanel
9.
Haga clic en la tarea Editar filas y columnas para abrir la ventana Estilos de columna y fila. Haga clic en Column1 y establezca su tamao en el 15 por ciento; para ello, asegrese de que el botn Porcentaje y escriba 15 en el cuadro Porcentaje. (Se trata de un control NumericUpDown, que utilizar en un tutorial posterior.) Haga clic en Column2 y establzcala en el 85 por ciento. No haga clic todava en el botn Aceptar, porque la ventana se cerrar. (Si lo hace, puede volver a abrirla mediante la lista de tareas.) 10. En la lista desplegable Mostrar de la parte superior de la ventana, haga clic en Filas. Establezca Row1 en el 90 por ciento y Row2 en el 10 por ciento. 11. Haga clic en Aceptar. TableLayoutPanel debera tener ahora una fila superior grande, una fila inferior pequea, una columna izquierda pequea y una columna derecha grande. Puede cambiar el tamao de las filas y columnas de TableLayoutPanel arrastrando sus bordes.
3.
Tareas de PictureBox
Nota
Si agrega accidentalmente un tipo equivocado de control a TableLayoutPanel, puede eliminarlo. Haga clic con el botn secundario en el control y seleccione Eliminar en el men. Tambin puede seleccionar Deshacer en el men Edicin para quitar controles del formulario.
4.
5.
6.
Haga clic en el vnculo Acoplar en contenedor principal. Se establece automticamente la propiedad Dock de PictureBox en Fill. Para verlo, haga clic en el control PictureBox para seleccionarlo, vaya a la ventana Propiedades y asegrese de que la propiedad Dock est establecida en Fill. Haga que PictureBox abarque ambas columnas cambiando su propiedad ColumnSpan. Seleccione el control PictureBox y establezca su propiedad ColumnSpan en 2. Adems, cuando el PictureBox est vaco, se debe mostrar un marco vaco. Establezca su propiedad BorderStyle en Fixed3D. Agregue el control CheckBox al formulario. Haga doble clic en el elemento CheckBox del Cuadro de herramientas para que el IDE agregue un nuevo control CheckBox a la siguiente celda libre de la tabla. Como el control PictureBox ocupa las dos primeras celdas, el control CheckBox se agrega a la celda inferior izquierda. Seleccione el nuevo control CheckBox y establezca su propiedad Text en Stretch, como se muestra en la siguiente imagen. Control TextBox con la propiedad Stretch
7.
Entre al grupo Contenedores del Cuadro de herramientas (donde obtuvo el control TableLayoutPanel) y haga doble clic en el elemento FlowLayoutPanel para agregar un nuevo control a la ltima celda del control PictureBox. A continuacin, acplelo en el contenedor primario (bien eligiendo Acoplar en contenedor principal en la lista de tareas o bien estableciendo su propiedad Dock en Fill.)
Nota
FlowLayoutPanel es un contenedor que organiza otros controles en filas ordenadas. Al cambiar el tamao de FlowLayoutPanel, coloca todos los controles que contiene en una sola fila, siempre que tenga espacio para ello. De lo contrario, los organiza en lneas, uno encima de otro. Vamos a utilizar un control FlowLayoutPanel para contener cuatro botones.
Nota
En Visual Basic, los nombres de los botones llevan mayscula inicial, as que button1 ser Button1, button2 ser Button2, etc.
2.
Normalmente, se agregan los dems botones mediante el Cuadro de herramientas. Esta vez, haga clic en button2 y seleccione Copiar en el men Edicin (o presione Ctrl+C). En el men Edicin, haga clic en Pegar (o presione Ctrl+V) para pegar una copia del botn. Vuelva a pegarlo otra vez. El IDE ha agregado button3 y button4.
Nota
Puede copiar y pegar cualquier control. El IDE da nombre y coloca los nuevos controles de una manera lgica. Si se pega un control en un contenedor, el IDE elige el siguiente espacio lgico para colocarlo.
3.
4.
Seleccione el primer botn y establezca su propiedad Text en Mostrar una imagen. Luego, establezca las propiedades Text de los otros tres botones siguientes en Borrar la imagen, Establecer el color de fondo y Cerrar. El paso siguiente consiste en dimensionar los botones y organizarlos de modo que estn alineados a la izquierda del panel. Seleccione el control FlowLayoutPanel y fjese en su propiedad FlowDirection. Cmbiela de modo que quede establecida en RightToLeft. En
cuanto lo haga, los botones deberan alinearse a la derecha de la celda, en orden inverso de modo que el botn Mostrar una imagen quede a la derecha.
Nota
Si los botones siguen en orden incorrecto, puede arrastrarlos alrededor de FlowLayoutPanel para reorganizarlos en cualquier orden. Puede hacer clic en uno de los botones y arrastrarlo a la izquierda o la derecha.
5.
Haga clic en el botn Cerrar para seleccionarlo. Mantenga presionada la tecla CTRL y haga clic en los otros tres botones, para que todos estn seleccionados. Mientras todos los botones estn seleccionados, vaya a la ventana Propiedades y desplcese hacia arriba hasta la propiedad AutoSize. Esta propiedad indica al botn que cambie el tamao automticamente para ajustarse al texto que contiene. Establzcala en true. Ahora, los botones deberan tener el tamao y orden correctos. (Si los cuatro botones estn seleccionados, puede cambiar las cuatro propiedades AutoSize al mismo tiempo.) En la siguiente imagen se muestran los cuatro botones. Visor de imgenes con cuatro botones
6.
Ahora, ejecute de nuevo el programa para ver el formulario que acaba de disear. Al hacer clic en los botones y la casilla todava no sucede nada, pero funcionarn pronto.
Nota
En Visual Basic, la primera letra del nombre de un control se pone en mayscula de forma predeterminada, de modo que los nombres son PictureBox1, CheckBox1, etc.
Hay cuatro botones en el formulario, que el IDE ha denominado button1, button2, button3 y button4. Solo con mirar los nombres actuales no sabemos cul es el botn Cerrar ni cul es el botn Mostrar una imagen. Por ello, resulta til dar nombres a los controles de botn.
Nota
Si intenta cambiar el nombre del botn por BotnCerrar, con un espacio entre las palabras Botn y Cerrar, el IDE muestra el mensaje de error: "El valor de la propiedad no es vlido". En los nombres de los controles no se permiten espacios (ni algunos otros caracteres).
2.
Cambie el nombre de los otros tres botones a backgroundButton, clearButton y showButton. Puede comprobar los nombres haciendo clic en la lista desplegable de seleccin de controles en la ventana Propiedades. Aparecern los nuevos nombres de los botones.
3.
Haga doble clic en el botn Mostrar una imagen en el Diseador de Windows Forms. Al hacerlo, el IDE abre una nueva pestaa en la ventana principal denominada pestaa Form1.cs, como se muestra en la siguiente imagen. Pestaa Form1.cs con cdigo de Visual C#
4.
End Sub
Se trata de un mtodo denominado showButton_Click(). El IDE lo agreg al hacer clic en el botn showButton. Este mtodo contiene cdigo que se ejecuta cuando se hace clic en el botn Mostrar una imagen.
Nota
En este tutorial, el cdigo de Visual Basic que se genera automticamente se ha simplificado quitando todo lo que hay entre los parntesis (). Siempre que esto sucede, se puede quitar el mismo cdigo. El programa funcionar en ambos casos. En el resto de los tutoriales, se simplifica el cdigo generado automticamente siempre que sea posible.
5.
6.
Vaya a la pestaa del diseador (pestaa Form1.cs [Design] en Visual C# o Form1.vb [Design] en Visual Basic) y haga doble clic en el botn Borrar la imagen. Repita el procedimiento para los dos ltimos botones. Cada vez, el IDE agrega un nuevo mtodo al cdigo del formulario. Haga doble clic en el control CheckBox en el Diseador de Windows Forms, para que el IDE agregue un mtodo checkBox1_CheckedChanged() ms. Se llama a este mtodo cada vez que el usuario activa o desactiva la casilla.
Nota
Cuando se trabaja en un programa, a menudo se utilizan alternativamente el editor de cdigo y el Diseador de Windows Forms. El IDE facilita la navegacin en el proyecto. El Explorador de soluciones se utiliza para abrir el Diseador de Windows Forms haciendo doble clic en Form1.cs en Visual C# o en Form1.vb en Visual Basic.
7. 8. 9. 10.
11. 12. Private Sub clearButton_Click() Handles clearButton.Click 13. 14. End Sub 15. 16. Private Sub backgroundButton_Click() Handles backgroundButton.Click 17. 18. End Sub 19. 20. Private Sub closeButton_Click() Handles closeButton.Click 21. 22. End Sub 23. 24. Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged 25. 26. End Sub 27. 28.
Nota
Los cinco mtodos que ha agregado se denominan controladores de eventos, porque el programa los llama cada vez que se produce un evento (por ejemplo, cuando un usuario hace clic en un botn o activa una casilla). Al hacer doble clic en un control en el IDE, este agrega un mtodo de control de eventos para ese control. Por ejemplo, cuando se hace doble clic en un botn, el IDE agrega un controlador para este evento Click (al que se llamar cada vez que el usuario haga clic en el botn). Cuando se hace doble clic en una casilla, el IDE agrega un controlador para el evento CheckedChanged correspondiente (al que se llamar cada vez que el usuario active o desactive la casilla). Despus de agregar un controlador de eventos para un control, puede volver en cualquier momento a l desde el Diseador de Windows Forms haciendo doble clic en el control.
Nota
Los nombres son importantes al compilar programas. Los mtodos (incluso los controladores de eventos) pueden tener cualquier nombre que se desee. Al agregar un controlador de eventos con el IDE, este elige un nombre basado en el nombre del control y en el evento que se controla. Por ejemplo, el evento Click para un botn denominado showButton se denomina mtodo de control de eventos showButton_Click(). Adems, se suelen agregar parntesis de apertura y cierre () despus del nombre de mtodo para dejar claro que se trata de un mtodo.
Nota
El grupo Cuadros de dilogo del Cuadro de herramientas tiene componentes que abren automticamente muchos cuadros de dilogo de gran utilidad y que se pueden utilizar para abrir y guardar archivos, examinar carpetas y elegir fuentes o colores. En este proyecto se utilizan dos componentes de cuadro de dilogo: OpenFileDialog y ColorDialog.
2.
Para agregar un componente denominado a openFileDialog1 al formulario, haga doble clic en OpenFileDialog. Para agregar un componente denominado colorDialog1 al formulario, haga doble clic en ColorDialog en el Cuadro de herramientas. (Este se utiliza en el siguiente paso del tutorial.) Debera aparecer un cuadro gris en la parte inferior del Diseador de Windows Forms, con un icono para cada uno de los dos componentes de cuadro de dilogo agregados, como se muestra en la siguiente imagen. Componentes de cuadro de dilogo
3.
Vaya al Diseador de Windows Forms y haga clic en el icono openFileDialog1 en el cuadro gris de la parte inferior del diseador. Establezca dos propiedades: Establezca la propiedad Filter en lo siguiente (puede copiarlo y pegarlo): Archivos JPEG (*.jpg)|*.jpg|Archivos PNG (*.png)|*.png|Archivos BMP (*.bmp)|*.bmp|Todos los archivos (*.*)|*.* Establezca la propiedad Title en lo siguiente: Seleccionar un archivo de imagen
Nota
Para ver un ejemplo del cuadro de dilogo Abrir archivo en una aplicacin diferente, abra el Bloc de notas o Paint y haga clic en Abrir en el men Archivo. Observe que hay una lista desplegable de tipo de archivo en la parte inferior. Acabamos de utilizar la propiedad Filter del componente OpenFileDialog para configurarla. Observe tambin que las propiedades Title y Filter estn en negrita en la ventana Propiedades. El IDE lo hace para mostrarle todas las propiedades que han cambiado respecto de sus valores predeterminados.
Paso 8: Escribir cdigo para el controlador de eventos del botn Mostrar una imagen
Visual Studio 2010 En este paso, conseguiremos que botn Mostrar una imagen funciona as:
Cuando un usuario hace clic en ese botn, el programa abre un cuadro de dilogo Abrir archivo. Si un usuario elige un archivo de imagen, el programa muestra esa imagen en el control PictureBox.
El IDE incluye una eficaz herramienta denominada IntelliSense que ayuda a escribir cdigo. Cuando se escribe cdigo, el IDE abre un cuadro con sugerencias para completar las palabras parciales que se escriben. Intenta determinar lo que se desea hacer a continuacin y salta automticamente al ltimo elemento que se elige en la lista. Puede utilizar las flechas arriba o abajo para moverse por la lista o bien continuar escribiendo letras para reducir las opciones propuestas. Cuando vea la opcin que desea, presione la tecla TAB para seleccionarla. Otra opcin es pasar por alto las sugerencias, si no las necesita.
Para escribir cdigo para el controlador de eventos de botn Mostrar una imagen
1. Vaya al Diseador de Windows Forms y haga doble clic en el botn Mostrar una imagen. El IDE va inmediatamente al diseador de cdigo y mueve su cursor de modo para situarlo dentro del mtodo showButton_Click() que agreg previamente. Escriba una i en la lnea vaca entre las dos llaves { }. (En Visual Basic, escriba en la lnea vaca entre Private Sub y End Sub.) Se abre una ventana IntelliSense, como se muestra en la siguiente imagen. IntelliSense con cdigo de Visual C#
2.
3.
La ventana IntelliSense debe mostrar resaltada la palabra if. (De lo contrario, escriba una f minscula, y lo har.) Observe que la informacin sobre herramientas amarilla que se encuentra al lado de la ventana IntelliSense muestra Fragmento de cdigo para instruccin if. (En Visual Basic, la informacin sobre herramientas dice tambin que se trata de un fragmento de cdigo, pero con una redaccin ligeramente diferente.) Este es el fragmento de cdigo que vamos a utilizar. Presione la tecla TAB para insertar if en el cdigo. A continuacin, presione de nuevo la tecla TAB para utilizar el fragmento de cdigo if. (Si ha hecho clic en alguna otra parte y ha desaparecido la ventana IntelliSense, borre la i con la tecla de retroceso y vuelva a escribirla; se volver a abrir la ventana IntelliSense.)
Cdigo en Visual C#
4.
A continuacin, utilice IntelliSense para escribir ms cdigo y abrir un cuadro de dilogo Abrir archivo. Si el usuario ha hecho clic en el botn Aceptar, el control PictureBox cargar el archivo seleccionado por el usuario. En los siguientes pasos se muestra cmo escribir el cdigo. Aunque los pasos son muchos, solamente habr que presionar unas cuantas teclas: a. Comience con el texto seleccionado true del fragmento de cdigo. Escriba op para sobrescribirlo. (En Visual Basic, empieza con mayscula inicial, de modo que deber escribir Op.) b. Se abre la ventana IntelliSense y muestra openFileDialog1. Presione TAB para seleccionarlo. (En Visual Basic, empieza con mayscula inicial, de modo que aparecer OpenFileDialog1. Asegrese de que OpenFileDialog1 est seleccionado.) c. Escriba un punto (.) (En ingls se denomina period o dot.) Dado que escribi un punto justo despus de openFileDialog1, se abre una ventana IntelliSense, que contiene todas las propiedades y los mtodos de componente de OpenFileDialog. Se trata de las mismas propiedades que aparecen en la ventana Propiedades al hacer clic en este componente en el Diseador de Windows Forms. Hay tambin mtodos que pueden ordenar al componente que realice acciones (como abrir un cuadro de dilogo).
Nota
La ventana IntelliSense puede mostrar propiedades y mtodos. Para determinar lo que est mostrando, fjese en el icono de la izquierda. Se muestra una imagen de un bloque junto a cada mtodo y una imagen de una mano junto a cada propiedad. Adems, aparece un icono de rayo junto a cada evento. Estas imgenes se muestran como sigue.
d. e. f. g. h. i. j.
Icono de mtodo
Icono de propiedad
Icono de evento
Empiece a escribir ShowDialog (el uso de maysculas o minsculas no es significativo en IntelliSense). El mtodo ShowDialog() mostrar el cuadro de dilogo Abrir archivo. Cuando la ventana haya resaltado ShowDialog, presione la tecla TAB.
k.
Cuando se utiliza un mtodo con un control o un componente (lo que se denomina llamar a un mtodo), es preciso agregar parntesis. As pues, especifique los parntesis de apertura y cierre: ()
Nota
Los mtodos constituyen una parte importante de cualquier programa. En este tutorial se han mostrado varias maneras de utilizarlos. Se puede llamar al mtodo de un componente para ordenarle que haga algo, por ejemplo, como cuando llam al mtodo ShowDialog() del componente OpenFileDialog. Puede crear sus propios mtodos para que los programas realicen acciones, como el que estamos construyendo ahora que se denomina mtodo showButton_Click(), que abre un cuadro de dilogo y una imagen cuando un usuario hace clic en un botn.
l.
Para Visual C#, agregue un espacio y, a continuacin, agregue dos signos igual (==). Para Visual Basic, agregue un espacio y, a continuacin, utilice un solo signo igual (=). (Visual C# y Visual Basic utilizan distintos operadores de igualdad.) m. Agregue otro espacio. En cuanto haga, se abrir otra ventana IntelliSense. Empiece a escribir DialogResult y presione la tecla TAB para agregarlo.
Nota
Cuando se escribe cdigo para llamar a un mtodo, a veces devuelve un valor. En este caso, el mtodo ShowDialog() del componente OpenFileDialog devuelve un valor DialogResult. DialogResult es un valor especial que le indica lo que ha sucedido en un cuadro de dilogo. Un componente OpenFileDialog puede dar lugar a que el usuario haga clic en Aceptar o en Cancelar, de modo que el mtodo ShowDialog() devuelva DialogResult.OK o DialogResult.Cancel.
n.
Escriba un punto para abrir la ventana IntelliSense del valor DialogResult. Escriba la letra O y presione la tecla TAB para insertar OK.
Nota
Deber quedar completa la primera lnea de cdigo. Para Visual C#, debera ser la siguiente. if (openFileDialog1.ShowDialog() == DialogResult.OK) Para Visual Basic, debera ser la siguiente. If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
o.
Ahora, agregue otra lnea de cdigo ms. Puede escribirla (o copiar y pegar), pero puede resultar interesante utilizar IntelliSense para agregarla. Cuanto ms se
familiarice con IntelliSense, ms rpidamente podr escribir su propio cdigo. El mtodo showButton_Click() final tendr el siguiente aspecto. C# VB Copiar
End Sub
Cuando hizo doble clic en el botn Mostrar una imagen en el Diseador de Windows Forms, el IDE agreg automticamente un mtodo al cdigo del programa. Los mtodos permiten organizar el cdigo: son la manera de agrupar las partes del cdigo. Casi siempre, un mtodo realiza una cantidad reducida de acciones en un orden concreto; por ejemplo, el mtodo showButton_Click() muestra un cuadro de dilogo y, a continuacin, carga una imagen. Un mtodo se compone de instrucciones. Podemos considerar que un mtodo es una manera de empaquetar instrucciones juntas. Cuando se ejecuta un mtodo, o se le llama, se ejecutan las instrucciones que contiene en orden, una tras otra, empezando por la primera. A continuacin, se muestra un ejemplo de una instruccin. C# Copiar
pictureBox1.Load(openFileDialog1.FileName); pictureBox1.Load(openFileDialog1.FileName)
Las instrucciones son lo que permite que el programa haga cosas.En Visual C#, una instruccin finaliza siempre en un signo de punto y coma.En Visual Basic, el final de una lnea es el final de una instruccin.(No se necesita indicar el signo de punto y coma en Visual Basic.) La instruccin anterior ordena al control PictureBox que cargue el archivo que el usuario seleccion con el componente OpenFileDialog. A continuacin, se agrega un comentario al cdigo. Un comentario es una nota que no cambia la forma de comportarse del programa. Hace que resulte ms fcil entender qu hace el cdigo. En Visual C#, se utilizan dos barras diagonales (//) para marcar una lnea como comentario. En Visual Basic, se utiliza una comilla sencilla (') para marcar una lnea como comentario. Despus de agregar un comentario, se prueba el programa. Acaba de compilar algo que funciona y, aunque todava no est terminado, ya es capaz de cargar una imagen.
' Show the Open File dialog. If the user clicks OK, load the ' picture that the user chose. If OpenFileDialog1.ShowDialog() = DialogResult.OK Then PictureBox1.Load(OpenFileDialog1.FileName) End If
End Sub
Nota
El controlador de eventos Click del botn showButton ya est completado y funciona. Ha empezado a escribir cdigo, comenzando por una instruccin if. Una instruccin if es la manera de ordenar al programa: "Compruebe esto y, si se cumple, realice estas acciones". En este caso, se ordena al
programa que abra el cuadro de dilogo Abrir archivo y, si el usuario selecciona un archivo y hace clic en el botn Aceptar, ese archivo se carga en PictureBox.
Nota
El IDE se ha creado para facilitar la tarea de escribir cdigo. Los fragmentos de cdigo constituyen una manera de conseguirlo. Un fragmento de cdigo es un acceso directo que se expande para crear un bloque pequeo de cdigo. Puede ver todos los fragmentos de cdigo seleccionando Administrador de fragmentos de cdigo en el men Herramientas. El fragmento de cdigo if se encuentra en Modelos de cdigo, en la subcarpeta Condicionales y bucles. Este administrador se puede utilizar para examinar los fragmentos de cdigo existentes o agregar los suyos propios. Para activar un fragmento de cdigo al escribir cdigo, escrbalo y presione la tecla TAB. Muchos fragmentos de cdigo aparecen en la ventana IntelliSense, motivo por el cual la tecla TAB se presiona dos veces: la primera, para seleccionar el fragmento de cdigo en la ventana IntelliSense y, la segunda, para ordenar al IDE que lo utilice. (IntelliSense admite el fragmento de cdigo if, pero no el fragmento de cdigo ifelse.)
2.
Antes de ejecutar el programa, gurdelo haciendo clic en el botn de la barra de herramientas Guardar todo, que se muestra a continuacin. Botn Guardar todo
Como alternativa, puede hacer clic en Guardar todo en el men Archivo. El procedimiento recomendado consiste en guardar desde el principio y a menudo. Mientras se ejecuta, el programa debera parecerse a la siguiente imagen. Visor de imgenes
3.
Nota
El procedimiento recomendado es comentar siempre el cdigo. Los comentarios son informacin que leern otras personas y merece la pena dedicar tiempo a hacer que el cdigo resulte fcil de entender. El programa pasa por alto todo lo que hay en una lnea de comentario. En Visual C#, para marcar una lnea como comentario se escriben dos barras diagonales (//) al principio. En Visual Basic, se utiliza para ello una comilla sencilla (').
Private Sub clearButton_Click() Handles clearButton.Click ' Clear the picture. PictureBox1.Image = Nothing End Sub
Private Sub backgroundButton_Click() Handles backgroundButton.Click ' Show the color dialog box. If the user clicks OK, change the ' PictureBox control's background to the color the user chose. If ColorDialog1.ShowDialog() = DialogResult.OK Then PictureBox1.BackColor = ColorDialog1.Color End If End Sub
Private Sub closeButton_Click() Handles closeButton.Click ' Close the form. Close() End Sub
Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged ' If the user selects the Stretch check box, change ' the PictureBox's SizeMode property to "Stretch". If the user ' clears the check box, change it to "Normal". If CheckBox1.Checked Then
3.
Seleccione un color para establecer el color de fondo de PictureBox. Fjese con atencin en el mtodo backgroundButton_Click() para entender cmo funciona.
Nota
Puede cargar una imagen de Internet pegando su direccin URL en el cuadro de dilogo Abrir archivo. Intente encontrar una imagen con un fondo transparente, para que se vea el color de fondo.
4.
Haga clic en el botn Borrar la imagen para asegurarse de que se borra. A continuacin, salga del programa haciendo clic en el botn Cerrar.
Disear un formulario mediante un contenedor Panel. Construir un laberinto mediante controles Label. Escribir cdigo para mostrar un cuadro de mensaje. Configurar controladores de eventos para los eventos del mouse. Reproducir sonidos en el programa. Organizar el cdigo mediante clases.
As funcionar el laberinto: el puntero del mouse se sita al principio en la esquina superior izquierda del laberinto. El usuario navega por el laberinto, con cuidado de no tocar ninguno de los muros con el puntero. Si el puntero toca alguno de los muros, vuelve automticamente hasta la salida. Pero si el puntero llega a la etiqueta Meta al final del laberinto, aparece un mensaje de felicitacin y el juego finaliza. Cuando termine, el programa se parecer al de la ilustracin siguiente. Juego que crear en este tutorial
Nota
En este tutorial, se trata tanto Visual C# como Visual Basic, por lo que deber centrarse en la informacin especfica del lenguaje de programacin que use.
Ttulo
Paso 1: Crear un proyecto y agregar un panel al formulario Paso 2: Compilar el laberinto mediante etiquetas Paso 3: Finalizar el juego
Descripcin
Para empezar, cree el proyecto y agregue un contenedor Panel. Construya un laberinto agregando numerosos controles Label al formulario. Haga que el juego del laberinto finalice haciendo que funcione la etiqueta Meta.
Paso 4: Agregar un mtodo para reiniciar el juego Paso 5: Agregar un controlador de eventos MouseEnter para cada muro
Escriba su propio mtodo para reiniciar el juego del laberinto. Agregue un controlador de eventos para devolver el puntero del mouse del usuario a la salida si el puntero toca algn muro.
Paso 6: Agregar un SoundPlayer Paso 7: Agregar cdigo al formulario para reproducir sonidos
Empiece a agregar sonido al juego del laberinto. Llame a cada mtodo SoundPlayer's Play() a fin de reproducir el sonido en el momento adecuado.
Ejecute el programa y prubelo. Pruebe con otras caractersticas, como cambiar sonidos y colores.
b. c. d.
Cuando el formulario tenga el tamao adecuado, establezca la propiedad Text en Laberinto. Para que el usuario no pueda cambiar el tamao del formulario, establezca la propiedad FormBorderStyle en Fixed3D. Deshabilite el botn Maximizar de la barra de ttulo del formulario estableciendo la propiedad MaximizeBox en False.
Nota
Cuando se crea un formulario nuevo, de manera predeterminada est configurado de modo que el usuario pueda cambiar el tamao de dos maneras: el usuario puede arrastrar los lados o las esquinas del formulario, o hacer clic el botn Maximizar para maximizar el formulario. Para asegurarse de que un usuario no pueda cambiar el tamao del formulario, deshabilite estas dos opciones. Establecer la propiedad FormBorderStyle en cualquiera de los estilos fijos evita que el usuario cambie su tamao, pero todava hacer clic en el botn Maximizar. Por ello, tambin hay que deshabilitar la propiedad MaximizeBox.
Luego, es preciso crear la pista de juegos, donde se construir el laberinto. Para ello, utilice un control Panel. Un panel es un tipo de control contenedor que permite disponer un grupo de controles. A diferencia de algunos de los otros contenedores (como el contenedor TableLayoutPanel y el contenedor FlowLayoutPanel), un panel no reorganiza los controles
que contiene. Esto le ofrece libertad para colocar los controles donde desee, pero un panel no resulta til cuando el usuario cambia el tamao de la ventana (al contrario que con los controles TableLayoutPanel o FlowLayoutPanel). 5. Vaya al grupo Contenedores del Cuadro de herramientas y haga doble clic en Panel para agregar un panel al formulario. Cuando el panel est seleccionado, debera aparecer un icono de desplazamiento en su esquina superior izquierda, como se muestra a continuacin. Icono de desplazamiento
6.
Arrastre el panel hasta que se encuentre muy cerca de la esquina superior izquierda del formulario. Al arrastrarlo, observar una caracterstica muy til del IDE: en cuanto el panel se encuentre a una distancia determinada de la parte superior o del borde izquierdo del formulario, se coloca automticamente en su lugar y una lnea de separacin azul entre el borde del panel y el borde del formulario. Puede utilizar esto para alinear fcilmente el panel de modo que todos sus bordes estn exactamente a la misma distancia de los bordes del formulario. En cuanto vea las lneas de separacin azules superior e izquierda, suelte el botn del mouse para colocar el panel en su lugar. Las lneas de separacin aparecen como sigue. Lneas de separacin azules
Arrastre el controlador de arrastre inferior derecho hasta que el panel se coloque en su lugar respecto de los bordes derecho e inferior. 7. 8. Como desea que el usuario vea el permetro del laberinto, es preciso que tenga un borde visible. Seleccione el panel y establezca su propiedad BorderStyle en Fixed3D. Guarde el proyecto haciendo clic en el botn Guardar todo de la barra de herramientas, que se muestra a continuacin. Botn Guardar todo
9.
Para ejecutar el programa, presione F5 o haga clic en el botn de Iniciar depuracin de la barra de herramientas, que se muestra a continuacin.
10. Antes de seguir al prximo paso del tutorial, detenga el programa cerrando el formulario o haciendo clic en el botn Detener depuracin de la barra de herramientas Depuracin. (Mientras el programa est en ejecucin, el IDE permanece en modo de solo lectura.)
Nota
Esto puede parecer inusual porque un control Label est diseado para utilizarse como una etiqueta. En este caso, utilizamos la etiqueta como bloque de dibujo, porque funciona. Una parte importante de la programacin consiste en reconocer cundo una herramienta del cuadro de herramientas (o, en este caso, del Cuadro de herramientas del IDE) funciona para la tarea que se desea realizar, aunque no se haya diseado originalmente para ello.
3.
4.
Ahora, puede ser creativo al construir el laberinto. Para copiar la etiqueta, seleccinela y haga clic en Copiar en el men Edicin (o presione Ctrl+C). A continuacin, pguela varias veces. Seleccione Pegar en el men Edicin (o presione Ctrl+V). As deberan crearse los muros horizontales del laberinto. Tome uno de los muros y arrstrelo para que quede alto y estrecho. Cpielo y pguelo varias veces para crear los muros verticales. Arrastre las etiquetas por el panel y cree el laberinto. No deje demasiado estrechos los pasadizos, pues resultara demasiado difcil jugar. Deja espacio adicional en la esquina superior izquierda, porque es donde el jugador empieza a recorrer el laberinto.
Nota
Como recordar, el tamao del formulario aparece en la barra de estado del IDE al cambiar su tamao. El IDE hace lo mismo al cambiar el tamao de las etiquetas o de cualquier otro control. Si lo desea, puede utilizar esta caracterstica para asegurarse de que todos los muros del laberinto tienen el mismo ancho. Las barras de alineacin del IDE que utiliz para colocar el panel tambin resultan tiles para colocar los muros del laberinto. Tambin puede utilizar las teclas de direccin del teclado para ajustar con precisin la posicin del control que est seleccionado actualmente. En la siguiente imagen se muestra el tamao en la barra de estado.
5.
6.
7.
8. 9.
Despus de disear el laberinto, vaya al grupo Controles comunes del Cuadro de herramientas y haga doble clic en Label una vez ms. Utilice la lnea (Name) de la ventana Propiedades para denominarla finishLabel y cambie su propiedad Text a Meta. Arrastre la nueva etiqueta Meta al final del laberinto. Este es el objetivo que usuario debe alcanzar. Cierre el proyecto y ejecute el programa de nuevo. A continuacin se muestra un ejemplo de un formulario de laberinto finalizado. (Su laberinto tendr un aspecto diferente.) Formulario de laberinto finalizado
Para que el juego finalice, hay que hacer que funcione la etiqueta Meta. Para ello, se agrega un controlador de eventos para el evento MouseEnter de la etiqueta.
Nota
Si ha completado el tutorial 1: Crear un visor de imagen, ya sabe qu son los controladores de eventos. La mayora de los controles tienen muchos eventos diferentes que pueden generar. En el visor de imagen se utilizan el evento Click del control Button y el evento CheckChanged del control CheckBox. En este tutorial, se utiliza el evento MouseEnter del control Label, que se genera cada vez que el puntero del mouse entra en el control. El control Label tiene ms de cuatro docenas de eventos. La mayora de ellos tiene nombres intuitivos, como DoubleClick, Resize y TextChanged. Ms adelante en este tutorial se proporciona una lista de nombres de evento.
Icono de propiedad
Evento MouseEnter
2.
Haga doble clic en el palabra MouseEnter. Despus de hacerlo, el IDE agrega automticamente un mtodo de control de eventos al formulario y muestra el editor de cdigo, como sigue. C# VB Copiar
End Sub
Este mtodo de control de eventos se ejecuta cada vez que el puntero del mouse entra en la etiqueta. 3. Queremos que el programa abra un cuadro de mensaje que felicite al usuario y que, a continuacin, se cierre el programa. Para ello, se agregan lneas de cdigo (con un comentario), como sigue. C# VB
Copiar
' Show a congratulatory MessageBox, then close the form. MessageBox.Show("Congratulations!") Close() End Sub
Nota
El mtodo finishLabel_MouseEnter() tiene dos instrucciones. La primera instruccin consiste en llamar a un mtodo denominado Show(), que abre un cuadro de mensaje que contiene cualquier texto que haya escrito entre los parntesis.
4.
Puede obtener ms informacin sobre lo que sucede utilizando el IDE para explorar el cdigo. Coloque el puntero del mouse de modo que se encuentre encima de la palabra MessageBox. Debera aparecer la siguiente informacin sobre herramientas. Tooltip
Nota
El IDE muestra que hay una clase denominada System.Windows.Forms.MessageBox, y que el mtodo Show() al que ha llamado se encuentra dentro de esa clase. No se requieren conocimientos completos para que el cuadro de mensaje funcione, pero la informacin adicional puede resultar til. Con respecto a la segunda instruccin, cada formulario tiene un mtodo integrado denominado Close() que hace que el formulario se cierre. Algunos programas tienen varias ventanas entre las que el usuario puede alternar. Cuando se trabaja en un programa de ese tipo, este cierra la ventana activa pero en ejecucin el resto del programa. (Por ejemplo, si tiene varios documentos de Microsoft Office Word abiertos al mismo tiempo, al cerrar una ventana de documento se cierra ese
documento, pero Office Word permanece abierto.) Sin embargo, en un programa como este, donde hay una sola ventana, al cerrarla se deja de ejecutar el programa; por consiguiente, al cerrar el formulario, se cierra el programa.
5.
Guarde y ejecute el programa. Mueva el puntero del mouse sobre la etiqueta Meta. Debera abrir el mensaje y, a continuacin, cerrar el programa.
Nota
Escribir sus propios mtodos es til cuando hay un conjunto de instrucciones que se tienen que ejecutar muchas veces, en lugares diferentes. Esto sucede con frecuencia cuando se escriben programas. Por ejemplo, para crear este programa de laberinto, queremos que el programa site automticamente el puntero del mouse en la esquina superior izquierda del panel cada vez que se inicie. Cuando el usuario mueve el puntero y toca un muro, el programa tiene que volver a colocar el puntero en la salida. Cuando el usuario saca el puntero de la pista de juegos y vuelve a situarlo en ella, el programa tiene que volver a colocar el puntero en la salida. El puntero se puede colocar en la salida con tres lneas de cdigo. Pero ahorraremos tiempo si evitamos escribir esas mismas tres lneas de cdigo en distintos lugares del programa. Si colocamos esas tres lneas de cdigo en un mtodo (por ejemplo, un mtodo denominado MoveToStart()) solo tendremos que escribirlas una vez. A continuacin, bastar con llamar al mtodo MoveToStart() cada vez que haya que devolver el puntero a la esquina superior izquierda del panel.
Copiar
Private Sub MoveToStart() Dim startingPoint = Panel1.Location startingPoint.Offset(10, 10) Cursor.Position = PointToScreen(startingPoint) End Sub
3.
Hay un tipo especial de comentario que puede agregar encima de cualquier mtodo, y el IDE puede ayudarle a agregarlo. Site el cursor en la lnea que est encima del nuevo mtodo. En Visual C#, agregue tres marcas de barra diagonal (///). En Visual Basic, agregue tres comillas sencillas ('''). El IDE incluye automticamente el siguiente texto. C# VB Copiar
''' <summary> ''' ''' </summary> ''' <remarks></remarks> Private Sub MoveToStart() Dim startingPoint = Panel1.Location startingPoint.Offset(10, 10) Cursor.Position = PointToScreen(startingPoint) End Sub
4.
En la lnea situada entre las dos etiquetas summary, escriba el siguiente comentario. (Despus de presionar ENTRAR, el IDE agrega automticamente una nueva lnea con tres
marcas de barra diagonal (///) o tres comillas sencillas ('''), dependiendo del lenguaje de programacin, de modo que pueda continuar su comentario.) C# VB Copiar
''' <summary> ''' Move the pointer to a point 10 pixels down and to the right ''' of the starting point in the upper-left corner of the maze. ''' </summary>
Nota
Acaba de agregar un comentario XML. Como recordar, el IDE le ha mostrado informacin en una informacin sobre herramientas al detener el cursor sobre la palabra MessageBox. El IDE rellena automticamente la informacin sobre herramientas de los mtodos. Cualquier cosa que escriba en un comentario XML aparecer en la informacin sobre herramientas del IDE, as como en la ventana IntelliSense. Cuando un programa tiene muchos mtodos, puede resultar de gran utilidad. Adems, si coloca un muro a 10 pxeles de distancia de los bordes superior e izquierdo de la esquina superior izquierda del panel, puede cambiar (10, 10) en el cdigo. Experimente con distintos nmeros hasta que encuentre una salida para el puntero que sea adecuada para el laberinto.
5.
Despus de agregar el mtodo, hay que llamarlo. Dado que queremos que el programa mueva el puntero a la salida en cuanto el programa se inicie, se debe llamar al mtodo tan pronto como se inicia el formulario. Para Visual C#, busque el siguiente mtodo en el cdigo del formulario. C# Copiar
Para Visual Basic, agregue este mtodo al cdigo del formulario. Antes del mtodo finishLabel_MouseEnter, escriba el siguiente cdigo. VB Copiar
Al presionar la tecla ENTRAR para pasar a la lnea siguiente, IntelliSense debera hacer que apareciese el siguiente cdigo para completar el mtodo. VB Copiar
Public Sub New() ' This call is required by Windows Forms Designer. InitializeComponent() ' Add any initialization after the InitializeComponent() call. End Sub
Se trata de un mtodo especial denominado constructor. Se ejecuta una vez, al crear el formulario. En este momento, lo nico que hace es llamar al mtodo InitializeComponent(). Vamos a agregarle una lnea para llamar al nuevo mtodo MoveToStart() que acaba de escribir. Antes de continuar, piense qu se debe agregar al programa para que llame al mtodo MoveToStart() inmediatamente despus de llamar al mtodo InitializeComponent().
Nota
El mtodo InitializeComponent() del constructor del formulario es un mtodo escrito por el IDE. Agrega todos los controles y componentes al formulario y configura sus propiedades. Cada vez que se cambia cualquiera de las propiedades del formulario o sus controles, el IDE modifica ese mtodo. Puede examinarlo abriendo el archivo Form1.Designer.cs en el Explorador de soluciones. No es preciso editar el contenido del mtodo InitializeComponent(). El IDE se encarga de ello basndose en el formulario que ha creado en la Vista de diseo.
6.
Agregue una llamada al mtodo MoveToStart() inmediatamente despus de que llame al mtodo InitializeComponent(). El cdigo del formulario debe ser como el siguiente. C# VB Copiar
Public Sub New() ' This call is required by Windows Forms Designer. InitializeComponent() ' Add any initialization after the InitializeComponent() call. MoveToStart() End Sub
Private Sub finishLabel_MouseEnter() Handles finishLabel.MouseEnter ' Show a congratulatory MessageBox, then close the form. MessageBox.Show("Congratulations!") Close() End Sub
''' <summary> ''' Move the mouse pointer to a point 10 pixels down and to the right
''' of the starting point in the upper-left corner of the maze. ''' </summary> ''' <remarks></remarks> Private Sub MoveToStart() Dim startingPoint = Panel1.Location startingPoint.Offset(10, 10) Cursor.Position = PointToScreen(startingPoint) End Sub
End Class
Fjese en la llamada al mtodo MoveToStart() que aparece debajo de InitializeComponent(). Si est programando en Visual C#, recuerde finalizar esa lnea con un signo de punto y coma (;); de lo contrario, el programa no se compilar. 7. Ahora, guarde el programa y ejectelo. En cuanto el programa se inicie, el puntero debera situarse automticamente ligeramente por debajo y a la derecha de la esquina superior izquierda del panel.
Nota
Al escribir directamente el nombre de evento en la tabla de eventos en la ventana Propiedades, se le ordena al IDE que cree un controlador de eventos con ese nombre y lo conecte al evento del control. A menudo, es preferible que el IDE elija los nombres de los eventos, porque los nombres son lgicos y el uso de nombres facilita a los dems la lectura y comprensin de su cdigo. Cuando el IDE elige un nombre para un controlador de eventos, utiliza el nombre del control y el nombre del evento. En este caso, no hemos modificado los nombres predeterminados de los muros, que son label4, label18, label25, etc. As pues, al hacer clic en un muro denominado label12, el IDE habra dado al controlador de eventos el nombre label12_MouseEnter. Al escribir el nombre wall_MouseEnter, estamos eligiendo un nombre ms aplicable. Esto resulta especialmente importante cuando se utiliza un mismo controlador de eventos para varios controles, que es lo que haremos ms adelante en este tutorial.
3.
Despus de presionar ENTRAR, el IDE agrega un nuevo controlador de eventos y lo conecta al evento MouseEnter de ese muro. El cdigo recin agregado debera aparecer en el editor de cdigo como sigue. En Visual Basic, puede que la etiqueta concreta no sea Label8, como se muestra en el cdigo. C# VB
Copiar
End Sub
4.
A continuacin, agregue una llamada a su mtodo MoveToStart(), junto con un comentario que lo explique. Para empezar, vaya al mtodo y agregue la instruccin MoveToStart(). Se abre una ventana IntelliSense y aparece lo siguiente. Ventana IntelliSense
Cuando agregamos, antes, el mtodo MoveToStart(), el IDE lo agreg a la ventana IntelliSense. El comentario XML que agregamos aparece en la informacin sobre herramientas. Esto resulta til cuando se escriben programas con gran cantidad de mtodos. 5. Presione la tecla TAB para ordenar a IntelliSense que complete el nombre del mtodo. Si est escribiendo el cdigo en Visual C#, recuerde agregar el signo de punto y coma (;) al final de la instruccin. A continuacin, agregue un comentario encima de la instruccin. El cdigo debe tener un aspecto parecido al siguiente. En Visual Basic, puede que la etiqueta concreta no sea Label8, como se muestra en el cdigo. C# VB
Copiar
Private Sub wall_MouseEnter() Handles Label8.MouseEnter ' When the mouse pointer hits a wall or enters the panel, ' call the MoveToStart() method. MoveToStart() End Sub
6.
Guarde y ejecute el programa. Mueva el puntero del mouse por encima del muro al que ha conectado el controlador de eventos. (Si no recuerda cul eligi, mueva el puntero del mouse sobre cada muro hasta que encuentre el apropiado.) En cuanto lo toque, debera devolver el puntero del mouse al principio. Luego, hay que hacer lo mismo para el resto de los muros. Puede escribir el mismo controlador de eventos MouseEnter para cada uno de ellos. Sin embargo, sera un proceso largo, que dara lugar a varias lneas del mismo cdigo en el programa y sera difcil de cambiar. El IDE proporciona una manera ms fcil de conectar el mismo controlador de eventos a todos los muros.
7. 8. 9.
Vaya al Diseador de Windows Forms y haga clic en Seleccionar todo en el men Edicin. Mantenga presionada la tecla CTRL y, a continuacin, haga clic en la etiqueta Finish para borrar la seleccin. Deberan quedar seleccionados todos los muros y el panel. Ahora, vaya a la tabla de eventos de la ventana Propiedades. Desplcese hacia abajo hasta el evento MouseEnter y haga clic en el cuadro de edicin situado a su lado. Debera ver una flecha de lista desplegable. Al hacer clic en la flecha, aparece una lista de todos los controladores de eventos del programa que puede elegir para este evento. En este caso, debera aparecer el controlador de eventos finishLabel_MouseEnter que agreg anteriormente, as como el controlador wall_MouseEnter que acaba de escribir, como se muestra en la siguiente imagen. Evento MouseEnter con controladores de eventos
10. Seleccione wall_MouseEnter. (Si selecciona el controlador de eventos equivocado o agrega uno nuevo accidentalmente, puede seleccionar todos los muros y el panel otra vez y, a continuacin, elegir el mtodo correcto.) 11. Ahora, el juego del laberinto debera resultar ms divertido. Pruebe a guardarlo y ejecutarlo. Si su puntero toca un muro o usted lo saca del laberinto y vuelve a entrar en l, el programa debera cambiar de posicin automticamente el puntero y situarlo al principio del laberinto.
' This SoundPlayer plays a sound whenever the player hits a wall. Dim startSoundPlayer = New System.Media.SoundPlayer("C:\Windows\Media\chord.wav")
Public Sub New() ' This call is required by Windows Forms Designer. InitializeComponent() ' Add any initialization after the InitializeComponent() call. MoveToStart() End Sub
Nota
La primera lnea (public partial class Form1 : Form) ha aparecido ya varias veces. Es importante, porque incluye la palabra clave de clase. La palabra clave de clase aparece muchas veces, porque una clase es un bloque de creacin bsico de cualquier programa.
2.
Anteriormente, ha situado el puntero del mouse sobre la palabra MessageBox de la instruccin MessageBox.Show("Congratulations!");, para que el IDE abriese una informacin sobre herramientas. Hgalo de nuevo, pero fjese con ms atencin en la primera lnea, que se muestra a continuacin. Tooltip
Nota
La palabra clave de clase aparece en la primera lnea. Aparece con frecuencia porque el cdigo est organizado en clases, como sigue: el programa tiene clases, cada clase tiene mtodos y cada mtodo tiene instrucciones. Hay numerosas clases integradas, como MessageBox. La clase MessageBox tiene un mtodo denominado Show(). Cuando se le llama, ejecuta instrucciones que abren un cuadro de mensaje. Tambin ha trabajado con las clases Button, Panel y Label. Al establecer sus
propiedades, trabaj con otro aspecto de las clases: una clase puede tener propiedades adems de mtodos. Al establecer esas propiedades, podemos hacer que la clase ejecute instrucciones que cambian el comportamiento.
Como habr supuesto, SoundPlayer es una clase que reproduce un sonido. Al crear un SoundPlayer con la palabra clave new, este carga un sonido de un archivo, que puede reproducir mediante su mtodo Play(). Vamos a utilizar este SoundPlayer para reproducir el sonido Chord de Windows cuando el jugador inicie un nuevo juego, o cuando el puntero toque un muro y el jugador tenga que volver a empezar. (Por eso se denomina startSoundPlayer.) 3. Si desea utilizar otros sonidos diferentes, reemplace la ruta de acceso que figura entre las comillas de la nueva instruccin (C:\Windows\Media\chord.wav) por la ruta de acceso del archivo de sonido que desea utilizar. Al compilar un formulario en el Diseador de Windows Forms, utiliza el IDE para ayudarle a crear su propia clase, en este caso, una clase denominada Form1. Cuando agreg esa lnea de cdigo encima del constructor, agreg un nuevo SoundPlayer al formulario, exactamente igual que antes haba agregado un botn o una etiqueta. La instruccin se encuentra fuera de los mtodos, para que ms de un mtodo pueda tener acceso al SoundPlayer. Por ese motivo, ha tenido que colocar la nueva instruccin dentro del cdigo del formulario pero fuera de sus mtodos. Lo hemos denominado startSoundPlayer, de la misma manera que hemos denominado finishLabel uno de los controles Label. Despus de agregar la instruccin para crear un nuevo SoundPlayer y denominarlo startSoundPlayer, aparece en la ventana IntelliSense, exactamente igual que las etiquetas, los botones y otros controles. Puede que parezca complicado, pero es similar a lo que hemos hecho previamente en el IDE. Por ejemplo, cuando utilizamos el Cuadro de herramientas del IDE para agregar un botn o una etiqueta al formulario, el IDE agrega automticamente lneas de cdigo que se utilizan para crear un nuevo botn o una nueva etiqueta. Ahora har lo mismo, salvo que esta vez crear un SoundPlayer. (El segundo SoundPlayer se crea en el paso siguiente del tutorial.)
Copiar
' This SoundPlayer plays a sound whenever the player hits a wall. Dim startSoundPlayer = New System.Media.SoundPlayer("C:\Windows\Media\chord.wav")
' This SoundPlayer plays a sound when the player finishes the game. Dim finishSoundPlayer = New System.Media.SoundPlayer("C:\Windows\Media\tada.wav")
Public Sub New() ' This call is required by Windows Forms Designer. InitializeComponent() ' Add any initialization after the InitializeComponent() call. MoveToStart() End Sub
2.
Ahora, los dos elementos SoundPlayer se han agregado al formulario. Agregue un mtodo Play() para llamar a SoundPlayer y reproducir el sonido en el momento adecuado. El sonido debe reproducirse cuando el usuario toque un muro. As pues, agregue la instruccin startSoundPlayer.Play(); al mtodo MoveToStart(). Recuerde actualizar el comentario. El mtodo final tendr el siguiente aspecto. C# VB Copiar
''' <summary>
''' Play a sound, then move the mouse pointer to a point 10 pixels down and to ''' the right of the starting point in the upper-left corner of the maze. ''' </summary> ''' <remarks></remarks> Private Sub MoveToStart() startSoundPlayer.Play() Dim startingPoint = Panel1.Location startingPoint.Offset(10, 10) Cursor.Position = PointToScreen(startingPoint) End Sub
3.
Agregue la instruccin finishSoundPlayer.Play(); al controlador de eventos MouseEnter de la etiqueta Meta. Recuerde actualizar el comentario, porque va a cambiar el cdigo, como sigue. C# VB Copiar
Private Sub finishLabel_MouseEnter() Handles finishLabel.MouseEnter ' Play a sound, show a congratulatory MessageBox, then close the form. finishSoundPlayer.Play() MessageBox.Show("Congratulations!") Close() End Sub
Nota
Al realizar las pruebas, hay que asegurarse de que todos los elementos del programa funcionan. Es preciso estar seguro de que el controlador de eventos MouseEnter de la etiqueta Meta reproduce el sonido Tada, abre un cuadro de mensaje de felicitacin y cierra el juego. Para no tener que recorrer todo el laberinto, puede desactivar temporalmente el controlador de eventos MouseEnter del panel. De ese modo, podr sacar el puntero del mouse del laberinto y colocarlo en la etiqueta Meta sin que el programa devuelva el cursor a la salida.
5. 6.
7.
Seleccione el panel y, a continuacin, vaya a la tabla de eventos de la ventana Propiedades. Desplcese hacia abajo hasta el evento MouseEnter y seleccione su nombre. Presione SUPR para eliminar el nombre de controlador de eventos y, a continuacin, presione ENTRAR. El IDE desconecta automticamente el controlador de eventos del panel. Los muros siguen estando conectados, pero ahora puede sacar el mouse del laberinto para llegar a la etiqueta Meta situada en la parte inferior. Guarde y ejecute el programa, y asegrese de que la etiqueta Meta reproduce el sonido, muestra el cuadro de mensaje y cierra el juego. Cuando est seguro de que todo funciona, habilite el controlador de eventos MouseEnter del panel; para ello, seleccinelo, vaya a la tabla de eventos de la ventana Propiedades, desplcese hacia abajo hasta la lnea MouseEnter y seleccione wall_MouseEnter en la lista desplegable.
Generar nmeros aleatorios mediante la clase Random. Desencadenar eventos mediante un control Timer. Controlar el flujo del programa mediante instrucciones if else. Realizar operaciones aritmticas bsicas.
Cuando termine, el programa se parecer al de la ilustracin siguiente. Juego que crear en este tutorial
Nota
En este tutorial, se trata tanto Visual C# como Visual Basic, por lo que deber centrarse en la informacin especfica del lenguaje de programacin que use.
Temas relacionados
Ttulo
Paso 1: Crear un proyecto y agregar etiquetas al formulario
Descripcin
Comience por crear el proyecto, cambiar las propiedades y agregar controles Label. Cree un problema de suma que genera nmeros aleatorios mediante la clase Random. Agregue un temporizador de cuenta atrs para poder limitar el tiempo de la prueba.
Paso 5: Agregar controladores de eventos Agregue controladores de eventos para facilitar el uso del Enter para los controles programa. NumericUpDown Paso 6: Agregar un problema de resta Agregue un problema de resta que genere nmeros aleatorios. Compruebe que las respuestas son correctas y utilice el temporizador. Paso 7: Agregar problemas de multiplicacin y divisin Agregue problemas de multiplicacin y divisin que generan nmeros aleatorios. Compruebe que las respuestas son correctas y utilice el temporizador. Paso 8: Probar otras caractersticas Pruebe con otras caractersticas, como cambiar colores y agregar sugerencias.
5.
a.
b. c. d. e. f. g.
Cambie la propiedad (Name) propiedad a timeLabel. Esta etiqueta aparece como un cuadro en la esquina superior derecha del formulario, que muestra la cuenta atrs en segundos de la prueba. Cambie la propiedad AutoSize a False para poder modificar personalmente las dimensiones del cuadro. Cambie la propiedad BorderStyle a FixedSingle para dibujar una lnea alrededor del cuadro. Establezca la propiedad Size en 200, 30. Arrastre la etiqueta hacia la esquina superior derecha del formulario hasta que aparezcan las lneas azules de separacin. Borre la propiedad Text haciendo clic en Text en la ventana Propiedades y presionando la tecla RETROCESO. Cambie el tamao de fuente a 15,75. Haga clic en el signo ms que aparece junto a la propiedad Font en la ventana Propiedades, que muestra varias propiedades, incluida la propiedad Size, como se muestra en la siguiente imagen. Ventana Propiedades con el tamao de fuente
6.
7.
8.
A continuacin, arrastre otro control Label desde el Cuadro de herramientas y establezca sus propiedades: a. Cambie el tamao de fuente a 15,75. b. Establezca la propiedad Text en Tiempo restante. c. Arrstrelo para alinearlo a la izquierda de la etiqueta timeLabel. Ahora, agregue los controles para el problema de suma. Arrastre un control Label desde el cuadro de herramientas y, a continuacin, establezca sus propiedades: a. Establezca la propiedad Text en ? (signo de interrogacin). b. Establezca la propiedad AutoSize en False. c. Establezca la propiedad Size en 60, 50. d. Cambie el tamao de fuente a 18. e. Cambie la propiedad TextAlign a MiddleCenter. f. Cambie la propiedad Location a 75, 75 para colocarlo en el formulario. g. Cambie la propiedad (Name) propiedad a plusLeftLabel. Seleccione la etiqueta plusLeftLabel y cpiela. (Presione Ctrl+C o bien seleccione Copiar en el men Edicin.) A continuacin, realice las acciones siguientes: a. Pguelo tres veces. (Presione Ctrl+V, o bien seleccione Pegar en el men Edicin.)
9.
Organice las tres nuevas etiquetas para que los cuadros estn en fila a la derecha de la etiqueta plusLeftLabel, utilizando las lneas de separacin para separarlas y alinearlas. c. Cambie la propiedad Text de la segunda etiqueta a + (signo ms). d. Cambie la propiedad (Name) de la tercera etiqueta a plusRightLabel. e. Cambie la propiedad Text de la cuarta etiqueta a = (signo igual). Arrastre un control NumericUpDown desde el Cuadro de herramientas y, a continuacin, haga lo siguiente: a. Cambie el tamao de fuente a 18 y, a continuacin, estrchelo para que el ancho sea 100. b. Arrstrelo hasta que se alinee con los controles Label del problema de suma. c. Cambie la propiedad (Name) a suma. (Aprenderemos ms cosas acerca del control NumericUpDown ms adelante.) Ahora, la prueba tiene una primera fila, como se muestra en la siguiente imagen. Primera fila de la prueba matemtica
b.
10. Seleccione los cinco controles del problema de suma (los cuatro controles Label y el control NumericUpDown) y cpielos. A continuacin, realice las acciones siguientes: a. Pegue los controles, con lo que se deberan agregar cinco nuevos controles al formulario. b. Los controles deberan seguir estando seleccionados, de modo que pueda hacer clic en uno de ellos y arrastrarlos a su lugar para que queden alineados debajo de los controles de suma. Utilice las lneas de separacin para proporcionar una distancia suficiente entre las dos filas. c. Cambie la propiedad Text de la segunda etiqueta a - (signo menos). d. Cambie el nombre de la primera etiqueta del signo de interrogacin a minusLeftLabel. e. Cambie el nombre de la segunda etiqueta de signo de interrogacin a minusRightLabel. f. Cambie el nombre del control NumericUpDown a diferencia. 11. Pegue los cinco controlan dos veces ms y, a continuacin, haga lo siguiente: a. Para la tercera fila, cambie el nombre de la primera etiqueta a timesLeftLabel, cambie la propiedad Text de la segunda etiqueta a (signo de multiplicacin), cambie el nombre de la tercera etiqueta a timesRightLabel y cambie el nombre del control NumericUpDown a producto. b. Para la cuarta fila, cambie el nombre de la primera etiqueta a dividedLeftLabel, cambie la propiedad Text de la segunda etiqueta a (signo de divisin), cambie el nombre de la tercera etiqueta a dividedRightLabel y cambie el nombre del control NumericUpDown a cociente.
Nota
Puede copiar el signo de multiplicacin y el signo de divisin de este tutorial y pegarlos en el IDE.
12. Se necesita un control ms en el formulario: un botn para iniciar la prueba. Arrastre un control Button desde el Cuadro de herramientas y, a continuacin, establezca sus propiedades: a. Establezca la propiedad (Name) en startButton. b. Establezca la propiedad Text en Iniciar la prueba. c. Establezca el tamao de fuente en 14. d. Establezca la propiedad AutoSize en True, para que el tamao del botn se ajuste automticamente al texto. e. Arrastre el botn hasta la parte inferior del formulario y muvalo para que quede centrado. 13. Por ltimo, haga clic en el control startButton y, a continuacin, haga lo siguiente: a. Establezca la propiedad TabIndex en 1. b. Haga clic en el control NumericUpDown de suma. c. Establezca la propiedad TabIndex en 2. d. Establezca los dems controles NumericUpDown: establezca la propiedad TabIndex del control de diferencia en 3, la propiedad TabIndex del control de producto en 4, y la propiedad TabIndex del control de cociente en 5. Ahora, el formulario debera tener un aspecto similar a la siguiente imagen. Formulario de prueba matemtica inicial
Nota
La finalidad de la propiedad TabIndex es establecer el orden de los controles cuando el usuario presiona la tecla TAB. Abra cualquier cuadro de dilogo (por ejemplo, en el men Archivo, seleccione Abrir) y presione la tecla TAB varias veces. Observe cmo se mueve el cursor de un
control a otro cada vez que se presiona la tecla TAB. Al disear este formulario originalmente, un programador decidi el orden.
14. Para ver cmo funciona la propiedad TabIndex, guarde el programa, ejectelo y, a continuacin, presione la tecla TAB varias veces.
' Create a Random object to generate random numbers. Dim randomizer As New Random
Nota
En el tutorial del laberinto, creamos dos componentes SoundPlayer mediante la instruccin new. Esto hace algo similar. La nica diferencia es que, al contrario que SoundPlayer, Random no es un componente ni un control, de modo que no podemos llamarlo as. Se denomina objeto. Probablemente habr odo la palabra objeto antes. Obtendr ms informacin sobre lo que significa en los prximos tutoriales. De momento, todo lo que necesita saber es que cuando el programa utiliza una instruccin new para crear botones, etiquetas, paneles, elementos OpenFileDialog, ColorDialog, SoundPlayer o Random, e incluso formularios, el elemento que se crea se denomina objeto. Los tutoriales posteriores muestran mucha ms informacin sobre cmo funcionan estos objetos.
2.
Ahora, al iniciar el formulario, crea un nuevo objeto Random y le da el nombre randomizer. Como con los elementos SoundPlayer, si entramos en un mtodo y comenzamos a escribir randomizer con un punto (.) a continuacin, se abre una ventana IntelliSense que muestra todos los mtodos del objeto Random a los que se puede llamar. El mtodo Next() se utiliza como se indica a continuacin. Mtodo Next
Cuando se llama a random.Next(50), se obtiene un nmero aleatorio que es menor que 50 (del 0 al 49). 3. Pronto compilaremos un mtodo para comprobar las respuestas, de modo que el programa tiene que recordar qu nmeros ha elegido para los problemas. Agregue un valor de tipo integer (denominado valor de tipo int en C# o Integer en Visual Basic) denominado addend1 y otro denominado addend2 al formulario (igual que agreg el objeto Random denominado randomizer), como sigue. C# VB Copiar
' Create a Random object to generate random numbers. Dim randomizer As New Random
' These Integers will store the numbers ' for the addition problem. Dim addend1 As Integer Dim addend2 As Integer
Nota
Un valor de tipo int (Integer) se utiliza para almacenar un valor numrico positivo o negativo. Puede contener cualquier nmero comprendido entre el -2147483648 y el 2147483647. Slo puede almacenar los nmeros enteros y no los decimales.
4.
Luego, agregue un mtodo denominado StartTheQuiz() que utiliza el mtodo Next() del objeto Random para elegir dos nmeros y colocarlos en las etiquetas. Gradualmente ir rellenando todos los problemas e iniciar el temporizador, as que debe agregar un comentario. Debe tener este aspecto: C# VB Copiar
''' <summary> ''' Start the quiz by filling in all of the problems ''' and starting the timer. ''' </summary> ''' <remarks></remarks> Public Sub StartTheQuiz() ' Fill in the addition problem.
Nota
Recuerde que ha llamado a randomizer.Next(51). El motivo de utilizar 51 y no 50 es que los dos nmeros sumen una respuesta que est comprendida entre el 0 y el 100. Si pasa 50 al mtodo Next(), elegir un nmero del 0 al 49, de modo que mayor respuesta posible sera 98, y no 100. Despus de ejecutarse las dos primeras instrucciones del mtodo, cada uno de los dos valores de tipo int (Integer), addend1 y addend2, contiene un nmero aleatorio del 0 al 50.
Las instrucciones establecen las propiedades Text de las dos etiquetas plus, plusLeftLabel y plusRightLabel, para que muestren los dos nmeros aleatorios. Hay que utilizar el mtodo ToString() del valor int (Integer) para convertirlo en texto (en programacin, string, o cadena, significa texto), porque los controles Label nicamente muestran texto, y no nmeros.
5.
El botn de inicio debe iniciar la prueba. Para ello, vaya al Diseador de Windows Forms y haga doble clic en el botn, a fin de agregar un controlador de eventos Click. A continuacin, agregue las dos instrucciones siguientes. C# VB Copiar
Private Sub startButton_Click() Handles startButton.Click startButton.Enabled = False StartTheQuiz() End Sub
Ya sabe lo que hace la segunda instruccin: llama al nuevo mtodo StartTheQuiz(). La primera instruccin establece la propiedad Enabled del control startButton en False. Con ello se deshabilita el botn, de modo que el usuario no pueda hacer clic en l. De esta forma, el usuario puede hacer clic en el botn de inicio una sola vez. A continuacin, el botn aparece atenuado y no est disponible, y el usuario debe finalizar la prueba antes de que se agote el tiempo (o cerrar el programa). 6. Ahora, guarde y ejecute el programa. Haga clic en el botn de inicio. Debe aparecer un problema de suma aleatoria, como se muestra en la siguiente imagen. Problema de suma aleatoria
' Create a Random object to generate random numbers. Dim randomizer As New Random
' These Integers will store the numbers ' for the addition problem. Dim addend1 As Integer Dim addend2 As Integer
' This Integer will keep track of the time left. Dim timeLeft As Integer
2.
3.
Ahora, hay que agregar algo que cuente el tiempo de verdad, como un temporizador. Vaya al Diseador de Windows Forms y arrastre un control Timer del Cuadro de herramientas (en la categora Componentes) hasta el formulario. Aparecer en el rea gris de la parte inferior del Diseador de Windows Forms. Haga clic en el icono timer1 que acaba de agregar y establezca la propiedad Interval en 1000. Esto hace que el evento Tick se desencadene cada segundo. A continuacin, haga
doble clic en el icono para agregar el controlador de eventos Tick. El IDE cambiar al editor de cdigo y saltar al nuevo mtodo de control de eventos. Agregue las instrucciones siguientes. C# VB Copiar
If (timeLeft > 0) Then ' Display the new time left ' by updating the Time Left label. timeLeft = timeLeft - 1 timeLabel.Text = timeLeft & " seconds" Else ' If the user ran out of time, stop the timer, show ' a MessageBox, and fill in the answers. Timer1.Stop() timeLabel.Text = "Time's up!" MessageBox.Show("You didn't finish in time.", "Sorry") sum.Value = addend1 + addend2 startButton.Enabled = True End If
End Sub
Segn lo que hemos agregado, cada segundo el temporizador comprobar si se ha agotado el tiempo. Para ello, comprueba si el valor de tipo int (Integer) de timeLeft es mayor que 0. Si lo es, queda tiempo. En primer lugar, el temporizador resta 1 a timeLeft y, a continuacin, actualiza la propiedad Text del control timeLabel para mostrar al usuario cuntos segundos quedan.
Si no queda tiempo, el temporizador se detiene y cambia el texto del control timeLabel de modo que muestre que se agot el tiempo. Aparecer un cuadro de mensaje que indicar al usuario que la prueba ha finalizado. Se revela la respuesta. En este caso, se suman addend1 y addend2. La propiedad Enabled del control startButton se establece en true, para que botn vuelva a estar disponible. De ese modo, el usuario puede volver a empezar la prueba. Hemos agregado una instruccin if else, que es la manera de indicar a los programas que tomen decisiones. Una instruccin if else tiene el siguiente aspecto. VB Copiar
If (something your program will check) Then ' statements that will get executed ' if the thing that the program checked is true Else ' statements that will get executed ' if the thing that the program checked is NOT true End If
C# Copiar
if (something your program will check) { // statements that will get executed // if the thing that the program checked is true } else { // statements that will get executed // if the thing that the program checked is NOT true }
Vamos a fijarnos con ms atencin en la instruccin que hemos agregado en el bloque else, para mostrar la respuesta al problema de suma. C#
VB Copiar
Como probablemente sabr, addend1 + addend2 suma los dos valores.La primera parte (sum.Value) utiliza la propiedad Value del control NumericUpDown para mostrar la respuesta correcta.La propiedad Value se utiliza de nuevo ms tarde, para comprobar las respuestas de la prueba. Un control NumericUpDown facilita al usuario la escritura de nmeros. Este es el motivo por el que se utiliza este control para las respuestas a los problemas de matemticas.Dado que todas las respuestas son nmeros del 0 al 100, se dejan las propiedades predeterminadas Minimum y Maximum establecidas en 0 y 100.Esto hace que el control nicamente permita al usuario escribir un nmero del 0 al 100.Como las respuestas solo pueden ser nmeros enteros, la propiedad DecimalPlaces se deja establecida en 0, lo que significa que el usuario no puede escribir decimales.(Si desea permitir que el usuario escriba 3,141 pero no 3,1415, podra establecer la propiedad DecimalPlaces en 3.) 4. Agregue tres lneas al final de mtodo StartTheQuiz(), de modo que el cdigo tenga este aspecto. C# VB Copiar
''' <summary> ''' Start the quiz by filling in all of the problems ''' and starting the timer. ''' </summary> ''' <remarks></remarks> Public Sub StartTheQuiz()
End Sub
Ahora, al empezar la prueba, establece el valor de tipo int (Integer) de timeLeft en 30 y cambia la propiedad Text del control timeLabel a 30 segundos. A continuacin, llama al mtodo Start() del control Timer para iniciar la cuenta atrs. (Todava no comprueba la respuesta, esto viene despus.) 5. Guarde y ejecute el programa. Al hacer clic en el botn de inicio, el temporizador debera iniciar la cuenta atrs. Cuando se agota el tiempo, la prueba finaliza y se muestra la respuesta. En la siguiente imagen se muestra la prueba en marcha. Prueba matemtica en marcha
Nota
Para quienes estn realizando este tutorial en Visual Basic, cabe destacar que, como este mtodo devuelve un valor, en lugar de la palabra clave Sub usual debern utilizar la palabra clave Function. Realmente es as de sencillo: las subrutinas no devuelven valores, las funciones, s.
''' <summary> ''' Check the answer to see if the user got everything right. ''' </summary> ''' <returns>True if the answer's correct, false otherwise.</returns> ''' <remarks></remarks> Public Function CheckTheAnswer() As Boolean
If addend1 + addend2 = sum.Value Then Return True Else Return False End If
End Function
El programa debe llamar a este mtodo para comprobar si el usuario respondi correctamente. Para ello, se agrega if else a la instruccin. La instruccin tiene un aspecto parecido al siguiente. C# VB Copiar
If CheckTheAnswer() Then ' statements that will get executed ' if the answer is correct ElseIf timeLeft > 0 Then ' statements that will get executed ' if there's still time left on the timer Else ' statements that will get executed if the timer ran out End If
2.
Luego, se modifica el controlador de eventos Tick del temporizador para comprobar la respuesta. El nuevo controlador de eventos con comprobacin de respuesta debera incluir lo siguiente. C# VB Copiar
If CheckTheAnswer() Then ' If the user got the answer right, stop the timer ' and show a MessageBox. Timer1.Stop() MessageBox.Show("You got all of the answers right!", "Congratulations!") startButton.Enabled = True ElseIf timeLeft > 0 Then ' Decrease the time left by one second and display ' the new time left by updating the Time Left label. timeLeft = timeLeft - 1 timeLabel.Text = timeLeft & " seconds" Else ' If the user ran out of time, stop the timer, show ' a MessageBox, and fill in the answers. Timer1.Stop() timeLabel.Text = "Time's up!" MessageBox.Show("You didn't finish in time.", "Sorry") sum.Value = addend1 + addend2 startButton.Enabled = True End If
End Sub
Ahora, si el controlador de eventos del temporizador detecta que el usuario respondi correctamente, detiene el temporizador, muestra un mensaje de felicitacin y hace que el botn de inicio vuelva a estar disponible. 3. Guarde y ejecute el programa. Inicie el juego y escriba la respuesta correcta al problema de suma.
Nota
Al escribir la respuesta, puede que observe algo extrao en el control NumericUpDown. Si empieza a escribir sin seleccionar toda la respuesta, el cero no desaparece y hay que eliminarlo manualmente. Corregiremos esto ms adelante en este tutorial.
4.
Al escribir la respuesta correcta, debe abrirse el cuadro de mensaje, detenerse el temporizador y volver a estar disponible el botn de inicio. Haga clic de nuevo en el botn de inicio para asegurarse de que suceda as.
Nota
Aunque puede parecer un comportamiento extrao, hay una explicacin. Al hacer clic en el botn de inicio, la propiedad Enabled del botn est establecida en False; el botn aparece atenuado y no est disponible. El programa busca el control con el siguiente valor de TabIndex ms bajo, el control NumericUpDown de la suma, y cambia el foco a ese control. Cuando se presiona la tecla TAB para ir a un control NumericUpDown, el cursor se sita automticamente al principio del control; este es el motivo por el cual los nmeros que se escriben aparecen a la izquierda y no a la derecha. Cuando se escribe un nmero encima de la propiedad MaximumValue, que est establecida en 100, reemplaza el nmero escrito con el valor mximo.
' Select the whole answer in the NumericUpDown control. Dim answerBox As NumericUpDown = TryCast(sender, NumericUpDown)
End Sub
Aunque inicialmente parezca complejo, resulta ms fcil de entender si se examina paso a paso. En primer lugar, fjese en la parte superior del mtodo: object sender en C# o sender As System.Object en Visual Basic. Esto significa que dentro del mtodo, cada vez que se utiliza sender, hace referencia al control NumericUpDown cuyo evento Enter se desencadena. As que, en la primera lnea del mtodo, se especifica que no se trata de un simple objeto, sino que es concretamente un control NumericUpDown. (Cada control NumericUpDown es un objeto, pero no todos los objetos son un control NumericUpDown.) En la lnea siguiente se comprueba si se ha llevado a cabo correctamente la conversin (de tipos) de answerBox: de un objeto a un control NumericUpDown. Si la conversin de tipos no ha sido correcta, su valor sera null (C#) o Nothing (Visual Basic). En la tercer lnea se busca la longitud de la respuesta que se muestra actualmente en el control NumericUpDown. En la cuarta lnea se ordena al control NumericUpDown que seleccione la respuesta. Ahora, cuando el usuario navega al control, desencadena este evento, lo que provoca que se seleccione la respuesta. En cuanto el usuario empieza a escribir, se borra la respuesta anterior y se reemplaza con la nueva. 2. Una vez que se haya implementado este controlador de eventos, vaya al Diseador de Windows Forms y seleccione el control NumericUpDown de diferencia. Vaya a la pgina Eventos del cuadro de dilogo Propiedades, desplcese hacia abajo hasta el evento Enter y seleccione el controlador de eventos que acaba de agregar. A continuacin, haga lo mismo para los controles NumericUpDown del producto y del cociente. Guarde y ejecute el programa. El comportamiento extrao ya no se debera producir.
3. 4.
Almacenar los valores de resta. Generar nmeros aleatorios para el problema (y asegurarse de que la respuesta est comprendida entre 0 y 100). Actualizar el mtodo que comprueba las respuestas para que compruebe tambin el nuevo problema de resta. Actualizar el controlador eventos Tick del temporizador para que rellene la respuesta correcta cuando se agote el tiempo.
' Create a Random object to generate random numbers. Dim randomizer As New Random
' These Integers will store the numbers ' for the addition problem. Dim addend1 As Integer Dim addend2 As Integer
' These Integers will store the numbers ' for the subtraction problem. Dim minuend As Integer Dim subtrahend As Integer
' This Integer will keep track of the time left. Dim timeLeft As Integer
Nota
Los nombres de los nuevos valores int (minuend y subtrahend, minuendo y sustraendo) no son
trminos de Visual C#, ni siquiera trminos de programacin. Se trata de los nombres utilizados tradicionalmente en aritmtica para el nmero que se resta (el substraendo) y el nmero del que se resta (el minuendo). La diferencia es el minuendo menos el sustraendo. Puede utilizar otros nombres, porque el programa no requiere nombres especficos para los valores de tipo int, los controles, los componentes o los mtodos. Hay algunas reglas (por ejemplo, los nombres no pueden comenzar con dgitos), pero en general, podra utilizar nombres como x1, x2, x3, x4, etc. Sin embargo, sera difcil leer el cdigo y casi imposible realizar el seguimiento de los problemas. Ms adelante en este tutorial utilizaremos los trminos tradicionales para la multiplicacin (multiplicand multiplier = product, multiplicando multiplicador = producto) y la divisin (dividend divisor = quotient, dividendo divisor = cociente).
2.
A continuacin, modifique el mtodo StartTheQuiz() para rellenar un problema de resta aleatorio. El nuevo cdigo aparece tras el comentario "Fill in the subtraction problem". El cdigo debe tener este aspecto. C# VB Copiar
''' <summary> ''' Start the quiz by filling in all of the problems ''' and starting the timer. ''' </summary> ''' <remarks></remarks> Public Sub StartTheQuiz()
' Fill in the addition problem. addend1 = randomizer.Next(51) addend2 = randomizer.Next(51) plusLeftLabel.Text = addend1.ToString plusRightLabel.Text = addend2.ToString sum.Value = 0
' Fill in the subtraction problem. minuend = randomizer.Next(1, 101) subtrahend = randomizer.Next(1, minuend) minusLeftLabel.Text = minuend.ToString minusRightLabel.Text = subtrahend.ToString difference.Value = 0
End Sub
Este cdigo utiliza el mtodo Next() de la clase Random de una forma algo distinta. Al darle dos valores, elige al azar uno que sea mayor o igual que el primero y menor que el segundo. La siguiente lnea elige un nmero aleatorio del 1 al 100 y lo almacena en el minuendo. C# VB Copiar
Se puede llamar al mtodo Next() de la clase Random de varias formas. Cuando se puede llamar a un mtodo de ms de una manera, se denomina mtodo sobrecargado. Puede utilizar IntelliSense para explorar esta posibilidad. Fijmonos de nuevo en la informacin sobre herramientas de la ventana IntelliSense del mtodo Next(). Informacin sobre herramientas de la ventana IntelliSense
Observe que la informacin sobre herramientas muestra (+ 2 sobrecargas). Esto significa que hay dos formas ms de llamar al mtodo Next(). Al escribir el nuevo cdigo para el mtodo StartTheQuiz(), puede ver ms informacin. En cuanto escriba randomizer.Next(, aparecer la ventana IntelliSense. Presione las teclas de direccin ARRIBA y ABAJO para recorrer cclicamente las sobrecargas, como se muestra en la siguiente imagen. Sobrecargas en la ventana IntelliSense
La de la imagen anterior es la que deseamos utilizar, porque permite especificar un valor mnimo y mximo. 3. Modifique el mtodo CheckTheAnswer() para que compruebe si la respuesta de la resta es correcta. El cdigo debe tener este aspecto. C# VB Copiar
''' <summary> ''' Check the answer to see if the user got everything right. ''' </summary> ''' <returns>True if the answer's correct, false otherwise.</returns>
If ((addend1 + addend2 = sum.Value) AndAlso (minuend - subtrahend = difference.Value)) Then Return True Else Return False End If
End Function
&& es el operador logical and de Visual C#. En Visual Basic, el operador equivalente es AndAlso. Equivale a decir, "Si addend1 ms addend2 es igual al valor de la suma NumericUpDown, y si el minuendo menos el sustraendo es igual al valor de la diferencia NumericUpDown". El mtodo CheckTheAnswer() devuelve true nicamente si el problema de suma es correcto y el problema de resta es correcto. 4. Cambie la ltima parte del controlador de evento Tick del temporizador de modo que rellene la respuesta correcta cuando se agote el tiempo. El cdigo debe tener este aspecto. C# VB Copiar
Else ' If the user ran out of time, stop the timer, show ' a MessageBox, and fill in the answers. Timer1.Stop() timeLabel.Text = "Time's up!" MessageBox.Show("You didn't finish in time.", "Sorry") sum.Value = addend1 + addend2 difference.Value = minuend - subtrahend
5.
Guarde y ejecute el cdigo. Ahora, el programa deber incluir un problema de resta, como se muestra en la siguiente imagen. Cuestionario de matemticas con un problema de resta
' Create a Random object to generate random numbers. Dim randomizer As New Random
' These Integers will store the numbers in the addition problem. Dim addend1 As Integer Dim addend2 As Integer
' These Integers will store the numbers for the subtraction problem. Dim minuend As Integer Dim subtrahend As Integer
' These Integers will store the numbers for the multiplication problem. Dim multiplicand As Integer Dim multiplier As Integer
' These Integers will store the numbers for the division problem. Dim dividend As Integer Dim divisor As Integer
' This Integer will keep track of the time left. Dim timeLeft As Integer
2.
Al igual que antes, modifique el mtodo StartTheQuiz() para rellenar problemas de multiplicaciones y divisiones aleatorias. El cdigo debe tener este aspecto. C# VB
Copiar
''' <summary> ''' Start the quiz by filling in all of the problems ''' and starting the timer. ''' </summary> ''' <remarks></remarks> Public Sub StartTheQuiz()
' Fill in the addition problem. addend1 = randomizer.Next(51) addend2 = randomizer.Next(51) plusLeftLabel.Text = addend1.ToString plusRightLabel.Text = addend2.ToString sum.Value = 0
' Fill in the subtraction problem. minuend = randomizer.Next(1, 101) subtrahend = randomizer.Next(1, minuend) minusLeftLabel.Text = minuend.ToString minusRightLabel.Text = subtrahend.ToString difference.Value = 0
' Fill in the multiplication problem. multiplicand = randomizer.Next(2, 11) multiplier = randomizer.Next(2, 11) timesLeftLabel.Text = multiplicand.ToString timesRightLabel.Text = multiplier.ToString product.Value = 0
' Fill in the division problem. divisor = randomizer.Next(2, 11) Dim temporaryQuotient As Integer = randomizer.Next(2, 11) dividend = divisor * temporaryQuotient dividedLeftLabel.Text = dividend.ToString dividedRightLabel.Text = divisor.ToString quotient.Value = 0
End Sub
3.
Modifique el mtodo CheckTheAnswer() para que tambin compruebe los problemas de divisin y multiplicacin. El cdigo debe tener este aspecto. C# VB Copiar
''' <summary> ''' Check the answer to see if the user got everything right. ''' </summary> ''' <returns>True if the answer's correct, false otherwise.</returns> ''' <remarks></remarks> Public Function CheckTheAnswer() As Boolean
If ((addend1 + addend2 = sum.Value) AndAlso (minuend - subtrahend = difference.Value) AndAlso (multiplicand * multiplier = product.Value) AndAlso (dividend / divisor = quotient.Value)) Then Return True Else Return False End If
End Function
Nota
Dado que no hay ninguna manera simple de escribir el signo de multiplicacin () y el signo de divisin () mediante el teclado, Visual C# y Visual Basic utilizan el asterisco (*) para la multiplicacin y la barra diagonal (/) para la divisin.
4.
Cambie la ltima parte del controlador de evento Tick del temporizador de modo que rellene la respuesta correcta cuando se agote el tiempo. El cdigo debe tener este aspecto. C# VB Copiar
Else ' If the user ran out of time, stop the timer, show ' a MessageBox, and fill in the answers. Timer1.Stop() timeLabel.Text = "Time's up!" MessageBox.Show("You didn't finish in time.", "Sorry") sum.Value = addend1 + addend2 difference.Value = minuend - subtrahend
5.
Guarde y ejecute el programa. Ahora, hay que responder a cuatro problemas para completar la prueba, como se muestra en la siguiente imagen. Prueba matemtica con cuatro problemas
Cambie el color del control timeLabel a rojo cuando al usuario no le queden ms que cinco segundos, estableciendo su control BackColor (timeLabel.BackColor = Color.Red;). Restablezca el color cuando la prueba haya terminado. Proporcione al usuario una sugerencia reproduciendo un sonido cuando especifique una respuesta correcta en uno de los controles NumericUpDown. (Tendr que escribir un controlador de eventos para el evento ValueChanged de cada control, que se desencadena cada vez que el usuario cambia el valor del control.)
Usar un objeto List para contener objetos. Usar un bucle foreach en Visual C# o un bucle For Each en Visual Basic. Realizar el seguimiento del estado de un formulario mediante variables de referencia. Compilar un controlador de eventos que se pueda usar con varios objetos. Hacer que un temporizador se active una vez despus de iniciarse.
Cuando termine, el programa se parecer al de la ilustracin siguiente. Juego que crear en este tutorial
Nota
En este tutorial, se trata tanto Visual C# como Visual Basic, por lo que deber centrarse en la informacin especfica del lenguaje de programacin que use.
Temas relacionados
Ttulo
Paso 1: Crear un proyecto y agregar una tabla a un formulario Paso 2: Agregar un objeto aleatorio y una lista de iconos Agregar un objeto Random y un objeto List, para crear una lista de iconos. Asignar los iconos aleatoriamente a los controles Label.
Descripcin
El primer paso es crear el proyecto y agregar un control TableLayoutPanel.
Agregar un controlador de eventos Click que cambiar el color de la controlador de eventos Click a etiqueta en la que se haga clic. cada etiqueta Paso 4: Agregar un Paso 5: Agregar referencias a etiquetas Agregar variables de referencia para realizar el seguimiento de las etiquetas en las que se hace clic. Agregar un temporizador al formulario.
Mantendr los pares de iconos visibles si se selecciona una pareja coincidente. Agregar un mtodo CheckForWinner() para comprobar si el jugador gan.
Paso 8: Agregar un mtodo para comprobar si el jugador gan Paso 9: Probar otras caractersticas
Probar otras caractersticas, como cambiar los iconos y colores, agregar una cuadrcula y agregar sonidos. Intentar aumentar el tamao del tablero y ajustar el temporizador.
5.
a. b.
c. d. e.
Establezca la propiedad BackColor en CornflowerBlue. (Seleccione la pestaa Web en el selector de colores para ver los nombres de los colores). Establezca la propiedad Dock en Fill; para ello, haga clic en el botn de lista desplegable situado al lado de la propiedad y haga clic en el botn grande del medio. Haga clic en el botn del tringulo situado en la esquina superior derecha de TableLayoutPanel para mostrar el men de tareas. Haga clic dos veces Agregar fila para agregar dos filas ms y, a continuacin, haga clic dos veces en Agregar columna para agregar dos columnas ms. Haga clic en Editar filas y columnas para abrir la ventana Estilos de columna y fila. Seleccione cada una de las columnas, haga clic en el botn Porcentaje y establezca el ancho de cada columna en el 25 por ciento del ancho total. A continuacin, seleccione Filas en la lista desplegable de la parte superior de la ventana y establezca el alto de cada fila en el 25 por ciento. Haga clic en el botn Aceptar.
Ahora, su control TableLayoutPanel debera tener diecisis celdas cuadradas del mismo tamao. 6. Asegrese de que el control TableLayoutPanel est seleccionado en el editor de formularios. Con l seleccionado, abra el cuadro de herramientas y haga doble clic en Etiqueta para agregar un control Label al cuadrado superior izquierdo. Ahora, el control Label debera estar seleccionado en el IDE. Establezca sus propiedades: a. Establezca la propiedad BackColor en CornflowerBlue. b. Establezca la propiedad AutoSize en False. c. Establezca la propiedad Dock en Fill. d. Establezca la propiedad TextAlign en MiddleCenter haciendo clic en el botn de lista desplegable que se encuentra al lado de la propiedad y haciendo clic, a continuacin, en el botn central. e. Haga clic en la propiedad Font. Debera aparecer un botn de puntos suspensivos. f. Haga clic en el botn de puntos suspensivos y establezca la fuente en Webdings 72 point Bold. g. Establezca la propiedad Text en la letra c. La celda superior izquierda de TableLayoutPanel debera contener un cuadro negro grande centrado sobre un fondo azul.
Nota
La fuente Webdings es una fuente de iconos que se distribuye con el sistema operativo Microsoft Windows. En el juego de formar parejas, el jugador necesita encontrar la correspondencia entre pares de iconos, de modo que se usa esta fuente para mostrar los iconos que deben coincidir. En lugar de colocar c en la propiedad Text, pruebe a escribir letras diferentes para ver qu iconos se muestran. Un signo de exclamacin es una araa, una N mayscula es un ojo y una coma es una guindilla.
7.
Seleccione el control Label y cpielo. (Presione Ctrl+C o, en el men Edicin, haga clic en Copiar). A continuacin, pguelo. (Presione Ctrl+V o, en el men Edicin, haga clic en Pegar). Aparecer otra etiqueta en la segunda celda de TableLayoutPanel. Vuelva a pegar el
control; aparecer otra etiqueta en la tercera celda. Siga pegando los controles Label hasta que se llenen todas las celdas.
Nota
Si pega demasiadas veces, el IDE agrega una nueva fila a TableLayoutPanel para que haya espacio para agregar el nuevo control Label. La accin se puede deshacer. Para quitar la nueva celda, presione Ctrl+Z o, en el men Edicin, haga clic en Deshacer.
8. Ya tiene diseado el formulario. Debera tener este aspecto: 9. Formulario inicial del juego de formar parejas 10.
' Use this Random object to choose random icons for the squares Dim random As New Random
' Each of these letters is an interesting icon ' in the Webdings font, ' and each icon appears twice in this list Dim temporaryArray() As String = {"!", "!", "N", "N", ",", ",", "k", "k", _ "b", "b", "v", "v", "w", "w", "z", "z"} Dim icons As List(Of String) = temporaryArray.ToList()
2.
3.
Pase al editor de cdigo haciendo clic con el botn secundario en Form1.cs en el Explorador de soluciones y haciendo clic a continuacin en Ver cdigo en el men. Comience por escribir el cdigo mostrado en el paso anterior. Al escribir cdigo de Visual C#, asegrese de que coloca el cdigo despus de la llave de apertura y justo despus de la declaracin de clase (public partial class Form1 : Form). Al escribir cdigo de Visual Basic, coloque el cdigo justo despus de la declaracin de clase (Public Class Form1). Al agregar el objeto List, observe atentamente la ventana IntelliSense que se abre. El siguiente es un ejemplo de Visual C#. Aparecer texto similar si agrega una lista en Visual Basic. Ventana IntelliSense
Nota
Es ms sencillo comprender el cdigo si se examina en secciones pequeas. Sus programas pueden utilizar objetos List para hacer el seguimiento de muchos elementos. Una lista puede contener nmeros, valores true/false, texto u otros objetos. Se puede tener un objeto List que contiene otros objetos List. Los elementos en una lista se llaman elementos y cada lista solo contiene elementos de un tipo. As que una lista de nmeros solo puede contener nmeros; no se puede agregar texto. Tampoco se pueden agregar nmeros a una lista de valores true/false
Nota
Cuando crea un objeto List mediante una instruccin new, necesita indicar lo que desea que contenga. Por eso la informacin sobre herramientas de la parte superior de la ventana IntelliSense muestra el tipo de elementos de la lista. Adems, eso es lo que significa List<string> (en Visual C#) y List(Of String) (en Visual Basic): es un objeto List que contiene cadenas. Una cadena es lo que su programa utiliza para almacenar texto, que es lo que la informacin sobre herramientas de la parte derecha de la ventana IntelliSense le indica.
4.
En Visual Basic se debe crear primero una matriz temporal, pero en Visual C#, la lista se puede crear con una instruccin. Esto es porque Visual C# tiene inicializadores de coleccin. En Visual Basic 2010, puede utilizar un inicializador de coleccin. Sin embargo, por compatibilidad con la versin anterior de Visual Basic, recomendamos utilizar el cdigo anterior.
Nota
Al utilizar un inicializador de coleccin con una instruccin new, una vez creado el nuevo objeto List, el programa lo rellena con lo que haya entre las llaves. En este caso, se obtiene una lista de cadenas denominadas iconos; la lista se inicializar para que contenga diecisis cadenas. Cada una de esas cadenas es una letra nica y todas corresponden a los iconos que se mostrarn en las etiquetas. As que el juego tendr un par de signos de exclamacin, un par de letras N en mayscula, un par de comas, etc. El objeto List tendr diecisis cadenas en total, una por cada celda de la TableLayoutPanel.
Nota
En Visual Basic, se obtiene el mismo resultado, pero las cadenas se colocan primero en una matriz temporal, que se convierte despus en un objeto List. Una matriz es similar a una lista, salvo que las matrices se crean con un tamao fijo. Las listas pueden reducir y crecer segn sea necesario, algo
''' <summary> ''' Assign each icon from the list of icons to a random square ''' </summary> ''' <remarks></remarks> Private Sub AssignIconsToSquares()
' The TableLayoutPanel has 16 labels, ' and the icon list has 16 icons, ' so an icon is pulled at random from the list ' and added to each label For Each control In TableLayoutPanel1.Controls Dim iconLabel As Label = TryCast(control, Label) If iconLabel IsNot Nothing Then Dim randomNumber As Integer = random.Next(icons.Count) iconLabel.Text = icons.ElementAt(randomNumber)
End Sub
2.
Agregue el mtodo AssignIconsToSquares() tal como se indica en el paso anterior. Basta con que lo coloque debajo del cdigo que agreg en Paso 2: Agregar un objeto aleatorio y una lista de iconos. Hay una novedad en el mtodo AssignIconsToSquares(): un bucle foreach en Visual C# y For Each en Visual Basic. Un bucle foreach se usa siempre que se desea realizar la misma accin una y otra vez. En este caso, desea ejecutar las mismas instrucciones para cada etiqueta de TableLayoutPanel, tal y como se observa en el siguiente cdigo. C# VB Copiar
For Each control In TableLayoutPanel1.Controls ' The statements you want to execute ' for each label go here ' The statements use iconLabel to access ' each label's properties and methods Next
Nota
Se usan los nombres iconLabel y control porque son descriptivos. Sin embargo, podra reemplazarlos con cualquier nombre sin que ello repercutiese en el funcionamiento (siempre y cuando se cambiase
El mtodo AssignIconsToSquares() recorre cada control Label de TableLayoutPanel y ejecuta las mismas instrucciones para cada uno de ellos. Esas instrucciones extraen un icono aleatorio de la lista que se agreg en Paso 2: Agregar un objeto aleatorio y una lista de iconos. (Por eso incluy dos iconos de cada en la lista, para que hubiera un par de iconos asignado a los controles Label aleatorios.) 3. Necesita llamar al mtodo AssignIconsToSquares() en cuanto se inicie el programa. Si escribe cdigo de Visual C#, agregue una instruccin bajo la llamada al mtodo InitializeComponent() en el constructor Form1, de modo que el formulario llame a su nuevo mtodo para prepararse antes de mostrarse. C# Copiar
AssignIconsToSquares(); }
Para Visual Basic, primero agregue el constructor y, a continuacin, agregue al constructor la llamada al mtodo. Antes del mtodo AssignIconsToSquares() que acaba de crear, empiece escribiendo el cdigo Public Sub New(). Al presionar la tecla ENTRAR para pasar a la lnea siguiente, IntelliSense debera hacer que apareciese el siguiente cdigo para completar el constructor. VB Copiar
Public Sub New() ' This call is required by Windows Form Designer InitializeComponent() ' Add any initialization after the InitializeComponent() call
End Sub
Agregue la llamada al mtodo AssignIconsToSquares() de modo que el constructor sea similar al siguiente. VB Copiar
Public Sub New() ' This call is required by Windows Form Designer InitializeComponent() ' Add any initialization after the InitializeComponent() call AssignIconsToSquares() End Sub
4. 5.
Guarde el programa y ejectelo. Ahora, debera mostrar un formulario con iconos aleatorios asignados a cada etiqueta. Cierre el programa y, a continuacin, ejectelo de nuevo. Ahora hay iconos diferentes asignados a cada etiqueta, como se muestra en la siguiente ilustracin. Juego de formar parejas con iconos aleatorios
6.
Ahora detenga el programa y quite los comentarios de la lnea de cdigo dentro del bucle foreach. C#
VB Copiar
iconLabel.ForeColor = iconLabel.BackColor
7.
Haga clic en el botn Guardar todo de la barra de herramientas para guardar el programa y, a continuacin, ejectelo. Parece que los iconos han desaparecido (nicamente se muestra un fondo azul). Sin embargo, los iconos se asignan aleatoriamente y siguen ah. Debido a que los iconos tienen el mismo color que el fondo, no se ven.
Para conseguir que un programa funcione as, agregue un controlador de eventos Click que cambie el color de la etiqueta en la que se hace clic.
2.
3. 4.
Presione ENTRAR. El IDE agrega al cdigo un controlador de eventos Click denominado label_Click() y lo enlaza a cada una de las etiquetas. Rellene el resto del cdigo como se indica a continuacin: C# VB Copiar
''' <summary> ''' Every label's Click event is handled by this event handler ''' </summary> ''' <param name="sender">The label that was clicked</param> ''' <param name="e"></param> ''' <remarks></remarks> Private Sub label_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Label9.Click, Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click, Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click
' If the clicked label is black, the player clicked ' an icon that's already been revealed -' ignore the click If (clickedLabel.ForeColor = Color.Black) Then Return End If
Nota
Es posible que reconozca, del tutorial para crear una prueba matemtica, el elemento object sender que se muestra en la parte superior del controlador de eventos. Enlaz distintos eventos Clic del control Label a un nico mtodo de controlador de eventos, de modo que se llama al mismo mtodo con independencia de la etiqueta en la que haga clic el usuario. Dado que el mtodo necesita saber en qu etiqueta se hizo clic, usa el nombre sender para ese control Label. La primera lnea del mtodo indica al programa que no es solo un objeto, sino que es, en concreto, un control Label y que, a travs del nombre clickedLabel, se tiene acceso a sus propiedades y mtodos.
Este mtodo comprueba primero si clickedLabel se convirti (mediante conversin de tipos) correctamente de un objeto en un control Label. Si no, tiene un valor Null (C#) o Nothing (Visual Basic), y no se desea ejecutar el resto del cdigo en el mtodo. Luego, el mtodo comprueba el color del texto de la etiqueta en la que se hizo clic mediante la propiedad ForeColor. Si ya es negro, se ha hecho clic en el icono, de modo que el mtodo ha terminado. (Esto es lo que hace la instruccin return: indica al programa que deje de ejecutar el mtodo). Si no se ha hecho clic en el icono, cambia el color del texto a negro. 5. Guarde y ejecute el programa. Debera ver un formulario vaco con un fondo azul. Haga clic en el formulario; uno de los iconos debera volverse visible. Siga haciendo clic en distintos lugares del formulario. A medida que hace clic en los iconos, deberan aparecer.
' firstClicked points to the first Label control ' that the player clicks, but it will be Nothing ' if the player hasn't clicked a label yet Dim firstClicked As Label = Nothing
' secondClicked points to the second Label control ' that the player clicks Dim secondClicked As Label = Nothing
Nota
Las variables de referencia parecen similares a las instrucciones usadas para agregar objetos (por ejemplo, objetos Timer, objetos List y objetos Random) a un formulario. Sin embargo, estas instrucciones no hacen aparecer dos controles Label adicionales en el formulario porque ninguna de
las dos instrucciones incluye new. Sin new, no se crea ningn objeto. Por ello, firstClicked y secondClicked se denominan variables de referencia: simplemente realizan un seguimiento o hacen referencia a objetos Label.
Nota
Cuando una variable no realiza el seguimiento de ningn objeto, se establece en un valor especial: null en Visual C# y Nothing en Visual Basic. Por lo tanto, cuando se inicia el programa, el valor de firstClicked y el valor de secondClicked estn establecidos en null o Nothing, lo que significa que las variables no realizan ningn tipo de seguimiento.
2.
Modifique el controlador de eventos Click para usar la nueva variable de referencia firstClicked. Quite la ltima instruccin del mtodo de control de eventos label_Click() (clickedLabel.ForeColor = Color.Black;) y reemplcela por la instruccin if que figura a continuacin. (Asegrese de incluir el comentario as como todo lo que aparezca entre llaves.) C# VB Copiar
''' <summary> ''' Every label's Click event is handled by this event handler ''' </summary> ''' <param name="sender">The label that was clicked</param> ''' <param name="e"></param> ''' <remarks></remarks> Private Sub label_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Label9.Click, Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click, Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click
' If the clicked label is black, the player clicked ' an icon that's already been revealed -' ignore the click If (clickedLabel.ForeColor = Color.Black) Then Return End If
' If firstClicked is Nothing, this is the first icon ' in the pair that the player clicked, ' so set firstClicked to the label that the player ' clicked, change its color to black, and return If (firstClicked Is Nothing) Then firstClicked = clickedLabel firstClicked.ForeColor = Color.Black Return End If End If
End Sub
3. 4.
Guarde y ejecute el programa. Haga clic en uno de los controles Label y aparecer el correspondiente icono. Haga clic en el siguiente control Label y ver que no sucede nada. El programa ya est realizando un seguimiento de la primera etiqueta en la que se hizo clic, por lo que el valor de firstClicked no es null en Visual C# ni Nothing en Visual Basic. Cuando la instruccin if comprueba firstClicked para determinar si su valor es null o Nothing, concluye que no tiene ese valor y no ejecuta las instrucciones de la instruccin if. Por lo tanto, solo el primer icono en el que se hizo clic se vuelve negro y los dems iconos se vuelven invisibles, tal y como se muestra en la siguiente imagen. Juego de formar parejas con un icono visible
2.
Haga clic en el icono timer1 para seleccionar el temporizador. Establezca la propiedad Interval en 750, pero deje la propiedad Enabled establecida en False. La propiedad Interval indica al temporizador cunto tiempo debe esperar entre los pasos, de modo que aqu se indica al temporizador que espere tres cuartos de segundo (750 milisegundos) antes de desencadenar su primer evento Tick. No desear que el temporizador se inicie cuando se inicie el programa. En su lugar, utilizar el mtodo Start() para iniciar el temporizador cuando el jugador haga clic en la segunda etiqueta.
3.
Haga doble clic en el icono del control Timer en el Diseador de Windows Forms para agregar el controlador de eventos Tick, como se muestra en el siguiente cdigo. C# VB Copiar
''' <summary> ''' This timer is started when the player clicks ''' two icons that don't match, ''' so it counts three quarters of a second ''' and then turns itself off and hides both icons ''' </summary> ''' <remarks></remarks> Private Sub Timer1_Tick() Handles Timer1.Tick
' Reset firstClicked and secondClicked ' so the next time a label is ' clicked, the program knows it's the first click firstClicked = Nothing secondClicked = Nothing
End Sub
El controlador de eventos Tick realiza tres acciones: primero, detiene el temporizador mediante una llamada al mtodo Stop(). A continuacin, usa las dos variables de referencia, firstClicked y secondClicked, para recuperar las dos etiquetas en las que el jugador hizo clic y volver a ocultar sus iconos. Finalmente, restablece las variables de referencia firstClicked y secondClicked en null en Visual C# y Nothing en Visual Basic. Esto es importante, porque as es como se restablece el propio programa. Ahora no realiza el seguimiento de ningn control Label y vuelve a estar listo para el primer clic del jugador.
Nota
Un objeto Timer tiene un mtodo Start() que inicia el temporizador y un mtodo Stop() que lo detiene. Al establecer la propiedad Enabled del temporizador en True en la ventana Propiedades, inicia los pasos nada ms comenzar el programa. Sin embargo, si se deja establecido en False, no inicia los pasos hasta que se llama a su mtodo Start().
Nota
Normalmente, un temporizador desencadena una y otra vez su evento Tick, utilizando la propiedad Interval para determinar cuntos milisegundos debe esperar entre los pasos. Es posible que haya observado cmo se llama al mtodo Stop() del temporizador dentro del evento Tick. Esto hace que el temporizador entre en modo de un disparo, de tal forma que, cuando se llama al mtodo Start(), espera durante el intervalo correspondiente y desencadena un nico evento Tick.
4.
Para ver el nuevo temporizador en accin, vaya al editor de cdigo y agregue el siguiente cdigo al principio y al final del mtodo de control de eventos label_Click(). (Se agrega una instruccin if al principio y tres instrucciones al final; el resto del mtodo no cambia). C# VB Copiar
''' <summary> ''' Every label's Click event is handled by this event handler ''' </summary> ''' <param name="sender">The label that was clicked</param> ''' <param name="e"></param> ''' <remarks></remarks>
Private Sub label_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Label9.Click, Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click, Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click
' The timer is only on after two non-matching ' icons have been shown to the player, ' so ignore any clicks if the timer is running If (Timer1.Enabled = True) Then Return End If
If clickedLabel IsNot Nothing Then ' If the clicked label is black, the player clicked ' an icon that's already been revealed -' ignore the click If (clickedLabel.ForeColor = Color.Black) Then Return End If
' If firstClicked is Nothing, this is the first icon ' in the pair that the player clicked, ' so set firstClicked to the label that the player ' clicked, change its color to black, and return If (firstClicked Is Nothing) Then firstClicked = clickedLabel firstClicked.ForeColor = Color.Black Return End If
' If the player gets this far, the timer isn't ' running and firstClicked isn't Nothing, ' so this must be the second icon the player clicked ' Set its color to black secondClicked = clickedLabel secondClicked.ForeColor = Color.Black
' If the player gets this far, the player ' clicked two different icons, so start the ' timer (which will wait three quarters of ' a second, and then hide the icons) Timer1.Start() End If
End Sub
El cdigo que se encuentra al principio del mtodo comprueba si el temporizador se inici en la propiedad Enabled. As, si el jugador hace clic en el primer y segundo control Label y se inicia el temporizador, no suceder nada al hacer clic en un tercer control. El cdigo al final del mtodo establece la variable de referencia secondClicked para que realice el seguimiento del segundo control Label en el que hizo clic el jugador, y establece el color del icono de esa etiqueta en negro para que est visible. A continuacin, inicia el temporizador en modo de un disparo de forma que espere durante 750 milisegundos antes de desencadenar el evento Tick. Es entonces cuando el controlador de eventos Tick del temporizador oculta los dos iconos y restablece las variables de referencia firstClicked y secondClicked de modo que el formulario est listo para que el jugador haga clic en otro icono. 5. 6. Guarde y ejecute el programa. Haga clic en un icono para que se vuelva visible. Haga clic en otro icono. Aparece brevemente y, a continuacin, ambos iconos desaparecen. Repita el proceso varias veces. Ahora, el formulario realiza el seguimiento del primer y segundo icono en los que hizo clic, y usa el temporizador para realizar una pausa antes de hacer que los iconos desaparezcan.
' If the player gets this far, the timer isn't ' running and firstClicked isn't Nothing, ' so this must be the second icon the player clicked ' Set its color to black secondClicked = clickedLabel secondClicked.ForeColor = Color.Black
' If the player clicked two matching icons, keep them ' black and reset firstClicked and secondClicked ' so the player can click another icon If (firstClicked.Text = secondClicked.Text) Then firstClicked = Nothing secondClicked = Nothing Return End If
' If the player gets this far, the player ' clicked two different icons, so start the ' timer (which will wait three quarters of ' a second, and then hide the icons) Timer1.Start() End If End Sub
La primera lnea de la instruccin if que acaba de agregar comprueba si el icono de la primera etiqueta en la que el jugador hizo clic es igual que el icono de la segunda etiqueta. Si los iconos son iguales, el programa ejecuta las tres instrucciones entre llaves en C# o las tres instrucciones incluidas en la instruccin if en Visual Basic. Las dos primeras instrucciones restablecen las variables de referencia firstClicked y secondClicked para que no realicen el seguimiento de ninguna de las etiquetas. (Quizs reconozca esas dos instrucciones por el controlador de eventos Tick del temporizador). La tercera es una instruccin return, que indica al programa que omita el resto de las instrucciones del mtodo sin ejecutarlas. Si programa en Visual C#, quizs haya observado que en una parte del cdigo se usa un solo signo de igualdad (=), mientras que otras instrucciones usan dos (==). Piense por qu se usa = en algunos lugares y == en otros. Aqu tiene un buen ejemplo donde se ve la diferencia. Observe minuciosamente el cdigo que se encuentra entre parntesis en la instruccin if. VB Copiar
firstClicked.Text = secondClicked.Text
C# Copiar
firstClicked.Text == secondClicked.Text
A continuacin, examine con detalle la primera instruccin del bloque de cdigo situado despus de la instruccin if. VB Copiar
firstClicked = Nothing
C# Copiar
firstClicked = null;
La primera de esas dos instrucciones comprueba si dos iconos son iguales.Dado que se comparan dos valores, el programa de Visual C# usa el operador de igualdad ==.La segunda instruccin en realidad cambia el valor (lo que se conoce como asignacin), estableciendo la variable de referencia firstClicked en null para restablecerlo.Por eso se usa en este caso el operador de asignacin =.Visual C# usa = para establecer los valores y == para compararlos.En Visual Basic se usa = tanto para la asignacin como para la comparacin. 2. Guarde y ejecute el programa, y empiece a hacer clic en el formulario. Si hace clic en una pareja que no coincide, se desencadena el evento Tick del temporizador, y ambos iconos desaparecen. Si hace clic en una pareja coincidente, se ejecuta la nueva instruccin if y la instruccin return hace que el mtodo omita el cdigo que inicia el temporizador, de modo que los iconos se mantengan visibles, como se muestra en la siguiente ilustracin. Juego de formar parejas con pares de iconos visibles
''' <summary> ''' Check every icon to see if it is matched, by ''' comparing its foreground color to its background color. ''' If all of the icons are matched, the player wins ''' </summary> Private Sub CheckForWinner()
' Go through all of the labels in the TableLayoutPanel, ' checking each one to see if its icon is matched For Each control In TableLayoutPanel1.Controls Dim iconLabel As Label = TryCast(control, Label) If iconLabel IsNot Nothing Then If (iconLabel.ForeColor = iconLabel.BackColor) Then Return End If End If Next
' If the loop didnt return, it didn't find ' any unmatched icons ' That means the user won. Show a message and close the form MessageBox.Show("You matched all the icons!", "Congratulations")
Close()
End Sub
El mtodo utiliza otro bucle foreach en Visual C# o For Each en Visual Basic para recorrer cada etiqueta de TableLayoutPanel. Usa el operador de igualdad (== en Visual C# y = en Visual Basic) para comprobar el color del icono de cada etiqueta y si coincide con el fondo. Si los colores coinciden, el icono sigue siendo invisible y el jugador no ha hallado las parejas de los iconos restantes. En ese caso, el programa utiliza una instruccin return para omitir el resto del mtodo. Si el bucle pasa por todas las etiquetas sin ejecutar la instruccin return, indica que se han logrado hallar todas las parejas de iconos. El programa muestra un elemento MessageBox y, a continuacin, llama al mtodo Close() del formulario para finalizar el juego. 2. A continuacin, haga que el controlador del evento Click de la etiqueta llame al nuevo mtodo CheckForWinner(). Asegrese de que el programa comprueba si existe un ganador despus de mostrar el segundo icono en el que el jugador hace clic. Busque la lnea donde estableci el color del segundo icono en el que se ha hecho clic y llame al mtodo CheckForWinner() inmediatamente despus, tal como se muestra en el siguiente cdigo. C# VB Copiar
' If the player gets this far, the timer isn't ' running and firstClicked isn't Nothing, ' so this must be the second icon the player clicked ' Set its color to black secondClicked = clickedLabel secondClicked.ForeColor = Color.Black
' black and reset firstClicked and secondClicked ' so the player can click another icon If (firstClicked.Text = secondClicked.Text) Then firstClicked = Nothing secondClicked = Nothing Return End If
3.
Guarde y ejecute el programa. Reproduzca el juego y halle las coincidencias de todos los iconos. Al ganar, el programa muestra un elemento MessageBox (tal como se muestra en la siguiente imagen) y, a continuacin, cierra el cuadro. Juego de formar parejas con MessageBox
Agregue un sonido para cuando el jugador encuentre una coincidencia, otro sonido para cuando destape dos iconos que no coincidan y un tercer sonido para cuando el programa vuelva a ocultar los iconos. Aumente el tamao del tablero para complicar ms el juego. (Sugerencia: no basta con solo agregar filas y columnas a TableLayoutPanel). Para que el juego sea ms desafiante, oculte el primer icono si el jugador es demasiado lento y no hace clic en el segundo icono a tiempo.