Download Interfaces Gráficas I

PROGRAMACIÓN ORIENTADA A OBJETOS
(L40629)
Sabino Miranda-Jiménez
UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO
Interfaz Gráfica de
Usuario (GUI)
Interfaz Gráfica de Usuario
• Diseñar el funcionamiento por medio de casos de
uso
• Diseñar la interfaz gráfica que implementará el
funcionamiento
• Java proporciona dos paquetes para manejo de
gráficos
 AWT (Abstract Window Toolkit)
 Swing
• Java los agrupa en los paquete
java.awt
Componentes Básicos SWING
Componentes contenedores
JFrame (ventana independiente)
JPanel (componente vacío)
• Componentes
ordinarios




JTextField
JButton
JComboBox
Jlist




JLabel
JTextArea
JCheckBox
JRadioButton
Clase JTextField
• Permite capturar texto por medio de una caja de
texto
• Métodos más usados
Valor de
retorno
void
String
void
String
String
void
Método
setText(String t)
getText()
setEditable(boolean b)
getSelectedText()
getText(int offs, int len)
select(int inicio, int fin)
Clase JButton
• Un botón puede desplegar texto, un icono o ambos
• Cuando un usuario hace clic al botón, los eventos
Action se envían a todos los Action listeners
• JButtons envían acciones de eventos.
• La interfaz ActionListener contiene un método en el
cual se programan las acciones que se ejecutarán al
hacer clic:
public void actionPerformed(ActionEvent v)
{
// ACCIONES
}
Clase JComboBox (1)
• Combina la funcionalidad de un TextField y una
lista drop-down
• Se puede presentar al usuario una lista de opciones
y sino aparece, la puede capturar (si es editable el
ComboBox)
String[] initialVals = {“básico", “medio", “avanzado"};
JComboBox combo = new JComboBox(initialVals);
Clase JComboBox (2)
• Métodos más usados
Valor de
retorno
void
Object
boolean
void
Object
void
Método
addItem(Object x)
getSelectedItem()
isEditable()
removeAllItems()
getItemAt(int index)
setSelectedIndex(int index)
Clase JList (1)
• Muestra um conjunto de datos en forma de lista
• Se pueden seleccionar y efectuar acciones
Valor de
retorno
Object
boolean
boolean
void
int
void
Método
getSelectedValue()
isSelectedIndex(int index)
isSelectionEmpty()
setListData(Object[] listData)
getSelectedIndex()
select(int inicio, int fin)
Clase JList (2)
• Inicializa la lista con tres opciones
String[] s = {"pedro","pablo","maria"};
jList1.setListData(s);
• Obtener el elemento seleccionado, si se selecciona
el segundo elemento s contendrá “pablo”
String s = (String) lista1.getSelectedValue();
Clase JOptionPane (1)
• La clase JOptionPane encapsula formatos de ventanas de diálogo,
sin declar ningún contenedor
• JOptionPane define 5 mensajes:





ERROR_MESSAGE
INFORMATION_MESSAGE
WARNING_MESSAGE
QUESTION_MESSAGE
PLAIN_MESSAGE
• El comportamiento es habilitado por los métodos estáticos
 showConfirmDialog()
 showMessageDialog().
Clase JOptionPane (2)
• Método estático showMessageDialog()
 Muestra un mensaje al usuario
JOptionPane.showMessageDialog(null, "Mensaje",
"Título Ventana", JOptionPane.INFORMATION_MESSAGE);
•Método estático showConfirmDialog()
Muestra una ventana de diálogo con dos botones SI y NO devuelve un valor según la
opción seleccionada
,
int x = JOptionPane.showConfirmDialog(null "¿Desea continuar?",
"Ventana de Confirmación!", JOptionPane.YES_NO_OPTION,
JOptionPane.QUESTION_MESSAGE);
X=0 si el usuario presiona “SI”
X=1 si el usuario presiona “NO”
UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO
Diseño de GUIs con
NetBeans
Aplicación Gráfica
Mostrar un saludo al usuario que capturó su nombre en la caja de
texto
El saludo se muestra en una ventana emergente al hacer clic sobre
el botón Ejecutar
Diseño de GUI (1)
• Crear un Proyecto en NetBeans
Archivo=> Proyecto Nuevo=> Java
(Categorías)=>Aplicación de Escritorio Java
(Proyectos)
Clic Siguiente
Diseño de GUI (2)
• Teclear Nombre del proyecto, Seleccionar “Aplicación Básica” , clic en
“Terminar”
Clic
Terminar
Espacio de Trabajo (1)
•
•
•
•
Se crean un paquete llamado Ventana
VentanaAboutBox.java es una ventana de “Acerca de” de la aplicación
VentanaApp.java contiene el método que ejecuta la aplicación (main)
VentanaView.java contiene el diseño y código de los componentes gráficos
 Este código es el que se modifica
Herramientas de
compilación/
ejecución
Cambia entre el
diseño gráfico y el
código fuente
Explorador del
proyecto
Área de diseño
Paleta de
componentes
gráficos
Aplicación Ventana (1)
• Hacer doble clic sobre el nombre VentanaView.java aparece del lado
derecho el espacio de diseño donde se agregarán los componentes gráficos
Paleta de
objetos
gráficos
Aplicación Ventana (2)
• Sobre el “Área de Diseño” hacer clic con el botón derecho del mouse para
obtener el menú desplegable
• Cambiar el nombre de la variable del espacio de Trabajo (contenedor)
representado por un JPanel
Menú
• Nuevo nombre ventanaInicio
emergente
Aplicación Ventana (3)
• Cambiar el nombre del Contenedor de los componentes
(JPanel) por un nombre significativo
Aplicación Ventana (4)
• Agregar un componente JTextField y un JButton al JPanel (ventanaInicio)
JButton
JTextField
Asignar nombres a los componentes
• Cambiar el nombre de las variables de instancia por default (jTextField1 y
jButton1) por nombres más significativos (txtNombre y btnSaludar)
Clic derecho
sobre el
componente
para aparecer el
menú
emergente
Cambiar el
nombre de
la variable
de instancia
por
txtNombre
Inicializar los componentes
• Editar el texto que aparece en el formulario (JPanel) el cual se desplegará en
la aplicación (jTextField1 y jButton1) por textos más significativos (“capture
su nombre” y “Ejecutar”)
Clic derecho
sobre el
componente
para aparecer el
menú
emergente
Cambiar el
texto del
component
e por
Ejecutar
Agregar acciones al componente JButton
• Desplegar el menú emergente (clic derecho sobre el componente)
• Agregar la acción actionPerformed al botón btnEjecutar
Clic en
ActionPerformed
Implementar las acciones-código (1)
• Al hacer clic en actionPerformed automáticamente nos lleva a
la sección del código (el método) donde se implementará el
código que se ejecuta cuando el usuario hace clic sobre el
botón
• Implementar las acciones
Método donde
se realizan las acciones
Manejador del
eventos
variable evt
Implementar las acciones-código (2)
• Implementar las siguientes acciones:
 Agregar al inicio del código la siguiente línea para hacer uso de la clase
JOptionPane
import javax.swing.JOptionPane;
 Extraer el texto captura en el JTextBox con el método getText() por
medio de la variable de instancia txtNombre
String s = txtNombre.getText();
 Ejecutar el método estático showMessageDialog de la clase
JOptionPane para mostrar el mensaje en la ventana emergente
JOptionPane.showMessageDialog(null, "Hola " + s);
Ejecución de la aplicación
Distribuir la aplicación (1)
• Generar el paquete de la aplicación, seleccionar del menú:
Ejecutar=>Generar Main Project
En la Pestaña Archivos aparecerá una carpeta dist que contiene la aplicación
Distribuir la aplicación (2)
• Las aplicación se puede ejecutar en cualquier PC que contenga Java SE 6
• En el directorio donde se creó el proyecto, la carpeta dist contiene la
aplicación y las librerías necesarias. Para distribuirla copiar la carpeta dist
Aplicación
+ librerías
necesarias
Distribuir la aplicación (3)
• Para ejecutar la aplicación:
 Desde Windows
Hacer doble clic sobre el archivo jar, contiene las clases
compiladas y ejecuta la clase VentanaApp que contiene el
método main
 Desde la consola de MS-DOS
C:\dist> java -jar Ventana.jar
la opción –jar le indica al interprete que es un archivo jar y
que contiene dentro las definiciones de qué archivo ejecutar.
En este caso VentanaApp
Ejercicio I
• Realizar un programa gráfico que capture dos
números y realice la suma y multiplicación de
dichos números. Los resultados se muestran en
una ventana emergente.
Ejercicio II
• Validar los datos del ejercicio1
• Mostrar al usuario un mensaje emergente si no
captura alguno de los datos
• Sólo mostrar el resultado si los datos son válidos
• Métodos sugeridos:
 parseInt
 getText
 equals
(Clase Integer)
(Clase JTextField)
(Clase String)