Académique Documents
Professionnel Documents
Culture Documents
Algoritmia y Programación
CONTENIDO
GUI’s (Graphic User Interfaces)
¿Qué son?
Componentes
Layouts
Eventos
GUI’s en Netbeans
Editor
Componentes
Layouts
Eventos
EISC
Universidad del Valle - Algoritmia y Programación Slide 2
INTERFACES GRÁFICAS
¿Qué son?
EISC
Universidad del Valle - Algoritmia y Programación Slide 3
INTERFACES GRÁFICAS
¿Qué son?
EISC
Universidad del Valle - Algoritmia y Programación Slide 4
INTERFACES GRÁFICAS
Componentes
EISC
Universidad del Valle - Algoritmia y Programación Slide 5
INTERFACES GRÁFICAS
Componentes
JFrame : Es la ventana sobre la que se construye la GUI.
JLabel : Etiquetas para mostrar mensajes o indicaciones al usuario.
JButton : Se asocia a una operación que realizará el usuario.
JTextField : Puede permitir tanto la entrada como la salida de datos.
JPanel : Sirve como contenedor para: JLabel, JButton y JTextField.
JFrame
JLabel JTextField
JButton
JTextArea
JPanel
(3 botones)
EISC
Universidad del Valle - Algoritmia y Programación Slide 6
INTERFACES GRÁFICAS
Componentes
EISC
Universidad del Valle - Algoritmia y Programación Slide 7
INTERFACES GRÁFICAS
Componentes
JFrame
JTextField
JButton
JPanel
(16 botones)
EISC
Universidad del Valle - Algoritmia y Programación Slide 8
INTERFACES GRÁFICAS
Componentes
EISC
Universidad del Valle - Algoritmia y Programación Slide 9
INTERFACES GRÁFICAS
Componentes
JFrame
JLabel
JButton
JPanel
JLabel (3 botones)
EISC
Universidad del Valle - Algoritmia y Programación Slide 10
INTERFACES GRÁFICAS
Componentes
EISC
Universidad del Valle - Algoritmia y Programación Slide 11
INTERFACES GRÁFICAS
Componentes
JTabbedPane : Permite distribuir varios JPanel en pestañas
JRadioButton : Botón de selección para información excluyente
JCheckBox : Casilla de selección
JSpinner : Componente para especificar un número (dos botones)
JComboBox : Componente para desplegar una lista de opciones
JMenu
JMenuBar
JTabbedPane
JComboBox JCheckBox
JSpinner
JRadioButton
EISC
Universidad del Valle - Algoritmia y Programación Slide 12
INTERFACES GRÁFICAS
Componentes
EISC
Universidad del Valle - Algoritmia y Programación Slide 13
INTERFACES GRÁFICAS
Componentes
JFrame
JLabel
JTextField
JLabel
JRadioButton
JSpinner
JCheckBox
JButton
JLabel
EISC
Universidad del Valle - Algoritmia y Programación Slide 14
INTERFACES GRÁFICAS
Componentes
JPanel
(4 elementos)
JPanel
(2 elementos)
JPanel
(2 elementos)
JPanel
(3 elementos)
EISC
Universidad del Valle - Algoritmia y Programación Slide 15
INTERFACES GRÁFICAS
Componentes y sus métodos
EISC
Universidad del Valle - Algoritmia y Programación Slide 16
INTERFACES GRÁFICAS
Componentes y sus métodos
EISC
Universidad del Valle - Algoritmia y Programación Slide 17
INTERFACES GRÁFICAS
JLabel
Método Propósito
void setText(String) Establece el texto a mostrar en la
etiqueta.
void setIcon( Icon) Establece la imagen mostrada por el
botón cuando no está seleccionado o
pulsado.
import javax.swing.Icon;
import javax.swing.ImageIcon;
…
Icon icono = new ImageIcon(getClass().getResource(“rutaIcono")));
EISC
Universidad del Valle - Algoritmia y Programación Slide 18
INTERFACES GRÁFICAS
JButton
Método Propósito
void setText(String) Establece el texto a mostrar en el
botón.
String getText() Obtiene el texto mostrado por el
botón.
void setIcon( Icon) Establece la imagen mostrada por el
botón cuando no está seleccionado o
pulsado.
EISC
Universidad del Valle - Algoritmia y Programación Slide 19
INTERFACES GRÁFICAS
JTextField
Método Propósito
void setText(String) Establece el texto a mostrar en el
campo de texto.
String getText() Obtiene el texto mostrado por el
campo de texto.
EISC
Universidad del Valle - Algoritmia y Programación Slide 20
INTERFACES GRÁFICAS
Layouts
EISC
Universidad del Valle - Algoritmia y Programación Slide 21
INTERFACES GRÁFICAS
Layouts
EISC
Universidad del Valle - Algoritmia y Programación Slide 22
INTERFACES GRÁFICAS
Layouts
EISC
Universidad del Valle - Algoritmia y Programación Slide 23
INTERFACES GRÁFICAS
Layouts
NORTH EAST
CENTER CENTER
SOUTH WEST
EISC
Universidad del Valle - Algoritmia y Programación Slide 24
INTERFACES GRÁFICAS
Layouts
EISC
Universidad del Valle - Algoritmia y Programación Slide 25
INTERFACES GRÁFICAS
Layouts
JPanel
(Diseño de rejilla)
JPanel
(Diseño de rejilla)
JPanel
(Diseño de rejilla)
JPanel
(Diseño de rejilla)
EISC
Universidad del Valle - Algoritmia y Programación Slide 26
INTERFACES GRÁFICAS
Layouts
JFrame
(Diseño de flujo)
JPanel
(Diseño de rejilla)
EISC
Universidad del Valle - Algoritmia y Programación Slide 27
INTERFACES GRÁFICAS
Layouts
EISC
Universidad del Valle - Algoritmia y Programación Slide 28
INTERFACES GRÁFICAS
Layouts
JFrame
(Diseño de borde)
JPanel
(Diseño de rejilla)
EISC
Universidad del Valle - Algoritmia y Programación Slide 29
INTERFACES GRÁFICAS
Layouts
EISC
Universidad del Valle - Algoritmia y Programación Slide 30
INTERFACES GRÁFICAS
Layouts
JFrame
(Diseño de borde)
JPanel
(Diseño de rejilla)
EISC
Universidad del Valle - Algoritmia y Programación Slide 31
INTERFACES GRÁFICAS
Layouts
EISC
Universidad del Valle - Algoritmia y Programación Slide 32
INTERFACES GRÁFICAS
Layouts
JFrame
(Diseño de rejilla 7x1)
JPanel
(Diseño de rejilla 1x5)
JPanel
(Diseño de rejilla 1x4)
EISC
Universidad del Valle - Algoritmia y Programación Slide 33
INTERFACES GRÁFICAS
Eventos
Java utiliza una metáfora llamada oyente para hacer que la GUI
escuche continuamente los eventos que pueden suceder sobre sus
componentes.
Entre otros.
EISC
Universidad del Valle - Algoritmia y Programación Slide 34
INTERFACES GRÁFICAS
Eventos
EISC
Universidad del Valle - Algoritmia y Programación Slide 35
INTERFACES GRÁFICAS
Eventos
EISC
Universidad del Valle - Algoritmia y Programación Slide 36
GUI’S
Netbeans
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 38
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 39
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 40
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 41
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 42
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 43
INTERFACES GRÁFICAS
GUI’s en Netbeans
Ventana de Componentes
Ventana de Previsualización
Ventana de Organización de Componentes
Ventana de Propiedades
EISC
Universidad del Valle - Algoritmia y Programación Slide 44
INTERFACES GRÁFICAS
GUI’s en Netbeans Botón de Ventana de
ejecución componentes
Ventana de
previsualización
Ventana de
organización
de componentes
Ventana de
propiedades
EISC
Universidad del Valle - Algoritmia y Programación Slide 45
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 46
INTERFACES GRÁFICAS
GUI’s en Netbeans
1 Panel
1 Etiqueta
1 Botón
1 Campo de texto
EISC
Universidad del Valle - Algoritmia y Programación Slide 47
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 48
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 49
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 50
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 51
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 52
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 53
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 54
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 55
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 56
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 57
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 58
INTERFACES GRÁFICAS
GUI’s en Netbeans
Paso 12: Repita el proceso para modificar los otros textos, hasta
obtener la figura que se muestra a continuación
EISC
Universidad del Valle - Algoritmia y Programación Slide 59
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 60
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 61
INTERFACES GRÁFICAS
GUI’s en Netbeans
import javax.swing.JOptionPane;
EISC
Universidad del Valle - Algoritmia y Programación Slide 62
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 63
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 64
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 65
INTERFACES GRÁFICAS
GUI’s en Netbeans
1 Panel
2 Etiquetas
3 Botones
EISC
Universidad del Valle - Algoritmia y Programación Slide 66
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 67
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 68
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 69
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 70
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 71
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 72
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 73
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 74
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 75
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 76
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 77
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 78
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 79
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 80
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 81
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 82
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 83
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 84
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 85
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 89
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 90
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 91
INTERFACES GRÁFICAS
GUI’s en Netbeans
1 Panel
4 Etiquetas
1 Campo de texto
1 Lista desplegable
1 Spinner
2 Botones de opción
1 Grupo de botones
1 Botón
1 Cuadro de contraseña
1 Barra de menú
1 Menú
1 Elemento de Menú
EISC
Universidad del Valle - Algoritmia y Programación Slide 92
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 93
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 94
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 95
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 96
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 97
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 98
INTERFACES GRÁFICAS
private void botonReservarActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
String id = "", fila = "", categoria = "";
int silla = 0;
id = campoTextoId.getText();
fila = comboFila.getSelectedItem().toString();
silla = Integer.parseInt(spinnerSilla.getValue().toString());
if (radioGeneral.isSelected()) {
categoria = "VIP";
} else if (radioVIP.isSelected()) {
categoria = "General";
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 99
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 100
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 101
INTERFACES GRÁFICAS
GUI’s en Netbeans
4 Paneles
17 Etiquetas
1 Campo de texto
4 Botones
EISC
Universidad del Valle - Algoritmia y Programación Slide 102
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 103
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 104
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 105
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 106
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 107
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 108
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 109
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 110
INTERFACES GRÁFICAS
private void botonDescripcionActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
int tam = descripcion.length;
for (int i = 0; i < tam; i++) {
descripcion[i] = JOptionPane.showInputDialog("Digite producto");
}
etiquetaP1.setText(descripcion[0]);
etiquetaP2.setText(descripcion[1]);
etiquetaP3.setText(descripcion[2]);
etiquetaP4.setText(descripcion[3]);
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 111
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 112
INTERFACES GRÁFICAS
private void botonValoresActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
int tam = valores.length;
for (int i = 0; i < tam; i++) {
valores[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite valor"));
}
etiquetaV1.setText("" + valores[0]);
etiquetaV2.setText("" + valores[1]);
etiquetaV3.setText("" + valores[2]);
etiquetaV4.setText("" + valores[3]);
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 113
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 114
INTERFACES GRÁFICAS
private void botonUnidadesActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
etiquetaU1.setText("" + unidades[0]);
etiquetaU2.setText("" + unidades[1]);
etiquetaU3.setText("" + unidades[2]);
etiquetaU4.setText("" + unidades[3]);
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 115
INTERFACES GRÁFICAS
GUI’s en Netbeans
EISC
Universidad del Valle - Algoritmia y Programación Slide 116
INTERFACES GRÁFICAS
private void botonAceptarActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
etiquetaResultado.setText("");
if (etiquetaResultado.getText().equals("")) {
etiquetaResultado.setText("No encontrado!");
}
etiquetaU1.setText("" + unidades[0]);
etiquetaU2.setText("" + unidades[1]);
etiquetaU3.setText("" + unidades[2]);
etiquetaU4.setText("" + unidades[3]);
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 117
INTERFACES GRÁFICAS
Ejercicio: El usuario digita un número en el cuadro de texto
“Digite un valor” una vez pulsado el botón Actualizar, se
actualiza el ícono del campo “Icono”, escriba el código que
permita actualizar la información de los componentes:
Cree los íconos que requiera en un editor de imágenes.
Ejemplos:
EISC
Universidad del Valle - Algoritmia y Programación Slide 118
INTERFACES GRÁFICAS
EISC
Universidad del Valle - Algoritmia y Programación Slide 119
ALGUNAS COSITAS..
JOPtionPane
Mensaje de advertencia:
Mensaje que se
muestra en el
diálogo
JOptionPane.showMessageDialog(this,
"Debe deligenciar los nombres de todos Jurados",
"Advertencias",
JOptionPane.INFORMATION_MESSAGE);}
EISC
Universidad del Valle - Algoritmia y Programación Slide 120
ALGUNAS COSITAS..
JOPtionPane
Mensaje de advertencia:
JOptionPane.showMessageDialog(this,
"Debe deligenciar los nombres de todos Jurados",
"Advertencias",
JOptionPane.INFORMATION_MESSAGE);}
EISC
Universidad del Valle - Algoritmia y Programación Slide 121
ALGUNAS COSITAS..
JOPtionPane
Mensaje de advertencia:
JOptionPane.showMessageDialog(this,
"Debe deligenciar los nombres de todos Jurados",
"Advertencias",
JOptionPane.INFORMATION_MESSAGE);}
int respuesta =
JOptionPane.showConfirmDialog(this,
"Esta seguro de Instalar Mesa de Votacion?",
"Confirmacion",
JOptionPane.YES_NO_OPTION);
EISC
Universidad del Valle - Algoritmia y Programación Slide 123
ALGUNAS COSITAS..
JOPtionPane
Mensaje de confirmación:
int respuesta =
JOptionPane.showConfirmDialog(this,
"Esta seguro de Instalar Mesa de Votacion?",
"Confirmacion",
JOptionPane.YES_NO_OPTION);
EISC
Universidad del Valle - Algoritmia y Programación Slide 124
ALGUNAS COSITAS..
JOPtionPane
Mensaje de Error:
JOptionPane.showMessageDialog(this,
"Clave erronea Sistema no Activado",
"Informacion",
JOptionPane.ERROR_MESSAGE);
EISC
Universidad del Valle - Algoritmia y Programación Slide 125
INTERFACES GRÁFICAS
Sugerencias
EISC
Universidad del Valle - Algoritmia y Programación Slide 126
WEBGRAFIA
http://download.oracle.com/javase/7/docs/api/
http://java.sun.com/developer/onlineTraining/GUI/Swing1/
shortcourse.html
http://www.programacion.com/articulo/swing_y_jfc_java_f
oundation_classes_94
EISC
Universidad del Valle - Algoritmia y Programación Slide 127