7 – Introducción a los Windows Forms (Continuación)

1. Resolución del ejercicio del capítulo anterior

Hola, bienvenido de nuevo a Programar mola con Visual Studio donde puedes seguir éste curso de programación en C# con Visual Studio y .NET Framework 4.5.

Antes de empezar con nuevo temario vamos a resolver el ejercicio que planteamos en el capítulo anterior, que consistía en implementar (o programar) el comportamiento de la calculadora de Windows según el siguiente esquema:

actual = 0
resultado = 0

pulso el número 1

actual = 1
resultado = 0

pulso el símbolo +

actual = 0
resultado = 1

pulso el número 3

actual = 3
resultado = 1

pulso el símbolo +

actual = 0
resultado = (3 + 1) = 4

pulso el número 7

actual = 7
resultado = 4

pulso el símbolo –

actual = 0
resultado = (7 + 4) = 11

pulso el número 2

actual = 2
resultado = 11

pulso el símbolo +

actual = 0
resultado = (11 – 2) = 9

Solución:

Para empezar veo bastante claro (espero que tu también lo hayas visto) que hacen falta dos variables, una para el valor actual y otra para el resultado. Tal y como sugerí en el enunciado voy a hacer uso de la clase Calculadora que creamos en capítulos anteriores.

Si recuerdas bien, a dicha clase le podíamos pedir operaciones y que nos dijera el resultado por lo que la podemos usar para almacenar nuestro resultado.

Voy a aprovechar todo el código del capítulo anterior pues estamos ante la continuación del mismo. La cosa empezaría así:

7.res.1

Vale, no era mi intención que se me complicara la cosa nada más empezar pero ya nos viene bien para hablar de los “namespaces”.

1.1. Namespaces

Empecemos primero con un ejemplo sencillo:

Tú has programado tu calculadora (la del capítulo 5) en un proyecto que se llama “C5” y nuestra amiga Carola lo ha hecho en un proyecto que se llama “Cap5”. Tu clase se habría creado en un namespace llamado “C5” de esta forma:

7.res.3

Y la de nuestra amiga Carola sería de la siguiente forma:

7.res.4

Las dos están bien construidas (falta código, solo he puesto el inicio) pero en namespaces diferentes., esto es así porque cuando creas un proyecto Visual Studio te mete las clases en un namespace que se llama igual que el proyecto.

El namespace es como si fuera una caja con un nombre, si sabes el nombre de la caja puedes ir a buscar lo que sea que haya dentro. Si dos cajas se llaman igual… pues tenemos un problema.

Si te fijas, en éste ejemplo tanto tú como Carola tenéis una clase que se llama igual (Calculadora) pero en namespaces diferentes, así que podrías usar las dos clases en el mismo proyecto sin problemas así:

7.res.5

¿Lo ves? Con decirle a C# en que namespace debe buscar la clase la cosa funciona y eso es lo mismo que he hecho yo, solo que mi namespace se llama “Capitulo_5”.

Además si te fijas mi proyecto también se llama “Calculadora” (línea 11 de la imagen superior) por lo que estoy obligado a decirle que quiero usar la calculadora de “Capitulo_5” si quiero hacer las cosas bien.

Espero que se haya entendido, si no siempre tienes los comentarios 😉

1.2. Programando la solución

Recuerda que ya teníamos programados los métodos de los botones numéricos, al pulsarlos se ponía el valor del número en “_current” y se mostraba el número en el display de nuestra calculadora.

Si te fijas, según el enunciado, cuando se pulsa un número se guarda en “_current” y eso ya lo tenemos hecho. Nos falta hacer la parte de pulsar un botón de opración por lo que tenemos que programar los botones de “suma”, “resta”, “multiplicación” y “división”.

Según el enunciado, al pulsar uno de estos botones se realiza la operación entre “_current” y lo que haya en el total para, después, dejar “_current” a cero. Vamos a ello:

7.res.6

Si miras el primer método (corresponde a la suma) verás que lo único que hace es decirle a la calculadora que sume el número que hay en “_current” y acto seguido invoca al método ActualizarTotal. Esto método (el último de la imagen) resetea “_current” a cero y muestra el total de la calculadora en el display.

