Interfaces grficas

Algoritmia y Programacin
Contenido

GUIs (Graphic User Interfaces)
Qu son?
Componentes
Layouts
Eventos

GUIs en Netbeans
Editor
Componentes
Layouts
Eventos

Slide 2
Contenido

GUIs (Graphic User Interfaces)
Qu son?
Componentes
Layouts
Eventos

GUIs en Netbeans
Editor
Componentes
Layouts
Eventos

Slide 3
 Interfaces Grficas
Qu son?

Una interfaz grfica de usuario (GUI) presenta un modo amigable

al usuario para interactuar con un programa

Slide 5
 Interfaces Grficas
Componentes

Las GUIs se crean a partir de componentes, stos permiten que

el usuario interacte mediante el ratn, el teclado y otras formas
de entrada

Slide 6
 Interfaces Grficas
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 operacin 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)

Slide 7
 Interfaces Grficas
Componentes

Ejercicio: Qu componentes identifica en la siguiente interfaz

grfica?

Slide 8
 Interfaces Grficas
Componentes

Ejercicio: Qu componentes identifica en la siguiente interfaz

grfica?

JFrame
JTextField

JButton

JPanel
(16 botones)

Slide 9
 Interfaces Grficas
Componentes

Ejercicio: Qu componentes identifica en la siguiente interfaz

grfica?

Slide 10
 Interfaces Grficas
Componentes

Ejercicio: Qu componentes identifica en la siguiente interfaz

grfica?

JFrame
JLabel

JButton
JPanel
JLabel (3 botones)

Slide 11
 Interfaces Grficas
Componentes

Las GUIs se crean a partir de componentes, stos permiten que

el usuario interacte mediante el ratn, el teclado y otras formas
de entrada

Slide 12
 Interfaces Grficas
Componentes
JTabbedPane : Permite distribuir varios JPanel en pestaas
JRadioButton : Botn de seleccin para informacin excluyente
JCheckBox : Casilla de seleccin
JSpinner : Componente para especificar un nmero (dos botones)
JComboBox : Componente para desplegar una lista de opciones
JMenu
JMenuBar
JTabbedPane

JComboBox JCheckBox
JSpinner
JRadioButton

Slide 13
 Interfaces Grficas
Componentes

Ejercicio: Qu componentes identifica en la siguiente interfaz

grfica?

Slide 14
 Interfaces Grficas
Componentes

Ejercicio: Qu componentes identifica en la siguiente interfaz

grfica?
JFrame

JLabel
JTextField
JLabel

JRadioButton
JSpinner

JCheckBox

JButton
JLabel

Slide 15
 Interfaces Grficas
Componentes

Ejercicio: Qu componentes identifica en la siguiente interfaz

grfica?

JPanel
(4 elementos)
JPanel
(2 elementos)
JPanel
(2 elementos)
JPanel
(3 elementos)

Slide 16
 Interfaces Grficas
Componentes y sus mtodos

De acuerdo al tipo de componente es posible realizar

operaciones de lectura de su contenido o modificacin de su
contenido

Slide 17
 Interfaces Grficas
Componentes y sus mtodos

Es conveniente para la lectura o modificacin de contenido,

identificar cada componente por medio de un nombre nico

Slide 18
 Interfaces Grficas
JLabel

Mtodo Propsito

void setText(String) Establece el texto a mostrar en la etiqueta.

void setIcon( Icon) Establece la imagen mostrada por el botn

cuando no est seleccionado o pulsado.

import javax.swing.Icon;
import javax.swing.ImageIcon;

