Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

´Indice 1. Introducci´ on

1

2. Crear una ventana

2

3. Componentes swing

5

3.1. JPanel y JLabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.2. ImageIcon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.3. JTextField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.4. JTextArea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.5. JButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.6. JCheckBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.7. JRadioButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.8. ButtonGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.9. JComboBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 3.10. JList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 3.11. JTable y JScrollPane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.12. JTree

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.13. JMenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4. Organizaci´ on de los componentes

16

4.1. BorderLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.2. FlowLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3. GridLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 4.4. CardLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.5. GridBagLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5. Tratamiento de eventos 5.1. MouseListener

19

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

5.2. KeyListener . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.3. WindowListener

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

5.4. ActionListener . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5.5. TextListener . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5.6. ItemListener

1.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Introducci´ on

En esta sesi´on se van a ver algunos aspectos de JFC (Java Foundation Classes). JFC es un conjunto de componentes para trabajo con interfaces gr´aficas de usuario en Java. Contiene: Abstract Window Toolkit (AWT)

API para el dise˜ no de interfaces gr´ aficas de usuario que se integran en el sistema de ventanas nativo del sistema donde se ejecutan, incluyendo APIs para arrastrar y soltar.

Java 2D Ir al ´ındice

[email protected]

P´agina: 1

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

APIs para trabajar con gr´ aficos 2D, trabajo con im´ agenes, texto e impresi´ on.

Swing

APIs que extienden AWT para proporcionar una biblioteca de componentes para el dise˜ no de interfaces gr´ aficas de usuario enteramente realizadas en Java.

Accesibilidad

APIs para permitir que las aplicaciones sean accesibles a las personas con discapacidades.

Internacionalizaci´on

Todas estas APIs incluyen soporte para crear aplicaciones que puedan ser utilizadas independientemente de la localizaci´ on del usuario.

Aqu´ı vamos a ver algo de Swing y de AWT. A grandes rasgos, los pasos para crear una interfaz gr´afica de usuario son Crear una ventana Colocar componentes en la ventana Organizar los componentes en los contenedores Tratar los eventos

2.

Crear una ventana Se puede crear una ventana (que servir´a como contenedor de componentes) utilizando la clase

JFrame.

El siguiente c´odigo muestra c´omo se puede crear una ventana con tama˜ no 300 por 200 pixels. Ir al ´ındice

[email protected]

P´agina: 2

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

i m p o r t j a v a x . swing . ∗ ; p u b l i c c l a s s EjemploVentana { p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { Ventana ven = new Ventana ( ) ; ven . s e t D e f a u l t C l o s e O p e r a t i o n ( JFrame . EXIT ON CLOSE) ; ven . show ( ) ; } } c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { setSize (300 ,200) ; } }

El resultado al ejecutar esta aplicaci´on es el siguiente:

Si se desea que en la ventana aparezca un t´ıtulo se puede poner como primera sentencia en el constructor de Ventana la siguiente instrucci´on: s u p e r ( ” Ventana ” ) ;

En este caso se ver´a lo siguiente:

Las ventanas son contenedores de otros componentes tales como barras de men´ u, campos de texto, botones, etc. De hecho una ventana est´a constituida por una serie de capas:

Ir al ´ındice

[email protected]

P´agina: 3

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

JFrame JRoot JLayeredPane Content pane Glass pane

Para a˜ nadir componentes a la ventana, primero se debe obtener el contenedor content pane y a continuaci´on a˜ nadir los componentes a ´este. Por ejemplo, supongamos que deseamos dibujar un rect´angulo en la ventana. El rect´angulo no se puede dibujar directamente sobre un objeto del tipo JFrame. En su lugar procederemos del siguiente modo:

1. Crearemos una clase que extienda a JPanel 2. Sobreescribiremos su m´etodo paintComponent(Graphics g) 3. A˜ nadiremos un objeto de este tipo a la ventana.

El c´odigo se muestra a continuaci´on: i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a . awt . ∗ ; c l a s s MiPanel e x t e n d s JPanel { p u b l i c v o i d paintComponent ( G r a p h i c s g ) { s u p e r . paintComponent ( g ) ; g . drawRect ( 2 0 , 2 0 , 8 0 , 8 0 ) ; } } c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { getContentPane ( ) . add ( new MiPanel ( ) ) ; setSize (300 ,200) ; } }

