Interfaces Graficas PDF

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
¿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
¿Qué son?
 Una interfaz gráfica de usuario (GUI) presenta un modo amigable

al usuario para interactuar con un programa
EISC
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
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
Componentes
 Ejercicio: ¿Qué componentes identifica en la siguiente interfaz

gráfica?
EISC
Componentes

gráfica?
JFrame
JTextField
JButton
JPanel
(16 botones)
EISC
Componentes

gráfica?
EISC
Componentes

gráfica?
JFrame
JLabel
JButton
JPanel
JLabel (3 botones)
EISC
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
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
Componentes

gráfica?
EISC
Componentes

gráfica?
JFrame
JLabel
JTextField
JLabel
JRadioButton
JSpinner
JCheckBox
JButton
JLabel
EISC
Componentes

gráfica?
JPanel
(4 elementos)
JPanel
(2 elementos)
JPanel
(2 elementos)
JPanel
(3 elementos)
EISC
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
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
 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
 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
 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
Layouts
 Los gestores de distribución (Layouts) permiten ordenar los

componentes de una interfaz de distintas formas
EISC
Layouts

 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
Layouts

 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
Layouts

 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
Layouts

 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
Layouts
 Ejemplo: La gráfica muestra el empleo de gestores de distribución

JFrame
(Diseño de flujo)
JPanel
(Diseño de rejilla)
JPanel
JPanel
JPanel
EISC
Layouts
 Ejemplo: La gráfica muestra el empleo de gestores de distribución
JFrame
(Diseño de flujo)
JPanel
EISC
Layouts
 Ejercicio: Identifique los tipos de gestores de distribución en la

siguiente interfaz gráfica:
EISC
Layouts

JFrame
(Diseño de borde)
JPanel
EISC
Layouts

EISC
Layouts

JFrame
(Diseño de borde)
JPanel
EISC
Layouts

EISC
Layouts

JFrame
(Diseño de rejilla 7x1)
JPanel
JPanel
EISC
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
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
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
GUI’S
Netbeans
GUI’s en Netbeans
 Netbeans cuenta con un asistente para la creación de interfaces

gráficas
EISC
GUI’s en Netbeans
 Para emplear el asistente de creación de interfaces gráficas debe

seguir los siguientes pasos:
EISC
GUI’s en Netbeans
 Paso 1: Crear un proyecto nuevo sin fuentes
EISC
GUI’s en Netbeans
 Paso 2: Hacer clic derecho sobre la carpeta paquete de fuentes,

seleccionar Nuevo y luego Formulario JFrame
EISC
GUI’s en Netbeans
 Paso 3: Colocar como nombre Interfaz y hacer clic en Terminar
EISC
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
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
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
GUI’s en Netbeans
 Ejemplo: Por medio del asistente para la creación de interfaces

gráficas realizar la siguiente interfaz
EISC
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
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
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
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
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
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
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
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
GUI’s en Netbeans
 Paso 10: Mueva los componentes etiqueta, botón y

campoDeTexto dentro del componente panel
EISC
GUI’s en Netbeans
 Paso 10:La ventana de previsualización debe quedar de la

forma que indica la figura
EISC
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
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
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
GUI’s en Netbeans

seleccionar etiqueta y en la ventana de propiedades, ajustar
las propiedades de la etiqueta de acuerdo con la figura
EISC
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
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
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
GUI’s en Netbeans

EISC
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
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
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
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
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
GUI’s en Netbeans

EISC
GUI’s en Netbeans

seleccionar etiquetaGanador y en la ventana de propiedades
seleccionar como Dirección: South
EISC
GUI’s en Netbeans

seleccionar etiquetaJugadas y en la ventana de propiedades
seleccionar como Dirección: North
EISC
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
GUI’s en Netbeans

propiedades digite en Columnas 3 y en Filas 1
EISC
GUI’s en Netbeans
 Paso 12:La ventana de previsualización debe quedar de la

forma que indica la figura
EISC
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
GUI’s en Netbeans
 Paso 14:Para cada uno de los botones, modifique la propiedad

preferredSize, a un valor de [103, 103]
EISC
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
GUI’s en Netbeans

seleccionar el botonPiedra, en la ventana de propiedades
hacer clic en icon
EISC
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
GUI’s en Netbeans
 Paso 17: Repetir el proceso para asignar iconos a los otros

botones
EISC
GUI’s en Netbeans

seleccionar el botonPiedra, en la ventana de propiedades
hacer clic en rollovericon
EISC
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
GUI’s en Netbeans
 Paso 20: Repetir el proceso para asignar iconos a los otros

botones
EISC
GUI’s en Netbeans
 Paso 21: Reduzca el tamaño del JFrame
EISC
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");
}
etiquetaJugadas.setText("La PC juega Papel, Usted juega Piedra");
etiquetaGanador.setText("La PC gana");
}
etiquetaJugadas.setText("La PC juega Tijera, Usted juega Piedra");
etiquetaGanador.setText("El ganador es usted");
}
}
EISC
GUI’s en Netbeans
 Paso 23: Hacer doble clic en el botonPapel en la ventana de

