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)
• JOptionPane.showConfirmDialog(null, Debes elegir
  uno", Decide", JOptionPane.YES_NO_OPTION)

18
Ejemplo JOptionDialog

• Object opciones "Continuar", "Cancelar",
  "Guardar Estado"
• 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
Menús
Componente JFileChooser
JMenuBar
JPopupMenu

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

22
Diseñador de menús
23
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
24
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

25
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

26
Interfaces Listener
Métodos
27
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())

Vacios!! extends WindowAdapter
28
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())
• ...

DefaultCloseOperations EXIT_ON_CLOSE
DO_NOTHING_ON_CLOSE HIDE_ON_CLOSE
DISPOSE_ON_CLOSE
29
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()
30
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

31
En JBuilder se puede elegir el estilo
32
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
33
Diseñador de menús. Acciones asociadas
void jMenuItemSalir_actionPerformed(ActionEvent
e) //El cuerpo lo rellena el
programador System.exit(0)
34
Enlazar el menú Archivo con JFileChooser

• JFileChooser es un cuadro de diálogo para
  archivos.
• Acción asociada a la opción de menú abrir
• public class VentanaContador extends JFrame
• private JFileChooser explorador new
  JFileChooser()
• ...
• void jMenuItemAbrir_actionPerformed(ActionEvent
  e)
• if (JFileChooser.APPROVE_OPTION
• explorador.showOpenDialog(this))
• File fichero explorador.getSelectedFile(
  )
• recuperarDatos(fichero)
• También showSaveDialog

35
JFileChooser.showOpenDialog