PRÁCTICA DE LENGUAJE DE PROGRAMACIÓN Tema: Interfaces gráficas 1. Eclipse 3.7 Indigo (Eclipse IDE for Java Developers) incorpora el plugin WindowBuilder, que sirve para construir interfaces gráficas en java de manera rápida y fácil. A continuación realiza los pasos: a) Inicia Inicia un un nuevo nuevo proy proyecto ecto con nomb nombre re Visor: Menú Archivo Archivo > Nuevo > Proyecto Java b) Ahora en el proyecto Visor agrega el siguiente elemento: Menú Archivo > Nuevo > Otras > WindowBuilder WindowBuilder > Swing Designer > Aplication Window. Window. Con nombre Aplicación. c) El result resultado ado será será simi similar lar a:
Observe que hay dos tipos de vistas: Código y Diseño. Si escoges
Diseño se apreciará algo como esto:
Paleta con los controles Paleta que se insertan en la ventana
Prof. Simón Quispeluza M.
Ventan entanaa del programa
IESPP-”José Jiménez Borja”
2. Antes de proseguir hagamos un análisis del código generado por WindowBuilder: import java.awt.EventQueue; import javax.swing.JFrame;
AWT y SWING son bibliotecas gráficas. 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 gráficos como menús, controles, etc
// Lanzar el programa public static void main(String[] args) { InvokeLater pone en la cola de EventQueue.invokeLater(new Runnable() { eventos de ejecución un objeto con run() { public void interfaz Runnable La clase try { EventQueue Aplicacion window = new Aplicacion(); almacena lo s 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 }); posibl es errores que pueden ocurrir durante la } ejecución del programa.
// Constructor public Aplicacion() { initialize(); } // Inicializar contenido del frame Crea la ventana asignándole private void initialize() { valores iniciales como tamaño, etc. frame = new JFrame(); frame.setBounds(100, 100, 450, 300); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }
3. Procederemos a insertar una barra de menús para ello realiza: a) En la Paleta sección Menu escoge JMenuBar y haz clic en parte superior de la ventana (área barra menú) b) Ahora escoge un objeto JMenu e insértalo en la barra creada, asignándole 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 opción en el menú Archivo llamada Guardar. e) Después inserta un separador que se halla en la Paleta > Components > Separator f) Como última opción del menú Archivo inserta una opción llamada Salir. g) Finalmente inserta un nuevo Menú en la barra llamándolo Ayuda con una única opción llamada
Acerca... h) El resultado será:
Prof. Simón Quispeluza M.
IESPP-”José Jiménez Borja”
4. Activa la Vista Código y observa que en el método Initialize de la Aplicación se han agregado varias líneas de código. 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 aplicación se observa que muestra una ventana con los menús definidos y que al escoger cualquier opción 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 opción Salir, para ello realiza: a) En vista Diseño y apuntando a la opción Salir invoca el menú contextual (clic botón derecho). b) En el menú contextual selecciona Add Event Handler > action > actionPerformed c) En vista Código en el método actionPerformed agrega: mntmSalir.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent arg0) { System.exit(0); //agrega esta línea } });
Prof. Simón Quispeluza M.
IESPP-”José Jiménez Borja”
6. En todo programa se necesitan variables (objetos en el caso de la POO) que existan permanentemente mientras dure la ejecución del programa. Estos objetos se definen, normalmente, como propiedades en la clase “principal” (la que tiene el método main que es el punto de entrada al programa), así por ejemplo para nuestro Visor además del frame necesitaremos los siguientes objetos, por ello decláralos 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 diálogo estandar usado para guardar la imagen en disco
7. Modificar las primeras líneas de código del método initialize agregando: frame = new JFrame(); // Crear objetos (agregar esto) scroll = new JScrollPane(); etiqueta = new JLabel(); dlgArchivo = new JFileChooser();
8. A continuación de las líneas anteriores modificar y/o agregar las siguientes instrucciones: // fijar tamaño 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 // añadir componente en el contenedor frame.getContentPane().add(scroll); scroll.setViewportView(etiqueta); // vincular la etiqueta (y su contenido) con el scroll
Nota: •
•
En el método initialize sólo deberá tener las instrucciones descritas en los puntos 7. y 8. y todas aquellas referidas a la construcción de la barra de menús, opciones y manejadores de eventos. Cualquier otra instrucción comentarlas con //. Prueba ejecutar el programa y verifica que funcione adecuadamente.
Responder : •
¿Que representa Toolkit ? : ................................................................................................................. …..........................................................................................................................................................
•
El método setLocationRelativeTo permite :......................................................................................... …..........................................................................................................................................................
•
¿Qué significa y representa width y height ?:….................................................................................. …..........................................................................................................................................................
•
¿Qué representa null ?:….....................................................................................................................
Prof. Simón Quispeluza M.
IESPP-”José Jiménez Borja”
9. Ahora nos centraremos en la gestión de eventos. Para ello y de forma análoga al paso 5. agrega un oyente de eventos ( Add Event Handler > action > actionPerformed ) para la opción Abrir del menú archivo y codificar el método actionPerformed como se muestra a continuación: public void actionPerformed(ActionEvent arg0) { dlgArchivo.setDialogTitle( "Abrir Imagen"); // fijar título al JFileChooser // filtrar sólo archivos .jpg .png .gif if (dlgArchivo.getFileFilter().getDescription()!= "Imagenes") // sólo 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 título 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 : • •
Aún no probar la ejecución del programa, hay que hacer algunos ajustes. Mover y modificar la instrucción de creación del objeto JMenuItem Guardar de tal forma que esté antes de la creación de la opción Abrir y debe quedar como sigue: final JMenuItem mntmGuardar = new JmenuItem("Guardar");
•
Y como instrucción siguiente a la anterior, inhabilitar la opción Guardar, ello se logra con: mntmGuardar.setEnabled(false);
•
Hacer los cambios y corrija posibles errores hasta Ejecutar correcamente el programa. Luego analice el código, haga pequeños cambios de ser necesario para entenderlo así como objetos, propiedades y métodos. Luego describa: dlgArchivo.showOpenDialog(frame) : ...................................................................................................
.............................................................................................................................................................. setFileFilter : ......................................................................................................................................... JFileChooser . APPROVE_OPTION : ....................................................................................................... ImageIO.read : .......................................................................................................................................
.............................................................................................................................................................. try {…} catch {…} : …....................................................................................................................... setIcon: ................................................................................................................................................ dlgArchivo.getSelectedFile().getPath() : ................................................................................................
…..........................................................................................................................................................
Prof. Simón Quispeluza M.
IESPP-”José Jiménez Borja”
10. De manera complementaria implementar la opcion Guardar con el siguiente código: 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 código y explique. Detalle por ejemplo qué realiza o representa cada línea de código.
Salida del Visor creado
Prof. Simón Quispeluza M.
IESPP-”José Jiménez Borja”
