PROGRAMACIN ORIENTADA A OBJETOS CON JAVA

CAPTULO 7: Interfaces Grficos de Usuario

SWING
1

CONTENIDOS
TEMA 7: GUIs CON SWING.
1. COMPONENTES Y CONTENEDORES 2. EVENTOS 3. SWING 4. COMPONENTES BSICOS 5. COMPONENTES AVANZADOS 6. CONTENEDORES 7. LAYOUTS 8. CUADROS DE DILOGO 9. APARIENCIA 10. EJEMPLO APLICACIN POO + SWING
2

INTRODUCCIN
Cuando se desarrolla un sistema informtico, no solo se espera que este funcione bien y que se adapte a la funcionalidad que el usuario requera, sino que la forma en que este interacta con el sistema sea lo ms sencilla y cmoda posible. Para lograr este objetivo, buena parte del desarrollo del sistema se centra en la construccin de la interfaz de usuario que es la parte del programa que permite a ste interactuar con el usuario. Los lenguajes de programacin usados hoy en da utilizan la programacin orientada a objetos a la hora de disear y programar una interfaz grfica de usuario. Los componentes de la interfaz (botones, listas, barras de men, cajas de texto, ...) se consideran objetos que permiten ser manejados a travs de sus mtodos.
3

COMPONENTES Y CONTENEDORES
Los Contenedores contienen Componentes, que son los controles bsicos.

Si no se usan posiciones fijas de los Componentes, stos se sitan a travs de una disposicin controlada (layouts) en el Contenedor.
Podemos controlar eventos de todo acercndonos incluso al teclado o al ratn. tipo

No se puede separar totalmente el cdigo de aplicacin de lo que es propiamente interface grfica.

COMPONENTES Y CONTENEDORES
Los Componentes son una serie de elementos grficos bsicos, por ejemplo, los botones, las etiquetas, las listas, las casillas de verificacin, los campos de texto, etc. En AWT y Swing, todos los Componentes de la interface de usuario son instancias de la clase Component o uno de sus subtipos. Estos Componentes no se encuentran aislados, sino que deben agruparse dentro de Contenedores. En AWT y Swing, todos los Contenedores son instancias de la clase Container o uno de sus subtipos.

EVENTOS
Los eventos dependen del tipo de componente que los generen, pero no hay un nico tipo de evento para cada componente, sino que stos son compartidos por muchos tipos de componentes. Cada tipo de evento tiene asociado un oyente (listener) y cada oyente requiere de un manipulador (handler) dotado de uno o ms mtodos que sern completados con nuestro cdigo. Ejemplo:
EVENTO OYENTE MTODO COMPONENTES

ActionEvent

ActionListener actionPerformed

JButton JComboBox JMenuItem JTextField

SWING
Las clases que ofrece el API Swing nos permite desarrollar interfaces grficas de usuario mucho ms potentes y aparentes que con el AWT, debido a la cantidad y calidad de los controles grficos que ofrece.
El API Swing pertenece a las JFC (Java Foundation Classes), es decir, un conjunto de APIs que proporcionan al programador una serie de herramientas para el desarrollo de interfaces grficas de usuario, estas herramientas son las siguientes: Los componentes Swing. Look & Feel (Windows, Motif, Java, Metal, MacOS). Accesibilidad. Java 2D. Drag and Drop. La clase javax.swing.JComponent es la clase base de la jerarqua de componentes Swing, es una subclase de la clase java.awt.Container y por lo tanto es a la vez un componente y un contenedor en el sentido del AWT. java.awt.Component java.awt.Container javax.swing.JComponent
7

COMPONENTES BSICOS
Etiquetas: Las etiquetas en Swing se implementan con la clase JLabel, permiten la incorporacin de iconos y la alineacin.
JLabel etiq1 = new JLabel(); etiq1.setText( "Etiqueta1" ); JLabel etiq2 = new JLabel( "Etiqueta2" ); etiq2.setFont( new Font( "Helvetica", Font.BOLD, 18 ) ); Icon imagen = new ImageIcon( "javalogo.gif" ); JLabel etiq3 = new JLabel( "Etiqueta3", imagen, SwingConstants.CENTER ); etiq3.setVerticalTextPosition( SwingConstants.TOP ); JLabel etiq4 = new JLabel( "Etiqueta4",SwingConstants.RIGHT );

