Dise

1
Programación gráfica

• Diseño de la interfaz gráfica (javax.swing)
• Contenedores
• Componentes
• Modelo de eventos
• Diseño de aplicaciones
• Modelo MVC (Modelo-Vista-Control)

2
Interfaz gráfica de usuario

• El interfaz de usuario es la parte del programa
  que permite a éste interactuar con el usuario.
• AWT (Abstract Window Toolkit) biblioteca de
  clases Java para el desarrollo de Interfaces de
  Usuario Gráficas.
• La estructura básica del AWT se basa en
  Componentes y Contenedores
• Los Contenedores contienen Componentes, que son
  los controles básicos
• todos los Componentes clase Component o uno de
  sus subtipos.
• los Contenedores son instancias de la clase
  Container o uno de sus subtipos.
• No se usan posiciones fijas de los Componentes,
  sino que están situados a través de una
  disposición controlada (Layouts)

3
Interfaz gráfica de usuario. AWT
Component
ScrollBar
List
Button
Label
Canvas
Choice
Checkbox
Container
Panel
Window
ScrollPane
MenuComponent
Dialog
Frame
MenuItem
MenuBar
FileDialog
CheckBoxMenuItem
Menu
PopupMenu
4
Swing-JFC (Java Foundation Classes)

• Extensión de AWT mejora la cosmética de las
  GUIs.
• La apariencia de la aplicación se adapta al
  sistema operativo y plataforma donde se está
  ejecutando.
• Garantizan que el aspecto es el mismo aunque se
  cambie de plataforma.
• Look and Feel Metal, Window, Motif
• La aplicación se puede utilizar sin ratón sin
  añadir código
• Las clases se llaman igual que las del paquete
  java.awt pero con una J delante, esto es, JFrame,
  JButton, ...

5

• Swing Containers
• JPanel, JTabbedPane,
• JScrollPane, JSplitPane,
• JMenuBar, JPopupMenu, JToolBar
• Swing Components
• JButton, JRadioButton, JChechBox,
• JLabel, JTextArea,
• JTextField, JPasswordField,
• JComboBox, JList, JTree, JTable

6
JFrame

• paquete javax.swing
• Por defecto se crea con tamaño 0x0
• setSize(ancho, alto)
• Hay que indicar qué ocurrirá cuando el usuario
  cierre la ventana
• setDefaultCloseOperation(cte)
• cte EXIT_ON_CLOSE/DO_NOTHING_ON_CLOSE/HIDE_ON_C
  LOSE/ DISPOSE_ON_CLOSE
• Al crear un frame no se visualiza automáticamente
• setVisible(true)
• Para situar un frame en la ventana
• setLocation(x,y) //(x,y) es la esquina
  superior-izda
• setBounds(x, y, ancho, alto)

7
Toolkit

• Permite obtener información dependiente del
  sistema.
• Ejemplo Permite obtener las dimensiones de la
  pantalla para poder calcular el tamaño óptimo del
  tamaño de las ventanas de la aplicación.
• class FrameCentrado extends JFrame
• public FrameCentrado()
• try
• jbInit()
• catch(Exception e)
• e.printStackTrace()
• private void jbInit() throws Exception
• //siguiente transparencia

8
clase FrameCentrado (continuación)

• private void jbInit() throws Exception
• //obtener las dimensiones de la pantalla
• Toolkit kit Toolkit.getDefaultToolkit()
• Dimension tamañoVtna kit.getScreenSize()
• int alto tamañoVtna.height
• int ancho tamañoVtna.width
• //centrar la ventana en la pantalla
• this.setSize(ancho/2, alto/2)
• setLocation(ancho/4, alto/4)
• //Establecer título e icono
• Image img kit.getImage(icon.gif) //gif y
  jpeg
• setIconImage(img)
• setTitle(Frame centrado)

9

• No se añaden directamente los componentes a un
  frame sino a un panel de contenido.
• this.getContentPane().add()
• Los componentes en un contenedor se gestionan por
  un layout manager
• FlowLayout Alinea los componentes
  horizontalmente.
• opción por defecto en JPanel
• dentro de una fila se puede elegir la alineación
  (LEFT, RIGHT, CENTER)
• BorderLayout opción por defecto del panel de
  contenido de un JFrame.
• Puede elegir dónde colocar los componentes
  NORTH, SOUTH, EAST, WEST, CENTER (por defecto)

10
BorderLayout

• setLayout(new BorderLayout())
• this.getContentPane(componente, South)
• Las constantes se han definido como String.
• El componente tiende a ocupar todo el espacio
  disponible.
