jueves, 5 de junio de 2014

Eventos en C# - Parte 4: Eventos en Aplicaciones WinForms

Índice

0. Introducción
1. Creación Solución y Proyecto
2. Modificación Formulario
3. Creación de Modelo del Mundo del Problema
4. Construcción de la Interfaz Gráfica de Usuario
5. Programación de Eventos
5.1 Evento click función factorial
5.2 Evento click función fibonacci
6. Prueba de Ejecución del Proyecto
7. Recursos
8. Conclusiones
9. Glosario
10. Literatura & Enlaces

0. Introducción

En esta entrega de la serie de artículos de eventos en C# desarrollaré una aplicación WinForms para demostrar el uso de eventos en aplicaciones con interfaz gráfica de usuario. La solución consistirá de un proyecto (Windows Forms) que contendrá un formulario y una serie de controles visuales para el ingreso de datos y otros controles para el procesamiento de los datos ingresados.

[Nota: Este artículo tiene una componente práctica alta, a diferencia de los 3 anteriores.]

1. Creación Solución y Proyecto

El primer paso consiste en la creación de una solución y un proyecto en Visual C#.

1. Nos dirigimos al menú File -> New -> Project...:
2. Seleccionar la categoría de plantilla Visual C#, luego la subcategoría Windows. En el conjunto de plantillas instaladas, seleccionamos Windows Forms Application.


Ahora tenemos que especificar un nombre para el proyecto, una ruta para los archivos de la solución y los proyectos. En la Figura 1 se muestra resaltado estos elementos.
Creación solución y proyecto
Figura 1. Creación solución y proyecto.

En los campos Name, Location, y Solution name, debemos especificar el nombre del proyecto, la ruta en donde se localizarán los archivos de solución y proyecto, y finalmente el nombre de la solución, respectivamente.


En la Figura 2 se resalta la región en donde muestra el área de Solution Explorer con la estructura lógica de la solución y los proyectos.
Estructura de la solución y el proyecto recién creados
Figura 2. Estructura de la solución y el proyecto recién creados.

2. Modificación Formulario

1. Cambiamos el nombre del formulario generado por `Principal.cs`. Apenas pulsemos, aparecerá un diálogo de aviso de refactorización de clases asociadas al formulario; respondemos haciendo clic sobre el botón 'Yes' (como se muestra en la Figura 3).
Cambio nombre de formulario auto-generado
Figura 3. Cambio nombre de formulario auto-generado.

2. Cambiamos el título del formulario. Para esto seleccionamos el formulario autogenerado desde el área de diseño, en el panel de Properties, nos ubicamos en la categoría Appearence la propiedad Text, y escribimos el texto Calculadora Fibonacci y Factorial.
Título Ventana Calculadora Fibonacci y Factorial
Figura 4. Título Ventana Calculadora Fibonacci y Factorial.
3. Cambiamos los valores para las siguientes propiedades desde el panel Properties:
  • FormBorderStyle: Fixed Single
  • StartPosition: CenterScreen
  • MaximizeBox: True

3. Creación del Modelo del Mundo del Problema


1. Agregamos una carpeta al proyecto Demo1Eventos y la nombramos `Modelo`.
Agregación carpeta para el Modelo del mundo del problema
Figura 5. Agregación carpeta para el Modelo del mundo del problema.

2. Agregamos el archivo de código fuente C# `Calculadora.cs` en la carpeta `Modelo`.
Agregación clase Calculadora al Modelo
Figura 6. Agregación clase Calculadora al Modelo.
3. Copiamos y pegamos el siguiente código sobre todo el archivo `Calculadora.cs`.

Archivo de código fuente Calculadora.cs [enlace alternativo]:

4. Construcción de la Interfaz Gráfica de Usuario

1. Agregamos los componentes (ver Figura 7) al formulario Principal.

2. Les asignamos los siguientes identificadores desde la categoría Design en el panel Properties a la propiedad (Name):
Nombre (identificadores) componentes
Figura 7. Nombre (identificadores) componentes.

5. Programación de Eventos

5.1 Evento click función factorial

1. Seleccionamos el botón `btnCalcularFactorial` y hacemos doble clic sobre él. Esta acción nos inmediatamente llevará a la vista código:
Método btnCalcularFactorial_Click para evento Click
Figura 8. Método btnCalcularFactorial_Click para evento Click.
2. Agregamos el namespace Modelo al inicio del archivo de código fuente `Principal.cs`:

using Demo1Eventos.Modelo;

3. Declaramos el campo private calc:

private Calculadora calc;

4. Creamos una instancia de la clase Calculadora y la asignamos a calc en el constructor de Principal:

calc = new Calculadora();

5. Lógica para la implementación del método btnCalcularFactorial_Click:

private void btnCalcularFactorial_Click(object sender, EventArgs e)
{
long numero = long.Parse(txtNumeroFactorial.Text);

long resultado = calc.Factorial(numero);

lblResultadoFactorial.Text = String.Format("Resultado: {0}", resultado.ToString());
}

5.2 Evento click función fibonacci

1. Volvemos a la vista Diseño (View -> Designer), y seleccionamos el botón `btnCalcularFibonacci` y hacemos doble clic sobre él. Esta acción nos llevará a la vista código:
Método btnCalcularFibonacci_Click para evento Click
Figura 9. Método btnCalcularFibonacci_Click para evento Click.
2. Agregar las siguientes líneas de código para la implementación del método btnCalcularFibonacci_Click:

private void btnCalcularFibonacci_Click(object sender, EventArgs e)
{
long numero = long.Parse(txtNumeroFibonacci.Text);

long resultado = calc.Fibonacci(numero);

lblResultadoFibonacci.Text = String.Format("Resultado: {0}", resultado.ToString());
}

Notas


En las secciones 5.1 y 5.2 hemos visto cómo asignar un método al manejador de eventos (event handler), precisamente para el evento click del botón (clase Button).

6. Prueba de Ejecución del Proyecto


Para ejecutar el proyecto presionamos la tecla F5. En unos pocos segundos tendremos en pantalla la aplicación ejecutándose.
Aplicación en ejecución
Figura 10. Aplicación en ejecución.
Resultado en vídeo:

7. Recursos

Archivo comprimido con la solución y el proyecto.

8. Conclusiones

A través de esta aplicación 'Calculadora Fibonacci y Factorial' hemos demostrado los fundamentos de la programación orientada a eventos sobre aplicaciones gráficas Windows (WinForms). Esta es una manera sencilla y directa de programar eventos para las acciones que realiza un usuario sobre un programa, sin embargo (desde mi propia experiencia), es importante tener un buen conocimiento y práctica en el modelo de la solución al problema.

9. Glosario

  • Click
  • Evento
  • Formulario
  • Modelo
  • Propiedad
  • Windows
  • WinForms

10. Literatura & Enlaces

[1]: C# 5.0 in a Nutshell by Joseph Albahari and Ben Albahari. Copyright 2012 Joseph Albahari and Ben Albahari, 978-1-449-32010-2.


J

2 comentarios:

Envíe sus comentarios, dudas, sugerencias, críticas. Gracias.