1

Programación Orientada a Objetos

Componentes Gráficos

César Julio Bustacara Medina

Facultad de Ingeniería Pontificia Universidad Javeriana

03/05/2016

Ejemplo Práctico

• Programa que permite incrementar un número cada vez que se pulse un botón

• Inicialmente el cuadro de texto contiene un “0”

2

3

Constructoras JFrame() JFrame(String titulo) getContentPane() getJMenuBar() setContentPane(Container contentPane) setDefaultCloseOperation(int operation) setJMenuBar(JMenuBar menu) setLayout(LayoutManager layout) setTitle(String title) setEnabled(bool b)

Ejemplo Práctico

4

5

public class VentanaPrincipal extends JFrame { private JPanel contentPane; private JTextField textField; private MyActionListener micontrolador; public JTextField getTextField() { return textField; } public void setTextField(JTextField textField) { this.textField = textField; } /** * Launch the application. */ public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { public void run() { try { VentanaPrincipal frame = new VentanaPrincipal(); frame.setVisible(true); } catch (Exception e) { e.printStackTrace(); } } }); }

6

/** * Create the frame. */ public VentanaPrincipal() { // crear el controlador micontrolador = new MyActionListener(this); setTitle("Ejemplo01-GUI"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setBounds(100, 100, 450, 300); contentPane = new JPanel(); contentPane.setBorder(new EmptyBorder(5, 5, 5, 5)); setContentPane(contentPane); contentPane.setLayout(null); textField = new JTextField(); textField.setText("0"); textField.setBounds(85, 11, 153, 20); contentPane.add(textField); textField.setColumns(10); JButton btnIncrementarValor = new JButton("Incrementar Valor"); btnIncrementarValor.addActionListener(micontrolador); btnIncrementarValor.setBounds(85, 58, 153, 23); contentPane.add(btnIncrementarValor); } }

7

public class MyActionListener implements ActionListener { private VentanaPrincipal ventana; public MyActionListener(VentanaPrincipal ventana){ this.ventana = ventana; } @Override public void actionPerformed(ActionEvent e) { // TODO Auto-generated method stub String valor = (ventana.getTextField()).getText(); int valFinal = Integer.parseInt(valor); valFinal++; (ventana.getTextField()).setText(String.valueOf(valFinal)); } }

Ejercicio: Suma y Resta

• Crear un programa que permita sumar o restar dos números

• Añadir dos cajas de texto, una para cada número

• Añadir dos botones, uno para sumar y otro para restar

• Añadir una etiqueta para mostrar el resultado Cada botón tendrá su propio Listener para “escuchar” el click

8

Ejercicio: Suma y Resta

9

Ejercicio 2: : Suma y Resta (2)

• Extender el ejercicio anterior para que tanto el botón de sumar como el de restar compartan el mismo Listener

• Para ello, en el método actionPerformed se debe comprobar qué botón generó el evento.

• De acuerdo al botón que fue pulsado, realizar una operación u otra.

10

Posicionamiento de los componentes: Layouts

• Los Layouts permiten distribuir los controles de distintas maneras en un contenedor

• Cada contenedor puede tener su Layout: Por ejemplo, una ventana puede tener un Layout, contener dos JPanels dispuestos según ese Layout y, luego, cada JPanel podría tener su propio Layout.

11

Tipos de Layout

12

BorderLayout • Los paneles de contenido de los JFrame, por defecto,

están inicializados con este tipo de Layout

• Permite colocar componentes (simples o contenedores) en cinco posiciones: Arriba, Abajo, Izquierda, Derecha y Centro

• Las posiciones se indican al añadir el componente al contenedor (mediante el método add – Arriba: PAGE_START o NORTH

– Abajo: PAGE_END o SOUTH

– Izquierda: LINE_START o WEST

– Derecha: LINE_END o EAST

– Centro: CENTER

13

BorderLayout Funciones importantes del API:

• BorderLayout(int horizontalGap, int verticalGap)

• setHgap (int)

• setVgap (int)

14

// Se crea el layout con gap de 5 píxeles en ambos lados BorderLayout layout = new BorderLayout( 5, 5 ); // Se asocia el layout al Frame actual setLayout( layout ); // Se adiciona el botón al Frame, en la posición Norte JButton button = new JButton(“NORTH”); add( button, BorderLayout.NORTH );

Ejercicio • Crear la interfaz que se observa abajo.

– Se debe usar BorderLayout para colocar los botones. – Al pulsar un botón, ese botón debe ocultarse. – El resto de botones ocuparán el espacio disponible

automáticamente. – Si había otro botón oculto, debe volver a mostrarse

(sólo debe haber un botón oculto cada vez) – Consejo: usar un array de JButtons y el mismo

Listener para todos

15

LayoutManager : manejador de disposición y apariencia

– Define el tamaño y posición de un componente dentro de un contenedor.

– JFrame, JPanel, JApplet, JDialog lo tienen por defecto (BorderLayout) pero se puede asociar otro.

– Ejemplos:

Componente etiqueta: JLabel

JLabel: Etiquetas • Se utilizan para mostrar instrucciones de texto ó

información que explica el propósito de un componente en una forma.

– Cada JLabel tiene un nombre que lo identifica de manera única dentro del contenedor

Otros métodos del JLabel

• toolTipText(): especifica un descriptivo del componente gráfico

• getText() : retorna el valor del Jlabel

• setText(String texto): asigna el valor al JLabel.

Componentes cajas de edición: JTextComponent

clase JTextComponent • Le permite al usuario entrar texto en un

componente, cuando dicho componente tiene el foco, esto es, tiene el cursor ubicado sobre él.

• Algunos JTextComponent (subclases) – JTextField

– JPasswordField

– JFormattedTextField

Clase JTextField

Métodos:

String getText();

void setText(String texto);

Componentes botones

Botón • Componente sobre el cual el usuario hace

click para ejecutar una acción específica

• Los botones pueden ser: – Botón de comando

– Caja de chequeo

– Botón de radio

– Botón de alternado

Botón de Comando

• Genera un evento cuando el usuario hace click sobre él

• Se crea usando la clase JButton

• El método setText() permite cambiar el texto que se ve en el botón

26

Jerarquías de eventos

• Cada vez que se produce un evento dicho evento se representa como una instancia de una clase descendiente de AWTEvent.

ActionEvent (1)

TextEvent (1)

AWTEvent

Object

EventObject

AdjustmentEvent (1)

ComponentEvent ItemEvent (1)

FocusEvent WindowEvent InputEvent ContainerEvent PaintEvent

KeyEvent MouseEvent

Fuentes de eventos

• La fuente (source) de un evento es el objeto que lo detecta y lo comunica al objeto receptor (listener).

• Ejemplos de fuentes y eventos generados

Fuente Evento generado

Pulsación sobre un botón

Pulsa <Return> sobre un campo de texto

Pulsar sobre una opción de menú

ActionEvent

Cerrar la ventana principal de la aplicación WindowEvent

Pulsar con el ratón sobre un componente MouseEvent

Mover el ratón sobre un componente MouseEvent

Un componente se hace visible ComponentEvent

Eventos generados por componentes AWT Componente Evento Significado

Button ActionEvent Pulsar el ratón sobre un botón

Checkbox ItemEvent Seleccionar o deseleccionar un item

CheckboxMenuItem ItemEvent

Choice ItemEvent

Component FocusEvent Obtener o perder el foco

ComponentEvent Mover, cambiar tamaño, mostrar u ocultar un componente

KeyEvent Pulsar o soltar un tecla

MouseEvent

Pulsar o soltar un botón del ratón, entrar o salir de un

componente, mover o arrastrar el ratón (tenga en cuenta que el

evento tiene 2 interfaces oyentes MouseListener y

MouseMotionListener)

Container ContainerEvent Añadir o eliminar un componente de un contenedor

List ActionEvent Hacer doble click sobre un item de la lista

ItemEvent Seleccionar o deseleccionar un item de la lista

MenuItem ActionEvent Seleccionar un item de un menú

Scrollbar AdjustmentEvent Cambiar el valor de la barra de desplazamiento

TextComponent TextEvent Cambiar el contenido (texto).

TextField ActionEvent Pulsar intro al editar un texto

Window WindowEvent Acciones sobre una ventana: abrir, cerrar, iconizar (minimizar),

restablecer, cerrar.

Eventos generados por componentes Swing

• Los eventos generados por los componentes Swing son de dos tipos: – Una primera clase que engloba los oyentes que todos los componentes Swing

pueden soportar: • Component Listener: Oyentes para el cambio en el tamaño, posición o visibilidad de

un componente. • Focus Listener: Oyentes para manejar la perdida o ganancia de foco del teclado.

• Key Listener: Oyentes para detectar pulsaciones de teclado; los eventos de teclado son activados únicamente por el componente que tiene el foco del teclado.

• Mouse Listener: Oyentes para “clicks” del ratón, pulsar un botón del ratón, soltar un botón del ratón, entrar en el área de dibujo del componente, salir de la misma.

• Mouse-motion Listener: Cambiar la posición del cursor del ratón sobre un componente.

• Mouse-wheel Listener: Movimiento de la rueda del ratón sobre un componente. • Hierarchy Listener: Oyentes para los cambios en la jerarquía de un componente. • Hierarchy Bounds Listener: Oyentes para el cambio de posición y de tamaño.

– Una segunda clase que engloba oyentes específicos para cada tipo de componente.

Oyentes específicos Componentes Swing con sus oyentes específicos

Oyente Componente

action caret change document,

undoable

edit

item list

selection window other

button

check box

color chooser

combo box

dialog

editor pane hyperlink

file chooser

formatted text

field

frame

internal frame internal frame

list list data

menu menu

menu item menu key

menu drag

mouse

Oyentes específicos (2) Oyente Componente

action caret change document,

undoable edit item list

selection window other

password

field

popup menu Popup menu

progress bar

radio button

slider

spinner

tabbed pane

table table model

table column

table model, cell

editor

text area

text field

text pane hyperlink

toggle button

tree tree expansion

tree will expand

tree model

tree selection

Interfaces receptoras

Evento Interfaz Listener Métodos de la Interfaz

ActionEvent ActionListener actionPerformed

AdjustmentEvent AdjustmentListener adjustmentValueChanged

ComponentEvent ComponentListener componentHidden, componentMoved,

componentResized, componentShown

ContainerEvent ContainerListener componentAdded,componentRemoved

FocusEvent FocusListener focusGained, focusLost

ItemEvent ItemListener itemStateChanged

KeyEvent KeyListener keyPressed,keyReleased,keyTyped

MouseEvent MouseListener mousePressed,mouseReleased, mouseEntered,

mouseExited.

MouseMotionListener mouseDragged, mouseMove

TextEvent TextListener textValueChanged

WindowEvent WindowListener windowActivated, windowClosed,

windowClosing,windowDeactivated, windowDeiconified,

windowIconified, windowOpened.

Adaptadores • Los adaptadores (adapters class) simplifican la programación de

las clases receptoras ya que no es necesario implementar todos los métodos de las interfaces listeners.

• Existe una clase adaptadora (xxxAdapter) por cada interface (xxxListener) que contenga más de un método: MouseAdapter, WindowAdapter, KeyAdapter, MouseMotionAdapter, FocusAdapter, ContainerAdapter y ComponentAdapter, etc.

• Las clases adaptadoras implementan (mediante código vacío) todos los métodos de la correspondiente interfaz.

• Las adaptadoras se extienden y se incluyen los métodos de la interfaz que sean de interés.

Programación del receptor: alternativas

• Se pueden utilizar tres estrategias:

1. Crear el receptor como clase interna, donde una clase interna es una clase definida dentro de otra, pudiendo acceder a todos los métodos y atributos de la clase que la contiene.

2. Crear el receptor como una clase independiente.

3. La propia ventana implemente el receptor.

Listener usando Adapters

36

public class MyCloseWindow extends WindowAdapter() { public void windowClosing(WindowEvent e) {

int resp; resp=javax.swing.JOptionPane.showConfirmDialog (null, “¿Esta seguro de salir de la aplicación?", "Aviso", javax.swing.JOptionPane.OK_CANCEL_OPTION); if (resp==JOptionPane.OK_OPTION) System.exit(0);

} }

}); }

Ejemplo de clase para el cierre de la aplicación validando…