Download gui_avanzada

GUI en Java


GUI = Interfaz gráfica de usuario
GUIs se construye a partir de componentes




Componente: objeto con el que interactúa el usuario
Ejemplos: etiquetas, campos de texto, botones,
casillas de verificación
Definidos en el paquete javax.swing
Los componentes GUI original fueron los
contenidos en el Abstract Windowing Toolkit en
el paquete java.awt
Componentes AWT
Componentes Swing
Elementos de Swing



Component Es una clase abstracta que
representa a cualquier componente con
representación gráfica
Container es un componente que puede
contener otros componentes gráficos
JFrame permite representar ventanas
Estructura de una GUI
Objetos que debe contener toda aplicación GUI:
 contenedores (Containers): Elementos que se
emplean para colocar componentes en la
ventana. La forma en la que se distribuyan
estos objetos en el container, dependerá del
Layout que se aplique al mismo. Un container
que no posea un layout, sólo podrá colocar un
componente sobre sí mismo. Tipos de
container:


Ventanas: Elemento donde se muestra cualquier
contenido visual.
Paneles: Una ventana podrá contener tantos paneles
como le permita el layout. Un panel, a su vez, deberá
aplicar un layout para agregar componentes.
Estructura de una GUI
Objetos que debe contener toda aplicación GUI:
 contenedores (Containers): Elementos que se
emplean para colocar componentes en la
ventana. La forma en la que se distribuyan
estos objetos en el container, dependerá del
Layout que se aplique al mismo. Un container
que no posea un layout, sólo podrá colocar un
componente sobre sí mismo. Tipos de
container:


Ventanas: Elemento donde se muestra cualquier
contenido visual.
Paneles: Una ventana podrá contener tantos paneles
como le permita el layout. Un panel, a su vez, deberá
aplicar un layout para agregar componentes.
Estructura de una GUI
Objetos que debe contener toda aplicación GUI:
 contenedores (Containers): Elementos que se
emplean para colocar componentes en la
ventana. La forma en la que se distribuyan
estos objetos en el container, dependerá del
Layout que se aplique al mismo. Un container
que no posea un layout, sólo podrá colocar un
componente sobre sí mismo. Tipos de
container:


Ventanas: Elemento donde se muestra cualquier
contenido visual.
Paneles: Una ventana podrá contener tantos paneles
como le permita el layout. Un panel, a su vez, deberá
aplicar un layout para agregar componentes.
Estructura de una GUI
Objetos que debe contener toda aplicación GUI:
 contenedores (Containers): Elementos que se
emplean para colocar componentes en la
ventana. La forma en la que se distribuyan
estos objetos en el container, dependerá del
Layout que se aplique al mismo. Un container
que no posea un layout, sólo podrá colocar un
componente sobre sí mismo. Tipos de
container:


Ventanas: Elemento donde se muestra cualquier
contenido visual.
Paneles: Una ventana podrá contener tantos paneles
como le permita el layout. Un panel, a su vez, deberá
aplicar un layout para agregar componentes.
Estructura de una GUI
Objetos que debe contener toda aplicación GUI:
 contenedores (Containers): Elementos que se
emplean para colocar componentes en la
ventana. La forma en la que se distribuyan
estos objetos en el container, dependerá del
Layout que se aplique al mismo. Un container
que no posea un layout, sólo podrá colocar un
componente sobre sí mismo. Tipos de
container:


Ventanas: Elemento donde se muestra cualquier
contenido visual.
Paneles: Una ventana podrá contener tantos paneles
como le permita el layout. Un panel, a su vez, deberá
aplicar un layout para agregar componentes.
Estructura de una GUI
Layout Manager
 Indican la forma de organizar los componentes dentro del
container.
 Determinan el tamaño y posición de los componentes.
 Pasos a dar:
1. Crear el container.
2. Aplicar el tipo de Layout Manager.
3. Agregar los componentes al container.
 Tipos de Layout Manager más importantes (todos elllos
heredan del interface LayoutManager):
 FlowLayout
 BorderLayout
 GridLayout.
 BoxLayout
 CardLayout