COMPONENTES BSICOS
Botones de Pulsacin: Los botones se construyen con la clase JButton. Pueden tener una etiqueta y tambin pueden contener un icono o ambas cosas. Los eventos que producen son del tipo ActionEvent y se tratan implementando la interfaz ActionListener dentro del mtodo actionPerformed(). Para que un botn produzca eventos debemos indicarlo mediante el mtodo addActionListener().
Icon icono1 = new ImageIcon( "pto-roj.gif" ); JButton boton1 = new JButton("Uno",icono1); boton1.addActionListener(this);

COMPONENTES BSICOS
Campos de Texto y reas de Texto :
Para implementar reas de texto mediante Swing se utiliza la clase JTextArea. Los campos de texto se implementan mediante la clase JTextField. Para poner un campo de password tenemos que hacer uso de la clase JPasswordField.
JTextField textField = new JTextField(); JPasswordField textPasw = new JPasswordField(10); textPasw.setEchoChar('*');

Para capturar el contenido de una caja de texto se utiliza el mtodo getText() y para escribir, el mtodo setText(cadena).

10

COMPONENTES BSICOS
Listas Desplegables:
Las listas desplegables se deben crear mediante la clase JComboBox. Para crearlas utilizamos su constructor pasndole como argumento las distintas opciones que contendr mediante un array de cadenas. Produce eventos de tipo ActionEvent y el tratamiento es igual que el de los botones (ActionListener, addActionListener(), actionPerformed()). Se pueden incorporar ms opciones a la lista (en ejecucin), para ello tenemos que hacer uso del mtodo setEditable(true).
String[] datos_marcas = {"Citroen","Fiat","Ford","Opel","Peugeot","Renault","Seat"}; JComboBox marcas = new JComboBox(datos_marcas); marcas.setEditable(true); marcas.addActionListener(this);

11

COMPONENTES BSICOS
Listas:
Utilizamos objetos de tipo JList y les pasamos como argumento las distintas opciones que contendr. Debemos establecer el modo de seleccin que le vamos a aplicar mediante el mtodo setSelectionMode(selectionMode). Los distintos modos de seleccin son los siguientes:
SINGLE_SELECTION SINGLE_INTERVAL_SELECTION

MULTIPLE_INTERVAL_SELECTION

Los eventos que producen son del tipo ListSelectionEvent y se tratan implementando la interfaz ListSelectionListener dentro del mtodo valueChanged(). Para que una lista produzca eventos debemos indicarlo mediante el mtodo addListSelectionListener(). Para proporcionar scroll automticamente a una lista hay que asociarla a un JScrollPane.
String[] datos_equipo = {"ABS","Aire Ac.","Air-bag", "Dir. Asistida","EE","Pintura Met.","Radio"}; JList equipo = new JList(datos_equipo); equipo.setSelectionMode(ListSelectionModel.MULTIPLE_INTERVAL_SELECTION); JScrollPane scrollPane = new JScrollPane(equipo); equipo.addListSelectionListener(this);

12

COMPONENTES BSICOS
Casillas de verificacin: Para construir casillas de verificacin se utiliza la clase JCheckBox. El constructor ms completo permite poner un texto, un icono y si se trata de una opcin que se quiera tener seleccionada ponerla a true. Por ejemplo:
Icon icono = new ImageIcon("icono.gif"); JCheckBox cboton1 = new JCheckBox("opcin 1", icono, true); cboton1.addItemListener(this);

Los eventos que producen son del tipo ItemEvent y se tratan implementando la interfaz ItemListener dentro del mtodo itemStateChanged(). Para que una casilla de verificacin produzca eventos debemos indicarlo mediante el mtodo addItemListener().

13

COMPONENTES BSICOS
Botones de Radio: Los botones de radio o de comprobacin se implementan a travs de la clase JRadioButton que al igual que los JCheckBox nos permiten agregar iconos en las distintas opciones. Una peculiaridad de este tipo de botones es la necesidad de agruparlos de forma que siempre haya un nico botn activo. Para realizarlo tan solo tenemos que crear un objeto de tipo ButtonGroup y agregarle cada una de las opciones que tengamos. El tratamiento de los eventos es el mismo que el de los botones.
JRadioButton rboton1 = new JRadioButton(opcin 1"); rboton1.addActionListener(this); JRadioButton rboton2 = new JRadioButton(opcin 2"); rboton2.addActionListener(this); ButtonGroup grouporb = new ButtonGroup(); grouporb.add(rboton1); grouporb.add(rboton2); 14

