You are on page 1of 127

INTERFACES GRÁFICAS

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?

 Una interfaz gráfica de usuario (GUI) presenta un modo amigable


al usuario para interactuar con un programa

u@algoritmia:~$ mkdir documentos


u@algoritmia:~$ cd documentos
u@algoritmia:~/documentos$

EISC
Universidad del Valle - Algoritmia y Programación Slide 3
INTERFACES GRÁFICAS
¿Qué son?

 Una interfaz gráfica de usuario (GUI) presenta un modo amigable


al usuario para interactuar con un programa

EISC
Universidad del Valle - Algoritmia y Programación Slide 4
INTERFACES GRÁFICAS
Componentes

 Las GUI’s se crean a partir de componentes, éstos permiten que


el usuario interactúe mediante el ratón, el teclado y otras formas
de entrada

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

 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz


gráfica?

EISC
Universidad del Valle - Algoritmia y Programación Slide 7
INTERFACES GRÁFICAS
Componentes

 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz


gráfica?

JFrame
JTextField

JButton

JPanel
(16 botones)

EISC
Universidad del Valle - Algoritmia y Programación Slide 8
INTERFACES GRÁFICAS
Componentes

 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz


gráfica?

EISC
Universidad del Valle - Algoritmia y Programación Slide 9
INTERFACES GRÁFICAS
Componentes

 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz


gráfica?

JFrame
JLabel

JButton
JPanel
JLabel (3 botones)

EISC
Universidad del Valle - Algoritmia y Programación Slide 10
INTERFACES GRÁFICAS
Componentes

 Las GUI’s se crean a partir de componentes, éstos permiten que


el usuario interactúe mediante el ratón, el teclado y otras formas
de entrada

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

 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz


gráfica?

EISC
Universidad del Valle - Algoritmia y Programación Slide 13
INTERFACES GRÁFICAS
Componentes

 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz


gráfica?

JFrame

JLabel
JTextField
JLabel

JRadioButton
JSpinner

JCheckBox

JButton
JLabel

EISC
Universidad del Valle - Algoritmia y Programación Slide 14
INTERFACES GRÁFICAS
Componentes

 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz


gráfica?

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

 De acuerdo al tipo de componente es posible realizar


operaciones de lectura de su contenido o modificación de su
contenido

EISC
Universidad del Valle - Algoritmia y Programación Slide 16
INTERFACES GRÁFICAS
Componentes y sus métodos

 Es conveniente para la lectura o modificación de contenido,


identificar cada componente por medio de un nombre único

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

 Los gestores de distribución (Layouts) permiten ordenar los


componentes de una interfaz de distintas formas

EISC
Universidad del Valle - Algoritmia y Programación Slide 21
INTERFACES GRÁFICAS
Layouts

 Los gestores de distribución (Layouts) permiten ordenar los


componentes de una interfaz de distintas formas

 En el diseño de flujo a medida que se añaden componentes se


ubican de izquierda a derecha

Diseño de flujo (FlowLayout)

EISC
Universidad del Valle - Algoritmia y Programación Slide 22
INTERFACES GRÁFICAS
Layouts

 Los gestores de distribución (Layouts) permiten ordenar los


componentes de una interfaz de distintas formas

 En el diseño de rejilla se especifican el número de columnas y filas


en que se divide un panel para ubicar componentes

Los componentes que se


agregan se ubican de
izquierda a derecha y de
arriba hacia abajo

Diseño de rejilla (GridLayout)

EISC
Universidad del Valle - Algoritmia y Programación Slide 23
INTERFACES GRÁFICAS
Layouts

 Los gestores de distribución (Layouts) permiten ordenar los


componentes de una interfaz de distintas formas

 El diseño de borde permite ubicar componentes en las


direcciones: norte , centro, sur, este y oeste de una interfaz
gráfica

NORTH EAST

CENTER CENTER

SOUTH WEST

Diseño de borde (BorderLayout)

EISC
Universidad del Valle - Algoritmia y Programación Slide 24
INTERFACES GRÁFICAS
Layouts

 Los gestores de distribución (Layouts) permiten ordenar los


componentes de una interfaz de distintas formas

 En una interfaz es posible combinar paneles con distintos tipos de


gestores de distribución

Diseño de borde y Diseño de rejilla

EISC
Universidad del Valle - Algoritmia y Programación Slide 25
INTERFACES GRÁFICAS
Layouts

 Ejemplo: La gráfica muestra el empleo de gestores de distribución


