Está en la página 1de 63

GUI en Java

GUI = Interfaz grfica de usuario GUIs se construye a partir de componentes

Componente: objeto con el que interacta el usuario Ejemplos: etiquetas, campos de texto, botones, casillas de verificacin

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 representacin grfica Container es un componente que puede contener otros componentes grficos JFrame permite representar ventanas

Estructura de una GUI


Objetos que debe contener toda aplicacin 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, slo 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 aplicacin 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, slo 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 aplicacin 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, slo 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 aplicacin 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, slo 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 aplicacin 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, slo 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 tamao y posicin 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 ms 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, mens, ...)

Contenedores - Ventanas
La clase Window permite crear ventanas cualquier tipo. Subclases: Frame: es la tpica ventana de aplicacin. Dialog: es la ventana que utilizan los cuadros de dilogo. Window : es una ventana sin marco ni barra de ttulo. Utlizada para las ventanas de presentacin. Mtodos: 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 Dilogo

Son ventanas transitorias para mostrar


advertencias, errores,informacin especifica, etc. No tienen barra de mens. Pueden ser de tres tipos:

JDialog: proporciona un dialogo general. JFileChooser: dialogo especifico para escoger archivos para guardar o abrir. JOptionPane: manera fcil y rpida de generar dilogo personalizados

Contenedores

Ejemplo de creacin 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

Mtodos 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()

Distribucin 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 distribucin lineal de los componentes. Crea nuevas lneas 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 distribucin 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 posicin de los componentes sobre las celdas. El tamao de las celdas es idntico.

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 extensin 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 ejecucin. 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 Botn JCheckBox Caja de comprobacin 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 mens JOprioPane Ventanas de dilogo JFileChooser, JColor Chooser Ventanas estndar

Componentes (Component)

Mtodos 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 (continuacin)

Componentes - Button

Button(): crea un botn vacio sin etiqueta Button(String): crea un botn con el string como etiqueta String getLabel(): devuelve la etiqueta del botn. void setLabel(String): pone como etiqueta el String del parmetro.

Componentes - Label

Label(): Crea una etiqueta vaca 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 alineacin dadas. La alineacin 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 alineacin de la etiqueta:0 es Label.LEFT, 1 es Label.CENTER y 2 es Label.RIGHT. void setAlignment(int): Cambia la alineacin con la indicada..

Componentes - TextField

TextField(): Crea una caja de texto de 0 caracteres de amplitud. TextField(int): Crea un campo de texto vaco 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 edicin del texto; false inmoviliza el texto. void setEchoCar(char): Pone el carcter dado en la entrada para ocultar texto.

Componentes - Canvas

La clase Canvas permite representar elementos grficos en pantalla. A travs de su mtodo paint(Graphics g) se realizan todos los dibujos sobre el canvas. Es la ocurrencia de la clase Graphics la que permite realmente pintar elementos grficos, el canvas es el soporte. Graphics2D hereda de Graphics, aportando una mayor funcionalidad. A travs de un downcasting se puede utilizar este objeto ms refinado.
Graphics2D g2d = (Graphics2D) g;

Componentes - Canvas

Clase Graphics Mtodos:

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 (continuacin)


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 aadir una ocurrencia de la clase MiCanvas a cualquier Frame como un componente ms

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 ms importantes que una aplicacin grfica puede registrar son:

Ratn Ratn (Drag & Drop) Accin Teclado Ventana Un evento del tipo accin se produce cuando se acciona algn 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 travs de la invocacin del mtodo 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 ms utilizados son los siguientes: EventListener

MouseListener MouseMotionListener ActionListener KeyLIstener WindowListener

Componentes y sus Listeners

Eventos java.awt.event

Estas interfaces definen una serie de mtodos 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 tendrn que implementar todos los mtodos 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 adems gestionar los eventos. Definir una clase annima dentro de la clase de ventana

Eventos java.awt.event

Eventos java.awt.event

Si se desea obtener informacin del evento producido, se puede hacer a travs del argumento de cada mtodo 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 mtodos. Identificar el mtodo asociado al evento pulsar una tecla. Trabajar con el objeto que recibe el mtodo en el argumento, ya que es ste quin posee toda la informacin del evento producido

Jerarqua de Interfaces de Eventos

Jerarqua 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 implementacin de todos los mtodos de la interface. De esta manera, se puede heredar de ella, y slo se redefinir el mtodo necesario.

Eventos de Ventana

Definidos en el interface WindowListener:

Mtodos:

public public event) public public public event) public

void windowClosed(WindowEvent event) void windowDeiconified(WindowEvent


void windowIconified(WindowEvent event) void windowActivated(WindowEvent event) void windowDeactivated(WindowEvent void windowOpened(WindowEvent event)

public void windowClosing(WindowEvent event)

Ejemplo eventos de ventana (I)

Ejemplo de implementacin del interface.

class Ventana extends Frame implements WindowListener { Ventana() { ; this.addWindowListener(this); } //Hay que implementar todos los mtodos 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 implementacin del interface, a travs de la utilizacin de una clase annima interna. Implementacin del interfaz a travs de WindowAdapter. nicamente se implementa el mtodo deseado. De esta manera, no es nuestra clase la que gestiona el evento, sino la clase annima 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:

Mtodos:

public void keyTyped(KeyEvent e) public void keyPressed(KeyEvent e) public void keyReleased(KeyEvent e)

Eventos de Teclado Ejemplo


Ejemplo de implementacin 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:

Mtodos:

public void actionPerformed(ActionEvent e)

Ejemplo de Eventos sobre componentes (I)


Ejemplo de implementacin 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 implementacin del interface, a travs de la utilizacin de una clase annima.

boton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { } };

Eventos de Ratn

Implementar el interface MouseListener:

Mtodos:

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 botn:

JButton botonSalir = new JButton("Aceptar");

Gestin 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);

Gestin 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));

Gestin de eventos: lista.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println(lista.getSelectedItem()); } });

JCheckBox

Crear una casilla de verificacin:

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"));

Gestin de eventos:

ch.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { if(ch.isSelected()) mostrarMensaje("Check Activado"); } });

JRadioButton

Crear una botn de opcin:

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);

Gestin 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 estndar para mostrar o recoger informacin. Relacin (Tipo de dilogo Mtodo esttico): Dilogo de Confirmacin (Si/No/Cancelar) showConfirmDialog Dilogo de Entrada - showInputDialog Dilogo 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 dilogos de Abrir y Guardar como... Relacin (Tipo de dilogo Mtodo instancia):

Dilogo de Abrir showOpenDialog Dilogo 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

Tambin es posible pasar como parmetro 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) {}

Mens
Cada ventana puede tener su propia barra de mens. AWT ofrece: JMenuBar: para crear la barra de mens JMenu: para los diferente mens de la barra Elementos del men:

instancias de la clase JMenuItem para elementos normales. instancias de la clase JCheckBoxMenuItem. otros mens. separadores, gracias al mtodo addSeparator().