Practica-Estructura de una GUI Contador

15/06/2015
Estructura de una GUI
Desarrolle una aplicación que permita establecer
incrementar o decrementar un contador de acuerdo al
botón que oprima el usuario. La ventana inicialmente
debe aparecer así:
Estructura de una GUI
• Definimos una clase GUI_Contador. que
extiende a JFrame.
• Definimos una clase Contador con un
método main que inicia la ejecución al crear
una instancia de GUI_Contador.
El valor va a ir cambiando a medida que se oprimen los
botones.
Estructura de una GUI
class Contador{
public static void main(String[] args) {
GUI_Contador cuadro = new
GUI_Contador();
cuadro.setVisible(true);
}
}
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
class Gui_Contador extends JFrame {
/*Atributos de instancia, objetos gráficos y de la
aplicación*/
private int numero;
private JLabel numeroEtiqueta;
private JButton botonIncrementar,botonDecrementar;
public Gui_Contador() {
//Incializa variables
numero = 0;
//Establece los valores de los atributos
setLayout(new FlowLayout());
setSize(200, 120);
setDefaultCloseOperation(EXIT_ON_CLOSE);
//Invoca a un método interno que completa la GUI
armarEtiquetaBotones();
armarPanel();
}
…
//Implementa las clases oyente
…
}
Estructura de una GUI
• Establecer los valores de los atributos gráficos
heredados de la clase JFrame.
• Crear la etiqueta para el número, establecer sus
atributos e insertarla en el panel del contador.
• Crear el botón incrementar, su oyente,
registrarlo e insertar en el panel de control.
• Crear el botón decrementar, su oyente,
registrarlo e insertar en el panel de control.
• Insertar la etiqueta y los botones en el panel de
contenido.
Estructura de una GUI
private void armarEtiquetaBotones(){
//Crea la etiqueta para el número
numeroEtiqueta = new JLabel("" + numero);
//Crea el boton incrementar, el oyente y lo registra
botonIncrementar = new JButton("Incrementar");
OyenteBotonI incrementar = new OyenteBotonI();
botonIncrementar.addActionListener(incrementar);
//Crea el boton decrementar, el oyente y lo registra
botonDecrementar = new JButton("Decrementar");
OyenteBotonD decrementar = new OyenteBotonD();
botonDecrementar.addActionListener(decrementar);
}
…
}El código puede estructurase con diferentes criterios, pero
tiene que haber un criterio lógico que facilite la lectura.
1
15/06/2015
Estructura de una GUI
private void armarPanel(){
//Inserta las componentes en el panel del frame
getContentPane().add(numeroEtiqueta);
getContentPane().add(botonIncrementar);
getContentPane().add(botonDecrementar);
}
Todos los métodos tienen acceso a los objetos gráficos
porque fueron declarados como atributos de instancia.
Estructura de una GUI
//Crea el boton incrementar, el oyente y lo
registra
botonIncrementar = new JButton("Incrementar");
OyenteBotonI incrementar = new OyenteBotonI();
botonIncrementar.addActionListener(incrementar);
Estructura de una GUI
…
class Contador extends JFrame {
…
private class OyenteBotonI implements ActionListener {
public void actionPerformed(ActionEvent event) {
numero++;
numeroEtiqueta.setText("" + numero);
}
}
private class OyenteBotonD implements ActionListener {
public void actionPerformed(ActionEvent event) {
numero--;
numeroEtiqueta.setText("" + numero);
}
}
}
Implementamos los oyentes a través de clases internas.
Esta alternativa solo es adecuada para GUI simples.
Estructura de una GUI
Modifique la aplicación de modo que la etiqueta y los
botones se insertan en diferentes paneles.
private class OyenteBotonI implements
ActionListener {
public void actionPerformed(ActionEvent event) {
numero++;
numeroEtiqueta.setText("" + numero);
}
}
Los dos botones son components reactivas, cada uno queda asociado
a un objeto oyente que establece su comportamiento.
Estructura de una GUI
La clase GUI_Contador tiene ahora seis
atributos de instancia:
• Un contador
• Dos paneles
• Una etiqueta
• Dos botones
private int numero=0;
private JPanel pContador,
pControl;
private JLabel numeroEtiqueta;
private JButton botonIncrementar,
botonDecrementar;
Estructura de una GUI
• Establecer los valores de los atributos gráficos
heredados de la clase JFrame.
• Crear la etiqueta para el número, establecer sus
atributos e insertarla en el panel del contador.
• Crear el botón incrementar, su oyente,
registrarlo e insertar en el panel de control.
• Crear el botón decrementar, su oyente,
registrarlo e insertar en el panel de control.
• Crear los paneles (en este caso se mantienen
los valores por omisión para los atributos).
• Insertar los paneles en el panel de contenido.
2
15/06/2015
public Gui_Contador() {
//Incializa variables
numero = 0;
//Establece los valores de los atributos
setLayout(new FlowLayout());
setSize(200, 120);
setDefaultCloseOperation(EXIT_ON_CLOSE);
//Invoca a un método interno que completa la GUI
armarEtiquetaBotones();
armarPaneles();
}
La división del problema en
subproblemas contribuye a mejorar
la legibilidad y facilita los cambios.
Estructura de una GUI
private void armarPanel(){
//Inserta las componentes en los paneles
pContador = new JPanel();
pControl = new JPanel();
pContador.add(numeroEtiqueta);
pControl.add(botonIncrementar);
pControl.add(botonDecrementar);
getContentPane().add(pContador);
getContentPane().add(pControl);
}
Estructura de una GUI
…
private void armarEtiquetaBotones(){
TitledBorder borde = new TitledBorder
(new LineBorder(Color.black,5,true),"");
//Crea la etiqueta y establece los valores de sus
atributos
numeroEtiqueta = new JLabel(""+ numero);
numeroEtiqueta.setHorizontalAlignment(JLabel.CENTER);
numeroEtiqueta.setPreferredSize(new Dimension(80,80));
numeroEtiqueta.setBorder(borde);
//Crea el boton incrementar, el oyente y lo registra
botonIncrementar = new JButton("Incrementar");
OyenteBotonI incrementar = new OyenteBotonI();
botonIncrementar.addActionListener(incrementar);
//Crea el boton decrementar, el oyente y lo registra
botonDecrementar = new JButton("Decrementar");
OyenteBotonD decrementar = new OyenteBotonD();
botonDecrementar.addActionListener(decrementar);
}
Estructura de una GUI
• Establecer los valores de los atributos gráficos
heredados de la clase JFrame.
• Crear los paneles
• Crear la etiqueta y establecer los valores de los
atributos
• Insertar la etiqueta en su panel
• Crear los dos botones
• Insertar los botones en su panel
• Crear el oyente del botón incrementar y el
oyente del botón decrementar.
• Registrar cada uno de los dos oyentes al botón.
• Insertar los paneles en el panel de contenido.
3