Download 1 Interfaz gráfica de usuario (GUI)

Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
1
Interfaz gráfica de usuario (GUI)
El lenguaje de programación Java proporciona varias herramientas para crear
programas que presenten una interfaz gráfica al usuario.
Hay dos paquetes que permiten desarrollar un entorno amigable: el paquete
AWT y el paquete Swing. Según la necesidad, podemos combinar elementos
de ambos paquetes.
2
El paquete AWT (Abstract Windows Toolkit)
Este paquete proporciona objetos gráficos, como botones, listas desplegables,
cuadros de texto, ventanas o formularios. Permite manejar eventos que se
activan cuando el usuario presiona una tecla o hace clic con el Mouse sobre
uno de los objetos. Para utilizar el paquete AWT y capturar eventos deben
agregarse las siguientes cabeceras:
import java.awt.*;
import java.awt.event.*;
3
El paquete Swing
Es similar al anterior, pero facilita el manejo del entorno gráfico y agrega
algunas mejoras. Para utilizar el paquete Swing debe agregarse la cabecera:
import javax.swing.*;
Podemos distinguir las clases de ambos paquetes, ya que las del paquete
Swing comienzan con la letra J.
3.1 Programa de ejemplo
El siguiente programa utiliza varios componentes del paquete Swing. A
continuación te describo cada línea de código.
1
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
//la clase GuiAct01 hereda los elementos de un marco
genérico y responde a eventos
public class GuiAct01 extends JFrame implements
ActionListener {
//se declaran una etiqueta, dos botones y un panel
private JLabel ltit;
private JButton bsup;
private JButton binf;
private JPanel p1;
public GuiAct01(){
//se invoca al constructor de JFrame
super("GUI");
//se instancian los objetos
ltit = new JLabel("Ejemplo N° 1");
bsup = new JButton("Superior");
binf = new JButton("Inferior");
p1 = new JPanel();
//se establece el tipo de fuente de la etiqueta
ltit.setFont(new
Font("Helvetica",Font.PLAIN,20));
//los botones responden a eventos
bsup.addActionListener(this);
binf.addActionListener(this);
//el panel tiene un borde alrededor
p1.setBorder(BorderFactory.createEmptyBorder(10,
30, 10, 30));
//el panel tiene varias filas y una columna
p1.setLayout(new GridLayout(0, 1));
//se agrega la etiqueta al panel
p1.add(ltit);
//se agrega un separador de 10 pixeles de altura
p1.add(Box.createRigidArea(new Dimension(0,10)));
//se agregan los botones
p1.add(bsup);
p1.add(binf);
//se establece el panel como contenedor
setContentPane(p1);
}
//Se detecta el botón que fue oprimido
public void actionPerformed(ActionEvent e) {
String texto="";
if(e.getActionCommand().equals("Superior"))
texto="Se oprimió el botón superior";
else if(e.getActionCommand().equals("Inferior"))
texto="Se oprimió el botón inferior";
2
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
//se muestra un cuadro de diálogo
JOptionPane.showMessageDialog(this,texto,"Información
al usuario",JOptionPane.INFORMATION_MESSAGE);
}
public static void main(String[] args) {
JFrame frame = new GuiAct01();
//se maneja el evento correspondiente al botón cerrar
WindowListener l = new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
};
//el marco responde a este evento
frame.addWindowListener(l);
//el marco se dimensiona según el tamaño de sus componentes
frame.pack();
//el marco se hace visible
frame.setVisible(true);
}
}
Como pudiste observar, la programación del entorno gráfico es una tarea
compleja que requiere varias líneas de código. El conocer todas las
herramientas a fondo llevaría todo el año. Por eso te recomiendo que empieces
de a poco y vayas probando más componentes a medida que te familiarices
con ellos.
Nosotros vamos a trabajar con los componentes más comunes: marcos,
paneles, botones, etiquetas, cuadros de texto y cuadros de diálogo. A medida
que los programas requieran el conocimiento de algún componente más, lo
iremos agregando.
4
La clase JFrame
Un Frame o marco es un contenedor de alto nivel. Tiene un borde, un título y
botones para cerrar, minimizar, maximizar y restaurar similares a las ventanas
de Windows.
El marco tiene un panel principal, donde se agregan otros componentes.
3
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
5
La clase JPanel
Un Panel o panel es un contenedor de propósito general. Para ubicar sus
componentes en forma apropiada, utiliza controladores de distribución. Los
controladores más usados son FlowLayout, BorderLayout, BoxLayout.
5.1 BorderLayout
Este controlador utiliza cinco áreas “geográficas” para distribuir los
componentes: north, south, east, west y center. El espacio extra se ubica en el
área central. No es obligatorio usar las cinco áreas simultáneamente. Los
paneles pueden anidarse, colocando uno dentro de otro.
El constructor admite dos formas:
BorderLayout()
BorderLayout(int horizontalGap, int verticalGap)
La primera forma no deja espacio entre los componentes. La segunda
establece la cantidad de pixeles horizontales y verticales entre componentes.
El siguiente ejemplo muestra la ubicación de 5 botones, uno en cada región. Si
maximizás el formulario, vas a observar que la región central ocupa todo el
espacio disponible.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Border extends JFrame {
private JButton bnor;
private JButton bsur;
private JButton best;
private JButton boes;
private JButton bcen;
public Border() {
super("Border Layout");
bnor=new JButton("Norte");
bsur=new JButton("Sur");
best=new JButton("Este");
boes=new JButton("Oeste");
bcen=new JButton("Centro");
getContentPane().setLayout(new BorderLayout());
getContentPane().add("North", bnor);
getContentPane().add("South", bsur);
4
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
getContentPane().add("East", best);
getContentPane().add("West", boes);
getContentPane().add("Center", bcen);
}
public static void main(String args[]) {
JFrame frame = new Border();
WindowListener l = new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
};
frame.addWindowListener(l);
frame.pack();
frame.show();
}
}
5.1.1.
Actividad
1. Creá una clase con un marco que utilice BorderLayout().
2. Agregá dos paneles (pnor y psur), uno al norte y el otro al sur.
3. Configurá el color de fondo como rojo y verde respectivamente. La
sintaxis es: pnor.setBackground (Color.red) y psur.setBackground
(Color.green).
4. Compilá y ejecutá la clase.
5. Maximizá el formulario y observá el nuevo tamaño ocupado.
5.2 FlowLayout
Este controlador es muy fácil de utilizar. Simplemente ubica los componentes
uno al lado del otro en la misma fila, o en filas sucesivas cuando no hay más
lugar. Por defecto los componentes se ubican centrados, pero puede
modificarse la configuración para ajustarlos a izquierda o a derecha.
Hay tres formatos posibles para los constructores:
public FlowLayout()
public FlowLayout(int alineación)
public FlowLayout(int alineación, int horizontalGap, int
verticalGap)
5
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
El siguiente ejemplo ubica dos componentes en la primera fila y el tercero en la
segunda fila, alineado hacia la izquierda.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Flow extends JFrame {
private JButton b1;
private JTextField t1;
private JButton b2;
public Flow() {
super("Flow Layout");
b1=new JButton("Este botón es una prueba de
FlowLayout() que se ubica en la primera fila");
t1=new JTextField("Este texto entra en la misma
linea y ocupa hasta el final de la fila");
b2=new JButton("Este boton no tiene que entrar en
la misma fila, sino escribir más texto");
getContentPane().setLayout(new
FlowLayout(FlowLayout.LEFT));
b1.setFont(new Font("Helvetica",Font.PLAIN,20));
t1.setFont(new Font("Helvetica",Font.PLAIN,20));
b2.setFont(new Font("Helvetica",Font.PLAIN,20));
getContentPane().add(b1);
getContentPane().add(t1);
getContentPane().add(b2);
}
public static void main(String args[]) {
JFrame frame = new Flow();
WindowListener l = new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
};
frame.addWindowListener(l);
frame.pack();
frame.show();
}
}
5.2.1.
Actividad
1. Creá una clase con un marco que implemente FlowLayout.
2. Agregá tres botones centrados en la primera fila con los títulos: uno, dos
y tres.
6
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
3. Al pulsar cada botón se muestra un cuadro de diálogo que indica el
botón presionado.
5.3 GridLayout
Este controlador ubica los componentes en una grilla con tantas filas y
columnas como indiquemos. Si una de las dos dimensiones es desconocida, se
escribe un cero. Todas las celdas son del mismo tamaño. La sintaxis es:
public GridLayout(int filas, int columnas)
public GridLayout(int filas, int columnas, int
horizontalGap, int verticalGap)
El siguiente es un ejemplo del uso de GridLayout:
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Grid extends JFrame {
private JLabel l1;
private JLabel l2;
private JTextField t1;
private JTextField t2;
public Grid() {
super("Grid Layout");
l1=new JLabel("Primero");
l2=new JLabel("Segundo");
t1=new JTextField(20);
t2=new JTextField(20);
getContentPane().setLayout(new
GridLayout(0,2,10,10));
getContentPane().add(l1);
getContentPane().add(t1);
getContentPane().add(l2);
getContentPane().add(t2);
}
public static void main(String args[]) {
JFrame frame = new Grid();
WindowListener l = new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
};
frame.addWindowListener(l);
7
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
frame.pack();
frame.show();
}
}
5.3.1.
Actividad
1. Crear una clase que implemente un distribuidor GridLayout de 1
columna y un número indeterminado de filas.
2. Agregar una etiqueta de título con un tamaño de letra mayor que el
resto, un cuadro de texto y un botón.
6
La clase JButton
Ya estuviste trabajando con botones, ahora simplemente vamos a describir sus
características más comunes.
Al instanciar un JButton, se le agrega un texto descriptivo, como:
JButton bace=new JButton(“Aceptar”);
Si se desea habilitar o deshabilitar un botón, la sintaxis es:
bace.setEnabled(true);
bace.setEnabled(false);
Para que responda a eventos:
b1.addActionListener(this);
Para detectar cuál botón fue presionado:
public void actionPerformed(ActionEvent e) {
if(e.getActionCommand().equals("Aceptar"))
.........
}
8
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
7
La clase JLabel
Esta clase implementa una etiqueta no editable. El texto que se muestra puede
determinarse en el momento de la instanciación o más adelante:
JLabel lnom=new JLabel(“Nombre: “);
lnom.setText(“Apellido y nombre: “);
Para obtener el texto de una etiqueta la sintaxis es:
String texto=lnom.getText();
8
La clase JTextField
El JTextField es un cuadro de texto editable. Como ya estarás notando, la
sintaxis de todos los componentes es parecida. Para crear un objeto que
muestre un texto inicialmente:
JTextField tnom=new JTextField(“Perez “);
tnom.setText(“Juan Perez“);
Para obtener el texto de un cuadro de texto la sintaxis es:
String texto=tnom.getText();
Para determinar si el texto puede editarse o no:
tnom.setEditable(true);
tnom.setEditable(false);
El cuadro de texto puede responder a eventos, por ejemplo cuando el usario
pulsa <enter> dentro de éste. Para detectar este evento, la sintaxis es:
public void actionPerformed(ActionEvent e) {
if(e.getSource() == tnum)
buscar();
}
9
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
9
La clase JTextArea
Con esta clase se puede implementar un área de texto de varias líneas,
opcionalmente editable. Para instanciar un área de texto, la sintaxis es:
JTextArea jtarea=new JTextArea(filas, columnas);
Para habilitarlo o deshabilitarlo:
jtarea.setEnabled(true);
jtarea.setEnabled(false);
Para colocar texto, eliminando el anterior:
jtarea.setText(“texto”);
Para agregar texto al final:
jtarea.append(“texto”);
10
La clase JScrollPane
Esta clase implementa un panel deslizable que puede agregarse a otro
componente. Es muy común emplearlo junto a un área de texto, como en el
ejemplo:
JScrollPane jspane = new JScrollPane(jtarea);
El panel deslizable es el que se agrega en el panel contenedor:
panel.add(jspane);
10
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
11
La clase JOptionPane
Esta clase permite crear cuadros de diálogo y configurarlos según el destino
que se les va a dar. Te voy a explicar brevemente los diálogos básicos, pero te
aconsejo que investigues otras posibilidades más completas.
1. Un cuadro de diálogo con un botón “Aceptar”.
JOptionPane.showMessageDialog(lugar,mensaje,título,ícono);
lugar: indica la ubicación física del cuádro de diálogo, dentro de un
componente.
2. Un cuadro de diálogo con tres botones, “Sí”, “No”, “Cancelar”. Tiene un valor
de retorno que indica cuál botón se oprimió.
int opción= JOptionPane.showConfirmDialog
(lugar,mensaje,título,ícono);
El valor de retorno puede ser una de estas constantes:
JOptionPane.YES_OPTION)
JOptionPane.NO_OPTION)
JOptionPane.CANCEL_OPTION)
Con una alternativa se puede preguntar por el valor de retorno y decidir una
acción.
11.1 Íconos
Hay cinco posibilidades de íconos:
Sin ícono:
JOptionPane.PLAIN_MESSAGE
11
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
Pregunta:
JOptionPane.QUESTION_MESSAGE
Información:
JOptionPane.INFORMATION_MESSAGE
Advertencia:
JOptionPane.WARNING_MESSAGE
Error:
JOptionPane.ERROR_MESSAGE
12
Ejemplo combinado
El siguiente ejemplo implementa un sumador de números. El marco consta de
dos cuadros de texto donde se escriben los números que se van a sumar. Al
presionar el botón sumar, el resultado se muestra en otro cuadro de texto. El
botón limpiar deja el formulario en blanco, como estaba inicialmente. Los datos
ingresados se convierten a formato numérico para poder sumarlos. El resultado
es convertido a String para mostrarlo en el cuadro de texto. En caso de error se
muestra un cuadro de diálogo.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class GuiAct02 extends JFrame implements
ActionListener{
private JLabel ltit,lnum1,lnum2,lres;
private JTextField tnum1,tnum2,tres;
12
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
private JButton bsum;
private JButton blim;
private JPanel psup,pcen,pinf;
public GuiAct02(){
super("GUI");
ltit = new JLabel("Ejemplo N° 2");
lnum1=new JLabel("Primer número: ");
lnum2=new JLabel("Segundo número: ");
lres=new JLabel("Resultado: ");
tnum1=new JTextField();
tnum2=new JTextField();
tres=new JTextField();
tres.setEditable(false);
bsum = new JButton("Sumar");
blim = new JButton("Limpiar");
psup = new JPanel();
pcen = new JPanel();
pinf = new JPanel();
ltit.setFont(new
Font("Helvetica",Font.PLAIN,20));
bsum.addActionListener(this);
blim.addActionListener(this);
psup.setLayout(new FlowLayout());
psup.add(ltit);
pcen.setLayout(new GridLayout(0, 2));
pcen.add(lnum1);
pcen.add(tnum1);
pcen.add(lnum2);
pcen.add(tnum2);
pcen.add(lres);
pcen.add(tres);
pinf.setLayout(new FlowLayout());
pinf.add(bsum);
pinf.add(blim);
getContentPane().setLayout(new GridLayout(0,1));
getContentPane().add(psup);
getContentPane().add(pcen);
getContentPane().add(pinf);
}
public void actionPerformed(ActionEvent e) {
if(e.getActionCommand().equals("Sumar")){
sumar();
}
else if(e.getActionCommand().equals("Limpiar"))
limpiar();
}
public void sumar(){
float num1=0,num2=0;
try{
num1=Float.parseFloat(tnum1.getText());
13
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
num2=Float.parseFloat(tnum2.getText());
Calculadora calc=new Calculadora(num1,num2);
tres.setText(String.valueOf(calc.sumar()));
}catch(NumberFormatException e){
JOptionPane.showMessageDialog(this,"Los
datos no son válidos","Error",JOptionPane.ERROR_MESSAGE);
}
}
public void limpiar(){
tnum1.setText("");
tnum2.setText("");
tres.setText("");
}
public static void main(String[] args) {
JFrame frame = new GuiAct02();
WindowListener l = new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
};
frame.addWindowListener(l);
frame.pack();
frame.setVisible(true);
}
}
13
Actividad
1. Escribir una clase Empleado con los siguientes atributos: numero de
legajo, apellido y nombre, sueldo básico, años de antigüedad. La clase
debe tener los métodos necesarios y además el método calcularSueldo()
que retorne el sueldo a cobrar. El mismo se calcula de la siguiente forma:
entre 0 y 9 años de antigüedad
se agrega un 10% al básico
entre 10 y 19 años de antigüedad
se agrega un 20% al básico
20 años o más
se agrega un 30% al básico
A la suma de ambos importes se le descuenta un 21% en concepto de
jubilación y obra social.
Escribir una GUI que permita ingresar los datos de un empleado y al
presionar un botón, muestre en un cuadro de texto, el sueldo a cobrar.
Se debe validar que los campos de carácter no estén vacíos y que los
numéricos contengan solamente números.
14
Instituto Superior de Formación Técnica 179
Programación II
Unidad III
Interfaz gráfica de usuario
2. Crear una GUI que permita manejar el archivo relativo cuentas.dat,
definido en la unidad anterior e inicializado con registros en blanco. El
marco debe tener botones que permitan dar de alta, de baja o modificar
una cuenta.
3. Implementar el trabajo de archivos relativos cambiando la vista del
programa: de línea de comandos a interfaz gráfica.
15