Icon icono = new ImageIcon(getClass().getResource(rutaIcono")));

Slide 19
 Interfaces Grficas
JButton

Mtodo Propsito

void setText(String) Establece el texto a mostrar en el botn.

String getText() Obtiene el texto mostrado por el botn.

void setIcon( Icon) Establece la imagen mostrada por el botn

cuando no est seleccionado o pulsado.

Slide 20
 Interfaces Grficas
JTextField

Mtodo Propsito
void setText(String) Establece el texto a mostrar en el campo de
texto.
String getText() Obtiene el texto mostrado por el campo de
texto.

Slide 21
 Interfaces Grficas
Layouts

Los gestores de distribucin (Layouts) permiten ordenar los

componentes de una interfaz de distintas formas

Slide 22
 Interfaces Grficas
Layouts

Los gestores de distribucin (Layouts) permiten ordenar los

componentes de una interfaz de distintas formas

En el diseo de flujo a medida que se aaden componentes se

ubican de izquierda a derecha

Diseo de flujo (FlowLayout)

Slide 23
 Interfaces Grficas
Layouts

Los gestores de distribucin (Layouts) permiten ordenar los

componentes de una interfaz de distintas formas

En el diseo de rejilla se especifican el nmero 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

Diseo de rejilla (GridLayout)

Slide 24
 Interfaces Grficas
Layouts

Los gestores de distribucin (Layouts) permiten ordenar los

componentes de una interfaz de distintas formas

El diseo de borde permite ubicar componentes en las

direcciones: norte , centro, sur, este y oeste de una interfaz
grfica

NORTH EAST

CENTER CENTER

SOUTH WEST

Diseo de borde (BorderLayout)

Slide 25
 Interfaces Grficas
Layouts

Los gestores de distribucin (Layouts) permiten ordenar los

componentes de una interfaz de distintas formas

En una interfaz es posible combinar paneles con distintos tipos de

gestores de distribucin

Diseo de borde y Diseo de rejilla

Slide 26
 Interfaces Grficas
Layouts

Ejemplo: La grfica muestra el empleo de gestores de distribucin

JFrame
(Diseo de flujo)

JPanel
(Diseo de rejilla)
JPanel
(Diseo de rejilla)
JPanel
(Diseo de rejilla)
JPanel
(Diseo de rejilla)

Slide 27
 Interfaces Grficas
Layouts

Ejemplo: La grfica muestra el empleo de gestores de distribucin

JFrame
(Diseo de flujo)

JPanel
(Diseo de rejilla)

Slide 28
 Interfaces Grficas
Layouts

Ejercicio: Identifique los tipos de gestores de distribucin en la

siguiente interfaz grfica:

Slide 29
 Interfaces Grficas
Layouts

Ejercicio: Identifique los tipos de gestores de distribucin en la

siguiente interfaz grfica:

JFrame
(Diseo de borde)

JPanel
(Diseo de rejilla)

Slide 30
 Interfaces Grficas
Layouts

Ejercicio: Identifique los tipos de gestores de distribucin en la

siguiente interfaz grfica:

Slide 31
 Interfaces Grficas
Layouts

Ejercicio: Identifique los tipos de gestores de distribucin en la

siguiente interfaz grfica:

JFrame
(Diseo de borde)

JPanel
(Diseo de rejilla)

Slide 32
 Interfaces Grficas
Layouts

Ejercicio: Identifique los tipos de gestores de distribucin en la

siguiente interfaz grfica:

Slide 33
 Interfaces Grficas
Layouts

Ejercicio: Identifique los tipos de gestores de distribucin en la

siguiente interfaz grfica:

JFrame
(Diseo de rejilla 7x1)

JPanel
(Diseo de rejilla 1x5)

JPanel
(Diseo de rejilla 1x4)

Slide 34
 Interfaces Grficas
Eventos

Java utiliza una metfora 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 opcin de un men

Ejecutar un comando con el teclado

Seguir el rastro del ratn

Entre otros.

Slide 35
 Interfaces Grficas
Eventos

Cada componente tiene eventos relacionados y a cada evento se

le pueden asignar instrucciones que se ejecutarn cuando el
evento ocurra.
Cada evento tiene relacionado un mtodo o funcin cuyo nombre
est conformado por el nombre del componente y el nombre del
evento.
Las instrucciones a ejecutar se ubican dentro del mtodo donde se
requiera.
Ejemplo de eventos generados por el mouse sobre un botn:
Evento Nombre enJava Componente Mtodo relacionado
Click de mouse sobre el botn MouseClicked boton1 boton1MouseClicked
El mouse ingresa al rea del botn MouseEntered boton1 boton1MouseEntered
El mouse sale del rea del botn MouseExited boton1 boton1MouseExited

Slide 36
GUIs
Netbeans
 Interfaces Grficas
GUIs en Netbeans

Netbeans cuenta con un asistente para la creacin de interfaces

grficas

Slide 38
 Interfaces Grficas
GUIs en Netbeans

Para emplear el asistente de creacin de interfaces grficas debe

seguir los siguientes pasos:

Slide 39
 Interfaces Grficas
GUIs en Netbeans

Paso 1: Crear un proyecto nuevo sin fuentes

Slide 40
 Interfaces Grficas
GUIs en Netbeans

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

seleccionar Nuevo y luego Formulario JFrame

Slide 41
 Interfaces Grficas
GUIs en Netbeans

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

Slide 42
 Interfaces Grficas
GUIs en Netbeans

Paso 3: En la pestaa fuente se muestra el cdigo fuente en Java

para la interfaz, en la pestaa diseo se muestra la interfaz como
tal

Slide 43
 Interfaces Grficas
GUIs en Netbeans

El asistente para la creacin de interfaces grficas esta compuesto

por distintas subventanas

Ventana de Componentes
Ventana de Previsualizacin
Ventana de Organizacin de Componentes
Ventana de Propiedades

Slide 44
Interfaces Grficas
GUIs en Netbeans Botn de Ventana de
ejecucin componentes

Ventana de
previsualizacin

Ventana de
organizacin
de componentes

Ventana de
propiedades

Slide 45
 Interfaces Grficas
GUIs en Netbeans

Ejemplo: Por medio del asistente para la creacin de interfaces

grficas realizar la siguiente interfaz

Slide 46
 Interfaces Grficas
GUIs en Netbeans

Paso 4: Arrastrar desde la ventana de componentes los

siguientes elementos a la ventana de previsualizacin

1 Panel
1 Etiqueta
1 Botn
1 Campo de texto

Slide 47
 Interfaces Grficas
GUIs en Netbeans

Paso 4: Verificar que los componentes se encuentren en la

ventana de organizacin de componentes. Verifique adems
que se encuentren dentro del componente JFrame

Slide 48
 Interfaces Grficas
GUIs 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 grfica

Slide 49
 Interfaces Grficas
GUIs en Netbeans

Paso 6: Hacer clic derecho en JFrame y seleccionar Activar

gestor de distribucin y luego seleccionar Diseo de Borde

Slide 50
 Interfaces Grficas
GUIs en Netbeans

Paso 7: El JFrame tiene ahora un diseo de borde, a continuacin

ubicaremos el panel en el centro del JFrame

Slide 51
 Interfaces Grficas
GUIs en Netbeans

Paso 7: En la ventana de organizacin de componentes

seleccionar panel y en la ventana de propiedades seleccionar
como Direccin: Center

Slide 52
 Interfaces Grficas
GUIs en Netbeans

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

de distribucin y luego seleccionar Diseo de Rejilla

Slide 53
 Interfaces Grficas
GUIs en Netbeans

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

organizacin de componentes, luego en la ventana de
propiedades digite en Columnas 1 y en Filas 3

Slide 54
 Interfaces Grficas
GUIs en Netbeans

Paso 10: Mueva los componentes etiqueta, botn y

campoDeTexto dentro del componente panel

Slide 55
 Interfaces Grficas
GUIs en Netbeans

Paso 10:La ventana de previsualizacin debe quedar de la

forma que indica la figura

Slide 56
 Interfaces Grficas
GUIs en Netbeans

Paso 11: Disminuya el tamao del JFrame, haciendo clic

sostenido y arrastrando desde la esquina hasta alcanzar el tamao
de la figura de la derecha

Slide 57
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin y seleccionar Editar texto. Escribir Bienvenido
como nuevo texto

Slide 58
 Interfaces Grficas
GUIs en Netbeans

Paso 12: Repita el proceso para modificar los otros textos, hasta
obtener la figura que se muestra a continuacin

Slide 59
 Interfaces Grficas
GUIs en Netbeans

Paso 13: En la ventana de organizacin de componentes

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

Slide 60
 Interfaces Grficas
GUIs en Netbeans

Paso 13: En la ventana de previsualizacin, el resultado debe

ser la interfaz grfica que muestra la figura

Slide 61
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonActionPerformed digite
las lneas de cdigo que aparecen a continuacin

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 lnea de cdigo.

import javax.swing.JOptionPane;

Slide 62
 Interfaces Grficas
GUIs en Netbeans

Paso 14: Ejecute la aplicacin. Digite su nombre en el campo de

texto y haga clic en el botn.

Slide 63
 Interfaces Grficas
GUIs en Netbeans

Ejemplo: Por medio del asistente para la creacin de interfaces

grficas realizar la siguiente interfaz

Slide 64
 Interfaces Grficas
GUIs en Netbeans

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

proyecto sin fuentes y con un formulario JFrame

Slide 65
 Interfaces Grficas
GUIs en Netbeans

Paso 4: Arrastrar desde la ventana de componentes los

siguientes elementos a la ventana de previsualizacin

1 Panel
2 Etiquetas
3 Botones

Slide 66
 Interfaces Grficas
GUIs en Netbeans

Paso 4: Verificar que los componentes se encuentren en la

ventana de organizacin de componentes. Verifique adems
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

Slide 67
 Interfaces Grficas
GUIs 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 grfica

Slide 68
 Interfaces Grficas
GUIs en Netbeans

Paso 6: Hacer clic derecho en JFrame y seleccionar Activar

gestor de distribucin y luego seleccionar Diseo de Borde

Slide 69
 Interfaces Grficas
GUIs en Netbeans

Paso 7: En la ventana de organizacin de componentes

seleccionar panel y en la ventana de propiedades seleccionar
como Direccin: Center

Slide 70
 Interfaces Grficas
GUIs en Netbeans

Paso 8: En la ventana de organizacin de componentes

seleccionar etiquetaGanador y en la ventana de propiedades
seleccionar como Direccin: South

Slide 71
 Interfaces Grficas
GUIs en Netbeans

Paso 9: En la ventana de organizacin de componentes

seleccionar etiquetaJugadas y en la ventana de propiedades
seleccionar como Direccin: North

Slide 72
 Interfaces Grficas
GUIs en Netbeans

Paso 10: Hacer clic derecho en panel y seleccionar Activar

gestor de distribucin y luego seleccionar Diseo de Rejilla

Slide 73
 Interfaces Grficas
GUIs en Netbeans

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

organizacin de componentes, luego en la ventana de
propiedades digite en Columnas 3 y en Filas 1

Slide 74
 Interfaces Grficas
GUIs en Netbeans

Paso 12:La ventana de previsualizacin debe quedar de la

forma que indica la figura

Slide 75
 Interfaces Grficas
GUIs en Netbeans

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

interfaz grfica de la figura. Elimine los textos de los botones

Slide 76
 Interfaces Grficas
GUIs en Netbeans

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

preferredSize, a un valor de [103, 103]

Slide 77
 Interfaces Grficas
GUIs 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 imgenes con las imgenes a
continuacin

Imgenes de los botones (icon) Imgenes al pasar el mouse

encima de los botones (icon over)

Slide 78
 Interfaces Grficas
GUIs en Netbeans

Paso 16: En la ventana de organizacin de componentes

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

Slide 79
 Interfaces Grficas
GUIs en Netbeans

Paso 17: En la ventana de seleccin de icono, en paquete

seleccionar la carpeta imgenes, en archivo seleccionar
piedra.png

Slide 80
 Interfaces Grficas
GUIs en Netbeans

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

botones

Slide 81
 Interfaces Grficas
GUIs en Netbeans

Paso 18: En la ventana de organizacin de componentes

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

Slide 82
 Interfaces Grficas
GUIs en Netbeans

Paso 19: En la ventana de seleccin de icono, en paquete

seleccionar la carpeta imgenes, en archivo seleccionar
piedraover.png

Slide 83
 Interfaces Grficas
GUIs en Netbeans

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

botones

Slide 84
 Interfaces Grficas
GUIs en Netbeans

Paso 21: Reduzca el tamao del JFrame

Slide 85
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonPiedraActionPerformed
digite las lneas de cdigo que aparecen a continuacin
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");
}
}