El método ActualizarTotal nos lo podemos ahorrar pero tendríamos dos líneas repetidas en los 4 métodos de las operaciones lo cual no es aconsejable. Te recomiendo que todo el código repetido lo metas en un método porque te será más fácil hacer cambios después (imagina que no queremos resetear “_current”, tendrías que hacer 4 cambios en lugar de uno).

Y con esto tan tonto ya hemos hecho lo que se nos pedía.

2. Contenido del capítulo

Bueno, lo cierto es que éste capítulo es una ampliación del anterior así que la temática va a ser muy similar.

Me encantaría que pudiéramos ver todos los controles y hacer ejemplos con cada uno de ellos pero eso nos llevaría demasiado tiempo así que me voy a centrar en algunos controles que considero más interesantes que otros. No obstante te invito a que crees un nuevo proyecto con Visual Studio y te pongas a jugar con los controles que ofrece, esa es la mejor manera de aprender 🙂

El temario de hoy es:

  • Controles
    • CheckBox
    • RadioButton
    • DateTimePicker
    • PictureBox
    • MenuStrip
    • Timer
  • Resolución de un ejercicio de ejemplo
  • Resumen
  • Enunciado del ejercicio para la próxima entrada.

Lamentablemente no podemos aplicar estos controles en nuestra calculadora (excepto el menú) por lo que la vamos a dejar aquí, si más adelante surge la oportunidad de continuarla para hacer algún ejemplo la volveremos a tocar pero por ahora la dejamos en pausa. Eso sí, te animo encarecidamente a que la termines por tu cuenta, con lo que te he enseñado tienes más que suficiente para terminarla con la ayuda del Sr. Google y, si por lo que sea te quedas encallado/a en algún punto no dudes en enviarme un mensaje vía comentarios.

Si además, por petición popular queréis que continuemos con la calculadora, también lo podemos hacer 🙂

3. Controles

Pues al turrón, recordemos que hemos visto los “Buttons”, los “TextBoxes” y los formulario pero nos quedan unos cuantos controles interesantes por ver. Como he dicho antes me voy a centrar en los más útiles y/o comunes.

Te recomiendo que crees un nuevo proyecto limpio para que no te líes con lo que tenemos hecho hasta ahora.

3.1. CheckBox

El “CheckBox” es el típico recuadro que se marca con un “tick” y se suele utilizar para selecciones de respuesta múltiple, crea un CheckBox en el formulario (de la misma forma que hicimos con los botones) y échale un vistazo a sus propiedades:

7.check.1

Verás que sus propiedades son muy similares a las de un “Button” o un “TextBox”, pero el valor que más te interesa es la propiedad “Checked” que será la que te permitirá saber si una persona ha hecho clic o no. Además, como puedes observar si tocas el botón del rayo, tienes multitud de eventos que puedes programar como “Click” o “CheckedChanged”.

Su uso es tan simple que vamos a reservarnos los ejemplos para el final, donde los vamos a ver todos de golpe.

3.2. RadioButton

El “RadioButton” es el hermano del “CheckBox” (checks para los amigos) pues la función es la misma (seleccionar) pero en éste caso de forma única. Haz una prueba y pon un par de radios (“RadioButtons”) en el formulario, cuando le des al play verás que solo puedes seleccionar uno de ellos, cosa que no ocurre con los checks.

7.radio.1

3.3. DateTimePicker

El “DateTimePicker” permite que un usuario pueda seleccionar una fecha desde un calendario desplegable de forma cómoda y sencilla. Además, el valor que podemos recoger (en la propiedad “Value”) nos viene en forma de objeto “DateTime”, dicho objeto contiene una fecha y la podemos transformar con total comodidad.

Unas de las ventajas de éstos componentes es que nos ahorra el molesto problema de “escribe la fecha con dos dígitos para el día, dos para el mes y cuatro para el año. ¡Ah! No escribas letras que sino revienta todo el puto programa”. Además el objeto “DateTime” lo podemos mostrar al usuario en forma de texto con el ya conocido “ToString” y podemos decidir en que formato (dd-mm-aaaa, dd/mm/aaaa, etc), por no hablar de sumar días, horas, etc.

7.date.8