JFrame
(Diseño de flujo)

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

 Ejemplo: La gráfica muestra el empleo de gestores de distribución

JFrame
(Diseño de flujo)

JPanel
(Diseño de rejilla)

EISC
Universidad del Valle - Algoritmia y Programación Slide 27
INTERFACES GRÁFICAS
Layouts

 Ejercicio: Identifique los tipos de gestores de distribución en la


siguiente interfaz gráfica:

EISC
Universidad del Valle - Algoritmia y Programación Slide 28
INTERFACES GRÁFICAS
Layouts

 Ejercicio: Identifique los tipos de gestores de distribución en la


siguiente interfaz gráfica:

JFrame
(Diseño de borde)

JPanel
(Diseño de rejilla)

EISC
Universidad del Valle - Algoritmia y Programación Slide 29
INTERFACES GRÁFICAS
Layouts

 Ejercicio: Identifique los tipos de gestores de distribución en la


siguiente interfaz gráfica:

EISC
Universidad del Valle - Algoritmia y Programación Slide 30
INTERFACES GRÁFICAS
Layouts

 Ejercicio: Identifique los tipos de gestores de distribución en la


siguiente interfaz gráfica:

JFrame
(Diseño de borde)

JPanel
(Diseño de rejilla)

EISC
Universidad del Valle - Algoritmia y Programación Slide 31
INTERFACES GRÁFICAS
Layouts

 Ejercicio: Identifique los tipos de gestores de distribución en la


siguiente interfaz gráfica:

EISC
Universidad del Valle - Algoritmia y Programación Slide 32
INTERFACES GRÁFICAS
Layouts

 Ejercicio: Identifique los tipos de gestores de distribución en la


siguiente interfaz gráfica:

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.

 Algunos de los eventos que pueden ocurrir son:


Clic sobre los botones

Completar campos de texto y oprimir la tecla Enter

Hacer clic sobre alguna opción de un menú

Ejecutar un comando con el teclado

Seguir el rastro del ratón

Entre otros.

EISC
Universidad del Valle - Algoritmia y Programación Slide 34
INTERFACES GRÁFICAS
Eventos

 Cada componente tiene eventos relacionados y a cada evento se


le pueden asignar instrucciones que se ejecutarán cuando el
evento ocurra.
 Cada evento tiene relacionado un método o función cuyo nombre
está conformado por el nombre del componente y el nombre del
evento.
 Las instrucciones a ejecutar se ubican dentro del método donde se
requiera.
 Ejemplo de eventos generados por el mouse sobre un botón:
Evento Nombre en Java Componente Método relacionado
Click de mouse sobre el botón MouseClicked boton1 boton1MouseClicked
El mouse ingresa al área del botón MouseEntered boton1 boton1MouseEntered
El mouse sale del área del botón MouseExited boton1 boton1MouseExited

EISC
Universidad del Valle - Algoritmia y Programación Slide 35
INTERFACES GRÁFICAS
Eventos

 Al realizar clic sobre un componente de una interfaz gráfica como


por ejemplo un botón, se dice que ocurre un evento y se ejecutan
las instrucciones que se encuentren dentro del método o función
llamado nombreComponenteActionPerformed

 Ejemplo: Al hacer clic sobre el boton llamado botonPapel, se


ejecuta el método llamado botonPapelActionPerformed

EISC
Universidad del Valle - Algoritmia y Programación Slide 36
GUI’S

Netbeans
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Netbeans cuenta con un asistente para la creación de interfaces


gráficas

EISC
Universidad del Valle - Algoritmia y Programación Slide 38
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Para emplear el asistente de creación de interfaces gráficas debe


seguir los siguientes pasos:

EISC
Universidad del Valle - Algoritmia y Programación Slide 39
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 1: Crear un proyecto nuevo sin fuentes

EISC
Universidad del Valle - Algoritmia y Programación Slide 40
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 2: Hacer clic derecho sobre la carpeta paquete de fuentes,


seleccionar Nuevo y luego Formulario JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 41
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 3: Colocar como nombre Interfaz y hacer clic en Terminar

EISC
Universidad del Valle - Algoritmia y Programación Slide 42
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 3: En la pestaña fuente se muestra el código fuente en Java


para la interfaz, en la pestaña diseño se muestra la interfaz como
tal

EISC
Universidad del Valle - Algoritmia y Programación Slide 43
INTERFACES GRÁFICAS
GUI’s en Netbeans

 El asistente para la creación de interfaces gráficas esta compuesto