Slide 86
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonPapelActionPerformed
digite las lneas de cdigo que aparecen a continuacin
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");
}
}

Slide 87
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonTijeraActionPerformed
digite las lneas de cdigo que aparecen a continuacin
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");
}
}

Slide 88
 Interfaces Grficas
GUIs en Netbeans

Paso 25: Al ejecutar la aplicacin deber observar la interfaz

grfica que se muestra a continuacin

Slide 89
 Interfaces Grficas
GUIs en Netbeans

Ejemplo: Por medio del asistente para la creacin de interfaces

grficas realizar la siguiente interfaz

Slide 90
 Interfaces Grficas
GUIs en Netbeans

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

proyecto sin fuentes y con un formulario JFrame

Slide 91
 Interfaces Grficas
GUIs en Netbeans

Paso 4: Arrastrar desde la

ventana de componentes los
siguientes elementos a la
ventana de previsualizacin

1 Panel
4 Etiquetas
1 Campo de texto
1 Lista desplegable
1 Spinner
2 Botones de opcin
1 Grupo de botones
1 Botn
1 Cuadro de contrasea
1 Barra de men
1 Men
1 Elemento de Men

Slide 92
 Interfaces Grficas
GUIs en Netbeans

Paso 5: De acuerdo a la figura:

Organizar los componentes

