I : JBuilder, Layout y Eventos Diseño de Interfaces de Ejercicio Usuario Ejercicio I Jbuilder, Diseño Layout y Eventos http://giig.ugr.es/ ˜mgea/docencia/diu/diu.html Ultima actualización: 19/Nov/2002 Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos 1 Ejercicio I : JBuilder, Layout y Eventos 1. JBUILDER Creación de aplicación Datos del proyecto Paquete y clases Ventana del interfaz Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 2 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 1. JBUILDER Diseño preliminar Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 3 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 2. JBUILDER: Creación del menú JMenuItem Separador Submenú Borrar menú Desactivado Verificación Selector (exclusivo) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 4 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 3. Diseño (layout) CENTER EAST WEST NORTH SOUTH FlowLayout BorderLayout XYLayout (null) jTextField (jTF_nombre) jTextField (jTF_carnet) jTextField (jTF_domic) jComboBox (jCB_prov) jTextField (jTF_fnac) jTextField (jTF_tlfn) jjCheckBox (jCB_estud) jButton (jB_foto) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 5 jButton (jB_aceptar/ jB_anular) © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 4. Eventos Opción de salir • Asociar código (mediante eventos) void jMenuItem4_actionPerformed(ActionEvent e) { System.exit(0); } Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 6 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 4. Eventos Creación de un portapapeles (copiar/pegar) // Variable interna String portapapeles = "*"; void jMenuItem5_actionPerformed(ActionEvent e) { portapapeles = jTF_nombre.getText(); } void jMenuItem6_actionPerformed(ActionEvent e) { jTF_nombre.setText(portapapeles); // ubicación } Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 7 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 4. Eventos (cont.) Ejercicio: Gestionar los eventos de modificación de color de un botón cuando pasa por encima el ratón Eventos: mouseEntered mouseExited Código: jButtonXX.setBackgroundColor(Color.red); Ejercicio: Gestionar el estado del sistema si existen datos o no y representarlo en la barra de estados (nuevo, modificado). Eventos: inputMethodTextChanged Código: jTextField.setText(“modificado”); Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 8 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 5. Ventana de diálogo Acerca de: dispose(); Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos 9 Ejercicio I : JBuilder, Layout y Eventos 5. Ventana de diálogo (cont.) Acerca de • Código de llamada a la ventana de diálogo public void helpAbout_actionPerformed(ActionEvent e) { AcercaDe vent_info = new AcercaDe(this, “Acerca de..”,true); // modal Dimension dlgSize = vent_info.getPreferredSize(); Dimension frmSize = getSize(); Point loc = getLocation(); // colocar en el centro de la ventana padre vent_info.setLocation((frmSize.width - dlgSize.width) / 2 + loc.x, (frmSize.height - dlgSize.height) / 2 + loc.y); // vent_info.setModal(false); vent_info.show(); } Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 10 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 6. Ventana de Confirmación Panel de Opción • Consultar/advertencia • Diferentes métodos (personalización) JOptionPane panel = new JOptionPane(); int val = panel.showOptionDialog(this, "¿Desea perder los datos actuales?", "Abrir archivo", JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE, null, new String[]{"ACEPTAR","CANCELAR"},null); /* panel.showConfirmDialog(this, "¿Desea perder los datos actuales?", "Abrir archivo", panel.YES_NO_OPTION); */ if (val == panel.YES_OPTION) { System.exit(0); } Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 11 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 7. Iconos Inserción de Iconos • Usar en etiquetas y botones De forma estática (en modo diseño) et_nombre.setIcon(new ImageIcon(Ejemplo1.Ventana.class.getResource("cara.gif"))); !!!OJO: La imagen la busca en el directorio de la Clases !!! Icono de la aplicación: ImageIcon g=new ImageIcon("logo.gif"); this.setIconImage ( g.getImage()); // JFrame Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 12 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 8. ComboBox Opciones del Combo String[] provincias = {"Granada", "Málaga", "Jaen" }; JComboBox jCB_prov = new JComboBox(provincias); jCB_prov.setEditable(true); // poder modificar jCB_prov.setSelectedIndex(0); // posición por defecto // Añadir de forma dinámica jCB_Prov.addItem("Murcia"); String prov = (String) jCB_Prov.getSelectedItem(); **************** Otra posibilidad DefaultComboBoxModel m = new DefaultComboBoxModel(); m.addElement((String) "Granada"); ... jCB.setModel(m); // asocia modelo de datos Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 13 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos Ejercicio I : JBuilder, Layout y Eventos 9. Selector de Ficheros (estándar) Opciones del Combo JFileChooser selecc_fichero = new JFileChooser(); //In response to a button click: int valor = selecc_fichero.showOpenDialog(this); Opciones: JFileChooser.APPROVE_OPTION JFileChooser.CANCEL_OPTION Ventana de la que depende if (valor == JFileChooser.APPROVE_OPTION) { String s = select_fichero.getSelectedFile(); } Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada 14 © Miguel Gea y Fco. Luis Gutiérrez Dpt. Lenguajes y Sistemas Informáticos