Interfaz Gráfica en Java
40
Topicos Selectos de Programación Interfaz Gráfica en Java José Luís García Cerpas
Transcript of Interfaz Gráfica en Java
Top
icos S
ele
cto
s d
e
Pro
gra
mació
n
Interfaz Gráfica en Java
José Luís García Cerpas
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nInterfaz gráfica de usuario
En java, los programas basados en GUI se implementan con el uso de las clases provenientes de los paquetes estándar javax.swing y java.awt. A ellos se les referirá Colectivamente como clases GUI.
Generalmente se prefiere utilizar las clases Swing llamadas clases de peso ligero sobre las clases AWT llamadas clases de peso pesado.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nDiferencia entre AWT y swing
Las clases swing proporcionan mayor compatibilidad a través de diferentes sistemas operativos. Se implementan completamente en Java.
Las clases AWT se implementan con el uso de los objetos GUI nativos. por ejemplo un AWT button se implementa con el uso del objeto Windows button, Macintosh button, etc
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEventos
Un evento ocurre cuando el usuario interactúa con un objeto GUI. Por ejemplo, cuando usted mueve el cursor, oprime el botón o selecciona una opción de menu.
Los objetos se programan para responder a dichos eventos al definir métodos de manejo de eventos.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEntrada / salida simple
Una de las formas más sencillas para proporcionar entrada y salida simple con base en GUI es el uso de la clase JOptionPane.
JOptionPane.showMessageDialog(null,”Hola Mundo Java”);
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEntrada / salida simple (cont..)
Tambien se puede usar la clase JOptionPane para entrada al usar su método showInputDialog.
String entrada;
entrada = JOptionPane.showInputDialog(null, “Introduce tu nombre”);
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEjemplo de ventana
import javax.swing.JFrame;
class Ejemplo{ public Ejemplo() { JFrame x = new JFrame("Primera Ventana"); x.setSize(300,300); x.setLocation(150,200); x.setVisible(true); x.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String [] args) { new Ejemplo(); }}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEjemplo de ventana (usando herencia)
import javax.swing.JFrame;
class Ejemplo extends JFrame {
public Ejemplo() { super("Primera Ventana");//constructor JFrame setSize(300,300); setLocation(150,200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } public static void main(String [] args) { new Ejemplo(); }
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nDespliegue de la ventana
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nDespliegue de la ventana
Todas las propiedades de la ventana se establecen en el constructor por defecto, para establecer el título se pasa al método setTitle(), para establecer el tamaño setSize(), para establecer la esquina superior izquierda del marco en la coordenada, se pasan los valores x y y al método setLocation. Finalmente para terminar la ventana cuando el marco se cierre, se llama setDefaultCloseOperation()
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nMostrando ventana con color
import javax.swing.JFrame;import java.awt.Container;import java.awt.Color;
class Ejemplo extends JFrame {
public Ejemplo() { super("Primera Ventana"); setSize(300,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Container contenidoPanel = getContentPane(); contenidoPanel.setBackground(Color.BLUE); setVisible(true); } public static void main(String [] args) { new Ejemplo(); }}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nColocando un botón
Existen dos enfoques generales a la colocación de botones (otros), en el panel de contenido, uno que usa un manejador de presentación otro que no lo utiliza. El manejador de presentación es un objeto que controla la colocación de los objetos GUI. Si no se usa manejador de presentación, entonces los objetos GUI se colocan al especificar explícitamente su posición y tamaño en el panel de contenido posicionamiento absoluto.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nColocando botones
(FlowLayout) Primero se especifica el manejador de presentación
del panel de contenido:
ContenidoPanel.setLayout(new FlowLayout());
Después, se agregan los botones al panel.
contenidoPanel.add(botonBien);
contenidoPanel.add(botonCancela);
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nColocando botones
Puesto que el tamaño por defecto de un botón depende del número de caracteres en la etiqueta del botón, los tamaños de los dos botones serán diferentes. Se puede superar si se llama al método setSize.
botonMostrar.setSize(80,30);
botonSalir.setSize(80,30);
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nColocando botones
public Ejemplo(){super("Primera Ventana");setLocation(150,200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);Container contenidoPanel = getContentPane();contenidoPanel.setBackground(Color.BLUE);contenidoPanel.setLayout(new FlowLayout());botonMostrar = new JButton("Mostrar");botonSalir = new JButton("Salir");contenidoPanel.add(botonMostrar);contenidoPanel.add(botonSalir);botonMostrar.setSize(80,30);botonSalir.setSize(80,30);pack(); //toma el tamaño justo de los componentessetVisible(true);
}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nManejo de eventos del botón
Un objeto GUI, donde el evento ocurre se llama evento, o simplemente la fuente del evento.
Cuando un evento se genera, el sistema notifica a los receptores de eventos relevantes.
Un objeto receptor de evento, es un objeto que incluye un método que se ejecuta en respuesta a los eventos generados.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
n
Programación del evento presionar botón en el objeto miBoton
botonMostrar.addActionListener( new ActionListener(){ public void actionPerformed (ActionEvent e){ JOptionPane.showMessageDialog (null, “Mensaje“, "Atención", JOptionPane.INFORMATION_MESSAGE);}});
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nevent source y event listener
El modelo de eventos de Java está basado en que los objetos sobre los que se producen los eventos (event sources) “registran” los objetos que habrán de gestionarlos (event listeners), para lo cual los event listeners habrán de disponer de los métodos adecuados.
Estos métodos se llamarán automáticamente cuando se produzca el evento. La forma de garantizar que los event listeners disponen de los métodos apropiados para gestionar los eventos es obligarles a implementar una determinada interface Listener.
Las interfaces Listener se corresponden con los tipos de eventos que se pueden producir. los distintos tipos de eventos y los métodos de las interfaces Listener que hay que definir para gestionarlos.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEventos de alto nivel
Los eventos de alto nivel se llaman también eventos semánticos, porque la acción de la que derivan tiene un significado en sí misma, en el contexto de las interfaces gráficas de usuario. Los eventos de bajo nivel son las acciones elementales que hacen posible los eventos de alto nivel.
Son eventos de alto nivel los siguientes eventos: los cuatro que tienen que ver con hacer clic sobre botones o elegir comandos en menús (ActionEvent), cambiar valores en barras de desplazamiento (AdjustmentEvent), elegir valores (ItemEvents) y cambiar el texto (TextEvent)
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEventos de bajo nivel
Los eventos de bajo nivel son los que se producen con las operaciones elementales con el , teclado, containers y windows.
Las seis clases de eventos de bajo nivel son los eventos relacionados con componentes (ComponentEvent), con los containers (ContainerEvent), con pulsar teclas (KeyEvent), con mover, arrastrar, pulsar y soltar con el ratón (MouseEvent), con obtener o perder el foco (FocusEvent) y con las operaciones con ventanas (WindowEvent).
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nJerarquía de eventos en java
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nInterfaces Listener
Cada objeto que puede recibir un evento (event source), “registra” uno o más objetos para que los gestionen (event listener). Esto se hace con un método que tiene la forma, eventSourceObject.addEventListener(eventListenerObject);
donde eventSourceObject es el objeto en el que se produce el evento, y eventListenerObject es el objeto que deberá gestionar los eventos. La relación entre ambos se establece a través de una interface Listener que la clase del eventListenerObject debe implementar
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nInterfaces Listener
A diferencia de una clase, una interfaz Java sólo incluye constantes y métodos abstractos. Por ejemplo, la clase Ejemplo, se define como sigue:
Se implementa la interfaz ActionListener
class Ejemplo extends JFrame implements ActionListener
Se llama al método addActionListener de botonMostrar
botonMostrar.addActionListener(this);
Se escribe el código que responda al evento
public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog (null,"Ha presionado el botón <mostrar>","Atención", JOptionPane.INFORMATION_MESSAGE);}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
n import javax.swing.JFrame;
import javax.swing.JButton;import java.awt.Container;import java.awt.Color;import java.awt.FlowLayout;import java.awt.event.ActionListener;import java.awt.event.ActionEvent;import javax.swing.JOptionPane;
class Ejemplo extends JFrame implements ActionListener {
public Ejemplo() { super("Primera Ventana"); setLocation(150,200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Container contenidoPanel = getContentPane(); contenidoPanel.setBackground(Color.BLUE); contenidoPanel.setLayout(new FlowLayout()); botonMostrar = new JButton("Mostrar"); botonSalir = new JButton("Salir"); contenidoPanel.add(botonMostrar); contenidoPanel.add(botonSalir); botonMostrar.setSize(80,30); botonSalir.setSize(80,30); botonMostrar.addActionListener(this); pack(); //toma el tamaño justo de los componentes setVisible(true); } public void actionPerformed(ActionEvent e) { //Mostrar una caja de diálogo que muestre un mensaje... JOptionPane.showMessageDialog (null,"Ha presionado el botón <mostrar>","Atención", JOptionPane.INFORMATION_MESSAGE); }
public static void main(String [] args) { new Ejemplo(); } private JButton botonMostrar; private JButton botonSalir;}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nClases Adapter
Java proporciona ayudas para definir los métodos declarados en las interfaces Listener. Una de estas ayudas son las clases Adapter, que existen para cada una de las interfaces Listener que tienen más de un método.
Su nombre se construye a partir del nombre de la interface, sustituyendo la palabra “Listener” por “Adapter”.
Hay 7 clases Adapter: ComponentAdapter, ContainerAdapter, FocusAdapter, KeyAdapter, MouseAdapter, MouseMotionAdapter y WindowAdapter.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nimport javax.swing.JFrame;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent; class VentanaCerrable2 extends JFrame { public VentanaCerrable2(String title){ super(title); setSize(200,300); getContentPane().setSize(500,500); CerrarVentana cv = new CerrarVentana(); this.addWindowListener(cv); setVisible(true); } public static void main(String [] args){ new VentanaCerrable2("Ventana"); } } class CerrarVentana extends WindowAdapter { public void windowClosing(WindowEvent e) { System.exit(0); } }
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nClases Adapter
Todavía hay otra forma de responder al evento que se produce cuando el usuario desea cerrar la ventana. Las clases anónimas de Java son especialmente útiles en este caso.
En realidad, para gestionar eventos sólo hace falta un objeto que sea registrado como event listener y contenga los métodos adecuados de la interface Listener.
Las clases anónimas son útiles cuando sólo se necesita un objeto de la clase:new WindowAdapter()
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nimport javax.swing.JFrame;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent; class VentanaCerrable3 extends JFrame { public VentanaCerrable3(String title) { super(title); setSize(200,300); getContentPane().setSize(500,500); CerrarVentana cv = new CerrarVentana();
this.addWindowListener(new WindowAdapter(){ public void windowClosing(WindowEvent e){ System.exit(0); } }); setVisible(true); } public static void main(String [] args){ new VentanaCerrable3("Ventana"); }}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nVentanas con imágenes
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nVentanas con imágenes
Un objeto de tipo java.awt.Graphics define el contexto en el que se dibuja e incluye métodos para dibujar distintos tipos de figuras.
El método Graphics.drawImage() nos permite dibujar imágenes en formato GIF, JPG o PNG
Las imágenes podemos leerlas con el método getImage() de la clase java.awt.Toolkit.
La redefinición del método paint(), el cual se invoca automáticamente por el sistema cuando la ventana que lo incluye pasa a un primer plano.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nimport javax.swing.JPanel;import java.awt.Toolkit;import java.awt.Graphics;import java.awt.Image;import javax.swing.JFrame;
class ImagePanel extends JPanel{ public ImagePanel() //constructor { img = Toolkit.getDefaultToolkit().getImage( "java.jpg" ); } public void paint(Graphics g){ super.paint(g); g.drawImage(img,0,0,this); }}public class ImageFrame extends JFrame{ public ImageFrame(){ setSize(500,500); panel = new ImagePanel(); getContentPane().add(panel); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main(String [] args){ JFrame frame = new ImageFrame(); frame.setVisible(true); } private ImagePanel panel; private Image img;}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nComponentes GUI relacionados con el texto
Las tres clases SWING que tratan con el texto son : JLabel, JTextField y JTextArea, las primeras dos tratan con sólo una línea de texto. Un objeto TextField permite al usuario ingresar una sola línea de texto, mientras que un objeto JLabel es para desplegar texto no editable. Un objeto JTextArea permite al usuario ingresar múltiples líneas de texto.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nEjemplo
Creación de la ventanaJFrame ventana = new JFrame(tituloVentana);
Creación de una etiquetaJLabel etiqueta = new JLabel("Mensaje en una etiqueta");
Ligar la etiqueta a la ventanaventana.getContentPane().add(etiqueta);
barra de titulo controles de la ventana
bordeetiqueta
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nValidar la entrada en un JTextField
Para validar que solamente se permitan introducir números se añade el siguiente evento al JTextField.
Se debe añadir al control el evento keyTyped(KeyEvent ); el cual es invocado cuando se pulsa una tecla.
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
n import javax.swing.JFrame;
import javax.swing.JLabel;import javax.swing.JTextField;import java.awt.event.KeyAdapter;import java.awt.event.KeyEvent;
class Validar extends JFrame{ public Validar(){ JLabel label = new JLabel("Escribe un numero"); label.setBounds(10,10,200,10); JTextField texto = new JTextField(); texto.setBounds(10,30,100,20); texto.addKeyListener(new KeyAdapter(){ public void keyTyped(KeyEvent e){ char caracter = e.getKeyChar(); // Verificar si la tecla pulsada no es un digito if(((caracter < '0') ||(caracter > '9')) && (caracter != KeyEvent.VK_BACK_SPACE)){ e.consume(); // ignorar el evento de teclado } } }); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setLayout(null); setSize(300,300); getContentPane().add(label); getContentPane().add(texto); setVisible(true); } public static void main(String [] args){ new Validar(); }}
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nMétodos relacionados
JTextField
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nJCheckBox y JCheckBoxGroup
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nJButton
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nJComboBox
Presenta una caja de combinación. Esta clase es similar a la clase JRadioButton en que también permite al usuario seleccionar un ítem de una lista de posibles opciones:
String [] item = {“Java”,”c++”,”Pascal”};
JComboBox caja = new JComboBox(item);
Para encontrar el ítem actualmente seleccionado:
String x = (String) caja.getSelectedItem();
Tóp
icos S
ele
cto
s d
e
Pro
gra
mació
nBibliografía
Programación en Java C. Thomas Wu Mc Graw Hill