Ajustar los gestores de distribucin

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

Cambiar los nombres de los

componentes

Slide 93
 Interfaces Grficas
GUIs en Netbeans

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

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

Slide 94
 Interfaces Grficas
GUIs en Netbeans

Paso 7: En la ventana de organizacin de componentes

seleccionar panel y en la ventana de propiedades seleccionar
como Direccin: Center

Slide 95
 Interfaces Grficas
GUIs en Netbeans

Paso 8: En la ventana de organizacin de componentes

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

Slide 96
 Interfaces Grficas
GUIs en Netbeans

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

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

Slide 97
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonPiedraActionPerformed
digite las lneas de cdigo que aparecen en la siguiente diapositiva

Slide 98
 Interfaces Grficas
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");
}
}

Slide 99
 Interfaces Grficas
GUIs en Netbeans

Ejemplo: Por medio del asistente para la creacin de interfaces

grficas realizar la siguiente interfaz

Slide 100
 Interfaces Grficas
GUIs en Netbeans

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

proyecto sin fuentes y con un formulario JFrame

Slide 101
 Interfaces Grficas
GUIs en Netbeans

Paso 4: Arrastrar desde la

ventana de componentes los
siguientes elementos a la
ventana de previsualizacin

4 Paneles
17 Etiquetas
1 Campo de texto
4 Botones

