Interfaces de Usuario Componentes Swing

1
Interfaces de UsuarioComponentes Swing
2
Interfaces de usuario en java

• El concepto de interfaz de usuario (IU) se
  refiere a modos de interacción entre un programa
  y el usuario.
• El entorno de Java contiene clases para
  funcionalidades de IU como
• Componentes gráficas
• Sonido
• Información de configuración (argumentos de línea
  de comandos en aplicaciones)
• Lectura y escritura por teclado
• System.in, System.out
• Ficheros
• Interfaces gráficas de usuario
• Swing contiene las clases para generar una IU
  gráfica.
• Package javax.swing
• Contiene botones, listas, menús, zonas de
  texto,...

3
Jerarquía de componentes
Object
JDialog
java.awt.Container
JApplet
JComponent
JFrame
JLabel
JPanel
JComboBox
JList
JAbstractButton
JTextComponent
JButton
JCheckBox
JMenuItem
JTextArea
JTextField
Contenedores terminales JFrame, JDialog,
JApplet Línea discontinua otras clases
intermedias
4
Interfaces gráficas

• Referencia
• A Visual Index to the Swing Components
• The Java Tutorial (java.sun.com)
• Tamaños, formas, colores, tipos de letra, etc
  (java.awt.)
• Point, Rectangle, Polygon
• Color (Color.black, Color.red, ...)
• Image
• Font, FontMetrics
• Graphics es un contexto gráfico (un pincel
  virtual) color actual, font actual, ...
• En clase JComponent colores de background y
  foreground font (tipo de letra).
• Color getBackground()
• void setBackground(Color)
• Foreground set/getForeground
• Font set/getFont

5
Ejemplo
6
Ejemplo

• public class MiVentana extends javax.swing.JFrame
  
• private javax.swing.JButton jButton2
• private javax.swing.JButton jButton1
• public MiVentana()
• jButton1 new javax.swing.JButton()
• jButton2 new javax.swing.JButton()
• getContentPane().setLayout(null)
• setTitle("Un ejemplo")
• jButton1.setBackground(java.awt.Color.red)
  
• jButton1.setText("Boton 1")
• getContentPane().add(jButton1)
• jButton1.setBounds(121, 146, 120, 50)
• jButton2.setText("Boton 2")
• getContentPane().add(jButton2)
• jButton2.setBounds(130, 70, 77, 26)
• pack() // COLOCA SEGÚN tamaños
  preferidos

7
Disposición geométrica de componentes

• Acomodadores o gestores de disposición geométrica
  (layout managers)
• Objetos que controlan la disposición (posición y
  tamaño) de componentes incluidas dentro de un
  contenedor
• Objetos contenedores
• getContentPane() aplicado a objetos de
• JFrame, JDialog, JApplet
• objetos de la clase JPanel
• Cada objeto contenedor un tipo de layout manager
  por defecto
• BorderLayout (si provienen de ejecutar
  getContentPane())
• FlowLayout (en objetos de la clase JPanel)
• Creación de una jerarquía a partir de un
  contenedor C con elementos E1, E2, .., EN y un
  layout manager A
• C.setLayout(A)
• C.add(E1) C.add(E2) ... C.add(EN)
• El layout manager puede ser null
• Posiciones absolutas

8
Ejemplo, I
9
Ejemplo, II

• public class MiVentana extends javax.swing.JFrame
  
• private javax.swing.JButton jButton2
• private javax.swing.JButton jButton1
• private javax.swing.JPanel jPanel2
• private javax.swing.JPanel jPanel1
• public MiVentana()
• jPanel1 new javax.swing.JPanel()
• jPanel2 new javax.swing.JPanel()
• jButton1 new javax.swing.JButton()
• jButton2 new javax.swing.JButton()
• getContentPane().setLayout(null)
• setTitle("Un ejemplo de layout null")
• jPanel1.setBackground(java.awt.Color.orang
  e)
• getContentPane().add(jPanel1)

10
Ejemplo, III

• jPanel2.setBackground(java.awt.Color.red)
  
• jButton1.setText("jButton1")
• jPanel2.add(jButton1)
• jButton1.setBounds(20, 20, 81, 26)
• jButton2.setText("jButton2")
• jPanel2.add(jButton2)
• jButton2.setBounds(120, 30, 81, 26)
• getContentPane().add(jPanel2)
• jPanel2.setBounds(30, 180, 230, 80)
• pack()
• public static void main(String args)
• new MiVentana().setVisible(true)

