Title: GUI en Java
1GUI 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
2Componentes AWT
3Componentes Swing
4Elementos 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
5Estructura 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.
6Estructura 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.
7Estructura 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.
8Estructura 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.
9Estructura 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.
10Estructura 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
11Estructura de una GUI
- Componentes (Components)
- Representan cada uno de los controles que
aparecen en toda ventana (botones, cajas de
texto, menús, ...)
12Contenedores - 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)
13Contenedores 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
14Contenedores
- 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)
15Contenedores
- 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)
16Contenedores - 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()
17Distribució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
18LayoutManager
- 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(...)
19LayoutManager
- 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(...)
20LayoutManager
- 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)
21LayoutManager
- 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")
22LayoutManager
- 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(...)
23Componentes (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.
24Componentes
- 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
25Componentes (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()
26Componentes
27Componentes (continuación)
28Componentes - 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.
29Componentes - 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 etiqueta0 es
Label.LEFT, 1 es Label.CENTER y 2 es Label.RIGHT. - void setAlignment(int) Cambia la alineación con
la indicada..
30Componentes - 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.
31Componentes - 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
32Componentes - 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)
33Componentes - Canvas
- Crear un área de dibujo
- class MiCanvas extends Canvas implements
MouseListener -
- int x50int y50int radioX30int radioY30
- MiCanvas()
-
- this.setBackground(Color.white)
- this.addMouseListener(this)
- this.setFont(new Font("Courier", Font.BOLD,
24)) - this.setCursor(new Cursor(Cursor.CROSSHAIR_CUR
SOR)) -
- 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)
34Componentes Canvas (continuación)
- public void mousePressed(MouseEvent e)
-
- xe.getX()
- ye.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)
-
35Eventos 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
36Eventos 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
37Componentes y sus Listeners
38Eventos 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
39Eventos java.awt.event
40Eventos 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
41Jerarquía de Interfaces de Eventos
42Jerarquí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.
43Eventos de Ventana
- Definidos en el interface WindowListener
- 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)
44Ejemplo 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)
-
45Ejemplo 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)
-
-
46Eventos de Teclado
- Implementar el interface KeyListener
- Métodos
- public void keyTyped(KeyEvent e)
- public void keyPressed(KeyEvent e)
- public void keyReleased(KeyEvent e)
47Eventos 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)
-
-
-
-
48Eventos sobre Components
- Implementar el interface ActionListener
- Métodos
- public void actionPerformed(ActionEvent e)
49Ejemplo 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)
-
-
-
-
50Ejemplo 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)
-
-
-
51Eventos de Ratón
- Implementar el interface MouseListener
- Métodos
- public void mouseClicked(MouseEvent e)
- public void mouseEntered(MouseEvent e)
- public void mouseExited(MouseEvent e)
- public void mousePressed(MouseEvent e)
- public void mouseReleased(MouseEvent e
52Como crear usando Swing
53JLabel
- Crear una etiqueta
- JLabel etiqnew 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))
54JButton
- 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)
-
- )
55JText
- 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())
-
- )
56JComboBox
- Crear una lista combinada
- String datos Uno, Dos, Tres,
Cuatro, Cinco - JComboBox lista new JComboBox (datos)
- lista.setBorder(BorderFactory.createLineBorder(Col
or.red, - 4))
- Gestión de eventos
- lista.addActionListener(new ActionListener()
-
- public void actionPerformed(ActionEvent e)
-
- System.out.println(lista.getSelectedItem())
-
- )
57JCheckBox
- Crear una casilla de verificación
- JCheckBox chnew JCheckBox("Estudiante", new
- ImageIcon("images/off.gif"), false)
- ch.setRolloverSelectedIcon(new ImageIcon("images/o
ver.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")
-
- )
58JRadioButton
- 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")
-
- )
59JOptionPane
- 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,
- "lthtmlgtIntroduzca su ltugtnombrelt/ugt, por
favorlt/htmlgt") - JOptionPane.showMessageDialog(this,
"lthtmlgtltH3gtProceso - finalizado satisfactoriamentelt/H3gtlt/htmlgt")
60JFileChooser
- 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())
61Look Feel
- Modifica la apariencia de nuestra ventana.
- Tipos
Ejemplo int i1 //Apariencia Motif UIManager.Loo
kAndFeelInfo looks looks UIManager.getInstall
edLookAndFeels() try UIManager.setLookAndFeel(l
ooksi.getClassName()) SwingUtilities.updateComp
onentTreeUI(this) catch(Exception e) Metal
(0) Motif (1) Windows (2) Windows Classic (3)
62Look 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.MotifLookAnd
Feel - Windows ? com.sun.java.swing.plaf.windows.WindowsL
ookAndFeel - Windows Classic ?
- com.sun.java.swing.plaf.windows.WindowsClassicLook
AndFeel - Ejemplo
- try
-
- UIManager.setLookAndFeel
- (com.sun.java.swing.plaf.windows.WindowsLookAndFe
el) - SwingUtilities.updateComponentTreeUI(this)
- catch(Exception e)
63Menú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().