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

6 – Introducción a los Windows Forms

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, recordemos el enunciado:

Te piden desarrollar un sistema de seguridad muy sencillo para un ascensor. El ascensor tiene un número máximo de pasajeros permitido y tu sistema debe permitir lo siguiente:

  • Establecer el límite de pasajeros permitido.
  • Llevar la cuenta de los pasajeros que entran.
  • Llevar la cuenta de los pasajeros que salen.
  • Consultar si se ha sobrepasado el límite.

Solución:

Muy bien, vamos a empezar haciendo el truco que te enseñé en el capítulo anterior y vamos a determinar que clases necesitamos, con que atributos y que métodos. Empecemos con las clases, recuerda que para ello hemos de buscar sustantivos:

Te piden desarrollar un sistema de seguridad muy sencillo para un ascensor. El ascensor tiene un número máximo de pasajeros permitido y tu sistema debe permitir lo siguiente:

  • Establecer el límite de pasajeros permitido.
  • Llevar la cuenta de los pasajeros que entran.
  • Llevar la cuenta de los pasajeros que salen.
  • Consultar si se ha sobrepasado el límite.

Empecemos por “sistema”, el sistema de seguridad es lo que nos piden montar, aquí podemos hacer dos cosas: desarrollar el sistema como una clase, o obviarlo y meter toda nuestra lógica directamente en el formulario… Había pensando en obviarla pero la voy a tener en cuenta para que veas que esto puede ser tan flexible como tu quieras. Seguimos por “ascensor”, que es el elemento principal de éste ejercicio. Si te fijas todo gira en torno al ascensor (es por ello que decía que podíamos obviar la clase “sistema”) por lo que podemos decir que “ascensor” es la clase fuerte o dominante.

Nos queda la clase “pasajeros”, nos la apuntamos también.

Vamos a buscar ahora atributos, recuerda que es todo aquello que denote algún tipo de propiedad o descripción ya sean adjetivos o pequeños sintagmas:

Te piden desarrollar un sistema de seguridad muy sencillo para un ascensor. El ascensor tiene un número máximo de pasajeros permitido y tu sistema debe permitir lo siguiente:

  • Establecer el límite de pasajeros permitido.
  • Llevar la cuenta de los pasajeros que entran.
  • Llevar la cuenta de los pasajeros que salen.
  • Consultar si se ha sobrepasado el límite.

Bien, sencillo hace referencia al sistema de seguridad y nos indica que el problema es fácil, no hace falta comerse mucho la cabeza para ver que nos lo podemos pasar por el forro. Lo siguiente tiene más chicha, “número máximo de pasajeros” no es un adjetivo pero sí que define una propiedad del ascensor, nos está dando información detallada del mismo así que podríamos tomarlo como un parámetro.

Esto no siempre es infalible ni tampoco claro, ante la duda te recomiendo que lo tengas en cuenta y sobre la marcha te darás cuenta que sobra… siempre es mejor que sobre que no que falte 😉

Fíjate que he marcado “el límite de pasajeros permitido”, “la cuenta de pasajeros que entran” y “la cuenta de los pasajeros que salen”. El primero ya lo hemos tenido en cuenta, pero los otros dos nos dan una pista de que vamos a necesitar un contador de pasajeros, por tanto necesitamos otro atributo.

Por último los métodos, suelen ser verbos o acciones:

  • Establecer el límite de pasajeros permitido.
  • Llevar la cuenta de los pasajeros que entran.
  • Llevar la cuenta de los pasajeros que salen.
  • Consultar si se ha sobrepasado el límite.

¿Bastante fácil esta parte no? Lo cierto es que intenté que el enunciado fuera sencillo y fácilmente analizable, si no lo he conseguido me lo tengo que hacer mirar :p

¿Que tenemos hasta ahora? Agarra papel y lápiz (tus dos mejores amigos) y hagamos recunto:

  • Tres clases: “sistema”, “ascensor” y “pasajero”.
  • Dos atributo de “ascensor”: el “número máximo de pasajeros” y “los pasajero que hay montados”
  • 4 métodos para el sistema de seguridad:
  • Establecer el límite de pasajeros permitido.
  • Llevar la cuenta de los pasajeros que entran.
  • Llevar la cuenta de los pasajeros que salen.
  • Consultar si se ha sobrepasado el límite.

Si te fijas, la clase “pasajero” se nos ha quedado sin atributos ni métodos, de hecho lo único que vamos a hacer es contar pasajeros, por lo que son más bien un atributo y no una clase así que no la tendremos en cuenta.