Estructura de una GUI
Componentes (Components):
Representan cada uno de los controles
que aparecen en toda ventana (botones,
cajas de texto, menús, ...)
Contenedores - Ventanas
La clase Window permite crear ventanas cualquier tipo.
 Subclases:
 Frame: es la típica ventana de aplicación.
 Dialog: es la ventana que utilizan los cuadros de diálogo.
 Window: es una ventana sin marco ni barra de título.
Utlizada para las ventanas de presentación.
 Métodos:
 void setVisible (boolean visible)
 void pack()
 void setSize (int width, int height)
 void setTitle (String title)
 void setMenuBar (MenuBar mb)
 void setResizable (boolean resizable)
 void setState (int state)
Contenedores – Cuadros de Diálogo



Son ventanas transitorias para mostrar
advertencias, errores,información especifica,
etc.
No tienen barra de menús.
Pueden ser de tres tipos:



JDialog: proporciona un dialogo general.
JFileChooser: dialogo especifico para escoger
archivos para guardar o abrir.
JOptionPane: manera fácil y rápida de generar
diálogo personalizados
Contenedores

Ejemplo de creación de una ventana:
public class MiFrame extends Frame
{
Button boton;
public static void main(String s[])
{
new MiFrame();
}
public MiFrame()
{
boton = new Button("Aceptar");
this.setLayout(new FlowLayout());
this.add(boton);
this.setSize(250,250);
this.setVisible(true);
}
}
Contenedores
Ejemplos:
public MiFrame()
{
boton = new JButton("Aceptar");
Panel panel= new Panel(new FlowLayout());
panel.add(boton);
this.setLayout(new BorderLayout());
this.add(panel,BorderLayout.SOUTH);
this.setSize(250,250);
this.setVisible(true);
}
public MiFrame()
{
boton = new JButton("Aceptar");
this.setLayout(new FlowLayout());
this.add(boton);
this.setSize(250,250);
this.setVisible(true);
}
public MiFrame()
{
boton = new Button("Aceptar");
this.add(boton);
this.setSize(250,250);
this.setVisible(true);
}
Contenedores - Container

Métodos importantes definidos en la clase
Container:






Component add(Component comp)
void setLayout(LayoutManager mgr)
void remove(Component comp)
void remove(int index)
void removeAll()
void doLayout()
Distribución de espacio




Antes de construir una GUI es importante saber
como se distribuyen espacialmente los
componentes
Los layout managers controlan la forma como
se colocan los componentes dentro del
contenedor
FlowLayout Coloca los componentes de
izquierda a derecha, de arriba hacia abajo.
BorderLayout permite dividir el espacio
disponible en cinco paneles etiquetados como
Center, North, West, South y East
LayoutManager

FlowLayout (java.awt)


Permite una distribución lineal de los componentes.
Crea nuevas líneas cuando así lo exige el ancho del
container.
this.setLayout (new FlowLayout());
this.add(new Button(“Aceptar”));
this.add(...);
this.add(...);
this.add(...);
this.add(...);
LayoutManager

GridLayout (java.awt)




Permite una distribución en regilla o tabla.
Los componentes se situan en las celdas de forma secuencial de
arriba abajo y de izquierda a derecha.
No se puede direccionar la posición de los componentes sobre
las celdas.
El tamaño de las celdas es idéntico.
this.setLayout(new GridLayout(2,3));
this.add(new Button(“Aceptar”));
this.add(...);
this.add(...);
this.add(...);
LayoutManager

BorderLayout (java.awt)


Proporciona cinco áreas para situar componentes.
La ausencia de una de ellas produce la extensión
horizontal o vertical de las contiguas.
this.setLayout(new BorderLayout());
this.add(new Button(“Aceptar”), BorderLayout.NORTH);
this.add(..., BorderLayout.EAST);
this.add(..., BorderLayout.WEST);
this.add(..., BorderLayout.SOUTH);
this.add(..., BorderLayout.CENTER);
LayoutManager

CardLayout (java.awt)



