Todo
programa tiene una interfaz gráfica de usuario (GUI) la cual permite interactuar
con este de forma sencilla. La interfaz gráfica de usuario consta de la ventana
principal, cuadros de diálogo, botones, cuadros de texto, etc.
Según
el tipo de interfaz que tenga el programa, las aplicaciones se suelen dividir
en dos tipos: Aplicaciones SDI y Aplicaciones MDI.
Aplicaciones SDI (Single Document
Interface):
SDI
se puede traducir como interfaz de documento único. Esto quiere decir que las
aplicaciones SDI solo pueden mostrar el contenido de un documento a la vez.
Un
ejemplo práctico de aplicación SDI es el bloc de notas de Windows. Si en el
bloc de notas quieres escribir un nuevo documento, tienes que cerrar antes el
documento con el que estás trabajando, ya que este programa no admite el
manipular varios escritos a la vez.
Hasta
el momento, las aplicaciones de manejo de documentos que hemos realizado han sido de tipo SDI.
Aplicaciones MDI (Multiple Document
Interface):
MDI
se puede traducir como interfaz de múltiples documentos. Esto quiere decir que
las aplicaciones MDI pueden mostrar varios documentos a la vez.
Un
ejemplo práctico de aplicación MDI es el programa de retoque fotográfico
Photoshop. En él, el usuario puede abrir varias fotos y trabajar con todas
ellas.
Las
aplicaciones MDI normalmente constan de una ventana principal, la cual puede
contener otras ventanas interiores. Cada documento que se abre aparece en una
ventana interior.
En
este ejercicio guiado, se explicarán las nociones básicas para crear una
aplicación MDI en Java con NetBeans.
EJERCICIO GUIADO Nº 1:
Se
pretende crear un visor de imágenes MDI, es decir, que permita la visualización
de varias imágenes a la vez. El programa constará de una ventana principal con
un menú. Las opciones de este menú permitirán al usuario abrir varias imágenes
y cerrarlas a su gusto.
Al
ser un proyecto MDI, las imágenes se abrirán en ventanas internas. Estas
ventanas internas tendrán que ser diseñadas de forma adecuada.
Para
crear este proyecto, tendremos que seguir tres pasos generales:
- Diseño de la ventana principal.
- Diseño de las ventanas internas.
- Programación de la ventana principal / internas.
Diseño
de la ventana principal:
- Crea un nuevo proyecto. El nombre del proyecto será VisorDeFotos.
Añade un paquete llamado paquetePrincipal. Dentro de
dicho paquete añade un JFrame llamado VentanaPrincipal:
- Añade a la ventana principal una barra de menús (nómbrala barraMenus),
con una única opción Archivo, que contenga a su vez
las siguiente opciones:
Asigna los siguientes nombres a cada elemento del
menú:
- Establece un layout de tipo BorderLayout al JFrame.
Recuerda que este tipo de distribución divide la ventana en cinco zonas:
norte, sur, este, oeste y centro.
- En la zona central de la ventana principal colocaremos un panel,
pero no será un JPanel, como siempre, sino otro
tipo de panel. Debes colocar un panel del tipo JDesktopPane:
Este tipo de panel es usado como contenedor de las
ventanas internas de una aplicación MDI. En la versión de NetBeans que
actualmente uso este tipo de panel se muestra de color negro, para distinguirlo
de los paneles normales, por eso, cuando añadas el panel al JFrame este quedará
así:
- Cámbiale el nombre al JDesktopPane
y asígnale el nombre panelInterno:
- Si ejecutas el programa ahora, verás que la ventana sale reducida
al mínimo tamaño posible. Esto lo vamos a evitar haciendo que la ventana
aparezca maximizada al ejecutarse el programa. Para ello, acude al método constructor
del JFrame y programa lo
siguiente:
Como ves, en el método constructor se llama a un
método configuracionVentana y en este método se maximiza a la ventana.
Diseño de las ventanas internas:
Se
pretende que cuando se abra una imagen, el programa muestre una ventana interna
que contenga la imagen y nada más. La barra de título de esta ventana interna
contendrá la ruta de la imagen.
Para
diseñar la ventana interna de la aplicación, sigue los pasos que se indican a
continuación:
- Una ventana interna de una aplicación MDI es un objeto de la clase JInternalFrame.
Será necesario añadir esta clase al proyecto. Para ello, haz clic con el botón
derecho sobre el paquetePrincipal y elige Nuevo à Otro.
- Luego elige Swing GUI Forms y dentro de
esta categoría JInternalFrame Form.
- El nombre que le pondremos a este tipo de formulario será el de VentanaInterna.
- Si observas la ventana de proyecto, verás que ahora tenemos dos
clases: la ventana principal, y la ventana interna. Ahora diseñaremos la
ventana interna, para ello, haz doble clic sobre VentanaInterna.
- Como se dijo anteriormente, las ventanas internas mostrarán
simplemente la imagen que se abra. Para ello, solo hace falta introducir
una etiqueta (JLabel) que será la que contenga la imagen. Esta etiqueta
debe ocupar toda la ventana, no tendrá ningún texto dentro, y su nombre
será etiImagen.
La etiqueta se llamará etiImagen.
Y ocupará todo el JInternalFrame.- En los post anteriores, se ha hablado de la programación orientada
a objetos, y se ha comentado que los objetos poseen propiedades. Estas
propiedades son básicamente variables globales internas. Para poder
acceder y modificar a estas propiedades, es necesario programar métodos set.
Pues bien, la etiqueta etiImagen de la clase VentanaInterna,
no es mas que una propiedad de la ventana interna, y para poder trabajar con
ella, será necesario programar un método set
que permita modificar la etiqueta a nuestro antojo.
Básicamente, este método set debe ser capaz de
introducir en la etiqueta una imagen. Haremos que este método reciba como
parámetro la ruta de la imagen a mostrar.
- Así pues, entra en la zona de código de la VentanaInterna y
añade después del método constructor el siguiente método:
- En la programación MDI, será habitual crear métodos para poder
acceder a los distintos elementos de la ventana interna (etiquetas,
cuadros de texto, etc) En otras ocasiones, tendremos que crear métodos get
para obtener información de las ventanas internas. Es algo muy similar a
la programación de diálogos propios que se vio en entradas anteriores.
- Bien, con la programación de este método de acceso a la etiqueta de
la ventana interna, hemos terminado con el diseño de esta ventana, ahora
empezaremos a programar la ventana principal. Vuelve a ella haciendo doble
clic sobre la VentanaPrincipal en la zona de proyectos:
Programación de la ventana
principal:
Se
pretende ahora programar la opción Abrir del menú de forma que se elija el fichero de imagen a mostrar y se
muestre este en una ventana interna.
La
opción Cerrar del menú permitirá cerrar la ventana interna activa en
un momento determinado.
Sigue
los pasos que se describen a continuación:
- Ya estamos preparados para programar las opciones del menú.
Empezaremos por la opción Abrir. Accede al actionPerformed
de la opción Abrir y programa lo siguiente:
La opción Abrir se encargará de abrir un
fichero de imagen y mostrarlo en una ventana interna del programa. Lo primero
que hace esta opción es mostrar el cuadro de diálogo Abrir, que se usa para
indicar el fichero que se quiere abrir.
Se crea un objeto del tipo JFileChooser a través de
la línea:
JFileChooser abrir =
new JFileChooser();
Luego se le da la orden de que muestre el cuadro de
diálogo Abrir. La variable boton recoge el botón pulsado por el
usuario (Aceptar / Cancelar):
int boton =
abrir.showOpenDialog(null);
Luego, a través de un if, compruebo si se ha
pulsado el botón Aceptar:
if (boton ==
JFileChooser.APPROVE_OPTION) {
}
Dentro de este if tendremos que programar la acción
correspondiente a abrir la imagen y mostrarla en pantalla. Vamos a ello.
- Programa dentro del if anterior lo siguiente. El
código se comentará a continuación:
Atento a este código, porque define la creación de
ventanas internas, conteniendo la imagen elegida para mostrar. Es el cerebro
del programa.
La primera instrucción, crea un objeto llamado vi
de la clase VentanaInterna.
VentanaInterna vi =
new VentanaInterna();
Lo siguiente que se hace con el objeto vi
creado, es definir sus características como ventana. Concretamente se decide
que sea una ventana con posibilidad de cambiar de tamaño (setResizable), una
ventana que pueda ser maximizada (setMaximizable), una ventana que
pueda ser minimizada (setIconifiable) y finalmente que
pueda ser cerrada (setClosable)
vi.setResizable(true);
vi.setMaximizable(true);
vi.setIconifiable(true);
vi.setClosable(true);
Una vez definidas dichas características de la
ventana interna, esta se añade al panel interno de la ventana principal, al que
le dimos el nombre panelInterno.
panelInterno.add(vi);
Ahora hay que introducir la imagen elegida dentro
de la etiqueta de la ventana. Primero hay que recoger la ruta del fichero de
imagen elegido en el cuadro de diálogo abrir.
String ruta =
abrir.getSelectedFile().toString();
Ahora aprovechamos el método setImagen que programamos
oportunamente dentro de la clase VentanaInterna para situar dicha
imagen dentro de la etiqueta.
vi.setImagen(ruta);
Colocamos la ruta de la imagen en la barra de
título de la ventana interna:
vi.setTitle(ruta);
Finalmente hacemos visible la ventana interna.
vi.setVisible(true);
- Ejecuta el programa y prueba a abrir varios ficheros de imagen.
Observa la creación de las ventanas internas.
Observa como todas tienen el mismo aspecto (una
etiqueta única en la ventana conteniendo la imagen).
Observa la posibilidad de moverlas, cambiarlas de
tamaño, maximizarlas, minimizarlas y cerrarlas.
Observa como todas las ventanas internas están
encerradas dentro de los límites del panel interno de la ventana principal:
- Continuaremos trabajando con este proyecto en el siguiente post.
Guárdalo.
CONCLUSIONES:
La programación MDI consiste en
crear aplicaciones capaces de abrir varios ficheros y mostrarlos en distintas
ventanas internas.
Una aplicación MDI cuenta con dos
elementos básicos:
- Un panel interno JDesktopPane, el cual contendrá las
ventanas internas.
- Una clase del tipo JInternalFrame, la cual definirá el
diseño de las ventanas internas.
La clase JInternalFrame que añadamos, tendrá el nombre que queramos
asignarle y nos servirá de plantilla para crear las ventanas internas de
nuestro proyecto. Esta clase podrá tener métodos internos para acceder a los
elementos de las ventanas internas.
Desde la ventana principal, se
crearán objetos de la clase ventana interna, y se definirán opciones relativas
a la posibilidad de maximizar, cerrar, minimizar, etc, dichas ventanas.
Desde la ventana principal se
usarán los métodos programados en la ventana interna para poder manejarla con
facilidad.
No hay comentarios.:
Publicar un comentario