Te recomiendo siempre que vayas de dentro hacia afuera, como el sistema de seguridad es el que maneja ascensores vamos a empezar por ascensor, programemos:

6.1.solucion1

Aquí tienes mi clase Ascensor, que he creado en un fichero nuevo llamado “Ascensor.cs” y tiene los dos atributos que hemos visto antes.

Vamos ahora con la clase Sistema:

6.2.solucion2

El constructor de Sistema crea el ascensor. El resto de métodos nos permiten hacer lo que nos pide el enunciado: establecer el número máximo de pasajeros, llevar la cuenta de los que entran y salen (es decir, poner y quitar) y mirar si el límite está sobrepasado.

El atributo “_ascensor” lo que puesto como private para que no sea visible desde fuera de “Sistema”, lo del guión delante es una manía mía que me ayuda a identificar rápidamente que atributos son públicos y cuales privados… no es esencial pero a mi me resulta útil.

Con esto habríamos resuelto el ejercicio pero creo que es una oportunidad perfecta para enseñarte la importancia de los atributos y métodos privados.

2. La importancia de los atributos y métodos privados.

Imagina que le entregamos a un cliente esta clase tal cual la tenemos programada y la empieza a usar en sus sistema de seguridad para ascensores. Nos dice que gracias a nuestro trabajo ha desarrollado un sistema de alarma que le avisa si el ascensor está en peligro de sobrecarga.

Como gracias a nuestro trabajo no ha de preocuparse de que el ascensor se caiga nos va a pagar un pastizal, pero también nos advierte de que si algo sale mal nos va a tirar a sus abogados para que nos quiten hasta los dientes.

Si código es el que sigue:

6.3.solucion3

Como puedes ver el tío tiene razón, ha usado nuestra clase Sistema para montar un sistema de alarma, su méetodo PasajeroEntra le retorna un booleano que le dice si se ha sobrepasado el límite de ocupación o no (que está inicialmente establecido en 4).

¿Te das cuenta de lo que ha hecho este pedazo de imbécil? ¡El tío incrementa el número máximo de pasajeros cuando se supera el límite y se queda tan tranquilo! ¡¡Esta alarma nunca va a sonar!! ¡¡¡Nos va a echar la culpa a nosotros!!!

Vale, es un ejemplo un poco bestia pero toda esa gente va a morir porque nosotros le hemos dejado usar nuestro sistema de seguridad como le ha dado la gana y eso, precisamente, no es seguro… Vamos a hacer un par de cambios:

6.4.mejora1

Ahora nuestro método SetMaxPasajeros es privado y no se puede llamar desde fuera, en cambio el máximo de pasajeros se le pasa a la constructora que sí puede llamar al viejo método SetMaxPasajeros.

¿Que hemos conseguido ahora? Justamente esto:

6.5.mejora2

El tío ya no puede hacer lo que hacía, porque los métodos que quiere tocar ya no son accesibles y por ello se ve obligado a cambiar el código de la siguiente forma:

6.6.mejora3

Se ve obligado a establecer el máximo desde un inicio y ya no lo puede cambiar dentro de nuestro “Sistema” aunque el muy burro lo cambie fuera. Con éste sencillo cambio nuestro sistema ha dado la alarma cuando debía sin sufrir manipulaciones externas… siempre y cuando sea verdad que el ascensor aguanta a 4 personas…

3. Contenido del capítulo

Ya sé que siempre pongo esto en el punto 2 pero esta vez se me ha ido al 3…

  • Introducción a Windows Forms
    • Controles
    • Propiedes
    • Eventos
  • Resolución de un ejercicio de ejemplo
  • Resumen
  • Enunciado del ejercicio para la próxima entrada.

Como puedes ver lo prometido es deuda y hoy vamos a hablar de ventanitas, botoncicos 🙂

4. Introducción a Windows Forms

Windows Forms es el nombre que reciben las aplicaciones desarrolladas con Visual Studio que muestran ventanas con botones, menús, campos de texto, etc. Hasta la fecha hemos estado creando aplicaciones de éste tipo pero solamente hemos visto el código, hasta hoy.

Ha llegado el momento de echar un vistazo al fichero “Form1.cs” en su vista de diseño, puedes usar el mismo proyecto que usamos para la calculadora porque nos va a ir de lujo para lo que te quiero enseñar. Si lo abres deberías ver algo como esto:

6.7.forms1

