Ejercicio I - Departamento de Lenguajes y Sistemas Informáticos

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