COMPONENTES BSICOS
Ayuda Emergente:
En Swing se puede asignar a los componentes grficos una ayuda

emergente de forma que cuando el usuario pase el ratn por el componente se le presente un texto indicativo de lo que puede hacer con ese componente. Para realizarlo utilizamos el mtodo setToolTipText(texto ayuda).
JTextField textField = new JTextField(); textField.setToolTipText("Escribe un texto y pulsa Aade");

15

COMPONENTES AVANZADOS
Mens:

Los Mens generalmente nos proporcionan el medio principal de manejo de la aplicacin. Las clases que intervienen en la construccin y manipulacin de mens son las siguientes: JMenuBar, una barra de men en una ventana. JMenu, es un componente de una barra de men. JMenuItem, representa una opcin en un men. Cuando se selecciona una opcin de un men, se genera un evento de tipo ActionEvent y se trata igual que los botones. Podemos aadir iconos a las opciones del men. Podemos insertar separadores entre las distintas opciones del men mediante el mtodo addSeparator().

16

COMPONENTES AVANZADOS
Fichas: Para realizar fichas con Swing tenemos que basarnos en la clase JTabbedPane, que puede manejar directamente todas las fichas, a base de pestaas y permite cambiar a cualquiera de ellas.
JTabbedPane tabbedPane = new JTabbedPane(); JPanel panel1 = new JPanel(); tabbedPane.addTab("Ficha 1", icono1, panel1, "Primera Ficha"); tabbedPane.setSelectedIndex(0); JPanel panel2 = new JPanel(); tabbedPane.addTab("Ficha 2", icono2, panel2, "Segunda Ficha"); JPanel panel3 = new JPanel(); tabbedPane.addTab("Ficha 3", icono3, panel3, "Tercera Ficha");

17

COMPONENTES AVANZADOS
Barra de Herramientas: Las barras de herramientas se crean mediante la clase JToolBar. Estas barras tienen la caracterstica especial de ser movibles y acoplables dentro de la interfaz grfica de usuario. Las barras de herramientas son contenedores de otros componentes Swing. Generalmente se suelen formar mediante objetos JButton que se construyen a base de iconos representativos de la accin a realizar. Al igual que con los mens podemos utilizar el mtodo addSeparator() para agregar separadores a la barra de herramientas.
JToolBar toolBar = new JToolBar(); JButton boton1 = new JButton(new ImageIcon("new.gif")); toolBar.add(boton1); JButton boton2 = new JButton(new ImageIcon("open.gif")); toolBar.add(boton2);

18

COMPONENTES AVANZADOS
Selector de ficheros:
Con la clase JFileChooser se permite seleccionar un fichero para ser abierto o guardado, as como la posibilidad de introducir el nombre del fichero. Luego ser responsabilidad del programa el llevar a cabo la apertura del fichero o la grabacin de datos. Mediante el mtodo showOpenDialog() definido en JFileChooser podremos realizar la apertura de un fichero y con el mtodo showSaveDialog() podremos mostrar un dilogo para guardar los ficheros.
JFileChooser fc = new JFileChooser(); int returnVal = fc.showOpenDialog(this); int returnVal = fc.showSaveDialog(this); if (returnVal == JFileChooser.APPROVE_OPTION){}

19

COMPONENTES AVANZADOS
Tablas:
Se basan en la clase JTable que nos ofrece una forma muy flexible de crear y mostrar tablas. Se pueden construir a partir de arrays o vectores de objetos. Tambin se permite la edicin de las tablas.

Bordes:
Nos permiten rodear una serie de componentes para poder agruparlos. La clase AbstractBorder implementa la interfaz Border y a partir de ella se crea la jerarqua de clases que representan los distintos bordes que son los que generalmente utiliza el programador.

20

CONTENEDORES
Los componentes deben situarse en un contenedor, Swing proporciona diversos contenedores como:
JWindow: Es una superficie de pantalla de alto nivel (una ventana). Una instancia de esta clase no tiene ni ttulo ni borde. Contiene mtodos generales para el manejo de ventanas. JFrame: Un JFrame o marco es una ventana con borde y ttulo. Una instancia de esta clase puede tener una barra de men. JDialog: Es una ventana con borde y ttulo pero con la caracterstica especial de que una instancia de esta clase no puede existir sin una instancia asociada de la clase JFrame. JApplet: Permite crear un applet swing. JPanel: Es un contenedor de nivel intermedio que corresponde con el rea de trabajo de la ventana. Es un Contenedor genrico de Componentes.