por distintas subventanas

 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

 Ejemplo: Por medio del asistente para la creación de interfaces


gráficas realizar la siguiente interfaz

EISC
Universidad del Valle - Algoritmia y Programación Slide 46
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 4: Arrastrar desde la ventana de componentes los


siguientes elementos a la ventana de previsualización

 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

 Paso 4: Verificar que los componentes se encuentren en la


ventana de organización de componentes. Verifique además
que se encuentren dentro del componente JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 48
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 5: Hacer clic derecho y seleccionar cambiar nombre de


variable. Cambie el nombre de cada componente de acuerdo a
como aparece en la gráfica

EISC
Universidad del Valle - Algoritmia y Programación Slide 49
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 6: Hacer clic derecho en JFrame y seleccionar Activar


gestor de distribución y luego seleccionar Diseño de Borde

EISC
Universidad del Valle - Algoritmia y Programación Slide 50
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 7: El JFrame tiene ahora un diseño de borde, a continuación


ubicaremos el panel en el centro del JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 51
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 7: En la ventana de organización de componentes


seleccionar panel y en la ventana de propiedades seleccionar
como Dirección: Center

EISC
Universidad del Valle - Algoritmia y Programación Slide 52
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 8: Hacer clic derecho en panel y seleccionar Activar gestor


de distribución y luego seleccionar Diseño de Rejilla

EISC
Universidad del Valle - Algoritmia y Programación Slide 53
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 9: Hacer clic (izquierdo) en GridLayout en la ventana de


organización de componentes, luego en la ventana de
propiedades digite en Columnas 1 y en Filas 3

EISC
Universidad del Valle - Algoritmia y Programación Slide 54
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 10: Mueva los componentes etiqueta, botón y


campoDeTexto dentro del componente panel

EISC
Universidad del Valle - Algoritmia y Programación Slide 55
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 10:La ventana de previsualización debe quedar de la


forma que indica la figura

EISC
Universidad del Valle - Algoritmia y Programación Slide 56
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 11: Disminuya el tamaño del JFrame, haciendo clic


sostenido y arrastrando desde la esquina hasta alcanzar el
tamaño de la figura de la derecha

EISC
Universidad del Valle - Algoritmia y Programación Slide 57
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 12: Hacer clic derecho en etiqueta en la ventana de


previsualización y seleccionar Editar texto. Escribir Bienvenido
como nuevo texto

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

 Paso 13: En la ventana de organización de componentes


seleccionar etiqueta y en la ventana de propiedades, ajustar
las propiedades de la etiqueta de acuerdo con la figura

EISC
Universidad del Valle - Algoritmia y Programación Slide 60
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 13: En la ventana de previsualización, el resultado debe


ser la interfaz gráfica que muestra la figura

EISC
Universidad del Valle - Algoritmia y Programación Slide 61
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 14: Hacer doble clic en el boton saludos en la ventana de


previsualización. En el método botonActionPerformed digite
las líneas de código que aparecen a continuación

private void botonActionPerformed(java.awt.event.ActionEvent evt) {


// TODO add your handling code here:
String nombre = campoTexto.getText();
JOptionPane.showMessageDialog(null, “Hola “ + nombre);
}

 Nota: No olvide agregar la línea de código.

import javax.swing.JOptionPane;

EISC
Universidad del Valle - Algoritmia y Programación Slide 62
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 14: Ejecute la aplicación. Digite su nombre en el campo de


texto y haga clic en el botón.

EISC
Universidad del Valle - Algoritmia y Programación Slide 63
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Ejemplo: Por medio del asistente para la creación de interfaces


gráficas realizar la siguiente interfaz

EISC
Universidad del Valle - Algoritmia y Programación Slide 64
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Repita los pasos: Paso 1, Paso 2 y Paso 3 , para crear un nuevo


proyecto sin fuentes y con un formulario JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 65
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 4: Arrastrar desde la ventana de componentes los


siguientes elementos a la ventana de previsualización

 1 Panel
 2 Etiquetas
 3 Botones

EISC
Universidad del Valle - Algoritmia y Programación Slide 66
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 4: Verificar que los componentes se encuentren en la


ventana de organización de componentes. Verifique además
que los componentes se encuentren organizados como muestra la
figura

Los botones se encuentra dentro


del JPanel

Las etiquetas se encuentra por fuera


del JPanel pero dentro del JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 67
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 5: Hacer clic derecho y seleccionar cambiar nombre de


variable. Cambie el nombre de cada componente de acuerdo a
como aparece en la gráfica

