Primera prctica

Formularios de Windows


05/11/2013
UACyTI - UAGro
Roberto Rosario Cruz


Nuestro primer programa para windows
Para nuestro primer programa de Windows Forms, saludamos de forma interactiva a travs de una
interfaz grfica de usuario (GUI). La ventana inicial se representa en la figura 1.

La ventana se representa como un objeto de clase Form. La barra de ttulo se ha establecido en la
cadena Hola, a medida que el usuario escribe su nombre en el cuadro de texto, se actualizar la
barra de ttulo para el texto introducido por el usuario. Lo hacemos a travs de un controlador de
eventos asociados con el cuadro de texto. El evento se dispara cada vez que se altera el contenido
del cuadro de texto. Dentro de esta form, hemos puesto los siguientes controles.
Un objeto Label con el texto asociado Por favor digite su nombre.
Un objeto TextBox a la derecha de la etiqueta, donde el usuario introduce su nombre.
Dos objetos Button uno con la leyenda Aceptar y el otro Salir.
Cuando el usuario hace clic en Aceptar, aparece una ventana de dilogo para darle la bienvenida
formal al usuario. Esta ventana muestra no slo el nombre del usuario, sino, tambin la fecha y la
hora actuales, as, como se ilustra en la Figura 2.

Si el usuario hace clic en Aceptar sin haber llenado en el cuadro de texto, una ventana de dilogo
aparece solicitando al usuario que rellene el cuadro de texto antes presionar Aceptar (ver Figura
3).
Figura 1: Ventana
Inicial
Figura 2: Ventana
de Saludo

Si el usuario pulsa Salir, un cuadro de dilogo aparece que pide al usuario que confirme (ver Figura
4). Observe que el icono y el nmero de botones disponibles cambian para cada cuadro de
dilogo.

Si el usuario pulsa Aceptar, nos aparecer un cuadro de dilogo de despedida final sin un icono
(ver Figura 5.).


Y esa es nuestra primera aplicacin de Windows Forms. En la siguiente seccin veremos cmo es
implementado el diseo la interfaz grfica de usuario a travs de controles de arrastrar y soltar,
para el aspecto de la forma, la programacin de llamadas a eventos en el comportamiento de esta
aplicacin.


Figura 3: Ventana
de Datos errneos
Figura 4: Ventana
de reafirmacin de
salida
Figura 5: Ventana
de despedida.

La construccin de la interfaz grfica de usuario
Para crear una aplicacin de Windows Forms utilizando Visual Studio.NET, abrir la ventana Nuevo
proyecto (vase la Figura 6). Seleccione Proyectos de Visual C # en la ventana Tipos de proyecto de
la izquierda. Seleccione el icono de la aplicacin de Windows en la ventana Plantillas de la
derecha. De forma predeterminada, el proyecto se le da el nombre genrico WindowsApplication1
(vase la figura 7 la cifra final se incrementa en uno por defecto con cada nombre del proyecto).


Figura 6: Ventana de
creacin del proyecto
para Windows
Figura 7: Ventana de
nombre del proyecto
para Windows

El proyecto se abre en la vista grfica del Diseador de Windows Forms (Figura 8), una forma
cuadrada en blanco con lneas de puntos en la cuadrcula y una barra de ttulo. De forma
predeterminada, el control Form y barra de ttulo se denomina Form1. Esta es la ventana principal
de la aplicacin.

La ventana Propiedades de la derecha (ver Figura 9) muestra los atributos del control activo en el
diseador de formularios. Al hacer clic en una propiedad, se muestra una explicacin de su
funcionamiento en la parte inferior de la ventana Propiedades.
Figura 8: Vista del
diseador del proyecto
Windows Form.


La ventana del Cuadro de herramientas en la parte izquierda (ver Figura 10) ofrece una gama de
controles que se arrastran y sueltan en el formulario. Para nuestra primera aplicacin que
necesitamos una etiqueta con el texto asociado favor, digite su nombre. A la derecha de esto,
tenemos un cuadro de texto. En eso, necesitamos dos botones, uno que dice Aceptar y uno que
dice Salir. Trate de arrastrar y soltar los controles asociados al formulario. Cuando haya terminado,
la forma de diseo debe ser similar al que se muestra en la Figura 11.
Figura 9: Vista de la
ventana de
Propiedades.




Figura 10: Cuadro de
Herramientas
Figura 11: Vista diseo
del proyecto.
Implementacin de las rutinas de llamada de eventos
Nuestra aplicacin est impulsada por tres eventos iniciados por el usuario:
1. La entrada de texto en el cuadro de texto.
2. El botn Aceptar que indica que la entrada est completa.
3. El clic del botn Salir para terminar la aplicacin.
Los mtodos que implementamos para responder a estos eventos se les conocen como
devoluciones de llamada (callbacks) o controladores de eventos (event handlers). Hay dos pasos
para implementar controladores de eventos: Escribir el cdigo, por supuesto, es el primer paso. El
segundo paso es el registro de la funcin que nos devuelve la llamada del control a travs del cual
se produce el evento. En nuestro programa, los tres controles son la caja de texto y dos botones.
Cuando haga doble clic en el control, por ejemplo, la caja el texto el diseador genera el esqueleto
de un mtodo que devuelve la llamada del control y genera el evento (y por supuesto, genera el
cdigo necesario para registrar el controlador de eventos con el control). La vista cambia a la vista
de cdigo, y nuestro cursor se coloca entre las llaves del cuerpo del mtodo vaco. (Ver la Figura
12).