p u b l i c c l a s s EjemploVentana2 { p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { Ventana ven = new Ventana ( ) ;

Ir al ´ındice

[email protected]

P´agina: 4

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

ven . s e t D e f a u l t C l o s e O p e r a t i o n ( JFrame . EXIT ON CLOSE) ; ven . show ( ) ; } }

Se ha sobreescrito un m´etodo de la clase JPanel donde especificamos qu´e se debe realizar cuando haya que mostrar este componente, pero... ¿donde llamamos a este m´etodo?. La respuesta es: en ning´ un sitio. Este m´etodo es llamado autom´aticamente cada vez que hay que pintar el componente y esto ocurre cada vez que:

Cuando hay que mostrarlo por primera vez Cuando se modifica el tama˜ no de la ventana Cuando la ventana estaba minimizada y se vuelve a mostrar. Cuando otra aplicaci´on que cubre a la ventana se mueve. ...

3.

Componentes swing

Un componente es un objeto que tiene una representaci´on gr´afica y que puede ser mostrado por pantalla y que puede utilizado por el usuario. Ejemplos de componentes son: JButton, JTextField, JScrollPane, JTextArea, 1 Utilizan como base la clase java.awt.Component que est´a definida como abstracta. Todos los componentes (excepto los men´ us) extienden a esta clase. Los componentes se pueden dividir en dos categor´ıas: Un conjunto de componentes est´a formado por widgets 2 . Otro conjunto est´a formado por contenedores. Estos componentes extienden a la clase java.awt.Container (que es una clase abstracta que extiende a Component). Los contenedores son componentes que pueden incluir otros componentes. La siguiente figura muestra la relaci´on entre componentes y contenedores 1

Hay otra serie de clases que no empiezan por J: Button, TextField, TextArea,... que pertenecen a AWT. Contracci´ on de Window y gadget. Una representaci´ on visible de un componente que puede ser manipulada por el usuario. Botones, campos de texto y barras de desplazamiento son ejemplos de widgets 2

Ir al ´ındice

[email protected]

P´agina: 5

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

Contenedor alto nivel JFrame JApplet

Contenedor intermedio

}} }} } }} }}

JPanel JScrollPane

...

...

PPP PPP PPP AA PPP AA PPP AA PPP AA PPP A PP Contenedor PPPP Componentes intermedio JPanel JScrollPane

...

...

Componentes

Componentes

JButton JTextField

JButton JTextField

...

JButton JTextField

...

...

...

Vamos a ver algunos de los componentes que ofrece Swing.

3.1.

JPanel y JLabel

