domingo, 3 de febrero de 2013

Trabajando con cuadros de diálogos

En esta sección, aprenderemos el manejo de los cuadros de diálogos, desde como crearlos y mostrarlos, hasta como guardar y recuperar el resultado de la interacción sobre el cuadro de diálogo.

1. Creando un cuadro de diálogo

Un cuadro de diálogo es un formulario especial que se usa para que el usuario interactúe con el sistema y poder recuperar la información de dicha interacción. En Windows Forms existen cuadros de diálogos predefinidos como Abrir, Guardar, Color, Fuente, Impresión, etc, los cuales veremos en el capítulo IV, en este tema aprenderemos como crear un cuadro de diálogo personalizado.

Para crear un cuadro de diálogo realice los siguientes pasos:
  • Crear un formulario y configurar la propiedad FormBorderStyle en FixedDialog.
  • Configurar las propiedades ControlBox, MaximizeBox y MinimizeBox del formulario en False.
  • Diseñar el formulario arrastrando los controles necesarios y configurando sus propiedades.

2. Mostrando un cuadro de diálogo

Si el cuadro de diálogo es el formulario de inicio, éste se cargará automáticamente al ejecutar la aplicación; pero, si el cuadro de diálogo es otro distinto, hay que programar para que éste se muestre.

Para mostrar un cuadro de diálogo realice los siguientes pasos:
  • Escriba un procedimiento manejador de eventos para mostrar el cuadro de diálogo, por ejemplo al dar clic en un botón o una opción de un menú.
  • Crear un objeto que sea una instancia de la clase del formulario que se desea mostrar como cuadro de diálogo.
  • Mostrar el cuadro de diálogo usando el método ShowDialog del objeto.

3. Cerrando el cuadro de diálogo y guardando el resultado

Como programadores muchas veces necesitamos saber el resultado de la interacción del usuario frente al cuadro de diálogo, para de acuerdo a esto realizar las acciones correspondientes.

Con esta finalidad, debemos guardar el resultado de la interacción del usuario con el diálogo, por ejemplo, podemos saber si eligió Aceptar o Cancelar, Si o No, etc.

 Para cerrar un cuadro de diálogo automáticamente y guardar su resultado realice los siguientes pasos:
  • Crear un cuadro de diálogo que contenga dos o más botones que permitan guardar la interacción del usuario.
  • Configurar la propiedad DialogResult de los botones del formulario en uno de los posibles valores : OK, Cancel, Abort, Retry, Yes, No.
Nota : Al configurar la propiedad DialogResult de un botón, si éste estuviese asociado a un procedimiento que maneje el evento clic del botón, primero se ejecuta dicho procedimiento, luego se guarda el resultado y se cierra automáticamente el diálogo.
 4. Recuperando el resultado del cuadro de diálogo
Una vez que se ha cerrado el cuadro de diálogo es necesario recuperar desde el formulario principal el resultado de la interacción del usuario en el diálogo, es decir qué comando (botón) eligió el usuario.
Para recuperar el resultado del cuadro de diálogo se puede realizar de dos formas :

  • Mediante la propiedad DialogResult del formulario principal
  • Mediante el valor devuelto por el método ShowDialog del formulario que se mostró como cuadro de diálogo.
Ejemplo08 
Este ejemplo tiene por objetivo enseñar a trabajar con formularios de tipo cuadros de dialogos y realizar tareas como creación, visualización y configuración de propiedades para guardar y recuperar el resultado del diálogo.
El ejemplo trabaja con 3 formularios, el formulario inicial permite llevar los datos personales y tiene 3 botones, los dos primeros muestran dos cuadros de diálogos donde se ingresan los datos académicos y laborales , el tercer botón permite ver en un cuadro de mensaje el resumen de la situación de la persona de acuerdo a los datos ingresados. Para lo cual debemos realizar los siguientes pasos :
1. Crear una Aplicación Windows en Visual Basic .NET llamada Ejemplo08.  
En mi caso Utilizaré el Visual Studio 2012

2. En la ventana del explorador de soluciones seleccionar el archivo Form1 y en la ventana de propiedades cambiar la propiedad FileName a frmPersonal.


3. En el diseñador de formularios Windows, arrastrar 2 controles Label, 2 TextBox y 3 Button desde el ToolBox hacia el formulario y configurar las propiedades, tal como se muestra en la siguiente tabla :




Objeto Propiedad Valor
Form1 Name FrmPersonal

Text Datos Personales

FormBorderStyle FixedSingle

MaximizeBox False

MinimizeBox False

StartPosition CenterScreen

Size Width=300, Height=200
Label1 Name lblname

Text Nombre

AutoSize True

Location x=32, y=32
Label2 Name lbldirección

Text Dirección

AutoSize True

Location x=32, y=72
TextBox1 Name txtNombre

Location x=104 , y=28

Size Width=150 , Height=20
TextBox2 Name txtDireccion

Location x=104 , y=68

Size Width=150 , Height=20
Button1 Name btnAcademico

Text Académico

Cursor Hand

Location x=35, y=116

Size Width=69, Height=23
Button2 Name btnLaboral

Text Laboral

Cursor Hand

Location x=111, y=116

Size Width=69, Height=23
Button3 Name btnResumen

Text Resumen

Cursor Hand

Location x=187, y=116

Size Width=69, Height=23



4. Añadir un segundo formulario; del menú "Proyecto" elegir "Agregar Windows Forms", escribir como nombre frmAcademico y clic en "Agregar".