• Solución situar un panel (JPanel) en cada zona
  que necesitemos

11
Etiquetas. JLabel
JLabel etiq2 new JLabel( "Etiqueta2" )
etiq2.setText(Soy una etiqueta) etiq2.setFont(
new Font("Helvetica", Font.BOLD, 18 ))
Icon imagen new ImageIcon( "star0.gif" )
JLabel etiq3 new JLabel( "Etiqueta3") etiq3.se
tIcon(imagen)
12
JTextField, JTextArea y JScrollPane

• Introducir texto en una línea o varias.
• Métodos heredados de JTextComponent
• void setText(String t)
• String getText()
• void setEditable(boolean b)
• El layout puede ajustar el tamaño del JTextField
  aunque se establezca un tamaño preferido
  (setColumns)
• JTextArea se pueden establecer las filas (rows) y
  columnas (columns)
• Se puede añadir una barra de scroll
  (JScrollPane).Aparecerá cuando el texto exceda el
  tamaño establecido
• textArea new JTextArea(8,40)
• JScrollPane sp new JScrollPane(textArea)
• contentPane.add(scrollPane, BorederLayout.CENTER)

13
Pestañas. JTabbedPane

• Cada pestaña debe tener un JPanel para añadir
  los componentes

• String informativo sobre los componentes
• boton1.setToolTipText( "Soy el JBoton 1" )
• Se pueden asignar imágenes (Icon) a los botones
  (JButton).

14
JCheckBox y JRadioButton

• JCheckBox
• JCheckBox(String label)
• JCheckBox(String label, boolean state)
• JCheckBox(String label, Icon icon)
• boolean isSelected()
• void setSelected(boolean state)
• JRadioButton
• JRadioButton(String label, boolean state)
• JRadioButton(String label, Icon icon)
• Para una selección exclusiva se tienen que
  agrupar en ButtonGroup
• add(AbstractButton b)
• ButtonModel getSelection()
• ButtonModel
• String getActionCommand()

15
JComboBox

• Seleccionar entre muchas alternativas
• Métodos
• void setEditable(boolean b)
• void addItem(Object item)
• void insertItemAt(Object item, int index)
• void removeItem(Object item)
• void removeItemAt(int index)
• void removeAllItems()
• Object getSelectedItem()

16
JOptionPane

• Ventanas de mensajes estándar que permiten
  mostrar un mensaje de información al usuario o
  capturar información.
• Casi todos los usos de esta clase son llamadas a
  uno de los métodos static showXxxDialog
• JOptionPane.showMessageDialog()
• JOptionPane.showConfirmDialog()
• JOptionPane.showOptionDialog)()
• JOptionPane.showInputDialog()
• Todos los diálogos son modales (no continúa la
  ejecución hasta que no se cierra).
• Se pueden configurar mediante parámetros título,
  mensaje, icono, etc.

17
Ejemplos JOptionPane

• JOptionPane.showMessageDialog(null, "Cuidado con
  lo que haces", "Consejo", JOptionPane.ERROR_MESSAG
  E)
• int opcion JOptionPane.showConfirmDialog(null,
  Debes elegir uno", Decide", JOptionPane.YES_NO_O
  PTION)

Tipos de mensajes ERROR_MESSAGE INFORMATION_MESSA
GE WARNING_MESSAGE QUESTION_MESSAGE PLAIN_MESSAGE
Respuestas OK_OPTION CANCEL_OPTION YES_OPTION NO_
OPTION CLOSED_OPTION
Tipos de opciones DEFAULT_OPTION YES_NO_OPTION YE
S_NO_CANCEL_OPTION OK_CANCEL_OPTION
18
Ejemplo JOptionDialog

• Object opciones "Continuar", "Cancelar",
  "Guardar Estado"
• //Devuelve el índice de la opción elegida
• int opcion JOptionPane.showOptionDialog(null,
• "Podemos estar en un estado inconsistente",
  "OJO!!!",JOptionPane.DEFAULT_OPTION,
  JOptionPane.WARNING_MESSAGE, null, opciones,
  opciones0)

19
Ejemplo entrada de datos

• Object valores "Libro","CD","DVD"
• String respuesta(String) JOptionPane.showInputDia
  log(
• null,
• "Elija el tipo de producto", "Entrada de
  datos",
• JOptionPane.QUESTION_MESSAGE, null,
  valores,
• valores0)

20
Ejemplo entrada de datos libre

• Icon icono new ImageIcon("icons/Question.gif")
• String respuesta (String)JOptionPane.showInputDi
  alog(
• null,
• "Introduzca el nombre que va a borrar",
• "Eliminar contacto", JOptionPane.QUESTION_
  MESSAGE,
• icono, null,null)