EISC
Universidad del Valle - Algoritmia y Programación Slide 68
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 6: Hacer clic derecho en JFrame y seleccionar Activar


gestor de distribución y luego seleccionar Diseño de Borde

EISC
Universidad del Valle - Algoritmia y Programación Slide 69
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 7: En la ventana de organización de componentes


seleccionar panel y en la ventana de propiedades seleccionar
como Dirección: Center

EISC
Universidad del Valle - Algoritmia y Programación Slide 70
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 8: En la ventana de organización de componentes


seleccionar etiquetaGanador y en la ventana de propiedades
seleccionar como Dirección: South

EISC
Universidad del Valle - Algoritmia y Programación Slide 71
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 9: En la ventana de organización de componentes


seleccionar etiquetaJugadas y en la ventana de propiedades
seleccionar como Dirección: North

EISC
Universidad del Valle - Algoritmia y Programación Slide 72
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 10: Hacer clic derecho en panel y seleccionar Activar


gestor de distribución y luego seleccionar Diseño de Rejilla

EISC
Universidad del Valle - Algoritmia y Programación Slide 73
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 11: Hacer clic (izquierdo) en GridLayout en la ventana de


organización de componentes, luego en la ventana de
propiedades digite en Columnas 3 y en Filas 1

EISC
Universidad del Valle - Algoritmia y Programación Slide 74
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 12:La ventana de previsualización debe quedar de la


forma que indica la figura

EISC
Universidad del Valle - Algoritmia y Programación Slide 75
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 13:Modifique los textos de los componentes para obtener la


interfaz gráfica de la figura. Elimine los textos de los botones

EISC
Universidad del Valle - Algoritmia y Programación Slide 76
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 14:Para cada uno de los botones, modifique la propiedad


preferredSize, a un valor de [103, 103]

EISC
Universidad del Valle - Algoritmia y Programación Slide 77
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 15: Crear en la carpeta src del proyecto creado en Netbeans


(Carpera Personal – Netbeans Projects – Carpeta de Proyecto –
src) una carpeta llamada imágenes con las imágenes a
continuación

Imágenes de los botones (icon) Imágenes al pasar el mouse


encima de los botones (icon over)

EISC
Universidad del Valle - Algoritmia y Programación Slide 78
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 16: En la ventana de organización de componentes


seleccionar el botonPiedra, en la ventana de propiedades
hacer clic en icon

EISC
Universidad del Valle - Algoritmia y Programación Slide 79
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 17: En la ventana de selección de icono, en paquete


seleccionar la carpeta imágenes, en archivo seleccionar
piedra.png

EISC
Universidad del Valle - Algoritmia y Programación Slide 80
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 17: Repetir el proceso para asignar iconos a los otros


botones

EISC
Universidad del Valle - Algoritmia y Programación Slide 81
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 18: En la ventana de organización de componentes


seleccionar el botonPiedra, en la ventana de propiedades
hacer clic en rollovericon

EISC
Universidad del Valle - Algoritmia y Programación Slide 82
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 19: En la ventana de selección de icono, en paquete


seleccionar la carpeta imágenes, en archivo seleccionar
piedraover.png

EISC
Universidad del Valle - Algoritmia y Programación Slide 83
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 20: Repetir el proceso para asignar iconos a los otros


botones

EISC
Universidad del Valle - Algoritmia y Programación Slide 84
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 21: Reduzca el tamaño del JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 85
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 22: Hacer doble clic en el botonPiedra en la ventana de


