PRCTICA DE LENGUAJE DE PROGRAMACINTema: 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

Ventana del programa

Prof. Simn Quispeluza M.

IESPP-Jos Jimnez Borja

2. Antes de proseguir hagamos un anlisis del cdigo generado por WindowBuilder:import java.awt.EventQueue; import javax.swing.JFrame; public class Aplicacion { private JFrame frame;

AWT y SWING son bibliotecas grficas. Swing es mejorada y se basa en awt. 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?:..................................................................................................................... IESPP-Jos Jimnez Borja

Prof. Simn Quispeluza M.

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