Permite alternar el contenido de un container entre
varios paneles creados anteriormente.
El cambio se puede producir en tiempo de ejecución.
Cada panel deberá tener un identificador del tipo
String.
this.setLayout(new CardLayout());
Panel panelA = new JPanel ();
panelA.add(....);
Panel panelB = new JPanel ();
panelB.add(....);
this.add(panelA, “A”);
this.add(panelB, “B”);
CardLayout cl = (CardLayout)this.getLayout();
cl.show(c, “B");
LayoutManager

BoxLayout (javax.swing)

Permite visualizar los componentes alineados
vertical u horizontalmente.
this.setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));
Button boton1 = new Button(“Aceptar");
boton1.setAlignmentX(Component.CENTER_ALIGNMENT);
this.add(boton1);
this.add(...);
this.add(...);
this.add(...);
Componentes (Component)


Como superclase de todos los componentes
java (AWT y Swing), esta clase generaliza el
comportamiento de todos ellos.
Todos los componentes AWT heredan de
Component, mientras que los desarrollados
en Swing lo hacen de JComponent.
Componentes
Las GUI se construyen con componentes, cada uno de los cuales
está preparado para responder a distintos tipos de eventos.
Algunos componentes son:
 JLabel Etiqueta para mostrar texto
 JTextBox y JTextArea Cajas de texto para la entrada de datos
 JButton Botón
 JCheckBox Caja de comprobación para elegir opciones
 JRadioButton Para elegir opciones mutuamente excluyentes
 JList Lista de opciones
 JScrollBar Barra de Scroll
 JTree Arbol
 JTable Tabla
 JMenuBar, JMenu, JMenuItem Para elaborar menús
 JOprioPane Ventanas de diálogo
 JFileChooser, JColor Chooser Ventanas estándar
Componentes (Component)

Métodos importantes definidos en la clase
Component:












void setEnabled(boolean b)
void setVisible(boolean b)
void requestFocus()
void setBounds(int x, int y, int width, int height)
void setLocation(int x, int y)
void setSize(int width, int height)
void setCursor(Cursor cursor)
void setFont(Font f)
void setBackground(Color c)
void setForeground(Color c)
void setName(String name)
void updateUI()
Componentes
Componentes (continuación…)
Componentes - Button




Button(): crea un botón vacio sin etiqueta
Button(String): crea un botón con el
string como etiqueta
String getLabel(): devuelve la etiqueta
del botón.
void setLabel(String): pone como
etiqueta el String del parámetro.
Componentes - Label







Label(): Crea una etiqueta vacía con el texto alineado a la
izquierda.
Label(String): Crea una etiqueta con la cadena de texto
dada, alineada a la izquierda.
Label(String, int): Crea una etiqueta con la cadena de
texto y la alineación dadas. La alineación disponible se
almacena en variables de clase en Label; Label.RIGHT,
Label.LEFT, Label.CENTER.
String getText(): Devuelve el texto de la etiqueta.
void setText(String): Cambia el texto de la etiqueta.
int getAlignment(): Devuelve un entero que representa la
alineación de la etiqueta:0 es Label.LEFT, 1 es
Label.CENTER y 2 es Label.RIGHT.
void setAlignment(int): Cambia la alineación con la
indicada..
Componentes - TextField









TextField(): Crea una caja de texto de 0 caracteres de amplitud.
TextField(int): Crea un campo de texto vacío con la amplitud
dada.
TextField(String): Crea una caja de texto con la longitud de la
cadena como amplitud, inicializado con la cadena dada.
TextField (String,int): crea un campo de texto con la amplitud
dada y la cadena dada.
String getText(): Devuelve el texto contenido en ese campo de
texto.
void setText(String): Coloca la cadena dada en el campo de
texto.
boolean isEditable(): Devuelve true o false basado en si el texto
es editable o no.
void setEditable(boolean): true (valor predeterminado) permite
la edición del texto; false inmoviliza el texto.
void setEchoCar(char): Pone el carácter dado en la entrada
para ocultar texto.
Componentes - Canvas




La clase Canvas permite representar elementos
gráficos en pantalla.
A través de su método paint(Graphics g) se
realizan todos los dibujos sobre el canvas.
Es la ocurrencia de la clase Graphics la que
permite realmente pintar elementos gráficos, el
canvas es el soporte.
Graphics2D hereda de Graphics, aportando una
mayor funcionalidad. A través de un
downcasting se puede utilizar este objeto más
refinado.
Graphics2D g2d = (Graphics2D) g;
Componentes - Canvas


Clase Graphics
Métodos:









drawString(String, int, int)
drawOval(int, int, int, int)
drawRect(int, int, int, int)
drawArc(int, int, int, int, int, int)
drawImage(Image, int, int, ImageObserver)
drawLine(int, int, int, int)
drawPolygon(int[], int[], int)
setColor(Color)
setFont(Font)
Componentes - Canvas

Crear un área de dibujo:
class MiCanvas extends Canvas implements MouseListener
{
int x=50;int y=50;int radioX=30;int radioY=30;
MiCanvas()
{
this.setBackground(Color.white);
this.addMouseListener(this);
this.setFont(new Font("Courier", Font.BOLD, 24));
this.setCursor(new Cursor(Cursor.CROSSHAIR_CURSOR));
}
public void paint(Graphics g)
{
g.setColor(Color.red);
g.drawString("Dibuja Circunferencias",50,20);
g.setColor(Color.blue);
g.drawLine(50,40,340,40);
g.setColor(Color.green);
g.drawOval(x,y,radioX, radioY);
}
Componentes – Canvas (continuación…)
public void mousePressed(MouseEvent e)
{
x=e.getX();
y=e.getY();
}
public void mouseReleased(MouseEvent e)
{
radioX=(e.getX()-x);
radioY=(e.getY()-y);
this.repaint();
}
public void mouseEntered(MouseEvent e) {}
public void mouseExited(MouseEvent e) {}
public void mouseClicked(MouseEvent e) {}
}
Posteriormente se podrá añadir una ocurrencia de la clase
MiCanvas a cualquier Frame como un componente más
Eventos – java.awt.event


Este paquete proporciona las clases e
interfaces necesarias para gestionar los
diferentes tipos de eventos de los componentes
de AWT.
Los eventos más importantes que una
aplicación gráfica puede registrar son:






Ratón
Ratón (Drag & Drop)
Acción
Teclado
Ventana
Un evento del tipo acción se produce cuando se
acciona algún control
Eventos – java.awt.event





Para que los componentes puedan recibir eventos deben
registrarse previamente indicando qué clase va a
gestionarlos.
Esta tarea se realiza a través de la invocación del método
addInterfaz(clase a gestionar el evento).
Estas clases deben implementar los interfaces que se
correspondan con cada tipo de evento e indicar las
acciones a ejecutar en el caso que se active el evento.
Los interfaces más utilizados son los siguientes:
 EventListener





MouseListener
MouseMotionListener
ActionListener
KeyLIstener
WindowListener
Componentes y sus Listeners
Eventos – java.awt.event




Estas interfaces definen una serie de métodos que se
corresponden con las diferentes acciones asociadas a un
tipo de evento determinado.
Por ejemplo, en un evento de teclado, el usuario puede
presionar o soltar una tecla.
Por lo tanto, cuando definamos la clase implementando la
interfaz correspondiente, se tendrán que implementar todos
los métodos definidos en él.
Existen tres posibilidades para definir una clase que
gestione los eventos de un componente:
 Crear una nueva clase.
 Utilizar la clase que define la ventana, como clase que
además gestionará los eventos.
 Definir una clase anónima dentro de la clase de ventana
Eventos – java.awt.event
Eventos – java.awt.event


Si se desea obtener información del evento producido, se
puede hacer a través del argumento de cada método
invocado.
Por ejemplo, si se desea saber la tecla que se ha pulsado
sobre una caja de texto, deberemos operar de la siguiente
manera:
 Aplicar un listener que gestione los eventos de tipo teclado
sobre la caja de texto:
cajaTexto.addKeyListener(new A());
 Implementar el interface KeyListener con todos sus
métodos.
 Identificar el método asociado al evento pulsar una tecla.
 Trabajar con el objeto que recibe el método en el
argumento, ya que es éste quién posee toda la información
del evento producido
Jerarquía de Interfaces de Eventos
Jerarquía de Interfaces de Eventos

Clases que implementan los interfaces:





java.awt.event.KeyAdapter (implements
KeyListener)
java.awt.event.MouseAdapter (implements
MouseListener)
java.awt.event.MouseMotionAdapter (implements
MouseMotionListener)
java.awt.event.WindowAdapter (implements
WindowListener)
La ventaja que nos proporcionan las clases del
tipo Adapter es que realizan la implementación
de todos los métodos de la interface. De esta
manera, se puede heredar de ella, y sólo se
redefinirá el método necesario.
Eventos de Ventana

Definidos en el interface WindowListener:

Métodos:

public
public
event)
public
public
public
event)
public