previsualización. En el método botonPiedraActionPerformed
digite las líneas de código que aparecen a continuación
private void botonPiedraActionPerformed(java.awt.event.ActionEvent evt) {
int pcJugada = (int) Math.round(Math.random() * 2) + 1;
if (pcJugada == 1) {
etiquetaJugadas.setText("La PC juega Piedra, Usted juega Piedra");
etiquetaGanador.setText("Empate");
}
if (pcJugada == 2) {
etiquetaJugadas.setText("La PC juega Papel, Usted juega Piedra");
etiquetaGanador.setText("La PC gana");
}
if (pcJugada == 3) {
etiquetaJugadas.setText("La PC juega Tijera, Usted juega Piedra");
etiquetaGanador.setText("El ganador es usted");
}
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 86
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 23: Hacer doble clic en el botonPapel en la ventana de


previsualización. En el método botonPapelActionPerformed
digite las líneas de código que aparecen a continuación
private void botonPapelActionPerformed(java.awt.event.ActionEvent evt) {
int pcJugada = (int) Math.round(Math.random() * 2) + 1;
if (pcJugada == 1) {
etiquetaJugadas.setText("La PC juega Piedra, Usted juega Papel");
etiquetaGanador.setText("El ganador es Usted");
}
if (pcJugada == 2) {
etiquetaJugadas.setText("La PC juega Papel, Usted juega Papel");
etiquetaGanador.setText("Empate");
}
if (pcJugada == 3) {
etiquetaJugadas.setText("La PC juega Tijera, Usted juega Papel");
etiquetaGanador.setText("La PC gana");
}
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 87
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 24: Hacer doble clic en el botonTijera en la ventana de


previsualización. En el método botonTijeraActionPerformed
digite las líneas de código que aparecen a continuación
private void botonTijeraActionPerformed(java.awt.event.ActionEvent evt) {
int pcJugada = (int) Math.round(Math.random() * 2) + 1;
if (pcJugada == 1) {
etiquetaJugadas.setText("La PC juega Piedra, Usted juega Tijera");
etiquetaGanador.setText("La PC gana");
}
if (pcJugada == 2) {
etiquetaJugadas.setText("La PC juega Papel, Usted juega Tijera");
etiquetaGanador.setText("El usuario gana");
}
if (pcJugada == 3) {
etiquetaJugadas.setText("La PC juega Tijera, Usted juega Tijera");
etiquetaGanador.setText("Empate");
}
}
EISC
Universidad del Valle - Algoritmia y Programación Slide 88
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 25: Al ejecutar la aplicación deberá observar la interfaz


gráfica que se muestra a continuación

EISC
Universidad del Valle - Algoritmia y Programación Slide 89
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Ejemplo: Por medio del asistente para la creación de interfaces


gráficas realizar la siguiente interfaz

EISC
Universidad del Valle - Algoritmia y Programación Slide 90
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Repita los pasos: Paso 1, Paso 2 y Paso 3 , para crear un nuevo


proyecto sin fuentes y con un formulario JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 91
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 4: Arrastrar desde la


ventana de componentes los
siguientes elementos a la
ventana de previsualización

 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

 Paso 5: De acuerdo a la figura:

Organizar los componentes

Ajustar los gestores de distribución


para el JFrame (BorderLayout) y el
panel (GridLayout)

Cambiar los nombres de los


componentes

EISC
Universidad del Valle - Algoritmia y Programación Slide 93
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 6: Hacer clic (izquierdo) en GridLayout en la ventana de


organización de componentes, luego en la ventana de
propiedades digite en Columnas 2, en Filas 5, en Surco
Horizontal 2 y en Surco Vertical 2

EISC
Universidad del Valle - Algoritmia y Programación Slide 94
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 7: En la ventana de organización de componentes


seleccionar panel y en la ventana de propiedades seleccionar
como Dirección: Center

EISC
Universidad del Valle - Algoritmia y Programación Slide 95
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 8: En la ventana de organización de componentes


seleccionar radioVIP y en la ventana de propiedades, en
buttonGroup, seleccionar grupoCategoria. Repetir el
procedimiento para el componente radioGeneral

EISC
Universidad del Valle - Algoritmia y Programación Slide 96
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 9: Cambie los textos de cada componente de acuerdo a


como se observa en la figura. Cambie el tamaño del JFrame para
ajustarlo a los componentes de la interfaz

EISC
Universidad del Valle - Algoritmia y Programación Slide 97
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 10: Hacer doble clic en el botonReservar en la ventana de


previsualización. En el método botonPiedraActionPerformed
digite las líneas de código que aparecen en la siguiente diapositiva

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";
}

if (!id.equals("") && !fila.equals("") && silla != 0 && !categoria.equals("")) {


JOptionPane.showMessageDialog(null, "La reserva fue exitosa"
+ "\nIdentificacion : " + id
+ "\nFila : " + fila + " - Silla : " + silla
+ "\nCategoria : " + categoria);
} else {
JOptionPane.showMessageDialog(null, "Ingrese todos los campos");
}
}

EISC
Universidad del Valle - Algoritmia y Programación Slide 99
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Ejemplo: Por medio del asistente para la creación de interfaces


gráficas realizar la siguiente interfaz

EISC
Universidad del Valle - Algoritmia y Programación Slide 100
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Repita los pasos: Paso 1, Paso 2 y Paso 3 , para crear un nuevo


proyecto sin fuentes y con un formulario JFrame