Cada contenedor de nivel superior tiene de forma predeterminada un panel raz al que se puede acceder por medio del mtodo getContentPane(). Para aadir a este panel los diversos componentes se utiliza el mtodo add().
this.getContentPane().add(boton); Container contenedor = getContentPane(); contenedor.add(boton); //una forma //otra forma

21

LAYOUTS
Los layout managers o gestores de disposicin ayudan a colocar los diversos Componentes que se desean incorporar a un Contenedor. Java proporciona estos esquemas predefinidos de disposicin de componentes para su correcta visualizacin en todas las plataformas, y en todas las configuraciones de pantalla que los usuarios pudieran tener.

22

LAYOUTS
FlowLayout:
Es el ms simple y el que se utiliza por defecto en todos los paneles, si no se fuerza el uso de alguno de los otros.
Los componentes aadidos a un contenedor con FlowLayout se encadenan en forma de lista, es decir, formando una cadena horizontal, de izquierda a derecha y de arriba abajo. Nos permite seleccionar el espaciado entre cada uno de los componentes.

23

LAYOUTS
BorderLayout:

El gestor de disposicin BorderLayout proporciona un esquema ms complejo de colocacin de los componentes. La composicin utiliza cinco zonas para colocar los componentes sobre ellas: North, South, East, West, y Center (Norte, Sur, Este, Oeste y Centro). Es el layout que se utilizan por defecto en las clases JFrame y JDialog.

24

LAYOUTS
GridLayout:
Es uno de los gestores de disposicin que proporciona ms flexibilidad para situar componentes. Este layout se crea mediante la utilizacin de una tabla para situar cada uno de los componentes en una celda determinada por su nmero de fila y columna. Los componentes tienen el mismo tamao. En la siguiente figura se muestra una ventana que usa este tipo de disposicin para posicionar seis botones en su interior, con tres filas y dos columnas que crearn las seis celdas necesarias para albergar los botones:

25

CUADROS DE DILOGO
Los dilogos estndar son aquellos que suelen servir para presentarle al usuario cierta informacin como por ejemplo un mensaje de advertencia.

En Swing se pueden construir a partir de la clase JOptionPane, que a su vez nos proporciona mtodos para construir distintos tipos de dilogos, los ms importantes son los siguientes:
showConfirmDialog() showInputDialog()

showMessageDialog()

26

CUADROS DE DILOGO
showConfirmDialog() Muestra un cuadro de dilogo que hace una pregunta y tiene botones de respuesta Si, No y Cancelar.
int n = JOptionPane.showConfirmDialog( this, "Dilogo de Confirmacin", "ConfirmDialog", JOptionPane.YES_NO_CANCEL_OPTION); if (n == JOptionPane.YES_OPTION){ texto1.setText("SI"); } else if (n == JOptionPane.NO_OPTION){ texto1.setText("NO"); } else if (n == JOptionPane.CANCEL_OPTION) { texto1.setText("CANCEL"); } else {texto1.setText("Ninguna Opcin"); }

27

CUADROS DE DILOGO
showInputDialog() Muestra un cuadro de dilogo que le pide cierta informacin al usuario mediante un cuadro de texto.
String respuesta = JOptionPane.showInputDialog(this, "Escribe algo:");

28

CUADROS DE DILOGO
showMessageDialog() Muestra un cuadro de dilogo que despliega un mensaje.
JOptionPane.showMessageDialog(this,"Dilogo de Mensaje","MessageDialog",JOptionPane.WARNING_MESSAGE);

29

APARIENCIA
Cada aplicacin Java tiene un objeto UIManager que determina el Look-and-Feel, es decir, la apariencia y sensacin en pantalla que van a tener los componentes Swing de esa aplicacin. Java nos permite seleccionar la apariencia de una aplicacin asociada a una plataforma, de este modo los programas que se ejecuten en Windows podrn poner esa apariencia y los que se ejecuten en Unix podrn tener apariencia Motif.

Java tiene la apariencia Metal por defecto.

Para establecer una setLookAndFeel(). apariencia se utiliza el mtodo
30

APARIENCIA
Metal:
UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");

Windows:
UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");

Motif:
UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");

31

POO + GUI
Aplicacin Cobro de Peajes Swing:

32