Upload
trinhthien
View
235
Download
0
Embed Size (px)
Citation preview
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…