EISC
Universidad del Valle - Algoritmia y Programación Slide 101
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 4: Arrastrar desde la


ventana de componentes los
siguientes elementos a la
ventana de previsualización

 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

 Paso 5: De acuerdo a la figura:

Organizar los componentes

Ajustar los gestores de distribución


para el JFrame (GridLayout) y los
paneles (GridLayout)

Cambiar los nombres de los


componentes

EISC
Universidad del Valle - Algoritmia y Programación Slide 103
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 5: El resto de las etiquetas se deben ubicar en cada uno de


los paneles

EISC
Universidad del Valle - Algoritmia y Programación Slide 104
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 6: Hacer clic (izquierdo) en GridLayout debajo de JFrame


en la ventana de organización de componentes, luego en la
ventana de propiedades digite en Columnas 1, en Filas 7, en
Surco Horizontal 0 y en Surco Vertical 0

EISC
Universidad del Valle - Algoritmia y Programación Slide 105
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 6: Hacer clic (izquierdo) en GridLayout debajo de


panelDescripcion en la ventana de organización de
componentes, luego en la ventana de propiedades digite en
Columnas 5, en Filas 1, en Surco Horizontal 0 y en Surco
Vertical 0 (Repetir el proceso para el panelValores y el
panelUnidades)

EISC
Universidad del Valle - Algoritmia y Programación Slide 106
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 6: Hacer clic (izquierdo) en GridLayout debajo de


panelBuscar en la ventana de organización de
componentes, luego en la ventana de propiedades digite en
Columnas 4, en Filas 1, en Surco Horizontal 0 y en Surco
Vertical 0

EISC
Universidad del Valle - Algoritmia y Programación Slide 107
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 7: Cambie los textos de cada componente de acuerdo a


como se observa en la figura. Cambie el tamaño del JFrame para
ajustarlo a los componentes de la interfaz

EISC
Universidad del Valle - Algoritmia y Programación Slide 108
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 8: Declara las siguientes variables globales en el código de la


Interfaz:

String descripcion[] = new String[4];


int valores[] = new int[4];
int unidades[] = new int[4];

EISC
Universidad del Valle - Algoritmia y Programación Slide 109
INTERFACES GRÁFICAS
GUI’s en Netbeans

 Paso 8: Hacer doble clic en el botonDescripcion en la ventana de


previsualización. En el método botonDescripcionActionPerformed
digite las líneas de código que aparecen en la siguiente diapositiva

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

 Paso 8: Hacer doble clic en el botonValores en la ventana de


previsualización. En el método botonValoresActionPerformed digite
las líneas de código que aparecen en la siguiente diapositiva

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

 Paso 8: Hacer doble clic en el botonUnidades en la ventana de


previsualización. En el método botonUnidadesActionPerformed digite
las líneas de código que aparecen en la siguiente diapositiva

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:

int tam = unidades.length;


for (int i = 0; i < tam; i++) {
unidades[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite unidades"));
}

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

 Paso 8: Hacer doble clic en el botonAceptar en la ventana de


previsualización. En el método botonAceptarActionPerformed digite
las líneas de código que aparecen en la siguiente diapositiva

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("");

int tam = descripcion.length;


for (int i = 0; i < tam; i++) {
if (campoTextoComprar.getText().equalsIgnoreCase(descripcion[i])) {
unidades[i] = unidades[i] - 1;
etiquetaResultado.setText("Encontrado!");
}
}

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

 Ejercicio: Realice los cambios necesarios para que al no escribir


un valor, se limpien todos los campos. Nota: para quitar un icono
se emplea el método setIcon con parámetro de entrada null

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);}

Titulo del diálogo

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);}

Ícono y botones del diálogo


EISC
Universidad del Valle - Algoritmia y Programación Slide 122
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 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);

Devuelve un valor de tipo entero

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

Para facilitar la construcción de una interfaz gráfica se recomienda realizar


inicialmente un boceto de la interfaz donde se definan los elementos que la
conforman y su distribución.

En la construcción de la interfaz se recomienda primero agregar los paneles


que la conforman y ajustar su respectiva distribución (BorderLayout,
GridLayout, etc) junto con sus propiedades (dimensiones de la grilla,
separación, etc). Posteriormente se recomienda agregar cada elemento
gráfico ( campos de texto, etiquetas, botones, etc) a su respectivo panel y en
la posición deseada.

Repita los ejercicios de esta clase tomando como referencia únicamente la


interfaz en su apariencia final.

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