Figura 12: Vista de
cdigo del proyecto.
Tenga en cuenta que las vistas de diseo y cdigo comparten el mismo nombre (Form1.cs, por
defecto). La vista del diseador se distingue por el atributo [Diseo] a la derecha de su nombre.
Podemos alternar entre las dos vistas del formulario haciendo clic en el nombre o Diseo del
men Ver o para la ventana de cdigo Ctrl+Alt+0 y para la ventana de Diseo Shift F7.
El objeto que representa la ventana se hereda automticamente de la clase de form definido en el
espacio de nombres System.Windows.Forms. Cada uno de los controles que arrastrar y suelte en
el formulario de diseo se agrega a la clase como un miembro privado. Por ejemplo, aqu est la
parte de datos de la definicin de la clase generada (ver figura 13):



Figura 13: Vista de la
clase Form1.
Por defecto, cuando se aade un control con el diseador, el nombre del objeto es el nombre del
control, pero con una primera letra en minscula y un sufijo con nmero que representa el
nmero de repeticiones que tiene tipo de control, en este caso el objeto Form (form1). Para
nuestro control TextBox, el objeto asociado se denomina textBox1 (debo reconocer que todava se
me pasa ponerles nombre a los componentes, pero trataremos en lo sucesivo evitar este hbito).
Para nuestros dos controles Button, los objetos se denominan btnAceptar y btnSalir. El objeto
Label, se llama label1 (para variar).
textBox1 y label1 son particularmente poco informativo como nombres. En un formulario con
muchos controles, estos nombres genricos rpidamente se hacen confusos. Es mucho ms til
cambiar el nombre de estos objetos por algo significativo, tal vez en txtNombre y lblNombre (eso
precisamente deb hacer al poner dichos controles, pero se me pas).
En general, cambiamos el nombre un control modificando la entrada Nombre de la ventana
Propiedades del control. (Por cierto, le recomiendo que lo haga antes de agregar su propio cdigo,
el diseador actualiza su propio cdigo del formulario que ha generado; pero, no modifica el
cdigo que ha sido agregado por nosotros.)
La implementacin de un evento TextBox
Lo que queremos hacer en este mtodo que nos devuel la llamada al evento es modificar la barra
de ttulo, que se inicia con la aplicacin como Hola, en la ventana de Windows Forms, para reflejar
la entrada cuando el usuario escribe su nombre. As, por ejemplo, como el usuario entra con el
nombre Roberto, la barra de ttulo se convierte a su vez Hola, R; Hola, Ro; Hola, Rob, y finalmente
Hola, Roberto, es decir va escribiendo cada uno de los caracteres tecleados (Ver figura 14).

Para modificar la barra de ttulo dentro de nuestro mtodo de devolucin de llamada, vamos a
restablecer la propiedad Texto de la barra de ttulo de la propiedad Text del cuadro de texto:

Figura 14: Vista de la
ventana principal,
notemos la barra de
titulo cambia segn los
caracteres, que el
usuario teclea.
Implementacin del evento del botn: Aceptar
Al hacer clic en el botn Aceptar, el usuario indica que ha terminado de introducir su nombre. Lo
primero que tenemos que hacer en respuesta al evento, se confirma que el cuadro de texto no
est vaco. Si est vaco, se mostrar un cuadro de mensaje que indica que la entrada en el cuadro
de texto no es vlida. De lo contrario, aparecer un cuadro de mensaje que contiene nuestro
saludo. Nuestro saludo no slo incluye el nombre del usuario, tambin la fecha y la hora. Bueno,
vamos a ver cmo lo hacemos.

El evento que queremos responder es la propiedad Click de la clase Button. El objeto botn
Aceptar es llamado btnAceptar, simplemente porque es el Nombre que le hemos dado a este
primer botn que hemos diseado. Aqu est el cdigo generado por el diseador del formulario
para registrar la llamada al mtodo btnAceptar_Clickc (cdigo generado por el diseador):


En primer lugar, comprobamos si la propiedad textBox1.Text est vaca. Si es as, se muestra un
cuadro de dilogo emergente de Datos errneos (vase la Figura 3 para ver la ventana). En el
siguiente segmento de cdigo, los mensajes de dilogo, ttulos y atributos de estilo para el dilogo
tienen en cuenta las matrices individuales:

Todo lo dems en el segmento de cdigo lo listamos enseguida. Por ltimo, tratamos nuestra
cadena de mensaje Hola para saludar al usuario, e invocamos al mtodo MessageBox.Show () para
generar el dilogo correspondiente (ver Figura 2):

Esto completa el procedimiento de devolucin de la llamada que se invoca cuando el usuario hace
clic en el botn Aceptar.
Implementando el evento del botn: Salir
Cuando el usuario hace clic en el botn Salir, aqu vamos a desarrollar uno de esos molestos
dilogos emergentes Est seguro que desea salir? (vase la Figura 4). Si el usuario responde
haciendo clic en Aceptar, generamos un dialogo emergente de despedida (ver Figura 5) y se cierra
la aplicacin con el Close() de nuestra clase Form1. El mtodo que nos devuelve la llamada se
implementa de la siguiente manera:


Esa es la aplicacin completa de la primera aplicacin de Windows Forms.