public void windowClosing(WindowEvent event)





void windowClosed(WindowEvent event)
void windowDeiconified(WindowEvent
void windowIconified(WindowEvent event)
void windowActivated(WindowEvent event)
void windowDeactivated(WindowEvent
void windowOpened(WindowEvent event)
Ejemplo eventos de ventana (I)

Ejemplo de implementación del interface.
class Ventana extends Frame implements WindowListener
{
Ventana()
{ … ;
this.addWindowListener(this);
}
//Hay que implementar todos los métodos
public void windowClosed(WindowEvent event) { }
public void windowDeiconified(WindowEvent event) { }
public void windowIconified(WindowEvent event) { }
public void windowActivated(WindowEvent event) { }
public void windowDeactivated(WindowEvent event) { }
public void windowOpened(WindowEvent event) { }
public void windowClosing(WindowEvent event)
{System.exit(0);}
}
Ejemplo eventos de ventana (II)




Ejemplo sin implementación del interface, a través de la utilización
de una clase anónima interna.
Implementación del interfaz a través de WindowAdapter.
Únicamente se implementa el método deseado.
De esta manera, no es nuestra clase la que gestiona el evento,
sino la clase anónima creada de dentro de ella.
class Ventana extends Frame
{
Ventana()
{ …
this.addWindowListener(new WindowAdapter()
{
public void windowClosing(WindowEvent e)
{ System.exit(0); }
};
}
}
Eventos de Teclado

Implementar el interface KeyListener:

Métodos:



public void keyTyped(KeyEvent e)
public void keyPressed(KeyEvent e)
public void keyReleased(KeyEvent e)
Eventos de Teclado Ejemplo
Ejemplo de implementación del interface.
public class ClienteWindow extends Applet implements
KeyListener
{
…
textoMensaje.addKeyListener(this);
…
public void keyTyped(KeyEvent e) {}
public void keyReleased(KeyEvent e) {}
public void keyPressed(KeyEvent e)
{
int code = e.getKeyCode();
if(KeyEvent.VK_ENTER == code)
{
…
}
}
}

Eventos sobre Components

Implementar el interface ActionListener:

Métodos:

public void
actionPerformed(ActionEvent e)
Ejemplo de Eventos sobre componentes (I)
Ejemplo de implementación del interface.
public class ClienteWindow extends Applet
implements
ActionListener {
…
boton.addActionListener(this);
…
public void actionPerformed(ActionEvent event)
{
Object source = event.getSource();
if (source == boton)
{
…
}
}

Ejemplo de Eventos sobre componentes (II)

Ejemplo sin implementación del interface, a
través de la utilización de una clase anónima.
boton.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent e)
{
…
}
};
Eventos de Ratón

Implementar el interface MouseListener:

Métodos:





public
public
public
public
public
void
void
void
void
void
mouseClicked(MouseEvent e)
mouseEntered(MouseEvent e)
mouseExited(MouseEvent e)
mousePressed(MouseEvent e)
mouseReleased(MouseEvent e
Como crear… usando Swing
JLabel

Crear una etiqueta:
JLabel etiq=new JLabel("Nombre: ");
/* En la siguiente sentencia se asigna un color
a la
etiqueta utilizando el constructor Color(R,G,B)
*/
etiq.setForeground(new Color(255,0,0)); //Rojo
etiq.setFont(new Font("Times New
Roman",Font.BOLD, 12));
JButton

Crear un botón:
JButton botonSalir = new JButton("Aceptar");

Gestión de eventos:
botonSalir.addActionListener(new
ActionListener()
{
public void actionPerformed(ActionEvent e)
{
dispose();
System.exit(0);
}
});
JText

Crear una caja de texto:
JTextField textNombre = new JTextField(10);

Gestión de eventos:
textNombre.addKeyListener(new KeyAdapter()
{
public void keyTyped(KeyEvent e)
{
if ((int)e.getKeyChar()== KeyEvent.VK_ENTER)
System.out.println(textNombre.getText());
}
});
JComboBox
Crear una lista combinada:
String datos[] = { “Uno”, “Dos”, “Tres”,
“Cuatro”, “Cinco”};
JComboBox lista = new JComboBox (datos);
lista.setBorder(BorderFactory.createLineBorder(C
olor.red,
4));

Gestión de eventos:
lista.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent e)
{
System.out.println(lista.getSelectedItem());
}
});

JCheckBox

Crear una casilla de verificación:
JCheckBox ch=new JCheckBox("Estudiante", new
ImageIcon("images/off.gif"), false);
ch.setRolloverSelectedIcon(new
ImageIcon("images/over.gif"));
ch.setRolloverIcon(new ImageIcon("images/over.gif"));
ch.setSelectedIcon(new ImageIcon("images/on.gif"));

Gestión de eventos:
ch.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent e)
{
if(ch.isSelected())
mostrarMensaje("Check Activado");
}
});
JRadioButton