Seguro que lo recuerdas de sesiones anteriores, era esa ventana donde no podíamos tocar nada excepto hacerla más grande. Pues ese es nuestro formulario y es donde vamos a aprender a usar éstos elementos.

4.1. Controles

Lo primero que vamos a hacer es poner un cuadro de texto en éste formulario, para ello desplegamos el “cuadro de herramientas” (a la izquierda) y, dentro de “Controles comunes”,  escogemos “TextBox” haciendo clic. 6.8.forms2

Lo siguiente que has de hacer es dibujar el cuadro de texto sobre el formulario, verás que el cursor ha cambiado de forma al escoger el TextBox así que lo único que tienes que hacer eshacer clic sobre el formulario. Esto hará que aparezca una hermosa y flamante caja de texto vacía.

6.9.form3

 

Verás que la puedes hacer más grande si arrastras los cuadritos blancos de los laterales (aparecen al hacer clic sobre la caja), que la puedes mover si la arrastras, etc. Hasta aparecerán unas guías que te ayudarán a colocarla de forma más cómoda dentro del formulario. Por ahora vamos a hacer que quede de una forma parecida a ésta:

6.10.forms4

4.2. Propiedades

Ahora haz clic sobre la caja para seleccionarla y fíjate en el panel de propiedades abajo a la derecha:

6.11.form5

¿Chulo eh? Esas son todas las propiedades de nuestro TextBox y la mitad no las vamos a tocar en nuestra puta vida. En el listado puedes ver que su nombre es “textBox1”, que su posición es la “12;12” (al menos en mi caso, si en el tuyo es diferente no pasa absolutamente nada) o que sus modificadores son privados (¿te suena?). Vamos a hacer una cosa, vamos a buscar una propiedad que se llama “Text” y vamos a escribir “Hoy estoy chichinabesco” y ni se te ocurra escribir algo diferente o mataré a un gatito.

6.12.form6

Y ahora mira de nuevo tu formulario para contemplar asombrado como ha aparecido ese texto dentro del TextBox.

6.13.form7

Ahora dale al play, verás que aparece esta misma ventana y que podemos jugar con ella y, por supuesto, también podemos modificar el texto que hemos escrito. ¿Por que ocurre esto? ¿Que está pasando? Es muy fácil:

El TextBox que has dibujado, aunque el Visual Studio te lo muestra así en realidad no es más que un objeto, una clase de tipo “TextBox” muy parecida a nuestra clase “Calculadora” pero bastante más compleja. Esta clase “TextBox” tiene sus propios métodos y atributos y uno de ellos es precisamente “Text” que se encarga de almacenar el texto que se ha de mostrar.

 Ahora vamos a añadir un botón a nuestro formulario, repetimos los pasos anteriores pero escogemos “Button” y lo ponemos más o menos así:

6.14.form8

Si haces clic sobre el botón y miras el panel de propiedades verás algo muy parecido a antes, vamos a cambiar la propiedad “Text” y pondremos un texto cualquiera… me siento tán generoso que te dejo elegir XD. Como podrás ver ocurre lo mismo, el texto que sale en el botón ha cambiado.

4.3. Eventos

Ahora quiero que te fijes en el panel de propiedades y busques el símbolo de un rayo, si le haces clic pasarás a ver los eventos del botón (la hojita de la izquierda son las propiedades que veíamos antes, el rayo son los eventos):

6.15.fomr9

Aún no hemos hablado de eventos pero son muy sencillos de entender. Un evento es una especie de método que se ejecuta cuando se produce una situación concreta. Por ejemplo, el evento “Click” de éste botón se ejecuta cuando el usuario le hace clic.

 Vamos a hacer doble clic sobre el texto “Click” y veremos que por automagia se nos ha creado un método click listo para programar:

6.16.form10

Sea lo que sea lo que programes aquí dentro se ejecutará cuando el usuario haga click en el botón. Para demostrarlo vamos a cambiar el texto de la caja de texto que hemos usado antes.

6.17.fomr11

Si recuerdas bien, el TextBox que hemos creado se llamaba “textBox1” (porque no le hemos cambiado el nombre), si lo escribes y le das al punto Visual Studio te muestra sus atributos y métodos. Lo único que hacemos es acceder a su propiedad “Text” y cambiarla por un string a nuestro gusto.

Ahora prueba de darle al play y haz clic en el botón… ¡¡¡sorpresa!!!

6.18.form12