21
Diálogos de Ficheros

• clase JFileChooser
• Métodos
• showOpenDialog para abrir fichero
• showSaveDialog para guardar fichero
• Pasos
• JFileChooser chooser new JFileChooser()
• // Establecer el directorio de trabajo como
• // el directorio por defecto
• chooser.setCurrentDirectory(new File(.))
• //Establecer un fichero por defecto
• chooser.setSelectedFile(new File(nombreFichero))
• //abrir la ventana de diálogo
• int resultado chooser.showOpenDialog(parent) ó
• int resultado chooser.showSaveDialog(parent)

22
JFileChooser.showOpenDialog
Valores de retorno JFileChooser.APPROVE_OPTION
JFileChooser.CANCEL_OPTION
File ficheroSeleccionado chooser.getSelectedFile
()
23
Filtro de ficheros

• Ejemplo mostrar sólo ficheros de imágenes gif
• import javax.swing.filechooser.FileFilter
• public class GifFilter extends FileFilter
• /
• Establece qué ficheros serán aceptador
• /
• public boolean accept (File f)
• return f.getName().toLowerCase().endsWith(.gif
  ) f.isDirectory()
• / Describe el tipo de ficheros que se van
• a mostrar
• /
• public String getDescription()
• return Imágenes GIF

24
Establecer el filtro

• chooser.setFileFilter(new GifFilter())

25
Asociar JFileChooser a una opción de menú

• void jMenuItemAbrir_actionPerformed(ActionEvent
  e)
• JFileChooser chooser new JFileChooser()
• // Establecer el directorio de trabajo como
• // el directorio por defecto
• chooser.setCurrentDirectory(new
  java.io.File("./imagenes"))
• //Establecer el filtro
• chooser.setFileFilter(new GifFilter())
• //abrir la ventana de diálogo
• int resultado chooser.showOpenDialog(this)
• if (resultado JFileChooser.APPROVE_OPTION)
  
• java.io.File f chooser.getSelectedFile()
• jLabelEstado.setText(Abriendo "
  f.getName())

26
Menús
JMenuBar
JPopupMenu

1. Añadimos un menú
2. Haciendo doble click abrimos el diseñador de
   menús

27
Diseñador de menús
28
Asignación del menú al componente

• Una vez cerrado el diseñador de menús, asignamos
  el JMenuBar al componente que lo contendrá
  (JFrame o JDialog).
• Desde el diseñador
• El resultado es que en la
• en la definición de VentanaContador
• se añada
• this.setJMenuBar(jMenuBar1)

Propiedades del JFrame o JDialog
29
Modelo de delegación de eventos

• Los eventos se encapsulan en una jerarquía de
  clases donde la clase raíz es java.util.EventObjec
  t
• Fuentes de eventos (Source)
• es un objeto que tiene la capacidad de detectar
  eventos y notificar a los receptores de eventos
  que se han producido esos eventos
• mantiene una lista de objetos receptores y los
  tipos de eventos a los que están suscritos. El
  programador crea esa lista utilizando llamadas a
  los métodos addltTipoEventogtListener() (tb
  remove).
• Generalmente un componente del interfaz gráfico
• Receptores de eventos (Listener)
• es una clase (o una subclase de una clase) que
  implementa un interfaz receptor específico
  java.util.EventListener
• declara TODOS los métodos adecuados al
  tratamiento de los eventos de su clase
• Resultan de utilidad las clases internas

30
Modelo de delegación de eventos

• Emparejamiento entre clases de eventos y
  definiciones de interfaces.
• Por ejemplo
• class MouseEvent
• interfaz MouseListener
• En java.awt.Component existe el método
  addMouseListener
• Adaptadores (Adapter)
• evita tener que escribir todos los métodos del
  interfaz
• implementa todos los métodos del interfaz con
  métodos vacíos
• una clase receptor puede definirse como una clase
  que extiende una clase Adapter (en lugar de una
  clase que implementa el interfaz) y sobreescribe
  los métodos que necesite
• Ejemplo
• public abstract class MouseAdapter implements
  MouseListener

31
Interfaces Listener
Métodos
32
Modelo de delegación de eventos. Ejemplo