Crear una botón de opción:
ButtonGroup grupo = new ButtonGroup();
rb1 = new JRadioButton("Hombre");
rb2 = new JRadioButton("Mujer");
rb1.setSelected(true);
rb1.setMnemonic(KeyEvent.VK_H);
rb2.setMnemonic(KeyEvent.VK_M);
grupo.add(rb1);
grupo.add(rb2);

Gestión de eventos:
rb1.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent e)
{
if(rb1.isSelected())
mostrarMensaje("Radio Hombre
Activado");
}
});
JOptionPane



Esta clase se utiliza para crear cualquier tipo de dialogo
estándar para mostrar o recoger información.
Relación (Tipo de diálogo – Método estático):
 Diálogo de Confirmación (Si/No/Cancelar) –
showConfirmDialog
 Diálogo de Entrada - showInputDialog
 Diálogo de Mensaje - showMessageDialog
 Dialogo Personalizable - showOptionDialog
Ejemplo:
String nombre = JOptionPane.showInputDialog(this,
"<html>Introduzca su <u>nombre</u>, por favor:</html>");
JOptionPane.showMessageDialog(this, "<html><H3>Proceso
finalizado satisfactoriamente</H3></html>");
JFileChooser


Permite mostrar los diálogos de Abrir y
Guardar como...
Relación (Tipo de diálogo – Método
instancia):



Diálogo de Abrir – showOpenDialog
Diálogo de Guardar como... –
showSaveDialog
Ejemplo:
JFileChooser j = new JFileChooser();
int rtn = j.showOpenDialog(this);
if (rtn == JFileChooser.APPROVE_OPTION)
System.out.println(j.getSelectedFile().getPath());
Look & Feel


Modifica la apariencia de nuestra ventana.
Tipos:
Ejemplo:
int i=1; //Apariencia Motif
UIManager.LookAndFeelInfo looks[];
looks = UIManager.getInstalledLookAndFeels();
try
{
UIManager.setLookAndFeel(looks[i].getClassName());
SwingUtilities.updateComponentTreeUI(this);
}
catch(Exception e) {}
Metal (0) Motif (1) Windows (2) Windows Classic (3)
Look & Feel

También es posible pasar como parámetro el nombre de la clase
del Look & Feel:





Metal → javax.swing.plaf.metal.MetalLookAndFeel
Motif → com.sun.java.swing.plaf.motif.MotifLookAndFeel
Windows → com.sun.java.swing.plaf.windows.WindowsLookAndFeel
Windows Classic →
com.sun.java.swing.plaf.windows.WindowsClassicLookAndFeel
Ejemplo:
try

{
UIManager.setLookAndFeel
(“com.sun.java.swing.plaf.windows.WindowsLookAndFeel”)
;
SwingUtilities.updateComponentTreeUI(this);
}catch(Exception e) {}
Menús
Cada ventana puede tener su propia barra de
menús.
AWT ofrece:
 JMenuBar: para crear la barra de menús
 JMenu: para los diferente menús de la barra
 Elementos del menú:




instancias de la clase JMenuItem para elementos
normales.
instancias de la clase JCheckBoxMenuItem.
otros menús.
separadores, gracias al método addSeparator().