11
Tipos de layout managers

• Tipos (java.awt.)
• Null (posiciones absolutas)
• BorderLayout. Uso de norte, sur, este, oeste,
  centro.
• FlowLayout De izquierda a derecha, empezando una
  nueva fila si es necesario
• GridLayout Filas y Columnas de igual tamaño
• CardLayout. Dos o más componentes comparten la
  misma zona visual.
• Para un contenedor con un layout manager asociado
  se tiene
• (TP) tamaño preferido
• Es una suma de los tamaños preferidos de las
  componentes hijas
• Observación Tamaño preferido es 0 cuando el
  layout manager es null.
• (MC) modo de colocación de componentes hijas para
  un tamaño dado del contenedor

12
BorderLayout, I

• Basado en DIRECCIONES CARDINALES
• (MC) Las componentes se extienden en la
  dirección cardinal especificada (cuando no hay
  extensión, se considera el tamaño preferido).
• (TP) como ancho el máximo entre los anchos
  preferidos de norte, centro y sur para el
  alto análogo
• public class MiVentana extends javax.swing.JFrame
  
• private javax.swing.JButton jButton2
• private javax.swing.JButton jButton1
• private javax.swing.JButton jButton3
• private javax.swing.JButton jButton5
• private javax.swing.JButton jButton4
• public MiVentana()
• jButton1 new javax.swing.JButton()
• jButton2 new javax.swing.JButton()
• jButton3 new javax.swing.JButton()
• jButton4 new javax.swing.JButton()
• jButton5 new javax.swing.JButton()

13
BorderLayout, II

• setTitle("Un ejemplo de BorderLayout")
• jButton1.setText("Oeste")
• getContentPane().
• add(jButton1, java.awt.BorderLayout.WEST)
• jButton2.setText("Norte")
• getContentPane().
• add(jButton2, java.awt.BorderLayout.NORTH)
• jButton3.setText("Centro")
• getContentPane().
• add(jButton3, java.awt.BorderLayout.CENTER)
• jButton4.setText("Sur")
• getContentPane().
• add(jButton4, java.awt.BorderLayout.SOUTH)
• jButton5.setText("Este")
• getContentPane().
• add(jButton5, java.awt.BorderLayout.EAST)
• pack()

14
Ejemplo
15
FlowLayout, I

• (MC) colocación de sus hijos en una fila (o
  varias) con tamaño preferido y centrado
• (TP) como ancho la suma de los anchos preferidos
  de las componentes como alto el máximo de los
  altos preferidos de las componentes
• public class MiVentana extends javax.swing.JFrame
  
• private javax.swing.JButton jButton2
• private javax.swing.JButton jButton1
• private javax.swing.JButton jButton3
• private javax.swing.JButton jButton5
• private javax.swing.JButton jButton4
• public MiVentana()
• jButton1 new javax.swing.JButton()
• jButton2 new javax.swing.JButton()
• jButton3 new javax.swing.JButton()
• jButton4 new javax.swing.JButton()
• jButton5 new javax.swing.JButton()
• getContentPane().
• setLayout(new java.awt.FlowLayout())
• setTitle("Un ejemplo de FlowLayout")

16
FlowLayout, II

• setTitle("Un ejemplo de FlowLayout")
• jButton1.setText("Oeste")
• getContentPane().add(jButton1)
• jButton2.setText("Norte")
• getContentPane().add(jButton2)
• jButton3.setText("Centro")
• getContentPane().add(jButton3)
• jButton4.setText("Sur")
• getContentPane().add(jButton4)
• jButton5.setText("Este")
• getContentPane().add(jButton5)
• pack()
• public static void main(String args)
• new MiVentana().setVisible(true)

17
Ejemplo
18
GridLayout, I

• (MC) componentes en un enrejado de celdas con el
  mismo tamaño y ocupando todo el contenedor
• (TP) como alto el máximo de los altos preferidos
  multiplicado por el número de filas para el
  ancho lo análogo
• public class MiVentana extends javax.swing.JFrame
  
• private javax.swing.JButton jButton2
• private javax.swing.JButton jButton1
• private javax.swing.JButton jButton3
• private javax.swing.JButton jButton5
• private javax.swing.JButton jButton4
• public MiVentana()
• jButton1 new javax.swing.JButton()
• jButton2 new javax.swing.JButton()
• jButton3 new javax.swing.JButton()
• jButton4 new javax.swing.JButton()
• jButton5 new javax.swing.JButton()

19
GridLayout, II

