Formularios MDI
MDI: Definición:
MDI significa en inglés Múltiple Document Interfaz y en español Interfaz de múltiples documentos y sirve para desplegar varios formularios a partir de un Formulario principal.
La contraparte del MDI, es el SDI que es un Single Document Interfaz, es decir, cuando el proyecto es un solo formulario o única interfaz.
En un MDI hay un formulario principal ó formulario Padre que contendrá a los formularios secundarios o formularios hijos.
En este libro se enseñan dos métodos usando dos ejemplos para crear MDI y ambos tienen igual resultado.
Ejercicio MDI
- Abra Visual Basic para crear un nuevo proyecto y asígnele el nombre Formulario MDI
- Al formulario que se despliega cámbiele la propiedad Name a FrmPrincipal
![5900 5900](/uploads/cursos/6674/28029_5900.png)
Y la propiedad IsMdiContainer cámbiela a True
Con la acción anterior, le da la categoría de Padre al formulario principal.
![5901 5901](/uploads/cursos/6674/28030_5901.png)
Al hacer esto, el formulario se vuelve de un color más oscuro que el tradicional.
![5902 5902](/uploads/cursos/6674/28031_5902.es.png)
- Agregue los formularios hijos dando clic derecho en el proyecto Formulario MDI en el Explorador de soluciones
![5903 5903](/uploads/cursos/6674/28033_5903.png)
Y se desplegará el siguiente menú contextual.
![5904 5904](/uploads/cursos/6674/28034_5904.es.png)
- Elija Agregar Windows Forms
![5905 5905](/uploads/cursos/6674/28032_5905.png)
Luego se mostrará la siguiente ventana ya conocida por usted, en donde después de seleccionar Windows Forms, le da clic en Agregar; pero antes debe elegir el nombre del nuevo formulario; En este ejemplo déjelo como está, Form1.Vb que dicho sea de paso en la siguiente imagen aparece como Form4.Vb por que es el tercer formulario que se agrega al proyecto.
![5907 5907](/uploads/cursos/6674/28037_5907.es.png)
Observe que en el explorador de soluciones ya aparece el formulario agregado.
![5908 5908](/uploads/cursos/6674/28036_5908.png)
- Agregue otro formulario al proyecto pero para conocer otra forma de hacerlo, hágalo desde el menú Proyecto ---> Agregar Windows Forms…
![5909 5909](/uploads/cursos/6674/28038_5909.es.png)
Agregue un formulario más, usando uno de los dos métodos que se han explicado en este libro.
- Asegúrese que la propiedad IsMdiContainer de los formularios 2,3 y 4 esté en False y la del formulario uno en True. Esto permitirá que los primeros queden como contenido (hijos) y el segundo como contenedor (padre)
- Con el Formulario 1 desplegado, agregue un control Menú Strip y configúrelo (ya sabe como) para que quede como en la siguiente imagen.
![5910 5910](/uploads/cursos/6674/28039_5910.png)
Al dar clic en los menús correspondientes se mostrarán los formularios 2,3 y 4. El formulario uno no se programó en el menú por que es el formulario contenedor o principal.
- Dé doble clic en la pestaña del menú Formulario 2 para abrir el editor de código, y escriba las siguientes instrucciones.
Form2.Show()
- Clic en la pestaña Formulario 3 y escriba en el editor de código lo siguiente: Form3.show() y en la pestaña Formulario 4 al abrir el editor de código, escriba la siguiente instrucción: Form4.show()
El código completo quedará así:
![5911 5911](/uploads/cursos/6674/28052_5911.png)
- Antes de probar el programa y para diferenciar los formularios configure la propiedad BackColor del formulario 2 en Rojo, del formulario 3 en Azul y la del Formulario 4 en Aqua.
- Amplié el tamaño del Formulario 1 para que sea el más grande, por que recuerde que es el formulario contenedor.
- Por último configure la propiedad StartPosition de todos los formularios en CenterScreen lo que hará que al ejecutar el programa los formularios aparezcan en el centro del monitor.
![5912 5912](/uploads/cursos/6674/28040_5912.png)
- Ejecute el programa y observe los resultados al dar clic en los menús correspondientes.
![5913 5913](/uploads/cursos/6674/28041_5913.es.png)
![5914 5914](/uploads/cursos/6674/28042_5914.es.png)
![5915 5915](/uploads/cursos/6674/28043_5915.es.png)
Si todo le salió bien, entonces guarde todo el proyecto, sino, pues revise para ver si hizo todos los pasos anteriores o identificar cualquier error.
A continuación haremos otro ejercicio en donde se crea un formulario múltiple pero usando otro método.
Ejercicio MDI
- Cree un nuevo Proyecto y asígnele el nombre MDI Pictures
- Clic derecho en el proyecto, en el explorador de soluciones o en el menú proyecto y seleccione Agregar nuevo elemento y se abrirá la ventana como la de la imagen siguiente, en donde elegirá Formulario primario MDI
![5916 5916](/uploads/cursos/6674/28045_5916.es.png)
![5917 5917](/uploads/cursos/6674/28044_5917.png)
- Al seleccionarlo, observe que al proyecto se agregó un formulario con menús predeterminados…
![5918 5918](/uploads/cursos/6674/28046_5918.es.png)
- Dé clic derecho en cada uno de los menús y elimínelos o bórrelos por que lo comenzaremos de nuevo.
El formulario quedará más o menos así:
![5919 5919](/uploads/cursos/6674/28047_5919.png)
- Dé clic en el área más clara del formulario para que se muestre la casilla de escritura del título del menú.
![5920 5920](/uploads/cursos/6674/28048_5920.png)
- Cree 5 menús como en la siguiente imagen…
![5921 5921](/uploads/cursos/6674/28049_5921.es.png)
- Ahora ejecute el programa y verá que le genera una excepción ó error; Es por que quedó el código sin utilizar de los menús predeterminados que eliminamos.
- En el editor de código elimine las sentencias siguientes...
![5922 5922](/uploads/cursos/6674/28050_5922.png)
Como ve, no es difícil identificar donde está el error por que el programa nos lo dice, marcando con líneas azules las sentencias erróneas, pero en este caso borre toda la sección, por que no se utilizará.
- Cuando hay varios formularios en un proyecto es necesario decirle al programa con que formulario iniciará cuando el usuario abra la aplicación; En el menú Proyecto seleccione Propiedades…
![5923 5923](/uploads/cursos/6674/28051_5923.es.png)
- En la ventana que se despliega, Asegúrese que está seleccionado el Submenú Aplicación y si no es así, entonces dé clic en Aplicación…
![5924 5924](/uploads/cursos/6674/28053_5924.png)
- Después de dar clic en Aplicación se abre la siguiente pantalla en donde debe buscar donde dice formulario de inicio y dar clic en la pestaña para abrir una ventanita donde están todos los formularios del proyecto actual.
![5925 5925](/uploads/cursos/6674/28058_5925.es.png)
- Como lo que se desea es que a partir del formulario principal o padre, acceder a los otros formularios, entonces seleccionemos MDIParent1
![5926 5926](/uploads/cursos/6674/28054_5926.png)
![5927 5927](/uploads/cursos/6674/28055_5927.png)
- Ahora vuelva al IDE y en cada opción del menú del formulario principal escriba el código correspondiente.
- El código que escribirá entre Private Sub y End Sub de cada menú es el siguiente.
Form1.MdiParent = Me
Form1.Show()
Lo que irá cambiando será el número del formulario: Form2.Show(), Form3.Show, etc.
Este código es para el menú 1 y escribirá lo mismo para el formulario 2,3 y 4
La primera línea es para que el formulario hijo se abra en una ventana dentro del formulario principal. Puede no colocar la instrucción Form1.MdiParent = Me y el programa siempre se ejecutará, pero el resultado será que el formulario hijo se abrirá con sus bordes fuera del formulario principal.
Pruebe ambas formas para ver la diferencia.
![5928 5928](/uploads/cursos/6674/28057_5928.es.png)
- Si ejecuta el programa en este momento, los formularios aparecerán vacíos, pero puede agregar un control PictureBox y como ya se le explicó elija una imagen de las que tiene en su PC para cada formulario que no sea el Principal.
- Configure la propiedad Dock del PictureBox en Fill para que la imagen se muestre en todo el formulario.
![5929 5929](/uploads/cursos/6674/28056_5929.png)
- En este ejercicio, se eligieron imágenes de acuerdo a los recursos disponibles en la pc del autor.
Explore cada menú y según el menú elegido se mostrarán formularios diferentes pero siempre dentro del formulario Principal.
![5930 5930](/uploads/cursos/6674/28059_5930.es.jpg)
![5931 5931](/uploads/cursos/6674/28061_5931.es.png)
![5932 5932](/uploads/cursos/6674/28060_5932.es.png)
Ya es hora de guardar el proyecto o continuar haciendo pruebas. Total, eso depende de su tiempo, motivación y entusiasmo.