• import java.awt.
• class CierraVentanas implements WindowListener
• public void windowClosing(WindowEvent we)
• Window w (Window)we.getSource()
• w.dispose()
• System.exit(0)
• public void windowOpened (WindowEvent we)
• public void windowClosed (WindowEvent we)
• public void windowActivated (WindowEvent we)
• public void windowDeactivated (WindowEvent we)
• public void windowIconified (WindowEvent we)
• public void windowDeiconified (WindowEvent we)
• public class MiAplicacion extends JFrame
• ...
• public MiAplicacion()
• ...
• this.addWindowListener(new CierraVentanas())

33
Ejemplo2 WindowAdapter

• import java.awt.
• class CierraVentanas extends WindowAdapter
• //Sólo implementamos el método que necesitamos
• public void windowClosing(WindowEvent we)
• Window w (Window)we.getSource()
• w.dispose()
• System.exit(0)
• public class MiAplicacion extends JFrame
• ...
• public MiAplicacion()
• ...
• this.addWindowListener(new CierraVentanas())
• ...

34
Ejemplo JFrameContador v.1
1) JButton jButtonDec
2) jButtonDec.addActionListener(new
BDListener()) 3) //Clase interna en
JFrameContador class BDListener implements
ActionListener public void
actionPerformed(ActionEvent event)
miConta.decrementar()
imprimirValor()
35
Ejemplo JFrameContador v.2

• Cualquiera de las clases listener pueden ser
  clases
• anónimas, que tiene la ventaja de no necesitar
  un nuevo
• nombre de clase

jButtonDec.addActionListener(new
ActionListener() public void actionPerformed(Act
ionEvent event) miConta.decrementar()
imprimirValor() )

• Ningún otro componente podría invocar a este
  ActionListener

36
En JBuilder se puede elegir el estilo
Clase interna
37
Generar los métodos asociados a los eventos sobre
los componentes, en el estilo seleccionado
void jButtonSumar_actionPerformed(ActionEvent e)
//acciones asociadas al evento (programador)
conta.incrementar() imprimirValor()
//rellena el JTextField
38
Diseñador de menús. Acciones asociadas
void jMenuItemSalir_actionPerformed(ActionEvent
e) //El cuerpo lo rellena el
programador System.exit(0)
39
interface Action/ class AbstractAction

• Métodos
• void actionPerformed(ActionEvent event)
• void setEnabled(boolean b)
• boolean isEnabled()
• void putValue(String key, Object value)
• NAME, SMALL_ICON, SHORT_DESCRIPTION,
  MNEMONIC_KEY, ACCELERATOR_KEY
• Object getValue(String key)
• void addPropertyChangeListener(PropertyChangeListe
  ner listener)
• void removePropertyChangeListener(PropertyChangeLi
  stener listener)
• Ejemplo
• action.putValue(Action.NAME, Abrir")
• action.putValue(Action.SMALL_ICON,new
  ImageIcon(open.gif"))

40
Ejemplo Acción abrir fichero

• private class AbrirAction extends
  AbstractAction
• public AbrirAction()
• putValue(Action.NAME, "Abrir")
• putValue(Action.SMALL_ICON,
• new ImageIcon("./imagenes/open.gif"))
• public void actionPerformed (ActionEvent e)
• abrirFichero()
• En el método jbInit()
• //Añadir la misma acción a la barra de tareas y
  menú
• AbrirAction aa new AbrirAction()
• jToolBarArchivo.add(aa)
• jMenuItemAbrir.setAction(aa)

41
Asociar acciones a teclas

• Clase KeyStroke, encapsula la descripción de una
  tecla
• Para generar un objeto no se llama al constructor
  sino al método static, getKeyStroke
• Todo JComponent tiene (entre otros) un mapa de
  entrada (InputMap) que registra los objetos
  KeyStroke, cuando el componente contiene el
  componente que tiene el foco del teclado.
• InputMap imap panel.getInputMap(JComponent.WHEN_
  ANCESTOR_OF_FOCUSED_COMPONENT)
• Todo componente tiene un mapa de acciones
  (ActionMap) que es el que realmente asocia
  KeyStroke con acciones.
• Se asocian las acciones con las teclas
  asociándoles el mismo nombre.

42
Ejemplo asociar keyStroke con acción

• InputMap imap panel.getInputMap(JComponent.WHEN
  _ANCESTOR_OF_FOCUSED_COMPONENT)
• KeyStroke ctrlY KeyStroke.getKeyStroke(KeyEvent.
  VK_Y, Event.CTRL_MASK)
• //o KeyStroke ctrlY KeyStroke.getKeyStroke(ctrl
  Y)
• imap.put(ctrlY, panel.yellow)
• ActionMap amap panel.getActionMap()
• ColorAction yellowAction new ColorAction()
• amap.put(panel.yellow, yellowAction)