Slide 102
 Interfaces Grficas
GUIs en Netbeans

Paso 5: De acuerdo a la figura:

Organizar los componentes

Ajustar los gestores de distribucin

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

Cambiar los nombres de los

componentes

Slide 103
 Interfaces Grficas
GUIs en Netbeans

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

los paneles

Slide 104
 Interfaces Grficas
GUIs en Netbeans

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

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

Slide 105
 Interfaces Grficas
GUIs en Netbeans

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

panelDescripcion en la ventana de organizacin 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)

Slide 106
 Interfaces Grficas
GUIs en Netbeans

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

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

Slide 107
 Interfaces Grficas
GUIs en Netbeans

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

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

Slide 108
 Interfaces Grficas
GUIs en Netbeans

Paso 8: Declara las siguientes variables globales en el cdigo de la

Interfaz:

String descripcion[] = new String[4];

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

Slide 109
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonDescripcionActionPerformed
digite las lneas de cdigo que aparecen en la siguiente diapositiva

Slide 110
 Interfaces Grficas
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]);
}

Slide 111
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonValoresActionPerformed digite
las lneas de cdigo que aparecen en la siguiente diapositiva

Slide 112
 Interfaces Grficas
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]);
}

Slide 113
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonUnidadesActionPerformed digite
las lneas de cdigo que aparecen en la siguiente diapositiva

Slide 114
 Interfaces Grficas
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]);
}

Slide 115
 Interfaces Grficas
GUIs en Netbeans

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

previsualizacin. En el mtodo botonAceptarActionPerformed digite
las lneas de cdigo que aparecen en la siguiente diapositiva

Slide 116
 Interfaces Grficas
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]);
}

Slide 117
 Interfaces Grficas
Ejercicio: El usuario digita un nmero en el cuadro de texto
Digite un valor una vez pulsado el botn Actualizar, se
actualiza el cono del campo Icono, escriba el cdigo que permita
actualizar la informacin de los componentes:
Cree los conos que requiera en un editor de imgenes.
Ejemplos:

Slide 118
 Interfaces Grficas

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 mtodo setIcon con parmetro de entrada null

Slide 119
 Interfaces Grficas
Sugerencias

Para facilitar la construccin de una interfaz grfica se recomienda realizar

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

En la construccin de la interfaz se recomienda primero agregar los paneles

que la conforman y ajustar su respectiva distribucin (BorderLayout,
GridLayout, etc) junto con sus propiedades (dimensiones de la grilla,
separacin, etc). Posteriormente se recomienda agregar cada elemento
grfico ( campos de texto, etiquetas, botones, etc) a su respectivo panel y en
la posicin deseada.

Repita los ejercicios de esta clase tomando como referencia nicamente la

interfaz en su apariencia final.

Slide 120
 webgrafia

http://download.oracle.com/javase/7/docs/api/

http://java.sun.com/developer/onlineTraining/GUI/Swing1/shortc

http://www.programacion.com/articulo/swing_y_jfc_java_founda

Slide 121