5. En el diseñador de formularios Windows, arrastrar 3 controles Label, 3 TextBox y 2 Button dese el ToolBox hacia el formulario y configurar las propiedades, tal como se muestra en siguiente cuadro.


 


Objeto Propiedad Valor
FrmAcademico Text Datos Académicos

FormBorderStyle FixedDialog

MaximizeBox False

MinimizeBox False

ControlBox False

Size Width=300, Height=220
Label1 Name lblNombre

Text Nombre:

AutoSize True

Location x=32, y=24
Label2 Name lblInstitución

Text Institución:

AutoSize True

Location x=32, y=64
Label3 Name lblCarrera

Text Carrera:

AutoSize True

Location x=32, y=104
TextBox1 Name txtNombre

Location x=104 , y=20

Size Width=150 , Height=20

ReadOnly True
TextBox2 Name txtInstitucion

Location x=104 , y=60

Size Width=150 , Height=20
TextBox3 Name txtCarrera

Location x=104 , y=100

Size Width=150 , Height=20
Button1 Name btnAceptar

Text Aceptar

Cursor Hand

Location x=36, y=148

Size Width=76, Height=23

DialogResult OK
Button2 Name btnCancelar

Text Cancelar

Cursor Hand

Location x=180, y=148

Size Width=76, Height=23

DialogResult Cancel


6. Añadir un tercer formulario; del menu "Proyecto" elegir "Agregar Windows Forms", escribir como nombre frmLaboral y clic en "Agregar".



7. En el diseñador de formularios Windows, arrastrar 3 controles Label, 3 TextBox y 2 Button desde el ToolBox hacia el formulario y configurar las propiedades, tal como se muestra en el siguiente cuadro:



Objeto Propiedad Valor
FrmLaboral Text Datos Laborales

FormBorderStyle FixedDialog

MaximizeBox False

MinimizeBox False

ControlBox False

Size Width=300, Height=220
Label1 Name lblNombre

Text Nombre:

AutoSize True

Location x=32, y=24
Label2 Name lblEmpresa

Text Empresa:

AutoSize True

Location x=32, y=64
Label3 Name lblCargo

Text Cargo:

AutoSize True

Location x=32, y=104
TextBox1 Name txtNombre

Location x=104 , y=20

Size Width=150 , Height=20

ReadOnly True
TextBox2 Name txtEmpresa

Location x=104 , y=60

Size Width=150 , Height=20
TextBox3 Name txtCargo

Location x=104 , y=100

Size Width=150 , Height=20
Button1 Name btnAceptar

Text Aceptar

Cursor Hand

Location x=36, y=148

Size Width=76, Height=23

DialogResult OK
Button2 Name btnCancelar

Text Cancelar

Cursor Hand

Location x=180, y=148

Size Width=76, Height=23

DialogResultCancel

8. Una vez diseñado los 3 formularios regresar a frmPersonal dando doble clic sobre el nombre en la ventana del explorador de soluciones.

9. En la ventana explorador de soluciones dar clic en el botón "Ver Código".



10. Declarar 2 variables lógicas como a continuación se muestra :


11. Crear un procedimiento llamado MostrarFormularioAcademico que maneje el evento "Click" del botón "btnAcadémico".


12. Crear un procedimiento llamdo MostrarFormularioLaboral que maneje el evento "Click" del botón "btnLaboral".

Observación: A pesar de que los dos procedimientos manejadores de eventos anteriores tienen que realizar acciones parecidas, en el segundo caso se usa una sintaxis directa para mostrar el diálogo y si el resultado es OK establecer la variable lógica en True, sino en False.

13. Crear un procedimiento llamado MostrarCuadroResumen que maneje el evento "Click" del botón "btnResumen".

Observación: En el procedimiento manejador de evento anterior, para realizar la concatenación no se está usando el operador & o +, lo más conveniente es trabajar con el objeto StringBuilder para manejar cadenas.

14. Configurar frmPersonal como el formualrio de inicio

15. Grabar y ejecutar la aplicación pulsando F5.


16. Ingresar un nombre y una dirección en el formulario de Datos Personales y clic en el botón "Académico", entonces se mostrará el cuadro de diálogo de Datos Académicos, similar a la siguiente imágen.



17. En el cuadro de diálogo si estudia algo, ingresar el nombre de la institución donde estudia y la carrera que sigue, luego "Aceptar" y sino "Cancelar".

18. Regresando al formulario de Datos Personales, clic en el botón "Laboral", entonces se mostrará el cuadro de diálogo de Datos Laborales, similar a la siguiente imágen.



19. En el cuadro de diálogo si trabaja en alguna empresa ingresar el nombre de la empresa y el cargo que ocupa, luego "Aceptar" y sino "Cancelar".

20. Regresando al formulario de Datos Personales, clic en el botón "Resumen", entonces se mostrará el cuadro de mensaje de Resumen de Datos, similar a la siguiente imágen.



Observación: En el cuadro de mensaje anterior aparece las variables Estudia y Trabaja en True porque en ambos diálogos se eligió el botón "Aceptar".

21. Finalmente, cierre el formulario de Datos Personales para finalizar la aplicación.


Adjunto los proyectos en los siguientes enlaces:

Ejemplo08 - Descargar

Espero haber ayudado en algo. Hasta la próxima oportunidad!  


No hay comentarios:

Publicar un comentario en la entrada