Un objeto de la clase JPanel sirve para contener otros componentes. La clase JLabel se utiliza para crear etiquetas de texto.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; JPanel p = new JPanel ( ) ; p . add ( new J L a b e l ( ” Ejemplo de JPanel ” ) ) ; c . add ( p ) ; setSize (200 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 6

Interfaces Gr´aficas de Usuario en Java Julio 2004.

3.2.

MySQL y Java Universitat de Val`encia

ImageIcon

Objetos de esta clase se pueden utilizar para mostrar im´agenes.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( S t r i n g f i c h ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; ImageIcon i i = new ImageIcon ( f i c h ) ; c . add ( new J L a b e l ( ” ” , i i , J L a b e l .CENTER) ) ; setSize (650 ,500) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( a r g s [ 0 ] ) ; } }

3.3.

JTextField

Objetos de esta clase se utilizan para que el usuario pueda introducir datos a la aplicaci´on.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; J T e x t F i e l d campoTexto = new J T e x t F i e l d ( 2 0 ) ; c . add ( new J L a b e l ( ”Nombre” ) ) ; c . add ( campoTexto ) ; setSize (350 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 7

Interfaces Gr´aficas de Usuario en Java Julio 2004.

3.4.

MySQL y Java Universitat de Val`encia

JTextArea

Objetos de esta clase se utilizan para que el usuario pueda introducir datos tipo texto de gran tama˜ no.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; JTextArea a r e a = new JTextArea ( 8 , 2 0 ) ; c . add ( new J L a b e l ( ” O b s e r v a c i o n e s ” ) ) ; c . add ( a r e a ) ; setSize (350 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

3.5.

JButton

Un objeto de esta clase representa un bot´on.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; JButton b1 = new JButton ( ” Aceptar ” ) ; JButton b2 = new JButton ( ” C a n c e l a r ” ) ; c . add ( b1 ) ; c . add ( b2 ) ; setSize (350 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 8

Interfaces Gr´aficas de Usuario en Java Julio 2004.

3.6.

MySQL y Java Universitat de Val`encia

JCheckBox

Sirve para seleccionar elementos.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; JCheckBox cb = new JCheckBox ( ” P i z a r r a ” ) ; cb . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 2 0 ) ) ; c . add ( cb ) ; setSize (200 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

3.7.

JRadioButton

Sirve para seleccionar elementos.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; JRadioButton rb=new JRadioButton ( ” P i z a r r a ” ) ; rb . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 2 0 ) ) ; c . add ( rb ) ; setSize (200 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 9

Interfaces Gr´aficas de Usuario en Java Julio 2004.

3.8.

MySQL y Java Universitat de Val`encia

ButtonGroup

Se pueden agrupar una serie de JRadioButton de forma que s´olo pueda estar seleccionado uno de ellos. i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; c . add ( new J L a b e l ( ” S e l e c c i o n a e l t i p o de c o m b u s t i b l e ” ) ) ; Font f u e n t e = new Font ( ” A r i a l ” , Font . PLAIN , 1 8 ) ; JRadioButton g a s = new JRadioButton ( ” G a s o l i n a ” ) ; gas . setFont ( fuente ) ; JRadioButton d i e = new JRadioButton ( ” D i e s e l ” ) ; die . setFont ( fuente ) ; // Agrupamos l o s b o t o n e s ButtonGroup grupo = new ButtonGroup ( ) ; grupo . add ( g a s ) ; grupo . add ( d i e ) ; JPanel r a d i o P a n e l = new JPanel ( ) ; r a d i o P a n e l . s e t L a y o u t ( new GridLayout ( 0 , 1 ) ) ; r a d i o P a n e l . add ( g a s ) ; r a d i o P a n e l . add ( d i e ) ; c . add ( r a d i o P a n e l ) ; setSize (300 ,300) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 10

Interfaces Gr´aficas de Usuario en Java Julio 2004.

3.9.

MySQL y Java Universitat de Val`encia

JComboBox

Sirve para mostrar una lista desplegable de elementos.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; JComboBox cb = new JComboBox ( ) ; cb . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 2 0 ) ) ; cb . addItem ( ” P i z a r r a ” ) ; cb . addItem ( ” P a n t a l l a ” ) ; cb . addItem ( ” P r o y e c t o r ” ) ; c . add ( cb ) ; setSize (200 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

3.10.

JList

Objetos de esta clase sirven para mostrar una lista con elementos.

Ir al ´ındice

[email protected]

P´agina: 11

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new FlowLayout ( ) ) ; String [ ] datos = {” Pizarra ” , ” Pantalla ” , ” Proyector ” }; J L i s t l i s t a = new J L i s t ( d a t o s ) ; c . add ( l i s t a ) ; setSize (200 ,200) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

3.11.

JTable y JScrollPane

Objetos del tipo JTable sirven para mostrar informaci´on en forma tabular. Los objetos del tipo JScrollPane sirven para contener componentes y mostrar barras de desplazamiento. i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r cp = getContentPane ( ) ; cp . s e t L a y o u t ( new BorderLayout ( ) ) ; // Nombres de l a s columnas f i n a l S t r i n g [ ] nombreCol = { ” S e s i o n ” , ”Tema” , ” Fecha ” , ” Aula ” } ; // Datos Object [ ] [ ] datos = { { ” 1 ” , ”MySQL” , ”12−07−04” , ” 5 ” } , { ” 2 ” , ”MySQL” , ”13−07−04” , ” 5 ” } , { ” 3 ” , ”JDBC” , ”14−07−04” , ” 5 ” } , { ” 4 ” , ”GUI” , ”15−07−04” , ” 5 ” } , { ” 5 ” , ” P r o y e c t o ” , ”16−07−04” , ” 5 ” } } ; JTable t a b l a = new JTable ( d at os , nombreCol ) ; t a b l a . s e t F o n t ( new Font ( ” A r i a l ” , Font .BOLD, 1 8 ) ) ; t a b l a . setRowHeight ( 2 4 ) ; J S c r o l l P a n e j s p = new J S c r o l l P a n e ( t a b l a ) ; // , ver , hor ) ; cp . add ( j s p , BorderLayout .CENTER) ; setSize (500 ,300) ; setVisible ( true ) ;

Ir al ´ındice

[email protected]

P´agina: 12

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

} p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ejercicio 1 Realizar una consulta en la que se muestren las familias del Reino Unido donde el precio de estancia por d´ıa sea menor o igual a 18 euros, se debe seleccionar el nombre de la familia, la ciudad y el tipo de casa. El resultado se debe mostrar en una JTable.

3.12.

JTree

Objetos de este tipo sirven para mostrar la informaci´on en forma de ´arbol.

i m p o r t j a v a x . swing . ∗ ; i m p o r t j a v a x . swing . t r e e . ∗ ; i m p o r t j a v a . awt . ∗ ; p u b l i c c l a s s Ventana e x t e n d s JFrame{ p r i v a t e JTree a r b o l ; p u b l i c Ventana ( ) {

C o n t a i n e r c = getContentPane ( ) ; c . s e t L a y o u t ( new BorderLayout ( ) ) ; // C o n s t r u c c i o n d e l a r b o l DefaultMutableTreeNode a s i g = new DefaultMutableTreeNode ( ” E n l a c e s ” ) ; DefaultMutableTreeNode tema = n u l l ; DefaultMutableTreeNode s e c c i o n = n u l l ; tema = new DefaultMutableTreeNode ( ” B u s c a d o r e s ” ) ; a s i g . add ( tema ) ; s e c c i o n = new DefaultMutableTreeNode ( ” Google ” ) ;

Ir al ´ındice

[email protected]

P´agina: 13

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

tema . add ( s e c c i o n ) ; s e c c i o n = new DefaultMutableTreeNode ( ”Yahoo” ) ; tema . add ( s e c c i o n ) ;

tema = new DefaultMutableTreeNode ( ” Java ” ) ; a s i g . add ( tema ) ; s e c c i o n = new DefaultMutableTreeNode ( ”Sun” ) ; tema . add ( s e c c i o n ) ; s e c c i o n = new DefaultMutableTreeNode ( ”IBM” ) ; tema . add ( s e c c i o n ) ; s e c c i o n = new DefaultMutableTreeNode ( ” JavaWorld ” ) ; tema . add ( s e c c i o n ) ;

a r b o l = new JTree ( a s i g ) ; a r b o l . s e t F o n t ( new Font ( ” A r i a l ” , Font .BOLD, 2 0 ) ) ; c . add ( a r b o l , BorderLayout .CENTER) ; setSize (400 ,600) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 14

Interfaces Gr´aficas de Usuario en Java Julio 2004.

3.13.

MySQL y Java Universitat de Val`encia

JMenu

i m p o r t j a v a . awt . ∗ ; i m p o r t j a v a x . swing . ∗ ; c l a s s Ventana e x t e n d s JFrame{ p r i v a t e JMenuBar mb ; Ventana ( ) { // Se c r e a una b a r r a de men´ us mb = new JMenuBar ( ) ; // Creamos un e l e m e n t o d e l men´ u JMenu a r c h i v o = new JMenu ( ” Ar c hi v o ” ) ; a r c h i v o . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 2 0 ) ) ; // Creamos y a˜ n adimos submen´ us JMenuItem nuevo = new JMenuItem ( ”Nuevo” ) ; nuevo . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 1 6 ) ) ; a r c h i v o . add ( nuevo ) ; JMenuItem a b r i r = new JMenuItem ( ” A b r i r ” ) ; a b r i r . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 1 6 ) ) ; a r c h i v o . add ( a b r i r ) ; JMenuItem v e r = new JMenuItem ( ” Ver t o d o s ” ) ; v e r . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 1 6 ) ) ; a r c h i v o . add ( v e r ) ; // Ahora a˜ n adimos a r c h i v o a l a b a r r a de menus mb . add ( a r c h i v o ) ; // Creamos o t r o e l e m e n t o d e l men´ u JMenu e d i t a r = new JMenu ( ” E d i t a r ” ) ; e d i t a r . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 2 0 ) ) ; // Creamos y a˜ n adimos submen´ us JMenuItem c o p i a r = new JMenuItem ( ” C op ia r ” ) ; c o p i a r . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 1 6 ) ) ; e d i t a r . add ( c o p i a r ) ; JMenuItem p e g a r = new JMenuItem ( ” Pegar ” ) ; p e g a r . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 1 6 ) ) ; e d i t a r . add ( p e g a r ) ; JMenuItem c o r t a r = new JMenuItem ( ” C o r t a r ” ) ; c o r t a r . s e t F o n t ( new Font ( ” A r i a l ” , Font . PLAIN , 1 6 ) ) ; e d i t a r . add ( c o r t a r ) ; // A˜ n adimos e d i t a r a l a b a r r a de menu mb . add ( e d i t a r ) ;

setJMenuBar (mb) ; setSize (500 ,500) ; setVisible ( true ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { new Ventana ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 15

Interfaces Gr´aficas de Usuario en Java Julio 2004.

4.

MySQL y Java Universitat de Val`encia

Organizaci´ on de los componentes Cuando en una ventana hay muchos componentes hay que organizarlos de alg´ un modo.

Java proporciona diversos esquemas de organizaci´on (layout managers) que pueden ser utilizados para organizar los componentes dentro de los contenedores. Los gestores de organizaci´on se encargan de reorganizar los componentes en caso de que el usuario cambie el tama˜ no de la ventana. Los gestores de organizaci´on que ofrece Java son: BorderLayout, FlowLayout, BoxLayout, CardLayout, GridLayout, GridBagLayout

El procedimiento es siempre el mismo, se crea un objeto de alguna de estas clases y se le indica al contenedor que organice los componentes utilizando el objeto (para ello los contenedores disponen del m´etodo setLayout(LayoutManager m).

4.1.

BorderLayout

Se puede utilizar para colocar en un contenedor cinco componentes como m´aximo ya que proporciona cinco posiciones donde colocar los componentes, estas son: NORTH (arriba), SOUTH (abajo), WEST (izquierda), EAST (derecha) y CENTER (en el centro).

Ir al ´ındice

[email protected]

P´agina: 16

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

i m p o r t j a v a . awt . ∗ ; i m p o r t j a v a x . swing . ∗ ; c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; JButton JButton JButton JButton JButton

b1 b2 b3 b4 b5

= = = = =

new new new new new

JButton ( ”A” ) ; JButton ( ”B” ) ; JButton ( ”C” ) ; JButton ( ”D” ) ; JButton ( ”E” ) ;

c . s e t L a y o u t ( new BorderLayout ( ) ) ; c . add ( b1 , BorderLayout .NORTH) ; c . add ( b2 , BorderLayout .SOUTH) ; c . add ( b3 , BorderLayout .WEST) ; c . add ( b4 , BorderLayout . EAST) ; c . add ( b5 , BorderLayout .CENTER) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { Ventana v = new Ventana ( ) ; v . setSize (300 ,300) ; v . show ( ) ; } }

4.2.

FlowLayout

Coloca los componentes de izquierda a derecha conforme se van a˜ nadiendo a la ventana. El tama˜ no de los componentes se ajusta a su contenido.

Ir al ´ındice

[email protected]

P´agina: 17

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

i m p o r t j a v a . awt . ∗ ; i m p o r t j a v a x . swing . ∗ ; c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; JButton JButton JButton JButton JButton

b1 b2 b3 b4 b5

= = = = =

new new new new new

JButton ( ”A” ) ; JButton ( ”B” ) ; JButton ( ” Bot´ o n m´ as l a r g o ” ) ; JButton ( ”D” ) ; JButton ( ”E” ) ;

c . s e t L a y o u t ( new FlowLayout ( ) ) ; c . add ( b1 ) ; c . add ( b2 ) ; c . add ( b3 ) ; c . add ( b4 ) ; c . add ( b5 ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { Ventana v = new Ventana ( ) ; v . setSize (200 ,200) ; v . show ( ) ; } }

4.3.

GridLayout

Coloca los componentes en filas y columnas en funci´on de los valores pasados al constructor. Todas las celdas tendr´an el mismo tama˜ no.

i m p o r t j a v a . awt . ∗ ; i m p o r t j a v a x . swing . ∗ ; c l a s s Ventana e x t e n d s JFrame{ p u b l i c Ventana ( ) { C o n t a i n e r c = getContentPane ( ) ; JButton b1 = new JButton ( ”A” ) ; JButton b2 = new JButton ( ”B” ) ; JButton b3 = new JButton ( ”C” ) ; JButton b4 = new JButton ( ”D” ) ; JButton b5 = new JButton ( ”E” ) ; c . s e t L a y o u t ( new GridLayout ( 2 , 3 ) ) ; c . add ( b1 ) ; c . add ( b2 ) ; c . add ( b3 ) ; c . add ( b4 ) ; c . add ( b5 ) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { Ventana v = new Ventana ( ) ; v . setSize (300 ,300) ; v . show ( ) ; } }

Ir al ´ındice

[email protected]

P´agina: 18

Interfaces Gr´aficas de Usuario en Java Julio 2004.

4.4.

MySQL y Java Universitat de Val`encia

CardLayout

Se puede utilizar para mostrar de forma condicional unos elementos u otros, de forma que se puede controlar qu´e elementos ser´an visibles. Una ilustraci´on es una pila de cartas en las que s´olo la superior es visible en un instante dado.

4.5.

GridBagLayout

Este es un organizador complejo que permite ajustar la posici´on de los componentes. Al colocar los componentes en los contenedores se especifican las restricciones que se deben cumplir ( posici´ on del componente, anchura y altura del componente, separaci´on entre los componentes, posici´on dentro del espacio que ocupa, ...). Ejercicio 2 Se pide construir la interfaz gr´afica que se muestra en la siguiente figura.

5.

Tratamiento de eventos

Hasta ahora las interfaces gr´aficas que se han mostrado tienen poca utilidad ya que no responden a las acciones del usuario. ¿Qu´e ocurre si pulsamos sobre un bot´on? ¿Qu´e ocurre si pulsamos sobre una celda de la tabla? ¿Qu´e ocurre si pulsamos sobre un elemento de un men´ u? Pues con lo que hemos hecho hasta ahora, aparentemente no sucede nada, no se obtiene ninguna respuesta.

Ir al ´ındice

[email protected]

P´agina: 19

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

El bot´on es una fuente de eventos

En una GUI colocamos una serie de componentes entre los cuales se encuentra un JButton. Este componente es una fuente de eventos de rat´ on.

1 El usuario pulsa el rat´on sobre el bot´on

2 Se lanza un evento del tipo MouseEvent

Si el usuario pulsa con el rat´ on sobre el bot´ on se lanza un evento del tipo MouseEvent. Si no hay ning´ un objeto que recoja ese evento no sucede nada.

¿Qu´e es lo que falta? Falta especificar qu´e es lo que se debe realizar cuando se produzcan determinados eventos sobre los componentes que se coloquen en la ventana. Esta tarea es la que se conoce como tratamiento de eventos. Cualquier sistema operativo que soporte GUI’s monitoriza los eventos que se producen, como por ejemplo pulsaciones sobre las teclas o pulsaciones con un bot´on del rat´on. El sistema operativo informa sobre estos eventos a los programas que est´an en ejecuci´on. Cada programa decide qu´e hacer (si es que debe hacer algo) en respuesta a estos eventos. En Java se utiliza un modelo conocido como modelo de delegaci´ on de eventos. s El modelo de delegaci´on de eventos se basa en que los componentes disparan eventos que pueden ser tratados por escuchadores (o manipuladores).

Ir al ´ındice

[email protected]

P´agina: 20

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

Los escuchadores se registran en un componente. Por ejemplo, en un bot´on podemos registrar un escuchador de eventos de rat´on. Una vez que el escuchador ha sido a˜ nadido al componente, cuando se produzca un evento, los m´etodos apropiados del manipulador (que han sido especificados en la interfaz) ser´an llamados.

El bot´on es una fuente de eventos

1 Registramos un oyente de eventos de rat´on asociado al bot´on

En una GUI colocamos una serie de componentes entre los cuales se encuentra un JButton. Este componente es una fuente de eventos de rat´ on. Ahora registramos un oyente de eventos de rat´ on en el bot´ on.

2 El usuario pulsa el rat´on sobre el bot´on

3 Se lanza un evento del tipo MouseEvent

4 El oyente recibe la notificaci´on del evento

Si el usuario pulsa con el rat´ on sobre el bot´ on se lanza un evento del tipo MouseEvent. Los oyentes que se hayan registrados son notificados de que se ha producido un evento.

La clase EventObject del paquete java.util es la clase padre de todos los eventos. Su constructor recibe una referencia al objeto que genera el evento. Esta clase tiene dos m´etodos: getSource() que devuelve el objeto que gener´o el evento y toString(). Los paquetes relacionados con los eventos en AWT son java.awt.event. La clase abstracta AWTEvent definida en el paquete java.awt es una subclase de EventObject. Ir al ´ındice

[email protected]

P´agina: 21

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

Es la superclase de todos los eventos basados en AWT utilizados por el modelo de delegaci´ on de eventos. Hay dos clases de eventos: Eventos de componente o de bajo nivel ocurren cuando ocurre algo espec´ıfico en un componente. Por ejemplo al moverse, entrar o salir el rat´on sobre un componente, al ganar o perder la atenci´on,... Eventos sem´ anticos no son tan espec´ıficos como los anteriores y no son disparados necesariamente por una acci´on at´omica tal y como una pulsaci´on del rat´on. Las acciones que disparan estos eventos depende del objeto: por ejemplo en una lista se disparan cuando sus elementos son pulsados dos veces, en un campo de texto se disparan cuando se pulsa la tecla enter. Los eventos de componente o de bajo nivel son: ComponentEvent, ContainerEvent, FocusEvent, InputEvent, KeyEvent, MouseEvent, MouseWheelEvent y WindowEvent

Los eventos sem´anticos son: ActionEvent ,AdjustmentEvent , ItemEvent, TextEvent

A continuaci´on se muestran los eventos que se definen en AWT y cual es la acci´on que los produce Eventos AWT ActionEvent

AdjustmentEvent ItemEvent

TextEvent

Ir al ´ındice

Descripci´ on Se genera cuando el usuario pulsa un bot´on, pulsa Return en un campo de texto, selecciona un elemento de un men´ u o cuando un elemento de una lista se pulsado 2 veces. Se genera cuando se manipula una barra de deslizamiento. Evento que indica que un elemento de una lista se ha seleccionado o ha dejado de estar seleccionado. Los siguientes componentes generan eventos de este tipo: CheckBox, CheckBoxMenuItem, Choice, List. Se genera cuando se cambia el valor de un ´area de texto o de un campo de texto. Los objetos fuente de este evento son: TextField y TextArea.

[email protected]

P´agina: 22

Interfaces Gr´aficas de Usuario en Java Julio 2004.

Eventos AWT ComponentEvent

ContainerEvent FocusEvent

Eventos AWT KeyEvent MouseEvent MouseWheelEvent WindowEvent

MySQL y Java Universitat de Val`encia

Descripci´ on Un evento que indica que un componente ha sido movido, ha cambiado de tama˜ no o ha sido ocultado. AWT maneja este evento (es decir que aunque expl´ıcitamente tratemos este evento, AWT tambi´en lo har´a). Se genera cuando se a˜ nade o se elimina un componente de un contenedor. AWT trata este evento. Se genera cuando un componente gana o pierde la atenci´on. Un componente tiene la atenci´on al pulsar sobre ´el con el rat´on o por que se ha llegado a ´el pulsando la tecla de tabulaci´on. El componente que tiene la atenci´on recibe los eventos de teclado.

Descripci´ on Es una subclase de InputEvent. Se genera cuando se pulsa una tecla o libera una tecla. Es una subclase de InputEvent. Se genera cuando el rat´on se mueve, se pulsa, se arrastra, o cuando entra o sale el rat´on de un componente. Un evento que indica que la rueda del rat´on se ha movido en un componente. Se genera cuando una ventana se activa, se desactiva, se cierra, se minimiza se maximiza o se sale de ella.

La jerarqu´ıa de estas clases se muestra en el siguiente diagrama: EventObject

O

; O aC hQ 5 AWTEvent

l CC QQQQ lll xx CC QQQ lll xxx l QQQ CC l x ll x l QQQ CC l x l x l QQQ CC x lll x QQQ l C x l l C x l QQQ CC x ll x l QQQ l x C l l x C QQQ l C xx lll ComponentEvent AdjustmentEvent ActionEvent ItemEvent TextEvent 5 < O aCChPPP lllxxx PPP C l l C l xx CC PPPP lll CC PPP lll xxxx l l PPP CC x lll PPP x C l l x C l PPP l x CC x ll l PPP x l C x l C l PPP x CC x lll PPP x l l C ll xx

ContainerEvent

FocusEvent

InputEvent

x< xx x xx xx x xx xx x x xx xx

KeyEvent

Ir al ´ındice

PaintEvent

aCC CC CC CC CC CC CC CC CC

WindowEvent

MouseEvent

[email protected]

P´agina: 23

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

Vamos a ver ahora algunas de las interfaces que se ofrecen en java.awt con el fin de especificar los m´etodos que deben poseer los objetos oyentes o auditores para cada uno de los eventos.

5.1.

MouseListener

p u b l i c i n t e r f a c e MouseListener extends EventListener

Esta interfaz la deben implementar aquellas clases que est´en interesadas en escuchar eventos del tipo MouseEvent El objeto de esta clase debe registrarse en un componente utilizando su m´etodo addMouseListener. Los m´etodos que define esta interfaz son: // Metodo l l a m a d o cuando s e p u l s a y l i b e r a un b o t o n d e l r a t o n // s o b r e un componente v o i d mou seClicked ( MouseEvent e ) // Metodo l l a m a d o cuando e l r a t o n e n t r a en un componente v o i d mouseEntered ( MouseEvent e ) // Metodo l l a m a d o cuando e l r a t o n s a l e de un componente v o i d mouseExited ( MouseEvent e ) // Metodo l l a m a d o a l p u l s a r un b o t o n d e l r a t o n s o b r e un componente v o i d mousePressed ( MouseEvent e ) // Metodo l l a m a d o a l l i b e r a r un b o t o n d e l r a t o n s o b r e un componente v o i d mouseReleased ( MouseEvent e )

En el siguiente ejemplo se trata el evento: el usuario ha pulsado con el rat´ on sobre el bot´ on. Lo que se realiza en el manipulador del evento es obtener lo que el usuario haya escrito en el campo de texto y mostrarlo por la salida est´andar. i m p o r t j a v a . awt . e v e n t . ∗ ; i m p o r t j a v a . awt . ∗ ; i m p o r t j a v a x . swing . ∗ ; c l a s s EventosRaton e x t e n d s JFrame{ p r i v a t e JButton boton ; p r i v a t e J T e x t F i e l d campoTexto ; p u b l i c EventosRaton ( ) { c l a s s ManipulaMouseEvent i m p l e m e n t s M o u s e L i s t e n e r { p u b l i c v o i d mouseEntered ( MouseEvent e ) { } p u b l i c v o i d mouseExited ( MouseEvent e ) { } p u b l i c v o i d mou seClicked ( MouseEvent e ) {} p u b l i c v o i d mouseReleased ( MouseEvent e ) {} p u b l i c v o i d mousePressed ( MouseEvent e ) { System . out . p r i n t l n ( campoTexto . g e t T e x t ( ) ) ; } } C o n t a i n e r cp = getContentPane ( ) ; cp . s e t L a y o u t ( new FlowLayout ( ) ) ;

Ir al ´ındice

[email protected]

P´agina: 24

Interfaces Gr´aficas de Usuario en Java Julio 2004.

MySQL y Java Universitat de Val`encia

cp . add ( new J L a b e l ( ” I n t r o d u c e p r e c i o : ” ) ) ; campoTexto = new J T e x t F i e l d ( 2 0 ) ; cp . add ( campoTexto ) ; boton = new JButton ( ” Aceptar ” ) ; cp . add ( boton ) ; boton . a d d M o u s e L i s t e n e r ( new ManipulaMouseEvent ( ) ) ; setSize (500 ,300) ; } p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) { EventosRaton ven = new EventosRaton ( ) ; ven . s e t D e f a u l t C l o s e O p e r a t i o n ( JFrame . EXIT ON CLOSE) ; ven . show ( ) ; } }

A continuaci´on se muestra un ejemplo en el que se realiza una consulta a la base de datos utilizando un dato introducido por el usuario en un campo de texto. La consulta a la base de datos es la del ejercicio 2 de la sesi´on de JDBC pero ahora se utiliza un PreparedStatement. import import import import

j a v a . awt . e v e n t . ∗ ; j a v a . awt . ∗ ; j a v a x . swing . ∗ ; java . s q l . ∗ ;

/∗ ∗ C l a s e de apoyo . En e l l a encapsulamos l a c o n e x i o n a l a b a s e de d a t o s y ∗ las consultas ∗/ c l a s s Consultas { p r i v a t e C o n n e c t i o n con ; p r i v a t e P r e p a r e d S t a t e m e n t ps ; // C o n s t r u c t o r Consultas () { S t r i n g u r l = ” j d b c : mysql : / / l o c a l h o s t : 3 3 0 6 / e s t a n c i a s ? u s e r=u s u a r i o&password=c l a v e ” ; try { C l a s s . forName ( ”com . mysql . j d b c . D r i v e r ” ) ; con = DriverManager . g e t C o n n e c t i o n ( u r l ) ; ps = con . p r e p a r e S t a t e m e n t ( ” s e l e c t f a m i l i a s . NombreF , c a s a s . Ciudad , c a s a s . Tipo from f a m i l i a s , c a s a s where ( f a m i l i a s . IdCasa=c a s a s . IdCasa ) and ( c a s a s . p r e c i o H a b D i a