previsualización. En el método botonPapelActionPerformed
private void botonPapelActionPerformed(java.awt.event.ActionEvent evt) {
etiquetaJugadas.setText("La PC juega Piedra, Usted juega Papel");
etiquetaGanador.setText("El ganador es Usted");
}
etiquetaJugadas.setText("La PC juega Papel, Usted juega Papel");
}
etiquetaJugadas.setText("La PC juega Tijera, Usted juega Papel");
}
}
EISC
GUI’s en Netbeans
 Paso 24: Hacer doble clic en el botonTijera en la ventana de

previsualización. En el método botonTijeraActionPerformed
private void botonTijeraActionPerformed(java.awt.event.ActionEvent evt) {
etiquetaJugadas.setText("La PC juega Piedra, Usted juega Tijera");
}
etiquetaJugadas.setText("La PC juega Papel, Usted juega Tijera");
etiquetaGanador.setText("El usuario gana");
}
etiquetaJugadas.setText("La PC juega Tijera, Usted juega Tijera");
}
}
EISC
GUI’s en Netbeans
 Paso 25: Al ejecutar la aplicación deberá observar la interfaz

gráfica que se muestra a continuación
EISC
GUI’s en Netbeans

EISC
GUI’s en Netbeans

EISC
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 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
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
GUI’s en Netbeans

propiedades digite en Columnas 2, en Filas 5, en Surco
Horizontal 2 y en Surco Vertical 2
EISC
GUI’s en Netbeans

EISC
GUI’s en Netbeans

seleccionar radioVIP y en la ventana de propiedades, en
buttonGroup, seleccionar grupoCategoria. Repetir el
procedimiento para el componente radioGeneral
EISC
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
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
private void botonReservarActionPerformed(java.awt.event.ActionEvent evt) {
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
GUI’s en Netbeans

EISC
GUI’s en Netbeans

EISC
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
 4 Botones
EISC
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
GUI’s en Netbeans
 Paso 5: El resto de las etiquetas se deben ubicar en cada uno de

los paneles
EISC
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
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
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
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
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
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
private void botonDescripcionActionPerformed(java.awt.event.ActionEvent evt) {
int tam = descripcion.length;
for (int i = 0; i < tam; i++) {
descripcion[i] = JOptionPane.showInputDialog("Digite producto");
}
etiquetaP1.setText(descripcion[0]);
}
EISC
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
private void botonValoresActionPerformed(java.awt.event.ActionEvent evt) {
int tam = valores.length;
for (int i = 0; i < tam; i++) {
valores[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite valor"));
}
etiquetaV1.setText("" + valores[0]);
}
EISC
GUI’s en Netbeans
 Paso 8: Hacer doble clic en el botonUnidades en la ventana de

previsualización. En el método botonUnidadesActionPerformed digite
EISC
private void botonUnidadesActionPerformed(java.awt.event.ActionEvent evt) {
int tam = unidades.length;

for (int i = 0; i < tam; i++) {
unidades[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite unidades"));
}
etiquetaU1.setText("" + unidades[0]);
}
EISC
GUI’s en Netbeans
 Paso 8: Hacer doble clic en el botonAceptar en la ventana de

previsualización. En el método botonAceptarActionPerformed digite
EISC
private void botonAceptarActionPerformed(java.awt.event.ActionEvent evt) {
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!");
}
}
EISC
 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
 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
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
ALGUNAS COSITAS..
JOPtionPane
"Advertencias",
Titulo del diálogo
EISC
ALGUNAS COSITAS..
JOPtionPane
"Advertencias",
Ícono y botones del diálogo

EISC
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
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
ALGUNAS COSITAS..
JOPtionPane
Mensaje de Error:
"Clave erronea Sistema no Activado",
"Informacion",
JOptionPane.ERROR_MESSAGE);
EISC
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
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

Interfaces Graficas PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Interfaces Graficas PDF

Загружено:

Авторское право:

Доступные форматы

INTERFACES GRÁFICAS

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

u@algoritmia:~$ mkdir documentos

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

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

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

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

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

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

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

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

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

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

 De acuerdo al tipo de componente es posible realizar

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

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

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

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

Diseño de flujo (FlowLayout)

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

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

Los componentes que se

Diseño de rejilla (GridLayout)

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

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

Diseño de borde (BorderLayout)

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

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

Diseño de borde y Diseño de rejilla

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

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

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

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

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

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

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

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

 Algunos de los eventos que pueden ocurrir son:

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

 Cada componente tiene eventos relacionados y a cada evento se

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

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

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

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

 Paso 1: Crear un proyecto nuevo sin fuentes

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

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

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

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

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

 Paso 4: Arrastrar desde la ventana de componentes los

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

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

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

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

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

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

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

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

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