3.4. PictureBox

El picture box es uno de los controles más sencillos de utilizar, cuando lo crees verás que aparece una flechita que te despliega un asistente. La gracia de éste control es que se puede manipular en tiempo de ejecución mediante código para, por ejemplo, cambiar la imagen. Una posible aplicación sería mostrar un led que se enciende cuando movemos el ratón y parpadea cuando se queda quieto.

7.pic.7

3.5. MenuStrip

Éste control te permitirá montar menús tan clásicos como “Archivo”, “Ayuda / Acerca de…” o el favorito de todos “Edición / Copiar”. Cuando lo crees verás que puedes ir añadiendo otros elementos o ir escribiendo los nombres de las secciones. No tiene demasiado misterio.

Además, al igual que los botones, puedes hacer doble click para crear eventos en caso que quieras programar alguno.

7.menu.9

3.6. Timer

El timer es un objeto muy interesante, ya que nos permite decirle cada cuanto tiempo se ha de disparar un evento que nosotros podemos programar. Simple, sencillo y sin misterio. Además, es el único control que hemos visto que no es gráfico (no aparece en el formulario cuando le das al play).

4. Resolución de un ejercicio de ejemplo

Nos piden un formulario de Windows que recoja el nombre, apellido, fecha de nacimiento, sexo y aficiones de una persona. Debe incluir dos botones: uno para resetear el formulario y otro para aceptar. Cuando se acepta se debe mostrar un mensaje con un resumen de las opciones seleccionadas. También ha de aparecer de forma automática, cada 30 segundos, un mensaje que diga “Programar mola y saltar a la comba también.”

Además, como guinda del pastel, se pide una opción en un menú para cerrar la aplicación.

4.1. Primera parte: el botón “Aceptar”

Pues vamos al turrón, la parte más fácil es montar el formulario con los elementos que nos piden. Vamos a usar “Labels” para las etiquetas, “TextBoxes” para el nombre y apellido, “DateTimePicker” para la fecha de nacimiento, como el sexo es de opción única vamos a usar “RadioButtons” y para las aficiones “CheckBoxes”. La cosa quedaría más o menos así:

7.ejemplo.1

Vale, le damos doble click al botón aceptar y programamos su evento clic. Lo que vamos a hacer es recorrer los controles (yo les he puesto un nombre que me sea fácil de recordar), coger su valor, montar un string y mostrarlo en un “MessageBox” (que ya los hemos visto antes). Allá vamos:

7.ejemplo.2

Espero que se entienda todo lo que he hecho, a estas alturas debería ser así. Si no es el caso siéntete libre de preguntar en los comentarios pues soy consciente que en ocasiones me puedo explicar como el puto culo.

Si se ejecuta esto, se rellena el formulario y se le da al botón de aceptar nos encontramos con el siguiente mensaje:

7.ejemplo.3

¿Feo de cojones verdad? Normal, no hemos puesto ningún salto de línea. Vamos a retocar nuestro mensaje:

7.ejemplo.4

Ahora el mensaje mola mucho más porque he puesto saltos de línea después de cada línea:

7.ejemplo.5

¿Lo ves? Todo más clarito.

Antes de seguir con el ejercicio me gustaría hacer algunas optimizaciones en el código para que quede más bonito (ya sabes que me encantan estas cosas), las hago y las comentamos:

7.ejemplo.6

Bien, la primera optimización la tenemos en la línea 26. Los checks “sexoSi” y “sexoNo” son complementarios por lo que para saber que se ha marcado me basta con mirar uno de los dos… siempre y cuando active uno como predeterminado (sino podría ser que ninguno estuviera marcado que es el estado inicial del formulario). Activar uno por defecto es tan fácil como poner a “true” la propiedad “Checked” desde la vista del formulario.

Lo segundo que he hecho está en la línea 27, he inicializado el array de forma inline, algo que ya habíamos visto en capítulos anteriores.

Lo último es un poco más extraño, está en la línea 29 y es una forma curiosa, potente y eficiente de construir strings. Consiste en utilizar el método “Format” del objeto “string”, en el primer parámetro metemos el texto y dejamos huecos en blanco con llaves numeradas (“{0}, {1}, {2}, etc.”). El resto de parámetros son los valores de esos huecos, como nosotros hemos usado dos huecos hemos de poner dos parámetros y ahora viene lo mejor: ¡da igual el tipo de objeto! Puedes poner un string, un int, un bool… lo que quieras.