Exacto, ha pasado exactamente lo que hemos programado, al hacer clic se ha ejecutado nuestro código y el texto ha cambiado. Si quieres verlo más en detalle te recomiendo que pongas un breakpoint por ahí e investigues.

Existen infinidad de controles (botones, cajas de texto, tablas, etiquetas…) y obviamente no los vamos a ver todos, pero ya tienes las herramientas necesarias para ir investigando y, como te digo siempre, recuerda que Google es tu amigo y que yo respondo todas las dudas que me encuentro en los comentarios 🙂

5. Resolución de un ejercicio de ejemplo

Para que todo esto quede más claro, vamos a hacer un ejercicio de ejemplo basado en la calculadora que hicimos en el capítulo anterior. Y el ejercicio es… ¡hacer una calculadora!

No te asustes, que la calculadora ya la hemos hecho, es la clase “Calculadora.cs” que hicimos en la sesión anterior pero ahora le vamos a dar una interfaz para que una persona que no sabe programar la pueda usar y, así de paso, ves la diferencia entre el código de una aplicación y el código que controla su interfaz.

Lo primero que vamos a hacer, para que te familiarices con los controles y Visual Studio es imitar la interfaz de la calculadora de Windows en su vista estándar. Usando el mismo proyecto que tenemos creado, vamos a aprovechar el TextBox y el Button que hay en el formulario y vamos a añadir el resto de botones. A continuación te dejo una imagen de la calculadora de Windows (izquierda) y la que he hecho yo (derecha).

  6.19.calc1             6.20.calc2

Antes de liarte a dibujar botones déjame darte dos consejos:

  1. Los botones se pueden copiar y pegar, lo cual es cómodo y útil.
  2. Si quieres poner varios controles iguales, haz clic en el control (del cuadro de herramientas), apreta y deja apretado el control, y a cada clic en el formulario tantas veces como controles del mismo tipo quieras.

Por ahora las calculadoras se parecen como un huevo a una castaña pero ya lo iremos perfilando. Los símbolos de raíz, la flecha, etc. los he cogido del Word (Insertar/Símbolo) pero si no tienes licencia de Word (aquí no animamos a la piratería a no ser que no implique llevar un loro en el hombro) te recomiendo probar con Libre Office (un editor de texto libre y gratuito muy parecido al Word de Microsoft) o, simplemente, copiar y pegar los que te dejo a continuación:

  • Flecha: ←
  • Mas menos: ±
  • Raíz: √

Vale, por ahora no vamos a dejar más bonita la interfaz pero si vamos a tocar un par de detalles de nuestro TextBox. La propiedad Text la vamos a dejar vacía para que no salga nada, y a la propiedad Name le vamos a poner “txtResultado” porque “textBox1” no me gusta… piensa que ahora solo hay un TextBox pero si tuvieras muchos te resultaría muy difícil saber cual es cual si se llaman “textBox1”, “textBox2”, etc.

Vamos a hacer lo mismo con los botones, te dejo escoger el nombre pero te hago dos recomendaciones: que sea un nombre lógico y que empiece por “btn”, como por ejemplo “btnSuma”… ya verás por qué 😉

Vamos al código del formulario principal, re recuerdo que puedes llegar haciendo clic con el botón derecho sobre “Form1.cs” en el “Explorador de soluciones” y escogiendo la opción “Ver código” o pulsando la tecla “F7”.

Asegúrate que todo el código está limpio, deberías ver algo muy parecido a esto:

6.21.clacl3

Vale, antes de empezar a programar una calculadora hay que entender como funciona una calculadora. Como nuestra intención es imitar la calculadora de Windows vamos a ir probando que hace exactamente a fin de irla imitando poco a poco.

Si te fijas, nada más abrirse nos muestra en el resultado un 0, pero si le das al play verás que en tu campo de resultados no aparece nada… No te preocupes que lo solucionaremos.

Empecemos con la suma. Si te fijas, para que la calculadora de Windows haga una suma has de apretar un número, darle al +, después a otro número y acto seguido darle al =. Vamos a empezar programando esto y, para ello hay que entender como funciona por dentro.