• getContentPane().
• setLayout(new java.awt.GridLayout(2, 3))
• setTitle("Un ejemplo de GridLayout")
• jButton1.setText("Oeste")
• getContentPane().add(jButton1)
• jButton2.setText("Norte")
• getContentPane().add(jButton2)
• jButton3.setText("Centro")
• getContentPane().add(jButton3)
• jButton4.setText("Sur")
• getContentPane().add(jButton4)
• jButton5.setText("Este")
• getContentPane().add(jButton5)
• pack()
• public static void main(String args)

20
Ejemplo
21
Cardlayout, I

• Dos o más componentes (normalmente paneles) que
  comparten espacio (una baraja de cartas donde
  sólo una es visible)
• Cada vez que aparece una componente, ocupa
  totalmente la componente contenedora
• Se puede mostrar una componente añadida
  (identificada con un nombre) mediante el método
  de CardLayout
• public void show(Container parent,
  String name)
• TP tamaño preferido máximo de las componentes
  (anchura y altura)

22
Cardlayout, II

• public class MiVentana extends javax.swing.JFrame
  
• private javax.swing.JButton jButton2
• private javax.swing.JButton jButton1
• private javax.swing.JPanel jPanel2
• private javax.swing.JPanel jPanel1
• public MiVentana()
• jPanel1 new javax.swing.JPanel()
• jButton1 new javax.swing.JButton()
• jPanel2 new javax.swing.JPanel()
• jButton2 new javax.swing.JButton()
• getContentPane().
• setLayout(new java.awt.CardLayout())
• setTitle("Un ejemplo de CardLayout")

23
Cardlayout, III

• jButton1.setText("Un boton")
• jPanel1.add(jButton1)
• getContentPane().add(jPanel1, "carta1")
• jPanel2.setLayout(new java.awt.BorderLayou
  t())
• jButton2.setText("Boton 2")
• jPanel2.
• add(jButton2, java.awt.BorderLayout.CENTER)
• getContentPane().add(jPanel2, "carta2")
• pack()
• java.awt.Container c this.getContentPane
  ()
• java.awt.LayoutManager lm
  c.getLayout()
• ((java.awt.CardLayout)lm).show(c,
  "carta2")
• public static void main(String args)
• javax.swing.JFrame v new MiVentana()

24
Ejemplo
25
Tratamiento de eventos, I

• Generación de eventos
• Una componente gráfica (java.awt.Container)
  genera objetos de tipo evento al interaccionar
  con ella (ratón, teclado).
• Se pueden programar respuestas ante la generación
  de eventos (event handling) mediante
• Entrega de objetos de tipo evento a objetos
  registrados como oyentes
• Fuente del evento (una componente gráfica)
• Un oyente (listener)
• Un objeto de alguna clase. Este objeto actúa de
  oyente de esos eventos, ejecutando una respuesta
  al recibir un evento.
• En una aplicación se pueden establecer varias
  relaciones fuente-oyente entre un conjunto de
  fuentes y otro de oyentes

26
Tratamiento de eventos, II

• Pasos
• Declaración de clases listeners
• ltclase-oyentegt
• implements lttipo-oyentegt
• Registrar un objeto oyente para un objeto fuente
• ltuna-componente-fuentegt
• .addlttipo-oyentegt
• (ltun-objeto-de-clase-oyentegt)

27
Algunos eventos, I

• Se genera un java.awt.event.ActionEvent en
  acciones como
• Click en un JButton
• Presionar enter en un JTextField
• Código
• public class Oyente implements ActionListener
• ...
• public void actionPerformed(ActionEvent e)
  
• // codigo a ejecutar ante el evento,
• // es decir la respuesta
• ...
• ltun-botongt.addActionListener
  
• (ltuna-instancia-de-
  Oyentegt)

28
Algunos eventos, II

• Oyentes
• Interface java.awt.event.ActionListener
• public void actionPerformed (ActionEvent e)
• En clases JButton, JTextField
• public void addActionListener(ActionListener l)
• Se genera un java.awt.event.MouseEvent al
  interaccionar con el ratón en un
  java.awt.Container
• Interface java.awt.event.MouseListener
• public void
• mouseClickedPressedReleasedEnterExited
• (MouseEvent e)
• En java.awt.Container
• public void addMouseListener(MouseListener l)

29
Ejemplo, diag. clases
30
Ejemplo, diag. secuencia (I)
31
Ejemplo, diag. secuencia (II)
32
Ejemplo, I