Por último fíjate en la línea 31, el método “ToString” de “fNaci” tiene un parámetro de tipo string con el valor “dd/MM/yyyy”. Eso es así para que la fecha aparezca en ese formato, es decir, dos dígitos para los días, dos para los meses (la m es mayúscula porque las minúsculas hacen referencia a los minutos) y cuatro para la hora. Tienes más información sobre como formatear fechas aquí.

4.2. Segunda parte: el botón “Reset”

Esto va a ser más fácil, lo único que hay que hacer es dejar los controles como estaban cuando se carga el formulario. Doble click al botón “Reset” y a programar:

7.ejemplo.7

De aquí lo único que quiero comentar es la tercera línea, “DateTime.Today” accede a la propiedad “Today” del objeto “DateTime” (que no hace falta declarar) que es la fecha con la que arranca por defecto nuestro “DateTimePicker”.

Seguramente volvamos sobre éste ejemplo en el siguiente capítulo cuando hablemos de la iteratividad… no te asustes que mola más que asusta 😉

4.3. Tercera parte: el menú

Voy a crear un control “MenuStrip” con una opción llamada “Archivo” y dentro otra llamada “Salir” al igual que en la mayoría de aplicaciones:

7.ejemplo.8

Ahora doble click sobre “Salir” y programamos el cierre de la aplicación:

7.ejemplo.9

¿Fácil verdad? El objeto “Application” nos permite controlar nuestra propia aplicación y uno de sus múltiples métodos es “Exit”. Te animo a que juegues con éste objeto para que veas su potencial.

4.4. Cuarta y última parte: el temporizador

Esta es la más diver-chachi, vamos a crear un control de tipo “Timer” y lo vamos a programar a 30 segundos:

7.ejemplo.10

El “Timer”, a diferencia del “MenuStrip” no aparece dibujado en el formulario pero si vemos el componente en esa zona etérea de debajo del mismo donde lo podemos seleccionar como un control más y acceder a sus propiedades. Fíjate que lo he marcado como “Enabled” para que funcione desde el principio y que el intervalo es de 30.000 milisegundos, es decir, 30 segundos.

Ahora le hacemos doble click al timer y empezamos a programar lo que hará cada vez que se active, que será mostrar un mensaje tal y como nos han pedido:

7.ejemplo.11

Otra vez nuestro amigo “MessageBox” nos hace el trabajo, si ahora arrancas la aplicación y esperas 30 segundos verás como aparece el mensaje.

5. Resumen

Hoy hemos ampliado nuestros horizontes con los controles de Windows Forms y, aunque no están todos los que són, si que son todos los que están… o algo así… osea que todo lo que hemos visto son controles, pero no los hemos visto todos… es igual, que me voy por las ramas…

Ya hemos visto y jugado con los siguientes controles:

  • Label
  • TextBox
  • Button
  • DateTimePicker
  • RadioButton
  • CheckBox
  • MenuStrip
  • Timer

Me gustaría enseñártelos todos pero acabaríamos en dos años y tampoco es el objetivo de éste curso, yo solo pretendo enseñarte las bases y quitarte el miedo a probar y descubrir las cosas por ti mismo, y para ello nada mejor que un ejercicio para la entrada que viene:

6. Enunciado del ejercicio para la próxima entrada.

Te piden un formulario que recoja el nombre de una persona y permita escoger es estado civil de ésta persona de un listado predefinido. La lista de estados es la siguiente:

  • Soltero/a
  • Casado/a
  • Divorciado/a
  • Viudo/a

También te piden una opción que permita cambiar el color de:

  • Fondo del formulario
  • Fondo de los controles
  • Texto

Pistas

Para el estado civil puedes usar el control “ComboBox”.
Para los colores el control “ColorDialog”.
Como mostrar el “ColorDialog” queda a tu elección (botón, menú…)

Mucha suerte y nos vemos en la próxima entrada.
¡Gracias por seguir mi blog!

Anuncios