Cada vez que pulsas un número aparece en el display de la calculadora, por tanto necesitamos una variable que lo recuerde. Empecemos por ahí. Vamos de nuevo al formulario (si no lo tienes abierto haz doble click en “Form1.cs” en el “Explorador de soluciones” y pulsa sobre el botón “7”. En las propiedades le damos al botón de eventos (el rayo) y hacemos doble click en “click”, lo cual nos lleva de nuevo a la vista de código pero dentro del método click de éste botón.

Como hemos comentado antes, queremos que la calculadora recuerde que hemos pulsado el 7, por lo tanto vamos a definir una variable global, o lo que es lo mismo, un atributo de nuestra clase “Form1”:

6.22.clalc4

Ahora vamos a hacer dos cosas, vamos a decirle a nuestra nueva variable global “_current” que su valor es 7 y vamos a mostrar dicho valor en nuestro TextBox al igual que hace la de Windows:

6.23.calc5

¿Facil verdad? ¿Ves que he puesto un “ToString” detrás de “_current”? El atributo “Text” de “txtResultado” es de tipo string, pero “_current” es un int, el método “ToString” de “_current” permite transformar ese int a string para que lo podamos poner en “Text”.

Si ahora ejecutas la aplicación y le das al botón 7 verás que pasa exactamente esto que decimos aunque no quede igual de bonito que en la calculadora de Windows. Vamos a hacer lo mismo para el resto de números pero primero ahí va otro truco: si haces doble clic a un botón en el formulario crearás automáticamente un evento clic 😉

6.24.calc6

No me han cabido todos en la imagen pero tengo todos los números programados. Volvamos a la calculadora de Windows, y vamos a ver exactamente que pasos sigue a la hora de calcular.

Empieza en 0, si pulsamos el 1 lo muestra en pantalla, si pulsamos el + no hace nada, si pulsamos el 6 lo saca por pantalla, si pulsamos otra vez el + nos saca la suma de 6+1… De esto podemos deducir que la calculadora tiene dos valores principales: el número actual y el resultado.

El primer valor introducido lo usa como resultado. A partir de ahí cada vez que se pulsa un símbolo de operación toma el valor introducido y hace la operación con el resultado… me explico:

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

Y así hasta el infinito. A esto de deducir como está programada una aplicación estudiando su uso se le llama “Ingeniería Inversa” y en según que cosas (como descubrir como piratear la Play) puede ser hasta ilegal… Microsoft, si estás leyendo esto no te enfades, nuestra calculadora será mucho mejor que la tuya así que tranquila que no estamos copiando nada :p

Bien, soy consciente que programar esto no es trivial, y es posible que tengas la cabeza hecha un lío. No te preocupes, es totalmente normal. Estas cosas se sacan con muchas horas de práctica y muchas más horas de Google.

Si te pongo el código de como programar esto seguramente te limites a leerlo, copiarlo y entenderlo pero lo realmente difícil es sacarlo cuando tienes una pantalla en blanco. Es así como realmente se aprende y se automatizan estas cosas, cuando tienes un lienzo en blanco, te estrujas los sesos y das con una solución que funciona, luego la mejoras, y la vuelves a mejorar… te aseguro que eso no se olvida y proporciona una sensación de satisfacción increíble. Es por ello que no te voy a decir como continuar… ¡hasta el próximo capítulo!

6. Resumen

En realidad no hemos visto muchas cosas en éste capítulo pero si que tienen bastante calado, hemos visto los controles de Windows Forms y solamente hemos usado “Buttons” y “TextBoxes”. También hemos visto que tienen propiedades, métodos e incluso hemos programado alguno de sus eventos como el “Click”.

Por último hemos visto algún ejemplillo y hemos empezado a hacer una calculadora que el muy cabrón de yo no ha querido terminar con la excusa de que esto es bueno para ti.

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

Te dejo para el próximo capítulo la tarea de programar el funcionamiento básico de la calculadora, es decir, eso que hemos explicado con Ingeniería Inversa. Ni más, ni menos.

Creo sinceramente que con todo lo que se ha explicado tienes las herramientas necesarias para hacerlo con éxito. No te pongas límites, no te ofusques, no te preocupes si el código es bonito o eficiente. Usa tantas variables como quieras, públicas o privadas. Haz todo lo que se te ocurra pero haz que funcione. Si consigues hacer que funcione aunque hayas necesitado 2000 líneas de código significa que eres el/la puto amo/a y que estás siguiendo el curso a un ritmo excelente. En serio, para hacer las cosas bonitas siempre se está a tiempo, lo que me interesa ahora es que des con una solución funcional que salga directamente de tu cabeza y a tu manera.

Pista:

¿Recuerdas la clase “Calculadora” del capítulo anterior? Te puede ser de utilidad aunque si no la usas no pasa absolutamente nada.
Usa tantas variables globales como creas que necesitas.
No hay límites de ningún tipo, ¡¡¡desata tu creatividad!!!