PRCTICA DE LENGUAJE DE PROGRAMACIN

Tema: Interfaces grficas

1. Eclipse 3.7 Indigo (Eclipse IDE for Java Developers) incorpora el plugin WindowBuilder, que sirve
para construir interfaces grficas en java de manera rpida y fcil. A continuacin realiza los pasos:
a) Inicia un nuevo proyecto con nombre Visor: Men Archivo > Nuevo > Proyecto Java
b) Ahora en el proyecto Visor agrega el siguiente elemento: Men Archivo > Nuevo > Otras >
WindowBuilder > Swing Designer > Aplication Window. Con nombre Aplicacin.
c) El resultado ser similar a:

Observe que hay dos tipos de vistas: Cdigo y Diseo. Si escoges Diseo se apreciar algo como esto:

Paleta con los controles

que se insertan en la
ventana

Prof. Simn Quispeluza M.

Ventana del
programa

IESPP-Jos Jimnez Borja

2. Antes de proseguir hagamos un anlisis del cdigo generado por WindowBuilder:

import java.awt.EventQueue;
import javax.swing.JFrame;

AWT y SWING son bibliotecas grficas. Swing es

mejorada y se basa en awt.

public class Aplicacion {

private JFrame frame;

La clase JFrame representa la ventana del principal

del programa y funciona como un contenedor de
otros objetos grficos como mens, controles, etc

// Lanzar el programa
public static void main(String[] args) {
InvokeLater pone en la cola de
EventQueue.invokeLater(new Runnable() {
eventos de ejecucin un objeto con
public void run() {
interfaz Runnable
La clase
try {
EventQueue
Aplicacion window = new Aplicacion();
almacena los
window.frame.setVisible(true);
eventos que llegan
} catch (Exception e) {
aun contenedor
e.printStackTrace();
provenientes de
}
sus componentes
}
try y catch se utilizan para detectar y procesar
});
posibles errores que pueden ocurrir durante la
}
ejecucin del programa.
// Constructor
public Aplicacion() {
initialize();
}

// Inicializar contenido del frame

Crea la ventana asignndole
private void initialize() {
valores iniciales como tamao, etc.
frame = new JFrame();
frame.setBounds(100, 100, 450, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

3. Procederemos a insertar una barra de mens para ello realiza:

a) En la Paleta seccin Menu escoge JMenuBar y haz clic en parte superior de la ventana (rea
barra men)
b) Ahora escoge un objeto JMenu e insrtalo en la barra creada, asignndole el nombre Archivo.
c) Luego selecciona un JMenuItem y lo insertas en el men Archivo con el nombre Abrir.
d) De manera similar inserta otra opcin en el men Archivo llamada Guardar.
e) Despus inserta un separador que se halla en la Paleta > Components > Separator
f) Como ltima opcin del men Archivo inserta una opcin llamada Salir.
g) Finalmente inserta un nuevo Men en la barra llamndolo Ayuda con una nica opcin llamada
Acerca...
h) El resultado ser:

Prof. Simn Quispeluza M.

IESPP-Jos Jimnez Borja

4. Activa la Vista Cdigo y observa que en el mtodo Initialize de la Aplicacin se han agregado varias
lneas de cdigo. Usando lenguaje apropiado de Objetos deduce y explica las siguientes instrucciones:

JMenuBar menuBar = new JMenuBar(); ..............................................

frame.setJMenuBar(menuBar);

..............................................

..................................................................................
..................................................................................

JMenu mnNewMenu = new JMenu("Archivo");

.........................................

menuBar.add(mnNewMenu);

.........................................

..................................................................................
..................................................................................

JMenuItem mntmAbrir = new JMenuItem("Abrir");

...................................

mnNewMenu.add(mntmAbrir);

...................................

.................................................................................

5. Si ejecutas la aplicacin se observa

que muestra una ventana con los
mens definidos y que al escoger
cualquier opcin no se realiza
absolutamente nada. Es necesario
entonces programar las opciones
del men para que realicen lo que
queremos. La primera que vamos a
implementar es la opcin Salir, para
ello realiza:
a) En vista Diseo y apuntando a
la opcin Salir invoca el men
contextual (clic botn derecho).
b) En
el
men
contextual
selecciona Add Event Handler
> action > actionPerformed
c) En vista Cdigo en el mtodo
actionPerformed agrega:
mntmSalir.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
System.exit(0); //agrega esta lnea
}
});

Prof. Simn Quispeluza M.

IESPP-Jos Jimnez Borja

6. En todo programa se necesitan variables (objetos en el caso de la POO) que existan permanentemente
mientras dure la ejecucin del programa. Estos objetos se definen, normalmente, como propiedades en
la clase principal (la que tiene el mtodo main que es el punto de entrada al programa), as por
ejemplo para nuestro Visor adems del frame necesitaremos los siguientes objetos, por ello declralos
como propiedades de la clase Aplicacion:
private
private
private
private

JScrollPane scroll;
JLabel etiqueta;
JFileChooser dlgArchivo;
BufferedImage imagen;

//
//
//
//

para desplazar en imagenes grandes

en su propiedad icon se mostrar la imagen
Cuadro de dilogo estandar
usado para guardar la imagen en disco

7. Modificar las primeras lneas de cdigo del mtodo initialize agregando:

frame = new JFrame();
// Crear objetos (agregar esto)
scroll = new JScrollPane();
etiqueta = new JLabel();
dlgArchivo = new JFileChooser();

8. A continuacin de las lneas anteriores modificar y/o agregar las siguientes instrucciones:
// fijar tamao del frame a 1/4 de la pantalla
frame.setBounds(0, 0,Toolkit.getDefaultToolkit().getScreenSize().width / 2,
Toolkit.getDefaultToolkit().getScreenSize().height / 2);
// poner el frame en el centro de la pantalla
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Terminar prg si se cierra el frame
// aadir componente en el contenedor
frame.getContentPane().add(scroll);
scroll.setViewportView(etiqueta); // vincular la etiqueta (y su contenido) con el scroll

Nota:
En el mtodo initialize slo deber tener las instrucciones descritas en los puntos 7. y 8. y todas
aquellas referidas a la construccin de la barra de mens, opciones y manejadores de eventos.
Cualquier otra instruccin comentarlas con //.
Prueba ejecutar el programa y verifica que funcione adecuadamente.
Responder:
Que representa Toolkit? : .................................................................................................................
..........................................................................................................................................................

El mtodo setLocationRelativeTo permite :.........................................................................................

..........................................................................................................................................................

Qu significa y representa width y height?:..................................................................................

..........................................................................................................................................................

Qu representa null?:.....................................................................................................................

Prof. Simn Quispeluza M.

IESPP-Jos Jimnez Borja

9. Ahora nos centraremos en la gestin de eventos. Para ello y de forma anloga al paso 5. agrega un
oyente de eventos (Add Event Handler > action > actionPerformed) para la opcin Abrir del men
archivo y codificar el mtodo actionPerformed como se muestra a continuacin:
public void actionPerformed(ActionEvent arg0) {
dlgArchivo.setDialogTitle("Abrir Imagen"); // fijar ttulo al JFileChooser
// filtrar slo archivos .jpg .png .gif
if (dlgArchivo.getFileFilter().getDescription()!= "Imagenes")
// slo una vez
dlgArchivo.setFileFilter(new FileNameExtensionFilter("Imagenes", "jpg", "png", "gif"));
if (dlgArchivo.showOpenDialog(frame) == JFileChooser.APPROVE_OPTION) {
try {
// intentar cargar imagen
imagen = ImageIO.read( new File(dlgArchivo.getSelectedFile().getPath()) );
} catch (IOException error) { /* si ocurre error aqu se le trata */ }
if (imagen != null) {
// se pudo cargar la imagen?
// poner nombre en la barra de ttulo del frame
frame.setTitle(dlgArchivo.getSelectedFile().getPath());
//cargar archivo de imagen en la etiqueta
etiqueta.setIcon(new ImageIcon(dlgArchivo.getSelectedFile().getPath()));
mntmGuardar.setEnabled(true);
// hacer disponible la opcion Guardar
}
else
JOptionPane.showMessageDialog(frame, "No se pudo cargar la imagen", "Aviso",
JoptionPane.INFORMATION_MESSAGE);
}
}

Observaciones:
An no probar la ejecucin del programa, hay que hacer algunos ajustes.
Mover y modificar la instruccin de creacin del objeto JMenuItem Guardar de tal forma que
est antes de la creacin de la opcin Abrir y debe quedar como sigue:
final JMenuItem mntmGuardar = new JmenuItem("Guardar");

Y como instruccin siguiente a la anterior, inhabilitar la opcin Guardar, ello se logra con:
mntmGuardar.setEnabled(false);

Hacer los cambios y corrija posibles errores hasta Ejecutar correcamente el programa. Luego
analice el cdigo, haga pequeos cambios de ser necesario para entenderlo as como objetos,
propiedades y mtodos. Luego describa:
dlgArchivo.showOpenDialog(frame):

...................................................................................................

..............................................................................................................................................................
setFileFilter: .........................................................................................................................................
JFileChooser.APPROVE_OPTION:
ImageIO.read:

.......................................................................................................

.......................................................................................................................................

..............................................................................................................................................................
try {} catch {} : .......................................................................................................................
setIcon: ................................................................................................................................................
dlgArchivo.getSelectedFile().getPath():

................................................................................................

..........................................................................................................................................................
Prof. Simn Quispeluza M.

IESPP-Jos Jimnez Borja

10. De manera complementaria implementar la opcion Guardar con el siguiente cdigo:

public void actionPerformed(ActionEvent arg0) {
dlgArchivo.setDialogTitle("Guardar Imagen");
if (dlgArchivo.showSaveDialog(null) == JFileChooser.APPROVE_OPTION) {
String[] formatos = { "jpg", "png", "gif" };
Object opcion = JOptionPane.showInputDialog(null,
"Seleccione un formato:", "",
JOptionPane.QUESTION_MESSAGE, null, // icono. no hay.
formatos, // se puede pasar un array
formatos[1]); // opcion por defecto
if (opcion != null) { // acept un formato?
try { // guardar imagen en archivo
ImageIO.write(imagen, opcion.toString(), new File(
dlgArchivo.getSelectedFile().getPath() + "."
+ opcion.toString()));
} catch (IOException e1) { /* tratar error */ }
}
}
}

Analice el cdigo y explique. Detalle por ejemplo qu realiza o representa cada lnea de cdigo.

Salida del Visor creado

Prof. Simn Quispeluza M.

IESPP-Jos Jimnez Borja