• import java.awt.
• import java.awt.event.
• public class MiVentana extends javax.swing.JFrame
  implements ActionListener, MouseListener
• private StringBuffer texto
• private javax.swing.JButton jButton2
• private javax.swing.JLabel jLabel1
• private javax.swing.JButton jButton1
• private javax.swing.JPanel jPanel1
• public void actionPerformed (ActionEvent e)
• this.texto.append("Click en botón 1.")
• this.jLabel1.setText(this.texto.toString()
  )
• public void mouseClicked (MouseEvent e)
• public void mousePressed (MouseEvent e)
• public void mouseReleased (MouseEvent e)
• public void mouseEntered (MouseEvent e)

33
Ejemplo, II

• public void mouseExited (MouseEvent e)
• this.texto.append("Salir de botón 2.")
• this.jLabel1.setText(this.texto.toString()
  )
• public MiVentana()
• jLabel1 new javax.swing.JLabel()
• jPanel1 new javax.swing.JPanel()
• jButton1 new javax.swing.JButton()
• jButton2 new javax.swing.JButton()
• setTitle("Un ejemplo de eventos")
• jLabel1.setHorizontalAlignment(
• javax.swing.SwingConstants.CENTER)
• getContentPane().
• add(jLabel1, java.awt.BorderLayout.CENTER)
• jButton1.setText("Boton 1")
• jPanel1.add(jButton1)

34
Ejemplo, III

• this.textonew StringBuffer()
• this.jButton1.addActionListener(this)
• this.jButton2.addMouseListener(this)
  
• public static void main(String args)
• javax.swing.JFrame v new MiVentana()
• v.setVisible(true)

35
Ejemplo, IV
36
Más eventos

• Otros eventos
• Generados por java.awt.Container
• addFocusListener (java.awt.event.FocusEvent)
• addKeyListener (java.awt.event.KeyEvent)
• addMouseListener (java.awt.event.MouseEvent)
• addMouseMotionListener (java.awt.event.MouseEvent)
  
• Generados por JFrame y por JDialog
• addWindowListener(java.awt.event.WindowEvent)
• Otros eventos más sencillos
• java.awt.event.ActionEvent. Generado por
• JButton
• JCheckBox
• JTextField
• JComboBox
• java.awt.event.ItemEvent. Generado por
• JCheckBox
• JComboBox
• javax.swing.event.ListSelectionEvent. Generado
  por
• JList

37
Adaptadores

• Algunas interfaces oyentes tienen adaptadores
  para simplificar el código (java.awt.event.)
• Ejemplo public abstract class MouseAdapter
  extends Object implements MouseListener
• Código vacío en métodos de la interface
• Ejemplo
• El mismo que antes pero con uso de adaptadores

38
Adaptadores
39
Ejemplo, I

• import java.awt. import java.awt.event.
• import javax.swing.
• public class MiVentana extends javax.swing.JFrame
• implements ActionListener
• StringBuffer texto
• private JButton jButton2 private JLabel
  jLabel1
• private JButton jButton1 private JPanel
  jPanel1
• public void actionPerformed (ActionEvent e)
• this.texto.append("Click en botón 1.")
• this.jLabel1.setText(this.texto.toString()
  )
• public MiVentana()
• jLabel1 new javax.swing.JLabel()
• jPanel1 new javax.swing.JPanel()
• jButton1 new javax.swing.JButton()
• jButton2 new javax.swing.JButton()
• setTitle("Un ejemplo de eventos")
• addWindowListener(
• new WindowAdapter()

40
Ejemplo, II

• jLabel1.setHorizontalAlignment(
• javax.swing.SwingConstants.CENTER)
• getContentPane().
• add(jLabel1, java.awt.BorderLayout.CENTER)
• jButton1.setText("Boton 1")
• jPanel1.add(jButton1)
• jButton2.setText("Boton 2")
• jPanel1.add(jButton2)
• getContentPane().
• add(jPanel1, java.awt.BorderLayout.SOUTH)
• pack()

41
Ejemplo, III

• this.textonew StringBuffer()
• this.jButton1.addActionListener(this)
• this.jButton2.addMouseListener(
• new MouseAdapter()
• public void mouseEntered(MouseEvent
  e)
• // Aquí no sería válido
  this.texto
• texto.append("Entrar en botón
  2.")
• jLabel1.setText(texto.toString()
  )
• public void mouseExited(MouseEvent
  e)
• texto.append("Salir de botón
  2.")
• jLabel1.setText(texto.toString()
  )
• )